/*Rest CSS*/
.btn{border:none; outline: none;}

:root{
      --brand:#1b62ff;
      --brand-2:#0a2a66;
    }
    .icon-circle{
      width:3rem; height:3rem; display:grid; place-items:center; border-radius:50%;
      background:rgba(27,98,255,.1); color:var(--brand);
    }
    .card{border:none; box-shadow:0 8px 24px rgba(10,42,102,.06)}
    .section-title .eyebrow{letter-spacing:.08em; text-transform:uppercase; color:#6c757d}
    .kpi{
      border-radius:1rem; padding:1.25rem; text-align:center; background:#f8f9fc;
    }
    .list-check li{margin:.35rem 0}
    .list-check i{color:var(--brand)}
    .timeline{position:relative; padding-left:1.5rem}
    .timeline::before{content:""; position:absolute; left:.5rem; top:.25rem; bottom:2.20rem; width:2px; background:#e5e7eb}
    .timeline .step{position:relative; margin-bottom:1rem}
    .timeline .step .dot{position:absolute; left:-1.30rem; top:.25rem; width:.75rem; height:.75rem; border-radius:50%; background:var(--brand)}
    footer{background:#0b1f4a; color:#b8c3ff}
    .floating-wa{
      position:fixed; right:16px; bottom:16px; z-index:9999;
    }
    .floating-wa a{display:inline-flex; align-items:center; gap:.5rem; padding:.75rem 1rem; border-radius:999px; background:#25D366; color:#fff; text-decoration:none; box-shadow:0 10px 24px rgba(0,0,0,.2)}



@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400;700;900&display=swap');

@font-face {
  font-family: 'Montserrat', sans-serif;
  /*src: url(../fonts/Montserrat/Montserrat-ExtraLight.TTF);*/
}


      html,
      body {
        height: 100%;
      }
      body {
        display: flex;
        flex-direction: column;
      }
      .container {
        flex: 1;
      }

      .nav-link {
        color: #fff !important;
      }
      footer .copyright{
        background: #212529;
        color: white;
        padding: 20px 0;
      }

body{font-family:Arial, Helvetica, sans-serif; font-size:16px; background:#fff; color:#333;}
.section{width:100%; display:inline-block; float:left;}
.clr{clear:both;}
.transition-timer,
.transition-timer:hover{-webkit-transition: .3s linear; -moz-transition: .3s linear; transition: .3s linear;}
/**/
.diamond-grid {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 0rem; /* Reduced gap */
  padding: 0;
}
.diamond-grid:nth-child(even) {
  align-items: end;
}

.diamond-row {
  display: flex;
  gap: 8rem;
  justify-content: center;
}

.diamond {
  width: 175px;
  height: 175px;
  background-color: #005eb8;
  transform: rotate(45deg);
  overflow: hidden;
  border-radius: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.diamond:hover {
  transform: rotate(45deg) scale(1.05);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.diamond img {
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  transform: rotate(-45deg) scale(1.35);
  transition: transform 0.4s ease;
}

.diamond:hover img {
  transform: rotate(-45deg) scale(1.45);
}

.diamond-overlay {
  position: absolute;
  transform: rotate(-45deg)  scale(0,0);
  color: white;
  font-size: 1rem;
  text-align: center;
  transition: opacity 0.3s ease;
  z-index: 2;
  background: rgba(0, 0, 0, 0.75);
  padding: 10px;
  border-radius: 20px;
  transition: transform 0.3s ease;
}

.diamond:hover .diamond-overlay {
  transform: rotate(-45deg) scale(1,1);
}

@media (max-width: 768px) {
  .diamond-grid {
    padding: 0 0 50px;
}
  .diamond {
    width: 120px;
    height: 120px;
  }
}

/**/
/*****************index********************/

.banner-anchor{display: inline-block; position: relative;}
.banner-anchor span {
    position: absolute;
    height: 70%;
    aspect-ratio: 1 / 1;
    background-color: rgba(0, 0, 0, 0.75);
    color: #ffffff;
    font-size: 2rem;
    bottom: -50%;
    left: 50%;
    right: -50%;
    top: 50%;
    justify-content: center;
    align-items: center;
    transform: translate(-50%, -50%) scale(0);
    text-align: center;
    border-radius: 50%;
    display: flex;
    transition: transform 0.3s ease-in-out;
    pointer-events: none;
}

.banner-anchor:hover span {
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

.square-box {
  aspect-ratio: 1 / 1; /* Makes height equal to width */
}

.hero-section {
  background-color: #fff; /* white background */
  background-image: url('../img/props-blue.png'), url('../img/props-grey-20.png'), url('../img/props-grey-30.png');
  background-position: 109% -16%, center center, 104% 100%;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 20%, 15%, 18%;
  width: 100%;
  position: relative;
  animation: animateBanner 10s ease-in-out infinite alternate;
}

@keyframes animateBanner {
  0% {
    background-position: 109% -35%, -20% center, 90% 110%;
    background-size: 20%, 26%, 10%;
  }
  100% {
    background-position: 100% 10%, 0% 50%, 85% 95%;
    background-size: 24%, 30%, 12%;
  }
}

.cursor-dot {
  position: fixed;
  width: 50px;
  height: 50px;
  background: transparent;
  border: 1px solid #1a7bc0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: background 0.2s ease, transform 0.2s ease;
}

.cursor-dot.link-hover {
  background: #575b60;
  transform: translate(-50%, -50%) scale(0.25);
}

.list-inside li{
    position: relative;
    padding-left: 25px;
}
.list-inside li i.fa-check-circle{
  position: absolute;
    left: 0;
    top: 2px;
}
.w-120{width: 120px;}
.w-200{width: 200px;}

a.text-decoration-none:hover {
  text-decoration: none;
}
.card-service {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 2rem;
  transition: all 0.4s ease;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.card-service:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* Icon animation */
.card-service img {
  width: 80px;
  transition: transform 0.5s ease;
}

.card-service:hover img {
  transform: scale(1.1) translateY(-5px);
}

/* Title animation */
.card-service h5 {
  margin-top: 1rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: #222;
  transition: color 0.4s ease;
}

.card-service:hover h5 {
  color: #007bff;
}

.bd-footer a{color: #212529; text-decoration: none;}

/* a.svg-hover:hover svg path {
  fill: #0d6efd;
}
a.svg-hover:hover span {
  color: #0d6efd;
} */

/**Our team start**/
.our-team {
  background-color: #0c5db9;
  background-image: url(../img/props-white-20.png), url(../img/props-white-20.png), url(../img/props-white-30.png);
  background-position: 109% -35%, -20% center, 90% 110%;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 20%, 26%, 10%;
  animation: animateBG 10s ease-in-out infinite alternate;
}

@keyframes animateBG {
  0% {
    background-position: 109% -35%, -20% center, 90% 110%;
    background-size: 20%, 26%, 10%;
  }
  100% {
    background-position: 0% 50%, 85% 95%, 100% 10%;
    background-size: 12%, 24%, 30%;
  }
}
.main{
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 400px;
   }
   .profile-card{
     position: relative;
     font-family: sans-serif;
     width: 100%;
     max-width: 265px;
     height: 275px;
     background: #fff;
     padding: 30px;
     border-radius: 10px;
     box-shadow: 0 0 22px #3336;
     margin: 90px 25px 0px;
   }
   .profile-card .img{
     position: relative;
     width: 100%;
     height: 100%;
     z-index: 99;
   }
   .profile-card .img{
     transform: translateY(-90px);
   }
   .img img{
     width: 100%;
     border-radius: 50%;
     box-shadow: 0 0 22px #3336;
   }
   .profile-card img{
     border-radius: 10px;
   }
   .caption{
     text-align: center;
     transform: translateY(-80px);
     opacity: 0;
     transition: .6s;
   }
   .profile-card .caption{
     opacity: 1;
   }
   .caption h3{
     font-size: 21px;
     font-family: sans-serif;
   }
   .caption p{
     font-size: 15px;
     color: #0c52a1;
     font-family: sans-serif;
     margin: 2px 0 9px 0;
   }

   /**Our team ends**/

   /*About*/
.about-banner{position: relative;}
.about-banner .banner-text {position: absolute; left: 0; top: 0; right: 0; bottom: 0;}
.about-banner .banner-text h1{
color: #222; text-shadow:
  0 2px 4px rgba(0, 0, 0, 0.3),
  0 4px 6px rgba(0, 0, 0, 0.2),
  0 6px 12px rgba(0, 0, 0, 0.1),
  0 0 10px rgba(0, 153, 255, 0.5),
  0 0 20px rgba(0, 153, 255, 0.4);
}
  .about-banner .drop {
   background: rgba(255,255,255,0.4);
   border-radius: 10px;
   border: 1px solid rgba(255,255,255,0.2);
   position: absolute;
   backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
   display: block;
   margin: 0 auto;
}


.about-banner .drop1 {
   width: 47%;
   height: 120px;
   top: 170px;
   left: 0;
   right: 0;
   z-index: 2;
   backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: flex;
    justify-content: center;
    align-items: center;
}

.about-banner .drop2 {
    width: 40px;
    height: 40px;
    top: -30px;
    left: -80%;
    right: 0;
    z-index: 4;
}

.about-banner .drop3 {
    width: 60px;
    height: 60px;
    top: 90px;
    right: 30px;
    z-index: 3;
}

.about-banner .drop4 {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   top: -30px;
   right: 20px;
}

/*Animate*/
/* Animation Keyframes */
@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 0.7; }
}

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

/* Apply animations */
.about-banner .drop {
  animation: float 5s ease-in-out infinite;
}

.about-banner .drop1 {
  animation: pulse 6s ease-in-out infinite;
}

.about-banner .drop2 {
  animation: float 4s ease-in-out infinite, rotate 12s linear infinite;
}

.about-banner .drop3 {
  animation: float 6s ease-in-out infinite, rotate 10s linear infinite;
}

.about-banner .drop4 {
  animation: pulse 5s ease-in-out infinite, float 8s ease-in-out infinite;
}

.about-section ul {
  padding-left: 1rem;
}

.about-section li {
  margin-bottom: 0.3rem;
}

.gallery-item a{display: flex;}
.gallery-item a img{width: 100%;}



.gallery-tabs { display: flex; flex-wrap: wrap; justify-content: center; margin: 0 5px; gap: 5px; }
.gallery-tabs button { border: none; padding: 10px 20px; border-radius: 25px; font-weight: bold; transition: all 0.3s ease; }
.gallery-tabs button.active, .gallery-tabs button:hover { background-color: #000; color: #fff; }