@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Flex:opsz,wght@8..144,100..1000&family=Roboto+Slab:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Flex:opsz,wght@8..144,100..1000&family=Roboto+Slab:wght@100..900&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    text-transform: capitalize;
    font-family: "Noto Sans", sans-serif;
   
}
ul{
    list-style: none;
}
a{
  text-decoration: none !important;
}
hr{
    color:black !important;
}
h1,
h2,h3,h4,h5,h6{
  font-family:"Roboto Slab", serif !important;
  color:#000 !important;
}


  /* start footer */
  
/********************Footer*******************/
    .footer-content .insta-bg{
    background: #405;
}
.footer-content .link-bg{
    background-color: #0077b5;
}
.footer-content .youtube-bg{
    background-color: red;
}
.footer-content .pin-bg{
    background-color: #0077b5;
}

.footer h3{
    font-size:.75rem;
        color:#fff !important ;
}
.footer i{
    margin-right:15px;
    color:#fff;
    font-size:40px;
}
.footer p{
    color: #fff;
     font-size:14px;
}
hr{
    color:#fff;
}
ul h5{
    color:#fff  !important;
    font-size:11px;
    font-weight:700;
}
ul li a{
    color:#fff;
    line-height:30px;
    font-weight:400;
    font-size:11px;
}
.bottom-footer{
    background-color:#000000;
}
.bottom-footer .btn{
    background-color:#fff !important;
    color:#000 !important;
        height: 25px  !important;
    margin-bottom: 5px  !important;
        border-radius: 0 !important;
            font-size: 12px;
            outline:none;
            border:none;
} 
.bottom-footer p{
    font-size:10px;
}
.conditions{
    margin:0;
    padding:0;
}
.conditions li{
    display:inline-block;
    /*padding:0 20px;*/
}
.conditions li a{
    color:#fff !important;
}
.bottom-social li{
    display:inline-block;
    padding:0 10px;
}
.bottom-social li a i{
    color:#fff;
    font-size:16px;
}
.libox {
    width: 300px;
    /*margin: 20px auto;*/
    text-align: left;
}

.hidden-item {
    display: none;
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: 1s;
    font-size:12px;
    font-weight:400;
    line-height:35px;
}
.hidden-item.show {
    display: list-item;
    opacity: 1;
    height: auto;
}

.readmore a {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}
.libox ul{
    margin:0;
    padding:0;
}
.libox ul li{
    color:#fff;
}

.readmore a:hover {
    text-decoration: underline;
}




.cookie-notification {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: white;
    text-align: center;
    padding: 5px 15px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
}

.cookie-notification p {
    margin: 0;
    flex: 1;
    font-size:10px;
}

.cookie-notification a {
    color: #fff;
    text-decoration: underline;
}

#accept-cookies-btn {
    background-color: #fff !important;
    color: #000;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 5px;
    margin-left: 15px;
    font-size:10px;
    border:1px solid #fff;
}

#accept-cookies-btn:hover {
    background-color: transparent;
}

.hidden {
    display: none;
}
  .footer{
    /*background-color:#008080 !important;*/
    background-image:url("../images/footer-bg.jpg") !important;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    position:relative;
}
 .footer:before{
     content:"";
     position:absolute;
     inset:0;
     background-color:rgba(0,0,0,0.5);
 }
 .footer .container{
     position:relative;
 }
  .footer-section {
    background: #008080 !important;
    position: relative;
  }
  .footer-cta {
    border-bottom: 1px solid #373636;
  }
  .single-cta i {
    color: #fff;
    font-size: 30px;
    float: left;
    margin-top: 8px;
  }
  .cta-text {
    padding-left: 15px;
    display: inline-block;
  }
  .cta-text h4 {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 2px;
  }
  .cta-text span {
    color: #757575;
    font-size: 15px;
  }
  .footer-content {
    position: relative;
    z-index: 2;
  }
  .footer-pattern img {
    position: absolute;
    top: 0;
    left: 0;
    height: 330px;
    background-size: cover;
    background-position: 100% 100%;
  }
  .footer-logo {
    margin-bottom: 30px;
  }
  .footer-logo img {
      max-width: 200px;
  }
  .footer-text p {
    margin-bottom: 14px;
    font-size: 14px;
        color: #fff;
    line-height: 28px;
  }
  .footer-social-icon span {
    color: #fff;
    display: block;
    font-size: 20px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 20px;
  }
  .footer-social-icon a {
    color: #fff;
    font-size: 16px;
    margin-right: 15px;
  }
  .footer-social-icon i {
    height: 40px;
    width: 40px;
    text-align: center;
    line-height: 38px;
    border-radius: 50%;
  }
  .facebook-bg{
    background: #3B5998;
  }
  .twitter-bg{
    background: #55ACEE;
  }
  .google-bg{
    background: #DD4B39;
  }
  .footer-widget-heading h3 {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 40px;
    position: relative;
  }
  .footer-widget-heading h3::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -15px;
    height: 2px;
    width: 50px;
    background: #fff   }
  .footer-widget ul li {
    display: inline-block;
    float: left;
    width: 50%;
    margin-bottom: 12px;
  }
  .footer-widget ul li a:hover{
    color: #108A00   }
  .footer-widget ul li a {
    color: #fff;
    text-transform: capitalize;
  }
  .subscribe-form {
    position: relative;
    overflow: hidden;
  }
  .subscribe-form input {
    width: 100%;
    padding: 14px 28px;
    background: #2E2E2E;
    border: 1px solid #2E2E2E;
    color: #fff;
  }
  .subscribe-form button {
      position: absolute;
      right: 0;
      background: #fff;
       padding: 13px 20px;
      border: 1px solid #fff ;
      top: 0;
  }
  .subscribe-form button i {
    color: #108A00;
    font-size: 22px;
    transform: rotate(-6deg);
  }
  .copyright-area{
    background: #202020;
    padding: 25px 0;
  }
  .copyright-text p {
    margin: 0;
    font-size: 14px;
    color: #fff;
  }
  .copyright-text p a{
    color: #fff   }
  .footer-menu li {
    display: inline-block;
    margin-left: 20px;
  }
  .footer-menu li:hover a{
    color: #108A00   }
    
  .footer-menu li a {
    font-size: 14px;
    color: #878787;
  }

.page1-banner{
    background-image:url("../images/page1.jpg");
    background-size:cover;
    background-repeat:no-repeat;
    height:90vh;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
}
.page1-banner h2{
    font-size:34px;
}
.page1-banner:before{
    content:"";
    position:absolute;
    inset:0;
    background-color:rgba(0,0,0,0.5);
}

.page2-banner{
    background-image:url("../images/page2.jpg");
    background-size:cover;
    background-repeat:no-repeat;
    height:90vh;
    position:relative;
     display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
}
.page2-banner:before{
    content:"";
    position:absolute;
    inset:0;
    background-color:rgba(0,0,0,0.5);
}
.page3-banner{
    background-image:url("../images/page3.jpg");
    background-size:cover;
    background-repeat:no-repeat;
    height:90vh;
    position:relative;
    background-position:center;
     display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
}
.page3-banner:before{
    content:"";
    position:absolute;
    inset:0;
    background-color:rgba(0,0,0,0.5);
}
.page4-banner{
    background-image:url("../images/page4.jpg");
    background-size:cover;
    background-repeat:no-repeat;
    height:90vh;
    position:relative;
     display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
}
.page4-banner:before{
    content:"";
    position:absolute;
    inset:0;
    background-color:rgba(0,0,0,0.5);
}
.page5-banner{
    background-image:url("../images/page5.jpg");
    background-size:cover;
    background-repeat:no-repeat;
    height:90vh;
    position:relative;
     display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
}
.page5-banner:before{
    content:"";
    position:absolute;
    inset:0;
    background-color:rgba(0,0,0,0.5);
}
.page6-banner{
    background-image:url("../images/page6.jpg");
    background-size:cover;
    background-repeat:no-repeat;
    height:90vh;
    position:relative;
     display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
}
.page6-banner:before{
    content:"";
    position:absolute;
    inset:0;
    background-color:rgba(0,0,0,0.5);
}
.page7-banner{
    background-image:url("../images/page7.jpg");
    background-size:cover;
    background-repeat:no-repeat;
    height:90vh;
    position:relative;
     display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
}
.page7-banner:before{
    content:"";
    position:absolute;
    inset:0;
    background-color:rgba(0,0,0,0.5);
}
.page8-banner{
    background-image:url("../images/page8.jpg");
    background-size:cover;
    background-repeat:no-repeat;
    height:90vh;
    position:relative;
     display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
}
.page8-banner:before{
    content:"";
    position:absolute;
    inset:0;
    background-color:rgba(0,0,0,0.5);
}
.page9-banner{
    background-image:url("../images/page9.jpg");
    background-size:cover;
    background-repeat:no-repeat;
    height:90vh;
    position:relative;
     display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
}
.page9-banner:before{
    content:"";
    position:absolute;
    inset:0;
    background-color:rgba(0,0,0,0.5);
}
.page10-banner{
    background-image:url("../images/page10.jpg");
    background-size:cover;
    background-repeat:no-repeat;
    height:90vh;
    position:relative;
       background-position:center;
        display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
}
.page10-banner:before{
    content:"";
    position:absolute;
    inset:0;
    background-color:rgba(0,0,0,0.5);
}
/* start navbar */
.dark-colour{
    background-color:#000 !important;
}
.logo {
    width: 142px;
    height: 80px;
    object-fit: contain;
    padding: 0;
}

.nav-link{
    color:#fff;
    font-weight:500 !important;
    font-size:11px;
}
.nav-link:hover{
    color:silver !important;
}
.navbar {
    /*background-image:url("../images/aii.jpg") !important;*/
    background-color:transparent;
    background-size:cover;
    background-repeat:no-repeat;
    
}

.navbar-nav {
    /*margin-left: 5rem !important; */
    gap:20px;
    /*color:black;*/
}
.ac-btn{
    background-color:#003366 !important;
    color: #fff;
    font-size:14px;
    font-weight:500;
    padding:10px 20px;
    transition:.5s;
}
.ac-btn:hover{
    background-color:navy;
    color:#fff;
}
.accordion-item {
    border:0 !important;
}
.accordion-item  .accordion-button{
  font-size:13px;
  background-color:#003366;
  color:#fff;
  margin:20px 0;
}
.accordion-body  ul{
  margin:0;
  padding:0;
}
.accordion-body li{
  display: block;
}
.accordion-body li a{
  line-height:40px;
  font-weight:600;
  color:#000;
}

 .dropdown-menu {
    max-height: 200px; /* Adjust height to show only 5 items */
    overflow-y: auto; /* Enable vertical scrolling */
    scrollbar-width: thin; /* Optional: For thinner scrollbar */
    scrollbar-color: #ccc #f5f5f5; /* Optional: Customize scrollbar colors */
  }

  .dropdown-menu .dropdown-item {
    border-bottom: 1px solid #ddd; /* Add border below each item */
    padding: 10px 15px; /* Adjust padding if necessary */
  }

  .dropdown-menu .dropdown-item:last-child {
    border-bottom: none; /* Remove border for the last item */
  }

  /* Optional: Styling for scrollbar (WebKit-based browsers) */
  .dropdown-menu::-webkit-scrollbar {
    width: 8px; /* Width of the scrollbar */
  }
  .dropdown-menu::-webkit-scrollbar-track {
    background: #f5f5f5; /* Track color */
  }
  .dropdown-menu::-webkit-scrollbar-thumb {
    background-color: #ccc; /* Scrollbar thumb color */
    border-radius: 4px; /* Rounded edges */
  }
  .technology-page-btn{
      background-color:#000 !important;
      color:#fff;
      padding:10px 30px;
      border-radius:50px;
  }
  /*end navbar*/

  /* start banner */
  .banner h1{
    /*color: #000 !important;*/
    font-weight: 700;
    font-size: 44px;
  }
  .banner p{
    text-align: lowercase;
    text-align:justify !important;
  }

  .banner .anchor a{
    background-color: #003366 !important;
    color: #fff !important;
    padding: 10px 30px;
    font-size: 14px;
    font-weight: 700;
    transition: .5s;
    border-radius: 5px;
  }

  .banner .anchor a:hover{
    background-color: #14a800;
    color: #fff;
  }

    .banner {
   position: relative;
   overflow: hidden;
   /*height: 80vh;*/
   display:flex;
   justify-content:center;
   align-items:center;
}
.banner h1{
    color:#fff !important;
    font-size:44px;
}
.banner-video {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: -1; 
}
.banner::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.6); 
   z-index: 0;
}
.work .video-background {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
   z-index: -1;
}

.work .video-background video {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.work .video-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5); /* Black overlay with 50% opacity */
   z-index: 1;
}

.work .container {
   position: relative;
   z-index: 2; /* Ensures the content is above both the video and overlay */
   color: #fff; /* Ensures the text is readable */
}

.work {
   position: relative;
   overflow: hidden;
}
.typed-text, .typed-text-last {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
}

.typed-text {
  animation: typing 2s steps(24) 0s forwards; /* Reduced duration to 2s */
}

.typed-text-last {
  animation: typing 2s steps(10) 2s forwards; /* Reduced duration to 2s and adjusted delay */
  opacity: 0;
}

@keyframes typing {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    width: 100%;
    opacity: 1;
  }
}


/*end banner*/

  /* start perfomance side */
  .perform-side h2{
    color: #fff !important;
    font-weight: 600;
    font-size: 38px;
  }
  .perform-side .box i{
    font-size: 45px !important;
    color: #003366 !important;
    margin: 20px 0;
  }

.perform-side p{
  color: #fff;
  font-weight: 500;
  font-size: 14px;
}
.perform-side .box{
  background-color: #F9F9F9;
  padding: 20px 10px;
  margin: 30px 0;
  text-align: center;
}
.perform-side h6{
  color: #000;
  margin-top: 10px;
}
.perform-side h5{
  color: #000;
  font-weight: 700;
}
.perform-side .box:hover{
    background-color:#003366 !important;
}
.perform-side .box:hover i{
    color:#fff !important;
}
.perform-side .box:hover h6,
.perform-side .box:hover h5{
    color:#fff !important;
}
/* start mission */
.mission .box{
  background-color: #003366 !important;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.mission img{
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.mission .row{
  border-radius: 10px;
}
.mission .box h4{
  color: #fff !important;
  font-size: 18px;
  font-weight: 700;
}
.mission .box h3{
  color: #fff  !important;
  font-size: 38px;
}
.mission .box h2{
    color: #fff !important;
    font-size: 38px;
}
.mission .box p{
  color: #fff;
  text-align: justify;
}

/* start vision */

/* start mission */
.vision img{

  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.vision .box{
  background-color: #003366 !important;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.vision .row{
  border-radius: 10px;
}
.vision  h4{
  color: #fff  !important;
  font-size: 18px;
  font-weight: 700;
}
.vision  h3{
    color: #fff !important;
    font-size: 38px;
}
.vision  h2{
    color: #fff !important;
    font-size: 38px;
}
.vision  p{
  color: #fff;
  text-align: justify;
}
  
/* start work side */
.work{
    margin:30px 0;
    /*border:10px solid green;*/
}
.work h2{
color: #fff !important;

font-size: 55px;
}
/*.work .container{*/
/*  background-image: url(../images/work.webp);*/
/*  background-size: cover;*/
/*  background-repeat: no-repeat;*/
/*  height: 90vh;*/
/*  border-radius: 20px;*/
/*  display: flex;*/
  /* justify-content: center; */
/*  align-items: center;*/
/*}*/
.work p{
  color: #000;
}

.work .inner{
  background-color:#F2F2F2 !important;
  height: 150px;
  padding: 10px;
  border-radius: 20px;
  transition: .5s;
}
.work .inner h4{
  color: #000;
  margin-bottom: 20px;
  font-size: 24px;
}
.work .inner a{
  color: #000;
}
.work .inner a i{
  color: #000;
  margin-left: 20px;
}
.work .inner:hover{
  /*background-color: #fff !important;*/
  transform: translateY(-5px);
}

.work .inner:hover h4,
.work .inner:hover a,
.work .inner:hover i{
  /*color: #108A00 !important;*/
}


/* start why-side */
.why-side .box-1{
  background-color: #F2F7F2;
}
.why-side .box-2{
  background-color: #14A800;
}
.why-side .box-1 h2{
  font-size: 55px;
}

/* start happy side */
.happy .outer{
  background-color: #F9F9F9 !important;
  padding: 20px 10px;
  border-radius: 20px;
}
.happy h2{
  color: #14A800;
}
.happy p{
  color: #676770;
  font-weight: 700;
}
.happy .anchor{
  margin-top: 50px !important;
}
.happy .anchor a{
  background-color: #108A00;
  color: #fff;
  padding: 10px 30px;
  font-size: 16px;
  font-weight: 700;
  transition: .5s;
}

.happy .anchor a:hover{
  background-color: #14a800;
}


















  /* contact page form */
  .contact-banner{
    background-image: url("../images/contact-banner.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 90vh !important;
    background-position:center;
  }
.form-container-main {
  min-height: 100dvh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 0px;
}

.form-container {
  width: 100%;
  background-color: #001925;
  padding: 30px 30px 30px 0px;
  display: flex;
  border-left: 5px solid #108A00;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% 0px), calc(100% - 20px) 100%, 0 100%);
}
@media (max-width: 1200px) {
  .form-container {
    width: 65%;
  }
}
@media (max-width: 1100px) {
  .form-container {
    width: 80%;
  }
}
@media (max-width: 800px) {
  .form-container {
    display: block;
    padding: 30px;
    width: 90%;
  }
  .form-container .form-image {
    height: 300px;
  }
}
.form-container .form-image {
  flex-basis: 50%;
}
.form-container .form-image h1,
.form-container .form-image h5 {
  margin-left: 20px;
  color: white !important;
  font-weight: 800;
}
@media (max-width: 800px) {
  .form-container .form-image h1 {
    margin-left: 0px;
  }
}
.form-container .form-image model-viewer {
  margin-top: -30px;
  height: 100%;
  width: 100%;
}
.form-container .form {
  flex-basis: 50%;
}
.form-container .form input {
  color: #87A4B6;
  width: 100%;
  background-color: #002733;
  border: none;
  outline: none;
  padding: 10px;
  margin-bottom: 20px;
  font-weight: bold;
  transition: all 0.2s ease-in-out;
  border-left: 1px solid transparent;
}
.form-container .form input:focus {
  border-left: 5px solid #108A00;
}
.form-container .form textarea {
  width: 100%;
  padding: 10px;
  border: none;
  outline: none;
  background-color: #013747;
  color: #108A00;
  font-weight: bold;
  resize: none;
  max-height: 150px;
  margin-bottom: 20px;
  border-left: 1px solid transparent;
  transition: all 0.2s ease-in-out;
}
.form-container .form textarea:focus {
  border-left: 5px solid #fff;
}
.form-container .form .button-container {
  display: flex;
  }
.form-container .form .button-container .send-button {
  flex-basis: 70%;
  background: #fff;
  padding: 10px;
  color: #000;
  text-align: center;
  font-weight: bold;
  border: 1px solid transparent;
  transition: all 0.2s ease-in-out;
}
.form-container .form .button-container .send-button:hover {
  background: transparent;
  border: 1px solid #fff;
  color: #000;
}
.form-container .form .button-container .reset-button-container {
  filter: drop-shadow(1px 1px 0px #108A00);
  flex-basis: 30%;
}
.form-container .form .button-container .reset-button-container .reset-button {
  position: relative;
  text-align: center;
  padding: 10px;
  color: #fff;
  font-weight: bold;
  background: #001925;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  transition: all 0.2s ease-in-out;
}
.form-container .form .button-container .reset-button-container .reset-button:hover {
  background: #fff;
  color: #000;
}

/*new banner*/
.new-banner{
  /*    background-image: url("../images/new.jpg") !important;*/
  /*background-size: cover;*/
  /*background-repeat: no-repeat;*/
  height: 95vh;
  position: relative;
   display:flex;
    justify-content:center;
    align-items:center;
}
.new-banner  .bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    
}
.new-banner:before{
    content:"";
    position:absolute;
    inset:0;
    background-color:rgba(0,0,0,0.7);
}
.new-banner .container {
    position: relative;
    z-index: 1;
}


/* start about page */
.about-banner{
   position: relative;
   overflow: hidden;
   height: 95vh;
   display:flex;
   justify-content:center;
   align-items:center;
}
.about-banner::before{
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.3);
}
.about-us p{
  text-align: justify;
}

/* start team side */
.team .content h5{
  color: #000 !important;
  font-weight: 600;
}
.icon_div{
  height: 62px;
  width: 62px;
  position: absolute;
  bottom: 0;
  left: -3.4px;
  z-index: 1;
  border-radius: 0 0 0 50px;
  transition: 0.6s;
}
.blue_div{
  background-color: #008AD2;
  background-color: rgba(0, 138, 210, 1);
}
.green_div{
   background-color: #4AD088;
  background-color: rgba(74, 208, 136, 1);
}
.ev_title{
  right: 0;
  bottom: 0;
  padding-right: 30px;
  background-color: white;
  width: 100%;
  transition: 0.6s;
}
.techImage{
 /* border-radius: 50px; */
  height: 330px;
}
.evCard:hover .green_div{
  height: 100%;
  width: 100%;
  opacity: 60%;
  background-color: rgba(74, 208, 136, 0.5);
  left: 0;
  transform: translate(0 , 3.4px);
  border-radius: 46px !important;
 
}
.evCard:hover .green_div img{
  opacity: 100%;
}

.evCard:hover .blue_div{
  height: 100%;
  width: 100%;
 opacity: 60%;
  background-color: rgba(0, 138, 210, 0.5);
  left: 0;
 transform: translate(0 , 3.4px);
  border-radius: 46px !important;

}

.evCard:hover .blue_div img{
  opacity: 100%;
}

.evCard:hover .ev_title{
  background-color: transparent !important;
  transform: translate(0 , -250%);
  width: 100%;
  z-index: 1;
  text-align: center !important;
  font-size: 24px !important;
  padding: 0;

}
.evCard:hover .ev_title span{
  color: #fff !important;
}






/* start web-banner */
.web-banner{
  background-image: url('../images/web-banner.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  height: 90vh;
  position: relative;
}
.web-banner::before{
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
.content-side h2{
  color: #108A00;
  font-weight: 500;
}
.content-side p{
  text-align: justify;
}

/*perform*/
.perform-side{
    background-image:url("../images/brickk.jpg");
    background-size: cover !important;
    background-repeat: no-repeat !important;
    /*height: 70vh;*/
    position:relative;
}
.perform-side:before{
    content:"";
    position:absolute;
    inset:0;
    background-color:rgba(0,0,0,0.4);
}
.perform-side .container{
        position:relative;
}
/*start career page*/

@media (max-width: 575.98px){ 
    .navbar{
        background-color:#000 !important;
    }
    .perform-side{
        /*height:75vh !important;*/
    }
    .web-banner {
       background-image: url("../images/m.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        height: 95vh;
}
        

/**************************website design*******************************/
.content-side h2{
    color: #108A00;
    font-size: 2.5rem;
    font-weight: 700;
}
.section-bottom h2{
    color: #108A00;
    font-size: 2.5rem;
    font-weight: 700;
}
.section-bottom p{
    text-align:justify;
}





/*social page****************************/



.industry{
        color: white;
    font-size: 12px;
}
.sapotoImage{
    animation: imageTransition 1s linear;
}
.sliderContent{
      animation: fadein 1s linear;
}
@keyframes fadein {
    0%{
        opacity: 0;
    }
    30%{
        opacity: 10%;
    }
    60%{
        opacity: 40%;
    }
    90%{
        opacity: 70%;
    }
    100%{
        opacity: 1;
    }
}
@keyframes imageTransition {
    0% {
        clip-path: inset(0 50% 0 50%);
    }
    100% {
        clip-path: inset(0 0 0 0);
    }
}

    
    
    .form-container .form-image h1, .form-container .form-image h5,
    .form-container .form-image h1, .form-container .form-image h1{
        color:#fff !important;
    }

.form-container .form .button-container .send-button{
    background-color:#fff  !important;
     border: 1px solid #fff  !important;
     color:#000 !important;
}
.form-container .form .button-container .reset-button-container .reset-button{
    border: 1px solid #fff  !important;
     color:#fff !important;

}
.form-container .form .button-container .reset-button-container .reset-button:hover{
     background-color:#fff  !important;
      color:#000 !important;
}
.form-container{
   border-left: 5px solid #fff  !important;
}



  .banner img{
   width:100% !important;
   }

   .perform-side .box:hover i,
   .perform-side .box:hover h6,
   .perform-side .box:hover h5{
   color:#fff;
   }
   .perform-side .box:hover{
   background-color:#108A00;
   }
   .modal-content{
   border:none !important;
   }
   .modal-footer{
   display:flex;
   justify-content:space-between !important;
   }
   .modal-footer a{
   background-color:green;
   color:#fff;
   padding:10px 30px;
   }


.counter {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
}




.work .video-background {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
   z-index: -1;
}

.work .video-background video {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.work .video-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5); /* Black overlay with 50% opacity */
   z-index: 1;
}

.work .container {
   position: relative;
   z-index: 2; /* Ensures the content is above both the video and overlay */
   color: #fff; /* Ensures the text is readable */
}

.work {
   position: relative;
   overflow: hidden;
}
.banner-video {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: -1; 
}
.about-banner{
   position: relative;
   overflow: hidden;
   height: 90vh !important;
   display:flex;
   justify-content:center;
   /*align-items:center;*/
}
.about-banner::before{
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.3);
}
.about-banner .container{
    position:relative;
}
















   @media (max-width: 575.98px){
       .navbar{
           background-color:#000 !important;
       }
    .banner{
        height:35vh !important;
    }
    .banner{
        height:80vh !important;
    }
    .banner p{
        font-size:11px !important;
    }
    .banner h1{
         font-size:20px !important;
    }
    .banner .anchor a{
        background-color: #003366 !important;
    color: #fff !important;
    padding: 10px 20px !important;
    font-size: 10px !important;
    font-weight: 700;
    transition: .5s;
    border-radius: 5px;
    }
    .perform-side {
    height: 150vh !important;
    padding:20px 0 !important;
    }
    .perform-side  p{
        font-size:11px !important;
    }
    .perform-side  h2{
         font-size:20px !important;
    }
    .vision .container{
        height:50vh !important;
    }
    .work  h4{
        font-size:15px !important;
    }
      .work  h2,
      .work  h3{
         font-size:24px !important;
    }
    .work2 .container{
        height:100vh !important;
    }
}

@media (max-width: 575.98px) {
    .navbar{
        background-color:black !important;
    }
    .topbar a {
        font-size:8px;
    }
    .navbar .logo{
        width:100px;
    }
    .banner h1{
        font-size:30px;
    }
    .banner p{
        font-size:14px;
    }
    .banner .anchor{
        margin-bottom:50px !important;
    }
     .perform-side{
         padding-top:0 !important;
     }
    .perform-side h2{
        font-size:27px;
    }
    .mission .box h2 {
        font-size:26px;
    }
    .mission .box h3{
        
         font-size:45px;
    }
    .mission .box h4{
         font-size:17px;
    }
    .mission .box{
        border-radius:0 !important;
    }
    .mission img{
      border-radius:0 !important;
    }
    
    
     .vision .box h2 {
        font-size:25px;
    }
    .vision .box h3{
        
         font-size:45px;
    }
    .vision .box h4{
         font-size:17px;
    }
    .vision .box{
        border-radius:0 !important;
    }
    .vision img{
      border-radius:0 !important;
    }
    .work .container{
        height:140vh;
    }
    .work h2 {
    font-size:44px;
    }
    .work{
        padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    }
    .happy img{
        margin-top:60px;
    }
    .footer-social-icon a {
        margin-right:11px;
    }
    .footer-text p{
        text-align:justify;
    }
    .footer-widget-heading{
        margin-top:30px;
    }
    .footer-widget ul{
        padding:0;
    }
    
    
    .about-banner{
        height:27vh;
    }
    
    .contact-banner {
        height:26vh;
    }
    
    .blog-banner {
        height:33vh;
    }
    .anchor a{
        background-color:#108A00;
        color:#fff;
        padding:10px 30px;
    }
    .navbar-nav{
    margin-left:0 !important;
}
.navbar-collapse{
    padding:20px 0 !important;
}
.tea-box{
    background-color:#fff !important;
    color:#000 !important;
    padding:10px 30px !important;
    border-radius:10px !important;
}
    }





.variousInd {
/*    padding-bottom: 50px;*/
/*}*/
/*.variousInd .img {*/
/*    margin-top: 38px;*/
/*    max-width: 700px;*/
/*}*/
/*.variousInd .img img {*/
/*    width: 60%;*/
/*}*/
/*.variousInd .img ul {*/
/*    position: absolute;*/
/*    top: 5px;*/
/*    left: 310px;*/
/*    list-style: none;*/
/*}*/
/*.variousInd .img ul li {*/
/*    margin-bottom: 16px;*/
/*    padding-left: 30px;*/
/*    transition: .3s;*/
/*}*/
/*.variousInd .img ul li:before {*/
/*    position: absolute;*/
/*    top: calc(50% - 5px);*/
/*    left: 0;*/
/*    width: 10px;*/
/*    height: 10px;*/
/*    transition: .3s;*/
/*    content: '';*/
/*    border-radius: 50%;*/
/*}*/
/*.variousInd .img ul li .icon {*/
/*    width: 30px;*/
/*    height: 30px;*/
/*    transition: .3s;*/
/*    border: 2px solid #909090;*/
/*    margin-right: 15px;*/
/*    background-position: center center;*/
/*    background-repeat: no-repeat;*/
/*    background-size: auto 18px;*/
/*    background-color: var(--white);*/
/*}*/
/*.variousInd .img ul li .text {*/
/*    transition: .3s;*/
/*    background-color: #909090;*/
/*    line-height: 30px;*/
/*    padding: 0 7px;*/
/*}*/
/*.variousInd .img ul li .text:hover{*/
/*    background-color:#003366;*/
/*}*/
/*.variousInd .img ul li.step2, .variousInd .img ul li.step7 {*/
/*    margin-left: 60px;*/
/*}*/
/*.variousInd .img ul li.step3, .variousInd .img ul li.step6 {*/
/*    margin-left: 86px;*/
/*}*/
/*.variousInd .img ul li.step4, .variousInd .img ul li.step5 {*/
/*    margin-left: 100px;*/
/*}*/
/*.variousInd .img ul li.step6 {*/
/*    margin-left: 86px;*/
/*}*/
/*.variousInd .img ul li.step2, .variousInd .img ul li.step7 {*/
/*    margin-left: 60px;*/
/*}*/
/*.variousInd .img ul li {*/
/*    margin-bottom: 16px;*/
/*    padding-left: 30px;*/
/*    transition: .3s;*/
/*}*/