/* Importing Google fonts - Inter */
 @import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&display=swap');
 @import url('https://fonts.cdnfonts.com/css/ica-rubrik-black');
 @import url('https://fonts.cdnfonts.com/css/poppins');

html {
   font-size: 100%;
   overflow-x: hidden;
   scroll-behavior: smooth; /* Enable smooth scrolling */
}

::selection {

   background-color: #10a4b0; /* Yellow background color */
 
   color: black; /* Optional: Set text color within the selection */
 
 }

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   text-decoration: none;
   border: none;
   outline: none;
   font-family: 'Poppins', sans-serif;
}

body {
   width: 100%;
   height: 100%;
   margin: 0;
   overflow: hidden; /* Prevent scrolling */
   background: linear-gradient(180deg, #000000, #aef7fd,#10a4b0);
   color: white;
   position: relative; /* To position absolute elements correctly */
}

.sec1 {
   position: relative;
   background: linear-gradient(to bottom, black 0%, #0c0c0c 100%);
   background: linear-gradient(180deg, #000000,#0c0c0c);
   margin: 0;
   padding-top: 0;
   margin-top: 0;
   height: auto; /* Adjust height based on content */
   padding-left: 20px; /* Add some padding */
   padding-right: 20px; /* Add some padding */
   padding-bottom: 100px;
  
}

.sec1-content {
   display: flex; /* Use flexbox for layout */
   align-items: center; /* Center items vertically */
   justify-content: space-between; /* Space between text and image */
   padding: 20px; /* Add padding for spacing */
}

.sec1-text {
   flex: 1; /* Allow text to take available space */
   padding-top: 10vh;
   padding-right: 20vw; /* Space between text and image */
   padding-left: 10vw;
}

.sec1 h1 {
   color: #10a4b0;
   font-size: 3rem;
   font-weight: 700;
}

.sec1 p {
   font-size: 1.5rem;
   line-height: 1.8;
}

.sec1 .points {
   padding-top: 2vh;
   font-size: 1.5rem;
   line-height: 1.8;
}


/* Image Styles */
.sec1image {
   margin-top: 10vh;
   margin-right: 10vw;
   width: 18vw; /* Set width of the image */
   height: auto; /* Maintain aspect ratio */
   transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover */
}

.sec1image:hover {
   transform: scale(1.02); /* Scale up on hover */
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); /* Increase shadow on hover */
}

.divider {
   width: 50%; /* Width of the divider */
   height: 2px; /* Thickness of the divider */
   background-color: #10a4b0; /* Color of the divider */
   margin: 0px auto; /* Center the divider and add vertical space */
}

/* SECTION 2 */

.sec2 {
   position: relative;
   background-color: #0c0c0c;
   margin: 0;
   height: auto; /* Adjust height based on content */
   padding: 20px; /* Add some padding */
   padding-bottom: 100px;
   
}

.sec2-text {
   padding-top: 20vh;
   text-align: center;
}

.sec2 h1 {
   color: #10a4b0;
   font-size: 3rem;
   font-weight: 700;
}

.sec2 p {
   font-size: 1.5rem;
   line-height: 1.8;

}

.sec2 h6{
   font-size: 1rem;
}



.sec2-wrapper {
   display: flex; /* Use flexbox for layout */
   justify-content: center; /* Center items horizontally */
   flex-wrap: wrap; /* Allow items to wrap to the next line if needed */
}

.sec2-list {
   list-style: none; /* Remove default list styling */
   padding: 0; /* Remove padding */
   padding-top: 5vh;
   display: flex; /* Use flexbox for layout */
   justify-content: center; /* Center items horizontally */
   gap: 150px; /* Space between items */
}

.sec2-item {
   background: linear-gradient(180deg, #141411, #141414);
   text-align: center;
   flex-basis: 30%; /* Use flex-basis instead of width for better responsiveness */
   max-width: 350px; /* Optional: set a max width */
   margin: 20px; /* Add some margin for spacing */
   padding: 20px; /* Add some padding for spacing */
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
   border-radius: 10px; /* Add a subtle border radius */
   transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover */
}

.sec2-item:hover {
   transform: scale(1.03); /* Scale up on hover */
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); /* Increase shadow on hover */
}

.sec2image {
   width: 100%; /* Make the image take the full width of the item */
   height: auto; /* Maintain aspect ratio */
   /* border-radius: 10px; Optional: rounded corners */
   border: 5px solid #10a4b0; /* Optional: border */
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Optional: shadow */
}

.sec2images h2{
   text-align: left;
   padding-top: 2vh;
   font-size: 1.4rem;
}

.sec2images p{
   text-align: left;
   padding-top: 1vh;
   font-size: 1.1rem;
}



.sec3{
   position: relative;
   width: 100vw;
   height: 100vh;
   background-color: #0c0c0c;
   background-image:
   repeating-linear-gradient(
       to right, transparent 0 100px,
       #25283b22 100px 101px
   ),
   repeating-linear-gradient(
       to bottom, transparent 0 100px,
       #25283b22 100px 101px
   );
   
}

.sec3::before{
   position: absolute;
   width: min(1400px, 90vw);
   top: 10%;
   left: 50%;
   height: 90%;
   transform: translateX(-50%);
   content: '';

   background-size: 100%;
   background-repeat: no-repeat;
   background-position: top center;
   pointer-events: none;
}

.banner{
   width: 100%;
   height: 100vh;
   text-align: center;
   overflow: hidden;
   position: relative;
}

.banner .slider{
   position: absolute;
   width: 200px;
   height: 300px;
   top: 20%;
   left: calc(50% - 100px);
   transform-style: preserve-3d;
   transform: perspective(1000px);
   animation: autoRun 20s linear infinite;
   z-index: 2;
}
@keyframes autoRun{
   from{
       transform: perspective(1000px) rotateX(-16deg) rotateY(0deg);
   }to{
       transform: perspective(1000px) rotateX(-16deg) rotateY(360deg);
   }
}

.banner .slider .item{
   position: absolute;
   inset: 0 0 0 0;
   transform: 
       rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))
       translateZ(550px);
   border: 2px solid #10a4b0;
}

.banner .slider .item img{
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.banner .content{
   position: absolute;
   top: 45vh;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   width: min(1400px, 100vw);
   height: max-content;
   padding-bottom: 100px;
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
   z-index: 1;
}

.banner .content h1{
   font-family: 'ICA Rubrik';
   font-size: 8em;
   line-height: 1em;
   color: #000000;
   position: relative;
   transition: 0.3s ease;
}



.banner .content h1::after{
   position: absolute;
   inset: 0 0 0 0;
   content: attr(data-content);
   z-index: 2;
   -webkit-text-stroke: 2px #10a4b0;
   color: transparent;
}
.banner .content h1:hover {


   text-shadow: 0 0 10px #10a4b0;

}

.banner .content .author{
   font-size: 1.1rem;
   font-family: Poppins;
   text-align: center;
   /* max-width: 300px; */
   color: white;
   font-style: italic;
}

.banner .content .model{
   background-image: url(images/PO.png);
   width: 100%;
   height: 70vh;
   position: absolute;
   margin-bottom: 35vh;
   bottom: 0;
   left: 0;
   background-size: auto 130%;
   background-repeat: no-repeat;
   background-position: top center;
   z-index: 1;
   rotate: 7deg;
}
@media screen and (max-width: 1023px) {
   .banner .slider{
       width: 160px;
       height: 200px;
       left: calc(50% - 80px);
   }
   .banner .slider .item{
       transform: 
           rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))
           translateZ(300px);
   }
   .banner .content h1{
       text-align: center;
       width: 100%;
       text-shadow: 0 10px 20px #000;
       font-size: 7em;
       margin: 0;
       margin-top: -50%;
   }
   .banner .content .author{
       color: #fff;
       padding: 20px;
       text-shadow: 0 10px 20px #000;
       z-index: 2;
       max-width: unset;
       width: 100%;
       text-align: center;
       padding: 0 30px;
       margin: 0;
       margin-top: -50%;
       font-size: 1rem;


       
   }
   
}
@media screen and (max-width: 767px) {
   .banner .slider{
       width: 100px;
       height: 150px;
       left: calc(50% - 50px);
   }
   .banner .slider .item{
       transform: 
           rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))
           translateZ(180px);
   }
   .banner .content h1{
       padding: 0;
       font-size: 4em;
   }
   .banner .content p{
       font-size: 0.9em;
   }

   .banner .content .model{
       height: 45vh;
       margin-bottom: 25vh;
   }
   .banner .content h1:hover {

       color: #10a4b0;
       text-shadow: 0 0 5px #10a4b0;
   
   }
   .banner .content{
       position: absolute;
       top: 45vh;
       bottom: 0;
       left: 50%;
       transform: translateX(-50%);
       width: min(1400px, 100vw);
       height: max-content;
       padding-bottom: 100px;
       display: flex;
       flex-direction: column;
       flex-wrap: wrap;
       justify-content: space-between;
       align-items: center;
       z-index: 1;
   }
   .sec3{
   padding-bottom: 150px;}
   

}

.white{background-color: white;}


.sliderSec{
   position: relative;
   background: linear-gradient(to bottom,#0c0c0c 10%,   black 100%);
   margin: 0;
   padding-top: 10vh;
   height: 100vh;
   width: 100vw;
   align-content: center;
   padding: 0; /* Remove empty spacing */
   z-index: 2;
}

.sliderSec h1{
   color: #10a4b0;
   font-size: 4rem;
   text-align: center;
   
}

.sliderSec h2{
   color: #10a4b0;
   font-size: 2rem;
   text-align: center;
   
}

.sliderSec p{
   font-size: 1.5rem;
   text-align: center;
   margin-bottom: 2%;

}

/* Slider Image Cards */
.slider{
   width: 60%;
   font-family: "Inter", sans-serif;
   background: transparent;
   color: white;
   position: relative; /* To position absolute elements correctly */
}


.card-wrapper{
   margin: 0 60px 35px;
   padding: 20px 10px;
   overflow: hidden;
}

.card-wrapper .swiper-pagination-bullet{
   height: 13px;
   width: 13px;
   opacity: 0.5;
   background: #10a4b0;
}

.card-wrapper .swiper-pagination-bullet-active{
   opacity: 1;
}

.card-wrapper .swiper-slide-button{
   color: #10a4b0;
   margin-top: -35px;
}
  
.card-list .card-item {
   list-style: none;
}

.card-list .card-item .card-link{
   user-select: none;
   display: block;
   background: linear-gradient(180deg, #141411, #141414);
   padding: 18px;
   border-radius: 12px;
   text-decoration: none;
   border: 2px solid transparent;
   box-shadow: 0 10px 10px rgb(0, 0, 0,0.05);
   transition: 0.2s ease;
   
}

.card-list .card-item .card-link:hover{
   border-color: #10a4b0;
}

.card-list .card-link .card-image {
   width: 100%;
   aspect-ratio: 16 / 9;
   object-fit: cover;
   border-radius: 10px;
}


.card-list .card-link .badge{
   color: #10a4b0;
   padding: 8px 16px;
   font-size: 0.95rem;
   font-weight: 500;
   margin: 16px 0 18px;
   background: rgb(200, 176, 176);
   width: fit-content;
   border-radius: 50px;
}

.card-list .card-link .badge.title{
   color:#ffffff;
   background: #10a4b0;
}

.card-list .card-link .card-title{
   font-size: 1.19rem;
   color: #ffffff;
   font-weight: 600;
   text-align: left;
}

.card-list .card-link .card-button{
   height: 35px;
   width: 35px;
   color: #10a4b0;
   border-radius: 50%;
   margin: 30px 0 5px;
   background: none;
   cursor: pointer;
   border: 2px solid #10a4b0;
   cursor: pointer;
   transform: rotate(-45deg);
   transition: 0.4s ease;
}

.card-list .card-link:hover .card-button{
   color: white;
   background: #10a4b0;
}

.btn-services {
   margin-top: 5vh;
   margin-left: 45.4vw;
   display: inline-block;
   padding: 1rem 2.8rem;
   border-radius: 0rem;
   font-size: 2rem;
   font-weight: 600;
   letter-spacing: 0.2rem;
   transition: 0.3s ease;
   cursor: pointer;
   background-color: #000000;
   color: #10a4b0;
   border: 2px solid #10a4b0;
}

.btn-services:hover {
   background: linear-gradient(90deg, #00eaff,#10a4b0);
   color: black;
   box-shadow: 0 0 20px #10a4b0;
}

.container {
   width: 100vw;
   height: 100vh;
   position: absolute; /* Ensure it covers the entire viewport */
   top: 0;
   left: 0;
   z-index: -1; 
}

/* Stars Background */
.star {
   position: absolute;
   border-radius: 50%;
   background-color: rgb(255, 255, 255); /* Faded white */
   animation: twinkle 2s infinite alternate;
   opacity: 0.2;
}

@keyframes twinkle {
   0% {
       transform: scale(1);
       opacity: 0.5;
   }
   100% {
       transform: scale(1.2);
       opacity: 0.3; /* Faded effect */
   }
}

.dust {
   position: absolute;
   border-radius: 50%;
   background-color: #00eaff;
   animation: float 5s infinite alternate;
   opacity: 0.5;
}

@keyframes float {
   0% {
       transform: translateY(0);
   }
   100% {
       transform: translateY(-10px);
   }
}

canvas {
   position: absolute;
   top: 0;
   left: 0;
   z-index: -1; /* Make sure the canvas is behind other content */
}

/* Navigation Bar */
header {
   position: fixed;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 15px 20px;
   background-color: transparent;
   transition: background-color 0.3s ease;
   width: 100%;
   top: 0;
   left: 0;
   z-index: 1500;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.logo {
   display: flex;
   align-items: center;
}


.logo:hover {
   transform: scale(1.1);
   transition: transform 0.3s ease, color 0.3s ease;
}

.logo-text {
   margin-top: 50;
   color: white;
   font-size: 1.2rem;
}

.nav-links {
   list-style: none;
   display: flex;
   gap: 15px;
}

.nav-links a {
   font-size: 1rem;
   font-weight: 500;
   color: white;
   padding: 8px 12px;
   border-radius: 5px;
}

.nav-links a.active,
.nav-links a.current {
   background: linear-gradient(134deg, #10a4b0, #008996);
   color: white;
}

.nav-links a:hover,
.nav a.active {
   background: linear-gradient(134deg, #10a4b0, #008996);
   color: white;
}

.scrolled {
   background-color: black;
   transition: color 0.3s ease;
}

/* Text Formating */
.introduction {
   padding-left: 120px;
   padding-top: 10%;
   padding-bottom: 0;
   margin-bottom: 0;
   text-align: center;
   font-size: 2rem;
   font-weight: 700;
   line-height: 1.8;
   transform: translateY(-50px); /* Start 50px above its final position */
   animation: slideDown 1s forwards; /* Animation name, duration, and forwards to keep the final state */
}

.introduction h1 {
   position: relative;
   font-size: 6rem;
   font-weight: 700;
   line-height: 1.3;
   margin-top: 40px;
   margin-left: 12vw;
   text-align: left;

}

.introduction h3 {
   position: relative;
   font-size: 3rem;
   margin-bottom: 1rem;
   font-weight: 700;
   margin-left: 12vw;
   text-align: left;
   margin-bottom: 50px;
   line-height: 1.5;
   color: #ffffff;
}

.introduction p {
   position: relative;
   margin-left: 12vw;
   font-size: 1.5rem;
   font-weight: 400;
   text-align: left;
}

/* Heading typing Animation */
.typing-animation {
   font-size: 3rem;
   white-space: nowrap;
   overflow: hidden;
   width: 0; /* Start with no width */
   animation: typing 2s steps(35, end) forwards, blink .5s step-end infinite;
   border-right: 3px solid white; /* Cursor */
}
 
 
 @keyframes typing {
   from {
     width: 0; /* Start typing effect */
   }
   to {
       width: 33ch; /* Reveal entire text */
   }
 }
 
 @keyframes blink {
   50% {
     border-color: transparent; /* Blink effect for cursor */
   }
 }
 



.contact{
   position: relative;
   background-color: #000;
   text-align: center;

}

.golden{
   color: #10a4b0;
}

/* Social Icons */
.social-icons a {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   width: 5rem;
   height: 5rem;
   background-color: transparent;
   border: 0.2rem solid #10a4b0;
   font-size: 2.5rem;
   border-radius: 50%;
   margin: 3rem 1rem;
   transition: 0.3s ease;
   color: #10a4b0;
}

.social-icons a:hover {
   color: black;
   transform: scale(1.2) translateY(-5px);
   background-color: #10a4b0;
   box-shadow: 0 0 20px #10a4b0;
}



/* Buttons i.e Hire Me, Let's Talk */

.btn {
   margin-top: 5%;
   margin-left: -50%;
   display: inline-block;
   padding: 1rem 2.8rem;
   border-radius: 3rem;
   font-size: 2rem;
   font-weight: 600;
   letter-spacing: 0.2rem;
   transition: 0.3s ease;
   cursor: pointer;

   background-color: transparent;
   color: #10a4b0;
   border: 2px solid #10a4b0;
}


.btn:hover {
   background: linear-gradient(90deg, #00eaff,#10a4b0);
   color: black;
   box-shadow: 0 0 20px #10a4b0;
}

/* Ipad,Tablets Responsive Adjustments */
@media (max-width: 768px) {
   .navbar {
       background-color: black;
       flex-direction: row;
       padding: 10px 15px;
   }

   .toggle-btn {
       display: block;
       margin-left: 30%;
   }

   .nav-links {
       flex-direction: column;
       position: absolute;
       top: 50px;
       left: 0;
       background-color: black;
       width: 100%;
       padding: 0; /* Remove padding for animation */
       border-radius: 5px;
       text-align: center;
       opacity: 0; /* Start with opacity 0 */
       max-height: 0; /* Start with max-height of 0 */
       overflow: hidden; /* Hide overflow to prevent content from showing */
       transition: max-height 0.5s ease, opacity 0.5s ease; /* Add transition for max-height and opacity */
   }

   .nav-links.active {
       opacity: 1; /* Fully visible when active */
       max-height: 300px; /* Set a max-height that is greater than the content height */
       padding: 10px 0; /* Add padding when active */
   }

   .nav-links a {
       font-size: 0.8rem;
       text-align: center;
       padding: 10px; /* Add padding for better touch targets */
   }
}

/* Mobile Responsive Adjustments */
@media (max-width: 480px) {
   .menu-toggle {
       font-size: 1rem;
   }

   .logo, .logo-text {
       font-size: 1rem;
   }

   .introduction {
       margin-top: 5%; 
       margin-bottom: 0;
       padding-bottom: 0;
       padding-left: 20px; /* Add some padding */
       padding-right: 20px; /* Add some padding */
   }

   .introduction h1 {
       margin-left: 5vw;
       font-size: 2.2rem;
   }

   .introduction h3 {
       margin-left: 5vw;
       margin-bottom: 5%;
       font-size: 1.5rem;
   }

   .btn-services{
       padding-bottom: 0px;
       margin-bottom: 0px;
   }


   .sliderSec{
       width: 100%;
   }

   .sliderSec h1{

       font-size: 2rem;
       text-align: center;
       
   }

   .sliderSec h2{

       font-size: 1.5rem;
       text-align: center;
       
   }
   
   .sliderSec p{
       font-size: 1rem;
       text-align: center;
       margin-bottom: 2%;
   }
   body{
       /* background: linear-gradient(180deg, #0a0a0a, #837f48); */
       background: linear-gradient(to bottom, black 0%, #0c0c0c 100%);
   }

   .sec1{
       margin-top: 0;
       padding-top: 0;
       padding-bottom: 100px;
   }

.sec1-content {
   flex-direction: column;
   align-items: center; /* Center items vertically */
   text-align: center;
   padding: 0px; /* Add padding for spacing */

}

.sec1-text {
   text-align: left;
   padding-right: 0; /* Space between text and image */
   padding-bottom: 0;
   padding-left: 2vw;
   
}

.sec1 h1 {
   font-size: 1.5rem;
   font-weight: 700;
}

.sec1 p {
   font-size: 1rem;

}

.sec1 .points {
   font-size: 1rem;

}

.divider {
   width: 80%; /* Width of the divider */
   margin-top: 100px;
   margin-bottom: 0;
}

.contact{
   padding-top: 50px;
}


/* Image Styles */
.sec1image {
   height: auto;
   margin-bottom: 50px;
   margin-left: 5vw;
   text-align: center;
}

   .typing-animation{display: none;}

   .introduction p {
       margin-left: 5vw;
       font-size: 1rem;
   }

   .social-icons a {
       margin-top: 30px;
       margin-bottom: 5%;
       margin-left: 4px;
       margin-right: 4px;
       width: 2.7rem;
       height: 2.7rem;
       font-size: 1.5rem;
       border: 0.1rem solid #008996;
   }

   .btn {
       display: inline-flex;
       margin: 0;
       margin-top: 10%;
       font-size: 1.1rem;
       padding: 0.8rem 2rem;
       text-align: left;
       font-weight: 600;
   }

   .btn-services {
   margin-top:50px;
   margin-left: 33vw;
   text-align: center;
   padding: 1rem 1rem;
   font-size: 1.1rem;
   font-weight: 600;
   letter-spacing: 0.2rem;

   background-color: #000000;
   color: #008996;
   border: 2px solid #008996;
}
}

/* Mobile-specific styles */
@media screen and (max-width: 768px) {
   .container {
       animation: fadeOutScale 1s ease-in-out forwards;
   }

   .card-wrapper{
       margin: 0 10px 25px;

   }

   .slider{
       width: 100%;}

   .card-wrapper .swiper-slide-button{
       display: none;
   }
}

/* Stars Disabled on mobile devices */
@media screen and (max-width: 768px) {
   #starContainer, #shootingStarsCanvas, .typing-animation, #hills{
       display: none; /* Hide all stars, dust particles, and shooting stars */
   }
}

/* Custom Scrollbar Styles */
::-webkit-scrollbar {
   width: 12px; /* Width of the scrollbar */
   height: 12px; /* Height of the scrollbar */
}

::-webkit-scrollbar-track {
   background: linear-gradient(180deg, #000000, #000000); /* Background of the scrollbar track */
}

::-webkit-scrollbar-thumb {
   background: linear-gradient(180deg, #10a4b0, #10a4b069); /* Gradient for the scrollbar thumb */
   border-radius: 10px; /* Rounded corners for the scrollbar thumb */
}


::-webkit-scrollbar-corner {
   background: transparent; /* Background for the corner where scrollbars meet */
}


/* Hamburger Menu */
.block {
   height: 40px; 
   width: 40px;  
   border-radius: 5px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-left: 40%;
   transition: all 1s ease;
   background: linear-gradient(134deg, #10a4b0, #00eaff);

}

.cta {
   height: 40px; 
   width: 40px;  
   cursor: pointer;
}

.toggle-btn {
   height: 2px;
   border-radius: 6px;
   width: 18px; 
   background-color: #fff;
   position: relative;
   top: 50%;
   left: 0;
   transition: all 0.3s ease-in-out;
   text-align: center;
}

.toggle-btn:before {
   content: "";
   height: 2px;
   border-radius: 6px;
   width: 18px; 
   box-shadow: 0 -10px 0 0 #fff;
   position: absolute;
   top: 0;
   left: 0;
   transition: all 0.3s ease-in-out;
   text-align: center;
}

.toggle-btn:after {
   content: "";
   height: 2px;
   border-radius: 6px;
   width: 18px; 
   box-shadow: 0 10px 0 0 #fff;
   position: absolute;
   top: 0;
   left: 0;
   transition: all 0.3s ease-in-out;
   text-align: center;
}

.active .toggle-btn {
   background-color: transparent;
   transition: all 0.2s ease-in-out;
}

.active .toggle-btn:before {
   left: 6px;
   transform: translateY(6px) rotate(-45deg);
}

.active .toggle-btn:after {
   left: 6px;
   transform: translateY(-8px) rotate(45deg);
}

/* Removes Hamburger Menu on larger screeens as it for mobile devices only */
@media (min-width: 769px) {
   #menuToggle, .toggle-btn,.toggle-btn:after,.toggle-btn:before,.block ,.mobile-typing-text {
       display: none;
   }
}

/* Parallax */
.parallax{
   position: relative;
   display: flex;
   height: 100vh;
   margin-bottom: 0;
   padding-bottom: 0;
}

.parallax img{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
}

/* Responsive Parallax for mobile */
   @media (max-width: 768px) {
     .parallax {
       background-attachment: scroll;
     }
   }

   .content {
     position: relative;
     z-index: 2;
     text-align: center;
     padding-top: 40vh;
   }

/* Responsive Styles */
@media (max-width: 768px) {
   .sec2-list {
       flex-direction: column; /* Stack items vertically */
       align-items: center; /* Center items */
       margin-bottom: 50px;
   }

   .sec2-item {
       width: 80%; /* Set width to 80% for smaller screens */
       max-width: none; /* Remove max-width to allow full width */
       margin-bottom: -150px; /* Add space between items */
   }

   .sec2-text {
       padding: 0 10px; /* Add some padding for text */
   }

}

@media (max-width: 480px) {
   .sec2-text h1 {
       font-size: 1.5rem; /* Adjust heading size */
   }

   .sec2-text p {
       font-size: 1rem; /* Adjust paragraph size */
   }



   .sec2images h2{
       text-align: left;
       padding-top: 2vh;
       font-size: 1rem;
   }
   
   .sec2images p{
       text-align: left;
       padding-top: 1vh;
       font-size: 0.9rem;
   }
}


/* ANIMATIONS */

@keyframes slideDown {
   from {
       opacity: 0; /* Start fully transparent */
       transform: translateY(-50px); /* Start 50px above */
   }
   to {
       opacity: 1; /* End fully opaque */
       transform: translateY(0); /* End at its original position */
   }
}

/*     animation: animate 5s linear infinite;
   outline: none; */

@keyframes animate{
   0%,18%,20%,50.1%,60%,65.1%,80%,90.1%,92% {color: #ba901c;
       text-shadow: none;
}
18.1%,20.1%,30%,50%,60.1%,65%,80.1%,90%,92.1%,100%
{
   color: white;
   text-shadow: 0 0 10px #ba901c,
   0 0 20px #ba901c,
   0 0 40px #ba901c,
   0 0 80px #ba901c,
   0 0 160px #ba901c,

}
}

@media only screen and (max-width: 2269px) 
{
   .introduction{
       width: 100vw;
       margin-left: 0%;
       padding-left: 0%;
   }
   .typing-animation{
       width: 100vw;
   }

   .sec1image{
       margin-right: 5vw;
       width: 20vw; /* Set width of the image */
       height: auto; /* Maintain aspect ratio */
   }
   .slider{
       width: 70%;
      
   }
}

@media only screen and (max-width: 480px) 
{
   .parallax{
       margin-bottom: 0;
       padding-bottom: 0;
       height: auto;
   }
   .introduction{
       
       margin-bottom: 0%;
       padding-bottom: 0%;
   }

   .sec1{
       min-height: 100px; /* Set a minimum height */
       margin-bottom: 0%;
       padding-bottom: 0%;
   }

   .typing-animation{
       width: 100vw;
   }

   .sec1image{
       margin-right: 5vw;
       width: 60vw; /* Set width of the image */
       height: auto; /* Maintain aspect ratio */
   }
   .slider{
       width: 100vw;
      
   }
}
/* PARALLAX EFFECT */
#hills{
   align-items: center; 
   justify-content: center;
   z-index: 3;
   object-fit: cover;
}

.animated-section {
   opacity: 0; /* Start hidden */
   transform: translateY(20px); /* Start slightly below */
   transition: opacity 2s ease, transform 0.6s ease; /* Transition for smooth effect */

   border-radius: 8px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Fade-in effect when the section is visible */
.animated-section.visible {
   opacity: 1; /* Fully visible */
   transform: translateY(0); /* Move to original position */
}

/* Additional animations for sub-elements */
.animated-section h2 {
   opacity: 0; /* Start hidden */
   transform: translateY(10px); /* Start slightly below */
   transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s; /* Delay for sub-elements */
}

.animated-section.visible h2 {
   opacity: 1; /* Fully visible */
   transform: translateY(0); /* Move to original position */
}

.animated-section h3 {
   opacity: 0; /* Start hidden */
   transform: translateY(10px); /* Start slightly below */
   transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s; /* Delay for sub-elements */
}

.animated-section.visible h3 {
   opacity: 1; /* Fully visible */
   transform: translateY(0); /* Move to original position */
}

.animated-section p {
   opacity: 0; /* Start hidden */
   transform: translateY(10px); /* Start slightly below */
   transition: opacity 0.6s ease 0.4s, transform 0.6s ease 0.4s; /* Delay for sub-elements */
}

.animated-section.visible p {
   opacity: 1; /* Fully visible */
   transform: translateY(0); /* Move to original position */
}

/* IMAGE HORIZONTAL ANIMATION */
.animated-section .sec1image {
   opacity: 0; /* Start hidden */
   transform: translateX(150px); /* Start slightly below */
   transition: opacity 2s ease 0.2s, transform 0.6s ease 0.2s; /* Delay for sub-elements */
}

.animated-section.visible .sec1image {
   opacity: 1; /* Fully visible */
   transform: translateX(0); /* Move to original position */
}

footer {
   text-align: center;
   padding: 10px;
   background-color: black;
   color: #fff;
   font-size: 0.8rem;
 }



.waterbox{
   position: relative;
   

}

.waterbox h1{
   position: absolute;
   color: #fff;
   font-size: 4em;
   align-items: center;
   justify-content: center;
   display: flex;

   font-size: 5rem;
   
}

.waterbox h1:nth-child(1)
{
   color:transparent;
   -webkit-text-stroke: 2px #10a4b0;

}

.waterbox h1:nth-child(2)
{
   color:#10a4b0;
   animation: waterbox 4s ease-in-out infinite;
   transform: translate(0%,-100%);



}
@keyframes waterbox{
   0% ,100% {
       clip-path: polygon(0 46%, 6% 47%, 13% 47%, 18% 51%, 23% 54%, 29% 57%, 35% 59%, 44% 59%, 51% 58%, 57% 56%, 64% 54%, 70% 49%, 79% 46%, 87% 47%, 95% 51%, 100% 56%, 100% 100%, 0 100%);
   }
   50% {
       clip-path: polygon(0 57%, 5% 52%, 12% 50%, 19% 52%, 24% 54%, 30% 58%, 36% 62%, 44% 65%, 53% 66%, 59% 63%, 66% 59%, 72% 54%, 79% 50%, 86% 46%, 91% 43%, 100% 37%, 100% 100%, 0 100%);    }
}

.card{

  position: relative;
}

@property --angle{
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.card::after, .card::before{
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: conic-gradient(from var(--angle), #ff4545, #00ff99, #006aff, #ff0095, #ff4545);
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  padding: 3px;
  border-radius: 10px;
  animation: 3s spin linear infinite;
}
.card::before{
  filter: blur(1.5rem);
  opacity: 0.5;
}
@keyframes spin{
  from{
    --angle: 0deg;
  }
  to{
    --angle: 360deg;
  }
}