* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
            --primary: #2563eb;
            --primary-hover: #1d4ed8;
            --disabled: #cbd5e1;
            --bg-surface: #ffffff;
            --bg-body: #f8fafc;
            --text-main: #1e293b;
            --text-muted: #64748b;
            --border: #e2e8f0;
            --radius: 8px;
}

/*-----------------------------------------------------------------------------------------------*/

@font-face {
    font-family: 'inter';
    src: url('fonts/Inter_18pt-Regular.ttf');
}

@font-face {
    font-family: 'inter-black';
    src: url('fonts/Inter_18pt-Black.ttf');
}

@font-face {
    font-family: 'inter-bold';
    src: url('fonts/Inter_18pt-Bold.ttf');
}

@font-face {
    font-family: 'inter-extrabold';
    src: url('fonts/Inter_18pt-ExtraBold.ttf');
}

@font-face {
    font-family: 'inter-semibold';
    src: url('fonts/Inter_18pt-SemiBold.ttf');
}

/* 24 px ----------------------------------------------------------------------------------------*/

@font-face {
    font-family: 'inter-s-black';
    src: url('fonts/Inter_24pt-Black.ttf');
}

@font-face {
    font-family: 'inter-s-bold';
    src: url('fonts/Inter_24pt-Bold.ttf');
}

@font-face {
    font-family: 'inter-s-extrabold';
    src: url('fonts/Inter_24pt-ExtraBold.ttf');
}

@font-face {
    font-family: 'inter-s-semibold';
    src: url('fonts/Inter_24pt-SemiBold.ttf');
}

/*-----------------------------------------------------------------------------------------------*/

@font-face {
    font-family: 'markazi';
    src: url('fonts/MarkaziText-Regular.ttf');
}

/*-----------------------------------------------------------------------------------------------*/

@font-face {
    font-family: 'yeseva';
    src: url('fonts/YesevaOne-Regular.ttf');
}

/*-----------------------------------------------------------------------------------------------*/

:root {
    --page-maxwidth: 1400px;

    --ff_fr: 'inter';
    --ff_ar: 'markazi';
    --ff-fancy : 'yeseva';

    --clr-one: hsl(330, 80%, 60%);
    --clr-one-light: hsl(330, 80%, 80%);

    --shade-20: hsl(0, 0, 20%);
    --shade-40: hsl(0, 0, 40%);
    --shade-60: hsl(0, 0, 60%);
    --shade-80: hsl(0, 0, 80%);
    --shade-90: hsl(0, 0, 90%);

}

/*===============================================================================================*/
/* GENERAL STYLES ===============================================================================*/

body {
    font-size: 16;
    font-family: 'inter';
}

a {
    color: var(--shade-20);
}

button {
    background: none;
    border: none;
    outline: none;
}

.title_fancy {
    text-transform: capitalize;
    font-family: var(--ff-fancy);
}

.new_section_title {
    color: hsl(0, 80%, 30%);

    padding: 0 20px;

    font-size: 32px;
    letter-spacing: 0.05em;
    line-height: 56px;

    position: relative;
    z-index: 1;
}

.new_section_title::before {
    content: '';
    position: absolute;

    top: 0;
    left: 0;
    bottom: 0;

    width: 56px;
    border-radius: 30px;

    background: hsl(0, 80%, 90%);

    z-index: -1;
}

/*===============================================================================================*/
/* BODY =========================================================================================*/
/*===============================================================================================*/

/*-----------------------------------------------------------------------------------------------*/
/* NAV SECTION ----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/

.nav_section {
    position: sticky;
    top: 0px;
    width: 100%;

    background: hsla(0, 60%, 100%, 1);
    backdrop-filter: blur(40px);

    box-shadow: 0 4px 8px -4px hsla(0, 30%, 20%, 0.3);
    z-index: 20;
}

.nav_wrapper {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;

    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px;
}


/* NAV BRAND ITEM -------------------------------------------------------------------------------*/

.nav_brand {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;

    gap: 8px;
}

.brand_logo {
    height: 32px;
    width: 32px;
}

.brand_title {
    color: hsl(0, 0%, 10%);
    font-size: 24px;
    text-shadow: 0px 2px 15px hsl(0, 80%, 90%);

    text-decoration: none;
}


/* NAV PROFILE BTN ------------------------------------------------------------------------------*/

.nav_profile {}

.reservation_box {}


.login_box {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;

    gap: 8px;

    width: max-content;
}

.login_btn {
    cursor: pointer;
    font-size: 16px;
    font-family: 'inter-bold';
    padding: 8px 16px;
    color: hsl(0, 0%, 40%);

    transition: color 200ms ease, transform 200ms ease;
}


.login_btn:hover {
    color: hsl(0, 80%, 40%);
    text-decoration: underline;
    transform: scale(1.1);
}


.profile_item {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;

    cursor: pointer;

    padding: 4px;
    
    border-radius: 24px;

    transition: background 200ms ease;
}

.profile_icon {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;

    
    height: 40px;
    width: 40px;
    background-color: hsl(0, 80%, 90%);
    border-radius: 20px;
}

.fa-user {
    color: hsl(0, 80%, 40%);
    font-size: 24px;
}

.profile_name {
    font-size: 16px;
    font-family: 'inter-semibold';
    text-transform: capitalize;
    padding: 8px 16px;
    color: hsl(0, 0%, 30%);
    padding-left: 8px;
}

.profile_item:hover {
    background: hsl(0, 80%, 90%);
}




/*-----------------------------------------------------------------------------------------------*/
/* SHOPPING SECTION -----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/

.shopping_section {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;

    gap: 20px;

    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 40px;

}

.shopping_info_container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;

    width: 100%;
}

.shopping_img {
    width: 300px;
    height: 380px;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    border-radius: 4px;
}

.shopping_box {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;

    width: calc(100% - 340px);
    height: max-content;

    gap: 20px;
}

.shopping_item {
    width: 100%;
}

.shopping_item_title {
    width: max-content;
    margin-bottom: 16px;

    font-family: 24px;
    font-family: var(--ff_fr);
    text-transform: uppercase;

    position: relative;
    z-index: 1;

}

.shopping_item_title::before {
    content: "";
    position: absolute;

    left: 0;
    right: 0;
    bottom: -5px;

    height: 2px;
    border-radius: 4px;
    background-color: hsl(0, 80%, 60%);
    z-index: 1;
}

.shopping_size_container {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 8px;

    width: 100%;
}

.shopping_size_item {
    color: hsl(0, 80%, 20%);
    font-size: 16px;

    height: 32px;
    width: 32px;

    line-height: 32px;
    text-align: center;
    
    background-color: hsl(0, 80%, 90%);

    border-radius: 4px;


}

.shopping_item_price {
    color: hsl(0, 80%, 20%);
    font-size: 28px;
}






/*-----------------------------------------------------------------------------------------------*/
/* HEADER SECTION -------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/

.header_section {
    width: 100%;
    padding: 80px 0;
}

.header_wrapprer {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;

    width: 90%;
    max-width: 1200px;

    margin: 0 auto;
    padding: 40px;

    height: max-content;
    min-height: 400px;

    

    box-shadow: 0px 30px 40px -40px hsl(0, 80%, 80%);
    
    border-radius: 16px;

    overflow: hidden;
    position: relative;
    z-index: 1;

}

.header_wrapprer::before {
    content: '';
    position: absolute;
    inset: 0;

    background-color: hsla(0, 80%, 10%, 0.3);

    backdrop-filter: multiply;
    z-index: -1;
}


.header_wrapprer::after {
    content: '';
    position: absolute;
    inset: 0;

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('images/pina-messina-qQKv7r1BaRw-unsplash.jpg');

    backdrop-filter: multiply;
    z-index: -2;
}



/* HEADER BOX -----------------------------------------------------------------------------------*/

.header_box {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    gap: 16px;

    height: 100%;
    width: 70%;
    min-width: 400px;

    padding: 24px;

    background: transparent;

}




.header_obj {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;

    gap: 24px;
}


.header_title {
    color: hsl(0, 80%, 100%);
    padding: 8px;

    font-family: var(--ff-fancy);
    font-size: 48px;
    text-transform: capitalize;
    letter-spacing: 0.05em;
    text-align: center;
    
}

.header_text {
    font-size: 18px;
    text-align: center;
    text-transform: capitalize;
    color: hsl(0, 80%, 100%);
}

.header_title, .header_text {
    text-shadow: 0px 0px 20px hsla(0, 60%, 10%, 1);
}


/*-----------------------------------------------------------------------------------------------*/
/* PRODUCT SECTION ------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/

.product_section {
    width: 100%;
    padding: 80px 0;
}

.wrapprer {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}


/* PRODUCT CONTAINER ----------------------------------------------------------------------------*/

.product_container {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 32px;

    width: 90%;
    max-width: 1200px;
    margin: 40px auto;
}


/* PRODECT OBJ ----------------------------------------------------------------------------------*/

.product_obj {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;

    cursor: pointer;

    width: 220px;
    height: max-content;

    border-radius: 4px;

    transition: transform 300ms ease;

    position: relative;
    z-index: 1;
}

.product_obj:hover {
    transform: scale(1.05);
}

.product_obj::before {
    content: '';
    position: absolute;

    bottom: 20px;
    right: 40px;
    left: 40px;

    height: 80px;
    background: hsl(0, 80%, 20%);
    filter: blur(25px);

    z-index: -2;
}

.product_img {
    height: 250px;
    width: 100%;

    border-top-left-radius: 4px;
    border-top-right-radius: 4px;

    background-image: url('images/robe_one.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


.product_box {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 16px;

    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    

    background-color: white;
}

.product_title {
    color: hsl(0, 80%, 20%);

    height: 48px;

    font-size: 18px;
    font-family: var(--ff-fancy);
    text-align: center;
    text-transform: capitalize;
    letter-spacing: 0.05em;
}

.product_price {
    color: hsl(0, 80%, 60%);
    font-size: 18px;
    text-transform: uppercase;
    text-align: center;
}

.product_btn {
    color: white;

    padding: 4px 24px;
    margin-top: 8px;

    font-size: 16px;
    font-family: 'inter-semibold';
    text-transform: lowercase;
    text-decoration: none;
    letter-spacing: 0.05em;

    background: hsl(0, 80%, 70%);
    border-radius: 2px;

    transition: background 200ms ease;
}

.product_btn:hover {
    background: hsl(0, 80%, 60%);
}


@media screen and (max-width: 585px) {


    .product_container {
        justify-content: space-around;
    
    }


    /* HEADER BOX -----------------------------------------------------------------------------------*/

    .header_box {
        width: 100%;
        min-width: 100%;

        padding: 0;
    }

    .header_obj {
        
        gap: 24px;
    }


    .header_title {
        padding: 8px;

        
        font-size: 32px;

    }

    .header_text {
        font-size: 16px;
    }
}

/*-----------------------------------------------------------------------------------------------*/
/* RESERVATION SECTION --------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/




/*-----------------------------------------------------------------------------------------------*/
/* PAGE SECTION --------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/


.page_section {
    padding: 80px 0;
    width: 100%;
}

.section_wrapper {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.section_box {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;

    height: max-content;

}

.sectiont_obj {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 40px;
    width: 60%;
    height: max-content;
}

.section_obj_title {
    height: max-content;

    padding-left: 20px;

    font-size: 58px;
    font-family: var(--ff-fancy);
    text-transform: capitalize;
    line-height: 80px;

    color: hsl(0, 90%, 20%);

    position: relative;
    z-index: 1;
}

.section_obj_title::before {
    content: '';
    position: absolute;

    top: 0;
    left: 0;
    

    height: 80px;
    width: 80px;

    border-radius: 40px;

    background-color: hsl(0, 80%, 90%);

    z-index: -1;
}

.section_text {
    font-size: 18px;
    text-transform: capitalize;
}

.section_img {
    width: calc(40% - 40px);
    height: 400px;

    background-image: url('images/daria-Hm2UqlVTBnc-unsplash.jpg');

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border-radius: 4px;
}



/*-----------------------------------------------------------------------------------------------*/
/* PAGE SECTION -   LEFT --------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/


.page_section-left .sectiont_obj {

    width: calc(100% - 440px);
    height: max-content;
}



.section_img-left {
    order: 0;
    width: 400px;
    height: 600px;
}



/*-----------------------------------------------------------------------------------------------*/
/* PAGE SECTION - RIGHT -------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/

.section_img-right {
    order: 1;
}

.sectiont_obj-right {
    order: 0; 
    align-items: flex-end;

     width: calc(100% - 440px);
    height: max-content;
}

.section_obj_title-right {
    text-align: right;
}

.section_text-right {
    font-size: 26px;
    line-height: 32px;
    text-align: right;
}

.section_obj_title-right, 
.section_text-right {
    font-family: var(--ff_ar);
    text-transform: none;
}

.page_section-right .section_obj_title::before { 
    left: auto;
    right: -10px;
}


/*-----------------------------------------------------------------------------------------------*/
/* iMAGE SECTION -------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/


.img_section {
    display: flex;

    width: 100%;
    padding: 20px;
}

.img_container {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;

    width: 100%;
    
    padding-top: 40px;
}

.img_item {
    width: 300px;
    height: 400px;

    border-radius: 4px;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}


/*-----------------------------------------------------------------------------------------------*/
/* FOOTER SECTION -------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/

.footer_section {
    width: 100%;
    margin-top: 40px;

    position: relative;
    z-index: 1;
}

.footer_section::before {
    content: '';
    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 2px;
    background: linear-gradient(to right, hsl(0, 80%, 95%) 0%, hsl(0, 80%, 80%) 50%, hsl(0, 80%, 95%) 100%);
}

.footer_wrapper {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: flex-start;

    width: 90%;
    max-width: 1200px;
    margin: 0 auto;

    padding: 40px 0;
}


/* FOOTER INFO ----------------------------------------------------------------------------------*/

.footer_info_obj {
    width: 50%;
}

.footer_info_title {
    font-size: 24px;
    font-family: var(--ff-fancy);
    text-transform: capitalize;
}

.footer_info_text {
    margin-top: 24px;
    text-transform: capitalize;
}


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

.footer_contact_obj {
    width: 50%;
    padding-left: 100px;
}

.footer_contact_title {
    font-size: 24px;
    font-family: var(--ff-fancy);
    text-transform: capitalize;
}

.footer_contact_box {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;

    gap: 16px;

    margin-top: 20px;
}

.footer_contact_item {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
}

.footer_contact_icon {
    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 18px;
    color: hsl(0, 80%, 30%);

    height: 32px;
    width: 32px;
    background: hsl(0, 80%, 90%);
    border-radius: 24px;
}

.footer_contact {
    padding-left: 8px;
    text-transform: capitalize;
    text-decoration: none;
}


/* FOOTER ICON ----------------------------------------------------------------------------------*/

.copy_right {
    color: hsl(0, 80%, 30%);
    padding: 16px;

    width: 100%;

    font-size: 16px;
    text-align: center;
    text-transform: lowercase;
    letter-spacing: 0.05em;
    background-color: hsl(0, 80%, 95%);
}


/*-----------------------------------------------------------------------------------------------*/
/* HEADLINE SECTION -----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/


.headline_section {
    width: 100%;
    height: max-content;

    margin: 0 auto;
    padding: 40px 0;

    position: relative;
    z-index: 1;
}


.headline_section::before {
    content: '';
    position: absolute;
    inset: 0;

    background: hsla(0, 10%, 20%, 0.5);

    backdrop-filter: multiply;

    z-index: -1;
}


.headline_img {
    position: absolute;
    inset: 0;

    background-image: url('images/dress_04.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    z-index: -2;
}

.headline_wrapprer {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 90%;
    max-width: 800px;
    margin: 0 auto;
}

.headline_box {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    min-height: 30vw;
}

.headline_obj {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    gap: 24px;

    height: max-content;
}


.headline_logo {
    width: 100%;
    height: 30vh;

    background-image: url('images/logo/logo.png');

    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    mix-blend-mode: screen;
}


.headline_title {
    color: hsl(0, 80%, 98%);

    font-family: var(--ff-fancy);
    font-size: 56px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;

    text-shadow: 0px 0px 20px hsla(0, 60%, 10%, 1);
}

.headline_text {
    color: white;

    font-size: 18px;
    line-height: 1.2em;

    text-align: center;
    text-transform: capitalize;
    letter-spacing: 0.05em;

    text-shadow: 0px 0px 20px hsla(0, 60%, 10%, 1);
}





/*-----------------------------------------------------------------------------------------------*/
/*--------------------------------------------- END ---------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/

@media screen and (max-width: 1000px) {
    /*-----------------------------------------------------------------------------------------------*/
    /* PAGE SECTION -   LEFT --------------------------------------------------------------------------------*/
    /*-----------------------------------------------------------------------------------------------*/


    .page_section-left .sectiont_obj {

        width: calc(100% - 340px);
        height: max-content;
    }



    .section_img-left {
        order: 0;
        width: 300px;
        height: 500px;
    }


    
    /*-----------------------------------------------------------------------------------------------*/
    /* PAGE SECTION - RIGHT -------------------------------------------------------------------------*/
    /*-----------------------------------------------------------------------------------------------*/

    .section_img-right {
        order: 1;
    }

    .sectiont_obj-right {
        order: 0; 
        align-items: flex-end;

         width: calc(100% - 340px);
        height: max-content;
    }

    .section_obj_title-right {
        text-align: right;
    }

    .section_text-right {
        font-size: 26px;
        line-height: 32px;
        text-align: right;
    }

    .section_obj_title-right, 
    .section_text-right {
        font-family: var(--ff_ar);
        text-transform: none;
    }

    .page_section-right .section_obj_title::before { 
        left: auto;
        right: -10px;
    }


}

@media screen and (max-width: 717px) {
    .footer_wrapper {
       flex-flow: column nowrap;
       justify-content: flex-start;
       align-items: center;

       gap: 40px;
    }


    /* FOOTER INFO ----------------------------------------------------------------------------------*/

    .footer_info_obj {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: center;
       width: 90%;
    }

    .footer_info_title {
       font-size: 24px;
       
       text-align: center;

       width: max-content;
    }

    .footer_info_text {
       margin-top: 16px;
       text-transform: capitalize;
       text-align: center;
    }


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

    .footer_contact_obj {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: center;

       width: 90%;
       padding-left: 0;
    }

    .footer_contact_title {
       font-size: 24px;
       font-family: var(--ff-fancy);
       text-transform: capitalize;
    }

    .footer_contact_box {
       display: flex;
       flex-flow: row wrap;
       justify-content: flex-start;
       align-items: flex-start;

       gap: 16px;

       margin-top: 20px;
    }


    
}



@media screen and (max-width: 840px) {
    /*-----------------------------------------------------------------------------------------------*/
    /* PAGE SECTION --------------------------------------------------------------------------------*/
    /*-----------------------------------------------------------------------------------------------*/


    

    .section_wrapper {
        width: 90%;
        max-width: 1200px;
        margin: 0 auto;
    }

    .section_box {
        display: flex;
        flex-flow: column wrap;
        justify-content: flex-start;
        align-items: center;
        gap: 40px;

        height: max-content;
    }

    .sectiont_obj {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: center;
        gap: 40px;
        width: 100%;
        height: max-content;
    }

    .section_obj_title {
        height: max-content;

        padding-left: 20px;

        font-size: 40px;
        font-family: var(--ff-fancy);
        text-transform: capitalize;
        line-height: 64px;
        text-align: center;

        color: hsl(0, 90%, 20%);

        position: relative;
        z-index: 1;
    }

    .section_obj_title::before {
        content: '';
        position: absolute;

        top: 0;
        left: 0;


        height: 64px;
        width: 64px;

        border-radius: 40px;

        background-color: hsl(0, 80%, 90%);

        z-index: -1;
    }

    .section_text {
        font-size: 16px;
        text-transform: capitalize;
        text-align: center;
    }

    .section_img {
        width: 100%;
        height: 250px;

        border-radius: 4px;
    }




    /*-----------------------------------------------------------------------------------------------*/
    /* HEADLINE SECTION -----------------------------------------------------------------------------*/
    /*-----------------------------------------------------------------------------------------------*/

    
    .headline_box {
       padding: 16px;

        width: 100%;
        min-height: max-content;
    }

    .headline_obj {
       
        height: max-content;
    }

    .headline_title {
        font-size: 40px;
    }

    .headline_text {
        font-size: 16px;
    }




    /*-----------------------------------------------------------------------------------------------*/
    /* PAGE SECTION -   LEFT --------------------------------------------------------------------------------*/
    /*-----------------------------------------------------------------------------------------------*/

    .page_section {
        margin: 0 auto;
        padding: 20px 0;
    
    }
    .page_section-left .sectiont_obj {

        order: 0;
        width: 100%;
        height: max-content;
    }



    .section_img-left {
        order: 2;
        width: 100%;
        height: 400px;
        background-position: top;
    }



    
    /*-----------------------------------------------------------------------------------------------*/
    /* PAGE SECTION - RIGHT -------------------------------------------------------------------------*/
    /*-----------------------------------------------------------------------------------------------*/

    .section_img-right {
        order: 1;
    }

    .sectiont_obj-right {
        order: 0; 
        align-items: center;

        width: 100%;
        height: max-content;
    }

   

    .section_text-right {
        font-size: 24px;
        line-height: 32px;
    }

    .section_obj_title-right, 
    .section_text-right {
        font-family: var(--ff_ar);
        text-transform: none;
        text-align: center;
    }

    .page_section-right .section_obj_title::before { 
        left: auto;
        right: -10px;
    }





}


@media screen and (max-width: 500px) {
    .brand_title {
        font-size: 18px;
    }

    .header_section {
        width: 100%;
        padding: 40px 0;
    }

    .product_section {
        width: 100%;
        padding: 40px 0;
    }

    .page_section {
        padding: 40px 0;
        width: 100%;
    }




    
    /*-----------------------------------------------------------------------------------------------*/
    /* PAGE SECTION - RIGHT -------------------------------------------------------------------------*/
    /*-----------------------------------------------------------------------------------------------*/

    .section_text-right {
        font-size: 20px;
        line-height: 24px;
    }

    .section_obj_title-right {
        font-size: 34px;
    }

    /*-----------------------------------------------------------------------------------------------*/
    /* HEADLINE SECTION -----------------------------------------------------------------------------*/
    /*-----------------------------------------------------------------------------------------------*/

    
    .headline_box {
       padding: 16px;

        width: 100%;
        min-height: max-content;
    }

    .headline_obj {
       
        height: max-content;
    }

    .headline_title {
        font-size: 32px;
    }

    .headline_text {
        font-size: 16px;
    }


}

.shopping_btn {
    width: 100%;
    height: 32px;
  
    font-size: 18px;
    text-transform: uppercase;

}

@media screen and (max-width: 750px) {

    .shopping_info_container {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: center;
        gap: 40px;
        
        width: 100%;
    }
    
    .shopping_img {
        width: 300px;
        height: 380px;
    
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    
        border-radius: 4px;
    }
    
    .shopping_box {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: flex-start;
    
        width: 100%;
        height: max-content;
    
        gap: 20px;
    }
    
    .shopping_item {
        width: 100%;
    }
    
    .shopping_item_title {
        width: max-content;
        margin-bottom: 16px;
    
        font-family: 24px;
        font-family: var(--ff_fr);
        text-transform: uppercase;
    
        position: relative;
        z-index: 1;
    
    }
    
    .shopping_item_title::before {
        content: "";
        position: absolute;
    
        left: 0;
        right: 0;
        bottom: -5px;
    
        height: 2px;
        border-radius: 4px;
        background-color: hsl(0, 80%, 60%);
        z-index: 1;
    }
    
    .shopping_size_container {
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        align-items: flex-end;
        gap: 8px;
    
        width: 100%;
    }
    
    .shopping_size_item {
        color: hsl(0, 80%, 20%);
        font-size: 16px;
    
        height: 32px;
        width: 32px;
    
        line-height: 32px;
        text-align: center;
        
        background-color: hsl(0, 80%, 90%);
    
        border-radius: 4px;
    
    
    }
    
    .shopping_item_price {
        color: hsl(0, 80%, 20%);
        font-size: 28px;
    }

}

@media screen and (max-width: 365px) {
    .shopping_img {
        width: 100%;
        height: 380px;
    }
}

/*===============================================================================================*/
/*===============================================================================================*/



/* --- HERO PHOTO GRID SECTION --- */
        .hero_mosaic_section {
            position: relative;
            width: 100%;
            height: 100vh;
            background-color: var(--alger-dark);
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* The Background Grid */
        .hero_bg_grid {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(2, 1fr);
            gap: 12px;
            padding: 12px;
            filter: brightness(0.5) grayscale(20%); /* Dims background for logo clarity */
        }

        .hero_photo {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 4px;
        }

        /* 5-Image Grid Logic */
        .img_1 { grid-column: 1 / 2; grid-row: 1 / 3; } 
        .img_2 { grid-column: 2 / 4; grid-row: 1 / 2; } 
        .img_3 { grid-column: 2 / 3; grid-row: 2 / 3; } 
        .img_4 { grid-column: 3 / 4; grid-row: 2 / 3; } 
        .img_5 { grid-column: 4 / 5; grid-row: 1 / 3; } 

        /* Foreground Image Logo */
        .hero_foreground_box {
            position: relative;
            z-index: 10;
            width: 100%;
            max-width: 600px; /* Adjust based on your logo shape */
            padding: 40px;
            display: flex;
            flex-direction: column;
            align-items: center;
            animation: logoEntrance 1.5s ease-out;
        }

        .hero_image_logo {
            width: 100%;
            height: auto;
            display: block;
            /* Dropshadow to lift the logo off the background images */
            filter: drop-shadow(0 10px 20px rgba(0,0,0,0.4)); 
            mix-blend-mode: screen;
        }

        @keyframes logoEntrance {
            from { opacity: 0; transform: scale(0.95); }
            to { opacity: 1; transform: scale(1); }
        }

        /* Mobile Handling */
        @media (max-width: 850px) {
            .hero_foreground_box { max-width: 80%; }

            /* Simpler grid for mobile performance */
            .hero_bg_grid { 
                grid-template-columns: repeat(2, 1fr); 
                grid-template-rows: repeat(3, 1fr);
            }
            .img_1 { grid-column: 1 / 2; grid-row: 1 / 2; }
            .img_2 { grid-column: 2 / 3; grid-row: 1 / 2; }
            .img_3 { grid-column: 1 / 2; grid-row: 2 / 3; }
            .img_4 { grid-column: 2 / 3; grid-row: 2 / 3; }
            .img_5 { grid-column: 1 / 3; grid-row: 3 / 4; }
        }