/* Custom Property */

:root {

    /* Colors */

    --prussian-blue: hsla(217, 33%, 17%, 1);
    --oxford-blue-2: hsla(222, 47%, 11%, 1);
    --oxford-blue: hsla(221, 33%, 15%, 1);
    --blue-violet: hsla(262, 83%, 58%, 1);
    --blue-violet_a5: hsla(262, 83%, 58%, 0.05);
    --blue-violet_a10: hsla(262, 83%, 58%, 0.1);
    --alice-blue: hsla(214, 32%, 91%, 1);
    --alice-blue-2: hsla(215, 30%, 92%, 1);
    --cultured: hsla(220, 14%, 96%, 1);
    --gainsboro: hsla(220, 13%, 91%, 1);
    --light-gray: hsla(216, 12%, 84%, 1);
    --white: hsla(0, 0%, 100%, 1);
    --white_a10: hsla(0, 0%, 100%, 0.1);
    --manatee: hsla(218, 11%, 65%, 1);
    --green-cyan: hsla(161, 94%, 30%, 1);
    --cadet-grey: hsla(215, 20%, 65%, 1);
    --electric-indigo: hsla(263, 70%, 50%, 1);
    --maximum-red: hsla(0, 72%, 51%, 1);
    --black: hsla(0, 0%, 0%, 1);
    --gunmetal: hsla(215, 28%, 17%, 1);
    /* Colors End */

    /* Gradient Color*/

    --linear-gradient-1: linear-gradient(to top left, hsla(0, 72%, 51%, 0.4) 0%, hsla(262, 83%, 58%, 0.4));
    --linear-gradient-2: linear-gradient(to right, hsla(262, 83%, 58%, 1), hsla(0, 72%, 51%, 1));

    /* Gradient Color End */

    /* Typography */

    --ff-urbanist: 'Urbanist', sans-serif;

    --headline-lg: 3.6rem;
    --headline-md: 2.6rem;
    --title-lg: 2rem;
    --title-md: 1.8rem;
    --title-sm: 1.7rem;
    --body-lg: 2rem;
    --body-md: 1.7rem;
    --label-lg: 1.5rem;
    --label-md: 1.4rem;

    --fw-700: 700;
    --fw-600: 600;
    --fw-500: 500;

    /* Typography End */

    /* Spacing */
    --section-padding: 32px;

    /* Box Shadow */
    --shadow-1: 0 0 3px hsl(215, 28%, 17%);
    --shadow-2: 0 5px 13px hsl(215, 28%, 17%);
    --shadow-3: 0 5px 13px hsl(217, 19%, 27%);
    --shadow-4: 0 0 3px hsl(217, 19%, 27%);
    --shadow-5: 0 5px 13px hsla(214, 19%, 29%, 0.2);  
    
    /* Border Radius */
    --radius-circle: 50%;
    --radius-pill: 100px;
    --radius-12: 12px;
    --radius-8: 8px;
    --radius-6: 6px;

    /* Transition */
    --transition-1: 0.25s ease;
    --transition-2: 0.5s ease;
}

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

li {list-style: none;}

a,
img,
span,
input,
button,
ion-icon {display: block;}

a {
    text-decoration: none;
    color: inherit;
}

img {height: auto;}

input,
button {
    background: none;
    border: none;
    font: inherit;
}

input {width: 100%;}

button {cursor: pointer;}

ion-icon {
    pointer-events: none;
    color: var(--white);
}

html {
    font-family: var(--ff-urbanist);
    font-size: 10px;
    scroll-behavior: smooth;
}

body {
    background-color: var(--oxford-blue-2);
    color: var(--cadet-grey);
    font-size: 1.6rem;
    line-height: 1.5;
    z-index: 1;
}

::-webkit-scrollbar {width: 10px;}

::-webkit-scrollbar-track {background-color: hsl(0, 0%, 98%);}

::-webkit-scrollbar-thumb {background-color: hsl(0, 0%, 80%);}

::-webkit-scrollbar-hover {background-color: hsl(0, 0%, 70%);}



/*                   REUSED STYLE                */

.container {
    padding-inline: 12px;
}

.body-bg-shape {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background-image: var(--linear-gradient-1);
    border-radius: var(--radius-circle);
    filter: blur(200px);
    z-index: -1;
}

.headline-lg {
    color: var(--white);
    font-size: var(--headline-lg);
    font-weight: var(--fw-700);
}

.headline-md {font-size: var(--headline-md);}

.headline-lg,
.headline-md {line-height: 1.35;}

.title-lg {font-size: var(--title-lg);}

.title-md {font-size: var(--title-md);}

.title-sm {font-size: var(--title-sm);}

.body-lg {font-size: var(--body-lg);}

.body-md {font-size: var(--body-md);}

.label-lg {font-size: var(--label-lg);}

.label-md {font-size: var(--label-md);}

.headline-md,
.title-lg,
.title-md,
.title-sm {
    color: var(--white);
    font-weight: var(--fw-600);
}


.btn-icon  {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-circle);
    border: 1px solid var(--blue-violet);
}

.btn-icon ion-icon {--ionicon-stroke-width: 50px;}

.btn-icon.primary {
    background-color: var(--blue-violet);
    transition: var(--transition-1);
}


.btn-icon.primary:is(:hover, :focus-visible) {
    background-color: var(--electric-indigo);
    border-color: var(--electric-indigo);
}

.link\:hover:is(:hover, :focus-visible){color: var(--blue-violet);}

/* .navbar-link:is(:hover, :focus-visible) {padding-left: 20px;} */


.section {padding-block: var(--section-padding);}

.btn {
    background-color: var(--blue-violet);
    color: var(--white);
    max-width: max-content;
    font-size: var(--body-md);
    font-weight: var(--fw-600);
    padding: 8px 20px;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    gap: 4px;
    transition: var(--transition-1);
}

.btn:is(:hover, :focus-visible) {background-color: var(--electric-indigo);}

.text-center {text-align: center;}

.section-title {margin-block-end: 40px;}

.card {
    background-color: var(--oxford-blue-2);
    border-radius: var(--radius-8);
}

.card-banner {border-radius: var(--radius-8);}

.img-holder {
    aspect-ratio: var(--width) / var(--height);
    background-color: var(--oxford-blue);
    overflow: hidden;
}

.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-2);
}

.btn-link {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: max-content;
    color: var(--white);
    font-weight: var(--fw-600);
    letter-spacing: 0.5px;
}

.btn-link ion-icon {color: inherit;}

.grid-list {
    display: grid;
    gap: 32px;
}



/*                 HEADER                */
/*                                      */


.header .logo {display: none;}

.header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--oxford-blue-2);
    box-shadow: var(--shadow-1);
    padding-block: 16px;
    z-index: 4;
}

.header.active {
    position: fixed;
    animation: slideIn 0.5s ease forwards;
}

@keyframes  slideIn  {
    0%{transform: translateY(-100%);}
    100%{transform: translateY(0);}
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-action {
    display: flex;
    gap: 8px;
}

.nav-toggle-btn.active .default-icon,
.nav-toggle-btn .active-icon {display: none;}

.nav-toggle-btn .default-icon,
.nav-toggle-btn.active .active-icon {display: block;}

.header .profile-btn {overflow: hidden;}

.nav-toggle-btn {font-size: 3.5rem;}

.navbar {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 0;
    background-color: var(--oxford-blue-2);
    padding-inline: 16px;
    box-shadow: var(var(--shadow-1));
    overflow: hidden;
    z-index: 1;
}

.navbar.active {height: max-content;}

.navbar-link {
    color: var(--white);
    font-weight: var(--fw-600);
    padding: 10px 13px;
    transition: .3s;
}


/*                        HERO SECTION                         */

.hero {
    position: relative;
    --section-padding: 180px 64px;
    text-align: center;
    z-index: 1;
}

.hero-title .span {
    display: inline;
    background-image: var(--linear-gradient-2);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero .section-text {
    color: var(--white);
    opacity: 0.7;
    margin-block: 16px 32px;
}

.hero .btn {margin-inline: auto;}





/* 
            TOP COLLECTION 
 */


.top-collection .title-wrapper .btn-link {display: none;}

.top-collection .slider {
    --slider-item: 1;


    position: relative;
    margin-inline: -8px;
    padding: 4px 12px;
    overflow-x: hidden;
}

.top-collection .slider-container {
    position: relative;
    display: flex;
    transition: transform 500ms ease;
}

.top-collection .slider-item {
    min-width: calc(100% / var(--slider-item));
    width: calc(100% / var(--slider-item));
    padding-inline: 12px;
}

.collection-card {
    padding: 12px;
    box-shadow: var(--shadow-1);
}

.collection-card .card-content {padding: 16px;}

.collection-card .card-profile {
    position: relative;
    background-color: var(--oxford-blue);
    width: 64px;
    box-shadow: var(--shadow-2);
    margin-block-start: -50px;
}

.collection-card .card-profile img {border-radius: var(--radius-6);}

.collection-card .card-profile ion-icon  {
    position: absolute;
    bottom: -8px;
    right: -8px;
    color: var(--green-cyan);
    font-size: 2.3rem;
}

.collection-card .card-title {margin-block-start: 12px;}

.collection-card  .card-author {
    display: flex;
    gap: 2px;
    font-style: italic;
}

.collection-card  .card-author .link {
    font-style: normal;
    color: var(--blue-violet);
}

.collection-card  .card-text {margin-block-start: 4px;}

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--oxford-blue);
    font-size: 1.7rem;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-circle);
    box-shadow: var(--shadow-2);
    transition: var(--transition-1);
}

.slider-btn:is(:hover, :focus-visible) {background-color: var(--blue-violet);}

.slider-btn:disabled {display: none;}

.slider-btn.prev {left: 10px;}

.slider-btn.next {right: 10px;} 

.top-collection .container > .btn-link {
    margin-inline: auto;
    margin-block-start: 32px;
}




/*                       DISCOVER                */

.discover-card {
    padding: 8px;
    border: 1px solid var(--gunmetal);
    box-shadow: var(--shadow-5);
    transition: var(--transition-1);
}

.discover-card:is(:hover, :focus-within) {
    box-shadow: var(--shadow-3);
    transform: translateY(-8px);
}

.discover-card .card-banner {position: relative;}

.discover-card:is(:hover, :focus-within) .img-cover {transform: scale(1.1);}

.discover-card .btn {
    padding: 8px 16px;
    font-size: var(--label-md);
    position: absolute;
    top: calc(100% + 50%);
    left: 50%;
    transform: translate(-50%, -50%);
    transition: var(--transition-2);
}

.discover-card:is(:hover, :focus-within) .btn {top: 50%;}

.discover-card .card-profile {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-block-start: 12px;
}

.discover-card .card-profile .img {border-radius: var(--radius-circle);}

.discover-card .card-title {margin-block: 12px;}

.discover-card .card-meta {
    background-color: var(--prussian-blue);
    display: flex;
    justify-content: space-between;
    padding: 8px;
    border-radius: var(--radius-8);
}

.discover-card .card-price {
    color: var(--white);
    display: flex;
    gap: 4px;
    align-items: center;
    font-weight: var(--fw-500);
}

.discover-card .countdown {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    min-width: max-content;
    background-image: var(--linear-gradient-2);
    color: var(--white);
    font-weight: var(--fw-700);
    padding: 4px 16px;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    gap: 4px;
}

.discover-card .countdown ion-icon {
    --ionicon-stroke-width: 50px;
    font-size: 2.2rem;
}

.discover .btn-link {
    margin-inline: auto;
    margin-block-start: 32px;
}


/*                    SELLER                */

.seller-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
}

.seller-card .card-banner {
    position: relative;
    background-color: var(--oxford-blue);
}

.seller-card .card-banner img {border-radius: inherit;}

.seller-card .card-banner ion-icon {
    position: absolute;
    top: -4px;
    right: -8px;
    color: var(--green-cyan);
}

.seller-card .user-name {margin-block-start: 2px;}

.seller-card .btn-icon {
    flex-shrink: 0;
    margin-inline-start: auto;
    border: 1px solid var(--blue-violet_a10);
    background-color: var(--bg, var(--blue-violet_a5));
    color: var(--color, var(--blue-violet));
    transition: var(--transition-1);
}

.seller-card .btn-icon ion-icon {
    color: var(--color);
    --ionicon-stoke-width: 55px;
}

.seller-card .btn-icon:is(:hover, :focus-visible){
    --bg: var(--blue-violet);
    --color: var(--white);
}


/*              QNA             */

.qna .section-title {margin-block-end: 16px;}

.qna-list {
    margin-block-start: 60px;
    display: grid;
    gap: 16px;
}

.qna-card {
    box-shadow: var(--shadow-1);
    border-radius: var(--radius-6);
    overflow: hidden;
}

.qna-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    text-align: left;
    padding: 20px;
}

.qna-btn ion-icon {flex-shrink: 0;}

.qna-card.active .qna-btn {background-color: var(--gunmetal);}

.qna-card.active .qna-btn > * {color: var(--blue-violet);}

.qna-card.active .qna-btn ion-icon {transform: rotate(0.5turn);}

.qna-content .body-md {padding: 20px;}

.qna-content {display: none;}

.qna-card.active .qna-content {display: block;}



/*                     CONTACT                */

.contact .section-title {margin-block-end: 16px;}

.contact .btn {
    margin-inline: auto;
    margin-block-start: 24px;
}


/*  #NEWSLETTER */

.newsletter {
    position: relative;
    margin-block-end: -200px;
}

.newsletter-card {
    position: relative;
    background-color: var(--oxford-blue-2);
    padding: 40px 24px;
    border-radius: var(--radius-12);
    box-shadow: var(--shadow-1);
    overflow: hidden;
    z-index: 1;
}

.newsletter-card .card-text {margin-block: 8px 32px;}

.newsletter-card .input-field {
    background-color: var(--oxford-blue-2);
    color: var(--white);
    font-size: var(--body-md);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-1);
    padding: 12px 24px;
    outline: none;
    margin-block-end: 16px;
}

.newsletter-card .input-field::placeholder {color: var(--manatee);}

.newsletter-card .input-field:focus {box-shadow: var(--shadow-4);}

.newsletter .btn {margin-inline: auto;}

.newsletter  .bg-icon {
    position: absolute;
    font-size: 7.2rem;
    opacity: 0.05;
    z-index: -1;
}

.newsletter .bg-icon-1 {
    top: -24px;
    left: -24px;
    transform: rotate(-45deg);
}

.newsletter .bg-icon-2 {
    bottom: -16px;
    right: -16px;
}

/*              FOOTER              */

.footer {background-color: var(--oxford-blue);}

.footer-top {
    padding-block-start: calc(var(--section-padding) + 200px);
    border-block-end: 1px solid var(--white_a10);
}

.footer .container {
    display: grid;
    gap: 32px
} 

.footer-brand .footer-text {
    color: var(--light-gray);
    margin-block-start: 24px;
}

.footer-list-title {
    margin-block-end: 24px;
}

.footer-link {
    display: flex;
    align-items: center;
    gap: 2px;
    padding-block: 5px;
    color: var(--light-gray);
}

.footer-link ion-icon {color: inherit;}

.footer-list-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  
}

.footer-list ul:first-child{margin-block-end: 24px;}

.footer-list-item ion-icon {
    color: var(--blue-violet);
    font-size: 2rem;
    --ionicon-stroke-width: 40px;
}

.footer-bottom {
    padding-block: 30px;
    color: var(--light-gray);
}

.copyright .span {
    display: inline;
    color: var(--maximum-red);
}


/*              BACK TO TOP                */

.back-to-top {
    background-color: var(--blue-violet);
    position: fixed;
    bottom: 18px;
    right: 20px;
    z-index: 4;
    visibility: hidden;
    opacity: 0;
    transition: var(--transition-1);
}

.back-to-top.active {
    visibility: visible;
    opacity: 1;
    transform: translateY(-10px);
}

/* MEDIA QUERIES  FOR LARGE SCREENS 575PX SCREEN*/ 

@media (min-width: 575px) {
    /* 
    Reused Style
     */

    .container {
        max-width: 480px;
        width: 100%;
        margin-inline: auto;
    }

    /* HEADER */
    .header .container {max-width: unset;}

    /* NEWSLETTER */

    .newsletter .input-wrapper {position: relative;}

    .newsletter .input-field {
        margin-block-end: 0;
        padding-inline-end: 140px;
    }

    .newsletter .btn {
        position: absolute;
        top: 4px;
        right: 4px;
        bottom: 4px;
    }
}


/* MEDIA QUERIES  FOR LARGE SCREENS 768PX SCREEN*/ 

@media (min-width: 768px) {
    /* Custom property */
    :root {
        /* Typography */

        --headline-md: 3rem;

        /* spacing */

        --sectiom-padding: 48px;

       
    }
        /* reused style */

    .container,
        .header .container {max-width: 768px;}

        .grid-list {
            grid-template-columns: 1fr 1fr;
            gap: 24px;
        }

        .section-text {
            max-width: 575px;
            margin-inline: auto;
        }

        /* HEADER */

        .logo-small {display: none;}
        
        .header .logo {
            display: block;
        }

        /* HERO */

        .hero {--section-padding: 240px 80px;}

        /* Top collection */

        .top-collection .title-wrapper .btn-link {
            display: flex;
            margin: 0;
        }

        .top-collection .title-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }

        .top-collection .slider {
            --slider-item: 2;

            margin-inline: -16px;
            padding-inline: 8px;
        }

        .top-collection .slider-item {padding-inline: 12px;}

        .top-collection .container > .btn-link {display: none;}

        /* DISCOVER */

        .discover .btn-link {margin-block-start: 68px;}

        .newsletter {margin-block-end: -130px;}

        .newsletter-card {
            display: grid;
            grid-template-columns: 1fr 1fr;
            align-items: center;
            gap: 32px;
        }

        .newsletter .text-center {text-align: left;}
        .newsletter .headline-md {--headline-md: 2.6rem;}

        .newsletter-card .card-text {margin-block-end: 0;}

        /* FOOTER */

        .footer-top {
            padding-block-start: calc(var(--sectiom-padding) + 80px);

        
        }

        .footer-top .container {grid-template-columns: 1fr 1fr;}

        .footer-brand {padding-inline-end: 40px;}
         


        
    

}

/* MEDIA QUERIES  FOR LARGE SCREENS 992PX SCREEN*/ 

@media (min-width: 992px) {


    /* CUSTOM PROPERTY */

    :root {

        /* typography */

        --headline-lg: 6rem;
    }

    /* Reused style */

    .container,
    .header  .container {max-width: 950px;}

    .grid-list {grid-template-columns: repeat(3, 1fr);}

    /* HEADER */

    .header {
        background: none;
        box-shadow: none;
    }

    .header.active {
        background: var(--oxford-blue-2);
        box-shadow: var(--shadow-1);
    }

    .nav-toggle-btn {display: none;}

    .header-action {gap: 12px;}

    .navbar,
    .navbar.active {
        all: unset;
        display: block;
        margin-inline: auto 24px;
    }

    

    .navbar-list {
        display: flex;
        gap: 12px;
    }

    /* TOP COLLECTION */

    .top-collection .slider {--slider-item: 3;}

    /* QNA */

    .qna .container {max-width: 55%;}

    /* Newsletter */

    .newsletter-card {padding-inline: 32px;}

    .newsletter .bg-icon {font-size: 15rem;}

    .newsletter .bg-icon-1 {
        top: -36px;
        left: -36px;
    }

    .newsletter .bg-icon-2 {
        bottom: -30px;
        right: -30px;
    }

    /* FOOTER */

    .footer-top .container  {grid-template-columns: 1fr 0.5fr 0.5fr 0.8fr;}


    
}



/* MEDIA QUERIES  FOR LARGE SCREENS 1200PX SCREEN*/ 

@media (min-width: 1200px) {

    /* REUSED STYLE */

    :root {

        /* spacing */

        --section-padding: 56px;
    }

    .container,
    .header .container {max-width: 1120px;}

    .top-collection .slider {--slider-item: 4;}

    /* DISCOVER */

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


/* @media only screen and (max-width: 624px) {
    ::-webkit-scrollbar {display: none;}
} */