@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Poppins:wght@400;500;600;700;800;900&family=Roboto:wght@100;300;400;500;700&display=swap");



#about-start {
    padding-top: 100px
}

.about-banner-1,
.about-banner-2 {
    position: relative;

}


.about-banner-1 .about-background-image img {
    width: 100%;
   height: auto;
 
}

.about-banner-2  .about-background-image img {
    width: 100%;
    height: auto;
  
}

.about-banner-1 .about-overlay {
    position: absolute;
    top: 20%;
    left: 11%;
    font-family: "Poppins";
    z-index: 10;
    padding: 20px;
    color: white;
}

.about-overlay-1 {
    position: absolute;
    top: 14%;
    left: 11%;
    font-family: "Poppins";
    z-index: 10;
    padding: 20px;
    color: white;
}


.about-overlay p {
    width: 36vw;
    font-size: 17px;
    font-weight: 300;
    text-align: justify;
    line-height: 1.7rem;
}

.about-overlay-1 p {
    width: 36vw;
    font-size: 17px;
    font-weight: 250;
    text-align: justify;
    line-height: 1.8rem;
}

.about-banner-1 h3,
.about-banner-1 h5 {
    margin: 0;
}

.about-banner-1 h1 {
    color: orange;
    line-height: 1rem;
    font-size: 22px;
}

.about-banner-1 h2 {
    font-size: 1.2rem;
    margin-top: 10px;
    font-size: 33px;
}



.expertise-container {
    display: inline-flex;
    align-items: center;
}

.expertise-container img {
    margin-right: 10px;
}

.expertise-container h2 {
    margin: revert;
    margin-left: 7px;
    line-height: normal;
}




#geographical-presence {
    position: relative;

    width: 100%;
    height: auto;
    min-height: 650px;
 
    margin-top: 50px;
 
    
}

/* Background Image for the World Map */
.background-map {
    position: absolute;
    top: 5%;
    left: 7%;
    width: 80%;
    height: 80%;
    background-image: url('img/about-us-3-PMS.jpg'); /* Add your map image path */
    background-size: cover;
    background-position: center;
}

/* Title */
.section-title {
    position: relative; /* Adding relative positioning so that z-index works */
   
    font-size: 2rem;
    font-weight: 600;
    color: #f26722;
    text-align: start !important;
    font-family: 'Poppins';
    left: 2%;
    padding: 20px 0;
  
}

.horizontal-line{
    border-top: 1px solid #000;
}
/* India Section */
.india-location {
    position: absolute;
    top: 16%;
    right: 8%;
    width: 350px;
    padding: 20px;
    border-radius: 10px;
    z-index: 5; /* Lower than the title */
    line-height: 1.557rem;
}

.india-location h4 , 
.bottom-locations h4 {
    color: #2071A9 !important;
    font-weight: 700;
    font-family: 'Poppins';
}

/* Bottom Sections (US, Indonesia, UK) */
.bottom-locations {
    position: absolute;
    left: 10%;
    bottom: 7%;
    width: 70%;
    display: flex;
  
}
 
.bottom-locations .location-info-1, 
.bottom-locations .location-info-2,

.bottom-locations .location-info-3{
  
    padding: 15px;
   
    width: 30%;
    text-align: left;

}

.bottom-locations .location-info-1, 
.bottom-locations .location-info-2,
.bottom-locations .location-info-3
 {
    border-left: 1px solid #000; 
  
  
}


.bottom-locations .location-info-2{
    width: 35%;
}

.city-names {
    font-size: 1rem; 
    font-weight: 700;  
    color: #000;       
    font-family: 'Poppins';
}

.bottom-locations .location-info p , .india-location p{
    font-size: 15px;
    font-weight: 500;  
    font-family: 'Poppins';
}


.desktop-image {
    display: block;
}

.mobile-image {
    display: none;
}



/* about_wrapper */


.owl-carousel .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
 
   
}

 .award_wrapper .owl-carousel .item img {
 
    width: 150px; 
    height: auto; 
    object-fit: cover;
    border-radius: 5px; /* Optional: Matching rounded corners for the image */
    padding: 10px;
  
 
}

.owl-carousel .image-div, .owl-carousel .image-div1 {
    position: relative;
}



.award_wrapper .owl-carousel .item-details h3 {
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0.5rem 0 0;
    font-family: 'Poppins';
}

.award_wrapper .owl-carousel .item-details p {
    font-size: 12px;
    color: #000;
    margin: 0.25rem 0 0;
   
    font-family: 'Poppins';
}



.award_wrapper .image-div-1{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: linear-gradient(180deg, #ff6600 0%, #ff9903 75%);

    
}
.award_wrapper .text-div{
    margin-bottom: 50px;
}

.award_wrapper{
    padding: 50px;
    background: #f5f5f6;
}

.award_wrapper h2{
    font-weight: 600;
    font-size: 35px;
    font-family: 'Poppins';
    color: #F26722;
}

.award_wrapper .client-slider-section .item{
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
}



.about_wrapper{
    padding: 100px 0 30px;
    background: var(--bg-light-2);
}

.about_content{
    margin-bottom: 40px;
}

.logo-item{
    width: 160px !important;
}


.about_wrapper{
    padding: 100px 0 30px;
    background: var(--bg-light-2);
}

.about_content{
    margin-bottom: 40px;
}



.about_wrapper .about_text{
    font-size: 20px;
    font-weight: 600;
    line-height: 1.7;
    font-family: 'Poppins';
 
}

.about_wrapper .about_title{
    font-size: 35px;
    font-weight: 600;
    line-height: 1.7;
    font-family: 'Poppins';
  color: #F26722;
}

.media_img{
    height: 150px;
    width: 300px;
}
.media_img_1{
    height: 185px;
    width: 300px;
}


.media_content , 
.media_content-1 {
    font-family: 'Poppins';
    width: 100%;
    align-items: start;
    font-size: 18px;
}
.about_wrapper  .contect-div{
  margin-left: 60px;
}


.about_img{
    max-height: 350px;
    max-width: auto;
}






.employee_wrapper{
    padding: 50px !important;
    padding-top: 70px;
}

.employee_wrapper .image-container {
    position: relative;
    width: 215px; /* Adjust according to image size */
    height: 360px; /* Height to show a part of the image initially */
    overflow: hidden; /* Hides the part of the image that moves outside the container */
  }
  
  /* Back image */
  .employee_wrapper .image-back {
    width: 100%;
    height: 89%;
    position: absolute;
    top:12%;
    left: 0;
    z-index: 1;
  }
  
  /* Front image (overlay) */
 .employee_wrapper .image-front {
    width: 50%;
    height: 100%;
    position: absolute;
   
    left: 0;
    z-index: 2;
    transition: transform 0.4s ease-in-out;
    transform: translateY(15%); /* Starts slightly hidden at the bottom */
  }
  
  /* On hover, the front image slides up fully into view */
  .image-container:hover .image-front {
    transform: translateY(0); /* Moves into full view */
  }








.employee_wrapper .owl-carousel .item-details h3 {
    font-size: 1.457rem;
    font-weight: 700;
 
    font-family: 'Poppins';
}

.employee_wrapper .owl-carousel .item-details p {
    font-size: 15px;
    color: #000;
    margin: 0.25rem 0 0;
   
    font-family: 'Poppins';
}



.employee_wrapper{
    padding: 10px;
  
}

.employee_wrapper h2{
 
    font-size: 2rem;
    font-weight: 600;
    color: #f26722;
  
    font-family: 'Poppins';
   
}


.employee_wrapper .client-slider-section .item{
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
}







@media (max-width : 1280px) {

    
    #about-start {
        padding-top: 83px;
    }

    .about-banner-2 {
        margin-top: -1px;
    } 

    .about-banner-1 .about-background-image img {
        width: 100%;
       height: auto;
        max-height: 350px;
        min-height: 400px;
    }
    
    .about-banner-2  .about-background-image img {
        width: 100%;
        height: auto;
       max-height: 500px;
       min-height: 680px;
    }



    


    .about-banner-1 .about-overlay {
        top: 40%;
        /* Adjust vertical position */
        left: 40%;
        transform: translate(-50%, -40%);
        padding: 30px;
        /* Increase padding for larger screens */
    }

    .about-banner-2 .about-overlay-1 {
        top: 37%;
        left: 40%;
        transform: translate(-50%, -40%);
        padding: 30px;
    }

    .expertise-container img {
        display: block;
        /* Show images on medium devices */
        height: auto;
        width: 45px;
    }


    .about-overlay p {
        width: 60vw;
        /* Adjust width for tablet screens */
        font-size: 18px;
        /* Increase font size for readability */
        line-height: 1.667rem;
        /* Adjust line height */
        text-align: justify;
    }

    .about-overlay-1 p {
        width: 60vw;
        font-size: 18px;
        line-height: 1.667rem;
        text-align: justify;

    }

    .about-banner-1 h1 {
        font-size: 16px;
        /* Adjust heading size */
        margin-bottom: 10px !important;
    }

    .about-banner-1 h2 {
        font-size: 18px;
        margin-top: 10px;
        margin-bottom: 10px !important;
    }

    .about-banner-2 h1 {
        font-size: 16px;
    }

    .about-banner-2 h2 {
        font-size: 18px;
        margin-bottom: 2px !important;
    }

    .about-overlay-1-sec-1 {
        margin-top: 0;
    }




    #geographical-presence p{
      font-size: 14px;
    } 

    .background-map{
        top: 17%;
        left: 8%;
        width: 74%;
        height: 42%;
    }

    #geographical-presence   .section-title{
        left: 9%;
    }
    .bottom-locations {
       bottom : 18%;
        width: 65% !important;
    }
     
    .india-location{
        width: 300px;
        line-height: 1.3rem;
        right: 7%;
        top:10%
    }
}



@media (max-width: 1024px) {

 
    #about-start {
        padding-top: 83px;
    }

    .about-banner-2 {
        margin-top: -1px;
    }



    .about-banner-1 .about-overlay {
        top: 40%;
        /* Adjust vertical position */
        left: 40%;
        transform: translate(-50%, -40%);
        padding: 30px;
        /* Increase padding for larger screens */
    }

    .about-banner-2 .about-overlay-1 {
        top: 37%;
        left: 40%;
        transform: translate(-50%, -40%);
        padding: 30px;
    }

    .expertise-container img {
        display: block;
        /* Show images on medium devices */
        height: auto;
        width: 45px;
    }


    .about-overlay p {
        width: 60vw;
        /* Adjust width for tablet screens */
        font-size: 18px;
        /* Increase font size for readability */
        line-height: 1.667rem;
        /* Adjust line height */
        text-align: justify;
    }

    .about-overlay-1 p {
        width: 60vw;
        font-size: 18px;
        line-height: 1.667rem;
        text-align: justify;

    }

    .about-banner-1 h1 {
        font-size: 16px;
        /* Adjust heading size */
        margin-bottom: 10px !important;
    }

    .about-banner-1 h2 {
        font-size: 18px;
        margin-top: 10px;
        margin-bottom: 10px !important;
    }

    .about-banner-2 h1 {
        font-size: 16px;
    }

    .about-banner-2 h2 {
        font-size: 18px;
        margin-bottom: 2px !important;
    }

    .about-overlay-1-sec-1 {
        margin-top: 0;
    }


    .background-map{
        width: 70%;
    }


    #geographical-presence p{
        font-size: 13px;
      } 

      .background-map {
      
       
        width: 76%;
        height: 48%;
        top: 8%;
       left: 3%;
    }


   

    .bottom-locations .location-info-1, 
.bottom-locations .location-info-2
{
  
    width: 35% !important;
    
}

.bottom-locations .location-info-1, 
.bottom-locations .location-info-2,
.bottom-locations .location-info-3
 {
    border-left:none; 
  
  
}
      #geographical-presence   .section-title{
          left: 7%;
      }
      .bottom-locations {
        left: 8%;
         top: 51%;
          width: 54% !important;
      }
       
      .india-location{
          width: 300px;
          line-height: 1rem;
          right: 7%;
          top:13%
      }

   
}

@media (max-width: 854px) {

    



    #geographical-presence p{
        font-size: 12px;
      } 

      .background-map {
        width: 91%;
        height: 45%;
        top: 18%;
    }
  
      #geographical-presence   .section-title{
          left: 0%;
      }
      .bottom-locations {
       top: 63%;
          width: 55% !important;
      }
       
      .india-location{
          width: 270px;
          line-height: 1.4rem;
          right: 0%;
          top:16%;
      }

      .about-logos{
        margin-left: 0px;
      }

      .about_wrapper .contect-div {
        margin-left: 10px;
      }
}


@media (max-width: 768px) {


    .about-banner-1 .about-background-image img {
        width: 100%;
       height: auto;
    
    }
    
    .about-banner-2  .about-background-image img {
        width: 100%;
        height: auto;
       max-height: 500px;
       min-height: 480px;
    }



    .about-banner-1 .about-overlay {
        top: 45%;
        /* Adjust vertical position */
        left: 50%;
        transform: translate(-50%, -45%);
        padding: 20px;
        /* Reduce padding for smaller screens */
    }

    .about-banner-2 .about-overlay-1 {
        top: 42%;
        left: 50%;
        transform: translate(-50%, -42%);
        padding: 20px;
    }

    #about-start {
        padding-top: 83px;
    }

    .about-banner-2 {
        margin-top: -1px;
    }

    .expertise-container img {
        display: block;
        height: auto;
        width: 40px;
        /* Reduce the width for smaller screens */
    }

    .about-overlay p {
        width: 70vw;
        /* Reduce width for smaller screens */
        font-size: 16px;
        /* Reduce font size */
        line-height: 1.4rem;
        /* Adjust line height */
        text-align: justify;
    }

    .about-overlay-1 p {
        width: 70vw;
        font-size: 16px;
        /* Reduce font size */
        line-height: 1.4rem;
        text-align: justify;
    }

    .about-banner-1 h1 {
        font-size: 14px;
        /* Reduce heading size */
        margin-bottom: 8px !important;
        /* Reduce margin */
    }

    .about-banner-1 h2 {
        font-size: 16px;
        margin-top: 8px;
        margin-bottom: 8px !important;
    }

    .about-banner-2 h1 {
        font-size: 14px;
    }

    .about-banner-2 h2 {
        font-size: 16px;
        margin-bottom: 5px !important;
    }

    .about-overlay-1-sec-1 {
        margin-top: 0;
    }


     /* Hide the background image */
     .background-map {
        display: none; /* Hides the background image */
    }

    
    #geographical-presence {
        height: auto; /* Allow height to adjust based on content */
        margin-top: 20px; /* Adjust margin for mobile */
        padding: 20px; /* Add padding for mobile */
    }

    /* Title styles */
    #geographical-presence .section-title {
        font-size: 1.5rem; /* Adjust title size for mobile */
        text-align: center; /* Center-align title */
        padding: 10px 0; /* Adjust padding */
    }

    /* India Location Section */
    .india-location {
        position: relative; /* Change to relative for mobile */
        top: 0; /* Reset top position */
        right: 0; /* Reset right position */
        width: 100%; /* Full width */
        padding: 10px; /* Adjust padding */
        margin-bottom: 20px; /* Space between sections */
    } 


    #geographical-presence .container{
        padding-left: 0px !important;
    }

    /* Bottom Locations */
    .bottom-locations {
        position: relative; 
        flex-direction: column; 
        align-items: center; 
        width: 100%;
    }

    .bottom-locations .location-info-1,
    .bottom-locations .location-info-2,
    .bottom-locations .location-info-3 {
        width: 90%;
        margin: 10px 0; 
    }

    /* Adjust font sizes for mobile */
    .city-names {
        font-size: 1.2rem; /* Increase font size for city names */
    }

    .bottom-locations .location-info p, 
    .india-location p {
        font-size: 14px !important; /* Adjust paragraph font size */
    }

    #india-location-mobile-section {
        display: block !important; /* Show this section on mobile */
      
    }

   .bottom-locations , .br-tag {
        display: none !important; /* Use !important if necessary */
    }

    .desktop-image {
        display: none;
    }
    
    .mobile-image {
        display: block;
    }
    
}

@media(max-width:540px){
    .about-overlay p{
        font-size: 13px;
    }
    .about-overlay-1 p{
        font-size: 13px;
    }



}

@media (max-width: 481px) {

    

  


    .about-banner-1 .about-background-image img {
        width: 100%;
        height: 240px;
        max-height: 350px;
        min-height: 240px;
    }
    
    .about-banner-2  .about-background-image img {
        width: 100%;
        height: 350px;
        max-height: 400px;
        min-height: 350px;
    }



    .str-about-content {
        margin-top: 50px;
    }



  
    .about-banner-1 .about-overlay {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .about-banner-2 .about-overlay-1 {
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .expertise-container img {
        display: none;
    }

    .about-overlay p {
        width: 70vw;
        font-size: 14px;
        line-height: 1.1rem;
        text-align: justify;
    }

    .about-overlay-1 p {
        width: 70vw;
        font-size: 14px;
        line-height: 1rem;
        text-align: justify;
        margin-bottom: 10px !important;
    }

    .about-banner-1 h1 {
        font-size: 12px;
        margin-bottom: 5px !important;
    }

    .about-banner-1 h2 {
        font-size: 14px;
        margin-top: 5px;
        margin-bottom: 5px !important;
    }

    .about-banner-2 h1 {
        font-size: 10px;
    }

    .about-banner-2 h2 {
        font-size: 14px;
        margin-bottom: -16px !important;
        margin-left: 0px;
    }

    .about-overlay-1-sec-1 {
        margin-top: -5px;
    }

    .media_img_1 {
        height: 160px;
        width: 270px;
    }
   
}