@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,500;0,600;1,400&display=swap');

 :root {
     --header-height: 3.5rem;
     --bg-color: hsl(219, 15%, 51%);
     --bg-color-light: hsl(219, 27%, 87%);
     --title-color: hsl(225, 9%, 9%);
     --text-color: hsl(220, 5%, 33%);
     --text-color-light: hsl(220, 5%, 56%);
     --body-color: hsl(219, 17%, 99%);
     --container-color: hsl(220, 18%, 97%);
     /* Fonts  */
     --body--font: 'Lora', serif;
     --biggest-font-size: 2.25rem;
     --h1-font-size: 1.5rem;
     --h2-font-size: 1.25rem;
     --h3-font-size: 1rem;
     --normal-font-size: .938rem;
     --small-font-size: .813rem;
     --smaller-font-size: .75rem;
     --font-regular: 400;
     --font-medium: 500;
     --font-semi-bold: 600;
     /* z index  */
     --z-tooltip: 10;
     --z-fixed: 100;

 }

 @media screen and (min-width: 1124px) {
     :root {
         --biggest-font-size: 4.5rem;
         --h1-font-size: 2.25rem;
         --h2-font-size: 1.5rem;
         --h3-font-size: 1.25rem;
         --normal-font-size: 1rem;
         --small-font-size: .875rem;
         --smaller-font-size: .813rem;
     }
 }

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

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: var(--body--font);
     font-size: var(--normal-font-size);
     background-color: var(--body-color);
     color: var(--text-color);
     transition: .4s;
 }

 h1,
 h2,
 h3 {
     color: var(--title-color);
     font-weight: var(--font-medium);
 }

 ul {
     list-style: none
 }

 a {
     text-decoration: none;
 }

 img {
     max-width: 100%;
     height: auto;
 }

 /* Resuable Css */
 .container {
     max-width: 1024px;
     margin-right: 1.5rem;
     margin-left: 1.5rem;
 }

 .grid {
     display: grid;
     gap: 1.5rem;

 }

 .section {
     padding: 4.5rem 0 2rem;
 }

 .section__title {
     font-size: var(--h1-font-size);
     text-align: center;
     margin-bottom: 3rem;
 }

 .main {
     overflow: hidden;
 }

 /* ||||||||||||||||||HEAD AND NAV BAR|||||||||||||||||||| */
 .header {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     border-color: transparent;
     z-index: var(--z-fixed);
     transition: .4s
 }

 .nav {
     height: var(--header-height);
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .logo {
     color: var(--title-color);
     font-weight: var(--font-medium);
 }

 @media screen and (max-width: 1023px) {
     .menu {
         position: fixed;
         bottom: 1.5rem;
         background-color: var(--body-color);
         box-shadow: 0 4px 12px hsla(220, 18%, 40%, .15);
         width: 90%;
         left: 0;
         right: 0;
         margin: 0 auto;
         padding: 1.25rem 2.8rem;
         border-radius: .5rem;
         transition: .4s;


     }

     .nav-list {
         display: flex;
         justify-content: space-between;
         align-items: center;
     }

     .navlinks {
         color: var(--text-color-light);
         font-weight: var(--font-medium);
         display: grid;
         justify-items: center;
         row-gap: .25rem;
     }

     .navlinks i {
         font-size: 1.25rem;

     }

     .navlinks span {
         font-size: .688rem;
     }
 }

 .scroll-header {
     background-color: var(--body-color);
     box-shadow: 0 2px 5px hsla(220, 4%, 15%, .15);
 }

 /* ////////HOME////// */
 .home {
     background-color: var(--bg-color);
     overflow: hidden;
     transition: .4s;

 }

 .home-conatiner {
     padding: 4rem;
     row-gap: 8.5rem;
 }

 .home-title {
     font-size: var(--biggest-font-size);
     font-weight: 400;
 }

 .home-description {
     color: var(--title-color);
     margin: 1rem 0 2rem;
 }

 .home-title .home-description {
     line-height: 140%;
 }

 .home-image {
     position: relative;
     width: 310px;
     justify-content: center;
 }

 .home-image img:nth-child(1) {
     width: 224px;
     position: absolute;
     right: -1.5rem;
     top: -9.5rem;
 }

 .home-image img:nth-child(2) {
     width: 180px;
     margin-left: .6rem;
     position: relative;

 }

 .btn-link {
     color: var(--title-color);
     font-weight: var(--font-medium);
     display: inline-flex;
     align-items: center;
     column-gap: .6rem;
 }

 .btn-link i {
     font-size: 1rem;
     transition: .3s;
 }

 .btn-link:hover i {
     transform: translate(.25rem);

 }

 /* *****************NEW********** */
 .new__container {
     row-gap: 2.5rem;
     padding-bottom: 1.5rem;
 }

 .new-card {
     justify-self: center;
 }

 .new-image {
     width: 270px;
     margin-bottom: 1rem;
 }

 .new-link {
     display: flex;
     align-items: center;
     justify-content: space-between;
     color: var(--title-color);
     padding: .75rem;
 }

 .new-link i {
     font-size: 1.25rem;
     transition: .3s;
 }

 .new-title {
     font-size: var(--h2-font-size);
     margin-bottom: .5rem;
 }

 .new-subtitle {
     font-size: var(--smaller-font-size);
     color: var(--text-color);
 }

 .new-link:hover i {
     transform: translateX(.25rem);
 }

 /* ========COLLECTION=========== */
 .collection {
     background-color: var(--bg-color-light);
     overflow: hidden;
     transition: .4s;

 }

 .collection-container {
     position: relative;
     height: 571px;
     display: grid;
     justify-items: center;
 }

 .collection-title {
     font-size: var(--h1-font-size);
     margin-bottom: .76rem;
 }

 .collection-explore {
     display: grid;
     column-gap: 4rem;
     position: absolute;
 }

 .collection-explore:nth-child(2) {
     grid-template-columns: 232px max-content;
     bottom: 1.1rem;
     margin-right: 7rem;
 }

 .collection-explore:nth-child(1) {
     grid-template-columns: max-content 232px;
     top: 0;
     margin-left: 7rem;
 }

 .collection-data-men {
     margin-top: 2.5rem;
 }

 .collection-data-women {
     align-self: flex-end;
     margin-bottom: 2.5rem;
 }

 /* =========PRODUCTS========== */
 .products__container {
     padding-bottom: 5rem;

 }

 .products__card {
     width: 270px;
 }

 .products__img {
     margin-bottom: 1rem;
 }

 .proudct__title {
     font-size: var(--h3-font-size);
     margin-bottom: 0.75rem;
 }

 .product__price {
     color: var(--title-color);
     font-weight: var(--font-medium);

 }

 .swiper-button-prev::after,
 .swiper-button-next::after {
     content: '';
 }

 .swiper-button-prev,
 .swiper-button-next {
     top: initial;
     bottom: 0;
     width: initial;
     height: initial;
     font-size: 1.5rem;
     color: var(--title-color);
 }

 .swiper-button-prev {
     left: calc(50% - 2rem);
 }

 .swiper-button-next {
     right: calc(50% - 2rem);
 }

 .brand-container {
     grid-template-columns: repeat(2, max-content);
     justify-content: center;
     column-gap: 1.25rem;
 }

 .brand-image {
     width: 120px;

 }

 .brand-image:nth-child(even) {
     margin-top: 2rem;
 }

 /* ===========================Footer================================== */
 .footer-container {
     row-gap: 3rem;

 }

 .footer-logo {
     color: var(--title-color);
     font-size: var(--h2-font-size);
     font-weight: var(--font-medium);
     display: inline-block;
     margin-bottom: .76rem;

 }

 .footer-content,
 .footer-links {
     display: grid;
 }

 .footer-content {
     grid-template-columns: repeat(2, max-content);
     gap: 3.6rem 3rem;
 }

 .footer-title {
     font-size: var(--h3-font-size);
     margin-bottom: 1.26rem;
 }

 .footer-links {
     row-gap: .76rem;
 }

 .footer-link,
 .footer-info {
     font-size: var(--small-font-size);
 }

 .footer-link {
     color: var(--text-color);
     transition: .3s;
 }

 .footer-link:hover {
     text-decoration: underline;
     color: var(--title-color);
 }

 .footer-social {
     display: flex;
     column-gap: .6rem;
 }

 .footer-social-link {
     display: inline-flex;
     color: var(--title-color);
     padding: .5rem;
     background-color: var(--container-color);
     font-size: 1.27rem;
     transition: background-color .3s;
 }

 .footer-social-link:hover {
     background-color: var(--bg-color-light);
 }

 .footer-information {
     margin-top: 5.9rem;
     padding-bottom: 5.9rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     row-gap: .76rem;
 }

 .footer-privacy,
 .footer-copy {
     font-size: var(--smaller-font-size);
     color: var(--text-color-light);
 }

 .active-link {
     color: var(--title-color);
 }

 ::-webkit-scrollbar {
     width: .5rem;
     border-radius: .5rem;
     background-color: hsl(220, 8%, 76%);
 }

 ::-webkit-scrollbar-thumb {
     background-color: hsl(220, 8%, 64%);
     border-radius: .5rem;

 }

 ::-webkit-scrollbar-thumb:hover {
     background-color: hsl(220, 8%, 54%);

 }

 .scrollup {
     position: fixed;
     right: 1rem;
     bottom: -30%;
     background-color: var(--container-color);
     box-shadow: 0px 8px 12px hsla(220, 18%, 45%, .15);
     display: inline-flex;
     padding: .4rem;
     color: var(--title-color);
     font-size: 1.2rem;
     z-index: var(--z-tooltip);
     transition: .3s;
     border-radius: 50%;
 }

 .scrollup:hover {
     transform: translateY(-.25rem);
 }

 .show-scroll {
     bottom: 7.5rem;
 }

 /* ==========================DARK THEME ======================================*/
 .change-theme {
     color: var(--title-color);
     font-size: 1.13rem;
     cursor: pointer;
 }

 body.dark-theme {
     --bg-color: hsl(220, 18%, 13%);
     --bg-color-light: hsl(220, 18%, 23%);
     --title-color: hsl(220, 8%, 95%);
     --text-color: hsl(220, 8%, 65%);
     --body-color: hsl(220, 18%, 18%);
     --container-color: hsl(220, 18%, 21%);
 }

 .dark-theme .scroll-header {
     box-shadow: 0px 2px 8px hsla(220, 18%, 8%, .3);
 }

 .dark-theme .menu {
     background-color: var(--container-color);
 }

 .dark-theme .menu,
 .dark-theme .scrollup {
     box-shadow: 0px 4px 8px hsla(220, 18%, 8%, .3);

 }

 .dark-theme::-webkit-scrollbar {
     background-color: hsl(220, 18%, 15%);
 }

 .dark-theme::-webkit-scrollbar-thumb {
     background-color: hsl(220, 18%, 25%);
 }

 .dark-theme::-webkit-scrollbar-thumb:hover {
     background-color: hsl(220, 18%, 35%);
 }
 /* =================BREAKPOINTS========================= */
 @media screen and (max-width: 340px) {
     .container {
         margin-left: 1.1rem;
         margin-right: 1.1rem;
     }
     .footer-content {
         grid-template-columns: max-content;
         row-gap: 2rem;
     }

     .menu {
         padding: 1.1rem 1.6rem;
     }

     .home-conatiner {
         padding: 2rem 0 1rem;
         row-gap: 6rem;
     }

     .home-description {
         font-size: var(--small-font-size);

     }

     .home-image {
         width: 248px;
     }

     .home-image img:nth-child(1) {
         width: 180px;
         top: -7rem;
     }

     .home-image img:nth-child(2) {
         width: 150px;

     }

     .new-image {
         width: 230px;
     }

     .new-link {
         padding-right: 0;
     }

     .collection-explore:nth-child(1),
     .collection-explore:nth-child(2) {
         position: initial;
         grid-template-columns: 230px;
         row-gap: 2rem;
         margin: 0;
     }

     .collection-container {
         height: initial;
         row-gap: 3rem;

     }

     .collection-data-men {
         margin-top: 0;
     }

     .collection-data-women {
         margin-bottom: 0;
     }

     .products__card {
         width: 230px;
     }

     .brand-container {
         grid-template-columns: repeat(2, 100px);
         row-gap: 5rem;
     }
 }
 @media screen and (min-width: 576px) {

     .menu {
         width: 342px;

     }

     .footer-content {
         grid-template-columns: repeat(3, max-content);
     }
 }

 @media screen and (min-width: 767px) {

     .home-conatiner,
     .new__container {
         grid-template-columns: repeat(2, max-content);
         justify-content: center;
     }

     .home-image {
         margin-top: 6rem;
     }

     .brand-container {
         grid-template-columns: repeat(4, max-content);
     }

     .footer-container {
         grid-template-columns: repeat(2, max-content);
         justify-content: space-between;
     }
 }

 @media screen and (min-width: 1024px) {
     .section {
         padding: 7rem 0 1rem;
     }

     .section__title {
         margin-bottom: 4rem;
     }

     .nav {
         height: calc(var(--header-height) + 1.5rem);
     }

     .menu {
         width: initial;
         margin-left: auto;

     }

     .nav-list {
         display: flex;
         column-gap: 3rem;
     }

     .navlinks {
         color: var(--title-color);
         font-weight: var(--font-medium);
         transition: .3s;
     }

     .navlinks i {
         display: none;
     }

     .navlinks:hover {
         color: var(--title-color);
     }

     .active-link {
         color: var(--title-color);
         text-decoration: underline;
     }

     .change-theme {
         margin-left: 3rem;

     }

     .dark-theme .menu {
         background-color: transparent;
         box-shadow: none;
     }

     .products__container {
         width: 954px;
     }

     .footer-content {
         grid-template-columns: repeat(4, max-content);
         column-gap: 5.5rem;
     }

     .footer-link {
         font-size: var(--normal-font-size);
     }

     .footer-information {
         padding-bottom: 2.1rem;
         row-gap: 1.1rem;
     }
 }

 @media screen and (min-width: 1054px) {
     .container {
         margin-left: auto;
         margin-right: auto;
     }
 }

 @media screen and (min-width: 1124px) {
     .home-conatiner {
         padding: 9.9rem 0 2.9rem;
         column-gap: 0;
     }

     .home-image {
         width: 500px;
         margin-top: 7.9rem;
         transform: translate(-1rem);
     }

     .home-image img:nth-child(1) {
         width: 345px;
         top: -14.5rem;
     }

     .home-image img:nth-child(2) {
         width: 277px;

     }
     .new__container{
        grid-template-columns: repeat(3, max-content);
        padding-bottom: 4.6rem;
        gap: 4.5rem;
     }
     .new-image{
        margin-bottom: 1.36rem;

     }
     .new-title{
        font-size: var(--h3-font-size);
     }
     .collection-container{
        height: 761px;
        margin-bottom: 2rem;
     }
     .collection-explore:nth-child(1){
        grid-template-columns: max-content 330px;
        margin-left: 12rem;
        
     }
     .collection-explore:nth-child(2){
        grid-template-columns: 330px max-content;
        margin-right: 12rem;

     }
     .collection-explore{
        column-gap: 5rem;
     }
     .products__container{
        padding-bottom: 7rem;
     }
     .brand-container{
        column-gap: 5.5rem;
     }
     .brand-image{
        width: 140px;
     }
     .scrollup{
        right: 3rem;
     }
     .show-scroll{
        bottom: 3rem;
     }
 }
@media screen and (min-width: 2048px) {
    body{
        zoom: 1.3;
    }
}
@media screen and (min-width: 3840px) {
    body{
        zoom: 2.3;
    }
}