/* font-family: "Inter", sans-serif;
font-family: "Host Grotesk", sans-serif; */



:root{
     /* background color  */
     --primary-bg: #000000;
     --card-bg: #0D0D0D;
     

     --text-wht: #ffffff;
     --text-wht-deep: #cecece;
     
     
  
     /* gradient color  */
     
     
     --gradient-4:  linear-gradient(-50deg, #000000f3 60%, #2e2d2d 150%);
     --gradient-text:  linear-gradient(to bottom, #666666, #222222);

      /* -webkit-background-clip: text;
      -webkit-text-fill-color: transparent; */

     
    
     /*others color*/
     --scrollbar-color: #000000;
     --scrollbar-thump:#ffffffb4;
     --scrollbar-hover: #6f89b6;
    
     /* transition  */
     --transition-1: 0.25s ease;
     --transition-2: 0.3s ease;
     --transition-3: 0.5s ease;
     
 
      /* fontsize  */
      
      --font-h1: 3.5rem;
      --font-h2:3rem;
      --font-h3:1.625rem ;
      --font-h4:1.5rem ;
      --font-h5:1.125rem  ;


      --font-24:1.5rem;
      --font-20: ;
      --font-18:1.125rem ;
      --font-16: 1rem;
      --font-14: 0.875rem;
      


      /* font-weight  */
      --font-bold:700;
      --font-semi:600;
      --font-medium:500;
      --font-regular:400;
      --font-light:300;

      /* z-index  */
      --z-minus:-1;
      --z-zero:0;
      --z-low:1;
      --z-high:10;
      --z-100:100;
      --z-tooltop:1000;
      --z-fix:1100;
      --z-overlay:1110;
      --z-modal:1990;
      --z-max:9999;

 
     }
     
     
     /* ----------------------------------------
       ============= reset css  ==============
       -------------------------------------------*/
     *,
     *::after,
     *::before{
         margin: 0;
         padding: 0;
         box-sizing: border-box;
 
     }
     li{
         list-style: none;
     }
 
     a,
     img,
     input,
     button,
     i{
         display: block;
         text-transform: capitalize;
     }
     button{
      background: none;
      border: 0;
      outline: 0;
      cursor: pointer;
      width: fit-content;
     }
     .btn{
        max-width: 100%;
        width: fit-content;
       cursor: pointer;
       text-align: center;
       transition: 0.3s ease;
        border-radius: 15px;
        padding: 10px 25px;
        text-transform: capitalize;
        font-size: var(--font-16);
        border: 1px solid transparent;

     }
    

     a{
         text-decoration: none;
     }
     img{
         height: auto;
         max-width: 100%;
         object-fit: cover;
     }
    
     html{
         scroll-behavior: smooth;
        
     }
     body{
         max-width: 100%;
         height: auto;
         margin: 0 auto;
         padding: 0 auto;
         position: relative;
         transition:  all 0.5s ease-in-out;
         overflow-X: hidden; 
         font-size: var(--font-16);
         color: var(--text-wht);
         animation: fadeed 0.5s ease-in-out;
         background: var(--primary-bg);
         font-family: "Inter", sans-serif;
     }
     

      @keyframes fadeed {
      from{transform: translateY(20px); opacity: 0;}
      to{transform: translateY(0px); opacity: 1;}
          
      }
       
      h1{
      font-size: var(--font-h1);
      
     }
     h2{
      font-size: var(--font-h2);
     }
     h3{
      font-size: var(--font-h3);
     }
     h4{
      font-size: var(--font-h4);
     }
     h5{
      font-size: var(--font-h5);
     }
     h1,h2,h3,h4,h5{
      font-weight: var(--font-medium);
      font-family: "Host Grotesk", sans-serif;
     }

     .font-24{
        font-size: var(--font-24);
     }
     .font-20{
      font-size: var(--font-20);
     }
     .font-18{
      font-size: var(--font-18);
     }
     .font-16{
      font-size: var(--font-16);
      text-align: left;
     }
     .font-14{
        font-size: var(--font-14);
     }
 
     
     
    
     
 /* ============----page scroll bar-----============== */
     ::-webkit-scrollbar { 
         width: 5px; 
         
     }
 
     ::-webkit-scrollbar-track { 
         overflow: hidden;
         background: transparent;

        
     }
 
     ::-webkit-scrollbar-thumb {
    
     border-radius:100px;
     background: var(--scrollbar-thump); 
     transition: 0.3s;
    
   }
   ::-webkit-scrollbar-thumb:hover{
        opacity: 0.6;
        background: var(--scrollbar-hover);
  
   }
 
   @keyframes wiggle {
        0%,
        5%{
            transform: rotateZ(0);

        }
        15%{
            transform: rotateZ(-2deg);

        }
        20%{
            transform: rotateZ(2deg);

        }
        25%{
            transform: rotateZ(-2deg);

        }
        30%{
            transform: rotateZ(1deg);

        }
        35%{
            transform: rotateZ(-2deg);

        }
        40%,
        100%{
            transform: rotateZ(0);

        }
        
     }
 /* =====================cursor customizing=============== */
 /* =====================ID section customizing=============== */
 #about,
 #service,
 #price,
 #client,
 #perform,
 #team,
 #contact,
 #faq{
    max-width: 100%;
    position: relative;
 }
   

 /* =====================others=========================== */
    .container{
     max-width: 100%;
     padding: 0.5% 1% ;
     margin: 0 2% ;
     
    }
    section{
     margin: 8% 5% 5%;
     max-width: 100%;
     position: relative;
     transition: var(--transition-1);
    }
    .blur1{
        width: 100%;
        height: 60px;
        
        position: fixed;
        bottom: 0;
        left: 0;
        background: rgba(10, 10, 10, 0.11);
        backdrop-filter: blur(5px);
        z-index: 100;
        border-radius: 10% 10% 0 0 ;
        
   
    background: linear-gradient(to top, 
        rgba(14, 13, 13, 0.25) 50%, 
        rgba(22, 22, 22, 0.1) 80%, 
        rgba(255, 255, 255, 0) 100%);
    

    }
    .blur2{
        width: 100%;
        height: 90px;
        
        position: fixed;
        bottom: 0;
        left: 0;
        background: rgba(10, 10, 10, 0.11);
        backdrop-filter: blur(1px);
        z-index: 101;
        border-radius: 5% 5% 0 0 ;
        
   
        background: linear-gradient(to top, 
        rgba(14, 13, 13, 0.062) 50%, 
        rgba(8, 8, 8, 0.082) 80%, 
        rgba(17, 17, 17, 0.103) 100%);
    


    }
    .blur3{
         width: 100%;
        height: 120px;
        
        position: fixed;
        bottom: 0;
        left: 0;
        background: rgba(10, 10, 10, 0.11);
        backdrop-filter: blur(0.2px);
        z-index: 102;
        border-radius: 50% 50% 0 0 ;
        
   
        background: linear-gradient(to top, 
        rgba(14, 13, 13, 0.062) 50%, 
        rgba(8, 8, 8, 0.082) 80%, 
        rgba(17, 17, 17, 0.103) 100%);

    }
    

    /* <!-- =================================================
    --------------Header start here------------------
    =================================================   --> */


header{
    position: relative;
    max-width: 100%;
    margin: 0;
    padding: 0;
    margin-top: -5px;
    height: 100vh;
    width: 100%;
    background: url(https://framerusercontent.com/images/xLrX5WIDvtdiCfZom23YqmDAy8Y.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    
}
.heroBg{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 30px;
    transform: translate(-50%, -50%);
    width: fit-content;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    
    max-width: 100%;

}
.heroBg .heroImg{
    width: 480px;
    height: 480px;
}
.heroBg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: rotate 200s linear infinite;
    
    

}
.color-cercle{
    position: absolute;
     width: 330px;
    height: 330px;
  border-radius: 50%;
  background: conic-gradient(
    from 180deg,
    #ff0000,
    #ff9900,
    #1d43eb,
    #ffff00,
    #ff0000,
    #1d43eb
  );
  filter: blur(40px);
  opacity: 0.7;
   top: 28%;
    left: 15%;
    transform: translate(-50%, -50%);
    animation: round 6s ease-in-out infinite alternate;
     
}
@keyframes round {
    from{
        transform: rotate(0deg)  ;
        
    }
    to{
        transform: rotate(360deg)  ;
    }
    
}

header .container{
    margin: 5px 12%;
}
header .head{
  
    position: fixed;
    width: 70%;
    top: 2%;
    left: 50%;
    transform: translateX(-50%);
    max-width: 100%;
    
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
   
    margin-top: 20px;
    z-index: 1000;
}
.head .logo{
    display: flex;
    max-width: 100%;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
     transition: var(--transition-1);

}
.logo.active{
    opacity: 0;
    display: none;
}
.logo img{
    width: 30px;
}
.logo p{
    color: var(--text-wht);
    font-weight: 500;
    text-transform: capitalize;
   
}
.logo:hover{
    opacity: 0.8;
    transition: var(--transition-2);
}
#headBtn.active{
    opacity: 0;
    display: none;
    transition: var(--transition-2);
}

  .headBtn {
    height: 50px;
    width: 120px;
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
   
    box-shadow: 0 20px 35px rgba(0,0,0,0.3);
    border-radius: 7px;
    overflow: hidden;
    background-color:var(--primary-bg);
    transition: var(--transition-2);
    border: 1px solid #ffffff1f;
    
}
.headBtn:hover{
      
      box-shadow: rgba(255, 217, 0, 0.267) 0px -2px 10px;
}
 .headBtn:hover::before{
    animation: none;
    transition: var(--transition-1);
     background-image: conic-gradient(
    #ffb30333 100deg,
    #ffb30333 100deg
  );
  
}
.headBtn:hover::after{
    box-shadow: rgba(246, 247, 248, 0.082) 0px 28px 24px;
    background: #000;
}

@keyframes rotate{
    100%{
        transform: rotate(360deg);
    }
}


.headBtn::before {
  content: "";
  background-image: conic-gradient(
    #BA8811 20deg,
    transparent 50deg
  );
   box-shadow: #BA8811 10px -28px 24px;
  height: 250%;
  width: 186%;
  position: absolute;
  top: -80%;
  left: -43%;
  animation: rotate 6s linear infinite;
  transition: var(--transition-1);
  
  
}


.headBtn::after {
  content: "Contact";
  height: 95%;
  width: 98%;
  position: absolute;
  background-color: #0D0D0D;
  border-radius: 7px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  font-size: 16px;
  color: white;
  transition: var(--transition-1);
  
}

/* ============nav==============  */
nav{
    width: 42%;
    position: fixed;
    padding: 10px ;
    max-width: 100%;
    top: 4%;
    z-index: 9999;
    left: 50%;
    transition: var(--transition-2);
    transform: translateX(-50%);
    display: flex;
    border-radius: 15px;
    justify-content: space-between;
    align-items: center;
    background: #000000e0;
    backdrop-filter: blur(5px);
    border: 1px solid var(--card-bg);
    
}
nav li{
    position: relative;
    max-width: 100%;
}
nav li a{
    max-width: 100%;
    background: transparent;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-bottom: 2px solid transparent;
    border-radius: 7px;
    color: var(--text-wht);
    font-size: var(--font-16);
    transition: var(--transition-1);
}
nav li a:hover{
    border: 1px solid rgba(255, 217, 0, 0.062) ;
    border-bottom: 1px solid rgba(255, 217, 0, 0.185) ;
    background: var(--card-bg);
   
  
}
#navigation{
    width: 79%;
    max-width: 100%;
    height: 0vh;
    position: fixed;
    z-index: 9999;
    top: 16.5%;
    left: 50%;
    transform: translateX(-50%);
    background: #000000f5;
    backdrop-filter: blur(10px);
    border-radius:0 0 20px 20px;
    
    
    overflow: hidden;
    transition: var(--transition-3);

}
.navigation-link{
    max-width: 100%;
    margin: 8% 7% 3%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.navigation-link li{
    position: relative;
    width: 100%;
   
    
}
.navigation-link li a{
    font-size: var(--font-24);
    color: var(--text-wht);
    text-transform: capitalize;
    padding: 5px 10px;
    width: 100%;
    transition: var(--transition-1);
    text-align: center;
    border: 1px solid transparent;
    border-radius: 10px;
    
    
}
.navigation-link li a:hover{
    border: 1px solid #ffffff18;
    opacity: 0.7;
    

    
}

/* ==========menu============  */
#menu{
    position: absolute;
    top: 45%;
    height: 46px;
    transform: translateY(-50%);
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    right: -100%;
    background: var(--card-bg);
    cursor: pointer;
    transition: var(--transition-1);
     border: 1px solid rgba(255, 217, 0, 0.096);
      border-radius: 5px;

}
#menu:hover{
    border: 1px solid rgba(255, 217, 0, 0.24);
    box-shadow: rgba(255, 217, 0, 0.267) 0px -2px 10px;

}
#menu .openMenu{
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-direction: column;
    transition: var(--transition-1);
    border-radius: 5px;
   
}
.openMenu .m1,
.openMenu .m2{
    width: 25px;
    display: block;
    height: 2px;
    background: var(--text-wht);
}
#menu .closeMenu{
    font-size: var(--font-24);
    transition: var(--transition-1);
    display: none;
}
.hero-conatainer{
    position: absolute;
    max-width: 100%;
    width: 100%;
    height: 500px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    display: flex;
    gap: 15px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.hero-conatainer .hero-badge{
    position: relative;
    max-width: 100%;
    width: 35%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    height: 45px;
    padding: 0 15px;
    border-radius: 35px;
    background: var(--card-bg);
    border: 1px solid  rgba(255, 217, 0, 0.062);
    margin-bottom: 10px;

}
.hero-badge img{
    width: 50px;
}
.hero-badge p{
    margin-bottom: 10px;
}


.hero-badge img:first-child{
    transform: rotate(180deg);
}
.hero-badge::after{
    position: absolute;
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ffff00 ;
    top: 50%;
    transform: translateY(-50%);
    right: 25%;
    
}
.hero-badge::before{
     position: absolute;
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ffff00 ;
    top: 50%;
    transform: translateY(-50%);
    left: 25%;
}
.hero-conatainer h1{
    font-weight: 300;
    max-width: 100%;
    text-align: center;
    width: 60%;
    word-spacing: -6px;
    letter-spacing: -3px;
}
.hero-conatainer p{
    margin-top: 10px;
    text-align: center;
    max-width: 100%;
    width: 50%;
}
.hero-conatainer .headBtn.herobth{
    left: 0;
    top: 80%;

   

}
.headBtn.herobth::before{
     animation: rotate 15s linear infinite;
    
}
.headBtn.herobth::after {
  content: "Book A Call ";
  height: 95%;
  width: 98%;
  position: absolute;
  background-color: #0D0D0D;
  border-radius: 7px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  font-size: 16px;
  color: white;
  transition: var(--transition-1);
  
}


/* <!-- =============================================
----==============main start here==============----
 ============================================= --> */
 .marquee{
    width: 70%;
    background: var(--primary-bg);
    max-width: 100%;
    padding: 15px 35px;
    margin: 0 auto;
    z-index: 2;
    
    position: relative;
    transition: var(--transition-2);
    border-radius: 30px;
 }
  .marquee::after,
 .marquee::before{
        content: "";
        position: absolute;
        top: 0;
        width: 500px;
        height: 100%;
        z-index: 2;
        pointer-events: none;
    }
  
    .marquee::before {
  left: 0;
   background: linear-gradient(to right , #000000 , transparent);
}


 .marquee::after {
  right: 0;
  background: linear-gradient(to left , #000000 , transparent);
}
.marquee:hover
.marquee-track img{
   transform: scale(1);

}

 .marquee-track img{
    width: fit-content;
    border-radius: 20px;
    padding: 5px;
    transition: var(--transition-2);
    
    height: 40px;
    background:linear-gradient(to left, #5f5d5d8a, #fff, #a39f9f49);
    margin-right: 40px;
     transform: scale(0.9);
 }
 .mar-truck p{
    width: fit-content;
    margin-right: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    background: var(--card-bg);
    border-radius: 20px;
    font-size: var(--font-14);
 }
 .marquee-container,
 .mar-container {
      width: 100%;
      overflow: hidden;
      padding: 10px 0;
}
.marquee-track,
.mar-truck {
      display: flex;
      width: max-content;
      animation: scroll 45s linear infinite;
      transition: var(--transition-3);
}
@keyframes scroll {
      from {
        transform: translateX(0);
      }
      to {
        transform: translateX(-50%);
      }
    }

    .marTwo .mar-container .mar-truck{
        animation: scroll2 50s linear infinite;

    }
    @keyframes scroll2 {
      from {
        transform: translateX(-50%);
      }
      to {
        transform: translateX(0);
      }
    }

    .marOne,
    .marTwo,
    .marThree{
        width: 100%;
        position: relative;
        max-width: 100%;
    }

    /* =============================about section=================  */
    #about .container{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .about-badge{
        width: fit-content;
        padding: 14px 20px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border: 1px solid #ffffff15;
        border-radius: 25px;
        margin: 15px auto;
    }
   
    .about-badge .dot,
    .industry-badge .dot,
    .faq-badge .dot{
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #BA8811;
        box-shadow: rgba(216, 202, 9, 0.795) 0px 2px 5px;
        padding: 1px;
        
    }
    .about-badge p{
        text-transform: capitalize;
        text-align: center;
    }
    #about h2,
    #service h2,
    #price h2,
    #client h2,
    #perform h2,
    #team h2,
    #contact h2{
        max-width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: var(--text-wht);
    }
    
    .industry-card h2{
         max-width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        text-align: left;
        color: var(--text-wht);

    }
    #about h2 span,
    #service h2 span,
    .industry-card h2 span,
    #price h2 span,
    #client h2 span,
    #perform h2 span,
    #team h2 span,
    #contact h2 span,
    .faq-left h2 span{
      background: linear-gradient(to top, #888888, #dddddd); /* Adjust colors */
     -webkit-background-clip: text; 
      -webkit-text-fill-color: transparent;
      display: inline-block;
      display: block;
      margin-top: -12px;
      

    }
    #about .font-16,
    #service .font-16,
    .industry-card .font-18,
    #price .font-16,
    #client .font-16,
    #perform .font-16,
    #team .font-16,
    #contact .font-16{
        max-width: 100%;
        text-align: center;
        margin: 0 auto;
        margin-top: 20px;
        width: 55%;
    }
    .faq-left .font-16{
        text-align: left;
        margin-top: 20px ;
    }
    .industry-card .font-18{
        width: 100%;
        text-align: left;
        line-height: 28px;
        padding-right: 5px;
        margin-top: 5px;
    }
    .about-container{
        max-width: 100%;
        width: 100%;
        transition: var(--transition-1);
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        position: relative;
        margin: 4% 10px;
    }
    .about-card .about-bg{
        position: absolute;
        top: 0;
        left: -150px;
        width: 150%;
        height: 70%;
        animation: imgBg 15s  linear infinite;
        opacity: 0.6;
    
    }
    @keyframes imgBg{
        0%,100%{
            transform: rotate(0deg);
        }
        50%{
            transform: rotate(-90deg);
        }
    }
    .about-container .about-card{
        width: 100%;
        border-radius: 20px;
        border-left: 1px solid #ffffff28;
        border-top: 1px solid #ffffff60;
        padding: 20px;
        display: flex;
        flex-direction: column;
        position: relative;
        gap: 10px;
        justify-content: flex-start;
        align-items: flex-start;
        overflow: hidden;
        margin-top: 15px;
        transition: var(--transition-2);
    }
    .about-card .about-img{
        width: 60%;
        margin-bottom: 25px;
        transition: var(--transition-1);
    }
    .about-card .about-img img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: var(--transition-1);
        
    }
    .about-card:hover .about-img img{
        animation:imgUpDown 5s  linear infinite ;
    }
   
    @keyframes imgUpDown {
        0%,100%{
            transform: translateX(0px) translateY(0px);
        }
        50%{
             transform: translateX(5px) translateY(2px);

        }
        
    }
    .about-card h3{
        color: var(--text-wht);
    }
    .about-card .font-18{
        font-weight: 400;
        color: var(--text-wht-deep);
        margin-bottom: 20px;
    }
    .video-card{
        max-width: 100%;
        width: 100%;
        margin: 2% auto 0;
        height: 450px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        border-radius:5px 5px 20px 20px;
        position: relative;
        transition: var(--transition-1);

       
    }
    .video-card i{
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 10px;
        font-size: var(--font-h3);
        background: var(--primary-bg);
        color: var(--text-wht);
        border-radius: 50%;
        cursor: pointer;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        transition: var(--transition-1);
    }
    .video-card:hover i{
        opacity: 1;
    }
    .video-card i:hover {
        padding: 15px;
        background: #00000033;
    }
    .video-card video{
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius:5px 5px 20px 20px;
    }
    .video-card .font-24{
        margin-top: 20px;
        text-align: left;
        max-width: 100%;

    }
    .video-content{
        max-width: 100%;
        margin-top: 6%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        padding: 10px;
        gap: 20px;
    }
    .video-content .about-btn{
        width: fit-content;
        border: 1px solid  rgba(187, 187, 186, 0.377);
        background: var(--card-bg);
        color: var(--text-wht);
        padding:15px 25px;
        transition: var(--transition-2);
    }
     .about-btn:hover{
        box-shadow: rgba(255, 217, 0, 0.267) 0px -2px 10px;
         border: 1px solid  rgba(255, 217, 0, 0.267);

     }
     .video-content p{
        text-align: left; 
        line-height: 28px;
        width: 50%;
     }
    
    /* ============================service====================  */
    .service-container{
        max-width: 100%;
        width: 100%;
        padding: 20px;
        margin: 5% auto;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 35px;
        transition: var(--transition-1);
    }
    .service-content{
        width: 100%;
         height: auto;
         padding: 5px;
        max-width: 100%;
        border-radius: 20px;
        border-top: 2px solid #ffffff15;
        border-left: 2px solid #ffffff15;
        border-right: 2px solid #ffffff15;
        transition: var(--transition-1);
        background-image: url(https://framerusercontent.com/images/V9RhDxGVj6Fi4k9bcIxoBNZv1qA.svg);
        
        background-position: right center;
        background-repeat: no-repeat;
        backdrop-filter: blur(50px);
        background-size: cover;
        overflow: hidden;
    }
    @keyframes panel {
        from{transform: translateX(80px); opacity: 0;}
        to{transform: translateX(0px); opacity: 1;}
            
    }
    .service-panel{
        width: 100%;
        max-width: 100%;
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 25px;
        transition: var(--transition-1);
         animation: panel 0.5s ease-in-out;
         position: relative;

    }
    #serImage{
        position: absolute;
        width: 50%;
        top: 46%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: var(--transition-1);
        z-index: 2;
       
    }
    .service-panel:hover .service-img1{
        transform:translateX(5px) rotate(0deg);
    }
    .service-panel:hover .service-img{
        transform: scale(1.02);
        transition: 2s;
    }
    .service-panel .service-img{
        width: 75%;
        transition: var(--transition-1);
        z-index: 1;
    }
    .service-img .service-img1{
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: 5s ease;
        animation: shadow 50s linear infinite forwards;
        animation-delay: 4s;
    }
    @keyframes shadow {
        0%, 100%{
            opacity: 1;
            transform: translateX(5px) rotate(0deg);
        }
        50%{
            opacity: 0.4;
            transform: translateX(0px) rotate(90deg);
        }
        
    }
    .service-panal-card{
        width: 95%;
        max-width: 100%;
        margin-top: 25px;
        padding: 20px 25px;
        border: 1px solid #ffffff0e;
        border-radius: 10px;
        background-image: url(https://framerusercontent.com/images/V9RhDxGVj6Fi4k9bcIxoBNZv1qA.svg);
        
        background-position: right center;
        background-repeat: no-repeat;
        
        background-size: cover;
        overflow: hidden;
        transition: var(--transition-1);
        display: flex;
        flex-direction: column;
        gap: 10px;
        z-index: 3;
        box-shadow: rgba(86, 86, 228, 0.116) 0px 7px 29px 0px;
         animation: panel 0.8s ease-in-out;
    }
    .service-panal-card .font-18{
        color: var(--text-wht);
    }
    .service-panal-card .font-14{
        color: var(--text-wht-deep);
        line-height: 22px;
    }
    .service-panel.f-active{
        display: flex;
    }

    .service-boxes{
        width: 100%;
         /* max-height: 90vh; */
         height: auto;
         padding: 5px;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 20px;
        transition: var(--transition-1);
        
    }
    .service-boxes .service-box{
        width: 100%;
       
        position: relative;
        transition: var(--transition-1);
       
       border-radius: 10px;
       cursor: pointer;
       border: 1px solid  rgba(255, 217, 0, 0.01);
       
    }
    .service-box .f-btn{
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 25px;
        border: 1px solid transparent;
        transition: var(--transition-1);
       
       
        padding: 10px 25px;
        border-radius: 10px;
    }
    .service-box .f-btn.f-active {
        border: 1px solid  rgba(255, 217, 0, 0.042);
        box-shadow: rgba(19, 18, 18, 0.11) 0px 8px 24px;
        
        

    }
    .service-box .f-btn.f-active span{
        background: var(--card-bg);
    }
    .service-box .f-btn span{
         width: 35px;
        height: 32px;
        padding: 10px;
        border: 1px solid #ffffff3d;
        border-radius: 50%;
        margin-top: 5px;
        background: transparent;

    }
    .service-box:hover{
        box-shadow: rgba(19, 18, 18, 0.2) 0px 8px 24px;
        
    }
    .service-box .service-info{
        padding: 2px;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-bottom: 25px;
    }
    .service-info h3{
        color: var(--text-wht);
    }
    .service-info p{
        line-height: 25px;
        width: 95%;
        padding: 1px 5px;
    } 
    .service-box:hover::after{
        width: 200px;
    }
    .service-box::after{
        position: absolute;
        content: '';
        width: 0;
        height: 1px;
        border-radius: 5px;
        bottom: 22px;
        transition: var(--transition-1);
        left: 95px;
        background: rgba(255, 217, 0, 0.644);
    }
    
    
 /* =====================industries=========================== */
 #industry{
    margin: 0;
    padding: 0 ;
    max-width: 100%;
    width: 100%;
    position: relative;
     height: 600px;
    
     overflow-x: hidden;
    
   
     

 }

 .index-container{
     position: relative;
    z-index: 2;
    max-width: 100%;
    width: 100%;
    
 }
 
 .index-container .industry-right{
    position: absolute;
     top: 20%;
    right: 6%;
    width: 40%;
    padding: 15px;
    max-width: 100%;
 }
 .industry-img{
    width: 100%;
    height: 550px;
    background: #0f0f0f6e;
    backdrop-filter: blur(5px);
    padding: 2px;
    border-right: 1px solid #ffffff15;
    border-top: 1px solid #ffffff15;
    border-radius: 15px;
    overflow: hidden;
 }
 .industry-img img{
    width: 100%;
    height: 100%;
    padding: 2px;
    object-fit: cover;
    transition:5s ease;
    transform: scale(1);
    animation: colorChange 15s linear infinite;
    
 }
 .industry-img:hover img{
    transform: scale(1.05);
    animation: none;
 }

 @keyframes colorChange {
    0%, 100%{
        filter: grayscale(0);
        transform: scale(1);
    }50%{
        filter:grayscale(100%) ;
        transform: scale(1.05);
    }
    
 }
 
 .industry-container{
     height: 550px;
    padding: 15px 3% 15px 5%;
   
  
    width: 100%;
    
    
    max-width: 100%;
    margin: 0 auto;

    float: left;
    position: relative;
    cursor: grab;
    
    overflow-y: auto;
    margin-bottom: 2%;
     z-index: 3;
 }
 .industry-container::-webkit-scrollbar{ 
    width: 0;       
}
.industry-container .industry-card{
     width: 50%;
    height: auto;
    max-width: 100%;
    padding: 0 40px 0 15px ;
    top: 0;
    left: 0;
    position: sticky;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: flex-start;
    align-items: flex-start;
    
}
 .industry-card .industry-badge{
    width: fit-content;
    padding: 5px 25px;
    border: 1px solid #ffffff1c;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center;
    margin-bottom: 20px;  
      
}
.industry-badge p{
    text-transform: capitalize;
    text-align: center;
    display: block;
    padding-bottom: 5px;
    
}
.industry-card-container{
    max-width: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 30px;
    margin-top: 3%;
}
.industryCard{
    width: 100%;
    margin: 2% 0;
    padding: 35px 30px;
    height: auto;
    display: flex;
    gap: 15px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    border-top:2px solid #ffffff4b ;
    border-left:2px solid #ffffff4b ;
    border-right:1px solid #3b39394b ;
    border-radius: 18px 18px 0 15px;
    position: relative;
    background: var(--primary-bg);
   
}
.industryCard::before{
    position: absolute;
    content: '';
    top: 0px;
    left: 1px;
     border-radius: 15px 15px 0 15px;
    width: 100%;
    height: 100%;
    background: var(--gradient-4);
    opacity: 0.5;
}
.industry-card i{
   
    padding: 12px;
    display: block;
    display: flex;
    justify-content: center;
    align-items: center;
  
    border: 1px solid #ffffff1f;
    border-radius: 50%;
    font-size: var(--font-24);
    z-index: 1;
    text-align: center;
    background: linear-gradient(-50deg, #000000f3 60%, #2e2d2d 150%);;

}
.industry-card h4{
    text-align: left;color: var(--text-wht);
    z-index: 1;
    text-transform: capitalize;
}
.industry-card h4::after{
    position: absolute;
    content: '';
    width: 300px;
    height: 1px;
    border-radius: 50%;
    background: linear-gradient(to left, #070000, rgba(190, 172, 9, 0.233), rgb(0, 0, 0));
    top: 60%;
    left: 5%;
}
.industry-card p{
    color: var(--text-wht-deep);
    z-index: 1;
    line-height: 25px;
    width: 95%;
    margin-top: 10px;
}

/* ============================pricing=======================  */
#price{
    box-shadow: rgba(43, 44, 44, 0.096) 0px 8px 24px;
    border-radius: 20px;
    padding-bottom: 50px;
}
.monthBtn{
    max-width: 100%;
    width: fit-content;
    padding: 10px 35px;
    border: 1px solid var(--card-bg);
    background: var(--text-wht);
    color: var(--primary-bg);
    font-size: var(--font-18);
    font-weight: 700;
    text-transform: capitalize;
    border-radius: 25px;
    margin: 0 auto;
    margin-top: 25px;
}
.price-container{
    max-width: 100%;
    width: 100%;
    padding: 20px;
    margin-top: 5%;
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: var(--transition-1);
    
}
.price-container .price-card{
    width: 100%;
    padding: 30px;
    border-top: 1px solid #ffffff94;
    border-left: 2px solid #dbd5d55b;
    border-right: 1px solid #53525207;
    position: relative;
    height: auto;
    border-radius: 20px 12px 0 10px ;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
    background-image: url(https://framerusercontent.com/images/V9RhDxGVj6Fi4k9bcIxoBNZv1qA.svg);
    background-position:right center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: var(--transition-1);
}
.price-card:nth-child(2){
     border-top: 2px solid  #BA8811;
    border-left: 2px solid  #BA8811;
    border-right: 2px solid  #BA8811;
    border-radius: 20px 12px 5px 5px ;

}
.price-card:nth-child(3){
    border-left: none;
    border-right: 2px solid #dbd5d55b;
     border-radius: 12px 20px 20px 10px ;
   

}
.price-card .price-info,
.price-card .price-title{
    width: 100%;
    position: relative;
    transition: var(--transition-2);
}
.pro{
    position: absolute;
    top: 8%;
    right: 5px;
    width: fit-content;
    border: 1px solid gold;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 25px;
    padding: 8px 15px;
}
.pro i{
    color: gold;
}

.price-card .font-18{
    text-align: left;
    text-transform: capitalize;
}
.price-card h4{
    text-transform: capitalize;
}
.price-card .font16{
    width: 100%;
    text-align: left;
    margin: 20px 0;
    font-size: var(--font-16);
    color: var(--text-wht-deep);
}
.price-card .number{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
}
.price-card ul{
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 30px;
}
.price-card ul li{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 7px;

}
.price-card ul li i{
    font-size: var(--font-24);
}
.price-card ul li p{
    padding-left: 3px;
    text-transform: capitalize;
}
.get-btn{
    max-width: 100%;
    width: 100%;
    border: 1px solid #ffffff3a;
    padding: 10px 25px;
    text-align: center;
    margin-top: 25px;
    font-size: var(--font-18);
    text-transform: capitalize;
    border-radius: 5px;
    transition: var(--transition-1);
    color: var(--text-wht);
    cursor: pointer;
}
.get-btn:hover{
    color: #BA8811;
    border: 1px solid #ba8811;

}
.price-footer{
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
    transition: var(--transition-1);
    position: relative;
}
.price-footer .price-foot-left,
.price-footer .price-foot-right{
   width: 100%;
   padding: 10px;
   transition: var(--transition-2);
  
   overflow: hidden;
}
.price-footer .price-foot-left{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 2%;
    gap: 20px;
}
.price-foot-left h4{
    text-transform: capitalize;
    font-weight: 400;
    margin-bottom: 5px;
}
.price-foot-left p{
   
    line-height: 25px;
    width: 95%;
}
.price-btn{
     height: 50px;
    width: 120px;
   position:absolute;
   bottom: -20px;
   left: 35px;
   margin: auto;
   
    box-shadow: 0 20px 35px rgba(0,0,0,0.3);
    border-radius: 7px;
    overflow: hidden;
    background-color:var(--primary-bg);
    transition: var(--transition-2);
    border: 1px solid #ffffff1f;

}
.price-btn:hover{
    box-shadow: rgba(255, 217, 0, 0.267) 0px -2px 10px;
}
.price-btn:hover::before{
    animation: none;
    transition: var(--transition-1);
     background-image: conic-gradient(
    #ffb30333 100deg,
    #ffb30333 100deg
  );
  
}
.price-btn:hover::after{
    box-shadow: rgba(246, 247, 248, 0.082) 0px 28px 24px;
    background: #000;
}
.price-btn::before {
  content: "";
  background-image: conic-gradient(
    #BA8811 20deg,
    transparent 50deg
  );
   box-shadow: #BA8811 10px -28px 24px;
  height: 250%;
  width: 186%;
  position: absolute;
  top: -80%;
  left: -43%;
  animation: rotate 6s linear infinite;
  transition: var(--transition-1);
  
  
}
.price-btn::after {
  content: "Contact";
  height: 95%;
  width: 98%;
  position: absolute;
  background-color: #0D0D0D;
  border-radius: 7px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  font-size: 16px;
  color: white;
  transition: var(--transition-1);
  
}
.price-footer .price-foot-right{
    width: 100%;
    height: auto;
    padding: 0;
    border: 1px solid #ffffff13;
    border-radius: 15px;
   
    display: flex;
    flex-direction: column;
     background: var(--primary-bg);
    margin: 0 auto;
    z-index: 2;
    position: relative;
    transition: var(--transition-2);
    
}
.price-foot-right::after,
 .price-foot-right::before{
        content: "";
        position: absolute;
        top: 0;
        width: 80px;
        height: 100%;
        z-index: 2;
        pointer-events: none;
        border-radius: 15px;

    }
  
     .price-foot-right::before {
  left: 0;
   background: linear-gradient(to right , #000000 , transparent);
}


 .price-foot-right::after {
  right: 0;
  background: linear-gradient(to left , #000000 , transparent);
}


 /* ====================client=========================== */
 .client-content{
    max-width: 100%;
    width: 90%;
    margin: 0 auto;
    margin-top: 5%;
    padding: 2% 4%;
   display:flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: 30px;
   transition: var(--transition-1);
 }
 .client-content .client-title{
    width: 70%;
    max-width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    transition: var(--transition-1);
 }
 .client-title img{
    width: 70px;
 }
 .client-title .client-name{
    display: flex;
    flex-direction: column;
    gap: 5px;
 }
 .client-name .font-18{
    text-transform: capitalize;
    font-weight: 700;
    color: var(--text-wht);
 }
 .client-name .font-14{
    color: var(--text-wht-deep);
 }
 .client-content .client-info{
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
    transition: var(--transition-1);
 }
 .client-info q{
    font-size: var(--font-h4);
    color: var(--text-wht);
    line-height: 35px;
    font-weight: 500;

 }
  .client-info  .c-line{
    width: 500px;
    max-width: 100%;
    height: 1px;
    background: linear-gradient(to left, rgb(17, 17, 17), rgba(255, 255, 255, 0.555), rgb(22, 22, 22));
    border-radius: 20px;
  }
   .client-info .client-percentage{
    max-width: 100%;
    margin-top: 15px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
 
   
    gap: 25px;
    transition: var(--transition-1);
   }
   .client-percentage .client-text{
    width: 100%;
    display: flex;
    gap: 13px;
    justify-content: flex-start;
    align-items: flex-start;
    
   }
   .client-text span{
    font-size: var(--font-h3);
   }
   .client-text p{
    font-size: var(--font-16);
    width: 60%;
   }
   .partner-container{
    max-width: 100%;
    
    
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 3%;
    gap: 20px;
    
    padding: 3% ;
    transition: var(--transition-1);
   
   }
   .partner-container .partner-card{
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 20px 5px;
    border-radius: 10px;
    transition: var(--transition-1);
     box-shadow: rgba(48, 47, 47, 0.137) 0px 1px 4px;

   }
   .partner-card:hover{
    box-shadow: rgba(214, 173, 36, 0.137) 0px 1px 4px

   }
   
   
   .partner-card img{
    width: 50%;
   }
   .partner-card q{
    font-size: var(--font-16);
    line-height: 25px;
    text-align: center;
    color: var(--text-wht);
   }
   .partner-card li{
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
   }
   .partner-card li p:first-child{
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center;
    color: var(--text-wht);
    text-transform: capitalize;
   }
   .partner-card li p:last-child{
    color: var(--text-wht-deep);
    text-transform: capitalize;
   }

   /* ====================perform=========================== */
   .perform-container{
    max-width: 100%;
    width: 100%;
    padding: 2%;
    margin-top: 5%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    justify-content: center;
    align-items: center;
    transition: var(--transition-1);
   }
   .perform-container .perform-card{
    width: 100%;
    max-width: 100%;
   
    transition: var(--transition-1);
    height: auto;
    position: relative;
   }
   .perform-card .performImg{
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
   }
   .performImg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
   }
    .perform-card .performImg-info{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 3;
    transition: var(--transition-1);
    display: flex;
    flex-direction: column;
    padding: 30px;
    justify-content: flex-start;
    align-items: flex-start;
   }
   .perform-card:nth-child(2){
    position: relative;
    background: var(--gradient-4);
    height: 100%;
    padding: 1px;
    border-radius: 15px;
    border: 1px solid #ffffff1c;
   }
   .perform-card .perform-card-content{
    width: 100%;
     display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
    transition: var(--transition-1);

   }
   .perform-card-content .perform-img{
    width: 100%;
    height: 100%;
    border: 1px solid #ffffff18;
    border-radius: 15px;
    padding: 2px;
   }
   .perform-img img{

    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
   }
   .perform-card-content .perform-box{
    padding: 25px ;
    width: 100%;
    max-width: 100%;
    border-radius: 15px;
    border-left: 2px solid #ffffff8c;
    border-top: 2px solid #ffffff8c;
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: flex-start;
    align-items: flex-start;
    transition: var(--transition-1);
    position: relative;
    background: url(https://framerusercontent.com/images/V9RhDxGVj6Fi4k9bcIxoBNZv1qA.svg);
    background-position: center right;
    background-size: cover;
    background-repeat: no-repeat;
   }
   .perform-box .font-18,
   .performImg-info .font-18{
    font-weight: 700;
    margin-top: 5px;
    text-transform: capitalize;
    text-align: left;
   }
   .perform-box .font-14{
    line-height: 25px;

   }
   .performImg-info .font-14{
    margin-top: 115%;
    line-height: 20px;
    font-weight: 600;
   }
   .prfmNum-container{
    max-width: 100%;
    width: 100%;
    padding: 3%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    transition: var(--transition-1);
   }
   .prfmNum-container .prfm-card{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: center;
    align-items: center;
    transition: var(--transition-1);

   }
    .prfm-card span{
        font-size: var(--font-h2);
        font-weight: 700;
        color: var(--text-wht);
        text-align: center;
    }
    .prfm-card p{
        color: var(--text-wht-deep);
        text-align: center;
    }

    /* =============================team section=================  */
    .team-container{
        
        margin: 5% auto;
        max-width: 100%;
        width: 100%;
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(3, 1fr);
        position: relative;
        padding: 2%;
        transition: var(--transition-1);
    }
    .team-container .team-card{
        width: 100%;
        max-width: 100%;
        
        position: relative;
        padding: 25px;
        border-top: 1px solid #ffffff7a;
        border-right: 1px solid #ffffff7a;
        border-left: 1px solid #ffffff3f;
        border-radius: 15px;
        display: flex;
        align-items: center;
        gap: 20px;
        transition: var(--transition-1);
       

    }
    .team-card{
         background: url(https://framerusercontent.com/images/V9RhDxGVj6Fi4k9bcIxoBNZv1qA.svg);
        background-position: center right;
        background-repeat: no-repeat;
        background-size: cover;

    }
    .team-card:nth-child(2),
    .team-card:nth-child(6){
         background-position:top center ;

    }
    .team-card:nth-child(3),
    .team-card:nth-child(4){
        background-position:left bottom ;

    }
    .team-card:nth-child(5){
        background-position:right bottom ;

    }
    .team-card .team-info{
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 3px;
        flex-direction: column
    }
    .team-info .font-18{
        color: var(--text-wht);
        font-weight: 600;
        text-transform: capitalize;
    }
    .team-info .font16{
        color: var(--text-wht-deep);
    }
    .team-card a{
        display: block;
        position: absolute;
        top: 50%;
        right: 5%;
        transform: translateY(-50%);
        
        color: var(--text-wht-deep);
        padding: 10px;
        font-size: var(--font-18);

        background: var(--gradient-4);
        border-radius: 50%;
        border: 1px solid #ffffff25;
        transition: var(--transition-1);
    }
    .team-card:hover a{
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    }
    
    .team-card img{
        width: 60px;
        height: 60px;
        object-fit: cover;
        border-radius: 50%;
        padding: 1px;
        border: 1px solid rgba(255, 217, 0, 0.185);
    }

    .form-container {
        background: var(--gradient-4);
        padding: 40px;
        border-radius: 16px;
        box-shadow: 0 0 20px rgba(44, 43, 43, 0.116);
        width: 70%;
        margin: 5% auto;
        border-top: 1px solid #ffffff1f;
        border-left: 1px solid #ffffff1f;
        max-width: 100%;
    }
    .contact-form .row {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        width: 100%;
        gap: 20px;
    }
    .contact-form .form-group {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin-bottom: 40px;
    }

    .contact-form label {
        font-size: var(--font-16);
        margin-bottom: 6px;
        color: var(--text-wht-deep);
    }
    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        background: transparent;
        border: none;
        border-bottom: 1px solid #444;
        padding: 10px 5px;
        color: var(--text-wht);
        font-size: var(--font-18);
        outline: none;
        width: 100%;
        font-family: "Host Grotesk", sans-serif;
    }
    .contact-form select {
        appearance: none;
    }
    .contact-form textarea {
        resize: vertical;
        min-height: 80px;

    }
    .submit-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
    }
    button[type="submit"] {
        background-color: transparent;
        color: var(--text-wht);
        border: 1px solid #444;
        padding: 15px 30px;
        border-radius: 8px;
        cursor: pointer;
        transition: 0.3s;
        font-size: var(--font-18)
    }

    button[type="submit"]:hover {
        
        color: #BA8811;
        border: 1px solid #BA8811;
    }

    .submit-row p {
        font-size: var(--font-18);
        color: var(--text-wht);
    }
    select option{
        
        color: var(--card-bg);
    }


    /* =====================faq=========================  */
    .faq-container{
        max-width: 100%;
        width: 100%;
        padding: 3%;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 30px;
        margin: 0 auto;
        transition: var(--transition-1);
    }
    .faq-container .faq-left{
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
        justify-content: flex-start;
        align-items: flex-start;
        transition: var(--transition-2);
    }
    .faq-left p{
        width: 85%;
    }
    .faq-left .faq-badge{
        width: fit-content;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border: 1px solid #ffffff1f;
        border-radius: 25px;
        padding: 10px 25px;
    }
    .faq-container .faq-right{
        width: 100%;
        max-width: 100%;
        background: var(--gradient-4);
        padding: 30px;
        border-radius: 20px 20px 10px 10px;
        box-shadow: 0 0 20px rgba(44, 43, 43, 0.116);
       
        margin: 0 auto;
        border-top: 2px solid #ffffff31;
        border-left: 2px solid #ffffff31;
        transition: var(--transition-2);
    }

    .acc-content{
         max-width: 100%;
        margin:  0;
        padding: 5px 0 ;
        height: auto;
    }
    .acc-container{
        width: 100%;
        
        max-width: 100%;
        position: relative;
        height: auto;
    }
    .acc-content .acc-title{
         max-width: 100%;
        width: 100%;
        display: flex;
        justify-content: space-between;
        gap: 8px;
        align-items: center;
        padding: 10px 2px;
        cursor: pointer;
        transition: var(--transition-1) ;
        background-color: transparent;
    }
    .acc-title .font16{
        font-size: var(--font-16);
        color: var(--text-wht);
        font-weight: 500;
    }
    .acc-title i{
        padding: 10px;
        
        color: var(--text-wht);
        
        font-size: var(--font-18);
        display: block;
        cursor: pointer;
        transition: var(--transition-1);
    }
    .acc-answere{
        max-width: 100%;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease-in-out;
        
    }
    .acc-content.active .acc-answere{
        max-height: 400px;
    }
    .fa-plus {
        transition: transform 0.5s ease;
    }
    .acc-content.active .fa-plus{
    transform: rotate(45deg);
    opacity: 0.8;
}
    .acc-content .acc-answere p{
        color: var(--text-wht-deep);
        opacity: 1;
        font-weight: 600;
        
    }

/* <!-- =============================================
----==============footer start here==============----
============================================= --> */

footer{
    max-width: 100%;
    width: 100%;
    height: 120vh;
    position: relative;
    padding: 5% 2%;
    transition: var(--transition-2);
    
    
}
footer .footerImg{
    
    width: 100%;
    position: relative;
    height: 100%;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    

}
.footerImg img{
    width: 500px;
    position: relative;
     animation: round 110s ease-in-out infinite alternate;

}
.color-cercle2{
    position: absolute;
     width: 300px;
    height: 300px;
  border-radius: 50%;
  background: conic-gradient(
    from 180deg,
    #0051ff,
    #00ffb3,
    #1d43eb,
    #00ccff,
    #f5ecec,
    #1d43eb
  );
  filter: blur(60px);
  opacity: 0.7;
   top: 25%;
    left: 35%;
    transform: translate(-50%, -50%);
    animation: round 6s ease-in-out infinite alternate;
}

.footer-body-card{
    position: absolute;
    content: '';
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80vh;
    background: #00000034;
     background: linear-gradient(to top, 
        rgba(0, 0, 0, 0.178) 50%, 
        rgba(65, 62, 62, 0.068) 80%, 
        rgba(24, 24, 24, 0.014) 100%);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(145, 139, 139, 0.123);
    border-radius: 20px;
    z-index: 2;
}
.footer-body-card .line1:nth-child(1){
    position: absolute;
    content: '';
    height: 95%;
    width: 2px;
    background: rgba(145, 139, 139, 0.123);
    background: linear-gradient(to top, #010101, rgba(107, 109, 107, 0.171), rgba(58, 57, 57, 0.438));
    top: 0;
    left: 5%;
   
    z-index: -1;

}
.footer-body-card .line1:nth-child(2){
    left: 25%;
    position: absolute;
    content: '';
    height: 95%;
    width: 2px;
    background: rgba(145, 139, 139, 0.123);
    background: linear-gradient(to top, #010101, rgba(107, 109, 107, 0.171), rgba(58, 57, 57, 0.438));
    top: 0;
    left: 25%;
   
    z-index: -1;

     
}
.footer-body-card .line1:nth-child(3){
    left: 50%;
    position: absolute;
    content: '';
    height: 95%;
    width: 2px;
    background: rgba(145, 139, 139, 0.123);
    background: linear-gradient(to top, #010101, rgba(107, 109, 107, 0.171), rgba(58, 57, 57, 0.438));
    top: 0;
   
    z-index: -1;

     
}
.footer-body-card .line1:nth-child(4){
    left: 75%;
    position: absolute;
    content: '';
    height: 95%;
    width: 2px;
    background: rgba(145, 139, 139, 0.123);
    background: linear-gradient(to top, #010101, rgba(107, 109, 107, 0.171), rgba(58, 57, 57, 0.438));
    top: 0;
   
    z-index: -1;

     
}
.footer-body-card .line1:nth-child(5){
    left: 95%;
    position: absolute;
    content: '';
    height: 95%;
    width: 2px;
    background: rgba(145, 139, 139, 0.123);
    background: linear-gradient(to top, #010101, rgba(107, 109, 107, 0.171), rgba(58, 57, 57, 0.438));
    top: 0;
   
    z-index: -1;

     
}
.fotter-body{
    position: relative;
    margin: 3% auto;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    transition: var(--transition-2);
}
.fotter-body .font-24{
    font-weight: 200;
    max-width: 100%;
    width: 60%;
    text-align: center;
    
}
.footerLink{
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 20px 8%;
   
    margin-top: 30px;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
    justify-content: space-between;
    align-items: center;
    transition: var(--transition-1);

}
.footerLink .footer-links{
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    align-items: flex-start;
    
}
.footer-links .foot-logo{
    max-width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
}
.foot-logo img{
    width: 30px;
}
.foot-logo .font-18{
    font-weight: 700;
    color: var(--text-wht);
}
.footer-links .mail{
    max-width: 100%;
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    align-items:center;
    color: var(--text-wht-deep);
    margin-bottom: 25px;
    transition: var(--transition-1);
}
.footer-links .mail:hover{
    color: #BA8811;
}

.footer-links .mail:hover i{
    transform: rotate(45deg);
    
}
.mail .font-18{
    text-transform: lowercase;
}
.footer-links .font-14{
    color: var(--text-wht-deep);
}
.mail i{
    display: block;
    margin-top: 3px;
    transition: var(--transition-2);
}

.footer-links:nth-child(2){
    margin-left: 45%;
}
.footer-links:nth-child(3){
    margin-left: 25%;
}
.footer-links .f-link{
    margin-top: 25px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 10px;
}
.f-link a{
    text-align: right;
    display: block;
    max-width: 100%;
    color: var(--text-wht);
    text-transform: capitalize;
    transition: var(--transition-1);
    
}
.f-link a:hover{
    color: var(--text-wht-deep);
}