@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;800&display=swap');

:root {

    --accent: #ef3741;

    --dark-text: #24272A;

    --dark-background: #24272A;

    --white-text: #fff;

    --light-gray-text: #A9A9A9;

    --dark-gray-text: #666666;

    --white-background: #fff;

    --accent-background: #F3F3F3;

  }

  /* 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{
  scroll-behavior: smooth;

}



.smooth-wrapper {

  position: fixed;

  width: 100%;

}



body {

  line-height: 1.4;              

  width: 100vw;

  overflow-x: hidden;

}

/* 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(--dark-background); /* 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;

  z-index: 24;

  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;

  }

}

.white-color{

  color: var(--white-text) !important;

}

.dark-color{

  color: var(--dark-text) !important;

}

.mobile-only{

  display: none;

}

section{

  display: flex;

  justify-content: center;

  align-items: center;

  position: relative;

  /* overflow: hidden; */

}

.only-mobile{

 display: none; 

}

.black-btn:hover{

    cursor: pointer;

    background-color: transparent;

    border: 1px solid var(--dark-text);

    color: var(--dark-text);

  }

.bg-gray{

    background-color: #D9D9D9;

}

.pt-100{

  padding-top: 100px;

}

.ph-20{
  padding-inline: 20px;
}
.p-10{

  padding: 10px;

}

.p-20{

  padding: 20px;

}

.p-30{

  padding: 30px;

}

.p-40{

  padding: 40px;

}

.p-50{

  padding: 50px;

}

.p-100{

  padding: 100px;

}

.m-auto{

  margin-inline: auto;

}

.mb-10{

  margin-bottom: 10px;

}

.mb-20{

  margin-bottom: 20px;

}

.mb-50{

  margin-bottom: 50px;

}

.mb-100{

  margin-bottom: 100px;

}

.h-100{

  height: 100%;

}

.h-50{

  height: 50%;

}

.w-100{

  width: 100%;

}

.w-50{

  width: 50%;

}

.flex{ /* this will be column in mobile */

    display: flex;

}

.flex-row{ /* this will always be row  */

  display: flex;

  flex-direction: row;

  gap: 20px;

  align-items: center;

}

.flex-column{ 

  display: flex;

  flex-direction: column;

}

.justify-center{

  justify-content: center;

}

.space-evenly{

  justify-content: space-evenly;

}

.justify-start{

  justify-content: flex-start;

}

.justify-end{

  justify-content: flex-end;

}

.space-between{

  justify-content: space-between;

}

.align-start{

  align-items: flex-start;

}

.align-end{

  align-items: flex-end;

}

.align-center{

  align-items: center;

}

.gap-10{

    gap: 10px;

}

.gap-20{

    gap: 20px;

}

.gap-40{

    gap: 40px;

}

.gap-100{

  gap: 100px;

}

html.no-scroll {

  overflow: hidden;

}



.image-conatiner img{

 width: 100%;

}

section{

  /* overflow: hidden; */

  width: 100vw;

  font-weight: 600;

}

.cinzel{

  font-family: 'Cinzel';

}

h1{

    font-size: 80px;

    font-family: 'Cinzel';

    color: var(--white-text);

    font-weight: bold;

    line-height: 1;

    text-align: left;

  }

h2{

    font-size: 80px;

    font-family: 'Cinzel';

    color: var(--dark-text);

    font-weight: bold;

    font-weight:400;

}

h3{

    font-size: 80px;

    font-family: 'Cinzel';

    color: var(--white-text);

    font-weight: bold;

}

h4{

    font-size: 48px;

    font-family: 'Cinzel';

    color: var(--white-text);

    font-weight: 600;

}

h5{

    font-size: 32px;

    color: var(--white-text);

    font-weight: 500;

}

h6{

  font-size: 24px;

  color: var(--white-text);

  font-weight: 500;

  font-family: 'Cinzel';

}

p{

    font-family: 'Open Sans';

    color: var(--white-text);

    font-weight: 400;

}

a{

    font-weight: 400;

    color: var(--white-text);

}

a, span{

    font-size: 16px;

    font-family: 'Open Sans';

    text-decoration: none;

}

.white-text{

  color: var(--white-text);

}

.dark-text{

  color: var(--dark-text);

}

.accent-text{

  color: var(--accent);

}

.dark-gray-text{

  color: var(--dark-gray-text);

}

.light-gray-text{

  color: var(--light-gray-text);

}

.image-container img{

  width: 100%;

}

.xl5-text{

  font-size: 96px;

}

.xl4-text{

  font-size: 80px;

}

.xl3-text{

    font-size: 48px;

}

.xl2-text{

    font-size: 40px;

}

.xl-text{

    font-size: 32px;

}

.l-text{

    font-size: 24px;

}

.m-text{

    font-size: 20px;

}

.s-text{

    font-size: 18px;

}

.xs-text{

    font-size: 16px;

}
.xs2-text{

    font-size: 12px;
}

.text-center{

  text-align: center;

}

.text-left{

  text-align: left;

}

.text-right{

  text-align: right;

}

.bg-dark{

  background-color: var(--dark-background);

}

.bg-white{

  background-color: var(--white-background);

}

.bg-accent{

  background-color: var(--accent-background);

}

.max-300{

  max-width: 300px;

}

.max-500{

  max-width: 500px;

}

.max-1200{

  max-width: 1200px;

  margin-inline:auto;

}

.max-1400{

  max-width: 1400px !important;

  margin-inline: auto;

}

.max-1900{

  max-width: 1900px !important;

  margin-inline: auto;

}

.width-100{

  width: 100%;

}

.container{

  width: 100%;

  padding: 0 5%;

  margin: auto; 

  padding-bottom: 100px; 

}

  .absolute{

    position: absolute;

  }



  /* buttons start */

  

.btn{

  min-width: 200px;

}

.outlined-btn{

  text-align: center;

  background-color: transparent;

  border: 1px solid var(--white-text);

  color: var(--white-text);

  width: 200px;

  padding: 10px 0;

  position: relative;

  overflow: hidden;



}

.outlined-btn:hover{

  cursor: pointer;

}
.outlined-btn:hover .btn-bg{
 background-color: #fff;
}
.outlined-btn:hover .btn-label{
 color: #000;
}
.white-btn{

  border-color: var(--white-text);

  color: var(--white-text);

}

.white-btn:hover span{

  color: var(--dark-text) !important;

}

.black-btn{

  text-align: center;

  background-color: var(--dark-text);

  color: var(--white-text);

  padding: 10px 20px;

  position: relative;

  overflow: hidden;



}

.accent-btn{

  text-align: center;

  background-color: var(--accent);

  color: var(--white-text);

  padding: 5px 10px;

  position: relative;

  overflow: hidden;

  transition: all .4s ease;

  line-height: 40px;

  border: none;

}

.accent-btn:hover{

  transform: scale(1.1);

  border: 1px solid var(--accent);

  background-color: transparent;

  color: var(--accent);

  cursor: pointer;

}




.btn:hover .btn-bg {

  transform: translate(-50%, -50%) scale(1);

}

.btn-label{

  position: relative;

  font-weight: 400;

  transition: color 0.3s ease-out;

  z-index: 1;

}



.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(--dark-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(--dark-text);

}

.btn-small{

    padding: 10px 45px;

    background-color: var(--dark-text);

    color: white;

    border-radius: 25px;

    transition: all 0.4s ease;

}

.btn-small:hover{

    transform: scale(1.1);

}

  /* buttons end */

/* header start */

header{

  background-color: var(--dark-background);

  width: 100vw;

  height: 80px;

}

  .header-container{

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 20px 5% 0 5%;

    background-color: transparent;

    /* background-color: var(--dark-background); */

    height: 60px;

    width: 100vw;

    z-index: 3;

    max-width: 1400px;

    margin-inline:auto;

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

  }
.header-container .logo-container{
  width: 200px;
}
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;

    color: var(--accent);

}

.header-container .btn:hover .btn-label{

  color: var(--dark-text);

}

.header-container .btn:hover .btn-bg{

  background-color: white;

}

/* 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;

}



/* .mobile-menu-container{

  width: 100vw;

  height: 100vh;

  position: absolute;

  left: 0;

  top: 0;

  overflow: hidden;

} */

.mobile-menu-container{

  width: 100vw;

  position: relative;

  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(--accent);

  position: absolute;

  right: -100%;

  top: 0;

  z-index: 10;

  transition: right 0.4s ease-in-out;

  display: none;

}

.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;

}

.mobile-menu .logo-container img{

  width: 200px;

}

.mobile-menu ul{

  display: flex;

  flex-direction: column;

  gap: 75px;

}

.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;

}



/* nav mobile end */

/* header end */

/* homepage start */

/* hero section last start */
 
.hero-last h1{
  margin-top: 95px;
}
.hero-last .main-container{
  padding: 100px;
}

.hero-last .text-container{
  max-width: 550px;
}

.hero-last .text-container .s-text.light-gray-text{
  width: 300px;
}
.social-icon path{
  fill: #fff;
  transition: all .4s ease
}
.social-icon:hover path{
  cursor: pointer;
  fill: #ef3741;
  
}
@media (max-width: 1000px){
  .hero-last h1{
      margin-top:0;
  }

}
@media (max-width: 768px){
  .hero-last .main-container{
      padding: 50px 5%;
  }

}
/* hero section last end */
/* hero section start */

.homepage{
  overflow: hidden;
  background-color: var(--dark-background);

}

.hero-section{

  position: relative;

  padding: 50px 100px;

  height: 90vh;

  min-height: 900px;

  background: #24272A;

  position: relative;

  align-items: flex-start;

  width: 100%;

  max-width: calc(80vh + 800px);

  margin-inline:auto;

}

.hero-section .text-container{

  padding-top: 300px;

}

.hero-section .hero-text-container{

  max-width: 600px;

  height: 40vh;

}

/* .hero-section .hero-text-container h1{

  mix-blend-mode: difference;

  position: relative;

  z-index: 4;

} */

.hero-section  h1{

  mix-blend-mode: difference;

  position: relative;

  z-index: 4;

  text-align: center;

  width: 100%;

}

.hero-section  H2{

  mix-blend-mode: difference;

  position: relative;

  z-index: 4;

  text-align: center;

  width: 100%;

  color: var(--white-text);

  font-size: 24px;

}

.hero-section .l-text{

  position: relative;

  z-index: 4;

  max-width: 400px;

}

/* hero section old */

/* .hero-section  img{



  position: absolute;

  width: 800px;

  height: fit-content;

  z-index: 2;

  top: 0;

  right: 50px;

  max-width: 1900px;

} */


 .hero-section .image-container img{

  margin-top: 100px;

}

 .hero-section-container{

  overflow: hidden;

 }

.homepage .hero-section-container .background{

  position: absolute;

  bottom:0;

  right: 0;

  z-index: 1;

  /* width: 100%; */

}



.hero-section .btn{

  text-align: center;

  background-color: transparent;

  border: 1px solid black;

  color: var(--dark-text);

  border-radius: 50px;

  width: 250px;

  padding: 10px 0;

}



/* hero section end */



/* sliding text section start */



  .homepage .sliding-text{

    position: relative;

    overflow: hidden;

    padding: 100px 0;

    height: 100vh;

    justify-content: flex-start;

    align-items: flex-start;

  }

  .homepage .sliding-text .xl-text{

    width: 400px;

  }
 

  .homepage .background{

    position: absolute;

    bottom: 0;

    right: 0; 

    z-index: 0;

  }

 

  

/* sliding text section end */

/* about section start */



  .homepage .about-section{

    overflow: hidden;

    padding:100px;


  }

   .title{

    text-align: left;

    width: 100%;

  }

  .homepage .about-section .logo-shaped-images{

      display: grid;

      grid-template-columns: repeat(2, 250px); 

      gap: 10px;

      justify-items:end;

      align-content: end;

  }
  .homepage .about-section h2{
    color:var(--white-text);
    font-weight: 600;
  }

  .homepage .about-section .outlined-btn .btn-label{
    
    font-weight: 600;

  }

  .homepage .about-section .outlined-btn{

    border-color: var(--white-text);

    color: var(--white-text);

    border-width: 2px;

  }

  .homepage .about-section .logo-shaped-images .image-container{

    width: 250px;

  }

  .homepage .about-section .logo-shaped-images .image-container:nth-child(4){

    width: 250px;

    align-self: end;



  }

  .homepage .about-section .text-container{

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    width: 50%;

    max-width: 500px;

  }

/* about section end */



/* Parallax container */

.parallax-large {

  position: relative;

  height: 500px;

  overflow: hidden; /* Prevent excess image from showing */

  display: flex;

  justify-content: center;

  align-items: center;

}



/* Wrapper for the background image */

.background-wrapper {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 300%; /* Image is taller than container for parallax effect */

  z-index: 0; /* Place background behind content */

}



/* Actual background image */
.parallax-large {

  background: url('/storage/images/homepage/large-parallax.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /*background-attachment: fixed;*/
}
.parallax-large .background {

  width: 100%;

  height: 100%;

  object-fit: cover; /* Maintain aspect ratio */


}



/* Content inside the parallax container */

.parallax-large .content {

  position: relative;

  padding: 50px;

  text-align: center;

  z-index: 1; /* Keep content above background */

}





/* projects three cards start */
.projects-three-cards-container{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  max-width: 1900px;
  margin-inline: auto;
  padding:0 100px 100px 100px;
}

.projects-three-cards-container .title{
  max-width: 450px;
  position: relative;
  margin-bottom: 0;
}
.projects-three-cards-container .discription-container{
  color: white;
  overflow: hidden;
}
.projects-three-cards-container h2{
  color: white;
  line-height: 1.1;
  font-weight: 600;
  filter:blur(0px);
  
}
.projects-three-cards-container span{
  font-family: inherit;
  font-size: inherit;

}

.projects-three-cards-container .title p{
  position: absolute;
  width: 100px;
  top: 25px;
  right: 50px;
  text-align: right;
  color: white;
  font-weight: 700;
}
.projects-three-cards-container h2 span{
  font-size: inherit;
}
.projects-three-cards-container .button-text{
  gap: 5px;
  transform: rotateZ(90deg);
  height: fit-content;
  aspect-ratio:1;
}

.projects-three-cards-container .button-text a{
  background: transparent;
  border: 1px solid #fff;
  padding: 10px 20px;
  border-radius: 20px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 20px;
  color: white;
  font-weight: 400;
  font-size: 18px;
  width: unset;
}
.projects-three-cards-container .button-text a:hover svg{
  position: relative;
  z-index: 3;
}
.projects-three-cards-container .button-text a svg path{
  transition: all .8s ease;
}
.projects-three-cards-container .button-text a:hover svg path{
  stroke: black
}
.projects-three-cards-container .button-text a img{
  width:18px;
}

.projects-three-cards-container .button-text p{
  width: 150px;
}
.projects-three-cards{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  max-width: 1900px;
  margin-inline: auto;
  width: 100%;
  
}
.projects-three-cards-container .btn{
}
.projects-three-cards .btn:hover .btn-label{
  color: black;
}
.projects-three-cards .btn:hover .btn-bg{
  background-color: white;
}
.projects-three-cards .project-card{
  max-width: 600px;
  width: 33%;
  padding-bottom: 20px;
  background: linear-gradient(to bottom , #000 , #24272A);
  display: flex;
  flex-direction: column;
  gap: 24px;
  border: 1px solid black;
}
.projects-three-cards .project-card.card-1{
  border-top-left-radius: 200px;
  overflow: hidden;
}
.projects-three-cards .project-card.card-3{
  border-bottom-right-radius: 200px;
  overflow: hidden;
}
.projects-three-cards .project-card .project-title-container, .project-btn-container{
  overflow: hidden;
}
.projects-three-cards .project-card .project-title{
  font-size: 32px;
  color: white;
  font-weight: 600;
  font-family: "Open Sans";
  overflow: hidden;
}
.projects-three-cards .project-card .project-categories{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  overflow: hidden;


}
.projects-three-cards .project-card .project-category{
  padding: 5px 10px;
  border: 1px solid var(--white-text);
  text-align: center;
  position:r elative;
  z-index:1;
  font-size: 14px;
}
.projects-three-cards .project-card .see-project{
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  overflow: hidden;
}
.projects-three-cards .project-card .see-project .project-description{
  
} 
.projects-three-cards .project-card .see-project p{
  font-weight: bold;
}
.projects-three-cards .project-card .see-project img{
  height: 16px;
  width: 16px;
}

.projects-three-cards .project-card .image-container{
  overflow: hidden;
  width: 100%;
  display: block;
  position:relative;
  z-index:2;
}
.projects-three-cards .project-card img{
  transition: scale 0.4s ease;
}
.projects-three-cards .project-card img:hover{
  transform: scale(1.2);
}
/* projects three cards end */



/* services section start */

.homepage .services-section{

  height: 100vh;

  background-color: var(--dark-background);

  padding: 0 100px;

}

.homepage .services-section h2{

  color: var(--white-text);



}

.homepage .services-section h3{

  font-family: 'Open Sans';

  font-weight: 600;

  color: var(--light-gray-text);

  transition: all 0.4s ease;

}

.homepage .services-section hr{

  color: var(--light-gray-text);

}

.homepage .services-section h3:nth-of-type(2){

  color: var(--white-text);

}

.homepage .services-section .services-content{

  width: fit-content;

  text-align: center;

}

.homepage .services-section .services-content:hover h3{

  color: var(--light-gray-text);

}

.homepage .services-section .services-content h3:hover{

  color: var(--white-text);

  font-size: 88px;

  cursor: pointer;

}



.swiper-slide img {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

}

/* swiper homepage end*/



/* services section end */



/* smart homes section start */

.homepage .smart-homes{

  background-color: var(--dark-background);

}

.homepage .smart-homes .section-background {

  width: 100%;

  background-image: url('/storage/images/homepage/smarthomes-background.png');

  background-position: right;

  background-repeat: no-repeat;

  background-size: cover;

  position: relative;

}

.homepage .smart-homes .section-background::before {

  content: '';

  position: absolute;

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

  background: linear-gradient(to bottom, rgba(36,39,42,1) 10%,rgba(36,39,42,0.5), rgba(36,39,42,0), rgba(36,39,42,0.5) , rgba(36,39,42,1) 90%);

  

}

.homepage .smart-homes .section-background .flex-column{

  margin: 0;

  position: relative;

}

.homepage .smart-homes h2{

  color: var(--white-text);

  font-size: 80px;
  
  font-weight: 600;

}

.homepage .smart-homes p{

  max-width: 550px;

  margin-bottom: 50px;

  height: 250px;

}

.homepage .smart-homes .image-container{

  max-width: 750px;

}



/* Small Parallax Container */

.small-parallax {

  z-index: 1;

  position: relative;

  height: 300px;

  overflow: hidden; /* Prevent image overflow */

}



/* Wrapper for the background image */

.smart-homes .small-parallax .background-wrapper {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 200%; /* Make the image taller for the parallax effect */

  z-index: -1; /* Place background behind other content */



  background-image: url('/storage/images/homepage/parallax-small.png');

  background-attachment: fixed; /* Enables the parallax effect */
  
  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

}

/* Background image */

.small-parallax .background {



  width: 100%;

  height: 100%;

  object-fit: cover; /* Maintain aspect ratio */

}

/* smart homes section end */

/* faqs section start */

.faqs{

  padding-top: 100px;

  padding-bottom: 0;

}
.faqs .container{
    padding:0;
}

.faqs .title{

  width: fit-content;

  margin-bottom: 100px;

}

.faqs.flex-column{

  gap: 30px;

}

.faqs h2{

  font-family: 'Cinzel';

  font-weight: 600;

}

.faqs .line{

  height: 5px;

  width: 100%;

  background-color: var(--accent);

}

.faqs h4{

  min-height: 45px ;

  color: var(--dark-text);

  font-family: 'Open Sans';

}

.faqs .intro-text{

  text-align: left;

}

.faq-button:hover{

  cursor: pointer;

}

.faqs .faq-content{

  max-height: 0;

  overflow: hidden;

  transition: all 0.4s ease;

}

.faqs .faq-content.closed{

  max-height: 0;

}

.faqs .faq-content.opened{

  max-height: 500px;

  padding: 20px 50px;



}

.faqs .faq-content p{

  max-width: 450px;

  color: var(--dark-text);

} 

.service{

  height: fit-content;

  transition: all 0.4s ease;

}

.faqs .btn{

  margin: 100px 0;

}

.faqs .image-container img{

  border-radius: 50px;

}

/* faqs section end */



/* contact section start */



.contact-section{

  padding-top: 100px;

  padding-bottom: 200px;

}

.contact-section h3{

  max-width: 1400px;

}

.contact-section span{

  font-family: 'Cinzel';



}

.contact-section  input[type="text"], textarea {

  width: 100%;

  max-width: 1000px;             

  padding: 20px 10px;           

  border: 1px solid var(--dark-text); 

  background: transparent;

  font-size: 24px;       
  


}

.contact-section  input[type="text"]::placeholder, textarea::placeholder{

  color: var(--dark-text);


  font-size: 24px;

  font-weight: 400;

  font-family: 'Open Sans';

  

}

.contact-section textarea {

  height: 150px; 

  resize: vertical; 

}



.contact-section  input[type="checkbox"] {

  display: none;

}



.contact-section  input[type="checkbox"] + label {

  position: relative;

  border: 1px solid var(--dark-text);


  background-color: transparent;

  text-align: center;

  line-height: 40px; 

  font-size: 20px;

  cursor: pointer;

  padding: 5px 10px;

  width: 200px;

  font-family: 'Open Sans';

}



.contact-section  input[type="checkbox"]:checked + label::before {

  color: white;

  font-size: 20px;

  position: absolute;

  top: 5px;

  left: 5px;

}



.contact-section  input[type="checkbox"]:checked + label {

  background-color: var(--dark-background);

  transition: all 0.4s ease;

  color: var(--white-text);

}





.service-choices{

  display: flex;

  align-items: center;

  gap: 20px;

}

.contact-section .btn{

  width: 250px;

}

.div-button-wrapper {

  display: flex;

  justify-content: space-between; 

  align-items: center;  

  align-items: flex-start;

  gap: 40px;   

}

/* contact section end */



/* swiper homepage start*/

.swiper { 

  width: 100%;

  height: 100%;

}



.swiper-slide {

  text-align: center;

  font-size: 18px;

  display: flex;

  justify-content: center;

  align-items: center;

}



/**************************** homepage end /****************************/







/**************************** about us page start /****************************/



/* long slide start*/



  /* our specialties start*/

  .three-elements img{

    width: 100px;

  }

  .our-specialties{

    background: url('/storage/images/about/our-specialties-background.webp');

    background-color: var(--dark-background);
  }

  .our-specialties .images-container{

    width: 350px;

  }

  .our-specialties .top-image, .our-specialties .bootom-image{

    width: 100%;

  }

  .our-specialties .card{

    height: 400px;

  }
  .our-specialties .main-text .l-text{
    height: 70px;
  }
  

/* our specialties end*/







.long-slide p{

  color: var(--dark-text);

}

.long-slide .light-gray-text{

  color: var(--light-gray-text);

}

.long-slide .light-gray-text span{

  font-size: inherit;

}



.long-slide .left-section{

  width: 30%;
  gap: 80px;
  height: 100%;
  

}
.long-slide .left-section .paragraph{
  font-size: 16px;
}
.long-slide .left-section .paragraph-quote{
  font-size: 20px;
}
.long-slide .left-section p.xl-text span{
  color: var(--accent);
}
.long-slide .p-container{

  border-right: 1px solid var(--accent);

  padding-right: 20px;

}

.long-slide .right-section{

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  justify-content: center;

  width: 70%;

}

.long-slide .right-section .process-section .image-container{

  max-width: 350px;

}

.long-slide .right-section .starting-image{

  width: 450px;

  align-self: center;

  position: relative;

  margin-bottom: 100px;

  overflow: visible;

}

.long-slide .right-section .starting-image .background{

  background-color: var(--accent);

  width: 100%;

  height: 100%;

  position: absolute;

  top: -20px;

  right: -20px;

  z-index: 0;

  border-top-right-radius: 200px;

}



.long-slide .long-slide-image-1{

 position: relative;

 z-index: 1;

}

.long-slide .right-section .title-line {

  align-self: start;

}

.long-slide .right-section .title-line {

  padding-left: 50px;

}

.long-slide .right-section .flex-column {

  /* gap: 100vh; */

  width: 100%;

}

.long-slide .right-section .process-section p{

  max-width: 300px;

}

.long-slide .right-section .process-section p span{

  font-size: inherit;

  font-weight: 600;

  color: var(--accent);

}

.long-slide .right-section .image-container.long-slide-1 {

  width: 230px;

}

.long-slide .right-section .image-container.long-slide-2 {

  width: 280px;

}

.aaa{

  height: 100vh;

}

/* long slide end*/

.about-header{

  min-height: 650px;

  width: 100vw;

}

.about-header-inner{

  max-width: 1100px;

  width: 1100px;

}

.about-header .quote{

  align-self: center;

  max-width: 800px;

}

.about-header .header-shapes-container-1{

  align-self: flex-start;

}

.about-header .header-shapes-container-2{

  align-self: flex-end;

}

.section-x{

  width: 100VW;

}
@media (max-width: 900px) {

    .about-main-container h2{
        font-size: 24px;
    }
}
.about-main-container h2{
    font-size: 48px;
}
.about-main-container .small-parallax2{
  background-image: url('/storage/images/about/parallax-about-2.png');
  background-attachment: fixed; /* Enables the parallax effect */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
/**************************** about us page end ****************************/



/**************************** services start ****************************/

/* header start*/

.services-main-container{

  background: var(--dark-background);

}

.services-main-container .image-container{

  overflow: hidden;

}
.services-main-container .interior-exterior-section .gallery .image-container{
  margin: 40px auto;
}
.services-main-container .header{

  padding: 0 25px 100px 25px;

  height: fit-content;

}

.services-main-container .header .l-text.light-gray-text{

  height: 200px;

}

.services-main-container .header .image-container{

  height: 100%;

  width: 100%;

 

}

.services-main-container .image-container img{

  height: 100%;

  width: 100%;

}

/* header end*/

/* cards start*/

.services-main-container .main-services h1{

  width: 100%;

  max-width: 950px;

}

.services-main-container .main-services p{

  width: 100%;

  max-width: 500px;

  align-self: flex-end;

  height: 160px;

}

.services-main-container .cards-grid{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;

}

.services-main-container .cards-grid .card1{

  background-image: url('/storage/images/services/execution-bg.webp');

  background-repeat: no-repeat ;

  background-size: cover;

  background-position: center;

}

.services-main-container .cards-grid .card2{

  background-image: url('/storage/images/services/interior-bg.webp');

  background-repeat: no-repeat ;

  background-size: cover;

  background-position: center;



}

.services-main-container .cards-grid .card3{

  background-image: url('/storage/images/services/maintenance-bg.webp');

  background-repeat: no-repeat ;

  background-size: cover;

  background-position: center;



}

.services-main-container .cards-grid .service-card{

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  gap: 40px;

  height: 500px;
  width: 350px;

}

.services-main-container .cards-grid .service-card h2{

  height: 100px;

  color: var(--white-text);

  font-weight: 700;

  font-size: 40px;

}

.services-main-container .cards-grid .service-card .xl2-text{

  font-family: 'Cinzel';

  color: var(--white-text);

  font-weight: bold;

  margin-bottom: 20px;
}

/* Flip Card Styles */

.main-services .service-card {

  perspective: 1000px;

}



.main-services .flip-card-inner {

  position: relative;

  width: 100%;

  height: 100%;

  transition: transform 0.6s;

  transform-style: preserve-3d;

}



.main-services .service-card:hover

 {

  transform: scale  (1.2);

}



.main-services .flip-card-front, 

.main-services .flip-card-back {

  position: absolute;

  width: 100%;

  height: 100%;

  backface-visibility: hidden;

}



.main-services .flip-card-back {

  transform: rotateY(180deg);

  background-color: #fff; /* Adjust if needed */

  display: flex;

  justify-content: center;

  align-items: center;

}



.main-services .flip-card-back img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: 10px; /* Optional for rounded corners */

}

.flip-card-front{

  padding: 20px 20px 80px 20px;

}
.main-services .flip-card-front .number{
  height: 100px;
}

/* cards end*/

/* interior & exterior start */

.interior-exterior-section{

  border-bottom: 1px solid var(--dark-text);

}
.gallery{
  width: 100%;
}
.interior-exterior-section .gallery .image-container{
  width: 400px;
}
.interior-exterior-section .image-conatiner{

  width: 450px;

  overflow: hidden;

}

.interior-exterior-section .number-text h2{

  font-weight: bold;

  font-family: 'Cinzel';

  font-size: 64px;

}

.interior-exterior-section .number-text .number{

  font-family: 'Cinzel';

  color: var(--accent);

  font-weight: 600;

}

.interior-exterior-section h2,.interior-exterior-section p{

  text-align: left;

  color: var(--dark-text);

}



.design-buttons-container{

  width: 100vw;

  justify-content: start;

  border-top: 1px solid var(--dark-text);

  border-bottom: 1px solid var(--dark-text);

  gap: 0;

}



.design-buttons-container p{

 border-left: 1px solid var(--dark-background);

  padding: 50px;

  border-right: 1px solid var(--dark-background);

}

.design-buttons-container p.active-btn{

 border-left: 1px solid var(--dark-background);

 background: var(--dark-background);

  color: var(--white-text);

  transition: all 0.4s ease;

}

.design-buttons-container p:hover{

  cursor: pointer;

}

/* Container for images (optional if you need positioning) */

.image-container {

  position: relative; /* helps if you need absolute positioning inside */

  overflow: hidden;   /* hides images as they swipe out */

}



/* We will assign these classes dynamically in JS */

.swipe-out {

  animation: swipeOut 0.4s forwards;

}



.swipe-in {

  animation: swipeIn 0.4s forwards;

}



/* The "out" animation moves the element to the left and fades it out */

@keyframes swipeOut {

  0% {

    transform: translateX(0);

    opacity: 1;

  }

  100% {

    transform: translateX(-100%);

    opacity: 0;

  }

}



/* The "in" animation moves the element from right to center and fades in */

@keyframes swipeIn {

  0% {

    transform: translateX(100%);

    opacity: 0;

  }

  100% {

    transform: translateX(0);

    opacity: 1;

  }

}

[data-scroll-container]{

  position: relative; /* Ensures proper positioning */

  overflow: hidden !important; /* Prevents unnecessary scrollbars */

}

/* interior & exterior end */

/* Maintenance start */



.maintenance-section{

  border-bottom: 1px solid var(--dark-text);

}

.maintenance-section .image-conatiner{

  width: 667px;

  overflow: hidden;

}

.maintenance-section .number-text h2{

  font-weight: bold;

  font-family: 'Cinzel';

  font-size: 80px;

  margin-bottom: 20px;

}

.maintenance-section h2,.maintenance-section p{

  text-align: left;

  max-width: 450px;

  color: var(--dark-text);

}



.maintenance-section .number-text .number{

  color: var(--accent);

  font-family: 'Cinzel';

  font-weight: 600;

}

.maintenance-subs{

  display: flex;

  gap: 40px;

  align-items: center;

  justify-content: flex-start;

  border-bottom: 1px solid var(--dark-background);

}

.maintenance-section .sub-item{

  padding: 10px 10px 10px 0;

  position: relative;

}

.maintenance-section .sub-item:hover{

  cursor: pointer;

}

.maintenance-section .sub-item .active{

  position: absolute;

  left: 0;

  bottom: 0;

  height: 2px;

  width: 100%;

  background-color: var(--dark-background);

  transition: all 0.4s ease;

}

.maintenance-section .sub-item .active-line{

  position: absolute;

  left: 0;

  bottom: 0;

  height: 2px;

  width: 100%;

  background-color: var(--dark-background);

}



.line-text .line{

  width: 250px;

  height: 2px;

  background:var(--dark-text);

}

.line-text a{

  color: var(--accent);

  font-size: 32px;

  padding: 20px;

  transition: all 0.4s ease;

}

.line-text a:hover{

  font-size: 36px;

  font-weight: 600;

}



/* Maintenance end */



/**************************** services end ****************************/



/**************************** Projects page start ****************************/

.projects-main-container .projects-header{

  min-height: 600px;


}

.projects-main-container h1{

  font-size: 80px;

  font-family: 'Open Sans';

}

/* projects grid start*/

.projects-main-container .projects-grid {

  padding: 0;

  display: grid;

  grid-template-columns: repeat(3, minmax(350px, 1fr)); /* Max 3 cards per row, each with a min width of 350px */

  gap: 20px; /* Adjust the gap between the cards */

  width: 100%;

}

.projects-main-container .project-card{

  position: relative;

  min-width: 350px;  /* Ensures cards don't go below 350px */

  max-width: 900px;  /* Ensures cards don't grow beyond 450px */

  width: 100%;

  aspect-ratio: 3/4;



  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  display: flex;

  justify-content: center;

  align-items: center;

}

.projects-main-container .project-card h6{

  position: relative;

  opacity: 0;

  z-index: 2;

  transition: opacity 0.4s ease;

}

.projects-main-container .project-card:hover h6{

  opacity: 1;

}

.projects-main-container .project-card .overlay{

  width: 100%;

  height: 100%;

  position: absolute;

  z-index: 1;

  background-color: #000;

  opacity: 0;

  transition: opacity 0.4s ease;

}

.projects-main-container .project-card:hover .overlay{

  opacity: 0.6;

}

/* projects grid end*/



/**************************** Projects page end ****************************/

/**************************** Blog Page Start ****************************/

.blog-main-container .header{

  min-height: 400px;

  display: flex;

  justify-content: center;

  align-items: center;

}



.blog-main-container .blog-grid{

  padding: 0;

  display: grid;

  grid-template-columns: repeat(2, minmax(350px, 1fr)); /* Max 3 cards per row, each with a min width of 350px */

  justify-items: center;

  gap: 40px; /* Adjust the gap between the cards */

  width: 100%;

}

.blog-main-container .blog-grid .post{

  position: relative;

  min-width: 350px;  /* Ensures cards don't go below 350px */

  max-width: 700px;  /* Ensures cards don't grow beyond 450px */

  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

}

.blog-main-container .blog-grid .post h6{

  transition: font-size 0.4s ease;

}

.blog-main-container .blog-grid .post h6:hover{

  font-size: 26px;

}



.blog-main-container .blog-grid .post .image-container{

  aspect-ratio: 1/1;

  width: 100%;

}

/**************************** Blog Page end ****************************/

/**************************** Contact US Page Start ****************************/



.contact-main-container{

}

.contact-main-container .header {

  display: flex;

  justify-content: flex-start;

  padding: 100px;

  align-items: start;



  background: url('/storage/images/contact/header.png');

  background-repeat: no-repeat;

  background-size: cover;

  background-position: bottom;

  height: 800px;

}

.contact-main-container h1{

  max-width: 1000px;

  width: fit-content;

  font-weight: 600;

}

.contact-main-container span{

  font-family: 'Cinzel';

  margin-inline: 10px;



}






/* contact section start */



.contact-main-container .form-container{

  background: url('/storage/images/contact/bg.png');

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  max-width: 14

  00px;

  margin-inline:auto;

}

.contact-main-container form{

  background-color: var(--white-background);

  max-width:1000px;

  padding: 70px;

  width: 100%;

  justify-content: flex-start;

  border: 4px solid var(--dark-text);

}

.contact-main-container h3{

  max-width: 1100px;

  font-family: 'Open Sans';

}

.contact-main-container  input[type="text"],.contact-main-container  input[type="number"], textarea {

  width: 100%;

  max-width: 1000px;             

  padding: 20px 10px;  

  border: none;         

  border-bottom: 1px solid var(--dark-text); 

  background: transparent;

  font-size: 24px;      

}

.contact-main-container  input[type="text"]::placeholder,.contact-main-container  input[type="number"]::placeholder, textarea::placeholder{

  color: var(--dark-text);

  font-size: 24px;

  font-weight: 400;

  font-family: 'Open Sans';

  

}

.contact-main-container textarea {

  height: 150px; 

  resize: vertical; 

}



.contact-main-container  input[type="checkbox"] {

  display: none;

}



.contact-main-container  input[type="checkbox"] + label {

  position: relative;

  border: 1px solid var(--dark-text);

  border-radius: 50px;

  background-color: transparent;

  text-align: center;

  line-height: 40px; 

  font-size: 20px;

  font-weight: 500;

  cursor: pointer;

  padding: 10px ;

  width: 175px;
  
  font-family: 'Open Sans';

}



.contact-main-container  input[type="checkbox"]:checked + label::before {

  color: white;

  font-size: 20px;

  position: absolute;

  top: 5px;

  left: 5px;

}



.contact-main-container  input[type="checkbox"]:checked + label {

  background-color: var(--dark-background);

  transition: all 0.4s ease;

  color: var(--white-text);

}







.contact-main-container .div-button-wrapper {

  display: flex;

  justify-content: space-between; 

  align-items: center;     

}

.contact-main-container button{

  width: 250px;

}

/* contact section end */

.contact-main-container .contact-info{

  width: fit-content;min-width: 300px;

}

.contact-main-container .contact-info li img{

  width: 20px;

}

/**************************** Contact US Page Start ****************************/

/**************************** Single Service Page Start ****************************/

/* header start*/

.single-project-main-container{

  background: var(--dark-background);

}

.single-project-main-container .header{

    padding: 0 25px 100px 25px;

    height: fit-content;

}

.single-project-main-container .header .image-container{

  height: 100%;

  width: 100%;

 

}

.single-project-main-container .image-container img{

  height: 100%;

  width: 100%;

}

/* header end*/



/* project details start */
.single-project-main-container .header .image-container{
    overflow:hidden;
}

.single-project-main-container .header .image-container{
        border-bottom-left-radius: 120PX;
}
.single-project-main-container .project-details  {
    DIRECTION: LTR;
  padding: 0 10%;

}
.single-project-main-container .project-details .category{
    border: 1px solid var(--accent);
        padding: 3px 12px;
}
.single-project-main-container .project-details  hr{

 border-color: var(--accent);

}

.single-project-main-container .project-details .client-logo {

  padding: 20px;

  border: 1px solid var(--light-gray-text);

  border-radius: 50%;

  width: 120px;

}

.single-project-main-container .project-details .client-logo img {

  width: 100%;

}

.single-project-main-container .project-details .stats {

  display: grid;

  grid-template-columns: 1fr 1fr; 

  grid-template-rows: auto auto; 

  row-gap: 40px; 
  column-gap: 160px;
  padding-inline: 50px;

}



.single-project-main-container .project-details .project-text {

  max-width: 650px;
  color:white;
  font-size: 24px;
  font-family: 'Open Sans';

}
.single-project-main-container .project-details .description-text{
  font-family: 'Open Sans';
  color: var(--white-text);
} 
.single-project-main-container .project-details .dark-gray-text {

  font-weight: 600;

  font-family: "Cinzel";

}



/* .columns-grid-3 {

  padding: 0;

  display: grid;

  grid-template-columns: repeat(2, minmax(350px, 2fr)); 

  gap:20px;

  width: 100%;

  justify-items: center;

  align-content: center;

}

.columns-grid-3 .image-conatiner{

  max-width: 600px;

  width: 100%;

}

.columns-grid-3 .image-conatiner img{

  width: 100%;

} */

.columns-grid-2 {

  padding: 0;

  display: grid;

  grid-template-columns: repeat(2, minmax(350px, 2fr)); 

  gap:20px;

  width: 100%;

  justify-items: center;

  align-content: center;

}

/* Position items in groups of three */

.columns-grid-2 .two-columns {

  grid-column: span 2; /* First item spans two columns */

}



.columns-grid-2 .one-column{

  grid-column: span 1;

}

.columns-grid-2 .image-conatiner{

  max-width: 1900px;

  width: 100%;

}


.columns-grid-2 .image-conatiner img{

  width: 100%;

}

/* project details end*/



/**************************** Single Service Page End ****************************/







/* footer start */

footer {

  background-color: var(--dark-background);

  padding: 40px 10%;

  display: flex;

  justify-content: space-between;

  flex-wrap: wrap;

  width: 100vw;

}



.footer-text{

  font-size: 16px;

}

a{

  color: var(--light-gray-text);

}

.footer-container {

  display: flex;

  width: 100%;

  flex-wrap: wrap;

  justify-content: space-between;

}


.footer-column {
  
  flex: 1 1 1; /* Each column takes up 25% of the width */
  
  margin-right: 30px;
  
}

.footer-container svg path{
  fill: var(--white-text);
  transition: fill 0.4s ease;
}
.footer-container svg:hover path{
  fill: var(--accent);
}


.footer-column h4 {

  margin-bottom: 15px;

  color: var(--white-text);

}



.footer-column ul {

  list-style-type: none;

  padding: 0;

}



.footer-column:nth-child(2) li {

  margin-bottom: 10px;

  text-align: center;

}

.footer-column:nth-child(3) li {

  margin-bottom: 20px;

}

.footer-column li a{

    transition: all 0.4s ease;

}

.footer-column li a:hover {

  color: var(--accent);

  font-size: 18px;

}





.footer-logo {

  margin-bottom: 20px;

  width: 400px;

}



.footer-email {

  padding: 10px;

  width: 100%;

  margin-bottom: 15px;

}



.footer-btn {

  padding: 10px 20px;

  color: white;

  border: none;

  cursor: pointer;

}





/* footer end */



/* 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;

}

.title-line{

  width: fit-content;

}

.title-line .line{

    margin-top: 10px;

    height: 2px;

    width: 100%;

    background-color: var(--accent);

}

/* lang menu end */

/* Dropdown container */

.dropdown {

  position: relative;

  display: inline-block;

}



/* Dropdown button */

.dropbtn {

  background-color: #fff;

  color: #333;

  padding: 10px 15px;

  font-size: 16px;

  border: 1px solid #333;

  border-radius: 4px;

  cursor: pointer;

  display: flex;

  align-items: center;

  gap: 5px;

  transition: background-color 0.3s, color 0.3s;

}



.dropbtn.active,

.dropbtn:hover {

  background-color: #333;

  color: #fff;

}



/* Arrow styling */

.arrow {

  font-size: 12px;

}



/* Dropdown content (hidden by default) */

.dropdown-content {

  display: none;

  position: absolute;

  background-color: #fff;

  min-width: 60px;

  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

  z-index: 1;

  right: 0; /* Align dropdown to the right */

}



/* Links inside the dropdown */

.dropdown-content a {

  color: #333;

  padding: 8px 12px;

  text-decoration: none;

  display: block;

  transition: background-color 0.3s, color 0.3s;

}



.dropdown-content a:hover,

.dropdown-content a.active {

  background-color: #333;

  color: #fff;

}



/* Show the dropdown on hover */

.dropdown:hover .dropdown-content {

  display: block;

}



/* Responsive Adjustments */

@media (max-width: 600px) {

  .dropbtn {

      padding: 8px 12px;

      font-size: 14px;

  }



  .dropdown-content a {

      padding: 6px 10px;

  }

}

.loader{
  width: 100vw;
  position: fixed;
  height: 100vh;
  background:transparent;
  z-index: 100;
  animation: disapear 0s ease-in-out forwards 4s;

}

.loader-left{
  width: 50vw;
  height: 100vh;
  position: absolute;
  left: 0;
  top:0;
  background-color: var(--dark-background);
  animation: slideOutLeft 2s ease-in-out forwards 2s;

}
.loader hr{
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  height: 0;
  width: 3px;
  background: #fff;
  animation: fullhight 1s ease-in-out 1s forwards, fadeOut 0.5s ease 1.8s forwards;


}
.loader-right{
  width: 50vw;
  height: 100vh;
  position: absolute;
  right: 0;
  top:0;
  background-color: var(--dark-background);
  animation: slideOutRight 2s ease-in-out forwards 2s;

}

@keyframes disapear {
  0% {
  }
  100% {
    visibility: hidden;
  }
}
@keyframes fullhight {
  0% {
    height: 0px;
  }
  100% {
    height: 100vh;
    
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
    
  }
}
@keyframes slideOutLeft {
  0% {
      transform: translateX(0);
  }
  100% {
      transform: translateX(-100%);
  }
}

@keyframes slideOutRight {
  0% {
      transform: translateX(0);
  }
  100% {
      transform: translateX(100%);
  }
}

@keyframes slideInLeft {
  0% {
      transform: translateX(-100%);
  }
  100% {
      transform: translateX(0);
  }
}

@keyframes slideInRight {
  0% {
      transform: translateX(100%);
  }
  100% {
      transform: translateX(0);
  }
}