@import "./utils.css";
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
*{

 margin: 0;
 padding: 0;
 text-decoration: none;
 overflow-x: hidden;
 scroll-behavior: smooth;
 font-family: "Quicksand", sans-serif;
}
body{
    background-color: var(--base-color);
}
nav{
 width: 100vw;
 display: flex;
 align-items: center;
 justify-content: space-around;
 padding: 1%;
 font-optical-sizing: auto;
 position: relative;
 z-index: 99;
}
.links_container{
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
a{
 color:var(--hyperlink-color);
}

.logo{
 width: 20%;
}
.logo img{
 width: 8vw;
}
.left{
 width: 30%;
}
.right{
 width: 20%;
}
.right .con{
 font-weight: 700;
}
.btn{
 color: var(--base-color);
 padding: 4%;
 background-color: var(--hyperlink-color);
 border-radius: 100px;
}
nav a:hover{
 transition: 0.2s;
 font-weight: 700;
 color: var(--hyperlink-color);
}
.btn:hover{
 color: var(--base-color);
}
.banner{
 width: 100vw;
 height: 100vh;
 overflow: hidden; /* also helps prevent scroll */
 position: relative;
}
.slider{
    height: 100vh;
    margin-top: -50px;
    z-index: 4;
    overflow: hidden; /* also helps prevent scroll */
    position: relative;
}
.slider .list .item{
    position: absolute;
    inset: 0 0 0 0;
    overflow: hidden;
    opacity: 0;
    transition: .5s;
}
.slider .list .item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.slider .list .item::after{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    background-image: linear-gradient(
        to top, #000 20%, transparent
    );
}
.slider .list .item .content{
    position: absolute;
    left: 10%;
    top: 20%;
    width: 100vw;
    max-width: 80%;
    z-index: 1;
    overflow-y: hidden;
    color: var(--base-color);
}
.slider .list .item .content p:nth-child(1){
    text-transform: uppercase;
    letter-spacing: 10px;
}
.slider .list .item .content h2{
    font-size: 60px;
    margin: 0;
}
.slider .list .item.active{
    opacity: 1;
    z-index: 10;
}
@keyframes showContent {
    to{
        transform: translateY(0);
        filter: blur(0);
        opacity: 1;
    }
}
.slider .list .item.active p:nth-child(1),
.slider .list .item.active h2,
.slider .list .item.active p:nth-child(3){
    transform: translateY(30px);
    filter: blur(20px);
    opacity: 0;
    animation: showContent .5s .7s ease-in-out 1 forwards;
}
.slider .list .item.active h2{
    animation-delay: 1s;
}
.slider .list .item.active p:nth-child(3){
    animation-duration: 1.3s;
}
.arrows button {
    background-color: var(--arrow-btn); /* better contrast */
    border: none;
    font-family: monospace;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.5rem;
    color: var(--base-color);
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 4px 8px var(--arrow-btn);
}
.arrows button:hover {
    background-color: var(--base-color);
    color:var(--hyperlink-color);
}
.arrows #next{
    left:5% !important;
}
.thumbnail{
    position: absolute;
    bottom: 50px;
    z-index: 11;
    display: flex;
    gap: 10px;
    width: 100%;
    height: 250px;
    padding: 0 50px;
    box-sizing: border-box;
    overflow: auto;
    justify-content: center;
}
.thumbnail::-webkit-scrollbar{
    width: 0;
}
.thumbnail .item{
    width: 150px;
    height: 220px;
    filter: brightness(.5);
    transition: .5s;
    flex-shrink: 0;
 overflow-y: hidden;
}
.thumbnail .item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}
.thumbnail .item.active{
    filter: brightness(1.5);
}
.thumbnail .item .content{
    position: absolute;
    inset: auto 10px 10px 10px;
}
@media screen and (max-width: 678px) {
  .slider .list .item .content h2 {
      font-size: 60px;
  }
  .slider .list .item .content {
      max-width: 90%;
      height: 100%;
      overflow: hidden; /* prevent expanding */
  }
  .banner, .slider {
      height: 100vh;
      overflow: hidden;
  }
  .thumbnail{
display: none;
  }
}
.column{
 display: flex;
 flex-direction: column;
}
.column p{
 font-size: 1rem;
 letter-spacing:1px !important;
}
.column .btn{
 width:200px;
 text-align: center;
 padding: 2%;
 margin: 2%;
 background-color: var( --link-btn-color);
 font-weight: 100;
}
.column .btn:hover{
 transition: 0.5s;
 transform: scale(0.9);
 font-weight: 900;
}
.about{
 display: flex;
 align-items: center;
 justify-content: space-around;
}
.abb{
display: block;
 color: var(--base-color);
 background-color: rgb(189, 166, 13);
 padding: 1%;
 border-radius: 20px;
 width: 150px;
 text-align: center;
 margin-bottom: 2vh;

}
 .left{
 display: flex;
 padding: 3%;
 width: 50%;
 justify-content: space-around;
}
.about .left{
 flex-direction: column;

}
 .right{
 width: 50%;
 padding: 1%;}
 .about .right{
 margin-top: 5%;
 }
.right img{
    width: 30vw;
    border-radius: 5px;
}
.heading{
    font-size: 4rem;
}
.blue{
    color: rgb(189, 166, 13) ;
}
.masonry {
  column-count: 4;        /* number of “columns” at desktop */
  column-gap: 1rem;       /* gutter between columns */
  /* prevent horizontal scrollbar: */
  max-width: 100%;
  margin: 0 auto;
}

.masonry-item {
  /* ensures each image takes full column width */
  width: 100%;
  display: inline-block;  /* required for multi-column children */
  margin-bottom: 1rem;    /* vertical gutter */
  break-inside: avoid;    /* keep each image from splitting */
}

/* make it responsive: fewer columns on smaller viewports */
@media (max-width: 1200px) {
  .masonry { column-count: 3; }
}
@media (max-width: 900px) {
  .masonry { column-count: 2; }
}
@media (max-width: 600px) {
  .masonry { column-count: 1; }
}

/* optional: add a subtle hover effect */
.masonry-item:hover {
  transform: scale(1.02);
  transition: transform 0.2s;
}
.placeholder_elements .left{
    width: 20%;
}
.placeholder_elements .right{
    width: 80%;
}
.placeholder_elements .left img{
    width: 40%;
    background-color: rgb(24, 24, 120);
    border-radius: 100px;
    padding: 6%;
}
.placeholders{
    flex-direction: column;
}
nav .left{
    width: 30%;
    padding: 0;
}
nav .right{
    width: 20%;
    padding: 0;
}
.services .left{
    flex-direction:column;
}
.services{
    display:flex;

}
.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

.flex-item {
  display: flex;
  flex-direction: column;
  text-align: center;
  border-radius: 8px;
  flex: 1 1 300px;
  margin: 15px;
  background-color:#a4cff5;
  overflow: hidden;
}

.flex-item .left,
.flex-item .right {
  width: 100%;
  padding: 10px;
}

.flex-item .left img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  border-radius: 8px 8px 0 0;
  object-fit: cover;
}

.flex-item .right p {
  margin: 10px 0;
}

.flex-item .right .btn {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 15px;
  background-color: #171777;
  color: #d7ffd9;
  text-decoration: none;
  border-radius: 20px;
  max-width: 100%;
}

/* Responsive */

  .flex-item {
    width: 100%;
  }
  .flex-item .right .btn{
    display: inline-block;
  margin-top: 10px;
  padding: 10px 15px;
  background-color: #171777;
  color: #d7ffd9;
  text-decoration: none;
  border-radius: 20px;
  max-width: 100%; 
  }
 .slider .items{
    width: 40vw;
    background-color: #171777;
    color: var(--base-color);
    text-align: center;
    margin: 1%;
    z-index: 9999;
    animation: autorun 6s linear infinite;
    animation-delay: calc((6s / 5) * (var(--position) - 1));
  }
  .slider .items .left img{
    width: 10%;
    border-radius: 5000px;
  }
  .slider .items .right{
    padding: 2%;
  }
  .items .right p{
    padding: 2%;
  }
  .slider .items .left{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .slider .items .right{
    width: 100%;
  }
  .slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 40px 0;
  }
  
  /* 2. The moving track: a flex row that scrolls left */
  .slider .lists {
    display: flex;
    gap: 20px;
    /* total width is sum of all items; if you have 5 items at 50vw each: */
    width: calc(6 * 50vw);
        animation: slide-left 30s linear infinite !important;
  }
  
  /* 3. Each item stays in the flow: flex-basis 50vw */
  .slider .items {
    flex: 0 0 50vw;
    background-color: #171777;
    color: var(--base-color);
    text-align: center;
    box-sizing: border-box;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  }
  
  /* 4. Portrait & text styling inside each item */
  .slider .items .left img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
  }
  
  .slider .items .right {
    padding: 0 10px;
  }
  .list{
    columns: 200px;
  }
  .list img{
    width: 100%;
  }
  .slider .items .right .name {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
  }
  
  .slider .items .right .text {
    font-size: 0.95rem;
    line-height: 1.4;
  }
  
  /* 5. Marquee keyframes: move the whole .lists from 0→–50vw */
  @keyframes slide-left {
    0%   { transform: translateX(0); }
    100% { transform: translateX(calc(-250vw)); }
  }
  
  /* 6. Pause on hover (optional) */
  .slider .lists:hover {
    animation-play-state: paused !important;
  }
  
  /* 7. Responsive: show one full item on narrow screens */
  @media (max-width: 600px) {
    .slider .items {
      flex: 0 0 100vw;
    }
    @keyframes slide-left {
      100% { transform: translateX(calc( -100vw)); }
    }
  }

  .reviews{
    margin-top: 15vh;
  }
  .reviews .abb{
    width: 10rem;
    margin-left: 5rem;
  }
  .reviews .left{
    flex-direction: column;
  }
  .flex{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .flex .right{
    display: flex;
    align-items: center;
    justify-content: end;
  }
  .stats-container {
    max-width: 100vw;
    overflow-x: hidden;        /* extra safeguard */
    padding: 40px 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
  }
  
  /* 4) Allow items to shrink so they don’t force a scrollbar */
  .stat {
    overflow: hidden;

    flex: 1 1 150px;           /* grow 1, shrink 1, base 150px */
    text-align: center;
    margin: 10px;
    background: var(--link-btn-color);
    padding: 20px 30px;
    color: var(--base-color);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  
  /* 5) Ensure odometer text never wraps or overflows */
  .odometer {
    display: inline-block;
    white-space: nowrap;
    font-size: 2.5em;
  }
  
  /* 6) Hide any browser scrollbars you still see */
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  @media (max-width: 480px) {
    .stat {
      padding: 16px;
      flex: 1 1 140px;       /* smaller base width */
    }
  }
  
  /* 8) Optional: adjust gap and padding on medium screens */
  @media (min-width: 481px) and (max-width: 768px) {
    .stats-container {
      gap: 15px;
      padding: 30px 0;
    }
    .stat {
      padding: 18px;
      flex: 1 1 180px;
    }
    .contact .heading{
      text-align: center;
    }
    .slider{
      animation: none;
    }
   
  }
  html, body {
    scroll-behavior: auto !important;
}
.star{
  width: 50% !important;
height: auto !important;
display: block;
  border-radius: 0px !important;
}
.dark-mode .flex-item{
  background-color: #000;
}