@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;800&display=swap');
:root {
    --accent: #6EE7B7;
    --dark-accent: #059669;
    --accent-bright:#F3D9A4;
    --dark-text: #09090B;
    --white-text: #fff;
    --light-text: #F4E9E9;
    --dark-background: #09090B;
    --gray-background: #D9D9D9;
    --white-background: #fff;
    --accent-background: #FBF9F6;
  }
  /* to be deleted tbd end*/
/* reset all default margin and padding */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul,a{
    list-style: none; 
}
/* Set up some basic styles */
html{
  overflow-x: hidden;
  scroll-behavior: smooth;
}
body {
  line-height: 1.4;              
  width: 100vw;
  overflow-x: hidden;
  background-color: var(--dark-background);
}
/* Style the scrollbar itself */
::-webkit-scrollbar {
  width: 15px;  /* Width of the vertical scrollbar */
  height: 12px; /* Height of the horizontal scrollbar */
}

/* Style the thumb (the draggable part of the scrollbar) */
::-webkit-scrollbar-thumb {
  background-color: var(--accent); /* Thumb color */
  border-radius: 10px;       /* Rounded corners for the thumb */
  border: 3px solid #f1f1f1; /* Border around the thumb */
  transition: all 0.4s ease;
}

/* Style the track (the area the thumb slides within) */
::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* Track color */
  border-radius: 10px;       /* Rounded corners for the track */
}

/* Optional: Style the hover effect on the thumb */
::-webkit-scrollbar-thumb:hover {
  background-color: #d19458; /* Change color when the thumb is hovered */
}
.error-message{
  color: red;
}
.alert{
  position: fixed;
  bottom:30px;
  right:30px;
  transition: opacity 0.5s ease-in-out;
  animation: fadeOut 5s forwards;
  color: var(--white-text);
  padding: 20px;
  border-radius: 20px;
  z-index: 40;
}
.alert-success{
  background-color: #4CAF50;
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
.image-container img{
    width: 100%;
    height: 100%;
}
.white-color{
  color: var(--white-text) !important;
}
.dark-color{
  color: var(--white-text) !important;
}
h1{
    color: var(--white-text);
    font-size: 90px;
    font-family: 'Inter',sans-serif;
    color: var(--white-text);
    font-weight: 500;
    line-height: 1;
    text-align: left;
    margin-bottom: 30px;
  }
h2{
    font-size: 72px;
    font-family: 'Albert Sans',sans-serif;
    color: var(--white-text);
    font-weight: 400;
}
h3{
    font-size: 32px;
    font-family: 'Inter',sans-serif;
    color: var(--white-text);
    font-weight: 600;
    line-height: 1.1;
}
h4{
    font-size: 64px;
    font-family: 'Inter',sans-serif;
    color: var(--white-text);
    font-weight: 400;
}
h5{
    font-size: 32px;
    color: var(--white-text);
    font-weight: 500;
}
p{
    font-family: 'Albert Sans',sans-serif;
    color: var(--white-text);
    font-weight: 200;
}
a{
    font-weight: 400;
    color: var(--white-text);
}

a, span{
    font-size: 16px;
    font-family: 'Albert Sans',sans-serif;
    text-decoration: none;
}

.width-100{
  width: 100%;
}
.xl5-text{
    font-size: 90px;
}
.xl4-text{
    font-size: 64px;
}
.xl3-text{
    font-size: 42px;
}
.xl2-text{
    font-size: 36px;
}
.xl-text{
    font-size: 28px;
}
.l-text{
    font-size: 24px;
}
.m-text{
    font-size: 20px;
}
.s-text{
    font-size: 16px;
}
.xs-text{
    font-size: 10px;
}
.footer-text{
  font-size: 16px;
}
.gradient-text{
  background: linear-gradient(to right, #ffffff, #757575);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.3;
  font-weight: bold;
}
.accent-text{
  color: var(--accent);
}
.bg-accent{
  background-color: var(--accent-background);
}
.max-1400{
  max-width: 1400px !important;
  margin-inline:auto;
}
.padding-container{
    padding: 200px 10% 100px 10%;
    margin-inline:auto;
  }
  .container{
    max-width: 1900px;
    padding-inline: 10%;
    padding-bottom: 100px;
    margin-inline:auto ;
  }
  header{
    width: 100vw;
  }
  header .btn{
    min-width: unset;
  }
.header-container{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
    background-color: rgba(0, 0, 0, 0.8);
    height: 120px;
    width: 100vw;
    z-index: 3;
    background-color: transparent;
  }
  .absolute{
    position: absolute;
  }
.header-container .outlined-btn{
  padding: 5px 30px;

}
.header-container .outlined-btn .btn-label{
  font-size: 20px;
  font-weight: 700;
}
nav.menu{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}      
nav.menu ul{
    display: flex;
    gap: 40px;
}
.home nav.menu ul a{
  color: var(--white-text);
}
nav.menu ul a{
    color: var(--white-text);
    transition: all 0.4s ease;
}
nav.menu ul a:hover{
    font-size: 18px;
}
/* nav mobile start */
/* Hamburger button */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: none;
  position: absolute;
  right: 5%;
  z-index: 3;

}

.bar {
  width: 100%;
  height: 2px;
  background-color: var(--white-text);
  transition: all 0.3s ease;
}

  /* lang menu start */
  .lang-menu{
    position: relative;
    height: fit-content;
    width: 100px;
    height: fit-content;
  
  }
  .active-lang:hover{
    cursor: pointer;
  }
  .lang-options{
    position: absolute;
    display: flex;
    bottom: -100px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    width: 100px;
    background-color: #fff;
    border-radius: 20px;
    z-index: 2;
    max-height: 0;
    overflow: hidden;
  }
  .lang-options.active{
    padding: 10px;
    max-height: fit-content;
  }
  
  /* lang menu end */  
/* mobile menu start */
  .mobile-menu-cointainer{
    width: 100vw;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
  }
  .mobile-menu{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 60px;
    padding: 10% 5% 0 5%;
    width: 100vw;
    height: 100vh;
    background-color: var(--dark-accent);
    position: absolute;
    right: -100%;
    top: 0;
    z-index: 10;
    transition: right 0.4s ease-in-out;
    display: none;
    position: relative;
  }
  .mobile-menu::before{
    content: '';
    width: 100%;
    height: 100%;
    background:radial-gradient( var(--dark-accent), #000 );
    opacity: 0.5;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;

  }
  .mobile-menu-x-button{
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 32px;
    color: var(--white-text);
  }
  .mobile-menu .logo-container{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
  }
  .mobile-menu .logo-container img{
    width: 200px;
  }
  .mobile-menu ul{
    display: flex;
    flex-direction: column;
    gap: 40px;
    position: relative;
    z-index: 1;
  }
  .mobile-menu ul a{
    color: var(--white-text);
    font-size: 32px;
  }

  /* Active state for side menu */
  .mobile-menu.open {
    right: 0;
    position: fixed;
  }

  /* Hamburger icon turned to 'X' */
  .hamburger.active .bar:nth-child(1) {
    transform: rotate(45deg);
    position: relative;
    top: 8px;
  }

  .hamburger.active .bar:nth-child(2) {
    opacity: 0;
  }

  .hamburger.active .bar:nth-child(3) {
    transform: rotate(-45deg);
    position: relative;
    top: -8px;
  }
/* 
  /* lang menu start */
  .lang-menu{
    position: relative;
    height: fit-content;
    width: 100px;
    height: fit-content;
  
  }
  .active-lang:hover{
    cursor: pointer;
  }
  .lang-options{
    position: absolute;
    display: flex;
    bottom: -100px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    width: 100px;
    background-color: #fff;
    border-radius: 20px;
    z-index: 2;
    max-height: 0;
    overflow: hidden;
  }
  .lang-options.active{
    padding: 10px;
    max-height: fit-content;
  }
  
  /* mobile menu end*/
  
.aspect-1{
  aspect-ratio: 1/1;
}
/* nav mobile end */
.btn{
  min-width: 200px;
  overflow: hidden;
}
.outlined-btn{
  text-align: center;
  background-color: transparent;
  border: 1px solid var(--accent);
  color: var(--white-text);
  border-radius: 50px;
  padding: 10px 60px;
  position: relative;
  overflow: hidden;

}
.white-btn{
  border-color: var(--white-text);
  color: var(--white-text);
}
.white-btn:hover span{
  color: var(--white-text) !important;
}
.green-text{
  color: var(--dark-accent);
}
.green-btn{
 position: relative;
 background-color: var(--dark-accent);
 font-size: 24px;
 font-weight: bold;
 text-align: center;
 color: var(--white-text);
 border-radius: 50px;
 width: 250px;
 padding: 10px 0;
 color: var(--white-text);
 overflow: hidden;
}
.green-btn .btn-label{
    font-size: 24px;
}
.green-btn:hover .btn-label{
    color: var(--dark-text);
}
.black-btn{
  text-align: center;
  background-color: var(--white-text);
  color: var(--white-text);
  padding: 10px 20px;
  position: relative;
  overflow: hidden;

}
.outlined-btn:hover .btn-label {
  color: var(--dark-text);
}

.btn:hover .btn-bg {
  transform: translate(-50%, -50%) scale(1);
}
.btn-label{
  position: relative;
  font-weight: bold;
  transition: color 0.3s ease-out;
  z-index: 1;
}
.outlined-btn .btn-label{
    font-size: 32px;
    font-weight: 500;
    color:var(--accent);
}
.outlined-btn:hover .btn-bg {
  transform: translate(-50%, -50%) scale(1);
}
/* for fill animation */ 
.btn-bg{
  position: absolute;
  top: 0;
  left: 0;
  min-width: 225%;
  min-height: 225%;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color:  var(--white-text);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.5s ease-out;
}
.black-btn .btn-bg{
  background-color: var(--accent-background);
  border: 1px solid var(--white-text);
}
.btn-small{
    padding: 10px 45px;
    background-color: var(--white-text);
    color: white;
    border-radius: 25px;
    transition: all 0.4s ease;
}
.btn-small:hover{
    transform: scale(1.1);
}
.homepage .divider-line{
    margin-inline:auto;
    width: 80%;
    height: 1px;
    background: linear-gradient(to right, var(--dark-background), var(--white-background), var(--dark-background)); /* Creates the gradient */
}
.hero-section{
    position: relative;
  height: 130vh;
  background: #09090B;
  
  display: flex;
  align-items: flex-start;
}
.hero-section h1{
  width: 90%;
  text-align: center;
}
.hero-section p{
  text-align: left;
  color: var(--light-text);
}
.hero-section .planet{
    position: absolute;
    width: 125px;
    height: 125px;
    border-radius: 50%;
    box-shadow: 0px 8px 16px rgba(4, 208, 28, 0.3); /* Horizontal, Vertical, Blur, Color */

}

.planet-1{
    top: 500px;
    left: 150px;
}
.planet-2{
    top: 200px;
    right: 100px;
}
.hero-section .light{
    width: 125px;
    height: 125px;
}
.light-1{
    top: 200px;
    left: 350px;
}
.light-2{
    top: 350px;
    right: 350px;
}
/* .hero-section .btn{
  text-align: center;
  background-color: transparent;
  border: 1px solid black;
  color: var(--white-text);
  border-radius: 50px;
  width: 250px;
  padding: 10px 0;
} */
section{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  /* overflow: hidden; */
}
.only-mobile{
 display: none; 
}
iframe body{
  display: flex;
  justify-content: center;
  align-items: center;
}
.black-btn:hover{
    cursor: pointer;
    background-color: transparent;
    border: 1px solid var(--white-text);
    color: var(--white-text);
  }
.bg-gray{
    background-color: #D9D9D9;
}
.p-10{
  padding: 10px;
}
.p-20{
  padding: 20px;
}
.p-50{
  padding: 50px;
}
.mb-100{
  margin-bottom: 100px;
}
.h-100{
  height: 100%;
}
.h-50{
  height: 100%;
}
.w-100{
  width: 100%;
}
.w-50{
  width: 100%;
}
.flex{ /* this will be column in mobile */
    display: flex;
    gap: 20px;
}
.flex-row{ /* this will always be row  */
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
}
.flex-column{ 
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.justify-center{
  justify-content: center;
}
.space-evenly{
  justify-content: space-between;
}
.space-between{
  justify-content: space-between;
}
.align-start{
  align-items: flex-start;
}
.align-center{
  align-items: center;
}
.text-left{
  text-align: left;
}
.text-center{
  text-align: center;
}
.text-right{
  text-align: right;
}
.gap-10{
    gap: 10px;
}
.gap-20{
    gap: 20px;
}
.gap-40{
    gap: 40px;
}
.gap-100{
    gap: 40px;
}
/* lights start */

.light{
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent), var(--dark-background)); /* Radial gradient colors */
  filter: blur(100px);

  left: 50%;
  transform: translateX(-50%);
}

.outside-light{
  bottom: -75vw;

  width: 80vw;
  height: 80vw;

  background: radial-gradient(circle, #04743e, var(--dark-background)); /* Radial gradient colors */
}
/* lights end */
/****************************** General End ******************************/

/****************************** Homepage Start ******************************/
/* hero section start */
  .hero-section .slide-text-container{
    position: relative;
    width: 100%;
    height: 100vh;
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    z-index: 1;
    padding-bottom: 0;

  }
  .hero-section .background-absolute .light{
    width: 80vw;
    height: 20vh;
    background-color: var(--accent);
    filter: blur(200px);
  }
  .hero-section .background-absolute{
    position: absolute;
    width: 70vw;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
    
  }
  .hero-section .background-absolute .eclips1{
    background: linear-gradient(to top, #09090B 60%, #09090B);

  }
  
  .hero-section .slide-text-container p{
    font-weight: 200;
    margin-bottom: 200px;
  }
  html[lang="ru"] .hero-section .slide-text-container p{
    text-align: center;
  }
  section{
    width: 100vw;
  }

  /* stats start */
    .stats-section{
      padding: 50px 5%;
      width: 100vw;
      direction: ltr;
    }
    .stats-container{
      max-width: 1400px;
      width: 60%;
      display: grid;
      grid-template-columns: repeat(2, 1fr); /* 2 items per row */
      justify-items: center;
      align-content: center;
      gap: 20px; /* Space between items */
    }
    .stat{
      justify-content: flex-start;
      align-items: center;
      width: 250px;
    }
  /* stats end*/

  /* services list section start */
    .services-list{
      padding: 100px 10% 200px;
    }
    .services-list h4{
      min-height: 45px ;
    }
    .services-list .intro-text{
      text-align: left;
    }
    .service-list-button:hover{
      cursor: pointer;
    }
    .services-list .service-content{
      max-height: 0;
      overflow: hidden;
      transition: all 1s ease;
    }
    .services-list .service-content.closed{
      max-height: 0;
    }
    .services-list .service-content.opened{
      max-height: 180px;
      padding: 50px;
    
    }
    .services-list .service-content p{
      max-width: 100%;
    } 
    .services-list .intro-text{
      width: 100%;
    }
    .service{
      height: fit-content;
      transition: all 0.4s ease;
    }
    .services-list .outlined-btn{
      margin-top: 100px;
    }
    .services-list .image-container{
      
      width: 400px;
      height: 400px;
      display: flex;
      justify-content: center;
      align-items: center;

    }
    .services-list .spline-container{
      width: 100%;
      height: 100%;
    }
    .services-list hr{
      border: none;
      border-top: 2px solid var(--accent); 
      width:100%;
    }
  /* services list section end */
  /* text image section start */
    .homepage .text-image .container  {
      width: 90%;
      padding: 0;
    }
    .homepage .text-image .content-container{
      max-width: 800px;
    }
    .homepage .text-image .image-container{
      width: 400px;
      height: 400px;
    }
    .homepage .text-image .btn{
      max-width: fit-content;
    }
  /* text image section end */
  /* projects section start */
    .projects-container .image-container{
      width: 50%;
    }
   
    .projects-container a:hover{
      font-size: 28px;
      color: var(--accent);
      transition: all 0.4s ease;
    }
    .projects-container .image-container img{
      border-radius: 50px;
    }
    .projects-container .text-box{
      border: 1px solid var(--white-text);
      width: 50%;
      border-radius: 50px;
      position: relative;
      aspect-ratio: 4 / 3;  
    }
    .projects-container h3{
      font-size: 48px;
    }
    .projects-container p{
      font-size: 28px;
    }
    .projects-container a{
      font-size: 24px;
  }
    .projects-container .project:nth-child(2){
      flex-direction: row-reverse;
    }

    .projects-container .text-box p{
      font-weight: 400;
    }

    .projects-container .light{
      position: absolute;
      width: 175px;
      height: 175px;
      border-radius: 50%;
      background: radial-gradient(circle, var(--accent), var(--dark-background)); /* Radial gradient colors */
      filter: blur(90px);
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
  /* projects section end */
  /* hover light section start */
    .reviews{
      z-index: 2;
      width: 100vw;
      height: fit-content;
    }
    .reviews .swiper-container {
      width: 100%;
      padding: 20px 0;
      max-width: 1400px;

    }
    .reviews .swiper-slide {
      display: flex;
      justify-content: center;
    }
    .reviews .card {

      background-color: rgba(46, 46, 46, 0.85);
      width: 500px;
      height: 300px;
      padding: 40px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border-radius: 20px;
    }
    .reviews .card-content {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
    }
    .reviews .image-placeholder {
      width: 50px;
      /* height: 50px; */
      /* background-color: gray; */
      border-radius: 50%;
    }
    .reviews .name {
      font-size: 16px;
      font-weight: bold;
      color: #aaa;
    }
    .reviews .year {
      font-size: 14px;
      color: gray;
    }
    .reviews .text {
      margin-top: 10px;
      font-size: 14px;
      color: #eee;
      width: 100%;
      height: 280px;
    }
    .reviews .text p{
      color: #aaa;
    }
    .hover-light-section{
      height: 600px;
      margin-inline:auto;
    } 
    .hover-light-section h2{
      z-index: 1;
      display: none;
    }

    .hover-light {
      position: absolute;
      width: 800px; 
      height: 800px;
      background: #28A580;
      filter: blur(120px);
      border-radius: 50%;
      pointer-events: none; 
      transform: translate(-50%, -50%);
      transition: background-color 0.3s;
      opacity: 0.8;
    }
    .banner{
      position: absolute;
      top: 0;
      left: 0;
      width: 120vw;
      height: 600px;
      display: flex;
      flex-wrap: wrap;
      overflow: hidden;
    }

    .banner .block{
      position: relative;
      width: 5vw;
      height: 5vw;
      z-index: 0;
      animation: animate 0.4s ease-in-out forwards;
      z-index: 1;
      margin-left: 3px;
      margin-bottom: 3px;
    }
    .banner .block:nth-child(even){
      animation: animate 0.8s ease-in-out forwards;
    }
    .banner .block:nth-child(7n+3){
      animation: animate 1.2s ease-in-out forwards;

    }
    .banner .block:nth-child(7n+7){
      animation: animate 1.6s ease-in-out forwards;
    }

    @keyframes animate {
      0%{
          opacity: 0;
          /* transform:scale(0) translateY(1000px); */
          top: 100px;
      }
      50%{
          opacity: 1;
          background: black;
          background-position: center;
          background-attachment: fixed;
          background-size: cover;
      }
      100%{
          opacity: 1;
          top: 0;
          background: black;
          background-position: center;
          background-attachment: fixed;
          background-size: cover;
          
      }
    }
  /* hover light section end */
  /* small parallax start */
    .small-parallax-section{
      padding: 0 5%;
      position: relative;
      z-index: 2;
      height: 160px;
      background-image: url('/storage/images/homepage/small-parallax.png');
      background-attachment: fixed;
      background-size: cover;
      background-position: center;
    }
  /* small parallax ebd */
  /* colored globe start */
    .colored-globe{
      padding: 0 100px 100px 100px ;
      position: relative;
      min-height: 800px;
      background-color: var(--dark-text);
      overflow: hidden;
      
      display: flex;
      align-items: center;
    }
    .colored-globe .background{
      height: 400px;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      background-color: var(--dark-text);
      top: -40px;

      filter: blur(30px);
    }
    .colored-globe iframe{
      overflow: hidden;
      position: absolute;
      height: 1280px;
      width: 1280px;
      top: -400px;
      right: 0;
      z-index: 0;
      transform: scale(0.8);
    }
    .colored-globe span{
      position: relative;
      font-size: 96px;
      font-weight: 600;
      color:#fff;
      z-index: 2;
    }
    .colored-globe a{
      border:5px solid var(--accent);
      border-radius: 50px;
      padding: 10px 60px;
      font-size: 40px;
    }
  /* colored globe end */
/****************************** Homepage End ******************************/

/****************************** About Us Start ******************************/
  /* header start*/
  .about-main-container .header{
    padding: 200px 100px 100px 100px;
    position: relative;
    z-index: 2;
    background: var(--dark-background);
    min-height: 600px;
    height: 100vh;

  }
  .about-main-container .header iframe{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 1;
    opacity: 0.4;
  }
  
/* this class for covering the ifram so the use can scroll freely */
.about-main-container .header .iframe-cover{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 2;

}
  .about-main-container .header .flex-column {
    position: relative;
    z-index: 3;
  }
  .about-main-container .header h1 {
    font-size: 72px;
  }
  .about-main-container .header p {
    font-weight: 500;
    max-width: 900px;
    font-size: 28px;
  }

  /* header end*/
  /*colored ball start  */
  .colored-ball{
    padding: 200px 100px 100px 100px;
  }
   .light.outside-top-light{
    z-index: 0;
    bottom: unset;
    top: -18vw;
    filter: blur(40px);
    height: 20vw;
    background: radial-gradient(circle, var(--accent), var(--dark-background));
  }
  .colored-ball .image-continare{
    overflow: hidden;
    height: 600px;
    width: 600px;
    display: flex;
    justify-content: center;
    align-items: center;

    
  }
  
  .colored-ball .colored-ball-text{
    max-width: 900px;
    width: 50%;
  }
  .colored-ball .colored-ball-text .gradient-text{
    margin-bottom: 20px;
  }

  /*colored ball end  */
  /* international start */
  .international-section{
    padding: 100px;
  }

  .international-section .image-container{
    min-height: 400px;
    max-width: 600px;
  }
  .international-section .text-container{
    max-width: 600px;
  }
  .international-section .globe{
    width: 100%;
    height: 600px;
  }
  .international-section .stars{
    width: 100%;
    height: 400px;
    position: relative;
  }
  .international-section .spline-container{
    width: 100%;
    height: 100%;
  }
  .international-section .image-container::before{
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:transparent;
  }

  
  /* international end */
/****************************** About Us End ******************************/

/****************************** Services Start /******************************/

/* header start*/
.services-main-container .header{
  padding: 200px 100px 100px 100px;
  position: relative;
  z-index: 2;
  background: var(--dark-background);
  min-height: 600px;
  height: 100vh;

}
.services-main-container .header iframe{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 1;
  opacity: 0.4;
}

/* this class for covering the ifram so the use can scroll freely */
.services-main-container .header .iframe-cover{
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 2;

}
.services-main-container .header .flex-column {
  position: relative;
  z-index: 3;
}
.services-main-container .header h1 {
  font-size: 72px;
}
.services-main-container .header p {
  font-weight: 500;
  max-width: 900px;
  font-size: 28px;
}

/* header end*/
/* services list start */
 .services-list .icon{
  width: 50px;
  background: radial-gradient(var(--dark-accent), var(--dark-background) 50%);
}
 .services-list h4{
  font-size: 36px;
}
 .services-list p{
  font-size: 24px;
}
/* services list end */

/****************************** Services End /******************************/

/****************************** Single Project Start ******************************/
   .single-project-main-container .header{
    background-image: url('/storage/images/single-project/rami-holding.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    width: 100vw;
    position: relative;
    z-index: 1;

  }

  .single-project-main-container .header::before{
    content: '';
    background: linear-gradient(to bottom, #09090B, rgba(9, 9, 11, 0.3) 50%, #09090B);
    z-index: 2;
    position: absolute;
    left: 0;
    top:0;
    width: 100%;
    height: 100%;
  }
  .single-project-main-container .container{
    position: relative;
    z-index: 3;
  }
  
  .grid-container-3 {
    padding: 100px;
    position: relative;
  }
  .grid-container-3 .grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
  }
  .grid-container-3 .grid-3:hover .grid-item{
    opacity: 0.6;
    transition: all 0.4s ease;
  }
  .grid-container-3 .grid-3 .grid-item:hover{
    transform: scale(1.2);
    opacity: 1;
  }
  .grid-container-3 .grid-3 .image-container {
    overflow: hidden;
    
    text-align: center;
}

/****************************** Single Project End ******************************/

/****************************** Protfolio Start ******************************/

  .portfolio-main-container .header{
    height: 80vh;
    width: 100vw;
    position: relative;
    z-index: 1;
    overflow: hidden;
    margin-bottom: 100px;
  }

  /* .portfolio-main-container .header::before{
    content: '';
    background: linear-gradient(to bottom, #09090B, rgba(9, 9, 11, 0.3) 50%, #09090B);
    z-index: 2;
    position: absolute;
    left: 0;
    top:0;
    width: 100%;
    height: 100%;
  } */
  .portfolio-main-container .container{
    position: relative;
    z-index: 3;
  }
  .header .container{
    padding-top: 100px;
  }
  .portfolio-main-container .background{
    position: absolute;
    top: 20%;
    left: 20%;
    transform: translate(-22%,-22%);
    width: 120%;
    height: 120%;
  }
  

/****************************** Protfolio End ******************************/
/****************************** Reels Portfolio Start ******************************/
.reels-portfolio-main-container{
  margin-top: 200px;
}
.reels-portfolio-main-container h1{
  text-align: center;
}

.reels-portfolio-container{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(0, 400px));
  gap: 20px; /* Adjust as needed */
  max-width: 1400px;
  margin-inline:auto;
  margin-top: 200px;
  width: fit-content;
}
.reels-portfolio-container a{
  width: 100%;
  height: 100%;
  position: relative;
}
.reels-portfolio-container a img{
  width: 100%;
  height: 100%;
  transition: all 0.4s ease;
}
.reels-portfolio-container a:hover img{
  width: 100%;
  height: 100%;
  opacity: 0.7;
}
.reels-portfolio-container a h3{
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  transition: all 0.4s ease;
}
.reels-portfolio-container a:hover h3{
  opacity: 1;
}

/****************************** Reels Portfolio End ******************************/
/****************************** Single Reels Page Start ******************************/
.reels-main-container{
  margin-top: 200px;
}
.reels-main-container h1{
  text-align: center;
}
.reels-container {
  max-width: 1400px;
  margin: 100px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}
.reels-container video{
  width: 400px;
}
/****************************** Single Reels Page End ******************************/
/****************************** TVC Portfolio Start ******************************/
.tvc-portfolio-main-container{
  margin-top: 200px;
}
.tvc-portfolio-main-container h1{
  text-align: center;

}
.tvc-portfolio-container{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  max-width: 1400px;
  margin: 100px auto;
}
.tvc-portfolio-container video{
  width: 100%;
}

/****************************** TVC Portfolio End ******************************/
/****************************** Photography Portfolio Start ******************************/
.photography-main-container{
  margin-top: 200px;
}
.photography-main-container h1{
  text-align: center;
  margin-bottom: 100px;
}
.photography-main-container .image-container{
  position: relative;
}
.photography-main-container .wide-image{
  width: 1220px;
}
.photography-main-container .image-container img{
  width: 100%;
  transition: all 0.4s ease;
}
.photography-main-container .image-container:hover img{

  opacity: 0.7;
}
.photography-main-container h3{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  opacity: 0;
  transition: all 0.4s ease;

}
.photography-main-container .image-container:hover h3{
  opacity: 1;  
}

/****************************** Photography Portfolio End ******************************/
/****************************** GYM Photography Start ******************************/
.photography-sub-main-container{
  margin-top: 200px;
}
.photography-sub-main-container h1{
  text-align: center;
  margin-bottom: 100px;
}
.photography-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1400px;
  gap: 20px;
  margin: 0 auto;
  padding-inline:5%;
}
.photography-sub-main-container .image-container{
  position: relative;
  width: 600px;
}

.photography-sub-main-container .image-container{
  width: 100%;
  transition: all 0.4s ease;
}
/* .gym-main-container .image-container:hover{
  transform: scale(1.2);
  
} */
/****************************** GYM Portfolio End ******************************/
/****************************** Contact Us start ******************************/


.contact-main-container .contact {
  position: relative;
  height: fit-content;
  min-height: 1000px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 100px;
}
.contact-main-container .contact .coontact-inner-container{
  padding: 200px 0 0 0;
  
}
.contact-main-container .contact iframe{
  position: absolute;
  right: -500px;
  width: 2000px;
  filter: blur(20px);
  z-index: 1;

}
.contact-main-container .contact .iframe-cover{
  position: absolute;
  right: 0;
  height: 100vh;
  width: 100vw;
  filter: blur(20px);
  z-index: 2;
}
.contact-main-container .contact h1, .contact-main-container .contact p{
  max-width: 50%;
}
.contact-main-container .contact-form {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 600px;
  padding: 20px;
  background-color: transparent;
  max-width: 700px;
}
.contact-main-container .contact-form .flex-column{
  gap: 10px;
}
.contact-main-container .contact-form .flex-column label{
  padding-left: 20px;
}
.contact-main-container .contact label {
  display: block;
  font-weight: bold;
  color: var(--white-text);
}

.contact-main-container .contact input,
.contact-main-container .contact textarea {
  width: 100%;
  background:transparent;
  padding: 20px 30px;
  border: 2px solid var(--accent);
  color: var(--white-text);
  border-radius: 50px;
}
.contact-main-container .contact input::placeholder,
.contact-main-container .contact textarea::placeholder {
  color: var(--light-text);
  font-size: 18px;
}
.contact-main-container .contact textarea {
  border-radius: 20px;
}
.row textarea {
  resize: vertical;
}

.submit-button {
  text-align: center;
}

.submit-button button {
  padding: 10px 60px;
  border: none;
  background-color: #328061;
  color: white;
  font-size: 16px;
  border-radius: 20px;
  cursor: pointer;
}

.submit-button button:hover {
  background-color: #0056b3;
}

/****************************** Contact Us End ******************************/
  
/****************************** Footer Start ******************************/

footer {
  position: relative;
  z-index: 10;
  background-color: var(--dark-background);
  padding: 40px 10%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100vw;
  }
  a{
    color: var(--white-text);
  }
  .footer-container {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  
  .footer-column {
    flex: 1 1 25%; /* Each column takes up 25% of the width */
    margin-right: 30px;
  }
  
  .footer-column h4 {
    margin-bottom: 15px;
  }
  
  .footer-column ul {
    list-style-type: none;
    padding: 0;
  }
  
  .footer-column li {
    margin-bottom: 10px;
  }
  .footer-column li a{
      transition: all 0.4s ease;
  }
  .footer-column li a:hover {
    transition: all 0.4 ease;
    color: var(--accent);
    font-size: 18px;
  }
  
  
  .footer-logo {
    margin-bottom: 20px;
  }
  
  .footer-email {
    padding: 10px;
    width: 100%;
    margin-bottom: 15px;
  }
  
  .footer-btn {
    padding: 10px 20px;
    color: white;
    border: none;
    cursor: pointer;
  }
  
  .footer-btn:hover {
  }
  
  @media screen and (max-width: 768px) {
    .footer-column {
      flex: 1 1 100%;
      margin-right: 0;
      margin-bottom: 20px;
    }
  }
  .dropdown {
    position: relative;
    display: inline-block;
    border-radius: 20px;
    border: 1px solid var(--dark-accent);
}

.dropdown-toggle {
    background: none;
    border: 1px solid #000;
    padding: 8px 16px;
    cursor: pointer;
}

.dropdown-menu {
    display: none; /* Default: Hidden */
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    z-index:1000;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    z-index: 1000;
}

.dropdown-menu li {
    padding: 8px 12px;
}

.dropdown-menu li a {
    text-decoration: none;
    color: black;
    display: block;
}
.dropdown .btn{
  width: 120px;
  padding: 5px 0;
}

/* Russian language specific styles */
html[lang="ru"] .btn-label {
    font-size: 16px;
}
html[lang="ar"] .arrow {
    font-size: inherit;
}
html[lang="ar"] .contact-main-container .contact iframe {
  right: unset;
  left: -500px;
}
html[lang="ar"] .contact-main-container .contact {
  padding-left: 0;
  padding-right: 100px;
}
html[lang="ar"] .contact-main-container .contact h1,html[lang="ar"] .contact-main-container .contact p {
  text-align: right;
}
html[lang="ar"] .dropdown{
  margin-left: 50px;
  margin-right: unset;
}
html[lang="ar"] .hamburger {
  left: 5%;
  right: unset;
}
/* KU */

html[lang="ku"] .arrow {
    font-size: inherit;
}
html[lang="ku"] .contact-main-container .contact iframe {
  right: unset;
  left: -500px;
}
html[lang="ku"] .contact-main-container .contact {
  padding-left: 0;
  padding-right: 100px;
}
html[lang="ku"] .contact-main-container .contact h1,html[lang="ar"] .contact-main-container .contact p {
  text-align: right;
}
html[lang="ku"] .dropdown{
  margin-left: 50px;
  margin-right: unset;
}
html[lang="ku"] .hamburger {
  left: 5%;
  right: unset;
}

html[lang="ku"] .services-list .intro-text,html[lang="ar"] .services-list .intro-text{
     text-align: right;
 }

/* Show when 'show' class is added */
.dropdown-menu.show {
    display: block;
}
.swiper {
  width: 100%;
  padding: 20px 0;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  width: 200px;
  height: auto;
}

@media (max-width: 768px) {
  .swiper-slide img {
      width: 150px; /* Slightly smaller on mobile */
  }
}
.clients{
  margin: 100px auto;
}
.clients .swiper-container-wrapper .clients-swiper{
  margin-bottom: 100px;
  max-width: 1400px;
  
}
.services-main-container .header .container{
  padding-top: 0;
}