@font-face { 
    font-family: "Michroma Regular"; 
    src: url("Michroma-Regular.ttf") format("truetype"); 
    font-weight: normal; 
    font-style: normal; 
} 
 
@font-face { 
    font-family: "Pliant Expanded"; 
    src: url("PliantExpanded.ttf") format("truetype"); 
    font-weight: normal; 
    font-style: normal; 
} 
 

/* ======================================== 
   RESET 
======================================== */ 
 
html, 
body { 
    margin: 0; 
    padding: 0; 
} 
 
body { 
    background: white; 
    color: black; 
} 
 

/* ======================================== 
   HUSNA SAMER NAVIGATION LINK
======================================== */ 
 
body > a { 
    position: absolute; 
 
    top: 30px; 
    left: 40px; 
 
    color: black; 
    text-decoration: none; 
 
    font-family: "Michroma Regular", sans-serif; 
    font-size: 18px; 
    font-weight: normal; 
 
    z-index: 10; 
} 
 

/* ======================================== 
   NAVIGATION 
======================================== */ 
 
.nav { 
    position: absolute; 
 
    top: 30px; 
    right: 40px; 
 
    display: flex; 
    gap: 35px; 
 
    z-index: 10; 
} 
 
.nav a { 
    color: black; 
    text-decoration: none; 
 
    font-family: "Michroma Regular", sans-serif; 
    font-size: 18px; 
    font-weight: normal; 
} 
 

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

.contact {
    position: relative;

    width: 100%;
    min-height: calc(100vh - 58px);
}


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

.contact h1 {
    position: absolute;

    top: 135px;
    left: 15%;

    margin: 0;

    color: #74190f;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 60px;
    font-weight: 600;

    line-height: 1;
    letter-spacing: -1px;
}



/* ========================================
   IMAGE
======================================== */

.contact-image {
    position: absolute;

    top: 200px;
    left: 50%;

    width: 75vw;

    max-width: 700px;

    aspect-ratio: 600 / 275;

    transform: translateX(-50%);

    overflow: hidden;
}

.contact-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


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

.contact-details {
    position: absolute;

    top: 535px;
    left: 55%;

    width: 75vw;
    max-width: 700px;

    transform: translateX(-50%);

    display: flex;
    flex-direction: column;
    align-items: flex-end;

    color: #74190f;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.15;
}

.contact-details p {
    margin: 0;
}

.contact-details a {
    color: #74190f;
    text-decoration: none;
}

.contact-details a:hover {
    text-decoration: underline;
}


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

@media (max-width: 800px) {

    .logo {
        left: 20px;
    }

    .nav {
        right: 20px;
        gap: 25px;
    }

    .contact h1 {
        left: 40px;
    }

    .contact-image {
        width: 65.2vw;
        max-width: 600px;

        height: auto;

        aspect-ratio: 600 / 275;
    }

    .contact-details {
        width: 65.2vw;
        max-width: 600px;

        top: calc(
            92px + (65.2vw * 0.4583) + 10px
        );
    }
}


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

@media (max-width: 600px) {

    .header {
        height: 55px;
    }


    /* ------------------------------
       LOGO
    ------------------------------ */

    .logo {
        top: 11px;
        left: 18px;

        font-size: 11px;
    }


    /* ------------------------------
       NAVIGATION
    ------------------------------ */

    .nav {
        top: 11px;
        right: 18px;

        gap: 15px;
    }

    .nav a {
        font-size: 11px;
    }


    /* ------------------------------
       CONTACT
    ------------------------------ */

    .contact {
        min-height: calc(100vh - 55px);
    }


    /* ------------------------------
       TITLE
    ------------------------------ */

    .contact h1 {
        top: 42px;
        left: 25px;

        font-size: 34px;
    }


    /* ------------------------------
       IMAGE
    ------------------------------ */

    .contact-image {
        top: 98px;
        left: 50%;

        /*
           Keep the same proportional
           sizing on mobile.
        */
        width: calc(100% - 30px);

        max-width: 600px;

        height: auto;

        aspect-ratio: 600 / 275;

        transform: translateX(-50%);
    }


    /* ------------------------------
       CONTACT DETAILS
    ------------------------------ */

    .contact-details {
        top: calc(
            98px +
            ((100vw - 30px) * 0.4583) +
            10px
        );

        left: 50%;

        width: calc(100% - 30px);

        max-width: 600px;

        transform: translateX(-50%);

        font-size: 14px;
    }
}

@media (max-width: 700px) {

    body > a {
        top: 20px;
        left: 20px;
        font-family: "Michroma Regular", sans-serif;
        font-size: 11px;
        line-height: 1;
    }

    .nav {
        top: 20px;
        right: 20px;
        gap: 10px;
    }

    .nav a {
        font-family: "Michroma Regular", sans-serif;
        font-size: 11px;
        line-height: 1;
    }

    /* CONTACT PAGE */

    .contact {
        width: 100%;
        box-sizing: border-box;
        min-height: auto;
        padding: 110px 20px 80px;
    }


    /* CONTACT HEADING */

    .contact h1 {
        position: static;

        margin: 0 0 45px 0;

        color: rgb(77, 2, 2);

        font-family: "Pliant Expanded", sans-serif;
        font-size: 55px;
        font-weight: normal;

        line-height: 0.9;
        letter-spacing: -2px;
    }


    /* IMAGE */

    .contact-image {
        position: static;

        display: block;

        width: 100%;
        max-width: none;
        height: auto;

        aspect-ratio: auto;

        transform: none;

        margin: 0 0 30px 0;
    }


    /* CONTACT DETAILS */

    .contact-details {
        position: static;

        width: 100%;
        max-width: none;

        transform: none;

        display: flex;
        flex-direction: column;
        align-items: flex-end;

        font-size: 17px;
        line-height: 1.5;
    }


}