@import url('./_variables.css');

html
{
   scroll-behavior: smooth;
}


.bubble-btn svg
{
   border-radius: 100%;
   animation: pulse-animation 1.5s infinite;
}

@keyframes pulse-animation {
   0% {
     box-shadow: 0 0 0 0px rgba(3, 169, 244, 0.4);
   }
   100% {
     box-shadow: 0 0 0 20px rgba(3, 169, 244, 0.1);
   
   }
 }


   
.loader-icon {
   display: none;
   width: 20px;
   height: 20px;
   border: 2px solid #fff;
   border-top: 0px solid var(--color-primary);
   border-radius: 50%;
   animation: spin 1s linear infinite;
   margin-left: 10px;
   position: absolute;
}
@-webkit-keyframes spin {
   0% { -webkit-transform: rotate(0deg); }
   100% { -webkit-transform: rotate(360deg); }
   }
   
   @keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
   }


/** HERO CSS***/
.gm-hero-section 
{
   padding: 180px 0;
   background:url('../image/hero-image.webp');
   background-repeat: no-repeat;
   background-size: cover;  
   position: relative;
   padding-bottom: 120px;
   
   @media(max-width:1199px)
   {
      padding: 140px 0;
      min-height: auto;
      padding-bottom: 100px;
   }
   
   @media(max-width:767px)
   {
      padding: 100px 0;
      min-height: auto;
   }

   &:before {
      position: absolute;
      content: '';
      width: 100%;
      height: 100%;
      background: linear-gradient(174deg, #000000eb, #00000081);
      top: 0;
      left: 0;
   }

   .container-fluid
   {
      padding: 0 30px;
      @media (max-width:767px) 
         {
            padding: 0 12px;
      }  
   }
   
  
}



/****/

.gm-logo-card
{
   background-color: var(--color_white);
   padding: 20px 80px;
   margin-top: -75px;
   position: relative;
   z-index: 1;
   border-radius: 80px;
   box-shadow: 0px 4px 47.2px 0px rgba(0, 0, 0, 0.13);
    img
   {
       max-width: 90%;
   }
   @media(max-width:1199px)
   {
   margin-top: -62px;
    padding: 20px 40px;

    img
    {
      max-width: 80%;
    }
   }
   
   @media(max-width:767px)
   {
   }
}

.gm-about-section
{
.nav-pills {
    background: #E6E6E6;

  .nav-item  
  {
   .nav-link
   {
      border-radius: 0;
      color: var(--color_gray);
      border-top: 2px solid transparent;
      border-right:1px solid #D4D4D4;
      @media (max-width: 767px) 
      { 
         font-size: 15px;
      }
      &.active
      {
         color: var(--color_primary);
         background: transparent !important;
          border-top: 2px solid var(--color_primary);
      }      
   }
    &:last-child {
      .nav-link 
      {
         border-right: 0;           
      }
      
   }

  }

}
}



.gm-about-section {  
   background: url('../image/bg-overlay-1.webp');
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   scroll-margin-top: 20px;
   .gm-about-media {
      position: relative;

      .highlight-box {
         display: flex;
         align-items: center;
         position: absolute;
         top: -35px;
         left: 47%;
         max-width: 230px;

         &.bottom {
           bottom: -20px;
            top: unset;
            right: 55%;
            left: unset;

            .experience-box {
               background-color: #C7DFFF;
            }
         }

         p {
            font-weight: 700 !important;
            color: var(--color_black);
         }
      }

      .experience-box {
         min-height: 160px;
         display: flex;
         align-items: center;
         padding: 0 12px;
         background: var(--color_primary);
         font-size: 20px;
         font-weight: 600;
         color: #fff;
         border-radius: 50px;
         border: 15px solid #fff;
      }
   }

   .gm-circle-box {
      width: 90px;
      height: 90px;
      background:  rgba(4, 75, 171, 0.16);
      border-radius: 100%;
      border: 4px solid  var(--color_primary);
      display: flex;
      align-items: center;
      justify-content: center ;
      font-size: 30px;
      font-weight: 700;
      color: var(--color_black);    
       @media (max-width: 767px) 
      {
         margin: 0 auto;
      } 
   }
    h5
      {
         font-size: 18px;
         font-family: var(--font_primary) !important;
      }
   @media (max-width: 767px) {
      .gm-about-media {
         .highlight-box {
            position: relative;
            top: 0;
            left: 0;
            max-width: 100%;

            &.bottom {
               bottom: 0;
               top: unset;
               left: 0;
               max-width: 100% !important;

               p {
                  text-align: right;
               }
            }

            p {
               text-align: left;
            }
         }

         .experience-box {
            min-height: 130px;
         }
      }
   }
}





.gallery-card {
    width: 98%;
    height: 480px;
    border-radius: 12px;
    margin: 0 auto;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
       border-radius: 12px;
   }
   @media (max-width:767px) {
       height: 380px;
      img {
         width: 100%;
      }
   }
}


.map-frame
{
   border-radius: 30px;
   width: 100%;
   height: 400px
}

.gm-review-section
{
   background: #EAEAEA;
   padding-bottom: 20px;
}


.gm-contact-section
{
   padding: 120px 0;
   background:url('../image/bg-overlay-2.png');
   background-repeat: no-repeat;
   background-size: cover;  
   position: relative;
   padding-bottom: 120px;
}


.gm-map-section
{  
   position: relative;

   .jcb-left {
      position: absolute;
      left: 0;
      top: 45%;
      transform: translateY(-50%);
      width: 250px;
       opacity: .7;
   }
     .jcb-right {
      position: absolute;
      right: 0;
      top: 45%;
      transform: translateY(-50%);
      width: 250px;
      opacity: .7;
   }

    @media (max-width:767px) {
       .jcb-left 
       {
         display: none;
       }
        .jcb-right 
       {
         display: none;
       }
   }
}

.gm-service-section
{
   background: url('../image/bg-overlay-2.png');
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;

   .gm-circle-box {
      width: 60px;
      height:60px;
      background: var(--color_primary);
      border-radius: 100%;
      border: 3px solid  var(--color_white);
      display: flex;
      align-items: center;
      justify-content: center ;
      font-size: 30px;
      font-weight: 700;
      color: var(--color_black);    
      @media (max-width: 767px) 
      {
      } 
   }
    .gm-circle-box1 {
      width: 90px;
      height: 90px;
      background:  rgba(4, 75, 171, 0.16);
      border-radius: 100%;
      border: 4px solid  var(--color_primary);
      display: flex;
      align-items: center;
      justify-content: center ;
      font-size: 30px;
      font-weight: 700;
      color: var(--color_black);    
       @media (max-width: 767px) 
      {
          /* justify-content: center ; */
         margin: 0 auto;
      } 
   }
   .gm-content-box
   {
   padding: 20px;
    background:var(--color_primary);
    border-radius: 10px;
    .gm-sub-title {
         background: linear-gradient(93deg, #ffffff, #ffffff6b, transparent);
         padding: 5px 10px;
         font-size: 16px;
         color: var(--color_primary);
         min-width: 200px;
         width: max-content;
      }
   }
  .tab-badge {
    background: #C7DFFF;
    color: var(--color_gray);
    text-align: center;
    padding: 5px 10px;
    border-radius: 30px;
    font-weight: 500;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
   .nav-pills
   {
      
      text-align: center;
      display: flex;
      align-items: center;
     .nav-item
     {
       margin-bottom: 20px;  
       width: 95%; 

      @media (max-width: 767px) 
      {
         width: 48%; 
      }
        @media (max-width: 500px) 
      {
         width: 100%; 
      }
   
       .nav-link          
      {
         background:url('../image/tab1.webp') !important;
         background-repeat: no-repeat;
         background-size: cover;  
         position: relative;
         color:var(--color_white);
         border-radius: 12px;
         padding: 50px 20px;
         border: 3px solid rgba(0, 0, 0, 0.5);;
         width: 100%;   
         font-size: 20px;
         @media (max-width: 1199px) 
         {
             padding: 40px 20px;
             font-size: 16px;
         }
         @media (max-width: 991px) 
         {
             padding: 30px 20px;
             font-size: 16px;
         }

        

         &::before
         {
            content: '';
            position: absolute;
            top:0;
            left:0;
            background: rgba(0, 0, 0, 0.5);
            width:100%;
            heighT:100%
            ;
            border-radius: 10px;
         }
        
         &.active
         {
            color: var(--color_white);           
            border: 3px solid var(--color_primary);
            border-radius: 12px;
            box-shadow: 0px 4px 28px 0px rgba(4, 75, 171, 0.96);
         }  

         img
         {
            width: 100%;
            height:100%;
            border-radius: 15px;;
         }
         span
         {
            position: relative;
            z-index: 3;
         }

        
      }
     }
   }
    
}
.grecaptcha-badge {
    z-index: 99999;
}