*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}

.clearfix{
    clear: both;
}
a,input{
    text-decoration: none;
    outline: none;
    color: #edbb43 ;
        font-family:'Poppins Regular';
}
p, ul li{
    font-family:'Poppins Regular';
    font-weight:normal;    
}

h2{
    font-family:'Poppins ExtraBold';    
}

.header{
    background-color: #fff;
    box-shadow: 2px 3px 3px #eee;
    padding-top: 10px;
    padding-bottom: 10px;
    height: 80px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}

.header .logo{
    float: left;
    width: 17%;
    text-align:right;
    
}

.header .logo img{
    width: 160px;
    
}


.header .menu{
    float: left;
    width: 60%;
    display: block;
    text-align: center;
    padding-top: 20px;
    margin-left: 0%;
}

.header .menu ul{
    display: block;
}

.header .menu ul li{
    display: inline-block;
    font-size: 1rem;
}


.header .menu ul  a li{
    color: #000;
    padding-left: 15px;
    padding-right: 15px;
      transition: 0.3s;
}

.header .menu ul  a:hover li{
    color: #fcae1a;
}
.big-social-icons{
    display:block;
}



#myVideo{
    width: 100% !important;
    outline: 4px solid white;
    outline-offset: -4px;
}

 #myImage {
      position: absolute;
      top: 0px;
      left: 0;
      width: 100%;
      height: auto;
      object-fit: cover;
      opacity: 0;
      transform: scale(0.5);   /* Start small at center */
      transition: all 1.2s ease; 
      pointer-events: none;
    }
     #myImage.showimg {
      opacity: 1;
      transform: scale(1);     /* Grow to normal size */
      z-index: 99;
    }
  
    .soundToggle {
      position: absolute;
      bottom: 15px;
      right: 15px;
      background: rgba(0,0,0,0.6);
      border: none;
      color: white;
      padding: 10px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 18px;
      transition: background 0.3s;
      z-index:9;
    }

    .soundToggle:hover {
      background: rgba(0,0,0,0.8);
    }

.box {
    position: relative;
    
    width: 200px;
    height: 200px;
}

.unlockthebuzz{
	max-width: 60%; 
	margin-bottom: 10px; 
	margin-top: 50px;
}


.team-member-1 img, 
.team-members-2 img,
.team-members-3 img,
.leaders img
{
 filter: grayscale(100%);
}
.team-member-1 img:hover, 
.team-members-2 img:hover,
.team-members-3 img:hover,
.leaders img:hover
{
 filter: grayscale(0%);
}


#content {
    display: block;
    position: relative;
    clear: both;
    width: 400px;
    height: 200px;
    background-color: #7377a8;
    transition: opacity .5s;
}

.box:hover + #content {
    display: block;
}

#content:hover {
    display:block;
}

.box1,
.box2,.box3{
    float:left;
    background-color: #333;
    width: 200px;
    height: 200px;
    border: 1px solid #fff;
    color: #fff;
}

.hero-video{
/* background-image: url(../imgs/tab-screen.png); */
background-repeat: no-repeat;
background-position:center center;
padding: 20px 0px 0px 0px; /* modified from 210px */
background-color: #fff; 
text-align: center;
}

.clients{
    background-image: url(../imgs/clients-bg.webp);
    background-repeat: no-repeat;
    background-position:center;
    background-size: cover;
    padding-top: 0px;
}

.clients-inner{
    width: 80%;
    margin: 0 auto;
    padding-top: 100px;
    padding-bottom: 150px;
}


.client-copy{
    width: 40%;
    float: left;
    border:0px solid #000;
}
/* .client-copy,
.client-logos,
.brands h2,
.service,
.showcases h2
{
    opacity: 0;
}
.client-copy .animate__animated,
.client-logos .animate__animated, 
.brands h2.animate__animated,
.service .animate__animated,
.showcases h2.animate__animated
{
    opacity: 1;
} */

.client-copy h1, .client-copy h2{
    font-size: 3rem;
    line-height: 1.2;
    font-family: 'Poppins ExtraBold';
    font-weight: 800;
}
.client-copy h1 span, .client-copy h2 span{
    color: #fcae1a;
}

.client-copy p{
    font-size: 14px;
    width: 320px;
    padding-top: 10px;
}

.client-logos{
        width: 54%;
    float: left;
    border: 0px solid #000;
    margin-left: 60px;
    margin-top: 30px;
}

.logo-slider img{
    width: 120px;
    text-align: center;
    transition: transform .3s;
    padding-bottom: 20px;
    margin-left: 20px;
}
.logo-slider img:hover{
     transform: scale(1.1)
}

.logo-slider{
    margin: 0 auto;
    width: 88%;
}
.brands{
    overflow: hidden;
}
.brands h2{
    font-size: 4rem;
    line-height: 1.2;
    text-align: center;
    padding-top: 30px;
}
.brands h2 span{
    color: #fcae1a;
}

.service{
    width: 20%;
    float: left;
/*    box-shadow: 2px 2px 3px #eee;*/
    height: 400px;
    text-align: center;
   
}

.service h3{
    font-family:'Poppins ExtraBold';
    font-size: 1.4rem;
    line-height: 1.2;
    
}
img.plus{
    width: 25px;
    padding-top: 30px;
}

.client-logos ul li{
    display: inline-block;
    width: 24%;
    height: 100px;
     -webkit-animation: fadein 4s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 4s; /* Firefox < 16 */
        -ms-animation: fadein 4s; /* Internet Explorer */
         -o-animation: fadein 4s; /* Opera < 12.1 */
            animation: fadein 4s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/*
.service1{
    background-image: url(../imgs/service1-bg.png);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;    
     transition: 0.3s;
}

.service1:hover {
    background-image: url(../imgs/service1-hover-bg.png);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;    
     transition: 0.3s;
}
*/

/* Ajay teams CSS 5 Sep 2025 */
/*
.team-hero{
    background: url(../imgs/team-hero-bg.webp);
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
    height: 100vh;
    overflow: hidden;
}
.team-hero-left{
    float: left;
    padding: 15rem 15rem;
    width: 50%;
}
.team-hero-left h1{
    color: #fff;
    font-size: 5rem;
    font-family: 'Poppins ExtraBold';
    line-height: 1.2;
}
.team-clear{
    clear: both;
}

.team-hero-right{
    float: right;
    padding: 20rem 15rem 0rem 15rem;
    width: 43%;
}
.team-hero-right ul li{
    list-style: none;
    color: #fff;
    font-size: 1.4rem;
    text-align: right;
    padding-bottom: 20px;

}
.team-leadership{
    width: 80%;
    margin: 0 auto;
    overflow: hidden;
}
.team-leadership img{
filter: grayscale(100%);
}
.team-leadership img:hover{
filter: grayscale(0%);
}
.team-leader1{
    overflow: hidden;
}

.team-leadership h2{
  font-size: 5rem;
  text-align: center;
  padding: 2rem;
}
.team-leadership h2 span{
  color: #fcae1a;
}

.team-leader1-col1{
    width: 50%;
    float: left;
    text-align: right;
}
.team-leader1-col2{
    width: 50%;
    float: right;
    padding: 3rem; 
}

.team-leader1-col2 h3{
    font-size: 3rem;
    font-family: 'Poppins ExtraBold';
}
.team-leader1-col2 h4{
    font-size: 1.5rem;
    font-family: 'Poppins Regular';
    font-weight: 400;
}
.team-leader1-col2 p{
    font-size: 1.2rem;
   padding: 1rem 0rem;
}
   */

/* Tushar teams CSS 5 Sep 2025 */
.Hero-section,.team-member-1-img{
         background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
    }
    .layer-1{
        background-position:top;
   background-repeat: no-repeat;
   background-size: cover;
    }
    ul li{
        list-style: none;
    }

   .Hero-section ,.Box-one,.Box-two, .members,.team-member-1,.form-section,.team-members-2,.team-images img{
           display: flex;
    }
.Hero-section, .team-member-1,  .Box-one,
   .Box-two{

   justify-content: center;
}

.team-buzztribe h3,
   .Box-two,  .Box-two ul li{
         text-align: center;
}

.Box-one{
      font-family: 'Poppins ExtraBold';
}

.Box-one,.Box-two {

justify-content: end;
align-items: end;
}

.Box-one,.Box-two{
    color: white;
}

.Box-two ul li p, .members__info p{
          font-family: 'Poppins Regular';
}


.team-buzztribe h1,.member__info h2,.leaders h1,.form-section-1 h1,h3,.informations h3,.team-buzztribe h1{
    font-family: 'Poppins Black';
    
}
/* COmmon CSS END */

.Hero-section{
/*    background-image: url(../team-images/teams-hero-bg.png) ; */
   width: 100%;
   height: 100vh;
}
.Box-one{
   width: 40%;
       padding-left: 7rem;
   padding-bottom: 5rem;
   font-weight: bold;
   font-size: 30px;
   line-height: 4rem;
}
.Box-two{
padding-bottom: 4rem;
padding-right:7rem;
padding-left: 27.1rem;
width: 60%;
}

.Box-two ul li{
   padding-bottom: 1rem;
   text-align: end;
}
.Box-two ul li p{
         line-height: 1.5rem;
}
.team-buzztribe h1{
 text-align: center;
 font-size: 3.6rem;
}
/* .team,.teams{
   color: #000;
} */
.team-member-1-img{
background-image: url(../team-images/samar-img.png);
width: 30rem;
height: 15rem;
margin: 2rem;
}

 .members{
   /* display: flex; */
   padding-top: 4rem;
}
 


.members__photo img{
width: 9rem;
} 
 .member__info{
   margin-left: 1rem;
} 
.member__info h2{

 font-weight: 500;
     padding-right: 5rem;
 color: black;
} 


 .member__info p{

    padding: 0px 6rem 1px 0px;
    color: black;
    font-size: 15px;
    line-height: 1.1rem;
} 

.layer-1 {
background: url(../team-images/layer-2.png);
    width: 100%;
    height: 8rem;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}


.top-lead-members{

display: flex
;
    padding: 2rem 2rem 0rem 6rem;
gap: 4rem;
}
.leaders img{
  width: 7rem;
}
.leaders h1{

      font-size: 1.1rem !important;
}

  .box {
      display: none; /* hidden by default */
      overflow: hidden;
    }

    .hrefclick a {
      cursor: pointer;
    
  
    }
    .leaders {
        width: 25%;
    }


.leaders h3{
    font-family: 'Poppins Regular';
    font-weight: lighter;
    line-height: 1.5rem;
    font-size: 13PX;
}
.leaders p{
       font-family: 'Poppins Regular';
    font-weight: lighter;
    font-size: 12px;
    line-height: 1rem;
    padding-right: 3rem;
    padding-bottom: 0rem;
}

.team-buzztribe img{
   width: 10rem;
   padding-left: .5rem;
}
.team-buzztribe h3{
       font-family: 'Poppins Regular';
       font-weight: lighter;
       font-size: 1rem;
       margin: 0 auto;
       width: 50%;
       /* text-align: center; */
}

  .team-member-1{
   
             padding-top: 4rem;

    }
 .team-images {
width: 50%;
display: flex;
justify-content: center;
padding-left: 5rem;
    }

 .information h1{
   font-family: 'Poppins Regular';
       font-size: 16px;

    padding: 0.8rem 0rem;
}
.informations h1{
   font-family: 'Poppins Regular';
   font-size: 12px;
       padding: 1rem 7rem 0rem 1rem;
           font-size: 13px;
    padding: 0.5rem 5rem .5rem 1rem;
}

.informations h3{

        font-size: 1.5rem;
    padding: 0rem 10rem 0rem 1rem;
    line-height: 2rem;
}
.informations p{
    font-family: 'Poppins Regular';
    font-size: 12px;
    line-height: .9rem;
    padding: 0rem 7rem 1rem 1rem;
}


.information p{
    font-family: 'Poppins Regular';
        font-size: 14px;
}

.information h3{
   font-size: 2rem !important ;
}
.team-members-2{
   /* display: flex; */
          padding: 1rem 0rem 0rem 7rem;
}
.team-images-leader-2 img{
width: 10rem;
}



.team-members-details{
    display: flex
;
    padding: 1rem 3rem 0rem 4rem;   
}
    .team-images img{
      /* display: flex; */
      width: 30rem;
     align-items: end;
    }
    .information{
      padding-top: 1rem;
    width: 50%;
    padding-right: 8rem;
    padding-left: 4rem;
    line-height: 1.3rem;
    }


    /* Tablet Styles (768px - 1024px) */
@media (max-width: 1024px) {
   .Hero-section {
      height: 30vh;
   }

   .Box-one {
               align-items: end;
        width: 50%;
        padding-left: 2rem;
        font-size: 18px;
        line-height: 3rem;
        padding-bottom: 7rem;
        padding-right: 5rem;
        text-align: start;
    }

      .Box-two {
        width: 50%;
        padding-left: 6rem;
        padding-right: 4rem;
    }
    .informations p {
    font-family: 'Poppins Regular';
    font-size: 11px;
    line-height: .9rem;
 padding: 0;
}
   .team-member-1 {
    padding-top: 4rem;
}

   .team-images img {
    display: flex
;
    width: 20rem;

}

   
   .top-lead-members {
      padding: 2rem 2rem 0rem 0rem;
  
   }
   .team-buzztribe h3 {
width: 75%;
   }
   
   .team-members-2,
   .team-members-details {
      padding-left: 3.1rem;
   }
   .information{
      padding: 0rem 1rem;
   }
   
   .right form p label {
    width: 33%;
   }
   
   .form-section-1,
   .form-section-2 {
      width: 90%;
      margin: 1rem;
      background-position: left;
   }
   
     .form-section-1 {
        padding-left: 4rem;
        padding-right: 4rem;

        text-align: center;
        display: flex
;
        flex-direction: column;
        justify-content: center;
     }
   
   .form-section-1 h1 {
      padding-right: 0;
   }
   
   .form-section-1 p {
      padding-right: 0;
   }
   
   .form-section input {
      width: 60%;
   }
   
   .team-images {
      width: 80%;
      padding-left: 3rem;
      padding-right: 2rem;
   }
   .informations h3 {
         font-size: 1.5rem;
        padding: 0px;
        line-height: 1.5rem;
}
.informations h1{
       font-size: 12px;
           padding: .5rem 0rem .5rem 0rem;
}
.team-images-leader-2 img {
    width: 9rem;
}
.leaders h1 {
    /* font-size: 1.2rem !important; */
}

.leaders h3 {
    font-size: 12px;


    line-height: 1rem;
   }

.leaders p {
 
    font-size: 12px;
    line-height: 1rem;
    padding-right: 4px;
    padding-bottom: 1rem;
    text-align: center;
}
.layer-1{
background-position: left;
}

.informations{
        padding: 0rem 0rem 0rem 1rem;
}
   .information {
      width: 95%;
      padding-right: 1rem;
   }
   .information p {
    font-family: 'Poppins Regular';
    line-height: 1.1rem;
    font-size: 14px;
   }
}

/* Mobile Styles (up to 767px) */
@media (max-width: 767px) {
	.unlockthebuzz{
	margin-top: 90px;
	}
    .Box-two{
        width: 85%;
    }
    .Box-two ul li{
        text-align: right;
    }
     .information,  .Box-one,
   .Box-two ,   .leaders {
      text-align: center;
   }

.team-member-1 {
    padding-top: 4rem;
}
.client-logos ul li{
    width: 50%;
}
.client-logos ul li img{
    width: 120px;
}
  
.big-social-icons{
    display: none !important;
}
.layer-1 {

    width: 100%;
    height: 5rem;
    background-position: 0;
    background-repeat: no-repeat;
    background-size: cover;
/*             position: relative; */
        bottom: 50px;
}

   
   
   .Box-one {
      font-size: 20px;
      line-height: 2.2rem;
      padding-bottom: 2rem;
   }
   
   
   
   .team-buzztribe h1 {
      font-size: 2.5rem;
   }
   
   .team-buzztribe h3 {
      width: 80%;
   }
   
   .top-lead-members {
      padding: 2rem 2rem;
      flex-direction: column;
     gap:2rem;
   }
    
   
   .leaders {
      margin-bottom: 0rem;
      /* text-align: center; */
   }
   
  
   
   .leaders h1 {
      font-size: 2.5rem;
              padding-bottom: 14px;
   }
   
   .leaders h3{
        font-size: 1rem;
        padding-bottom: 0rem;
        line-height: 1.1;
        font-weight: 600;
   }

   .team-members-2{
        padding-left: 1.1rem;
    }
 
   .leaders p {
      font-size: 0.9rem;
      line-height: 1rem;
    padding-right: 0rem;
    padding-bottom: 0rem;
   }
   
   .team-member-1 {
      flex-direction: column;
      align-items: center;
          padding-top: 1rem;
   }
   
   .team-images {
      width: 100%;
   }
   
   .information {
      padding: 1rem 0rem;
      /* text-align: center; */

   }
   
   .form-section-1 {
      padding: 2rem;
      display: block;

   }
   .form-section {
    display: block;
    width: 100%;
   }
   .form-section input {
      
      width: 12rem;
   }
   
   .right form button {
      width: 100%;
   }
   
   /* Additional mobile-specific adjustments */
   .team-member-1-img {
      width: 100%;
      margin: 1rem 0;
   }
   
   .team-images img {
      width: 100%;
   }
   .informations h1 {
    font-family: 'Poppins Regular';
    font-size: 12px;
        padding: 0rem 0rem 0rem 1rem;
    font-size: 13px;
 
}
   .informations h3 {
      padding: 0 1rem;
   }
   
     .informations p {
        padding: .2rem 0rem 1rem 1rem;
       
    font-size: 13px;
    line-height: 1rem;
    }


    .team-members-details {
    display: flex
;
    padding: 2rem 1rem 16px 1rem;
}
}

/* Small Mobile Devices (up to 480px) */
@media (max-width: 480px) {
    
 
   
   .team-buzztribe h1 {
    font-size: 1rem !important;
   }
   
   .form-section-1 h1 {
      font-size: 2rem;
      line-height: 2.5rem;
   }
   
   .informations h3 {
      font-size: 1.1rem;
      line-height: 1.5rem;
   }
}

/* Large Desktop Screens (1440px and up) */
/* 
@media (min-width: 1440px) {
   .Hero-section {
      height: 80vh;
   }
   .team-member-1 {
    padding-top: 4rem;
}
   .Box-one {
      font-size: 36px;
      line-height: 4.5rem;
   }
   
   .team-buzztribe h1 {
      font-size: 4rem;
   }
} */

/* Maintain all other existing styles below */

.Box-two ul li {
   padding-bottom: 1rem;
}

.Box-two ul li p {
   font-family: 'Poppins Regular';
   line-height: 1.5rem;
}

.team-buzztribe h1 {

   text-align: center;
   font-size: 3.6rem;
}

/* .team, .teams {
   color: orange;
} */

/* Rest of your existing styles... */


.organization{
    margin-left: 0rem !important; 
}
.organization input{
       margin-left: 3rem !important; 
}

.hrefclick{
   cursor: pointer;
}

/* END Tushar CSS 5 Sep 2025 */

figcaption p{
       font-size: 11px;
    padding: 40px 10px;
}
figcaption ul {
    text-align: left;
   padding: 0px 20px;
    list-style: none;
}
/*
figcaption ul li{
      font-size: 11px;
    padding: 0px 0px 10px 0px;
    
}
*/
figcaption.service1-hvr{
    background-image: url(../imgs/service1-hover-bg.png);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;  
}
figcaption.service2-hvr{
     background-image: url(../imgs/service2-hover-bg.png);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;  
}
figcaption.service3-hvr{
     background-image: url(../imgs/service3-hover-bg.png);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;  
}
figcaption.service4-hvr{
     background-image: url(../imgs/service4-hover-bg.png);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;  
}
figcaption.service5-hvr{
     background-image: url(../imgs/service5-hover-bg.png);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;  
}

.news-intro-text h2{
    text-align: left !important;
}
.showcases{
    padding-top: 0px;
    
}
.showcases h2{
    font-size: 4rem;
    line-height: 1.2;
    text-align: center;
}
.showcases h2 span{
    color: #fcae1a;
}

.showcases h2 img{
    width: 40px;
    position: relative;
    top: -25px;
    left: 25px;
}

.showcase{
    width: 25%;
    float: left;
    margin-top: 30px;
}

.showcase:last-child{
    float: right;
}

.showcase .showcase-hvr{
    background-color:#fcae1ad1;
}

.showcases h3{
    font-family:'Poppins ExtraBold';
}
.showcases p{
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
}
.showcases figcaption{
    padding: 0;
}

.service.service5 img{
    width: 96.5%;
}


/*
.popup-container:target{
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}
*/

.popup-container {
position:fixed;
    top:0px;
    left:0px;
    background:#fff;
    width:100%;
    height:100%;
    display:none;
    z-index: 999;
}

.popup-content {
    background-color: #fefefe;
    margin: auto;
    padding: 0px;
    border: 0px solid #888;
    width: 100%;
}
.popup-content button.close {
    color: #fcae1a;
    float: right;
    font-size: 18px;
    font-weight: bold;
    background: none;
    padding: 0;
    margin: 0;
    text-decoration: none;
    font-family:'Poppins ExtraBold';
    position: relative;
    right: 80px;
    border: 0;
    cursor: pointer;
}
.popup-content button.close img {
    width: 40px;
    position: relative;
    top: 10px;
}
.popup-content button.close:hover{
  color:#fcae1a;
}

.popup-content span:hover,
.popup-content span:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

/*
.popup-container:target{
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}
*/
.popup-container h3 {
    margin: 10px;
}
.popup-content p {
    font-size: 17px;
    padding: 10px;
    line-height: 20px;
}

.popup-left{
    float: left;
    width: 40%;
}
.popup-left img{
    width: 100%;
}
.popup-right{
    float: right;
    width: 60%;
    padding:20px 50px;
}

.pop-header {
    overflow: hidden;
    padding: 20px 0px;
}

.pop-header .left{
    float: left
}
.pop-header .left h3{
    margin: 0;
    color: #fcae1a;
}
.popup-right .right{
    float: right;

}
.popup-right .right p{
    font-size: 14px;
}
.popup-right h2,
.popup-right p
{
    text-align: left;    
}

.popup-right h2{
    font-size: 2.7rem;
    padding-bottom: 20px;
}

.popup-right p{
    padding: 0;
    line-height: 1.5;
    font-family: 'Poppins ExtraLight';
    font-size: 1.5rem;
}

.popup-right .stats{
    float: left;
    padding: 20px 0px; 
    width: 30%;
    margin-right: 20px;
}

.popup-right .stats h3{
    font-size: 1.4rem;
    margin: 0;
}
.popup-right .stats p{
     font-size: 1rem;
      font-family: 'Poppins ExtraLight';
}

#menu-icon {
    display: none;
}


.text-blk {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  line-height: 25px;
}

.responsive-cell-block {
  min-height: 75px;
}

.responsive-container-block {
  min-height: 75px;
  height: fit-content;
  width: 100%;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 40px;
  margin-left: auto;
}

.outer-container {
  padding-top: 10px;
  padding-right: 30px;
  padding-bottom: 10px;
  padding-left: 30px;
}

.inner-container {
  max-width: 1320px;
  margin-top: 100px;
  margin-right: auto;
  margin-bottom: 50px;
  margin-left: auto;
}

.heading-text {
  font-size: 48px;
  line-height: 65px;
  font-weight: 900;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 5px;
  margin-left: 0px;
}

.sub-heading-text {
  color: rgb(122, 122, 122);
  line-height: 30px;
}

.team-1-swiper {
  overflow: hidden;
}

.team-2-swiper {
  overflow: hidden;
}

.team-name {
  font-size: 24px;
  line-height: 34px;
  font-weight: 900;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
}

.team-member-image {
  width: 270px;
/*  height: 230px;*/
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
}

.name {
  font-size: 18px;
  line-height: 24px;
  font-weight: 800;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  width: 200px;
  margin-top: 15px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
}

.position {
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  line-height: 24px;
  width: 200px;
  margin-top: 5px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
}

.arrow-left-1 {
  transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
  margin-top: 0px;
  margin-right: 20px;
  margin-bottom: 0px;
  margin-left: 0px;
  cursor: pointer;
}

.btn {
  display: flex;
  flex-direction: row-reverse;
  margin-top: 20px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
}

.swiper-slide {
  margin-top: 0px;
  margin-right: 40px;
  margin-bottom: 0px;
  margin-left: 0px;
}

.arrow-left-2 {
  transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
  margin-top: 0px;
  margin-right: 20px;
  margin-bottom: 0px;
  margin-left: 0px;
  cursor: pointer;
}

.arrow-right-1 {
  height: 14px;
  cursor: pointer;
}

.swiper-slide.empty {
  width: auto;
  margin-top: 0px;
  margin-right: 40px;
  margin-bottom: 0px;
  margin-left: -20px;
}

.swiper-container.team-1-swiper,
.swiper-container.team-2-swiper {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
}

.arrow-right-2 {
  cursor: pointer;
}

.popup{
    width: 900px;
    margin: auto;
/*    text-align: center*/
}
.popup img{
/*
    width: 200px;
    height: 200px;
*/
    cursor: pointer
}
.show{
    z-index: 999;
    display: none;
}
.show .overlay{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.66);
    position: absolute;
    top: 0;
    left: 0;
}
.show .img-show{
    width: 600px;
    height: 360px;
    background: #FFF;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    overflow: hidden
}
.img-show span{
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 99;
    cursor: pointer;
}
.img-show img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

<style>
    * {
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background: #fff;
    }

    .team-section {
      padding: 60px 20px;
      max-width: 1200px;
      margin: auto;
      text-align: center;
    }

    .team-section h2 {
      font-size: 2.5rem;
      margin-bottom: 40px;
      color: #333;
    }

    .team-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 30px;
    }

    .team-member {
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      padding: 20px;
      width: 265px;
      transition: transform 0.3s ease;
    }

    .team-member:hover {
      transform: translateY(-5px);
    }

    .team-member img {
      width: 100%;
      height: 260px;
      object-fit: cover;
      border-radius: 10px;
    }

    .team-member h3 {
      margin-top: 15px;
      font-size: 1.2rem;
      color: #111;
    }

    .team-member p {
      margin: 8px 0;
      font-size: 0.75rem;
      color: #555;
    }

    @media (max-width: 768px) {
      .team-member {
        width: 45%;
      }
    }

    @media (max-width: 480px) {
      .team-member {
        width: 100%;
      }
    }
  </style>

@media (max-width: 768px) {
  .heading-text {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
  }

  .sub-heading-text {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 20px;
    margin-left: 0px;
  }
}

@media (max-width: 500px) {
  .team-member-image {
    width: 200px;
    height: 200px;
  }

  .outer-container {
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
  }
  
  
}


.wk-desk-1 {
  width: 8.333333%;
}

.wk-desk-2 {
  width: 16.666667%;
}

.wk-desk-3 {
  width: 25%;
}

.wk-desk-4 {
  width: 33.333333%;
}

.wk-desk-5 {
  width: 41.666667%;
}

.wk-desk-6 {
  width: 50%;
}

.wk-desk-7 {
  width: 58.333333%;
}

.wk-desk-8 {
  width: 66.666667%;
}

.wk-desk-9 {
  width: 75%;
}

.wk-desk-10 {
  width: 83.333333%;
}

.wk-desk-11 {
  width: 91.666667%;
}

.wk-desk-12 {
  width: 100%;
}

.show .close-img{
    position: absolute;
    top: 15%;
    right: 26%;
    color: #fff;
    font-weight: 600;
    }
.show .close-img:hover{
    color: #fff;
}

.yt-video{
    width: 100%;
    height: 500px;
    
}

#videoContainer_tetra,
#videoContainer_ham
{
      display: none;
      position: relative;
}

 /* Overlay Styles */
    #videoOverlay {
      display: none;
      position: fixed;
      top: 0; left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.8);
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }

    /* Video Container */
    .video-wrapper {
      position: relative;
      width: 80%;
      max-width: 800px;
      left: 15%;
      top: 10%;
    }

    iframe {
      width: 100%;
      height: 450px;
    }

    /* Close Button */
    #closeBtn {
      position: absolute;
      top: -20px;
      right: -20px;
      background: red;
      color: white;
      border: none;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      font-size: 16px;
      cursor: pointer;
      z-index: 1001;
    }

.btn-container{
    width: 100px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    margin-top: 35px;
}

@media (max-width: 1024px) {
  .wk-ipadp-1 {
    width: 8.333333%;
  }

  .wk-ipadp-2 {
    width: 16.666667%;
  }

  .wk-ipadp-3 {
    width: 25%;
  }

  .wk-ipadp-4 {
    width: 33.333333%;
  }

  .wk-ipadp-5 {
    width: 41.666667%;
  }

  .wk-ipadp-6 {
    width: 50%;
  }

  .wk-ipadp-7 {
    width: 58.333333%;
  }

  .wk-ipadp-8 {
    width: 66.666667%;
  }

  .wk-ipadp-9 {
    width: 75%;
  }

  .wk-ipadp-10 {
    width: 83.333333%;
  }

  .wk-ipadp-11 {
    width: 91.666667%;
  }

  .wk-ipadp-12 {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .wk-tab-1 {
    width: 8.333333%;
  }

  .wk-tab-2 {
    width: 16.666667%;
  }

  .wk-tab-3 {
    width: 25%;
  }

  .wk-tab-4 {
    width: 33.333333%;
  }

  .wk-tab-5 {
    width: 41.666667%;
  }

  .wk-tab-6 {
    width: 50%;
  }

  .wk-tab-7 {
    width: 58.333333%;
  }

  .wk-tab-8 {
    width: 66.666667%;
  }

  .wk-tab-9 {
    width: 75%;
  }

  .wk-tab-10 {
    width: 83.333333%;
  }

  .wk-tab-11 {
    width: 91.666667%;
  }

  .wk-tab-12 {
    width: 100%;
  }
}

@media (max-width: 500px) {
  .wk-mobile-1 {
    width: 8.333333%;
  }

  .wk-mobile-2 {
    width: 16.666667%;
  }

  .wk-mobile-3 {
    width: 25%;
  }

  .wk-mobile-4 {
    width: 33.333333%;
  }

  .wk-mobile-5 {
    width: 41.666667%;
  }

  .wk-mobile-6 {
    width: 50%;
  }

  .wk-mobile-7 {
    width: 58.333333%;
  }

  .wk-mobile-8 {
    width: 66.666667%;
  }

  .wk-mobile-9 {
    width: 75%;
  }

  .wk-mobile-10 {
    width: 83.333333%;
  }

  .wk-mobile-11 {
    width: 91.666667%;
  }

  .wk-mobile-12 {
    width: 100%;
  }
}
@media only screen and (max-width:767px){
     .Hero-section {
      height: 90vh;
      display: block;
      flex-direction: column;
      justify-content: flex-end;
       background-position: 30%;
   }
   .Box-one {
        font-size: 20px;
        line-height: 1;
        padding: 1rem;
        display: block;
        text-align: left;
    }
    .Box-one, .Box-two {
        width: 95%;
        padding: 1rem;
        /* text-align: center; */
    }
        .leaders img {
        width: 15rem;
    }
    .header .logo{
            padding: 0px 25px;
    }
    .header .menu{
        display: none;
        width: 100%;  
        background: #edbb43;
        margin-top: 10px;
        box-shadow: 2px 3px 3px #eee;
        padding-top: 0px;
        margin-left: 0px;
    }
    .header .menu ul li{
        display: block;
        font-size: 16px;
        padding: 10px;
        background: #f4b533;
/*        border-bottom: 1px solid #ffffff;       */
        text-align: left;
    }
    
    
    .header .menu ul li:focus{
      color: #fff;
        background: #000;
    }
    .header .menu ul  a li{
        color: #fff;
    }
    .header .menu ul  a:hover li{
        color: #000;
        background:#fcae1abd;
    }

    #menu-icon {
	display: block;
	position: absolute;
	top: 25px;
	right: 1em;
	color: #000;
	text-decoration: none;
	font-weight: bold;
	cursor: pointer;
	opacity: 1;
	padding: 0 0.4em;
    font-size: 25px;    

	&:hover {
		opacity: 0.85;
		text-decoration: none;
		border: none;
	}
        
}


    .soundToggle {
    position: absolute;
    bottom: 530px;
    padding: 8px;
    font-size: 13px;
    }

 
    .hero-video{
            padding: 100px 10px 0px 10px;    
        }
        #myVideo {
        width: 100%;
        }
    
    .clients{
            background-position: 20%;
    }
    .clients-inner{
            padding-top: 30px;
    padding-bottom: 100px;
    }
    .client-copy{
        float: none;
        width: 100%;
        text-align: center;
    }
   .clients-inner .client-copy h1, .client-copy h2{
        font-size: 2rem;
    }
    .client-copy p{
        width: 100%;
        font-size: 14px;
    }
    .client-logos{
        float: none;
        width: 100%;
        margin-left: 0px;
        margin-top: 10px;
    }
    .brands h2 {
        font-size: 2rem;
        padding-bottom: 30px;
    }
    .service{
        width: 50%;
        float: left;
        height: 370px;
    }
    .service h3{
        font-size: 1.3rem;
    }
    figcaption p{
        line-height: 1.2;
        font-size: 10px;
        padding: 10px 10px; 
    }
    figcaption ul{
    padding: 20px 30px
    }
    figcaption ul li{
         font-size: 14px;
        line-height: 1.5;
        list-style: disc;
    }
    .service [class^="imghvr-"] figcaption, .service  [class*=" imghvr-"] figcaption {
            padding: 50px 15px 0px 0px;
    }
    .showcases h2{
          font-size: 2rem;
    }
    .popup-right h2{
            padding-bottom: 10px;
    }
    .popup-right .stats{
     float: none;
    padding: 10px 0px;
    width: 100%;
    margin-right: 15px;
    }
    
    .showcase{
        width: 50%;
        
    }
    
    .newsmain .right img{
        width: 100%;
    }  
    .showcases{
            padding-top: 20px;
    }
    .showcases h2 img{
    width: 25px;
    position: relative;
    top: -5px;
    left: 10px;
    }
    
    .showcase .showcase-hvr{
            padding: 100px 20px;
    }
   
    .showcases h3{
        font-size: 1.2rem;
    }
     .showcases p.lead-text{
       font-size: 14px;
        font-weight: 400;
        width: 90%;
        text-align: center;
        margin: 0 auto;
        padding: 20px 0px;
       
    }
    .showcase-content{
        height: 200px;
        width: 190px;
        position: absolute;
        bottom: 0px;
        text-align: left;
    }
       
    figcaption .showcase-content  p{
        padding: 10px 0px;
    } 
         
     figcaption .showcase-content a{
        position: relative;
         color: #fff;
    }
    figcaption .showcase-content button span{
        position: relative;
        top: -25px;
        left: 33px;
        font-size: 14px;
        font-weight: 900;
         font-family: 'Poppins SemiBold';
        letter-spacing:1px;
    }
    figcaption .showcase-content button {
        position: relative;
        color: #fff;
        background: transparent;
        border: 0;
        cursor: pointer;
    }
    figcaption .showcase-content button img{
        width: 30px;
    }
    
    .news{
    width: 90%;
    margin: 0 auto;
    padding-top: 60px;
    padding-bottom: 0px;
    }
    .news .left{
        float: none;
        width: 100%;
        text-align:center;
    }
    .news .left p{
        font-family: 'Poppins ExtraLight';
        font-size: 1rem;
        font-weight: 600;
        padding-bottom: 20px;
        
    }
    
    .news .right{
        float: none;
        width: 100%;
         text-align: center;
    }
    .news .right ul{
        font-family: 'Poppins ExtraLight';
        font-weight: 600;
        padding-top: 30px;  
        text-align: center;
    }
    .news .right ul li{
        list-style: none;
        display: inline-block;
        padding-right: 15px;
        font-size: .8rem;
    }
    .news .right ul li:nth-child(2){
        color: #fcae1a;
    }
    

    .news h2 span{ 
        color: #fcae1a;
    }
    .news .right img{
        width: 60%;
        padding-top: 40px;
    }
    
    .newssites{
         background-image: url(../imgs/news-bg.webp);
        background-repeat: no-repeat;
        background-size: contain;
        padding-bottom: 60px;
        overflow: hidden;
    }
    .sites{
     width: 90%;
     margin: 0 auto;
    display:table;
    }
    .newssites .site{
        width: 33%;
         display: table-row;
        text-align: center;
        padding: 10px;
        
    }
    
    .newssites .site img{
        padding-bottom: 30px;
         width: 60%;
    } 
    .newssites .site:first-child img{
        width: 100%;
    }
    .newssites .site:first-child .ourpartner{
        width: 100%;
    }
    .newssites .site h3{
        font-family:'Poppins ExtraBold';    
        color: #fcae1a;
        font-size: 1.5rem;
    }
    .newssites .site p{
        font-family: 'Poppins ExtraLight';
         font-weight: 600;
        font-size: 1rem;
    }
    .newssites .site h4{
        font-family:'Poppins ExtraBold';    
        color: #000;
        font-size: 1.2rem;
        padding-top: 40px;
        padding-bottom: 20px;
    }
    
    .newssites .site ul li{
        list-style: none;
        text-align: center;
        display: inline-block;
        width: 50%;
        font-family: 'Poppins ExtraLight';
         font-weight: 600;
        font-size: 1rem;
        float: left
    }
    
    .newssites .site p.lang{
        font-size: 1rem;
        padding-bottom: 30px;
    }
    
    .testimonials{
        background-image: url(../imgs/testimonial-bg.webp);
        background-repeat: no-repeat;
        background-size: cover;
        padding-bottom: 40px;
        background-position: center;
        overflow: hidden;
    }
    .testimonial{
        width: 90%;
        margin: 0 auto;
        padding: 0px 0px;
        
    }
    .testimonials h2{
        font-size: 2.5rem;
     line-height: 1.2;
    }

    .testimonials .left{
        color: #fff;
        float: none;
        width: 100%;
        padding:180px 0px 60px;
        text-align: center;
       
    }
    .testimonials .left p{
        width: 100%;
    }
    .testimonials .right{
        color: #000;
        float: none;
        width: 100%;
       padding: 0px 30px 30px;
        
    }
    .testimonials .right p:nth-child(2){
        margin-top: 20px;
    }
    .testimonials .right .testi-slide{
        font-size: 1rem;
    }
    .testimonials .right .testi-slide p:last-child{
        font-size: .9rem;
    }
    
    
    .teams{
        background-image: url(../imgs/news-bg.webp);
        background-repeat: no-repeat;
        background-size: contain;
        padding-bottom: 60px;
        overflow: hidden;
    }
    .team{
    width:90%;
    margin: 0 auto;
    padding: 50px 0px;
    }
    
    .team .left{
        float: none;
        width: 100%;
        padding-bottom: 40px;
    }
    .team .left h2{
         font-size: 2rem;
        line-height: 1.2;
        width: 70%;
    }
    .team .left h2 span{
        color: #fcae1a;
    }
    .team .right{
        float: none;
        width: 100%;
    }
    .team .right .col1{
        overflow: hidden;
        padding-bottom: 50px;
    }
    .team .right .col1 .profile-pic,
    .team .right .col1 .profile-bio
    {
        float: none;
    }
    .team .right .col1 .profile-bio h4{
        font-family:'Poppins ExtraBold'; 
        font-size: 1.2rem;
    }
    .team .right .col1 .profile-bio p.designation{
        padding-bottom: 10px;
        font-family: 'Poppins ExtraLight';
         font-weight: 600;
        font-size: .9rem;
    }
    .team .right .col1 .profile-bio p{
        font-size: 1rem;
    }
    .team .right .col1 .profile-pic{
        width: 30%;
    }
    .team .right .col1 .profile-bio{
        width: 100%;
                padding: 0px 10px;
    }
    
    .team .right .col2,
    .team .right .col3
    {
        float: left;
        width: 50%;
    }
     .team .right .col2 .profile-pic,
     .team .right .col3 .profile-pic{
        width: 30%;
         float: none
    }
    .team .right .col2 .profile-bio,
    .team .right .col3 .profile-bio{
        width: 90%;
        float: none;
    }
     .team .right .col2 .profile-bio h4,
    .team .right .col3 .profile-bio h4{
        font-family:'Poppins ExtraBold'; 
        font-size: 1rem;
    }
    .profile-bio img.plus{
        padding-top: 15px;
    }
    .meettheteam{
        text-align: right;
        font-family:'Poppins ExtraBold'; 
        font-size: 1.5rem;
        transition: 0.3s;
    }
    .meettheteam span{
        color:#fcae1a;
    }
    .meettheteam a{
         color: #000;
          transition: 0.3s;
    }
    
    .meettheteam a:hover{
        color:#fcae1a;
    }
    .meettheteam img{
        position: relative;
        top: 5px;
        left: 5px;
    }
    
    .contact{
         background-image: url(../imgs/news-bg.webp);
        background-repeat: no-repeat;
        background-size: cover;
        padding-bottom: 60px;
        overflow: hidden;
    }
    
    .buzzus{
       width: 90%;
       margin: 0 auto;
       padding: 0px 0px; 
    }
    .buzzus .left,
    .buzzus .right
    {
        float:none;
        width: 100%;
    }
     .buzzus .left h2{
         font-size: 2.5rem;
        line-height: 1;
        width: 100%;
        margin-top: 
    }
    .buzzus .left h2 span{
        color: #fcae1a;
    }
    
    .buzzus .left p{
        font-family:'Poppins ExtraBold'; 
        font-size: 1.2rem;
    }
    .buzzus .left p a{
        color: #000;
        transition: 0.3s;
    }
     .buzzus .left p a:hover{
        color:  #fcae1a;   
    }
    .buzzus .left address{
        font-style: normal;
        width: 70%;
        font-size: 1.1rem;
         font-family: 'Poppins ExtraLight';
         font-weight: 600;
        line-height: 1.2;
    }
    .buzzus .right{
        margin-top: 40px;
    }
     .buzzus .right h3{
         font-size: 2rem;
        line-height: 1;
         font-family:'Poppins ExtraBold'; 
         padding-bottom: 20px;
    }
    
    .buzzus .right h3 span{
        color: #fcae1a;
    }
    .buzzus .right form{
        padding-top: 30px;
    }
    .buzzus .right form p{
        padding-bottom: 80px;
    }
    .buzzus .right form p label{
        width: 50%;
        display: block;
        float: left;
    }
     .buzzus .right form p input{
        width: 100%;
        display: block;
        float: left;
        border: 0;
        border-bottom: 2px solid #d7d6d6;
        height: 40px;
        margin-bottom: 5px;
    }
    .buzzus .right form button{
        font-family:'Poppins ExtraBold';
        border: 0;
        background: #fcae1a;
         font-size: 1rem;
        color: #fff;
        padding: 10px 25px;
        cursor: pointer;
        transition: 0.3s;
    }
    .buzzus .right form button:hover{
        background: #000;
    }
    .buzzus .right form button img{
        position: relative;
        top: 0px;
        left: 3px;
        width: 15px;
    }
    .popup-content button.close{
        right: 10px;    
        font-size: 14px;
    }
    .popup-content button.close img{
        width: 25px;
    position: relative;
    top: 7px;
    }
    .popup-left {
    float: none;
    width: 100%;
          text-align: center;
        padding-top: 40px;
    }
    .popup-left img {
        width: 80%;
      
    }
    .pop-header{
        padding: 10px 0px;
    }
    .popup-right {
    float: none;
    width: 98%;
    padding: 10px 20px;
    overflow-y:scroll;
    overflow-x: hidden;
    height: 300px;
}
    .popup-right::-webkit-scrollbar { 
        width: 10px;
        margin-right: 10px;
        height: .5em;
    }
    
    /* Track */
.popup-right::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
 
/* Handle */
.popup-right::-webkit-scrollbar-thumb {
  background: #fcae1a; 
  border-radius: 10px;
  height: 2%;
}

/* Handle on hover */
.popup-right::-webkit-scrollbar-thumb:hover {
  background: #b30000; 
}
    
    .popup-right h2{
        font-size: 1.2rem;
    }
    .popup-right p{
        font-size: 13px;
    }
    
    .popup-right .stats p{
        font-size: 12px;
    }
    .popup-right .stats img{
        width: 100%;
    }
    
    .clients-slide.slick-slider .slick-prev, 
    .clients-slide.slick-slider .slick-next {
    top: 110%;
    }
    
    .imghvr-fade p{
        display: none;
    }
    .popup{
        width: 360px;
    }
    .show .img-show{
        width: 380px;
    height: 210px;
    }
    .show .close-img{
    position: absolute;
    top: 31%;
    right: 18px;
    color: #fff;
    font-weight: 600;    
    }
    
    .yt-video{
    width: 90%;
    height: 300px;
}
    .video-wrapper{
    left: 10%;
    top: 25%;
    }
    iframe#youtubeFrame{
        height: 300px;
    }
    #closeBtn{
        top: -10px;
    }
}
@media only screen and (max-width:767px) and (orientation:landscape){}
@media only screen and (min-width:768px) and (max-width:1001px){
    
    .clients-inner{
            padding-top: 40px;
    }
    .client-copy h1, .client-copy h2,
    .brands h2,
    .showcases h2,
    .news h2
    {
            font-size: 2.5rem;
        padding-bottom: 20px;
    }
    .clients-inner{
            width: 90%;
                padding-bottom: 70px;
    }
    .client-copy{
            width: 100%;
        float: none;
        text-align: center;
    }
    .client-copy p{
            width: 100%;
    }
    .client-logos{
        float: none;
        width: 80%;
      margin: 0 auto;
    }
    .client-logos{
            margin-top: 30px;
    }
    .services{
        overflow: hidden;
    }
    .service{
        width: 33%;
        height: 440px;
    }
    .service h3{
     font-size: 1.5rem;   
    }
    .service  [class^="imghvr-"] figcaption, .service  [class*=" imghvr-"] figcaption{
            padding: 64px 15px 0px 0px;
    }
    figcaption p{
            padding: 20px 10px;
    }
    figcaption ul li{
            padding: 0px 0px 5px 0px;
    }
    .showcases h2 img {
    width: 30px;
    position: relative;
    top: -5px;
    left: 10px;
}
    .showcase .showcase-hvr{
            padding: 100px 20px;
    }
   
    .showcases h3{
        font-size: 1.8rem;
    }
    .showcases p{
        font-size: 16px;
        font-weight: 600;
       
    }
    .showcase-content{
        height: 200px;
        width: 200px;
        position: absolute;
        bottom: 0px;
        text-align: left;
    }
       
    figcaption .showcase-content  p{
        padding: 10px 0px;
    } 
         
     figcaption .showcase-content a{
        position: relative;
         color: #fff;
    }
    figcaption .showcase-content button span{
        position: relative;
        top: -25px;
        left: 33px;
        font-size: 14px;
        font-weight: 900;
         font-family: 'Poppins SemiBold';
    }
    figcaption .showcase-content button {
        position: relative;
        color: #fff;
        background: transparent;
        border: 0;
        cursor: pointer;
    }
    figcaption .showcase-content button img{
        width: 30px;
    }

     .news{
    width: 90%;
    margin: 0 auto;
    padding-top: 60px;
    padding-bottom: 0px;
    }
    .news .left{
        float: none;
        width: 100%;
        text-align:center;
    }
    .news .left p{
        font-family: 'Poppins ExtraLight';
        font-size: 1rem;
        font-weight: 600;
        padding-bottom: 20px;
        
    }
    
    .news .right{
        float: none;
        width: 100%;
         text-align: center;
    }
    .news .right ul{
        font-family: 'Poppins ExtraLight';
        font-weight: 600;
        padding-top: 30px;  
        text-align: center;
    }
    .news .right ul li{
        list-style: none;
        display: inline-block;
        padding-right: 35px;
        
    }
    .news .right ul li:nth-child(2){
        color: #fcae1a;
    }
    

    .news h2 span{ 
        color: #fcae1a;
    }
    .news .right img{
        width: 60%;
        padding-top: 40px;
    }
    
    .newssites{
         background-image: url(../imgs/news-bg.webp);
        background-repeat: no-repeat;
        background-size: contain;
        padding-bottom: 60px;
        overflow: hidden;
    }
    .sites{
     width: 90%;
     margin: 0 auto;
    display:table;
    }
    .newssites .site{
        width: 33%;
         display: table-cell;
        text-align: center;
        padding: 10px;
        
    }
    
    .newssites .site img{
        padding-bottom: 30px;
         width: 60%;
    } 
    .newssites .site:first-child img{
        width: 100%;
    }
    .newssites .site:first-child .ourpartner{
        width: 100%;
    }
    .newssites .site h3{
        font-family:'Poppins ExtraBold';    
        color: #fcae1a;
        font-size: 1.2rem;
    }
    .newssites .site p{
        font-family: 'Poppins ExtraLight';
         font-weight: 600;
        font-size: .8rem;
    }
    .newssites .site h4{
        font-family:'Poppins ExtraBold';    
        color: #000;
        font-size: 1rem;
        padding-top: 40px;
        padding-bottom: 20px;
    }
    
    .newssites .site ul li{
        list-style: none;
        text-align: center;
        display: inline-block;
        width: 60%;
        font-family: 'Poppins ExtraLight';
         font-weight: 600;
        font-size: .8rem;
    }
    
    .newssites .site p.lang{
        font-size: .8rem;
    }
    
    
    .testimonials{
        background-image: url(../imgs/testimonial-bg.webp);
        background-repeat: no-repeat;
        background-size: cover;
        padding-bottom: 40px;
        background-position: center;
        overflow: hidden;
    }
    .testimonial{
        width: 90%;
        margin: 0 auto;
        padding: 0px 0px;
        
    }
    .testimonials h2{
        font-size: 2.5rem;
     line-height: 1.2;
    }

    .testimonials .left{
        color: #fff;
        float: none;
        width: 100%;
        padding:150px 0px 60px;
        text-align: center;
       
    }
    .testimonials .left p{
        width: 100%;
    }
    .testimonials .right{
        color: #000;
        float: none;
        width: 100%;
       padding: 0px 30px 30px;
        
    }
    .testimonials .right p:nth-child(2){
        margin-top: 20px;
    }
    .testimonials .right .testi-slide{
        font-size: 1.3rem;
    }
    .testimonials .right .testi-slide p:last-child{
        font-size: .9rem;
    }
    
    
    .teams{
        background-image: url(../imgs/news-bg.webp);
        background-repeat: no-repeat;
        background-size: contain;
        padding-bottom: 60px;
        overflow: hidden;
    }
    .team{
    width:90%;
    margin: 0 auto;
    padding: 50px 0px;
    }
    
    .team .left{
        float: none;
        width: 100%;
        padding-bottom: 40px;
    }
    .team .left h2{
         font-size: 3rem;
        line-height: 1.2;
        width: 70%;
    }
    .team .left h2 span{
        color: #fcae1a;
    }
    .team .right{
        float: none;
        width: 100%;
    }
    .team .right .col1{
        overflow: hidden;
        padding-bottom: 50px;
    }
    .team .right .col1 .profile-pic,
    .team .right .col1 .profile-bio
    {
        float: left;
    }
    .team .right .col1 .profile-bio h4{
        font-family:'Poppins ExtraBold'; 
        font-size: 1.2rem;
    }
    .team .right .col1 .profile-bio p.designation{
        padding-bottom: 10px;
        font-family: 'Poppins ExtraLight';
         font-weight: 600;
        font-size: .9rem;
    }
    .team .right .col1 .profile-bio p{
        font-size: 1rem;
    }
    .team .right .col1 .profile-pic{
        width: 30%;
    }
    .team .right .col1 .profile-bio{
        width: 70%;
                padding: 0px 10px;
    }
    
    .team .right .col2,
    .team .right .col3
    {
        float: left;
        width: 50%;
    }
     .team .right .col2 .profile-pic,
     .team .right .col3 .profile-pic{
        width: 30%;
         float: none
    }
    .team .right .col2 .profile-bio,
    .team .right .col3 .profile-bio{
        width: 90%;
        float: none;
    }
     .team .right .col2 .profile-bio h4,
    .team .right .col3 .profile-bio h4{
        font-family:'Poppins ExtraBold'; 
        font-size: 1rem;
    }
    .profile-bio img.plus{
        padding-top: 15px;
    }
    .meettheteam{
        text-align: right;
        font-family:'Poppins ExtraBold'; 
        font-size: 1.5rem;
        transition: 0.3s;
    }
    .meettheteam span{
        color:#fcae1a;
    }
    .meettheteam a{
         color: #000;
          transition: 0.3s;
    }
    
    .meettheteam a:hover{
        color:#fcae1a;
    }
    .meettheteam img{
        position: relative;
        top: 5px;
        left: 5px;
    }
    
    .contact{
         background-image: url(../imgs/news-bg.webp);
        background-repeat: no-repeat;
        background-size: cover;
        padding-bottom: 60px;
        overflow: hidden;
    }
    
    .buzzus{
       width: 90%;
       margin: 0 auto;
       padding: 0px 0px; 
    }
    .buzzus .left,
    .buzzus .right
    {
        float:left;
        width: 50%;
    }
     .buzzus .left h2{
         font-size: 2.5rem;
        line-height: 1;
        width: 100%;
    }
    .buzzus .left h2 span{
        color: #fcae1a;
    }
    
    .buzzus .left p{
        font-family:'Poppins ExtraBold'; 
        font-size: 1.2rem;
    }
    .buzzus .left p a{
        color: #000;
        transition: 0.3s;
    }
     .buzzus .left p a:hover{
        color:  #fcae1a;   
    }
    .buzzus .left address{
        font-style: normal;
        width: 70%;
        font-size: 1.1rem;
         font-family: 'Poppins ExtraLight';
         font-weight: 600;
        line-height: 1.2;
    }
    
     .buzzus .right h3{
         font-size: 2rem;
        line-height: 1;
         font-family:'Poppins ExtraBold'; 
         padding-bottom: 20px;
    }
    
    .buzzus .right h3 span{
        color: #fcae1a;
    }
    .buzzus .right form{
        padding-top: 30px;
    }
    .buzzus .right form p{
        padding-bottom: 80px;
    }
    .buzzus .right form p label{
        width: 50%;
        display: block;
        float: left;
    }
     .buzzus .right form p input{
        width: 100%;
        display: block;
        float: left;
        border: 0;
        border-bottom: 2px solid #d7d6d6;
        height: 40px;
        margin-bottom: 5px;
    }
    .buzzus .right form button{
        font-family:'Poppins ExtraBold';
        border: 0;
        background: #fcae1a;
         font-size: 1rem;
        color: #fff;
        padding: 10px 25px;
        cursor: pointer;
        transition: 0.3s;
    }
    .buzzus .right form button:hover{
        background: #000;
    }
    .buzzus .right form button img{
        position: relative;
        top: 0px;
        left: 3px;
        width: 15px;
    }
    .popup-content button.close{
        right: 10px;    
        font-size: 16px;
    }
    .popup-content button.close img{
        width: 30px;
    position: relative;
    top: 7px;
    }
    .popup-left {
    float: none;
    width: 100%;
          text-align: center;
        padding-top: 40px;
    }
    .popup-left img {
        width: 55%;
      
    }
    .popup-right {
    float: none;
    width: 100%;
    padding: 20px 20px;
    overflow: hidden;
}
    .popup-right h2{
        font-size: 1.8rem;
    }
    .popup-right p{
        font-size: 13px;
    }
    
    .popup-right .stats p{
        font-size: 12px;
    }
    .popup-right .stats img{
        width: 100%;
    }
    
}
@media only screen and (min-width:1002px) and (max-width:1024px){
    
      .clients-inner{
            padding-top: 40px;
    }
    .client-copy h1, .client-copy h2,
    .brands h2,
    .showcases h2,
    .news h2
    {
            font-size: 2.5rem;
        padding-bottom: 20px;
    }
    .clients-inner{
            width: 90%;
                padding-bottom: 70px;
    }
    .client-copy{
            width: 100%;
        float: none;
        text-align: center;
    }
    .client-copy p{
            width: 100%;
    }
    .client-logos{
        float: none;
        width: 80%;
      margin: 0 auto;
    }
    .client-logos{
            margin-top: 30px;
    }
    .services{
        overflow: hidden;
    }
    .service{
        width: 25%;
        height: 440px;
    }
    .service h3{
     font-size: 1.5rem;   
    }
    .service  [class^="imghvr-"] figcaption, .service  [class*=" imghvr-"] figcaption{
            padding: 64px 15px 0px 0px;
    }
    figcaption p{
            padding: 20px 10px;
    }
    figcaption ul li{
            padding: 0px 0px 5px 0px;
    }
    .showcases h2 img {
    width: 30px;
    position: relative;
    top: -5px;
    left: 10px;
}
    .showcase .showcase-hvr{
            padding: 100px 20px;
    }
   
    .showcases h3{
        font-size: 1.8rem;
    }
    .showcases p{
        font-size: 16px;
        font-weight: 600;
       
    }
    .showcase-content{
        height: 200px;
        width: 200px;
        position: absolute;
        bottom: 0px;
        text-align: left;
    }
       
    figcaption .showcase-content  p{
        padding: 10px 0px;
    } 
         
     figcaption .showcase-content a{
        position: relative;
         color: #fff;
    }
    figcaption .showcase-content button span{
        position: relative;
        top: -25px;
        left: 33px;
        font-size: 14px;
        font-weight: 900;
         font-family: 'Poppins SemiBold';
    }
    figcaption .showcase-content button {
        position: relative;
        color: #fff;
        background: transparent;
        border: 0;
        cursor: pointer;
    }
    figcaption .showcase-content button img{
        width: 30px;
    }

     .news{
    width: 90%;
    margin: 0 auto;
    padding-top: 60px;
    padding-bottom: 0px;
    }
    .news .left{
        float: none;
        width: 100%;
        text-align:center;
    }
    .news .left p{
        font-family: 'Poppins ExtraLight';
        font-size: 1rem;
        font-weight: 600;
        padding-bottom: 20px;
        
    }
    
    .news .right{
        float: none;
        width: 100%;
         text-align: center;
    }
    .news .right ul{
        font-family: 'Poppins ExtraLight';
        font-weight: 600;
        padding-top: 30px;  
        text-align: center;
    }
    .news .right ul li{
        list-style: none;
        display: inline-block;
        padding-right: 35px;
        
    }
    .news .right ul li:nth-child(2){
        color: #fcae1a;
    }
    

    .news h2 span{ 
        color: #fcae1a;
    }
    .news .right img{
        width: 60%;
        padding-top: 40px;
    }
    
    .newssites{
         background-image: url(../imgs/news-bg.webp);
        background-repeat: no-repeat;
        background-size: contain;
        padding-bottom: 60px;
        overflow: hidden;
    }
    .sites{
     width: 90%;
     margin: 0 auto;
    display:table;
    }
    .newssites .site{
        width: 33%;
         display: table-cell;
        text-align: center;
        padding: 10px;
        
    }
    
    .newssites .site img{
        padding-bottom: 30px;
         width: 60%;
    } 
    .newssites .site:first-child img{
        width: 100%;
    }
    .newssites .site:first-child .ourpartner{
        width: 100%;
    }
    .newssites .site h3{
        font-family:'Poppins ExtraBold';    
        color: #fcae1a;
        font-size: 1.2rem;
    }
    .newssites .site p{
        font-family: 'Poppins ExtraLight';
         font-weight: 600;
        font-size: .8rem;
    }
    .newssites .site h4{
        font-family:'Poppins ExtraBold';    
        color: #000;
        font-size: 1rem;
        padding-top: 40px;
        padding-bottom: 20px;
    }
    
    .newssites .site ul li{
        list-style: none;
        text-align: center;
        display: inline-block;
        width: 60%;
        font-family: 'Poppins ExtraLight';
         font-weight: 600;
        font-size: .8rem;
    }
    
    .newssites .site p.lang{
        font-size: .8rem;
    }
    
    
    .testimonials{
        background-image: url(../imgs/testimonial-bg.webp);
        background-repeat: no-repeat;
        background-size: cover;
        padding-bottom: 40px;
        background-position: center;
        overflow: hidden;
    }
    .testimonial{
        width: 90%;
        margin: 0 auto;
        padding: 0px 0px;
        
    }
    .testimonials h2{
        font-size: 2.5rem;
     line-height: 1.2;
    }

    .testimonials .left{
        color: #fff;
        float: none;
        width: 100%;
        padding:150px 0px 60px;
        text-align: center;
       
    }
    .testimonials .left p{
        width: 100%;
    }
    .testimonials .right{
        color: #000;
        float: none;
        width: 100%;
       padding: 0px 30px 30px;
        
    }
    .testimonials .right p:nth-child(2){
        margin-top: 20px;
    }
    .testimonials .right .testi-slide{
        font-size: 1.3rem;
    }
    .testimonials .right .testi-slide p:last-child{
        font-size: .9rem;
    }
    
    
    .teams{
        background-image: url(../imgs/news-bg.webp);
        background-repeat: no-repeat;
        background-size: contain;
        padding-bottom: 60px;
        overflow: hidden;
    }
    .team{
    width:90%;
    margin: 0 auto;
    padding: 50px 0px;
    }
    
    .team .left{
        float: none;
        width: 100%;
        padding-bottom: 40px;
    }
    .team .left h2{
         font-size: 3rem;
        line-height: 1.2;
        width: 70%;
    }
    .team .left h2 span{
        color: #fcae1a;
    }
    .team .right{
        float: none;
        width: 100%;
    }
    .team .right .col1{
        overflow: hidden;
        padding-bottom: 50px;
    }
    .team .right .col1 .profile-pic,
    .team .right .col1 .profile-bio
    {
        float: left;
    }
    .team .right .col1 .profile-bio h4{
        font-family:'Poppins ExtraBold'; 
        font-size: 1.2rem;
    }
    .team .right .col1 .profile-bio p.designation{
        padding-bottom: 10px;
        font-family: 'Poppins ExtraLight';
         font-weight: 600;
        font-size: .9rem;
    }
    .team .right .col1 .profile-bio p{
        font-size: 1rem;
    }
    .team .right .col1 .profile-pic{
        width: 30%;
    }
    .team .right .col1 .profile-bio{
        width: 70%;
                padding: 0px 10px;
    }
    
    .team .right .col2,
    .team .right .col3
    {
        float: left;
        width: 50%;
    }
     .team .right .col2 .profile-pic,
     .team .right .col3 .profile-pic{
        width: 30%;
         float: none
    }
    .team .right .col2 .profile-bio,
    .team .right .col3 .profile-bio{
        width: 90%;
        float: none;
    }
     .team .right .col2 .profile-bio h4,
    .team .right .col3 .profile-bio h4{
        font-family:'Poppins ExtraBold'; 
        font-size: 1rem;
    }
    .profile-bio img.plus{
        padding-top: 15px;
    }
    .meettheteam{
        text-align: right;
        font-family:'Poppins ExtraBold'; 
        font-size: 1.5rem;
        transition: 0.3s;
    }
    .meettheteam span{
        color:#fcae1a;
    }
    .meettheteam a{
         color: #000;
          transition: 0.3s;
    }
    
    .meettheteam a:hover{
        color:#fcae1a;
    }
    .meettheteam img{
        position: relative;
        top: 5px;
        left: 5px;
    }
    
    .contact{
         background-image: url(../imgs/news-bg.webp);
        background-repeat: no-repeat;
        background-size: cover;
        padding-bottom: 60px;
        overflow: hidden;
    }
    
    .buzzus{
       width: 90%;
       margin: 0 auto;
       padding: 0px 0px; 
    }
    .buzzus .left,
    .buzzus .right
    {
        float:left;
        width: 50%;
    }
     .buzzus .left h2{
         font-size: 2.5rem;
        line-height: 1;
        width: 100%;
    }
    .buzzus .left h2 span{
        color: #fcae1a;
    }
    
    .buzzus .left p{
        font-family:'Poppins ExtraBold'; 
        font-size: 1.2rem;
    }
    .buzzus .left p a{
        color: #000;
        transition: 0.3s;
    }
     .buzzus .left p a:hover{
        color:  #fcae1a;   
    }
    .buzzus .left address{
        font-style: normal;
        width: 70%;
        font-size: 1.1rem;
         font-family: 'Poppins ExtraLight';
         font-weight: 600;
        line-height: 1.2;
    }
    
     .buzzus .right h3{
         font-size: 2rem;
        line-height: 1;
         font-family:'Poppins ExtraBold'; 
         padding-bottom: 20px;
    }
    
    .buzzus .right h3 span{
        color: #fcae1a;
    }
    .buzzus .right form{
        padding-top: 30px;
    }
    .buzzus .right form p{
        padding-bottom: 80px;
    }
    .buzzus .right form p label{
        width: 50%;
        display: block;
        float: left;
    }
     .buzzus .right form p input{
        width: 100%;
        display: block;
        float: left;
        border: 0;
        border-bottom: 2px solid #d7d6d6;
        height: 40px;
        margin-bottom: 5px;
    }
    .buzzus .right form button{
        font-family:'Poppins ExtraBold';
        border: 0;
        background: #fcae1a;
         font-size: 1rem;
        color: #fff;
        padding: 10px 25px;
        cursor: pointer;
        transition: 0.3s;
    }
    .buzzus .right form button:hover{
        background: #000;
    }
    .buzzus .right form button img{
        position: relative;
        top: 0px;
        left: 3px;
        width: 15px;
    }
    
    .popup-content button.close{
        right: 10px;    
        font-size: 16px;
    }
    .popup-content button.close img{
        width: 30px;
    position: relative;
    top: 7px;
    }
    .popup-left {
    float:left;
    width: 50%;
          text-align: center;
        padding-top: 40px;
    }
    .popup-left img {
        width: 100%;
      
    }
    .popup-right {
    float: left;
    width: 50%;
    padding: 20px 20px;
    overflow: hidden;
}
    .popup-right h2{
        font-size: 1.8rem;
    }
    .popup-right p{
        font-size: 13px;
    }
    
    .popup-right .stats p{
        font-size: 12px;
    }
    .popup-right .stats img{
        width: 100%;
    }
    .statsmain{
        display: table
    }
    .statsmain .stats{
                 display: table-cell;
        float: none;
    }
}
@media screen and (min-width: 1200px) {
    
     .service{
        height: auto;
    }
    .service img{
        width: 100%;
    }
    .showcase .showcase-hvr{
            padding: 100px 40px;
    }
   
    .showcases h3{
        font-size: 1.7rem;
    }
     .showcases p.lead-text{
       font-size: 16px;
        font-weight: 400;
        width: 55%;
        text-align: center;
        margin: 0 auto;
        padding: 40px 0px 20px;
       
    }
    .showcase-content{
        height: 250px;
        width: 140px;
        position: absolute;
        bottom: 80px;
        text-align: left;
    }
    figcaption p{
            padding: 15px 10px;
    }
    figcaption .showcase-content  p{
        padding: 20px 0px;  
    } 
    figcaption ul{
        padding: 0px 25px;
    }
    figcaption ul li{
        font-size: 11px;
            padding: 0px 0px 4px 0px;
        list-style: disc;
    }
         
    .showcase-content img{
        width: 25px !important;
    }
     figcaption .showcase-content button{
        position: relative;
         color: #fff;
         background: transparent;
         border: 0;
         cursor: pointer;
    }
    figcaption .showcase-content button span{
        position: relative;
        top: -22px;
        font-size: 14px;
        font-weight: 900;
         font-family: 'Poppins SemiBold';
        left: 30px;
    }
    .popup-right{
        padding: 0px 30px;
    }
    .popup-right h2 {
        font-size: 2rem;
    }
    .popup-right .right p {
    font-size: 12px;
    }
    .popup-right p {
        font-size: 1rem;
    }
    .popup-content a.close{
        font-size: 14px;
    }
    .popup-content a.close img{
        width: 30px;
    }
    .pop-header{
            padding: 10px 0px;
    }
    .popup-right .stats p{
            font-size: .7rem;
    }
    .popup-content a.close{
            right: 30px;
    }
    .popup-right .stats{
            width: 25%;
    }
    .popup-right .stats img{
        width: 100%;
    }
    .newsmain{
        background-image: url(../imgs/news-bg.webp);
        background-repeat: no-repeat;
        background-size: cover;
        padding-bottom: 120px;
        overflow: hidden;
    }
    .news{
    width: 80%;
    margin: 0 auto;
    padding-top: 60px;
    padding-bottom: 0px;
    }
    .news .left{
        float: left;
        width: 40%;
    }
    .news .left p{
        font-family: 'Poppins ExtraLight';
        font-size: 1rem;
        font-weight: 600;
        padding-bottom: 20px;
    }
    
    .news .right{
        float: left;
        width: 60%;
         text-align: center;
    }
    .news .right ul{
        font-family: 'Poppins ExtraLight';
        font-weight: 600;
        padding-top: 30px;  
        text-align: right;
    }
    .news .right ul li{
        list-style: none;
        display: inline-block;
        padding-right: 35px;
        
    }
    .news .right ul li:nth-child(2){
        color: #fcae1a;
    }
    
    .news h2{
        font-size: 4rem;
    line-height: 1.2;
    }
    .news h2 span{ 
        color: #fcae1a;
    }
    .news .right img{
        width: 60%;
        padding-top: 40px;
    }
    
      .newssites{
        background-image: url(../imgs/news-bg.webp);
        background-repeat: no-repeat;
        background-size: cover;
        padding-bottom: 40px;
        overflow: hidden;
    }
    .sites{
     width: 80%;
     margin: 0 auto;
    display:table;
    }
    .newssites .site{
        width: 33%;
         display: table-cell;
        text-align: center;
        padding: 10px;
        
    }
    
    .newssites .site img{
        padding-bottom: 30px;
        width: 100%;
    } 
    
       .newssites .site img{
        padding-bottom: 30px;
         width: 60%;
         transition: transform .3s; 
    } 
    .newssites .site img:hover{
            transform: scale(1.2);
    }
    .newssites .site:first-child img{
        width: 100%;
    }
    .newssites .site:first-child .ourpartner{
        width: 55%;
    }

    .newssites .site h3{
        font-family:'Poppins ExtraBold';    
        color: #fcae1a;
        font-size: 1.5rem;
    }
    .newssites .site p{
        font-family: 'Poppins ExtraLight';
         font-weight: 600;
        font-size: .7rem;
    }
    .newssites .site h4{
        font-family:'Poppins ExtraBold';    
        color: #000;
        font-size: 1.2rem;
        padding-top: 40px;
        padding-bottom: 20px;
    }
    
    .newssites .site ul li{
        list-style: none;
        text-align: center;
        display: inline-block;
        width: 48%;
        font-family: 'Poppins ExtraLight';
         font-weight: 600;
        font-size: .8rem;
    }
    
    .newssites .site p.lang{
        font-size: .8rem;
    }
    
    .testimonials{
        background-image: url(../imgs/testimonial-bg.webp);
        background-repeat: no-repeat;
        background-size: contain;
        padding-bottom: 40px;
        overflow: hidden;
    }
    .testimonial{
        width: 80%;
        margin: 0 auto;
        padding: 50px 0px;
        
    }
    .testimonials .left{
        color: #fff;
        float: left;
        width: 50%;
        padding: 100px 70px;
       
    }
    .testimonials .right{
        color: #000;
        float: left;
        width: 50%;
        padding: 100px 50px;
        
    }
      .testimonials .left p{
        width: 77%;
    }
    .testimonials .right p:nth-child(2){
        margin-top: 20px;
    }

    .testimonials h2{
        font-size: 3rem;
     line-height: 1.2;
    }
    
     .testimonials .right .testi-slide p:last-child{
        font-size: .8rem;
    }
    
    
    .teams{
        background-image: url(../imgs/news-bg.webp);
        background-repeat: no-repeat;
        background-size: cover;
        padding-bottom: 60px;
        overflow: hidden;
    }
    .team{
    width:80%;
    margin: 0 auto;
    padding: 50px 0px;
    }
    
    .team .left{
        float: left;
        width: 40%;
    }
    .team .left h2{
         font-size: 3rem;
        line-height: 1.2;
        width: 70%;
    }
    .team .left h2 span{
        color: #fcae1a;
    }
    .team .right{
        float: left;
        width: 60%;
    }
    .team .right .col1{
        overflow: hidden;
        padding-bottom: 50px;
    }
    .team .right .col1 .profile-pic,
    .team .right .col1 .profile-bio
    {
        float: left;
    }
    .team .right .col1 .profile-bio h4{
        font-family:'Poppins ExtraBold'; 
        font-size: 1.2rem;
    }
    .team .right .col1 .profile-bio p.designation{
        padding-bottom: 10px;
        font-family: 'Poppins ExtraLight';
         font-weight: 600;
        font-size: .9rem;
    }
    .team .right .col1 .profile-bio p{
        font-size: .9rem;
    }
    .team .right .col1 .profile-pic{
        width: 30%;
    }
    .team .right .col1 .profile-pic img{
        width: 80%;
    }
    .team .right .col1 .profile-bio{
        width: 70%;
    }
    
    .team .right .col2,
    .team .right .col3
    {
        float: left;
        width: 50%;
    }
     .team .right .col2 .profile-pic,
     .team .right .col3 .profile-pic{
        width: 30%;
         float: left
    }
     .team .right .col2 .profile-pic img,
    .team .right .col3 .profile-pic img{
        width: 90%
    }
    .team .right .col2 .profile-bio,
    .team .right .col3 .profile-bio{
        width: 60%;
        float: left;
    }
    .team .right .col2 .profile-bio p,
     .team .right .col3 .profile-bio p
    {
        font-size: .8rem;
    }
     .team .right .col2 .profile-bio p.designation,
     .team .right .col3 .profile-bio p.designation
    {
        font-size: .9rem;
    }
        .team .right .col2 .profile-bio h4,
    .team .right .col3 .profile-bio h4{
        font-family:'Poppins ExtraBold'; 
        font-size: 1rem;
    }
    
    .profile-bio img.plus{
        padding-top: 15px;
    }
    .meettheteam{
        text-align: right;
        font-family:'Poppins ExtraBold'; 
        font-size: 1.5rem;
        transition: 0.3s;
    }
    .meettheteam span{
        color:#fcae1a;
    }
    .meettheteam a{
         color: #000;
          transition: 0.3s;
    }
    
    .meettheteam a:hover{
        color:#fcae1a;
    }
    .meettheteam img{
        position: relative;
        top: 5px;
        left: 5px;
    }
    .profile-pic img{
         transition: transform .2s;
    }
    .profile-pic img:hover{
        transform: scale(1.1);
    }
    
    .contact{
         background-image: url(../imgs/news-bg.webp);
        background-repeat: no-repeat;
        background-size: contain;
        padding-bottom: 60px;
        overflow: hidden;
    }
    
    .buzzus{
       width: 80%;
       margin: 0 auto;
       padding: 50px 0px; 
    }
    .buzzus .left,
    .buzzus .right
    {
        float: left;
        width: 50%;
    }
     .buzzus .left h2{
         font-size: 5rem;
        line-height: 1;
        width: 15%;
    }
    .buzzus .left h2 span{
        color: #fcae1a;
    }
    
    .buzzus .left p{
        font-family:'Poppins ExtraBold'; 
        font-size: 1.2rem;
    }
    .buzzus .left p a{
        color: #000;
        transition: 0.3s;
    }
     .buzzus .left p a:hover{
        color:  #fcae1a;   
    }
    .buzzus .left address{
        font-style: normal;
        width: 30%;
        font-size: 1rem;
         font-family: 'Poppins ExtraLight';
         font-weight: 600;
        line-height: 1.2;
    }
    
     .buzzus .right h3{
         font-size: 2rem;
        line-height: 1;
         font-family:'Poppins ExtraBold'; 
         padding-bottom: 20px;
    }
    
    .buzzus .right h3 span{
        color: #fcae1a;
    }
    .buzzus .right form{
        padding-top: 30px;
    }
    .buzzus .right form p{
        padding-bottom: 60px;
    }
    .buzzus .right form p label{
        width: 25%;
        display: block;
        float: left;
    }
     .buzzus .right form p input{
        width: 50%;
        display: block;
        float: left;
        border: 0;
        border-bottom: 2px solid #d7d6d6;
    }
    .buzzus .right form button{
        font-family:'Poppins ExtraBold';
        border: 0;
        background: #fcae1a;
         font-size: 1rem;
        color: #fff;
        padding: 10px 25px;
        cursor: pointer;
        transition: 0.3s;
    }
    .buzzus .right form button:hover{
        background: #000;
    }
    .buzzus .right form button img{
        position: relative;
        top: 0px;
        left: 3px;
        width: 15px;
    }
    
.popup-content{
            padding: 60px 40px;
    }    
    .popup-right:{
        padding: 20px 30px;
    }
    .popup-content button.close{
            right: 30px;
        top: -50px;
        font-size: 14px;
    }
    .popup-content button.close img{
        width: 30px;
    }

 
/*
    .clients-slide .slick-dots li button:before{
        font-size: 15px;    
        top: 10px;
    }
    .clients-slide .slick-dots li.slick-active button:before{
        color: #fcae1a;
    }
*/
}
@media screen and (min-width: 1400px) {
    .Hero-section{
            height: 80vh;
    }
        .Box-one {
        width: 25%;
        font-size: 35px;
        line-height:1.2;
        padding-bottom: 0rem;
        padding-left: 0rem;
    }
    .Box-one, .Box-two{
        justify-content: center;
    align-items: center;
    }

    .Box-two{
        width: 50%;
        padding-right: 0rem;
        padding-left: 24rem;
    }
    .Box-two ul li{
            font-size: 1.2rem;
    }
    
    .top-leaders {
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
}
.top-leader-member{
width: 85%;
    margin: 0 auto;
    overflow: hidden;
}
.team-member-1 {
    padding-top: 3rem;
}

.team-images {
    width: 50%;
}
.team-images img{
        width: 40rem;
}
.information {
    padding-top: 5rem;
    width: 50%;
    padding-right: 15rem;
    padding-left:11rem;
    line-height: 1.3rem;
}
.team-members-2{
        padding: 1rem 0rem 0rem 4rem;
}
.team-images-leader-2 img{
        width: 15rem;
}
.informations h3 {
    font-size: 2rem;
    padding: 0rem 0rem 0rem 1rem;
}
.informations h1{
    font-size: 16px;
    padding: 0.5rem 0rem .5rem 1rem;
}
.informations p{
    font-size: 14px;
    line-height: 1.5;
    padding:0rem 0rem 1rem 1rem
}
.layer-1{
    height: 10rem;
}
.top-lead-members{
    padding: 4rem 0rem 0rem 0rem;
    gap: 1rem;
    width: 95%;
}
.leaders img {
    width: 10rem;
}
.leaders h1 {
    font-size: 1.3rem !important;
}
.leaders h3{
    font-weight: 600;
    font-size: 15px;
    padding-bottom: 0px;
}
}

@media screen and (min-width: 1600px) {
    
.client-copy h1, .client-copy h2 {
    font-size: 4rem;
    line-height: 1.2;
}
    
}


@media (max-width: 991px) {
	.bt-bee-icon {
    position: absolute;
    top: 25% !important;
    right: 25% !important;
    width: 80px !important;
}
}

@media screen and (min-width: 1700px) {
    .hero-heading span {
  display: block;
  opacity: 0;
  transform: translateY(50px);
}
     .Hero-section{
            height: 100vh;
    }
    .clients-inner{
        padding-top: 0px;
        padding-bottom: 230px;
    }
    
    .client-copy h1, .client-copy h2 {
    font-size: 4rem;
    line-height: 1.2;
}
    .logo-slider .slick-slide img{
    padding-left: 40px;
    padding-bottom: 30px;
   
}
    .logo-slider img {
    width: auto;
    text-align: center;
}
 
 .service [class^="imghvr-"] figcaption, .service [class*=" imghvr-"] figcaption{
        padding: 93px 15px 0px 0px;
    }
    .brands h2{
        font-size: 5rem;
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .service h3{
        font-size: 2.2rem;
    }
    
    figcaption p{
        font-size: 14px;
        padding: 70px 10px;
    }
    
    figcaption ul li{
        font-size: 14px;
        font-weight: 900;
    }

    .service{
        height: auto;
    }
    .service img{
        width: 100%;
    }
    .showcase .showcase-hvr{
            padding: 100px 40px;
    }
   
    .showcases h3{
        font-size: 1.8rem;
    }
    .showcases p.lead-text{
       font-size: 16px;
        font-weight: 400;
        width: 35%;
        text-align: center;
        margin: 0 auto;
        padding: 40px 0px;
       
    }
    .showcase-content{
        height: 250px;
        width: 190px;
        position: absolute;
        bottom: 80px;
    }
       
    figcaption .showcase-content  p{
        padding: 20px 0px;
    } 
         
     figcaption .showcase-content a{
        position: relative;
         color: #fff;
         top:110%;
    }
    figcaption .showcase-content a span{
        position: relative;
        top: -10px;
        font-size: 14px;
        font-weight: 900;
         font-family: 'Poppins SemiBold';
    }
    .clients-slide .slick-slide img{
        width: 640px;
    }
     .newsmain{
        background-image: url(../imgs/news-bg.webp);
        background-repeat: no-repeat;
        background-size: contain;
        padding-bottom: 120px;
        overflow: hidden;
         
    }
    .news{
    width: 80%;
    margin: 0 auto;
    padding-top: 60px;
    padding-bottom: 0px;
    }
    .news .left{
        float: left;
        width: 40%;
    }
    .news .left p{
        font-family: 'Poppins ExtraLight';
        font-size: 1rem;
        font-weight: 600;
        padding-bottom: 20px;
        
    }
    
    .news .right{
        float: left;
        width: 60%;
         text-align: right;
    }
    .news .right ul{
        font-family: 'Poppins ExtraLight';
        font-weight: 600;
        padding-top: 30px;  
        text-align: right;
    }
    .news .right ul li{
        list-style: none;
        display: inline-block;
        padding-right: 35px;
        
    }
    .news .right ul li:nth-child(2){
        color: #fcae1a;
    }
    
    .news h2{
        font-size: 5rem;
        line-height: 1.2;
        padding-top: 60px;
    }
    .news h2 span{ 
        color: #fcae1a;
    }
    .news .right img{
        width: 60%;
        padding-top: 40px;
    }
    
    .newssites{
         background-image: url(../imgs/news-bg.webp);
        background-repeat: no-repeat;
        background-size: contain;
        padding-bottom: 60px;
        overflow: hidden;
    }
    .sites{
     width: 80%;
     margin: 0 auto;
    display:table;
    }
    .newssites .site{
        width: 33%;
         display: table-cell;
        text-align: center;
        padding: 30px;
        
    }
    
    .newssites .site img{
        padding-bottom: 30px;
         width: 60%;
    } 
    .newssites .site:first-child img{
        width: 100%;
    }
    .newssites .site:first-child .ourpartner{
        width: 55%;
    }
    .newssites .site h3{
        font-family:'Poppins ExtraBold';    
        color: #fcae1a;
        font-size: 2rem;
    }
    .newssites .site p{
        font-family: 'Poppins ExtraLight';
         font-weight: 600;
        font-size: 1rem;
    }
    .newssites .site h4{
        font-family:'Poppins ExtraBold';    
        color: #000;
        font-size: 1.7rem;
        padding-top: 40px;
        padding-bottom: 20px;
    }
    
    .newssites .site ul li{
        list-style: none;
        text-align: center;
        display: inline-block;
        width: 48%;
        font-family: 'Poppins ExtraLight';
         font-weight: 600;
        font-size: 1.2rem;
    }
    
    .newssites .site p.lang{
        font-size: 1.2rem;
    }
    .testimonials{
        background-image: url(../imgs/testimonial-bg.webp);
        background-repeat: no-repeat;
        background-size: cover;
        padding-bottom: 40px;
        overflow: hidden;
    }
    .testimonial{
        width: 80%;
        margin: 0 auto;
        padding: 100px 0px;
        
    }
    .testimonials h2{
        font-size: 5rem;
     line-height: 1.2;
    }

    .testimonials .left{
        color: #fff;
        float: left;
        width: 50%;
        padding: 100px 100px;
       
    }
    .testimonials .left p{
        width: 50%;
    }
    .testimonials .right{
        color: #000;
        float: left;
        width: 50%;
        padding: 100px 100px;
        
    }
    .testimonials .right p:nth-child(2){
        margin-top: 20px;
    }
    .testimonials .right .testi-slide{
        font-size: 1.3rem;
    }
    .testimonials .right .testi-slide p:last-child{
        font-size: .9rem;
    }
    
    .teams{
        background-image: url(../imgs/news-bg.webp);
        background-repeat: no-repeat;
        background-size: contain;
        padding-bottom: 60px;
        overflow: hidden;
    }

    /* Ajay team CSS */
.Box-one, .Box-two {
    justify-content: center;
    align-items: center;
}
.Box-one {
    width: 25%;
    font-size: 40px;
    line-height: 6rem;
    padding-bottom:0rem;
    padding-left: 0rem;
}
.Box-two{
 width:50%;
 padding-right: 0rem;
 padding-top: 10rem;
}
.Box-two ul li {
    padding-bottom: 3rem;
    font-size: 1.4rem;
            width: 95%;
}

.team-buzztribe h1{
        padding: 20px 0px;
}
.team-buzztribe .leaders h1{
        padding: 0px 0px;
        text-align: left;
}
.top-leaders {
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
}
.top-leader-member{
width: 85%;
    margin: 0 auto;
    overflow: hidden;
}
.team-member-1 {
    padding-top: 3rem;
}

.team-images {
    width: 50%;
}
.team-images img{
        width: 40rem;
}
.information {
    padding-top: 5rem;
    width: 50%;
    padding-right: 20rem;
    padding-left: 0rem;
    line-height: 1.3rem;
}
.team-members-2{
        padding: 1rem 0rem 0rem 9.5rem;
}
.team-images-leader-2 img{
        width: 15rem;
}
.informations h3 {
    font-size: 2rem;
}
.informations h1{
    font-size: 16px;
}
.informations p{
    font-size: 14px;
    line-height: 1.5;
}
.layer-1{
    height: 12rem;
}
.top-lead-members{
    padding: 4rem 6rem 0rem 6rem;
    gap: 1rem;
}
.leaders img {
    width: 10rem;
}
.leaders h1 {
    font-size: 1.3rem !important;
}
.leaders h3{
    font-weight: 600;
    font-size: 15px;
    padding-bottom: 0px;
}
    /* Ajay team CSS */


    .team{
    width:80%;
    margin: 0 auto;
    padding: 50px 0px;
    }
    
    .team .left{
        float: left;
        width: 40%;
    }
    .team .left h2{
         font-size: 5rem;
        line-height: 1.2;
        width: 70%;
    }
    .team .left h2 span{
        color: #fcae1a;
    }
    .team .right{
        float: left;
        width: 60%;
    }
    .team .right .col1{
        overflow: hidden;
        padding-bottom: 50px;
    }
    .team .right .col1 .profile-pic,
    .team .right .col1 .profile-bio
    {
        float: left;
    }
    .team .right .col1 .profile-bio h4{
        font-family:'Poppins ExtraBold'; 
        font-size: 1.2rem;
    }
    .team .right .col1 .profile-bio p.designation{
        padding-bottom: 10px;
        font-family: 'Poppins ExtraLight';
         font-weight: 600;
        font-size: .9rem;
    }
    .team .right .col1 .profile-bio p{
        font-size: 1.2rem;
    }
    .team .right .col1 .profile-pic{
        width: 30%;
    }
    .team .right .col1 .profile-bio{
        width: 70%;
    }
    
    .team .right .col2,
    .team .right .col3
    {
        float: left;
        width: 50%;
    }
     .team .right .col2 .profile-pic,
     .team .right .col3 .profile-pic{
        width: 30%;
         float: left
    }
    .team .right .col2 .profile-bio,
    .team .right .col3 .profile-bio{
        width: 60%;
        float: left;
    }
     .team .right .col2 .profile-bio h4,
    .team .right .col3 .profile-bio h4{
        font-family:'Poppins ExtraBold'; 
        font-size: 1rem;
    }
    .profile-bio img.plus{
        padding-top: 15px;
    }
    .meettheteam{
        text-align: right;
        font-family:'Poppins ExtraBold'; 
        font-size: 1.5rem;
        transition: 0.3s;
    }
    .meettheteam span{
        color:#fcae1a;
    }
    .meettheteam a{
         color: #000;
          transition: 0.3s;
    }
    
    .meettheteam a:hover{
        color:#fcae1a;
    }
    .meettheteam img{
        position: relative;
        top: 5px;
        left: 5px;
    }
    
    .contact{
         background-image: url(../imgs/news-bg.webp);
        background-repeat: no-repeat;
        background-size: contain;
        padding-bottom: 60px;
        overflow: hidden;
    }
    
    .buzzus{
       width: 80%;
       margin: 0 auto;
       padding: 50px 0px; 
    }
    .buzzus .left,
    .buzzus .right
    {
        float: left;
        width: 50%;
    }
     .buzzus .left h2{
         font-size: 5rem;
        line-height: 1;
        width: 15%;
    }
    .buzzus .left h2 span{
        color: #fcae1a;
    }
    
    .buzzus .left p{
        font-family:'Poppins ExtraBold'; 
        font-size: 1.2rem;
    }
    .buzzus .left p a{
        color: #000;
        transition: 0.3s;
    }
     .buzzus .left p a:hover{
        color:  #fcae1a;   
    }
    .buzzus .left address{
        font-style: normal;
        width: 30%;
        font-size: 1.1rem;
         font-family: 'Poppins ExtraLight';
         font-weight: 600;
        line-height: 1.2;
    }
    
     .buzzus .right h3{
         font-size: 2rem;
        line-height: 1;
         font-family:'Poppins ExtraBold'; 
         padding-bottom: 20px;
    }
    
    .buzzus .right h3 span{
        color: #fcae1a;
    }
    .buzzus .right form{
        padding-top: 30px;
    }
    .buzzus .right form p{
        padding-bottom: 60px;
    }
    .buzzus .right form p label{
        width: 18%;
        display: block;
        float: left;
    }
     .buzzus .right form p input{
        width: 50%;
        display: block;
        float: left;
        border: 0;
        border-bottom: 2px solid #d7d6d6;
    }
    .buzzus .right form button{
        font-family:'Poppins ExtraBold';
        border: 0;
        background: #fcae1a;
         font-size: 1rem;
        color: #fff;
        padding: 10px 25px;
        cursor: pointer;
        transition: 0.3s;
    }
    .buzzus .right form button:hover{
        background: #000;
    }
    .buzzus .right form button img{
        position: relative;
        top: 0px;
        left: 3px;
        width: 15px;
    }

    figcaption .showcase-content button span{
        top: -24px;
        left: 30px;
    }
    .popup-content{
            padding: 100px 40px;
    }    
    .popup-right:{
        padding: 60px 30px;
    }
    .popup-content button.close{
            right: 30px;
        top: -70px;
    }
}
@media screen and (min-width: 1900px) {
    .client-copy h1, .client-copy h2 {
    font-size: 4rem;
    line-height: 1.2;
}
    .client-copy p{
        padding-top: 15px;
    }
}
/* --- NEW MOBILE DRAWER MENU --- */
.mobile-menu-open {
    display: none;
}
@media screen and (max-width: 900px) {
    .header .desktop-menu {
        display: none !important;
    }
    #mobile-menu-open {
        display: block !important;
        float: right;
        margin-top: 10px;
    }
    .header .logo {
        width: 60%;
        text-align: left;
        padding-left: 15px;
    }
}
.mobile-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease;
}
.mobile-drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}
.mobile-drawer-menu {
    position: fixed;
    top: 0;
    left: -100%; /* Slide from left */
    width: 85%;
    max-width: 400px;
    height: 100vh;
    background: #fff; /* Black background */
    z-index: 9999;
    padding: 30px;
    display: flex;
    flex-direction: column;
    box-shadow: 5px 0 25px rgba(0,0,0,0.5);
    transition: left 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}
.mobile-drawer-menu.active {
    left: 0;
}
.mobile-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}
.mobile-drawer-header img {
    height: 40px;
}
#mobile-menu-close {
    font-size: 40px;
    color: #000;
    cursor: pointer;
    line-height: 1;
}
.mobile-drawer-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    /* flex-grow: 1; */
}
.mobile-drawer-nav li {
    margin-bottom: 25px;
    overflow: hidden;
}
.mobile-drawer-nav li a {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    font-weight: 500;
    color: #000; /* White text */
    text-decoration: none;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease, color 0.3s ease;
}
.mobile-drawer-nav li a:hover {
    color: #fcae1a;
}
/* Stagger animation based on child index */
.mobile-drawer-menu.active .mobile-drawer-nav li:nth-child(1) a { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
.mobile-drawer-menu.active .mobile-drawer-nav li:nth-child(2) a { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.mobile-drawer-menu.active .mobile-drawer-nav li:nth-child(3) a { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }
.mobile-drawer-menu.active .mobile-drawer-nav li:nth-child(4) a { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
.mobile-drawer-menu.active .mobile-drawer-nav li:nth-child(5) a { transition-delay: 0.5s; opacity: 1; transform: translateY(0); }
.mobile-drawer-menu.active .mobile-drawer-nav li:nth-child(6) a { transition-delay: 0.6s; opacity: 1; transform: translateY(0); }

.mobile-drawer-divider {
    height: 1px;
    background: rgba(213, 202, 202, 0.963);
    margin: 20px 0;
    width: 100%;
}
.mobile-drawer-socials {
    display: flex;
    gap: 20px;
    align-items: center;
    padding-top: 10px;
}
.mobile-drawer-socials a {
    color: #000;
    font-size: 24px;
    transition: color 0.3s;
}
.mobile-drawer-socials a:hover {
    color: #fcae1a;
}

/* --- More Projects Grid --- */
.more-projects-section {
    padding:0px;
    background: transparent;
    width: 80%;
    margin: 20px auto;
}
.more-projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.more-projects-card {
    overflow: hidden;
    border-radius: 12px;
    opacity: 0;
    height: 65vh;
}
.more-projects-link {
    text-decoration: none;
    display: block;
}
.more-projects-figure {
    width: 100%;
    border-radius: 12px;
    margin: 0;
    overflow: hidden;
}
.more-projects-image {
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
    transition: transform 0.3s ease;
}
.more-projects-card:hover .more-projects-image {
    transform: scale(1.05);
}
@media (max-width: 991px) {
    .more-projects-section .more-projects-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .more-projects-section{
        width:90%;
    }
    .more-projects-card{
        height: 25vh;
    }
}
@media (max-width: 767px) {
.more-projects-section{
        width:90%;
    }
    .more-projects-section .more-projects-grid {
 grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px;
    }
 .more-projects-grid   .more-projects-card{
        height: 48vh;
    }
}
@media (max-width: 768px) {
    .more-projects-section{
        width:90%;
    }
    .more-projects-card{
        height: 25vh;
    }
    .more-projects-section .more-projects-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 15px;
    }
    .more-projects-section .more-projects-card h3 {
        font-size: 1.1rem !important;
        margin-top: 10px !important;
    }
}
@media (max-width: 480px) {
    .more-projects-section .more-projects-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .more-projects-section .more-projects-card h3 {
        font-size: 0.9rem !important;
        text-align: center !important;
    }
}

/* Front Page 3D Slider (Extracted from Mediatek) */
.phone-slider-container {
    position: relative;
    width: 100%;
    height: 350px;
    perspective: 1000px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}
.phone-carousel-track {
    position: relative;
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
    z-index: 4;
}
.phone-card-item {
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 12px !important;
    overflow: hidden;
    cursor: pointer;
    /* GSAP handles transitions */
    background: #fff;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18);
    user-select: none;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
}
.phone-card-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 12px !important;
    background-color: #fff;
    display: block;
    pointer-events: none;
}
@media (max-width: 600px) {
    .phone-slider-container { height: 110px; }
    .phone-carousel-track { height: 220px; }
    .phone-card-item { width: 115px; height: 115px; }
	 .hero-scroll-btn{width:25px !important;height:25px !important;font-size:18px !important;bottom: 10px !important;}
}
@media (min-width: 601px) and (max-width: 1024px) {
    .phone-slider-container { height: 320px; }
    .phone-carousel-track { height: 290px; }
    .phone-card-item { width: 220px; height: 220px; }
}

/* Post-Video Overlay Styles */
#bt-video-wrapper {
    position: relative;
    display: inline-block;
    width: 34%;
    margin: 0 auto;
    vertical-align: top;
}
@media (max-width: 768px) {
    #bt-video-wrapper {
        width: 100%;
    }
}
#bt-video-wrapper #myVideo {
    width: 80%;
    display: block;
    outline: 4px solid white;
    outline-offset: -4px;
}
#post-video-overlay {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 25%;
    left: 18.8%;
    width: 61.7%;
    height: 75%;
    background: linear-gradient(to bottom, #ffffff 50%, #fcae1a 50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* border-radius: 8px; */
}
.hero-scroll-btn {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    font-size: 26px;
    position: absolute;
    bottom: 120px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: all 0.3s ease;
}
.hero-scroll-btn:hover {
    background: rgba(255, 255, 255, 0.6);
    color: white;
}

/* --- New Hero Tablet Responsive Structure --- */
.hero-tablet-showcase {
    position: relative !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 40px auto 0px !important;
    padding: 30px 20px 0px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box;
}

.hero-tablet-frame-container {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important;
}

.hero-tablet-mockup-img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
    position: relative !important;
    z-index: 2 !important;
    pointer-events: none; /* Let clicks pass through to video/slider if needed */
}


.glass-overlay-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc(100% - 30px);
    padding: 10px 8px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    box-sizing: border-box;
    cursor: pointer;
    transition: background 0.3s ease;
}

.hero-tablet-screen-viewport {
    position: absolute !important;
    /* Adjust these percentages based on the transparent screen area of tab-screen2.webp */
       top: 11% !important;
    left: 6% !important;
    width: 86.3% !important;
    height: 77% !important;
    z-index: 15 !important;
    background: #fff !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
}

.hero-tablet-screen-viewport video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* fills the viewport */
    display: block;
}

/* Override existing post-video-overlay to fit inside viewport */
#post-video-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 20 !important;
}

@media (max-width: 768px) {
	
	
	.hero-tablet-mockup-img {
    width: 100% !important;
    height: 260px !important;
/*     display: block !important; */
/*     object-fit: contain !important; */
    position: relative !important;
    z-index: 2 !important;
    pointer-events: none; /* Let clicks pass through to video/slider if needed */
}

	
    .hero-tablet-showcase {
        padding: 0px 0px !important;
        margin: 20px auto !important;
    }
	
	
	.hero-tablet-frame-container {
    position: relative !important;
		top: 63px;}
	
	.client-copy2 {
position: relative;
    left: 0px;
}

.bt-bee-icon {
    position: absolute;
    top: 20% !important;
    right: 5% !important;
    width: 60px !important;
}
	
}




/* --- Buzzworthy Section --- */
.clients {
    background-image: url(../imgs/clients-bg.webp);
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100% auto;
    background-color: #fff; 
    padding-top: 0px;
    padding-bottom: 60px;
}

.clients-inner {
    width: 85%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 50px;
    padding-bottom: 100px;
}

.client-copy {
    width: 35%;
    position: relative;
}

.client-copy h1 {
    font-size: 3.5rem;
    line-height: 1.1;
    font-family: 'Poppins ExtraBold', sans-serif;
    font-weight: 800;
    color: #000;
}

.client-copy h1 span {
    color: #fcae1a;
}

.bt-bee-icon {
    position: absolute;
    top: 22%;
    right: 20%;
    width: 100px;
    height: auto;
    z-index: 5;
}

.client-copy2 {
    width: 50%;
    background: #ffffff;
    border-radius: 20px;
    padding: 3rem 3rem;
    box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.08);
    opacity: 0; /* for GSAP fade-in */
    position: relative;
    left: 70px;
}

.client-copy2 p {
    font-size: 1.1rem;
    line-height: 1.5;
    color: #333;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 10px;
}

.client-copy2 p strong {
    font-weight: 800;
    color: #000;
}







@media (max-width: 768px) {
    
	
	.hero-tablet-frame-container {
    position: relative !important;
		top: 63px;}
	
	.client-copy2 {
position: relative;
    left: 0px;
}
/* 
.bt-bee-icon {
    position: absolute;
    top: 25%;
    right: 8% !important;
    width: 80px;
} */
	
	.clients-inner {
		    padding-bottom: 25px;
	}
	
	.clients {
    background-image: url(../imgs/clients-bg.webp);
    background-repeat: no-repeat;
    background-position: bottom center;
		background-size: 133% auto;
	}
	
	
	

	
}





@media (max-width: 991px) {
    .clients-inner {
        flex-direction: column;
        align-items: flex-start;
    }
    .client-copy, .client-copy2 {
        width: 100%;
    }
    .client-copy2 {
        margin-top: 40px;
        padding: 2rem;
    }
  
}

/* --- The Buzz We Create Section --- */
.buzz-services-section {
    padding: 80px 0 120px 0;
    background: #ffffff;
    text-align: center;
    position: relative;
    /* Removed overflow: hidden so dropdowns aren't clipped */
    z-index: 50; /* Ensure it stays above the next section */
}

.buzz-services-title {
    font-size: 4.5rem;
    font-family: 'Poppins Black', sans-serif;
    font-weight: 900;
    color: #000;
    margin-bottom: 30px;
    opacity: 0; /* For GSAP */
}

.buzz-services-title span {
    color: #fcae1a;
}

.buzz-circle-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px 40px;
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
}

.buzz-circle-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}
.buzz-circle-wrapper.active {
    z-index: 10; /* Bring to front when open */
}

.buzz-circle {
    width: 250px;
    height: 250px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: 8px solid transparent;
    transition: all 0.4s ease;
    opacity: 0; /* For GSAP stagger */
    transform: translateY(30px);
}

.buzz-circle:hover,
.buzz-circle:focus,
.buzz-circle-wrapper.active .buzz-circle {
    background: #ef5928;
    border-color: #d85228;
    box-shadow: 0 20px 50px rgba(239, 89, 40, 0.4);
    transform: translateY(-5px);
}
.buzz-circle-wrapper.active .buzz-circle {
    transform: translateY(0); /* Keep stable when clicked */
}

.buzz-circle .icon-normal {
    width: 50px;
    height: auto;
    margin-bottom: 15px;
    transition: opacity 0.3s;
    display: block;
}

.buzz-circle .icon-hover {
    width: 50px;
    height: auto;
    margin-bottom: 15px;
    transition: opacity 0.3s;
    display: none;
}

.buzz-circle:hover .icon-normal,
.buzz-circle:focus .icon-normal,
.buzz-circle-wrapper.active .icon-normal {
    display: none;
}

.buzz-circle:hover .icon-hover,
.buzz-circle:focus .icon-hover,
.buzz-circle-wrapper.active .icon-hover {
    display: block;
}

.buzz-circle h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    color: #000;
    line-height: 1.3;
    transition: color 0.3s;
    margin-bottom: 10px;
}

.buzz-circle:hover h3,
.buzz-circle:focus h3,
.buzz-circle-wrapper.active h3 {
    color: #ffffff;
}

.plus-icon {
    font-size: 24px;
    font-weight: 800;
    color: #fcae1a;
    transition: all 0.3s;
}

.buzz-circle:hover .plus-icon,
.buzz-circle:focus .plus-icon {
    color: #ffffff;
}

.buzz-circle-wrapper.active .plus-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: url(../imgs/circle-arrow-up.png) center center no-repeat;
    background-size: contain;
    color: transparent; /* hide the + text */
    position: relative;
}
.buzz-circle-wrapper.active .plus-icon::after {
    content: none;
}

.buzz-circle-dropdown {
    position: relative;
    width: 320px;
    background: #ffffff;
    border-radius: 15px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    text-align: left;
    
    /* Push content down instead of absolute overlay */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 30px;
    margin-top: -20px; /* Tucks slightly under the circle */
    z-index: 4;
    transition: all 0.5s ease;
}

.buzz-circle-wrapper.active .buzz-circle-dropdown {
    opacity: 1;
    max-height: 600px;
    padding: 30px;
    margin-top: -15px; 
}

/* Fix z-index so dropdown appears behind the active circle */
.buzz-circle-wrapper.active .buzz-circle {
    z-index: 5;
    position: relative;
}

.buzz-circle-dropdown p {
    font-size: 0.95rem;
    color: #555;
    font-family: 'Poppins', sans-serif;
    margin: 25px 0px;
    line-height: 1.5;
}

.buzz-circle-dropdown ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.buzz-circle-dropdown ul li {
    font-size: 0.9rem;
    color: #222;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    margin-bottom: 20px;
    padding-left: 0;
}

@media (max-width: 991px) {
    .buzz-circle-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .buzz-circle-grid {
        grid-template-columns: 1fr 1fr;
    }
    .buzz-circle-dropdown {
        width: 90%;
    }
	
	 .buzz-circle-dropdown-right {
        width: 229%;
        position: relative;
        left: 96px;
        top: 21px;
    }
	
	 .buzz-circle-dropdown-left {
        width: 232%;
        position: relative;
        left: -101px;
        top: 27px;
    }

	
		.buzz-services-title{
		font-size:2rem;
		margin-bottom:0px;
	}
	
	.buzz-services-section{
		padding:30px 0 50px 0;
	}
	
	.buzz-circle-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
		gap: 49px 20px;
	}
	
	
	.buzz-circle {
    width: 160px;
		height: 160px;
	}
	
	
	
}





/* Optional hover effect on the whole button */
.more-projects-card:hover .glass-overlay-btn,
.glass-overlay-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

.more-projects-card:hover .more-projects-image {
    transform: scale(1.05);
}

/* Left side text container */
.glass-text-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

/* Main Title (e.g., Protect What's Good) */
.glass-text-group h4 {
    margin: 0;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Helps text readability over light images */
    font-family: 'Poppins', sans-serif;
}

/* Subtitle (e.g., Brand: Tetrapak) */
.glass-text-group p {
    margin: 0;
    color: rgba(255, 255, 255, 0.85); /* Slightly faded white */
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    font-family: 'Poppins', sans-serif;
}

/* The circular Plus Icon on the right */
/* .glass-plus-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25); 
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-size: 20px;
    font-weight: 400;
    transition: all 0.3s ease;
} */

.glass-plus-icon img{
    width: 35px;
}

/* Hover effect just for the plus icon circle */
/* .more-projects-card:hover .glass-plus-icon,
.glass-overlay-btn:hover .glass-plus-icon {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.05);
} */

/* --- News & Content Section --- */
.news-offer-circle {
    /* renaming inner classes to avoid conflict if necessary, but I used offer-circle */
}

.offer-circle {
    width: 200px;
    height: 200px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: 8px solid transparent;
    transition: all 0.4s ease;
    text-align: center;
    padding: 20px;
}

.offer-circle:hover,
.offer-circle:focus {
    background: #ef5928;
    border-color: #d85228;
    box-shadow: 0 20px 50px rgba(239, 89, 40, 0.4);
    transform: translateY(-5px);
}

.offer-circle .icon-normal {
    width: 40px;
    height: auto;
    margin-bottom: 10px;
    transition: filter 0.3s ease;
}

.offer-circle:hover .icon-normal,
.offer-circle:focus .icon-normal {
    /* If the user doesn't have white icons, we can use CSS filter to turn it white */
    filter: brightness(0) invert(1);
}

.offer-circle h4 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    color: #000;
    line-height: 1.3;
    transition: color 0.3s;
    margin: 0;
}

.offer-circle:hover h4,
.offer-circle:focus h4 {
    color: #ffffff;
}

/* Categories 3D Slider */
.cat-card-item {
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.6s ease;
}

.cat-card-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cat-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to top, rgba(255, 253, 253, 0.8), transparent);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    box-shadow: inset 0 0 10px rgb(255 255 255 / 67%);
}


@media (max-width: 768px) {
	
	
/* --- Showcase Glass Overlay --- */
/* Container for the frosted glass button */
.glass-overlay-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* Layout & Spacing */
    width: calc(100% - 10px); /* Leaves a 20px gap on left and right */
    padding: 10px 8px;
    margin: 0 auto;
    
    /* The Glassmorphism Effect */
    background: rgba(255, 255, 255, 0.25); /* Semi-transparent white */
    backdrop-filter: blur(6px); /* Creates the frosted glass blur */
    -webkit-backdrop-filter: blur(6px); /* Safari support */
    
    /* Edges and Shapes */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Subtle white glowing edge */
    border-radius: 20px; /* Perfect pill shape */
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
    
    /* Positioning it at the bottom of the card */
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    box-sizing: border-box;
    cursor: pointer;
    transition: background 0.3s ease;
}
	
	
.glass-text-group h4 {
    margin: 0;
    color: #ffffff;
		font-size: 12px;
	}	
	
	    .more-projects-grid .more-projects-card {
        height: 24vh;
    }
	
	

	
	.news-intro-text h2 {
    font-size: 2.5rem;
	}
	

	
	
	.offer-circle {
    width: 160px;
		height: 160px;
	
	}
	
	
	 
	
}


/* Responsive adjustments */
@media (max-width: 991px) {
    .news-intro-text, .news-intro-phones {
        width: 100% !important;
    }
    .news-intro-phones {
        margin-top: 40px;
        height: auto !important;
        flex-direction: column;
    }
    .phone-img-wrapper {
        margin-right: 0 !important;
        margin-top: 20px !important;
    }
    .phone-content-card {
        top: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}

/* --- News & Content Section --- */
.news-content-section {
    padding: 80px 0;
    background: #ffffff;
    overflow: hidden;
    position: relative;
}

.news-intro-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 85%;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 60px;
}

.news-intro-text {
    width: 45%;
    opacity: 0;
    transform: translateX(-50px);
}

.news-intro-text h2 {
    font-size: 3.5rem;
    font-family: 'Poppins Black', sans-serif;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 30px;
    color: #000;
}

.news-intro-text h2 span {
    color: #fcae1a;
}

.news-intro-text p {
    font-family: 'Poppins Regular';
    font-size: 1rem;
    line-height: 1.4;
    color: #000;
    margin-bottom: 20px;
    font-weight: 400;
}

.news-intro-text p:last-child {
    margin-bottom: 0;
}

.news-intro-phones {
    width: 50%;
    position: relative;
    height: 450px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
	
    transform: translateX(50px);
}

.phone-content-card {
    position: absolute;
    width: 190px;
    background: #ffffff;
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    padding: 20px;
    z-index: 1;
/*     opacity: 0; */
    transition: all 0.4s ease;
    pointer-events: none;
}

#card-buzztribe {
    left: -12%;
    top: 30%;
    transform: translateX(20px);
}

#card-newzthing {
    right: -11%;
    top: 30%;
    transform: translateX(-20px);
}

.phone-content-card h4 {
    color: #fcae1a;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.phone-content-card p {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    color: #444;
    line-height: 1.5;
    margin: 0;
}

.phone-img-wrapper {
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.phone-img-wrapper:hover {
    transform: translateY(-5px);
}

.phone-img-wrapper[data-target="card-buzztribe"] {
    z-index: 5;
    margin-right: 0px;
}

.phone-img-wrapper[data-target="card-newzthing"] {
    z-index: 6;
    margin-top: 0px;
}

.phone-img-wrapper img {
    height: 350px;
    width: auto;
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.2));
    border-radius: 30px;
}

/* MIDDLE: Categories Slider */
.news-categories-section {
    padding: 0px 0;
    text-align: center;
    opacity: 0;
}

.news-categories-section h3,
.news-offer-section h3 {
    font-family: 'Poppins Black', sans-serif;
    font-size: 2rem;
    font-weight: 900;
    color: #000;
}

.news-categories-section h3 {
    margin-bottom: 0px;
}

.categories-slider-container {
    position: relative;
    width: 100%;
    height: 400px;
    perspective: 1200px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible; /* Fix overlapping issues */
}

.categories-carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
}

/* BOTTOM: What we offer Circles */
.news-offer-section {
    padding: 60px 0 30px 0;
    text-align: center;
}

.news-offer-section h3 {
    margin-bottom: 20px;
	margin-top:10px;
}

.news-offer-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}


@media (max-width: 768px) {
	
	.phone-content-card {
    position: absolute;
    width: 220px;
    background: #ffffff;
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    padding: 8px;
    z-index: 1;
/*     opacity: 0; */
    transition: all 0.4s ease;
    pointer-events: none;
}
	
	.buzz-circle h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: .9rem;
    color: #000;
    line-height: 1.3;
    transition: color 0.3s;
    margin-bottom: 7px;
}
	
	
	.buzz-circle .icon-hover {
    width: 40px;
    height: auto;
    margin-bottom: 8px;
    transition: opacity 0.3s;
    display: none;
}
	
	.buzz-circle .icon-normal {
    width: 40px;
    height: auto;
    margin-bottom: 8px;
    transition: opacity 0.3s;
    display: block;
}
	
	
	    .news-intro-phones {
        margin-top: 40px;
        height: auto;
        flex-direction: row !important;
    }
	
    .news-intro-text h2 {
        font-size: 2rem;
    }
	
	  
	
	    .tribe-left h2 {
        font-size: 2.5rem;
        margin-bottom: 50px;
    }
	
	    .news-content-section {
        padding: 0px 0;
    }
	
	
	
	.news-offer-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
		width: 95%;
	}
	
}


/* Ensure responsiveness */
@media (max-width: 991px) {
    .news-intro-text, .news-intro-phones {
        width: 100%;
        transform: none !important; /* disable translation on mobile */
    }
    .news-intro-phones {
        margin-top: 40px;
        height: auto;
        flex-direction: column;
    }
    .phone-img-wrapper[data-target="card-buzztribe"] {
        margin-right: 0;
    }
    .phone-img-wrapper[data-target="card-newzthing"] {
        margin-top: 20px;
    }
    .phone-content-card {
        top: 0;
        left: 50%;
        transform: translateX(-50%) !important;
        position: relative;
        margin-bottom: 20px;
    }
    #card-buzztribe, #card-newzthing {
        left: 0;
        right: 0;
        transform: translateX(0);
    }
}






/* --- Tribe Section --- */
.tribe-section {
    padding: 60px 0;
    background: #ffffff;
}

.tribe-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 85%;
    max-width: 1200px;
    margin: 0 auto;
}

.tribe-left {
    width: 30%;
}

.tribe-left h2 {
    font-size: 3.5rem;
    font-family: 'Poppins Black', sans-serif;
    font-weight: 900;
    line-height: 1.1;
    color: #000;
    margin: 0;
}

.tribe-left h2 span {
    color: #fcae1a;
}

.tribe-right {
    width: 65%;
    display: flex;
    flex-direction: column;
}

.tribe-cards-wrapper {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
}

.tribe-card {
    background: #ffffff;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.06);
    position: relative;
    flex: 1;
    margin-top: 50px;
    transition: box-shadow 0.3s ease;
}

.tribe-card:hover {
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

.tribe-img-wrapper {
    position: absolute;
    top: -40px;
    left: 20px;
    width: 100px;
    height: 100px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    transition: transform 0.3s ease;
}

.tribe-card:hover .tribe-img-wrapper {
    transform: translateY(-8px);
}

.tribe-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tribe-bio {
    padding-top: 40px;
}

.tribe-bio h4 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 5px;
}

.tribe-bio .designation {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fcae1a;
    margin-bottom: 15px;
}

.tribe-bio .desc {
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    line-height: 1.6;
    color: #444;
}

.tribe-meet-team-btn {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 1.1rem;
    color: #000;
    transition: color 0.3s ease;
}

.tribe-meet-team-btn:hover {
    color: #fcae1a;
}

.tribe-meet-team-btn img {
    width: 50px;
    height: auto;
    transition: transform 0.3s ease;
    position: relative;
    left: -10px;
    top: 8px;
}

.tribe-meet-team-btn:hover img {
    transform: translateX(5px);
}

@media (max-width: 991px) {
	.news-offer-section {
    padding: 15px 0 0px 0;
	}
}
	

@media (max-width: 991px) {
	
	.tribe-left{
		padding: 0px 29rem 10px 10px;
	}
    .tribe-left, .tribe-right {
        width: 100%;
    }
    .tribe-left h2 {
        font-size: 2rem;
        margin-bottom: 50px;
    }
    .tribe-cards-wrapper {
        flex-direction: column;
        gap: 60px;
    }
    .tribe-card {
        margin-top: 40px;
    }
    .tribe-img-wrapper {
        left: 20px;
        top: -40px;
    }
}


@media (max-width: 768px) {
    .tribe-left {
        padding: 0px 0rem 10px 10px;
    }
}

/* --- New Footer Section --- */
.new-footer-contact {
    background-color: #000000;
    padding: 30px 0;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
}

.new-footer-container {
    width: 85%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}

.new-footer-left {
    width: 40%;
}

.new-footer-left h2 {
    font-family: 'Poppins Black', sans-serif;
    font-size: 4rem;
    font-weight: 900;
    color: #fcae1a;
    margin: 0 0 50px 0;
    line-height: 1;
}

.footer-contact-details p, 
.footer-contact-details address {
    font-size: 0.95rem;
    color: #dddddd;
    line-height: 1.8;
    margin-bottom: 20px;
    font-style: normal;
}

.footer-contact-details p a {
    color: #dddddd;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-contact-details p a:hover {
    color: #fcae1a;
}

.footer-social {
    margin-top: 60px;
}

.footer-social p {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 25px;
    color: #ffffff;
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 55px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.05);
    transition: all 0.3s ease;
}

.social-icons a:hover {
    border-color: #ffffff;
    background: rgba(255,255,255,0.1);
    transform: translateY(-3px);
}

.social-icons img {
    width: 60px;
    height: auto;
    object-fit: contain;
}

/* Right side - Form */
.new-footer-right {
    width: 50%;
}

.new-footer-right h3 {
    font-family: 'Poppins Black', sans-serif;
    font-size: 2.5rem;
    font-weight: 900;
    color: #fcae1a;
    margin: 0 0 50px 0;
}

/* Contact Form 7 specific overrides */
.footer-form-wrapper .wpcf7 p {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    color: #ffffff;
    font-size: 0.95rem;
}

.footer-form-wrapper .wpcf7 p label {
    display: flex;
    align-items: center;
    width: 20%;
    margin: 0;
    font-weight: normal;
}

.footer-form-wrapper .wpcf7-form-control-wrap {
    /* flex-grow: 1; */
    margin-left: 0px;
    width: 70%;
}

.footer-form-wrapper .wpcf7-text,
.footer-form-wrapper .wpcf7-email,
.footer-form-wrapper .wpcf7-textarea {
    width: 100%;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.3) !important;
    color: #ffffff !important;
    padding: 5px 0 !important;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    outline: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.footer-form-wrapper .wpcf7-text:focus,
.footer-form-wrapper .wpcf7-email:focus,
.footer-form-wrapper .wpcf7-textarea:focus {
    border-bottom-color: #fcae1a !important;
}

.footer-form-wrapper .wpcf7-textarea {
    height: 30px;
    resize: none;
}

/* The button should be dark and glassy as per screenshot */
.footer-form-wrapper .wpcf7-submit {
    margin-top: 30px;
    background: linear-gradient(145deg, #3a3a3a, #1a1a1a) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: 30px !important;
    padding: 12px 45px !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: inset 0 3px 25px rgb(245 245 245 / 59%) !important;
}

.footer-form-wrapper .wpcf7-submit:hover {
    background: linear-gradient(145deg, #4a4a4a, #2a2a2a) !important;
    border-color: rgba(255,255,255,0.3) !important;
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 991px) {
    .new-footer-left, 
    .new-footer-right {
        width: 100%;
    }
    .new-footer-right {
        margin-top: 80px;
    }
    .new-footer-left h2, .new-footer-right h3 {
        font-size: 2.8rem;
    }
    .footer-form-wrapper .wpcf7 p label {
        flex-direction: column;
        align-items: flex-start;
    }
    .footer-form-wrapper .wpcf7-form-control-wrap {
        margin-left: 0;
        margin-top: 10px;
        width: 100%;
    }
}
@media (max-width: 768px) {
  .news-intro-phones {
    display: block !important;
    overflow: hidden !important;
    width: 100% !important;
    padding: 30px 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  /* Slider Track */
  .mobile-infinite-track {
    display: flex !important;
    width: 100% !important;
    will-change: transform;
  }

  /* Har ek Pair (Slide 1: BuzzTribe, Slide 2: NewzThing) */
  .mobile-slide-pair {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }

  /* Reset Desktop Positional Styles */
  .mobile-slide-pair .phone-content-card,
  .mobile-slide-pair .phone-img-wrapper {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Text Card Settings */
  .mobile-slide-pair .phone-content-card {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding: 16px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
  }

  .mobile-slide-pair .phone-content-card h4 {
    font-size: 1rem !important;
    margin: 0 0 6px 0 !important;
    color: #e59819 !important;
  }

  .mobile-slide-pair .phone-content-card p {
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
    margin: 0 !important;
  }

  /* Phone Image Settings */
  .mobile-slide-pair .phone-img-wrapper {
    flex: 0 0 45% !important;
    max-width: 45% !important;
    display: flex !important;
    justify-content: center !important;
  }

  .mobile-slide-pair .phone-img-wrapper img {
    width: 100% !important;
    max-width: 180px !important;
    height: auto !important;
    display: block !important;
  }
}