:root {
  --facebook: #3f51b5;
  --twitter: #000000;
  --linkedin: #2196f3;
  --instagram: #8521f3;
}

/*.fa-facebook-f{color: var(--facebook);}
.fa-twitter{color: var(--twitter);}
.fa-linkedin-in{color: var(--linkedin);}
.fa-instagram{color: var(--instagram);}*/

.text-facebook{color: var(--facebook);}
.text-twitter{color: var(--twitter);}
.text-linkedin{color: var(--linkedin);}
.text-instagram{color: var(--instagram);}

.bg-facebook{background: var(--facebook);}
.bg-twitter{background: var(--twitter);}
.bg-linkedin{background: var(--linkedin);}
.bg-instagram{background: var(--instagram);}


.social-media a{ display:flex; align-items:center; justify-content:center;color: #fff; text-decoration: none; margin-left: 10px; border-radius: 50%}
.social-size a i{font-size: 14px;}
.social-size{width: 25px; height: 25px;}

.logo{width: 100px}
.layer{position: relative;}
.layer::before{ content: '';  position: absolute; z-index: 0; top: 0; left: 0; background:rgb(0 0 0 / 69%); width:100%; height: 100%; left: 0; right: 0;}
.layer .container{z-index: 1;position: relative;}

.coverage:hover i{transform: rotate(360deg); transition: all 2s;}
.testimonial-height{height: 300px !important;}
.hover a:hover{text-decoration:none; color: var(--primary); !important }

.fab.fa-twitter{
    font-family:sans-serif;
}
.fab.fa-twitter::before{
    content:"𝕏";
    font-size:1.2em;
}

.head_title{ border-bottom: 3px dashed var(--primary); font-size: 36px; display: inline-block; color: #000;}

.bg-footer {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/banner/carousel-6.jpg), no-repeat center center;
  background-size: cover;
}

.text-21{font-size: 21px;    }
.style-list1{margin: 0; padding: 10px}
.style-list1 li{ list-style:none; padding-left:28px;position:relative;padding-bottom:10px }
.style-list1 li:before{ color: var(--primary); ; list-style:none;position:absolute; left:0; top:0; content:'\f058'; font-family:"Font Awesome 5 Brands","Font Awesome 5 Free"; }

/*.style-list2{margin: 0; padding: 10px}
.style-list2 li{ list-style:none; padding-left:28px;position:relative;padding-bottom:10px }
.style-list2 li:before{ color: var(--primary); ; list-style:none;position:absolute; left:0; top:0; content:'\f058'; font-family:"Font Awesome 5 Brands","Font Awesome 5 Free"; }
*/

.style-list2 { overflow: hidden;margin:0 auto;width:60%; padding:25px }
.style-list2 li{list-style:none; padding-left:28px;position:relative;padding-bottom:10px;width: 50%; display: inline-block; float: left;text-align: left;  color: var(--white) !important;}
.style-list2 li:before{ color: var(--white); ; list-style:none;position:absolute; left:0; top:0; content:'\f058'; font-family:"Font Awesome 5 Brands","Font Awesome 5 Free"; }

.tab-pane-box{ width:100%;background:url(../img/banner/carousel-3.jpg), no-repeat center center; background-size: cover; padding: 25px;height: 100%;}
.tab-pane-box h3{background:var(--facebook); color: #fff; width: 50%; text-align: center;margin: 0 auto; padding: 5px; }
.tab-pane-box h3 p{font-size: 14px !important; margin: 0 !important}

.timeline{
  position:relative;
  /*margin:50px auto;
  padding:40px 0;
  width:1000px;*/
  box-sizing:border-box;
}
.timeline:before{
  content:'';
  position:absolute;
  left:50%;
  width:2px;
  height:100%;
  background:#c5c5c5;
}
.timeline ul{
  padding:0;
  margin:0;
}
.timeline ul li{
  list-style:none;
  position:relative;
  width:50%;
  padding:20px 40px;
  box-sizing:border-box;
}
.timeline ul li:nth-child(odd){
  float:left;
  text-align:right;
  clear:both;
}
.timeline ul li:nth-child(even){
  float:right;
  text-align:left;
  clear:both;
}
.content{
  padding-bottom:20px;
}
.timeline ul li:nth-child(odd):before
{
  content:'';
  position:absolute;
  width:10px;
  height:10px;
  top:24px;
  right:-6px;
  background:var(--primary); ;
  border-radius:50%;
  box-shadow:0 0 0 3px var(--primary); ;
}
.timeline ul li:nth-child(even):before
{
  content:'';
  position:absolute;
  width:10px;
  height:10px;
  top:24px;
  left:-4px;
  background:var(--primary); ;
  border-radius:50%;
  box-shadow:0 0 0 3px var(--primary); ;
}
.timeline ul li h3{
  padding:0;
  margin:0;
  color: #000000;
  font-weight:600;
  font-size: 18px;
}
.timeline ul li p{
  margin:10px 0 0;
  padding:0;
}
.timeline ul li .time h4{
  margin:0;
  padding:0;
  font-size:14px;
   color:#fff;
}
.timeline ul li:nth-child(odd) .time
{
  position:absolute;
  top:12px;
  right:-165px;
  margin:0;
  padding:8px 16px;
  background:var(--primary); ;
  color:#fff;
  border-radius:18px;
  box-shadow:0 0 0 3px rgba(233,33,99,0.3);
}
.timeline ul li:nth-child(even) .time
{
  position:absolute;
  top:12px;
  left:-165px;
  margin:0;
  padding:8px 16px;
  background:var(--primary); ;
  color:#fff;
  border-radius:18px;
  box-shadow:0 0 0 3px rgba(233,33,99,0.3);
}
@media(max-width:1000px)
{
  .timeline{
    width:100%;
  }
}
@media(max-width:767px){
  .timeline{
    width:100%;
    padding-bottom:0;
  }
  h1{
    font-size:24px;
    text-align:center;
  }
  body{
    font-size: 14px;
  }
  .timeline:before{
    left:20px;
    height:100%;
  }
  .timeline ul li:nth-child(odd),
  .timeline ul li:nth-child(even)
  {
    width:100%;
    text-align:left;
    padding-left:50px;
    padding-bottom:50px;
  }
  .timeline ul li:nth-child(odd):before,
  .timeline ul li:nth-child(even):before
  {
    top:-18px;
    left:16px;
  }
  .timeline ul li:nth-child(odd) .time,
  .timeline ul li:nth-child(even) .time{
    top:-30px;
    left:50px;
    right:inherit;
  }
}

 /* =========================================
            Button
============================================*/

.blueBg {
   background-color: #0b8fd8!important;
    background-image: linear-gradient(90deg, #0b8fd8, #007fc5);
     right: 26px;
     top: 68%;
}
.greenBg {
    background-color: #03db0c!important;
    background-image: linear-gradient(90deg, #1ea824, #039908);
     left: 26px;
       top: 88%;

}

.intro-banner-vdo-play-btn {
    height: 60px;
    width: 60px;
    position: fixed;
  
   
    text-align: center;
    /* margin: -30px 0 0 -30px; */
    border-radius: 100px;
    z-index: 9999;
}
.intro-banner-vdo-play-btn i {
    line-height: 63px;
    font-size: 30px;
    color: #fff;
}
.intro-banner-vdo-play-btn .ripple{
    position:absolute;
    width:160px;
    height:160px;
    z-index:-1;
    left:50%;
    top:50%;
    opacity:0;
    margin:-80px 0 0 -80px;
    border-radius:100px;
    -webkit-animation:ripple 1.8s infinite;
    animation:ripple 1.8s infinite
}

@-webkit-keyframes ripple{
    0%{
        opacity:1;
        -webkit-transform:scale(0);
        transform:scale(0)
    }
    100%{
        opacity:0;
        -webkit-transform:scale(1);
        transform:scale(1)
    }
}
@keyframes ripple{
    0%{
        opacity:1;
        -webkit-transform:scale(0);
        transform:scale(0)
    }
    100%{
        opacity:0;
        -webkit-transform:scale(1);
        transform:scale(1)
    }
}
.intro-banner-vdo-play-btn .ripple:nth-child(2){
    animation-delay:.3s;
    -webkit-animation-delay:.3s
}
.intro-banner-vdo-play-btn .ripple:nth-child(3){
    animation-delay:.6s;
    -webkit-animation-delay:.6s
}
.counter {border:2px dotted var(--primary);  ;transition: all 2s;}
.counter:hover {border:2px dotted #ddd;transition: all 2s;}
.counter:hover h2 {transform: scale(1.3);color: #ffeb3b !important;transition: all 2s;}

/*.social-icon a:hover  {background: #000 !important; color: #fff}*/
.nav-tabs .active{background:  var(--instagram);}
.page-header-height{height: 300px}
.joinnow {font-size: 14px}

.gallery-img img{  width:100%; height:200px }
.mybadge{width: 80px}


@media (max-width: 992px) {
  .gallery-img img{  width:100%; height:100px  !important; }

}
@media (max-width: 768px) {
 .gallery-img img{  width:100%; height:200px !important; }
 .navbar-light .navbar-nav .nav-link { 
  color: var(--dark); 
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
  color: var(--primary);
}
.navbar-collapse,.navbar {padding: 0px  !important}

/*.about-img1.h-100,.about-img1,.about-img1 .h-100 {
    height: 68% !important;
}
*/

.tab-pane-box,.tab-pane-box h3{width: 100%;}
.style-list2{width: 100%; }
.tab-pane-box,.style-list2{padding: 10px !important}
}

@media (max-width: 576px) {
  .logo {
    width: 80px;
}
.gallery-img img{  width:100%; height:100% !important; }
.style-list2 li{width: 100% !important}
.nav-link {
    display: block;
    padding: 0.5rem .5rem;
}

}


/*.contct-width{width: 52%;}*/