:root{
    --violet:          #6a00ab;
    --purple:          #4a0078;
    --text:            #200033;
    --turquoise:       #05a8aa;
    --dark-turquoise:  #047677;
    --lightest-gray:   #edeef4;
    --muted-purple:    #a6abc8;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Raleway',sans-serif;
    font-weight:400;
    font-size:18px;
    background:var(--lightest-gray);
    color:var(--text);
    line-height: 1.5;
}

p{
    margin-bottom:1.2rem;
}

h1,h2,h3,h4{
    font-family:'Raleway',sans-serif;
    font-weight:700;
}

h1{
    font-size:clamp(2rem, 4vw, 56px);
    color: white
}

h2{
    font-size:clamp(1.5rem, 3vw, 40px);
    color: var(--purple);
    margin-bottom:1.5rem;
}

h3{
    font-size:clamp(1.125rem, 2.2vw, 30px);
    color: var(--purple);
}

h4{
    font-size: clamp(1rem, 1.5vw, 20px);
    color: var(--purple);
}

.container{
    width:min(87.5rem, 95%);
    margin:auto;
}

.link{
    color:var(--text);
    text-decoration:underline;
}

.link:hover{
    color:var(--violet);
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--turquoise);
    color:white;
    text-decoration:none;
    padding:1rem 1rem;
    border-radius:0.5rem;
    font-weight:500;
    transition:.3s;
}

.btn:hover{
    transform:translateY(-2px);
}

.app-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--violet);
    color:white;
    text-decoration:none;
    padding:1rem 1rem;
    border-radius:0.5rem;
    line-height: 1.2;
    font-weight:500;
    transition:.3s;
}

.app-btn:hover{
    transform:translateY(-2px);
}

/* HEADER */

.header-logo img {
    height:clamp(4rem, 5vw, 48px);
    width:auto;
    display:block;
}

.navbar{
    height:5rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:white;
    border-radius:1.5rem;
    padding:4rem 2rem 4rem 2rem;
    margin:2rem 0;
    position:relative;
}

.nav-links{
    display:flex;
    gap:2rem;
    align-items:center;
}

.nav-links a{
    text-decoration:none;
    color:var(--violet);
    font-size:18px;
    font-weight:600;
}

/* HAMBURGER */

.hamburger{
    display:none;
    flex-direction:column;
    justify-content:space-between;
    width:1.75rem;
    height:1.25rem;
    background:none;
    border:none;
    cursor:pointer;
    padding:0;
}

.hamburger span{
    display:block;
    height:2px;
    width:100%;
    background:var(--violet);
    border-radius: 0 2px 0 2px;
    transition:.3s;
}

.hamburger.active span:nth-child(1){
    transform:translateY(0.594rem) rotate(45deg);
}

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

.hamburger.active span:nth-child(3){
    transform:translateY(-0.594rem) rotate(-45deg);
}

.nav-btn-mobile{
    display:none;
}

/* HERO */

.hero{
    margin-bottom:2rem;
}

.hero-image{
    height:43.75rem;
    border-radius:1.5rem;
    overflow:hidden;
    position:relative;

    background:url("https://firebasestorage.googleapis.com/v0/b/seabirdmain.appspot.com/o/apps%2F-OPNPcyAU8TBq8tP-4Op%2Fbackground.png?alt=media&token=e3df2f5c-4356-457e-82e7-c182aa46b3b9") center center/cover;
}

.hero-content{
    position:absolute;
    inset:0;
    color:white;
}

.hero h1{
    position:absolute;
    top:50%;
    left:36%;
    transform:translate(-50%,-50%);
    font-size:48px;
    text-shadow:0 2px 60px rgba(0,0,0,0.7);
}

.hero-right{
    position:absolute;
    right:2.5rem;
    top:45%;
    text-align:right;
    font-weight:600;
}

/* IN A NUTSHELL */

.nutshell{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1.5rem;
    margin-bottom:2rem;
}

.nutshell-intro{
    padding:1rem;
    order:1;
    align-self:center;
}

.nutshell > div:nth-child(2){
    order:3;
}

.nutshell > div:nth-child(3){
    order:4;
}

.nutshell > div:nth-child(4){
    order:2;
}

.card{
    background:white;
    border-radius:1.5rem;
    padding:2.5rem 2rem 1.75rem 2rem;
    text-align:center;
    min-height:16rem;
}

.card-icon{
    font-size:32px;
    margin-bottom:1.25rem;
}

.card-circle{
    width:150px;
    height:150px;
    border-radius:50%;
    overflow:hidden;
    margin:0 auto 1rem;
}

.card-circle img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* SOCIAL ICONS */

.social-icons{
    display:flex;
    gap:0.75rem;
}

.social-icons img{
    width:28px;
    height:28px;
    opacity: 0.6;
}

/* ABOUT */

.about{
    display:grid;
    grid-template-columns:0.5fr 1.5fr;
    gap:4rem;
    padding:1rem;
    margin-bottom:2rem;
    align-items:center;
}

.about-badges{
    display:flex;
    flex-direction:column;
    gap:1rem;
    margin-top:1.5rem;
}

.about-badges-row{
    display:flex;
    align-items:center;
    gap:1.5rem;
}

.about-badge{
    height:120px;
    width:auto;
    max-width:100%;
    display:block;
    object-fit:contain;
    align-self:flex-start;
    margin-top:1rem;
}

.about-img{
    height:100%;
    height:790px;
    border-radius:1.5rem;
    display:block;
    justify-self:start;
    order:-1;
    margin-left:0;
}

/* ADMISSION */

.admission{
    background:var(--violet);
    color:white;
    border-radius:1rem;
    padding:3.75rem;
    margin-bottom:2rem;
}

.accordion{
    margin:2rem 0 2rem 0;
    display:flex;
    flex-direction:column;
    gap:1rem;
}

.accordion-item{
    border-radius:0.75rem;
    overflow:hidden;
    background:rgba(255,255,255,0.1);
}

.accordion-trigger{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:1.25rem 1.5rem;
    background:none;
    border:none;
    color:white;
    font-family:'Raleway',sans-serif;
    font-size:18px;
    font-weight:700;
    cursor:pointer;
    text-align:left;
}

.accordion-icon{
    font-size:24px;
    font-weight:300;
    line-height:1;
}

.accordion-body{
    display:none;
    padding:0 1.5rem 1.25rem;
    color:white;
}

.accordion-item.open .accordion-body{
    display:block;
}

.accordion-body ul,
.accordion-body ol{
    padding-left:1.25rem;
    display:flex;
    flex-direction:column;
    gap:0.75rem;
}

/* PARENT INFO */

.app-info{
    background:white;
    border-radius:1.5rem;
    padding:4rem 10rem 4rem 10rem;
    margin-bottom:3rem;
    text-align:center;
}

.app-mockup{
    max-height:450px;
    width:auto;
    max-width:100%;
    display:block;
    margin:0 auto -4.5rem;
}

.app-info-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.25rem;
}

/* FOOTER */

.footer-logo{
    height: clamp(5.25rem, 6.5vw, 68px);
    width:auto;
    display:block;
}

.footer-grid{
    display:grid;
    grid-template-columns:1.2fr 1.2fr 0.8fr;
    gap:3rem;
    padding: 2rem 0;
}

.footer-grid h4{
    margin-bottom:0.75rem;
}

.footer-grid p{
    margin-bottom:0.625rem;
}

.copyright{
    border-top:0.1rem solid white;
    margin-top:3rem;
    padding:1.25rem 0;
    font-size:14px;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
}

.copyright p{
    text-align:right;
}

@media(max-width:1200px){

.footer-grid{
    grid-template-columns:1fr 1fr;
}

.footer-grid div:last-child{
    grid-column:1 / -1;
}

}

@media(max-width:850px){

.footer-grid{
    grid-template-columns:1fr;
}

.footer-grid div:last-child{
    grid-column:auto;
}

.about-badges{
    width:80%;
    padding-left:0;
    padding-right:0;
    margin-left:0;
    margin-right:0;
    align-items:flex-start;
}

}

/* RESPONSIVE */

@media(max-width:1024px){

.hamburger{
    display:flex;
}

.nav-btn-desktop{
    display:none;
}

.nav-btn-mobile{
    display:inline-block;
}

.nav-links{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:white;
    flex-direction:column;
    padding:1.5rem 2rem;
    gap:2rem;
    box-shadow:0 0.5rem 1rem rgba(0,0,0,.08);
    clip-path:inset(0 -2rem -2rem -2rem);
    border-radius:0 0 1rem 1rem;
    z-index:100;
}

.nav-links.open{
    display:flex;
}

.navbar:has(.nav-links.open){
    border-radius:1rem 1rem 0 0;
}

.steps,
.benefits,
.why-grid,
.how{
    grid-template-columns:1fr;
}

.about-badges{
    width:80%;
    padding-left:2rem;
    padding-right:2rem;
    margin-left:auto;
    margin-right:auto;
    align-items:center;
}

.btn,
.app-btn{
    font-size:15px;
}

}

@media(max-width:1480px){

.about{
    grid-template-columns:1fr;
}

.about-img{
    height:auto;
    width:65%;
    max-width:500px;
    justify-self:center;
    margin-left:auto;
    margin-right:auto;
}

.about-badges{
    width:100%;
    padding-left:2rem;
    padding-right:2rem;
    margin-left:auto;
    margin-right:auto;
    align-items:center;
}

.about-badges-row{
    flex-wrap:wrap;
    justify-content:center;
}

.about-badge{
    height:100px;
}

.about div{
    text-align:center;
}

.about .btn{
    display:inline-block;
}

}

@media(max-width:1024px){

.app-info{
    padding:4rem 2rem;
}

}

@media(max-width:600px){

.about-img{
    width:100%;
    max-width:none;
}

.about-badges{
    width:100%;
    text-align:center;
}

.about-badges-row{
    display:block;
    margin-bottom:0.5rem;
}

.about-badge{
    display:inline-block;
    vertical-align:middle;
}

.admission{
    padding:1.5rem;
}

.btn,
.app-btn{
    font-size:15px;
}

.footer-logo{
    height:4.25rem;
}

.header-logo img{
    height:2.75rem;
}

footer{
    padding-left:1rem;
    padding-right:1rem;
    font-size:15px;
}

.app-info{
    padding:1.5rem;
}

.app-info-grid{
    grid-template-columns:repeat(2,1fr);
}

.app-mockup{
    margin-bottom:-3.5rem;
}

.nutshell{
    grid-template-columns:1fr;
}

.hero h1{
    font-size:32px;
}

.hero-left{
    display:none;
}

.hero-right{
    display:block;
    position:static;
    text-align:left;
    margin-top:1.5rem;
}

.hero-content{
    position:static;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    height:100%;
    padding:2rem;
}

.hero h1{
    position:static;
    transform:none;
    text-align:left;
}

.hero-image{
    height:31.25rem;
}

}