*,
*::before,
*::after{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
:root{
  --FONT-FAMILY:  "Oswald", sans-serif;
  --FONT-SIZE: clamp(1rem, calc(6vw + 1rem), 1.5rem);
  --BG-FOR-TEXT:  linear-gradient(135deg, #c0bbbb, #aca3be);

}
html{
  scroll-behavior: smooth;
  width: 100;
   overflow-x: hidden;

}
 body{
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: linear-gradient(135deg, #0d1117, #1b1f30, #3b0f6f);
  background-size: 300% 300%;
  animation: gradientMove 15s ease infinite;
  font: 400 var(--FONT-FAMILY);
  color: #fff;
 }


header{
  position :sticky;
 top: 0;
 margin-bottom: 2rem;
 transition: background-color 0.3s ease;

}
.navigation-menu{
     padding-top: min(1rem , 6%);
     margin-left:55em;
     cursor: pointer;
     transform: translateY(-100px);
}
.navList{
  list-style: none;
  display: flex;
  gap: 1rem;
  position:relative;

}

.navigation-menu ul li a {
   text-decoration : none;
   font: 200 clamp(1rem , calc(1rem + 6vw), 1.2rem) var(--FONT-FAMILY);
    background:var(--BG-FOR-TEXT);
    position:relative;
    background-clip: text;
    -webkit-background-clip: text;

   -webkit-text-fill-color: transparent;
   white-space: nowrap;
}
.navigation-menu a::after{
  content: '';
  position: absolute;
  left: 0;
  width: 0;
  bottom: -5px;
  height: 0.5px;
  background-color: rgb(170, 155, 164);
  transition: width 0.3s ease;
  will-change: width;

}
.navigation-menu  a:hover{
    color: #a494b6;
}
.navigation-menu  a:hover::after{
    width: 100%;  
}
.logo{
   display: flex;
   justify-content: flex-end;
   transform: translateY(-120%);
   gap: 1rem;
   padding: min(1rem , 8%);
}
.icons{
  width: 1.6rem;
  margin-top:2rem;
}
.nav{
  position: relative;
    opacity: 0;
    transform:translateY(-80px);
   padding: min(1rem , 6%); 
   display: flex;
   justify-content: flex-end;
}
.menu-toggle{
   width:25px ;
   height: 15px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   z-index: 100;
   position: absolute;
   top: 15px;
}
.menu-toggle span{
  width: 100%;
  height: 1px;
  background: lightgray;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
.menu{
   
  position: absolute;
  top: -2rem;
  right: -100%;
   width: 300px;
  height: 100vh;
  transition: right 0.5s ease-in-out;
  display: flex;
  padding: 1rem;
  z-index: 10;
  background: linear-gradient(135deg, #0d1117, #1b1f30, #3b0f6f);
  border-left: 0.5px solid darkslategray;
  padding-left: 20px;
}
.menu ul{
  list-style: none;
  display: flex;
  place-content: center;
  position:relative;
  flex-direction: column;
}
.menu ul li {
  white-space:nowrap;
  z-index: 1;
  text-align: center;
  padding: 3rem;
  column-gap: 1.5rem;
  margin-left: 1rem;
}

.menu ul li a {
  color: lightgray;
  text-decoration: none;
  font: 200 var(--FONT-SIZE) var(--FONT-FAMILY);
  animation: fadeIN 3s ease-in-out 1 forwards;
}
.menu.active{
  right: 0;
}
.menu-toggle.open span:nth-child(1){
  transform: translateY(6px)
  rotate(45deg);
}
.menu-toggle.open span:nth-child(2){
  width: 0;
}
.menu-toggle.open span:nth-child(3){
  transform: translateY(-8px)
  rotate(-45deg);
}
.menu.menu-open{
  opacity: 0.2;
  transition: 0.5s ease-in-out;
}
main{
   transform: translateY(-100px);
}
.hero-content{
   font-weight:400;
   font-family: var(--FONT-FAMILY);
   margin: 0.5rem 1rem;
   display: flex;
}
.intro{
   margin-top: min(10em , 6%);
}
 .intro > pre{
  color: whitesmoke;
  font-family:var(--FONT-FAMILY); 
  font-size: clamp(1rem, 6vw, 1.5rem);
  white-space:nowrap;
  opacity:0;
  animation:  BuzzIN 2s ease-in-out 1 ;
}
.intro > h1{
   background : linear-gradient(135deg, #979696, #aca3be);
   background-clip : text;
   font-size : clamp(1rem,6vw,2rem);
   -webkit-background-clip: text;
   white-space:nowrap;
   -webkit-text-fill-color: transparent;
  
}
h1 + h4{
   font-size: clamp(1rem,6vw,1.2rem);
   background: linear-gradient(135deg, #bbb7b7, #aca3be);
   background-clip:text;
   white-space:nowrap;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}
.hero--image-container{
  margin-left: 30em;
  border: 1px solid rgba(225, 225, 225, 0.2);
  border-radius:20%;
  max-width: 100vw;
  background: rgba(225,225,225,0.1);
  backdrop-filter: blur(20px);
  box-shadow:0 8px 32px rgba(0,0,0,0.2);
}
.hero--image{
    width: 100%;
    max-width: 1200px;
    height: auto;
    aspect-ratio: 1/1;
}
 .about{
  display: block;
 }
.about > h2{

    font: 300 clamp(1rem, calc(6vw + 1rem), 2rem) var(--FONT-FAMILY);
    border-top: 0.5px solid rgba(225, 225, 225, 0.2);
    width: fit-content;
    transform:translateX(40rem);
}
.about--container{
   display: flex;
    gap: 10rem;
}
.about-content{
    margin-left: 2rem;
    position: relative;
    width: 50%;
}
.introduction{
    font: 200 clamp(1rem, calc(6vw + 1rem), 1.5rem) var(--FONT-FAMILY);
    background: linear-gradient(135deg, #c0bbbb, #aca3be);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: fade 2s ease-in-out 1 forwards;
    border: 1px solid rgba(225, 225, 225, 0.2);
    padding: min(4rem , 7%);

    box-shadow: 0 0 1px #00f7ff, 
            0 0 10px #3a0941, 
            0 0 10px #171718, 
            0 0 10px #231a41;

}
.about--image{
   width: 30%;
   max-width: 1200px;
   height: auto;
   border: 1px solid rgba(225, 225, 225, 0.2);
   padding: min(2rem , 7%);
   border-radius: 10px;
   background: rgba(225,225,225,0.1);
    backdrop-filter: blur(20px);
    aspect-ratio: 1/1;
}
.article-container > h3{
  margin-top: 3rem;
  text-align: center;
    font: 200 var(--FONT-SIZE)  var(--FONT-FAMILY);
}
.article-content > h3{
    font: 200 var(--FONT-SIZE)  var(--FONT-FAMILY);
    border-bottom: 1px solid rgba(225, 225, 225, 0.2);
    width: fit-content;
    margin: min(1rem, 7%);
}
 .content{
  font: var(--FONT-SIZE) var(--FONT-FAMILY);
  padding: min(2rem , 7%);
  background: linear-gradient(135deg, #c0bbbb, #aca3be);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.image{
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 5px 5px rgba(0,0,0,0.2);
}
.image img {
     width: 35%;
     height: auto;
     border-radius: 20px;
     max-width: 900px;
     
}
footer{
  background-color: #171718;

  background: rgba(0,0,0,0.2);
}
.footer-container{
  display: flex;
}
.footer-content > h3{
  font: 200 var(--FONT-SIZE) var(--FONT-FAMILY);
   border-top: 0.5px solid rgba(225, 225, 225, 0.2);
   padding: min(2rem , 7%);
}
.social{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: min(2rem , 7%);
}
.social > a {
  text-decoration: none;
  font: 200 clamp(1rem, calc(6vw + 1rem), 1.2rem) var(--FONT-FAMILY);
  color: #fff;
   gap: 1rem;
}
.conclusion-content{
  font: 200 clamp(1rem , calc(0.5rem + 6vw ) , 1.2rem) var(--FONT-FAMILY);
  text-align: center;
}
.footer-bottom{
  font: 200 clamp(1rem, calc(6vw + 1rem), 1.2rem) var(--FONT-FAMILY);
  border-bottom: 1px solid rgba(225, 225, 225, 0.2);
  width: fit-content;
  margin: min(1rem, 7%);
   text-align: center;
}
.footer-img{
  border: 0.5px solid rgba(225, 225, 225, 0.2);
  padding: 0.5rem;
  width: fit-content;
  background: rgba(225,225,225,0.1);
  backdrop-filter: blur(20px);
  height: 500px;
  margin-top: 1rem;
}
button{
  border: none;
  padding: min(1rem , 7%);
  width: 50%;
  border-radius: 10px;
  font: 200  1.1rem var(--FONT-FAMILY);
  white-space: nowrap;
  background: rgba(225, 225, 225, 0.2);
  backdrop-filter: blur(20px);
  overflow: hidden;
  transition: color 0.5s ease-in-out;
  z-index: 1;
  position: relative;
}
.btn{
  width: 10%;
  margin-left: 2rem;
}
button a{
  text-decoration: none;
  color: #fff;
}
button a::before{
  content: '';
  position: absolute;
  left: 0;
  height: 100%;
  width: 100%;
  transition: top 0.5s ease-in-out;
  top: -100%  ;
  z-index: -1;
  background: rgb(207, 194, 202);
}
button a:hover::before{
  top: 0;
}
button a:hover{
  color: #000;
}
.service-heading{
    font: 400 clamp(1rem, calc(1rem + 8vw), 1.6rem) var(--FONT-FAMILY);
    text-align: center;
}
.service-description{
  font: 200 clamp(1rem, calc(1rem + 8vw), 1.5rem) var(--FONT-FAMILY);
   padding: min(2rem , 7%);
}

.details > h3{
  font: 300 clamp(1rem, calc(1rem + 8vw), 1.5rem) var(--FONT-FAMILY);

}
.details > p {
  font: 200 clamp(1rem, calc(1rem + 8vw), 1.1rem) var(--FONT-FAMILY);
  background: linear-gradient(135deg, #c0bbbb, #aca3be);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.movie-statement{
  display: flex;
  white-space: nowrap;
  transform: translateY(200px);
  width: fit-content;
  margin-left: 1rem;
}
.filmography{
   display: flex;
   white-space: wrap;
   justify-content: space-between;
}
.statement{
  display:flex;
  background-color:#222;
   border-radius: 10px;
   width: 50%;
   padding: min(1rem , 7vw);
   height: 18px;  
   transform: translateY(35px);
   margin-left: 0.5rem;

}
.statement img{
   width: 18px;
   height: 18px;
   object-fit:cover;
   transform: translateY(-10px);
  /*  transition: 5s ease-in-out; */
  will-change: transform;
}
.statement span{
   font-family: var(--FONT-FAMILY);
   font-size: clamp(0.7rem , 8vw ,  1rem);
   font-weight: 200;
   transform: translateY(-13px);
}
.statement img:hover{
  transform: scale(1.1);
}
 

.swiper {
  width: 300px;
  max-width: 900px;
  margin: auto;
  padding: 2rem 0;
}


.swiper-wrapper {
  display: flex;
}

.swiper-slide {
  padding: 2rem;
  text-align: center;
  
}
.swiper-slide img {
   border-radius: 20px;
  width : 250px;
  max-width : 700px;
  height : auto;
}


   
.service{
    font: 400 var(--FONT-SIZE) var(--FONT-FAMILY);
    margin: auto;
    border-top: 0.5px solid rgba(225, 225, 225, 0.2);
    border-bottom: 0.5px solid rgba(225, 225, 225, 0.2);
    width: fit-content;
    background: transparent;
}
.service-info{
     font: 200 clamp(1rem , 8vw , 1.2rem) var(--FONT-FAMILY);
     text-align: center;
}
figure{
  width: 50%;
  padding-bottom: 1rem;
  
}
.service-content{
  display: grid;
  grid-template-columns: repeat(3 , 2fr );
  margin-left: 5rem;
}
.service-content img{
  border: 0.5px solid rgba(225, 225, 225, 0.2);
  padding: 2rem;
  margin: 1rem;
}
figcaption h4{
   font: 250 clamp(1rem , 7vw , 1.1rem) var(--FONT-FAMILY);
   transform: translateY(-65px);
   margin-left: 7rem;
   white-space: nowrap;
   
}
figcaption p{
   font: 250 0.8rem var(--FONT-FAMILY);
   white-space: nowrap;
   transform: translateY(-70px);
   text-align: center;
}
.info-0{
   margin-left: 3.5rem;
}
.info-1{
   margin-left: 3.5rem;
}
.info-2{
   margin-left: 4rem;
}
.info-3{
   margin-left: 1.5rem;
}
.info-4 , 
.info-5{
   margin-left: 5rem;
}
.text-4{
  margin-left: 5.2rem;
}
.text-5{
  margin-left: 8rem;
}
.service-table-section{
  padding: 2rem;
  text-align: center;
  color: white;
}
.service-table-section > h3{
    font: 300 clamp(1rem , 7vw , 1.4rem) var(--FONT-FAMILY);
}
.service-table{
   width: 100%;
   border-collapse: collapse;
   margin-top: 1.5rem;
   background-color: rgba(225, 225, 225, 0.05);
   border: 1px solid #444;
}
.service-table th,
.service-table td{
  font-family: var(--FONT-FAMILY);
    padding: min(1rem ,  7%);
    border: 1px solid #555;

}
.service-table th{
  background-color: #222;
  color:  #2badad;
  font-size: 1.2rem;
  font-weight: 300;
}
.service-table td{
  background-color: rgba(225, 225, 225, 0.02);
  font-weight: 200  ;
}
.service-table tr:hover{
  background-color: rgba(0,255,255,0.03);
}
fieldset{
   border: none;
   margin: auto;
    display: flex;
    justify-content: flex-end;
    transform: translateX(-100px);
    align-items:  center;
}
label{
  font : 200 clamp(1rem , 7vw , 1.2rem) var(--FONT-FAMILY);
}
input{
   width: 100%;
   max-width: 1200px;
   border-radius: 2rem;
   padding: 1.2rem;
   background: rgba(225, 225, 225, 0.05);
   border: 2px solid rgba(225, 225, 225, 0.02);
   color: whitesmoke;
   font-size: 16px;
   font-family: var(--FONT-FAMILY);
   
}
textarea{
  background: rgba(225, 225, 225, 0.05);
  border: 2px solid rgba(225, 225, 225, 0.02);
  width: 100%;
  max-width: 1200px;
  padding: 1.5rem;
  overflow: hidden;
  font: 200 clamp(1rem , 8vw ,  1.2rem) var(--FONT-FAMILY);
  color: whitesmoke;
}
input::placeholder,
textarea::placeholder{
  font-family: var(--FONT-FAMILY);
  font-size: 0.85rem;
  background: linear-gradient(135deg, #bbb7b7, #aca3be);
  background-clip:text;
  white-space:nowrap;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* CSS for styling the submit button */
.submit-container {
  margin-top: 20px;
  text-align: right;
}

.submit-button {
  background-color: #3f51b5;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
  min-width: 150px;
  outline: none;
}

.submit-button:hover {
  background-color: #303f9f;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.submit-button:active {
  transform: translateY(1px);
}

/* Button states */
.submit-button.loading .button-text {
  visibility: hidden;
}



.submit-button.loading .button-loader {
  display: block;
}



/* Disabled state */
.submit-button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}
.Contact-info > h3{
    font: 500 clamp(1rem , 7vw ,  2rem) var(--FONT-FAMILY);
    margin-left: 2rem;
    display: flex;
     transform: translateY(100px);
}
.Contact-info > pre{
  font: 200 clamp(1rem , 7vw ,  1.2rem) var(--FONT-FAMILY);
  margin-left: 2rem;
  display: flex;
   transform: translateY(100px);
}

.faq-section{
     max-width: 700px;
     margin: auto;
     padding: 2rem;
     color: #fff;
     background: #111;
}
.faq-section h4{
     text-align: center;
     margin-bottom: 2rem;
     font: 400 clamp(1rem , 8vw , 1.4rem) var(--FONT-FAMILY);

}
.faq{
    margin-bottom: 1rem;
    border-radius: 10px;
    background-color: #222;
}
.faq-question{
  width: 100%;
  max-width: 1200px;
  padding: 1rem;
  font-size: 1rem;
  text-align: left;
  background: #222;
  border: none;
  color: white;
  cursor: pointer;
  position: relative;
}
.faq-question::after{
  content: '+';
  position: absolute;
  right : 1rem;
  font-size: 1.5rem;
  transition: transform 0.3s ease-in-out;
}
.faq.open .faq-question::after{
  content: '-';
}
.faq-answer{
  max-height: 0;
  background: #111;
  transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
  padding: 0.1rem;
  font-size: 0.9rem;
  overflow: hidden;
  color: whitesmoke;
  font-family: var(--FONT-FAMILY);
}

  .faq.open .faq-answer{
  max-height: 200px;
  padding: 1rem;
  overflow: visible;
}