/* ==========================================================
   ABOUT PAGE
========================================================== */

.about-page{

    position:relative;
    z-index:2;

    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:180px 20px 120px;

}

.about-section{

    width:100%;
    display:flex;
    justify-content:center;

}

.about-card{

    width:100%;
    max-width:900px;

    background:rgba(8,39,58,.55);

    border:1px solid rgba(212,175,55,.18);

    border-radius:28px;

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    box-shadow:
        0 30px 80px rgba(0,0,0,.35);

    padding:70px;

    text-align:center;

}

.about-icon{

    display:flex;

    justify-content:center;

    margin-bottom:24px;

}

.about-icon svg{

    width:70px;

    height:70px;

    color:#D4AF37;

}

.about-card:hover .about-icon svg{

    transform:translateY(-2px) scale(1.08);

    filter:drop-shadow(0 0 12px rgba(212,175,55,.35));

}

.about-subtitle{

    display:block;

    color:#D4AF37;

    letter-spacing:5px;

    font-size:.85rem;

    font-weight:600;

    text-transform:uppercase;

    margin-bottom:18px;

}

.about-card h1{

    font-family:"Cormorant Garamond",serif;

    font-size:3.5rem;

    color:#ffffff;

    font-weight:500;

    margin-bottom:35px;

    line-height:1.1;

}

.about-divider{

    display:flex;

    justify-content:center;
    align-items:center;

    margin:40px 0;

}

.about-divider::before,
.about-divider::after{

    content:"";

    width:120px;
    height:1px;

    background:rgba(212,175,55,.45);

}

.about-divider span{

    width:10px;
    height:10px;

    margin:0 18px;

    border-radius:50%;

    background:#D4AF37;

    box-shadow:0 0 15px rgba(212,175,55,.45);

}

.about-content{

    text-align:left;

}

.about-content p{

    font-family:"Manrope",sans-serif;

    color:rgba(255,255,255,.88);

    font-size:1.08rem;

    line-height:2;

    margin-bottom:28px;

}

.about-content strong{

    color:#D4AF37;

    font-weight:600;

}

/* ==========================================================
   QUOTE
========================================================== */

.about-quote{

    margin-top:20px;

    font-family:"Cormorant Garamond",serif;

    font-size:2rem;

    font-style:italic;

    font-weight:500;

    color:#D4AF37;

    line-height:1.6;

    text-align:center;

    max-width:700px;

    margin-left:auto;
    margin-right:auto;

}

/* ==========================================================
   HOVER
========================================================== */

.about-card{

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.about-card:hover{

    transform:translateY(-6px);

    border-color:rgba(212,175,55,.35);

    box-shadow:
        0 35px 90px rgba(0,0,0,.45);

}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width:992px){

    .about-card{

        padding:55px 45px;

    }

    .about-card h1{

        font-size:3rem;

    }

    .about-content p{

        font-size:1.03rem;

        line-height:1.9;

    }

    .about-quote{

        font-size:1.75rem;

    }

}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

    .about-page{

        padding:140px 18px 90px;

    }

    .about-card{

        padding:40px 25px;

        border-radius:22px;

    }

    .about-subtitle{

        font-size:.72rem;

        letter-spacing:3px;

    }

    .about-card h1{

        font-size:2.4rem;

        margin-bottom:28px;

    }

    .about-divider{

        margin:28px 0;

    }

    .about-divider::before,
    .about-divider::after{

        width:70px;

    }

    .about-divider span{

        width:8px;
        height:8px;

        margin:0 14px;

    }

    .about-content{

        text-align:center;

    }

    .about-content p{

        font-size:.98rem;

        line-height:1.9;

        margin-bottom:24px;

    }

    .about-quote{

        font-size:1.45rem;

        line-height:1.7;

    }

}

/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width:480px){

    .about-page{

        padding:130px 15px 80px;

    }

    .about-card{

        padding:35px 20px;

    }

    .about-card h1{

        font-size:2rem;

    }

    .about-divider::before,
    .about-divider::after{

        width:45px;

    }

    .about-content p{

        font-size:.94rem;

    }

    .about-quote{

        font-size:1.25rem;

    }

}

.mobile-reserve{
    display:none;
}

@media(max-width:900px){

    .mobile-reserve{
        display:block;
        width:100%;
        margin-top:10px;
    }

    .mobile-reserve a{
        display:flex;
        justify-content:center;
        align-items:center;
        width:100%;
        padding:14px 24px;
        border:1px solid var(--gold);
        border-radius:50px;
        color:white;
        font-size:1rem;
        font-weight:700;
        text-decoration:none;
        transition:.3s ease;
    }

    .mobile-reserve a:hover{
        background:var(--gold);
        color:#08273A;
    }

}