@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");



:root {
    --primary-color:#1E3A8A;
    --text-dark:#111827;
    --text-light:#6B7280;
    --extra-light:#F1F5F9;
    --white:#FFFFFF;
    --max-width:1200px;
}
:root {
    --primary-color:#D4AF7A;
    --text-dark:#2B2118;
    --text-light:#85786A;
    --extra-light:#FAF5EF;
    --white:#FFFFFF;
    --max-width:1200px;
}

:root {
    --primary-color:#0F766E;
    --text-dark:#111827;
    --text-light:#64748B;
    --extra-light:#F0FDFA;
    --white:#FFFFFF;
    --max-width:1200px;
}

:root {
    --primary-color:#B76E79;
    --text-dark:#0A0A0A;
    --text-light:#737373;
    --extra-light:#FDF8F8;
    --white:#FFFFFF;
    --max-width:1200px;
}
:root {
    --primary-color:#C9A227;
    --text-dark:#111111;
    --text-light:#777777;
    --extra-light:#F8F6F1;
    --white:#FFFFFF;
    --max-width:1200px;
}
:root {
  --primary-color: #e5c641;
  --text-dark: #000000;
  --text-light: #737373;
  --extra-light: #f4f6f6;
  --white: #ffffff;
  --max-width: 1200px;
}


:root{

    /* Brand */
    --primary-color: #e5c641;
    --primary-hover: #d4b42d;
    --text-dark: #000000;
    --text-light: #737373;
    --text-muted: #9ca3af;
    --white: #ffffff;
    --extra-light: #f4f6f6;
    --background: #fafafa;
    --border-color: #e5e7eb;
    --shadow: 0 5px 25px rgba(0,0,0,.06);
    --radius: 10px;
    --radius-lg: 16px;
    --radius-md:12px;
    --radius-xl:20px;
    --max-width: 1200px;

    --success:#22c55e;

    --overlay:rgba(0,0,0,.55);
    --overlay-light:rgba(0,0,0,.50);

    --shadow:0 5px 25px rgba(0,0,0,.06);
    --shadow-sm:0 3px 12px rgba(0,0,0,.08);
    --shadow-lg:0 15px 40px rgba(0,0,0,.20);

}

:root{

    --primary-color:#b8926a;
    --primary-hover:#a57d55;

    --text-dark:#1c1c1c;
    --text-light:#686868;
    --text-muted:#949494;

    --white:#ffffff;
    --background:#fbfaf8;
    --extra-light:#f5f2ee;

    --border-color:#e8e2db;

    --success:#22c55e;

    --overlay:rgba(0,0,0,.58);
    --overlay-light:rgba(0,0,0,.45);

    --shadow:0 8px 30px rgba(0,0,0,.07);
    --shadow-sm:0 4px 14px rgba(0,0,0,.05);
    --shadow-lg:0 18px 42px rgba(0,0,0,.18);

    --radius:10px;
    --radius-md:12px;
    --radius-lg:16px;
    --radius-xl:20px;

    --max-width:1200px;

}



:root{

    --primary-color:#c9a227;
    --primary-hover:#b18d1e;

    --text-dark:#111111;
    --text-light:#5f5f5f;
    --text-muted:#8b8b8b;

    --white:#ffffff;
    --background:#f8f8f8;
    --extra-light:#f2f2f2;

    --border-color:#e3e3e3;

    --success:#22c55e;

    --overlay:rgba(0,0,0,.60);
    --overlay-light:rgba(0,0,0,.45);

    --shadow:0 8px 30px rgba(0,0,0,.08);
    --shadow-sm:0 4px 15px rgba(0,0,0,.06);
    --shadow-lg:0 20px 45px rgba(0,0,0,.18);

    --radius:10px;
    --radius-md:12px;
    --radius-lg:16px;
    --radius-xl:20px;

    --max-width:1200px;

}


:root{

    --primary-color:#d59c85;
    --primary-hover:#c78970;

    --text-dark:#202020;
    --text-light:#666666;
    --text-muted:#8d8d8d;

    --white:#ffffff;
    --background:#faf8f7;
    --extra-light:#f3efed;

    --border-color:#e8dcd7;

    --success:#22c55e;

    --overlay:rgba(0,0,0,.55);
    --overlay-light:rgba(0,0,0,.45);

    --shadow:0 10px 28px rgba(60,35,20,.08);
    --shadow-sm:0 4px 14px rgba(60,35,20,.06);
    --shadow-lg:0 20px 45px rgba(60,35,20,.16);

    --radius:10px;
    --radius-md:12px;
    --radius-lg:16px;
    --radius-xl:20px;

--transition-fast:0.2s ease;
--transition:0.35s ease;
--transition-slow:0.5s ease;

--hover-lift:-6px;
--hover-scale:1.08;

    --max-width:1200px;
}

:root{

    --primary-color:#1f7a5b;
    --primary-hover:#17684c;

    --text-dark:#1b1b1b;
    --text-light:#636363;
    --text-muted:#8f8f8f;

    --white:#ffffff;
    --background:#f7faf8;
    --extra-light:#eef6f2;

    --border-color:#dce7e1;

    --success:#22c55e;

    --overlay:rgba(0,0,0,.58);
    --overlay-light:rgba(0,0,0,.45);

    --shadow:0 8px 28px rgba(10,50,35,.08);
    --shadow-sm:0 4px 14px rgba(10,50,35,.06);
    --shadow-lg:0 18px 42px rgba(10,50,35,.18);

    --radius:10px;
    --radius-md:12px;
    --radius-lg:16px;
    --radius-xl:20px;

    --max-width:1200px;

}


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


img {
  display: flex;
  width: 100%;
}

a {
  text-decoration: none;
  transition: 0.3s;
}

ul {
  list-style: none;
}

html,
body {
  scroll-behavior: smooth;
}

body {
  font-family: "Poppins", sans-serif;
}
/* =========================
   NAVIGATION
========================= 

nav{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:80px;
    background:var(--primary-color);
    box-shadow:var(--shadow);
    z-index:99999;
}

.nav__container{
    max-width:var(--max-width);
    height:80px;
    margin:0 auto;
    padding:0 40px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.nav__header{
    display:flex;
    align-items:center;
}

.nav__links{
    display:flex;
    align-items:center;
    gap:35px;
    list-style:none;
    margin:0;
    padding:0;
}

.nav__links li{
    position:relative;
}

.nav__links li a{
    text-decoration:none;
    color:var(--text-dark);
    font-size:15px;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:1px;
    transition:.3s;
}

.nav__links li a:hover{
    color:var(--white);
}


.nav__logo a{
    text-decoration:none;
    color:var(--text-dark);
    font-size:30px;
    font-weight:700;
    letter-spacing:2px;
    font-family:Georgia,serif;
}


/* =========================
   MENU BUTTON
========================= 

.nav__menu__btn{
    display:none;
    font-size:28px;
    color:var(--text-dark);
    cursor:pointer;
}


/* =========================
   DROPDOWN MENU
========================= 

.dropdown-content{
    position:absolute;
    top:45px;
    left:0;
    width:230px;
    background:var(--white);
    border:1px solid var(--border-color);
    padding:15px 0;
    list-style:none;
    opacity:0;
    visibility:hidden;
    transform:translateY(15px);
    box-shadow:var(--shadow-lg);
    border-radius:var(--radius);
    transition:.35s;
}

.dropdown:hover .dropdown-content{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.dropdown-content li{
    padding:0;
}

.dropdown-content li a{
    color:var(--text-dark);
    display:block;
    padding:12px 25px;
    font-size:14px;
    text-transform:none;
}

.dropdown-content li a:hover{
    background:var(--extra-light);
    padding-left:32px;
}

.dropdown i{
    margin-left:5px;
    font-size:18px;
}


/* =========================
   ICONS
========================= 

.user-icon,
.cart-icon{
    position:relative;
    font-size:22px!important;
    color:var(--text-dark);
}

.user-icon i,
.cart-icon i{
    font-size:22px;
}

.user-icon:hover,
.cart-icon:hover{
    color:var(--white);
}


/* =========================
   CART COUNT
========================= 

.cart-count{
    position:absolute;
    top:-10px;
    right:-12px;
    width:19px;
    height:19px;
    border-radius:50%;
    background:var(--text-dark);
    color:var(--white);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    font-weight:bold;
}


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

.btn{
    border:none;
    background:var(--text-dark);
    color:var(--white);
    padding:12px 28px;
    border-radius:999px;
    font-size:13px;
    letter-spacing:1px;
    cursor:pointer;
    transition:.3s;
}

.btn:hover{
    background:var(--white);
    color:var(--text-dark);
    transform:translateY(-2px);
}
*/

nav{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:80px;
    background:var(--extra-light);
    box-shadow:var(--shadow);
    z-index:99999;
}

.nav__container{
    max-width:var(--max-width);
    height:80px;
    margin:0 auto;
    padding:0 40px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.nav__header{
    display:flex;
    align-items:center;
}

.nav__links{
    display:flex;
    align-items:center;
    gap:35px;
    list-style:none;
    margin:0;
    padding:0;
}

.nav__links li{
    position:relative;
}

.nav__links li a{
    text-decoration:none;
    color:var(--text-dark);
    font-size:15px;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:1px;
    transition:.3s;
}

.nav__links li a:hover{
    color:var(--primary-color);
}


/* =========================
   LOGO
========================= */

.nav__logo a{
    text-decoration:none;
    color:var(--text-dark);
    font-size:30px;
    font-weight:700;
    letter-spacing:2px;
    font-family:Georgia,serif;
}


/* =========================
   MENU BUTTON
========================= */

.nav__menu__btn{
    display:none;
    font-size:28px;
    color:var(--text-dark);
    cursor:pointer;
}


/* =========================
   DROPDOWN MENU
========================= */

.dropdown-content{
    position:absolute;
    top:45px;
    left:0;
    width:230px;
    background:var(--white);
    padding:15px 0;
    list-style:none;
    opacity:0;
    visibility:hidden;
    transform:translateY(15px);
    box-shadow:var(--shadow-lg);
    border-radius:var(--radius);
    transition:.35s;
}

.dropdown:hover .dropdown-content{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.dropdown-content li{
    padding:0;
}

.dropdown-content li a{
    display:block;
    padding:12px 25px;
    font-size:14px;
    text-transform:none;
}

.dropdown-content li a:hover{
    background:var(--extra-light);
    padding-left:32px;
}

.dropdown i{
    margin-left:5px;
    font-size:18px;
}


/* =========================
   ICONS
========================= */

.user-icon,
.cart-icon{
    position:relative;
    font-size:22px!important;
}

.user-icon i,
.cart-icon i{
    font-size:22px;
}

.user-icon:hover,
.cart-icon:hover{
    color:var(--primary-color);
}


/* =========================
   CART COUNT
========================= */

.cart-count{
    position:absolute;
    top:-10px;
    right:-12px;
    width:19px;
    height:19px;
    border-radius:50%;
    background:var(--primary-color);
    color:var(--white);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    font-weight:bold;
}


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

.btn{
    border:none;
    background:var(--text-dark);
    color:var(--white);
    padding:12px 28px;
    border-radius:999px;
    font-size:13px;
    letter-spacing:1px;
    cursor:pointer;
    transition:.3s;
}

.btn:hover{
    background:var(--primary-hover);
    color:var(--text-dark);
    transform:translateY(-2px);
}

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

@media(max-width:900px){

    nav{
        height:70px;
    }

    .nav__container{
        height:70px;
        padding:0 20px;
        justify-content:space-between;
    }

    .nav__header{
        width:100%;
        padding:0;
        justify-content:space-between;
    }

    .nav__logo a{
        font-size:24px;
    }

    .nav__menu__btn{
        display:block;
        color:var(--text-dark);
    }

    /* MOBILE MENU */

    .nav__links{
        position:fixed;
        top:70px;
        left:0;
        width:80%;
        height:calc(100vh - 70px);
        background:var(--extra-light);
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        padding:25px;
        gap:20px;
        overflow-y:auto;
        transform:translateX(-100%);
        transition:.4s ease;
        box-shadow:var(--shadow-lg);
    }

    .nav__links.active{
        transform:translateX(0);
    }

    .nav__links li{
        width:100%;
    }

    .nav__links li a{
        width:100%;
        display:flex;
        justify-content:space-between;
        font-size:16px;
    }

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

    .dropdown-content{
        position:static;
        width:100%;
        max-height:0;
        overflow:hidden;
        opacity:0;
        visibility:hidden;
        transform:translateY(-10px);
        box-shadow:none;
        border-radius:0;
        padding-left:15px;
        padding-top:0;
        transition:max-height .4s ease, opacity .3s ease, transform .3s ease;
    }

    .dropdown:hover .dropdown-content{
        display:block;
    }

    .dropdown.active .dropdown-content{
        max-height:500px;
        opacity:1;
        visibility:visible;
        transform:translateY(0);
        padding-top:10px;
    }

    .dropdown-content li{
        margin-bottom:10px;
    }

    .dropdown-content li a{
        padding:10px 15px;
        font-size:14px;
    }

    .btn{
        width:100%;
    }

}

/* ==========================
   NEW ARRIVALS SECTION
========================== */

.arrival__container{
    max-width: var(--max-width);
    margin:0 auto;
    padding:0 20px;
}

.arrival__container .section__header{
    font-size:32px;
    font-weight:700;
    text-align:center;
    margin-bottom:40px;
    text-transform:uppercase;
    color:#222;
}

/* Grid */

.arrival__grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

/* Card */

.arrival__card{
    background:#fff;
    transition:.3s;
}

.arrival__card:hover{
    transform:translateY(-5px);
}

/* Image */

.arrival__image{
    overflow:hidden;
    background:#f7f7f7;
}

.arrival__image img{
    width:100%;
    display:block;
    transition:.4s;
}

.arrival__card:hover .arrival__image img{
    transform:scale(1.08);
}

/* Content */

.arrival__content{
    padding:15px 5px;
}

.arrival__content h4{
    font-size:17px;
    font-weight:500;
    color:#222;
    margin-bottom:8px;
}

.arrival__content a{
    font-size:16px;
    font-weight:600;
    color:#000;
    text-decoration:none;
}

.arrival__content a:hover{
    color:#666;
}

/* ==========================
   SHOW MORE
========================== */

.load-more{
    margin-top:60px;
    text-align:center;
}

.load-more p{
    font-size:15px;
    color:#666;
    margin-bottom:20px;
}



/* ==========================
   RESPONSIVE
========================== */

@media(max-width:1200px){

.arrival__grid{ grid-template-columns:repeat(4,1fr); }

}

@media(max-width:768px){

.arrival__grid{
    grid-template-columns:repeat(2,1fr);
}

.arrival__container .section__header{
    font-size:28px;
}

}

@media(max-width:576px){

.arrival__grid{
        grid-template-columns:repeat(2,1fr);
        gap:15px;
    }

    .arrival__container{
        padding:0 15px;
    }

    .arrival__content h4{
        font-size:14px;
    }

    .arrival__content a{
        font-size:14px;
    }
}

/*section__container*/

.section__container {
  max-width: var(--max-width);
  margin:0 auto;
  padding: 5rem 1rem 0 1rem;
}



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

.header__container{
    border-radius: 2rem;
     position:relative;
     margin:0 auto;
    z-index:2;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:70px;
    max-width: var(--max-width);

    overflow:hidden;

    padding:90px 60px;

    background:
    radial-gradient(circle at top left,var(--extra-light),transparent 45%),
    radial-gradient(circle at bottom right,rgba(31,122,91,.10),transparent 45%),
    var(--background);
    box-shadow:var(--shadow-lg);
border-radius:var(--radius-xl);
border:1px solid var(--border-color);


}


/*==================================================
            DECORATION
==================================================*/

.header__container::before{

    content:"";

    position:absolute;

    width:520px;
    height:520px;

    border-radius:50%;

    background:rgba(31,122,91,.05);

    top:-220px;
    left:-180px;

}

.header__container::after{

    content:"";

    position:absolute;

    /*width:420px;
    height:420px;*/
    width:320px;
    height:320px;

    border-radius:50%;

    background:rgba(31,122,91,.06);

    bottom:-180px;
    right:-120px;

}


.header__container::before,
.header__container::after{

    z-index:0;

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

.header__content h1{

    font-size:72px;

    line-height:1.08;

    font-weight:900;

    color:var(--text-dark);

    letter-spacing:-2px;

    margin-bottom:20px;

}

.header__content h1 span{

    color:var(--primary-color);

}

.header__content p{

    max-width:500px;

    font-size:19px;

    line-height:1.8;

    color:var(--text-light);

    margin-bottom:35px;

}

.header__content,
.header__image{

    position:relative;
    z-index:200;

}

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

.header__btns .btn{
    letter-spacing:.5px;
    background:var(--primary-color);

    color:var(--white);

    border:none;

    padding:16px 42px;

    border-radius:50px;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:var(--transition);

    box-shadow:var(--shadow);

}

.header__btns .btn:hover{

    background:var(--primary-hover);

    transform:translateY(-4px);

}


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

.header__image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;
    margin: 0 100px 90px 0;

}
/*
.header__image::before{

    content:"";

    position:absolute;

    width:540px;
    height:540px;

    border-radius:50%;

    background:linear-gradient(
    135deg,
    var(--extra-light),
    rgba(31,122,91,.12));

}*/

.header__image img{

    position:relative;

    z-index:200;
    max-width:520px;
width:100%;
height:auto;
    transition:var(--transition-slow);

}

.header:hover .header__image img{

    transform:scale(1.04);

}


/*==================================================
            ARROWS
==================================================*/

.banner-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:55px;
    height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    border:1px solid var(--border-color);

    color:var(--primary-color);

    font-size:28px;

    cursor:pointer;

    transition:var(--transition);

    z-index:20;

    box-shadow:var(--shadow);

}

.banner-arrow:hover{

    background:var(--primary-color);

    color:var(--white);

    transform:translateY(-50%) scale(1.08);

}

.banner-left{

    left:35px;

}

.banner-right{

    right:35px;

}


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

@media(max-width:992px){

.header__image{

    order:1;
    margin: 0;
}

.header__content{

    order:2;

}


.header__container{
    padding:50px 25px;
    grid-template-columns:1fr;
    margin-top:50px;
    text-align:center;
    box-shadow: none;
    gap:40px;

}

.header__content h1{

    font-size:52px;

}

.header__content p{

    margin:0 auto 30px;

}

.header__image::before{

    width:360px;
    height:360px;

}

.banner-arrow{

    width:45px;
    height:45px;

    font-size:22px;

}

.banner-left{

    left:10px;

}

.banner-right{

    right:10px;

}

}

@media(max-width:576px){

.header__container::after{
    /*width:420px;
    height:420px;*/
    width:270px;
    height:270px;

    

}

.header__content h1{

    font-size:38px;

}

.header__content p{

    font-size:15px;

}

.header__image img{

    max-width:300px;

}

}

.banner {
  padding-block: 4rem;
  overflow: hidden;
  background-color: var(--primary-color);
}

.banner__container {
  width: max-content;
  display: flex;
  align-items: center;
  gap: 8rem;

  animation: scroll 45s linear infinite;
}

.banner__container img {
  height: 30px;
}

@keyframes scroll {
  to {
    transform: translateX(calc(-50% - 4rem));
  }
}






.sale{
    padding-top:5rem;
    padding-inline:1rem;
    margin-bottom:5rem;
    overflow:hidden;
}


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

.sale__container{
    max-width:calc(var(--max-width) - 2rem);
    display:grid;
    grid-template-columns:repeat(2,1fr);
    align-items:center;
    gap:2rem;

    padding:0;

    background:var(--extra-light);
    border-radius:var(--radius-xl);
    border:1px solid var(--border-color);
    box-shadow:var(--shadow);

    isolation:isolate;
}


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

.sale__content{
    padding:5rem 2.5rem;
}

.sale__content h2{
    margin-bottom:1rem;
    font-size:5rem;
    font-weight:800;
    line-height:5.8rem;
    color:var(--text-dark);
}

.sale__content h2 span{
    position:relative;
    display:inline-block;
    isolation:isolate;
}

.sale__content h2 span::before{
    content:"";
    position:absolute;
    top:0;
    left:-1rem;

    width:calc(100% + 2rem);
    height:calc(100% - 10px);

    background:var(--white);
    border-radius:var(--radius);

    transform:rotate(-2deg);

    box-shadow:var(--shadow-sm);

    z-index:-1;
}

.sale__content p{
    margin-bottom:2rem;
    font-size:1.15rem;
    font-weight:500;
    line-height:1.8;

    color:var(--text-light);
}

.sale__content h4{
    margin-bottom:2rem;
    font-size:1.5rem;
    font-weight:600;

    color:var(--text-dark);
}


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

.sale__image{
    position:relative;
    height:100%;
}

.sale__image img{
    position:absolute;
    right:1rem;
    bottom:0;

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

    filter:drop-shadow(20px 20px 20px rgba(0,0,0,.20));

    transition:.35s;
}

.sale__container:hover .sale__image img{
    transform:translateY(-8px);
}


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

.sale__btn .btn{
    background:var(--text-dark);
    color:var(--white);
    border:1px solid var(--text-dark);
    transition:.3s;
}

.sale__btn .btn:hover{
    background:var(--primary-color);
    border-color:var(--primary-color);
    color:var(--text-dark);
    box-shadow:var(--shadow);
}

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

@media (max-width:768px){

    .sale__container{
        grid-template-columns:1fr;
        text-align:center;
        gap:2rem;
    }

    .sale__image{
        order:1;
        height:auto;
    }

    .sale__image img{
        position:static;
        width:100%;
        max-width:420px;
        height:auto;
        margin:auto;
        margin-bottom:-60px;  
    }

    .sale__content{
        order:2;
        padding:2rem 1rem 3rem;
        
    }

    .sale__content h2{
        font-size:3rem;
        line-height:3.5rem;
    }

    .sale__content h2 span::before{
        left:-.4rem;
        width:calc(100% + .8rem);
        height:100%;
    }

    .sale__content p{
        font-size:1rem;
    }

    .sale__content h4{
        font-size:1.25rem;
    }

    .sale__btn{
        display:flex;
        justify-content:center;
    }
}

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

@media (max-width:480px){

    .sale__content{
        padding:1.5rem 1rem 2.5rem;
    }

    .sale__content h2{
        font-size:2.3rem;
        line-height:2.8rem;
    }

    .sale__content p{
        font-size:.95rem;
    }

    .sale__content h4{
        font-size:1.1rem;
    }

    .sale__image img{
        max-width:320px;
    }
}

/*==================================================
            HOME PRODUCT SLIDER
==================================================*/

.favourite__container{
    margin:0 auto;
}

.favourite__header{

    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:25px;

}

.favourite__header .section__header{

    margin:0;

    color:var(--text-dark);

    font-size:32px;
    font-weight:700;

}


/*==================================================
            ARROW BUTTONS
==================================================*/

.favourite__arrows{

    display:flex;
    align-items:center;
    gap:12px;

}

.favourite__arrows span{

    width:45px;
    height:45px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--border-color);

    border-radius:50%;

    background:var(--white);

    color:var(--primary-color);

    cursor:pointer;

    transition:var(--transition);

    box-shadow:var(--shadow-sm);

}

.favourite__arrows span:hover{

    background:var(--primary-color);

    color:var(--white);

    transform:translateY(-3px);

    box-shadow:var(--shadow);

}


/*==================================================
            PRODUCT SCROLL
==================================================*/

.favourite__grid{

    display:flex;

    gap:20px;

    overflow-x:auto;
    overflow-y:hidden;

    scroll-behavior:smooth;

    padding-bottom:15px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;

}


/* Scrollbar */

.favourite__grid::-webkit-scrollbar{
    display:none;
    height:8px;

}

.favourite__grid::-webkit-scrollbar-track{

    background:var(--extra-light);

    border-radius:20px;

}

.favourite__grid::-webkit-scrollbar-thumb{

    background:var(--primary-color);

    border-radius:20px;

}

.favourite__grid::-webkit-scrollbar-thumb:hover{

    background:var(--primary-hover);

}


/* Firefox */

.favourite__grid{

    scrollbar-width:thin;

    scrollbar-color:var(--primary-color) var(--extra-light);

}


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

.favourite__card{

    flex:0 0 250px;

    background:var(--white);

    border:1px solid var(--border-color);

    border-radius:var(--radius-lg);

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.favourite__card:hover{

    transform:translateY(var(--hover-lift));

    box-shadow:var(--shadow-lg);

}


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

.favourite__image{

    width:100%;
    height:320px;

    overflow:hidden;

    background:var(--background);

}

.favourite__image img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:var(--transition-slow);

}

.favourite__card:hover .favourite__image img{

    transform:scale(var(--hover-scale));

}


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

.favourite__content{

    padding:16px;

}

.favourite__content h4{

    color:var(--text-dark);

    font-size:17px;

    font-weight:600;

    line-height:1.5;

    margin-bottom:10px;

    height:52px;

    overflow:hidden;

}

.favourite__content p{

    color:var(--primary-color);

    font-size:18px;

    font-weight:700;

    margin-bottom:15px;

}


/*==================================================
            VIEW BUTTON
==================================================*/

.favourite__content a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:var(--primary-color);

    font-size:14px;

    font-weight:600;

    text-decoration:none;

    transition:var(--transition-fast);

}

.favourite__content a:hover{

    color:var(--primary-hover);

}


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

@media(max-width:768px){

    .favourite__container{

        margin:40px auto;

    }

    .favourite__header .section__header{

        font-size:24px;

    }

    .favourite__arrows span{

        width:38px;
        height:38px;

    }

    .favourite__card{

        flex:0 0 180px;

    }

    .favourite__image{

        height:240px;

    }

    .favourite__content{

        padding:12px;

    }

    .favourite__content h4{

        font-size:15px;

        height:46px;

    }

}

.download__container {
  display: grid;
  gap: 2rem;
  overflow: hidden;
}

.download__image img {
  max-width: 500px;
  margin-inline: auto;
}

.download__content .section__header {
  margin-bottom: 2rem;
  text-align: center;
}

.download__content p {
  margin-bottom: 2rem;
  color: var(--text-light);
  text-align: center;
}

.download__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.download__links img {
  max-width: 150px;
}

.promo {
  background-color: var(--primary-color);
}

.promo__container .section__header {
  max-width: 700px;
  margin-inline: auto;
  margin-bottom: 1rem;
  color: var(--white);
  text-align: center;
  line-height: 3.25rem;
}

.promo__container p {
  margin-bottom: 2rem;
  font-size: 1.2rem;
  color: var(--white);
  text-align: center;
}

.promo__container form {
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
  padding: 5px;
  display: flex;
  align-items: center;
  background-color: var(--white);
  border-radius: 5px;
}

.promo__container input {
  width: 100%;
  padding-inline: 1rem;
  outline: none;
  border: none;
  font-size: 1rem;
  color: var(--text-dark);
}

footer {
  background-color: var(--text-dark);
}

.footer__container {
  display: grid;
  gap: 4rem 2rem;
  
}

.footer__logo {
  margin-bottom: 1rem;
}

.footer__logo a {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--white);
}

.footer__col p {
  max-width: 300px;
  margin-bottom: 2rem;
  color: var(--text-light);
}

.footer__socials {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.footer__socials a {
  padding: 5px 10px;
  font-size: 1.5rem;
  color: var(--text-dark);
  background-color: var(--primary-color);
  border-radius: 10px;
}

.footer__socials a:hover {
  color: var(--white);
}

.footer__col h4 {
  margin-bottom: 1rem;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--white);
}

.footer__links {
  display: grid;
  gap: 1rem;
}

.footer__links a {
  color: var(--text-light);
}

.footer__links a:hover {
  color: var(--white);
}

.footer__bar {
  padding: 1rem;
  font-size: 0.9rem;
  color: var(--text-light);
  text-align: center;
}


@media (width > 540px) {
  .header__content h1 {
    font-size: 5rem;
    line-height: 6.5rem;
  }



  .footer__container {
    grid-template-columns: repeat(2, 1fr);
  }
}


@media (width > 768px) {
  header {
    padding-top: 0;
  }

  .header__container {
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    isolation: isolate;
  }

  .header__content :is(h1, p, .header__btns) {
    text-align: left;
  }

  .header__image {
    position: relative;
    height: 100%;
  }

  .header__image img {
    position: absolute;
    width: unset;
    max-width: unset;
    height: 100%;
    right: 1rem;
    top: 2rem;
    z-index: -1;
  }

  

  .favourite__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .download__container {
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
  }

  .download__image {
    grid-area: 1/2/2/3;
  }

  .download__content :is(.section__header, p) {
    max-width: 400px;
    text-align: left;
  }

  .download__links {
    justify-content: flex-start;
  }

  .footer__container {
    grid-template-columns: repeat(5, 1fr);
  }

  .footer__col:nth-child(1) {
    grid-column: 1/3;
  }
}