/*------------------------------------------------------------ contact-section ------------------------------------------------------------------------- */

:root {
    --clr-orange: #f27533;
    --clr-orange-dark: #f0442e;
    --clr-navy-dark: #080d12;
    --clr-navy-mid: #121a26;
    --clr-white: #ffffff;
    --clr-gray-light: #cfd3d8;
    --clr-gray-mid: #9aa1ab;

    --font-display: "Space Grotesk", sans-serif;
    --font-accent: "Playfair Display", Georgia, serif;
    --font-body: "DM Sans", sans-serif;

    --header-height: 74px;

    --site-content-width: 84%;
    --site-content-max-width: 1600px;
    --site-content-edge: max(calc((100vw - var(--site-content-max-width)) / 2),
            8vw);
}

.contact-section {
    width: 100%;

    padding: 125px 0;

    background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.9) 100%), url('../images/yezdi.png');
    background-size: cover;
    background-position: center;
}


.contact-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    column-gap: 100px;

    align-items: start;
}



.contact-intro {
    padding-top: 1px;
}


.contact-intro .section-eyebrow {
    color: #f0442e;

    font-size: 0.55rem;

    font-weight: 800;

    letter-spacing: 1.7px;
}


.contact-title {
    margin: 28px 0 0;

    color: #eeeeeb;

    font-family: var(--font-display);

    font-size: clamp(3.5rem, 5vw, 5rem);

    font-weight: 500;

    line-height: 0.91;

    letter-spacing: -3px;
}


.contact-title span {
    display: block;

    color: #f26a32;

    font-family: var(--font-display);

    font-style: italic;

    font-weight: 400;

    letter-spacing: -2px;
}



.contact-form-wrapper {
    width: 100%;

    padding-top: 0;
}


.contact-form {
    width: 100%;
}


.contact-form-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 13px;

    margin-bottom: 13px;
}


.contact-field {
    width: 100%;
}


.contact-field input {
    width: 100%;

    height: 57px;

    padding: 0 16px;

    box-sizing: border-box;

    background: rgba(255, 255, 255, 0.025);

    border: 1px solid #4a4544;

    outline: none;

    color: #eeeeeb;

    font-family: inherit;

    font-size: 0.85rem;

    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}


.contact-field input::placeholder {
    color: #a0b0c0;

    opacity: 1;
}


.contact-field input:focus {
    border-color: #f0442e;

    background: rgba(255, 255, 255, 0.04);
}


.contact-submit {
    width: 100%;

    height: 49px;

    margin-top: 0;

    padding: 0 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border: 0;

    background: #f0442e;

    color: #ffffff;

    cursor: pointer;

    font-size: 0.70rem;

    font-weight: 800;

    letter-spacing: 0.8px;

    transition: background 0.2s ease;
}


.contact-submit:hover {
    background: #ff4e37;
}


.contact-arrow {
    font-size: 18px;

    font-weight: 400;

    line-height: 1;
}


@media (max-width: 767px) {

    .contact-section {
        padding: 80px 0;
    }


    .contact-grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    .contact-title {
        font-size: clamp(3rem, 13vw, 4rem);

        letter-spacing: -2px;
    }


    .contact-form-row {
        grid-template-columns: 1fr;

        gap: 13px;

        margin-bottom: 13px;
    }


    .contact-field input {
        height: 54px;
    }

}

/* =========================================================
   CONTACT FORM MESSAGES
   ========================================================= */

.contact-form-message {
    margin-bottom: 12px;

    font-size: 0.58rem;

    line-height: 1.5;
}


.contact-form-message.error {
    color: #f0442e;
}


.contact-form-message.success {
    color: #72c995;
}


/* Prevent double submission */

.contact-submit:disabled {
    opacity: 0.65;

    cursor: not-allowed;
}


.contact-form.is-submitting {
    pointer-events: none;
}

/*------------------------------------------------------------ contact-section ------------------------------------------------------------------------- */








/*------------------------------------------------------------ footer ------------------------------------------------------------------------- */
/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
    background: #080909;

    /*border-top: 1px solid rgba(255, 255, 255, 0.08);*/

    padding: 70px 0 35px;

    color: #ffffff;
}


/* Main footer layout */

.footer-main {
    display: grid;

    grid-template-columns: 1.5fr 1fr 1.5fr 0.7fr;

    gap: 60px;

    align-items: start;
}


/* =========================================================
   BRAND
   ========================================================= */


   .footer-brand img{
    width: 150px;
    height: auto;
   }

.footer-logo {
    display: inline-flex;

    align-items: center;

    gap: 13px;

    text-decoration: none;
}


.footer-logo .brand-mark {
    color: #f0442e;

    font-size: 50px;

    font-weight: 800;
}


.footer-logo .brand-name {
    color: #eeeeeb;

    font-size: 18px;

    font-weight: 700;

    letter-spacing: 0.5px;
}


.footer-tagline {
    margin: 20px 0 0;

    color: #8d9299;

    font-size: 14px;
}


.footer-copyright {
    margin: 38px 0 0;

    color: #747a82;

    font-size: 12px;

    letter-spacing: 0.2px;
}


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

.footer-column h3,
.footer-social h3 {
    margin: 3px 0 20px;

    color: #f0442e;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.8px;
}


.footer-column ul {
    list-style: none;

    margin: 0;

    padding: 0;
}


.footer-column li {
    margin-bottom: 12px;
}


.footer-column a {
    color: #969ba2;

    text-decoration: none;

    font-size: 13px;

    transition: color 0.2s ease;
}


.footer-column a:hover {
    color: #ffffff;
}


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

.footer-contact li {
    margin-bottom: 12px;
}


.footer-contact a {
    word-break: break-word;
}


.footer-address {
    color: #969ba2;

    font-size: 12px;

    line-height: 1.6;
}


/* =========================================================
   SOCIAL
   ========================================================= */

.social-links {
    display: flex;

    align-items: center;

    gap: 18px;
}


.social-links a {
    width: 30px;

    height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(255, 255, 255, 0.15);

    color: #969ba2;

    text-decoration: none;

    transition:
        color 0.2s ease,
        border-color 0.2s ease;
}


.social-links a:hover {
    color: #ffffff;

    border-color: #f0442e;
}


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

@media (max-width: 991px) {

    .site-footer {
        padding: 60px 0 30px;
    }


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

        gap: 45px;
    }

}


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

@media (max-width: 575px) {

    .site-footer {
        padding: 50px 0 30px;
    }


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

        gap: 38px;
    }


    .footer-tagline {
        margin-top: 16px;
    }


    .footer-copyright {
        margin-top: 25px;
    }

}

/*------------------------------------------------------------ footer ------------------------------------------------------------------------- */



/*------------------------------------------------------------ back to top ------------------------------------------------------------------------- */


.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: none;
    background-color: #f0442e;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    /* Smooth transition & Pulse Animation */
    transition: all 0.3s ease-in-out;
    animation: floatBounce 2s infinite ease-in-out;
}

/* Hover Effect: Upore uthbe, color dark hbe ebong glow korbe */
.back-to-top:hover {
    background-color: #d6331e;
    /* Darker red */
    transform: translateY(-5px) scale(1.08);
    /* Ektu boro ebong upore uthbe */
    box-shadow: 0 8px 15px rgba(240, 68, 46, 0.4);
    /* Red glow effect */
}

/* Click (Active) Effect */
.back-to-top:active {
    transform: translateY(-2px) scale(0.95);
}

/* Smooth Floating Animation */
@keyframes floatBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}