/* =========================================================
   supplier-shop3
   CONTACT PAGE
   RTL / GLASS / RESPONSIVE
   ========================================================= */


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

body.contact-page {

    background:
        radial-gradient(
            circle at top right,
            rgba(165, 111, 99, 0.10),
            transparent 35%
        ),
        radial-gradient(
            circle at bottom left,
            rgba(15, 48, 64, 0.25),
            transparent 40%
        ),
        #071C26;

    color: #dae7ed;

}


/* =========================================================
   MAIN
========================================================= */

.contact-main {

    width: 100%;

    max-width: 1000px;

    margin: 0 auto;

    padding: 30px 20px 70px;

    box-sizing: border-box;

}


/* =========================================================
   HERO
========================================================= */

.contact-hero {

    width: 100%;

    text-align: center;

    margin-bottom: 45px;

}


.contact-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 32px;

    margin-bottom: 15px;

    padding: 0 18px;

    box-sizing: border-box;

    border-radius: 25px;

    background: #A56F63;

    color: white;

    font-size: 13px;

    font-weight: 600;

}


.contact-hero h1 {

    margin: 0 0 15px;

    color: #dae7ed;

    font-size: 32px;

    font-weight: 800;

    line-height: 1.5;

}


.contact-hero p {

    max-width: 680px;

    margin: 0 auto;

    color: rgba(218, 231, 237, .68);

    font-size: 14px;

    line-height: 2.1;

}


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

.contact-container {

    width: 100%;

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 18px;

}


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

.contact-card {

    min-width: 0;

    display: flex;

    align-items: flex-start;

    gap: 18px;

    padding: 24px;

    box-sizing: border-box;

    background: rgba(255, 255, 255, .12);

    border: 1px solid rgba(255, 255, 255, .20);

    border-radius: 22px;

    backdrop-filter: blur(15px);

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

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

    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease,
        opacity .4s ease;

}


.contact-card:hover {

    transform: translateY(-4px);

    border-color: rgba(217, 155, 127, .40);

    background: rgba(255, 255, 255, .14);

}


/* =========================================================
   ICON
========================================================= */

.contact-icon {

    flex-shrink: 0;

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    border-radius: 50%;

    background: rgba(165, 111, 99, .18);

    border: 1px solid rgba(165, 111, 99, .35);

    color: #D99B7F;

    font-size: 21px;

    font-weight: 700;

}


/* =========================================================
   CONTENT
========================================================= */

.contact-content {

    min-width: 0;

    flex: 1;

}


.contact-content h2 {

    margin: 0 0 8px;

    color: white;

    font-size: 18px;

    font-weight: 800;

    line-height: 1.7;

}


.contact-content p {

    margin: 0 0 12px;

    color: rgba(218, 231, 237, .65);

    font-size: 13px;

    line-height: 2;

}


/* =========================================================
   LINKS
========================================================= */

.contact-link {

    display: inline-block;

    color: #D99B7F;

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;

    transition: .3s;

}


.contact-link:hover {

    color: #A56F63;

}


/* =========================================================
   STATUS
========================================================= */

.contact-status {

    display: inline-flex;

    align-items: center;

    padding: 6px 12px;

    border-radius: 20px;

    background: rgba(15, 48, 64, .55);

    color: #dae7ed;

    font-size: 12px;

}


/* =========================================================
   ADDRESS
========================================================= */

.contact-address {

    color: #D99B7F;

    font-size: 13px;

    font-weight: 600;

}


/* =========================================================
   HELP
========================================================= */

.contact-help {

    width: 100%;

    margin-top: 25px;

    padding: 24px;

    display: flex;

    align-items: center;

    gap: 15px;

    box-sizing: border-box;

    background: rgba(255, 255, 255, .12);

    border: 1px solid rgba(255, 255, 255, .20);

    border-radius: 22px;

    backdrop-filter: blur(15px);

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

}


/* =========================================================
   HELP ICON
========================================================= */

.contact-help-icon {

    flex-shrink: 0;

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(165, 111, 99, .18);

    border: 1px solid rgba(165, 111, 99, .35);

    color: #D99B7F;

    font-size: 20px;

    font-weight: 800;

}


/* =========================================================
   HELP TEXT
========================================================= */

.contact-help h2 {

    margin: 0 0 5px;

    color: white;

    font-size: 18px;

    font-weight: 800;

}


.contact-help p {

    margin: 0;

    color: rgba(218, 231, 237, .65);

    font-size: 13px;

    line-height: 1.9;

}


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

@media (max-width: 992px) {

    .contact-main {

        max-width: 900px;

    }

}


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

@media (max-width: 768px) {

    .contact-main {

        max-width: none;

        padding: 25px 15px 50px;

    }


    .contact-hero {

        margin-bottom: 30px;

    }


    .contact-hero h1 {

        font-size: 27px;

    }


    .contact-hero p {

        font-size: 13px;

        line-height: 2;

    }


    .contact-container {

        grid-template-columns: 1fr;

        gap: 12px;

    }


    .contact-card {

        padding: 20px;

        border-radius: 18px;

    }


    .contact-icon {

        width: 42px;

        height: 42px;

        font-size: 18px;

    }


    .contact-content h2 {

        font-size: 16px;

    }


    .contact-content p {

        font-size: 12px;

    }


    .contact-help {

        padding: 20px;

        border-radius: 18px;

    }

}


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

@media (max-width: 480px) {

    .contact-main {

        padding: 22px 12px 40px;

    }


    .contact-hero h1 {

        font-size: 24px;

    }


    .contact-hero p {

        font-size: 12px;

    }


    .contact-card {

        padding: 17px;

    }


    .contact-icon {

        width: 38px;

        height: 38px;

        font-size: 16px;

    }


    .contact-content h2 {

        font-size: 15px;

    }


    .contact-content p {

        font-size: 11.5px;

        line-height: 2;

    }


    .contact-link {

        font-size: 13px;

    }


    .contact-help {

        padding: 17px;

    }


    .contact-help h2 {

        font-size: 16px;

    }


    .contact-help p {

        font-size: 12px;

    }

}


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

@media (max-width: 360px) {

    .contact-main {

        padding-right: 10px;

        padding-left: 10px;

    }


    .contact-card {

        gap: 12px;

        padding: 14px;

    }


    .contact-icon {

        width: 35px;

        height: 35px;

        font-size: 15px;

    }

}


/* =========================================================
   JS INITIAL STATE
========================================================= */

.contact-card {

    opacity: 0;

    transform: translateY(25px);

}


.contact-card.contact-visible {

    opacity: 1;

    transform: translateY(0);

}