*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
}
html{
    font-size: 90%;
}
body{
    color: black;
    background: white;
    font-family: 'poppings' sans-serif;
    line-height: 1.3;
    padding-bottom: 0;
   
}

header{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 2px 5px 4px rgba(0, 0, 1, 0.6);
    z-index: 99;
    opacity: 0;
    animation: to_bottom 1s ease forwards;
    padding: 0 2rem; /* +++ ADDED +++ Moved padding here for better alignment */
}

.nav-container{
    display: flex;
    align-items: center;
    /* --- CHANGED --- Padding removed, moved to <header>
    padding: 0 2rem; 
    */
} 

.logo{
    display: flex;
    position: relative;
    align-items: center;
}
.image img{
    /* --- CHANGED --- Replaced vh/vw with rem and auto for stability */
    height: 4rem; 
    width: auto; 
}
.logo .logo-title{
    font-size: 1.7rem;
    /* --- CHANGED --- Removed 'width: 10px' which was collapsing the text */
    line-height: 1.2;
    margin-left: -0.5rem; /* --- CHANGED --- Adjusted from -10px */
}
nav{
    display: flex;
    animation: to_left 2s ease forwards ;
}
nav ul{
    display: flex;
    gap: 4rem;
}
nav ul li{
    list-style: none;
}
nav ul li a{
    text-decoration: none;
    color: black;
    font-size: 1.3rem;
    font-weight: 700;
    position: relative;
    transition: all .3s;
}
nav ul li a::after{
    content: '';
    position: absolute;
    background: green;
    width: 0;
    height: 1.5px;
    top: 20px;
    left: 0;
    transition: all 0.4s ease;
    margin-top:2px;
}
nav ul li a:hover{
    color: green;
}
nav ul li a:hover::after{
    width: 100%;
}
header .btn {
   display: none;
    width: 90px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid black;
    background: green;
    color: white;
    outline: none;
    cursor: pointer;
    transition: all ease .3s;
    font-size: 17px;  
} 
header .btn:hover{
    background:rgb(35, 177, 35);
    transform: scale(0.9);
} 
header .navbar-toggle {
    display: none;
    background: none;
    /* --- CHANGED --- Removed fixed margin-left, as flex layout handles positioning */
    border: none;
    cursor: pointer;
    padding: 10px;
}
.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: black;
    transition: all 0.3s ease-in-out;
}
@keyframes to_bottom{
    0%{
        opacity: 0;
        transform: translateY(-50px)
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes to_right{
    0%{
        opacity: 0;
        transform: translateX(-50px)
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes to_left{
    0%{
        opacity: 0;
        transform: translateX(50px)
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}
.hero{
      margin-top: 4rem;
      min-height: 80vh;
    /* Use a background image with a semi-opaque overlay so text stays readable.
       q.jfif is at the project root, so from this file (styles/) use ../q.jfif */
    background: linear-gradient(180deg, rgba(14,31,50,0.45), rgba(14,31,50,0.45)), url('../q.jfif') center/cover fixed;
    background-color: #0e1f32; /* fallback color */
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    display: flex;
      justify-content: space-between;
      align-items: center;
}
.hero-content{
    flex: 1;
    gap: 1.2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;
    margin-left: 2rem;
    opacity: 0;
    animation: to_right 2s ease forwards ;
}
.hero-heading{
    color: white;
    font-weight: 700;
    font-size: 3.4rem;
    letter-spacing: 4px;
    text-shadow: 1px 2px 2px black;
    line-height: .9;
    text-transform: uppercase;
}
.hero-content p{
    color: #fff;
    width: 50%;
    font-size: 1.3rem;
    line-height: 1.5;
}
.hero-content .cta{
    display: flex;
    align-items: center;
    gap: 2rem;
}
.hero-content .cta .btn{
    cursor: pointer;
    height: 39px;
    border: none;
    border-radius: 8px;
    width: 160px;
    color: black;
    font-size: 1rem;
    background: #fff;
    box-shadow: .3rem .3rem .4rem rgba(14,31,50,0.4);
    transition: all .3s ease-in-out;
}
.hero-content .cta .btn-sec{
    background-color: white;
    color: black;
    border: none;
}
.hero-content .cta .btn:hover{
    background-color: rgb(35, 177, 35);
    color: #fff;
    transform: scale(.9);
    letter-spacing: 1.7px;

}
.hero-content .cta .btn-sec:hover{
    background-color: rgb(35, 177, 35);
    color: white;
}


.hero-signup{
      background: rgba(225, 225, 225, 0.1);
      backdrop-filter: blur(10px);
    width: 350px;
    max-width: 100%; 
    padding: 1rem;
    margin-right:4rem ;
    border: 1px solid whitesmoke;
    border-radius: 10px;

    position: relative;
    color: white;
    overflow: hidden;
 
        opacity: 0;
    animation: to_left 2s ease forwards ;
}
.hero-signup h1{
   font-size: 2rem;
    font-weight: bold;
    text-align: center;
    position: relative;
}
.hero-signup .p{
    text-align: center;
    opacity: .8;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}
.hero-signup form{
    display: flex;
    flex-direction: column;
    justify-content: center;
  gap: 0;
  width: 100%;
}
.hero-signup button i{
    background: none;
    color: green;
    cursor: pointer;
    font-size: 1.3rem;
}
.hero-signup .input-box{
    width: 100%;
    position: relative;
    padding:  0;
    height: 3.0rem;
}
form input,select{
    width: 100%;
    padding: 10px;
    font-size:1rem;
    color: black;
    border: none;
    box-shadow: .1rem .1rem 2rem rgba(0, 0, 1, 0.6);
    outline: none;
    border-radius: 8px;
    background: #fff;
    /* margin-bottom: .6rem; */
    padding-left: 30.6px;
    transition: all .5s ease;
}
.input-box input:active,.input-box input:focus{
    background: transparent;
    color: white;

}
.input-box input::placeholder{
    color: black;
    padding-left:10px ;
   
}

.input-box i{
    position: relative;
    right: 0;
    top: -30px;
    color: green;
    padding-left: 10px
}
.hero-signup form .btn{
    margin-top: .7rem;
    color: white;
    transition: all .3s ease;
    cursor: pointer;
    background-color: green;
}
.hero-signup form .btn:hover{
    background-color: rgb(3, 206, 3);
    letter-spacing: 1px;
}
.or{
    margin-top: .9rem auto;
    text-align: center;
}
.links{
    display: flex;
    align-items: center;
justify-content: space-between;
margin-top: 1rem;
}
.links p{
    font-size: .9rem;
    text-align: left;
   
}
.sign-btn{
    background: none;
    border: none;
    outline: none;
 
    cursor: pointer;
    color: white;
}
.sign-btn:hover{
    text-decoration: underline; 
}
.recover{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
}
.remember{
  
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}
.remember p{
    width: 100%;
}
.recover a{
    text-align: right;
    text-decoration: none;
}
.recover a p{
    color: #fff;
    text-decoration: none;
}
.recover a p:hover{
    text-decoration: underline;
}
/* This class makes the icon red */
.invalid-icon {
    color: red !important; /* Using !important to be sure it overrides other styles */
}
.our-aim{
    background-color: rgb(255, 255, 255);
    min-height: 60vh; /* --- CHANGED --- from height to min-height */
     /* +++ ADDED +++ Ensures space on stack */
}
.our-aim .heading{
    text-align: center;
    margin-top: 5rem;
    font-size: 2.9rem;
    color: black;
   
    position: relative;
    padding: 0 2rem;
    text-transform: uppercase;
    animation: to_bottom 1s ease forwards;
}

.our-aim .heading::after,.our-aim .heading::before{
    content: '';
    position: absolute;
    height: 100%;
    width: 2rem;
    background: transparent;
    border-top: 4px solid black;
    border-left: 4px solid black;
}
.our-aim .heading::before{
    top: -5px; 
    /* --- CHANGED --- Replaced rem with % for responsiveness */
    left: 20%; 
}
.our-aim .heading::after{
    rotate: 180deg;
    /* --- CHANGED --- Replaced rem with % for responsiveness */
    right: 20%; 
}


.our-aim .features{
    display: flex;
    justify-content: space-around;
    align-items: center; /* --- CHANGED --- to align-items: stretch for equal height */
    align-items: stretch;
    margin-top: 3rem;
    padding: 0 2rem;
    gap: 2rem;
   
}
.our-aim .features .feature{
    background: transparent;
    backdrop-filter: blur(10px);
    padding: 2rem;
    border-radius: 10px;
    box-shadow:  2px 2px 20px rgba(0, 0, 0, 0.1); 
    width: 30%;
    min-height: 20rem;
    color: black;
    transition: all .3s ease;
    cursor: pointer;
   
}
.our-aim .features .feature i{
    font-size: 2rem;
    color: green;
    margin-bottom: 1rem;
    text-align: left;
}
.our-aim .features .feature h3{
    font-size: 2rem;
    margin-bottom: 1rem;
    text-align: left;
    font-weight: 700;
}
.our-aim .features .feature p{
    font-size: 1.1rem;
    line-height: 1.5;
    text-align: left;
    font-weight: 500;
    cursor: pointer;
}
.our-aim .features .feature:hover{
    box-shadow:  4px 4px 30px rgba(0, 0, 0, 0.15); 
    transform: scale(1.05);
}
footer{
    background: green;
    color: white;
    text-align: center;
    padding: 1rem;
    margin-top: 2rem;
}
footer .socials{
    margin-top: .5rem;
}
footer .socials a{
    color: white;
    margin: 0 1rem;
    font-size: 1.2rem;
    transition: all .3s ease;
}
footer .socials a:hover{
    color: white;
    transform: scale(1.2);
}
.brown{
    width: 100%;
    height: 10px;
    background: #bf9f62;
}
.blue{
    width: 100%;
    height: 10px;
    background: #2a166d;
}

/* --- TABLET STYLES --- */
@media(max-width:880px){
    .hero{
        width: 100%;
    }
    
    header{
        padding: 1rem;
    }
    nav{
        display: none;
        flex-direction: column;
        gap: 1.7rem !important;
        align-items: flex-start;
        position: absolute;
        height: 40vh;
        width: 250px;
        top: 0;
        right: 0;
        padding: 5rem 1.5rem;
       
      background: rgba(225, 225, 225, 0.9);
      backdrop-filter: blur(10px);
    }
    nav ul{
        flex-direction: column;
        gap: 2rem !important;
        align-items: flex-start;
        margin-top: 3rem;
    }
    header nav .btn{
        display: block;
        margin-left: -10px;
    } 
   header nav.active{
    right: 0;
    transition: all 0.3s ease;
    display: flex;
}

header .navbar-toggle {
    display: block;
      z-index: 999;
    cursor: pointer;
}
header .navbar-toggle.active .bar:nth-child(2) {
    opacity: 0;
    }
header .navbar-toggle.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
    }
    header .navbar-toggle.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* +++ ADDED +++ Adjust hero content on tablets */
    .hero .hero-content{
        margin: auto;
    }
    .hero-content p {
        width: 80%;
        line-height: 1.5;
    }
    .hero-signup {
        margin-right: 2rem; /* Reduce margin */
    }
    #hero{
        margin-top: 4rem;
    }
    .hero .cta{
        display: flex;
        flex-direction: row;
    }
    .hero .hero-heading{
        margin: 2.5rem 0 1rem;
        line-height: 1.2;
        font-weight: 1000;
        font-size: 3.6rem;
    }
    .hero .hero-content p{
        font-size: 2rem;
    }
    .hero .hero-content .cta{
        margin-top: 3.4rem;
    }

}

/* --- MOBILE STYLES --- */
@media (max-width: 768px){
    .hero{
        margin-top: auto;
        display: flex;
        flex-direction: column;
        background-attachment: relative;
    }
    .our-aim .features{
        flex-direction: column;
        padding: 0 1rem;
    }
    .our-aim .features .feature{
        width: 100%;
        min-height: auto; /* +++ ADDED +++ Allow height to be natural */
    }

    /* On small screens, don't use fixed attachment and stack content for readability */
    .hero{
        background-attachment: scroll;
        background-position: center top;
        min-height: 90vh;
        flex-direction: column;
        padding: 2rem 1rem;
        gap: 2rem;
        justify-content: center; /* +++ ADDED +++ Better vertical alignment */
    }
    .hero .hero-content{
        margin-top: auto;
    }
    .hero .hero-content p{
        font-size: 1.3rem;
        width: 100%;
    }
    .hero-content{ 
        
        text-align: center; /* +++ ADDED +++ Center text when stacked */
        align-items: center; /* +++ ADDED +++ Center CTA buttons */
    }
    .hero-signup{ 
    display: block;
        margin:0 auto; 
        width: 100%; 
    }

   
    .hero-content p{
        width: 90%;
    }
 
    .hero-content .cta{
        flex-direction: row;
        gap: 1rem;
        width: 60%;
     } /* +++ ADDED +++ Constrain button container */
        /* +++ ADDED +++ Make buttons equal width */
    
    /* +++ ADDED +++ Make buttons full width in their container */

    nav ul{
        gap: 2rem;
    }
    .hero-heading{
        font-size: 2.5rem;
    }
 
    .our-aim .heading::before{
        /* --- CHANGED --- Replaced rem with % for responsiveness */
        left: 10%; 
    }
    .our-aim .heading::after{
        /* --- CHANGED --- Replaced rem with % for responsiveness */
        right: 10%; 
    }
}

/* +++ ADDED +++ New breakpoint for small mobile devices */
@media (max-width: 480px) {
    html {
        font-size: 85%; /* Slightly smaller base font */
    }
    header {
        padding: 0 1rem; /* Reduce header padding */
    }
    .hero-heading {
        font-size: 2.2rem; /* Smaller heading */
        letter-spacing: 1px;
    }
    .hero-content p {
        font-size: 1.1rem;
        width: 100%;
    }
    .our-aim .heading {
        font-size: 2rem;
    }
    .our-aim .heading::before,
    .our-aim .heading::after {
        border-width: 3px; /* Make lines a bit thinner */
    }
    .our-aim .heading::before { 
        left: 5%; 
    }
    .our-aim .heading::after { 
        right: 5%; 
    }
    .our-aim .features .feature {
        padding: 1.5rem; /* Less padding on small screens */
    }
    .our-aim .features .feature h3 {
        font-size: 1.5rem;
    }
    .our-aim .features .feature p {
        font-size: 1rem;
    }
    nav.active {
        width: 220px; /* Make mobile menu slightly smaller */
    }
    nav ul {
        gap: 1.5rem !important; /* Reduce gap in mobile menu */
    }
}