/* =========================================================
   ARUMBALI CONTACT PAGE
   CLEAN / MODERN / PREMIUM
========================================================= */


/* =========================================================
   GLOBAL
========================================================= */

:root {

    --dark: #071713;

    --dark-2: #0d211c;

    --cream: #eee6d5;

    --gold: #d9ad5b;

    --gold-light: #edc978;

    --text: #f4f0e7;

    --muted: #b7b9ae;

    --border: rgba(218, 176, 91, .35);

}


* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family: "DM Sans", sans-serif;

    background: var(--dark);

    color: var(--text);

    overflow-x: hidden;

}


img {

    display: block;

    max-width: 100%;

}


a {

    color: inherit;

    text-decoration: none;

}


button {

    font-family: inherit;

}



/* =========================================================
   NAVBAR
========================================================= */

.navbar {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 50;

}


.nav-container {

    width: min(1380px, calc(100% - 80px));

    min-height: 94px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;

}



/* LOGO */

.logo-link {

    display: inline-flex;

    align-items: center;

    flex-shrink: 0;

}


.logo {

    width: 145px;

    height: auto;

}



/* MENU */

.nav-menu {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 42px;

    margin-left: auto;

}


.nav-menu a {

    position: relative;

    padding: 8px 0;

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

    font-size: 14px;

    font-weight: 400;

    transition: color .25s ease;

}


.nav-menu a::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: -5px;

    width: 0;

    height: 1px;

    background: var(--gold-light);

    transform: translateX(-50%);

    transition: width .25s ease;

}


.nav-menu a:hover,
.nav-menu a.active {

    color: #ffffff;

}


.nav-menu a:hover::after,
.nav-menu a.active::after {

    width: 100%;

}


.nav-menu a.active {

    color: var(--gold-light);

}



/* =========================================================
   NAV BUTTON
========================================================= */

.nav-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    min-width: 185px;

    padding: 14px 22px;

    border: 1px solid rgba(237, 201, 120, .25);

    border-radius: 50px;

    background: var(--gold);

    color: #17130b;

    font-size: 13px;

    font-weight: 600;

    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;

    flex-shrink: 0;

}


.nav-button b {

    font-size: 17px;

    font-weight: 400;

    transition: transform .25s ease;

}


.nav-button:hover {

    background: var(--gold-light);

    transform: translateY(-2px);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .18);

}


.nav-button:hover b {

    transform: translateX(3px);

}



/* =========================================================
   CONTACT SECTION
========================================================= */

.contact-page {

    background: var(--dark);

}


.contact-section {

    position: relative;

    min-height: 100vh;

    padding: 120px 0 95px;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 70% 45%,
            rgba(25, 67, 55, .35),
            transparent 42%
        ),

        linear-gradient(
            120deg,
            #071713 0%,
            #0b211b 55%,
            #071713 100%
        );

}



/* DECORATIVE GLOW */

.contact-glow {

    position: absolute;

    width: 500px;

    height: 500px;

    right: -180px;

    top: 180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(218, 176, 91, .07),
            transparent 70%
        );

    filter: blur(20px);

    pointer-events: none;

}



/* =========================================================
   CONTAINER
========================================================= */

.contact-container {

    position: relative;

    z-index: 2;

    width: min(1380px, calc(100% - 100px));

    min-height: calc(100vh - 215px);

    margin: auto;

}



/* =========================================================
   HEADING
========================================================= */

.contact-heading {

    padding-top: 5px;

}


.eyebrow {

    margin-bottom: 22px;

    color: var(--gold-light);

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 6px;

}


.contact-heading h1 {

    max-width: 700px;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(65px, 7vw, 108px);

    line-height: .88;

    font-weight: 500;

    letter-spacing: -3px;

}


.contact-heading h1 span {

    color: var(--gold-light);

}


.gold-line {

    width: 98px;

    height: 1px;

    margin-top: 42px;

    background: var(--gold);

}



/* =========================================================
   DESCRIPTION
========================================================= */

.contact-description {

    width: 100%;

    margin-top: 45px;

}


.contact-description p {

    max-width: 1250px;

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

    font-size: 20px;

    line-height: 1.8;

    text-align: justify;

}



/* =========================================================
   CONTACT INFORMATION
========================================================= */

.contact-information {

    width: 650px;

    margin: 75px auto 0;

    display: flex;

    flex-direction: column;

    gap: 30px;

}


.contact-item {

    position: relative;

    display: flex;

    align-items: center;

    gap: 22px;

}


.contact-item:not(:last-child)::after {

    content: "";

    position: absolute;

    left: 32px;

    top: 64px;

    width: 1px;

    height: 30px;

    background: rgba(218, 176, 91, .28);

}



/* ICON */

.contact-icon {

    width: 64px;

    height: 64px;

    flex: 0 0 64px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(218, 176, 91, .38);

    border-radius: 50%;

    color: var(--gold-light);

    font-size: 22px;

}



/* TEXT */

.contact-text {

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.contact-text strong {

    color: #ffffff;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

}


.contact-text span,
.contact-text a {

    color: #d0d1c8;

    font-size: 18px;

    line-height: 1.5;

    transition: color .25s ease;

}


.contact-text a:hover {

    color: var(--gold-light);

}



/* =========================================================
   SOCIALS
========================================================= */

.contact-socials {

    width: 650px;

    margin: 65px auto 0;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 55px;

}


.contact-socials a {

    color: #d7d8d1;

    font-size: 15px;

    transition:
        color .25s ease,
        transform .25s ease;

}


.contact-socials a:hover {

    color: var(--gold-light);

    transform: translateY(-2px);

}



/* =========================================================
   FOOTER
========================================================= */

.footer {

    background: #06110e;

    border-top: 1px solid rgba(255, 255, 255, .06);

}


.footer-container {

    width: min(1380px, calc(100% - 80px));

    margin: auto;

    padding: 65px 0 55px;

    display: grid;

    grid-template-columns: 1.5fr .7fr 1fr;

    gap: 100px;

}


.footer-brand img {

    width: 145px;

    margin-bottom: 22px;

}


.footer-brand p {

    color: #8f9992;

    font-size: 12px;

    line-height: 1.8;

    text-align: justify;

}


.socials {

    display: flex;

    gap: 22px;

    margin-top: 25px;

}


.socials a {

    color: #b8beb9;

    font-size: 11px;

    transition: color .2s ease;

}


.socials a:hover {

    color: var(--gold-light);

}



/* FOOTER COLUMN */

.footer-column {

    display: flex;

    flex-direction: column;

    gap: 11px;

}


.footer-column h4 {

    margin-bottom: 8px;

    color: #ffffff;

    font-family: "DM Sans", sans-serif;

    font-size: 12px;

    font-weight: 600;

}


.footer-column a,
.footer-column p {

    color: #8f9992;

    font-size: 11px;

    line-height: 1.5;

}


.footer-column a {

    transition: color .2s ease;

}


.footer-column a:hover {

    color: var(--gold-light);

}



/* FOOTER BOTTOM */

.footer-bottom {

    width: min(1380px, calc(100% - 80px));

    margin: auto;

    padding: 20px 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-top: 1px solid rgba(255, 255, 255, .08);

    color: #69736e;

    font-size: 10px;

}


.footer-bottom div {

    display: flex;

    gap: 25px;

}



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

@media (max-width: 1100px) {


    .nav-container {

        width: 92%;

    }


    .nav-menu {

        gap: 24px;

    }


    .nav-button {

        min-width: auto;

        padding: 12px 17px;

    }


    .contact-container {

        width: 90%;

    }


    .contact-description p {

        font-size: 17px;

    }


    .contact-information,
    .contact-socials {

        width: 620px;

    }


    .footer-container {

        width: 92%;

        grid-template-columns: 1.3fr 1fr 1fr;

        gap: 45px;

    }


    .footer-bottom {

        width: 92%;

    }

}



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

@media (max-width: 720px) {


    /* NAVBAR */

    .navbar {

        position: absolute;

    }


    .nav-container {

        width: 90%;

        min-height: 78px;

        gap: 12px;

    }


    .logo {

        width: 112px;

    }


    .nav-menu {

        display: none;

    }


    .nav-button {

        min-width: 0;

        padding: 10px 14px;

        font-size: 10px;

    }


    .nav-button b {

        font-size: 15px;

    }



    /* CONTACT */

    .contact-section {

        min-height: auto;

        padding: 125px 0 75px;

    }


    .contact-container {

        width: 90%;

        min-height: auto;

    }


    .eyebrow {

        font-size: 10px;

        letter-spacing: 4px;

    }


    .contact-heading h1 {

        font-size: 58px;

        letter-spacing: -2px;

    }


    .gold-line {

        margin-top: 30px;

    }


    .contact-description {

        margin-top: 35px;

    }


    .contact-description p {

        font-size: 14px;

        line-height: 1.75;

        text-align: justify;

    }


    .contact-information {

        width: 100%;

        margin-top: 55px;

        gap: 28px;

    }


    .contact-item {

        gap: 16px;

    }


    .contact-item:not(:last-child)::after {

        left: 27px;

        top: 54px;

        height: 28px;

    }


    .contact-icon {

        width: 54px;

        height: 54px;

        flex: 0 0 54px;

        font-size: 18px;

    }


    .contact-text strong {

        font-size: 11px;

        letter-spacing: 1.5px;

    }


    .contact-text span,
    .contact-text a {

        font-size: 14px;

    }


    .contact-socials {

        width: 100%;

        margin-top: 55px;

        justify-content: center;

        gap: 30px;

    }


    .contact-socials a {

        font-size: 13px;

    }



    /* FOOTER */

    .footer-container {

        width: 90%;

        grid-template-columns: 1fr;

        gap: 40px;

        padding: 55px 0;

    }


    .footer-brand p {

        text-align: justify;

    }


    .footer-bottom {

        width: 90%;

        flex-direction: column;

        align-items: flex-start;

        gap: 15px;

    }


    .footer-bottom div {

        gap: 15px;

    }

}