:root{
    /*color */
    --clr-gray:0 0% 86.3%;
    --clr-gray-light:0 0% 93.3%;
    --clr-red:356.7 90.1% 56.5%;
    --clr-black:0 0% 21.2%;
    --clr-yellow:43.8 99% 58.8%;
    --clr-very-light-gray:300 2.7% 92.7%;
    --clr-green:144.3 64.4% 49.6%;
    --clr-blue:214.5 100% 53.9%;
    --clr-white:0 0% 100%;
    /*font-size */
    --fs-bf-194:12.3vw;
    --fs-bf-109:6.8125rem;
    --fs-bf-65:4.065rem;
    --fs-bf-80:5rem;
    --fs-bf-50:3.125rem;
    --fs-bf-45:2.8125rem;
    --fs-bf-30:1.875rem;
    --fs-bf-20:1.25rem;
    --fs-bf-16:1rem;
    --fs-bf-15:0.9375rem;
    /*font family */
    --font-montserrat:"Montserrat",sans-serif;
    --font-poppins: "Poppins",sans-serif;
}

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

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd{
    margin: 0;
}

ul[role="list"],
ol[role="list"]{
    list-style: none;
}

html:focus-within{
    scroll-behavior: smooth;
}
body{
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    line-height: 1.5;
}

a:not([class])
{
    text-decoration-skip-ink:auto ;
}
img,
picture{
    max-width: 100%;
    display: block;
}
input,
button,
textarea,
select{
    font: inherit;
}
::-webkit-scrollbar{
    display: none;
}

@media (prefers-reduced-motion: reduce)
{
    html:focus-within{
        scroll-behavior: auto;
    }
    *,
    *::after,
    *::before{
        animation-duration: 0.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration: 0.01s !important;
        scroll-behavior: auto !important;
    }
}

body{
    overflow-x:hidden;
}
.bg-red{background-color:hsl(var(--clr-red));}
.bg-black{background-color:hsl(var(--clr-black));}
.bg-blue{background-color:hsl(var(--clr-blue));}
.bg-gray{background-color:hsl(var(--clr-gray));}
.bg-green{background-color:hsl(var(--clr-green));}
.bg-gray-light{background-color:hsl(var(--clr-gray-light));}
.bg-very-light-gray{background-color:hsl(var(--clr-very-light-gray));}
.bg-white{background-color:hsl(var(--clr-white));}
.bg-yellow{background-color:hsl(var(--clr-yellow));}

.text-red{color:hsl(var(--clr-red));}
.text-black{color:hsl(var(--clr-black));}
.text-blue{color:hsl(var(--clr-blue));}
.text-gray{color:hsl(var(--clr-gray));}
.text-green{color:hsl(var(--clr-green));}
.text-gray-light{color:hsl(var(--clr-gray-light));}
.text-very-light-gray{color:hsl(var(--clr-very-light-gray));}
.text-white{color:hsl(var(--clr-white));}
.text-yellow{color:hsl(var(--clr-yellow));}

.fs-900{font-size: var(--fs-bf-194);}
.fs-800{font-size: var(--fs-bf-109);}
.fs-700{font-size: var(--fs-bf-80);}
.fs-600{font-size: var(--fs-bf-65);}
.fs-500{font-size: var(--fs-bf-50);}
.fs-400{font-size: var(--fs-bf-45);}
.fs-300{font-size: var(--fs-bf-30);}
.fs-200{font-size: var(--fs-bf-20);}
.fs-100{font-size: var(--fs-bf-16);}
.fs-50{font-size: var(--fs-bf-15);}

.bold-100{font-weight: 100;}
.bold-200{font-weight: 200;}
.bold-300{font-weight: 300;}
.bold-400{font-weight: 400;}
.bold-500{font-weight: 500;}
.bold-600{font-weight: 600;}
.bold-700{font-weight: 700;}
.bold-800{font-weight: 800;}
.bold-900{font-weight: 900;}
.bold-bold{font-weight: bold;}
.bold-bolder{font-weight: bolder;}

/* google fonts*/

.fs-poppins{font-family:"Poppins", sans-serif;}
.fs-montserrat{font-family:"Montserrat", sans-serif;}

@media (min-width:35em)
{
  :root{
    --fs-bf-194:12.3vw;
    --fs-bf-109:6.8125rem;
    --fs-bf-65:4.065rem;
    --fs-bf-80:5rem;
    --fs-bf-50:3.125rem;
    --fs-bf-45:2.8125rem;
    --fs-bf-30:1.875rem;
    --fs-bf-20:1rem;
    --fs-bf-16:0.8rem;
    --fs-bf-15:0.8rem;
  }
}
@media(min-width:35em) and (max-width:59em)
{
    :root{
        --fs-bf-194:12.3vw;
        --fs-bf-109:6.8125rem;
        --fs-bf-65:4.065rem;
        --fs-bf-80:5rem;
        --fs-bf-50:3.125rem;
        --fs-bf-45:2.8125rem;
        --fs-bf-30:2.55rem;
        --fs-bf-20:1.25rem;
        --fs-bf-16:1rem;
        --fs-bf-15:0.8375rem;
      }
}
@media(min-width:59em)
{
    :root{
        --fs-bf-194:12.3vw;
        --fs-bf-109:6.8125rem;
        --fs-bf-65:4.065rem;
        --fs-bf-80:5rem;
        --fs-bf-50:3.125rem;
        --fs-bf-45:2.8125rem;
        --fs-bf-30:1.875rem;
        --fs-bf-20:2rem;
        --fs-bf-16:1rem;
        --fs-bf-15:0.9375rem;
      }
}
.uil{
    cursor: pointer;
}
.flex{
    display: flex;
    gap: var(--flex-gap, 1rem);
}
.grid{
   display: grid;
   gap:var(--flex-gap, 1rem); 
}

.container{
    width:96vw;
    margin-inline: auto;
    padding-inline: 2rem;
}

.primary-header{
  justify-content: space-between;
  align-items: center;
  padding-block: 2rem;
}

.header-inner-one{
    align-items: center;
}
.logo{
    margin-right: 2rem;
}
.mobile-close-btn{
    display: none;
}
.primary-navigation{
    margin: 0;
    padding: 0;
    list-style: none;
    --flex-gap:3rem;
}
.primary-navigation a{
    text-decoration: none;
    color: hsl(var(--clr-black) / 0.6);
    cursor: pointer;
}
.primary-navigation .active{
    color:#000000;
}
.header-login{
    justify-content: space-between;
    align-items: center;
    --flex-gap:2rem;
}
.header-login .uil-shopping-bag{
    font-size: 2rem;
    margin-top: -0.5rem;
    position: relative;
}
.header-login .uil-shopping-bag::after{
    
    width: 1rem;
    position:  absolute;
    background-color: hsl(var(--clr-red));
    height: 1.2rem;
    margin-top: -3rem;
    margin-left: 1rem;
    border-radius: 0.3rem;
    display: grid;
    color:hsl(var(--clr-white));
    font-size: 1rem;
    font-weight: 700;
}
.mobile-open-btn{
       display: none;
}

.cart-icon{
    position: absolute;
    inset:0% 30% 0% 0%;
    background-color: hsl(var(--clr-very-light-gray));
    transform: translateX(-100%);
    transition: transform 250ms ease-in-out;
    z-index: 1111;
}

.cart-icon[data-visible="true"]{
    transform: translateX(0%);
}

.shopping{
    padding: 2rem;
    justify-content: space-between;
    align-items: center;
}

.shopping > p{
    font-size: var(--fs-bf-20);
    font-family: var(--font-montserrat);
}

.shopping > i{
    font-size: 1.5rem;
    color: hsl(var(--clr-black) / 0.8);
    transition: transform 250ms ease-in-out;
}

.shopping i:hover{
    transform: rotate(90deg);
}

.cart{
    flex-direction: column;
    justify-content: center;
    width: 100%;
    --flex-gap: 0.5rem;
    align-items: center;
    font-family: var(--font-poppins);
    text-transform: uppercase;
    color: hsl(var(--clr-black) / 0.5);
}

.cart > i{
    font-size: 5rem;
    margin-bottom: -2rem;
}

@media(max-width:35em)
{
    .primary-navigation{
        position: fixed;
        flex-direction: column;
        z-index: 9999;
        text-align: center;
        --flex-gap: 1.7rem;
        inset:0 0 0 0;
        background-color: hsl(var(--clr-gray-light) / 0.9);
        padding: clamp(3rem,30vh,10rem) 0;
       transform: translateY(-100%);
        transition: transform 250ms ease-in-out;
    }
    .primary-navigation[data-visible="true"]{
        transform: translateY(0%);
    }
    .primary-navigation a{
        font-size: var(--fs-bf-30);
    }
    .header-login{
        --flex-gap: 1.5rem;
        margin-left: 4rem;
    }
    .mobile-close-btn{
        display: block;
        z-index: 88888;
        top: 5rem;
        position: fixed;
        right: 14rem;
        border:0;
        font-size: 3rem;
        cursor:pointer;
        transform: translateY(-300%);
        transition: transform 250ms ease-in-out;
    }
    .mobile-close-btn[data-visible="true"]{
        transform: translateY(0%);
    }
    .mobile-open-btn{
        display: block;
        font-size: 2rem;
        cursor: pointer;
    }
    .cart-icon{
        z-index: 9999;
        position: fixed;
    }
}
@media (min-width: 35em) and (max-width:59em)
{
    .primary-navigation{
        position: fixed;
        flex-direction: column;
        z-index: 9999;
        text-align: center;
        --flex-gap: 1.7rem;
        inset:0 0 0 0;
        background-color: hsl(var(--clr-gray-light) / 0.9);
        padding: clamp(3rem,30vh,10rem) 0;
       transform: translateY(-100%);
        transition: transform 250ms ease-in-out;
    }
    .primary-navigation[data-visible="true"]{
        transform: translateY(0%);
    }
    .primary-navigation a{
        font-size: var(--fs-bf-30);
    }
    .header-login{
        --flex-gap: 1.5rem;
        margin-left: 4rem;
    }
    .mobile-close-btn{
        display: block;
        z-index: 88888;
        top: 5rem;
        position: fixed;
        right: 14rem;
        border:0;
        font-size: 3rem;
        cursor:pointer;
        transform: translateY(-300%);
        transition: transform 25oms ease-in-out;
    }
    .mobile-close-btn[data-visible="true"]{
        transform: translateY(0%);
    }
    .mobile-open-btn{
        display: block;
        font-size: 2rem;
        cursor: pointer;
    }
    .cart-icon{
        z-index: 9999;
        position: fixed;
    }
}

@media(min-width:59em)
{
    .cart-icon{
        position: absolute;
        inset: 10% 5% 50% 60%;
        border-radius:1rem;
        transform: translateX(150%);
        transition: transform 250ms ease-in-out;
        z-index: 222;
    }
    .cart-icon[data-visible="true"]{
        transform: translateX(0%);
    }
    .card-icon .shopping{
        display: none;
    }
    .cart{
        padding-top: 4rem;
    }
}

.block{display: block;}

.uppercase{text-transform: uppercase;}
.lineheight{line-height: var(--line,3rem);}
.lineheight2{line-height: var(--line2,4rem);}

.large-btn{
    border: 0;
    padding: 0.7rem 1rem;
    border-radius: 2rem;
    cursor: pointer;
    transition: transform 250ms ease-in-out;
}

.large-btn:hover{
    background-color: hsl(var(--clr-black));
    box-shadow: 3px 2px 37px -6px rgba(255, 255, 255, 0.69);
}
.hero-section{
    width: 93vw;
    margin-inline: auto;
    padding-inline: 2rem;
    background-color: hsl(var(--clr-gray));
    border-radius: 2rem;
    padding-top: 5rem;
}
.hero-section >* img{
    margin-top: -11rem;
    margin-left: 2rem;
}
.hero-inner{
    justify-content: space-between;
    align-items: center;
    --flex-gap:5rem;
    margin-top: -3.5rem;
    padding-bottom: 4rem;
}
.hero-info{
    display: none;
}
@media(min-width:35em) and (max-width:59em)
{
    .hero-section{
       width: 95vw;
       margin-inline: auto;
       padding-inline: 4rem;
       padding-top: 7rem;
    }
    .hero-section>* img{
        margin-top: -10rem;
        margin-left: 5rem;
    }
    .lineheight2{
        --line2: 7rem;
    }
}

@media (min-width:59rem)
{
    .hero-section{
        width: 95vw;
        margin-inline: auto;
        padding-inline: 8rem;
        padding-top: clamp(4rem,38vh,15rem);
    }
    .hero-section>* img{
        margin-top: -30rem;
    }
    .lineheight{
          --line:4rem;
    }
    .lineheight2{
        --line2:13rem;
  }
  .hero-info{
    display: block;
    text-align: end;
    width: 25%;
  }
  .big-wireless{
    font-size: 5rem;
  }
  .hero-inner{
    margin-top: -14rem;
    padding-bottom: 8rem;
  }
}

.product-section{
    width: 93vw;
    margin-inline: auto;
}


.category{
     border-radius: 2rem;
     grid-template-columns: repeat(2, 1fr);
     align-items: flex-end;
     padding: 7rem 4rem 2rem 4rem;
     position: relative;
     overflow: hidden;
     z-index: 777;
     margin-block: 1rem;
}
.product-btn{
    margin-top: 1rem;
    padding-inline: 2rem;
}
.earphone{
    color: hsl(var(--clr-white) /0.2);
}

.product-img1{
    position: absolute;
    top: -2.3rem;
    right: 3rem;
    z-index: -11;
}

.product-img2{
    position: absolute;
    top: 0.5rem;
    right: -6rem; 
}
.product-img3{
    position: absolute;
    width: 50%;
    right: 1rem; 
    top: 5rem;
}
.product-img4{
    position: absolute;
    width: 80%;
    right: -3.5rem; 
    top: 2.5rem;
}
.product-img5{
    position: absolute;
    width: 100%;
    right: -4rem; 
    top: 3rem;
    z-index: -1;
}
.product-img6{
    position: absolute;
    width: 70%;
    right: -3rem; 
    top: 5rem;
    z-index: -1;
}

.category:nth-child(1)
{
    grid-area: one;
}

.category:nth-child(2)
{
    grid-area: two;
}

.category:nth-child(3)
{
    grid-area: three;
}

.category:nth-child(4)
{
    grid-area: four;
}

.category:nth-child(5)
{
    grid-area: five;
}

.category:nth-child(6)
{
    grid-area: six;
}

@media (min-width: 35em) and (max-width: 59em)  {
    .product-section{
        width: 95vw;
        display: grid;
        margin-inline: auto;
        margin-block: 2rem;
        gap: 1.5rem;
        grid-template-areas: 'one two' 'three three' 'six five' 'four four';
    }
    
    .category{
        margin-block: 0rem;
    }
    .product-img3{
        position: absolute;
        width: 60%;
        right: -1rem;
        top: 1rem;
    }
    .product-img4{
       position: absolute;
       width: 60%;
       right: -1rem;
       top: 1rem;
    }
}
@media (min-width:59em)
{
    .product-section{
        width: 95vw;
        margin-inline: auto;
        margin-block: 2rem;
        gap: 1.5rem;
        display: grid;
        grid-template-areas: 'one two three three' 'four four five six';
    }
    .product-img1{
        width: 150%;
        right: -10rem;
        z-index: -11;
    }
    .product-img2{
        right: -6rem;
    }
    .product-img3{
        width: 58%;
        right: 1rem;
        top: 2rem;
    }
    .product-img4{
        width: 70%;
        right: -3.5rem;
        top:-0.5rem;
    }
    .product-img5{
        width: 120%;
        right: -4rem;
        top:5rem;
        z-index: -1;
    }
    .product-img6{
        width: 90%;
        right: -3rem;
        top: 5rem;
        z-index: -1;
    }
    .lineheight{
        --line:3rem;
    }
    .lineheight2{
        --line:3rem;
    }
}


.service-section{
    width: 90vw;
    margin-inline: auto;
    margin-block: 2rem;
    display: grid;
    gap: 1.5rem;
    grid-template-areas: 'one two' 'three four';
}

.service:nth-child(1)
{
    grid-area: one;
}
.service:nth-child(2)
{
    grid-area: two;
}
.service:nth-child(3)
{
    grid-area: three;
}
.service:nth-child(4)
{
    grid-area: four;
}
.service{
    display: grid;
    place-items: center;
    text-align: center;
    gap: 1rem;
}
.service .fs-200{
    font-size: 0.9rem;
}
.service .fs-50{
    font-size: 0.79rem;
}
@media (min-width:59em){
.service-section{
    width: 90vw;
    margin-inline: auto;
    display: grid;
    gap: 5rem;
    grid-template-areas: 'one two three four';
}
}

.feature-section{
    width: 90vw;
    margin-inline: auto;
    border-radius: 2rem;
    position: relative;
    margin-top: 15rem;
    display: grid;
    gap:1rem;
    place-items: center;
    margin-bottom: 2rem;
    text-align: center;
    padding-inline: 4rem;
    padding: 8rem 2rem 2rem 2rem;
}
.feature-section >* img{
    margin-top: -18rem;
    position: absolute;
    right: -1.5rem;
}
.feature-info{
    padding-inline: 1rem;
    margin-top: 1rem;
}
.prodduct-btn{
    margin-top: 2rem;
    padding-inline: 2rem;
}
@media (min-width:35em) and (max-width:59em)
{
    .feature-section{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap:5rem;
        text-align: left;
        padding: 2rem 0rem;
        page-break-inside: 7rem;
    }
    .feature-section >* img{
        right: 5rem;
    }
    .date{
        padding-top: 5rem;
    }
    .smile{
        display: block;
        position: absolute;
        padding-bottom: 1rem;
    }
    .lineheight2{
        line-height: 4rem;
    }
}

@media (min-width:59em)
{
    .feature-section{
        width: 95vw;
        display: grid;
        gap: 15rem;
        z-index: 2;
        grid-template-columns: repeat(2,1fr);
        place-items: start;
        text-align: left;
        padding: 4rem 7rem;
    }
    .feature-section >* img{
        margin-top: -25rem;
        position: absolute;
        right: 18rem;
        z-index: -1;
    }
    .smile{
        display: block;
        margin-bottom: 2rem;
    }
    .font-size{
        font-size:7rem;
        line-height: 5.5rem;
    }
}

.best-product{
    padding-block: 5rem;
    text-align: center;
}
.letter-spacing{
    font-size: 2.5rem;
}
.best-Seller{
    width: 90vw;
    margin-inline: auto;
    text-align: center;
    display: grid;
    gap: 3rem;
    grid-template-areas: 'one' 'two' 'three' 'four' 'five' 'six' 'seven' 'eight';
}

.best-Seller:ntn-child(1)
{
    grid-area: one;
}
.best-Seller:ntn-child(2)
{
    grid-area: two;
}
.best-Seller:ntn-child(3)
{
    grid-area: three;
}
.best-Seller:ntn-child(4)
{
    grid-area: four;
}
.best-Seller:ntn-child(5)
{
    grid-area: five;
}
.best-Seller:ntn-child(6)
{
    grid-area: six;
}
.best-Seller:ntn-child(7)
{
    grid-area: seven;
}
.best-Seller:ntn-child(8)
{
    grid-area: eight;
}
.product{
    text-align: left;
    --gap-gap:0.5rem;
    cursor: pointer;
    position: relative;
    overflow-x: hidden;
}
.product:hover{
    color: hsl(var(--clr-red));
}
.product-details{
    position: absolute;
    height: 25%;
    place-items: center;
    font-size: 1.5rem;
    --grid-gap:-1rem;
    width: 10%;
    right: 0;
    top: 0;
    border-radius: 0.5rem;
    transform: translateX(120%);
    transition: transform 250ms ease-in-out;

}
.product:hover .product-details{
    transform: translateX(0%);
}
.product > img{
    border-radius: 2rem;
}
.letter-spacing{
    letter-spacing: -1px;
    font-size: 2.2rem;
}

@media (min-width:35em) and (max-width:59em)
{
    .best-Seller{
        padding-block: 2rem;
        grid-template-areas: 'one two' 'three four' 'five six' 'seven eight';
    }
}
@media (min-width:59em)
{
    .best-Seller{
        width: 95vw;
        grid-template-areas: 'one two three four' 'five six seven eight';
        padding-block: 2rem;
    }
}
.feature-green img{
    margin-top: -19rem;
    right: 4rem;
    width: 80%;
}
@media (min-width:35em) and (max-width: 59em)
{
    .feature-green img{
        margin-top: -10rem;
        right: 17rem;
        width: 50%;
    }
}

@media (min-width: 59em)
{
    .feature-green img{
        margin-top: -15rem;
        right: 40rem;
        width: 50%;
    }
}

.padding-inline{
    padding-inline: 0.8rem;
}

.recent-news{
    width: 90vw;
    margin-inline: auto;
    --grid-gap: 1rem;
    padding-bottom: 2rem;
    grid-template-areas: 'one' 'two' 'three';
}
.recent-news:nth-child(1)
{
    grid-area: one;
}
.recent-news:nth-child(2)
{
    grid-area: two;
}
.recent-news:nth-child(3)
{
    grid-area: three;
}

.news > img{
    border-radius: 2rem;
    cursor: pointer;
    transition: transform 250ms ease-in-out;
}

.news >img:hover{
    box-shadow: 5px 5px 57px -6px hsl(var(--clr-black) / 0.5);
    transition: transform 250ms ease-in-out;
}
@media (min-width:59em)
{
    .recent-news{
        width: 95vw;
        margin-inline: auto;
        --grid-gap:2rem;
       grid-template-areas: 'one two three';
    }
    .news{
        --grid-gap:0.8rem;
    }
    .news > h2{
        font-size: 1.2rem;
    }
    .news > p{
        font-size: 0.9rem;
        padding-right: 4rem;
    }
}

.brands{
    place-items: center;
    gap:4rem;
    --grid-gap:3rem;
    padding-block: 6rem;
    margin-block: 2rem;
    background-color: hsl(var(--clr-gray));
    grid-template-areas: 'one' 'two' 'three' 'four';
}

.brands:nth-child(1)
{
    grid-area: one;
}
.brands:nth-child(2)
{
    grid-area: two;
}
.brands:nth-child(3)
{
    grid-area: three;
}
.brands:nth-child(4)
{
    grid-area: four;
}
.brands:nth-child(5)
{
    grid-area: five;
}
.brands >* img{
    opacity: 0.2;
    cursor: pointer;
    transition: transform 250ms ease-in-out;
}
.brands >* img:hover{
    opacity: 1;
}

@media(min-width:35em) and (max-width: 59em)
{
    .brands{
        grid-template-areas: 'one two' 'three four';
    }
}

@media(min-width:59em)
{
    .brands{
        grid-template-areas: 'one two three four five' ;
    }
}
.footer{
    margin-block: 5rem;
    width: 80vw;
    margin-inline: auto;
    grid-template-columns: auto;
    --grid-gap:1.5rem;
    grid-template-areas: 'one' 'two' 'three' 'four';
}
.footer:nth-child(1)
{
    grid-area: one;
}
.footer:nth-child(2)
{
    grid-area: two;
}
.footer:nth-child(3)
{
    grid-area: three;
}
.footer:nth-child(4)
{
    grid-area: four;
}
.footer-logo{
    --grid-gap:2rem;
}
.footer-logo >p{
    width: 60%;
}
.footer-logo .social-media{
    --flex-gap: 1.5rem;
    font-size: 1.3rem;
}
.footer-menu > ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-menu li{
    margin-top: 0.5rem;
}

.footer-menu a{
    text-decoration: none;
}

.footer .contact >p{
    width: 60%;
}

.inputField{
    padding: 0.5rem;
    border-radius: 4rem;
}
.inputField > button{
    border: 0;
    padding: 0.7rem 1.5rem;
    border-radius: 3rem;
    cursor: pointer;
}

.inputField input{
    border: 0;
    width: 60%;
}
.inputField input:hover,
.inputField input:focus{
    outline: none;
}

.inputField input[type="email"]{
    margin-left: 2.5rem;
}

@media (min-width:35em) and (max-width:59em)
{
    .footer{
        --grid-gap:0.5rem;
        grid-auto-columns: auto;
        grid-template-areas: 'one two' 'three four';
    
}
.footer-logo >p{
    font-size: 1rem;
}

.footer-logo .social-media{
    --flex-gap:1.5rem;
    margin-bottom: 1rem;
}

.footer-menu li{
    margin-top: 0.1rem;
}

.footer-menu a{
    font-size: 1rem;
}

.updates{
    font-size: 1.5rem;
}

.inputField input{
    border: 0;
    width: 50%;
}

.inputField input[type="email"]{
    margin-left: 1rem;
}
}
@media (min-width:59em)
{
    .footer{
        width: 92vw;
        margin-top: 6rem;
        --grid-gap: 2rem;
        grid-auto-columns: auto;
        grid-template-areas: 'one two three four';
    }
    .footer-logo > p{
        font-size: 1rem;
    }
    .footer-menu> h3{
        font-size: 1rem;
    }
    .footer-menu a{
        font-size: 1rem;
    }
    .contact > h3{
        font-size: 1rem;
    }
}

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

.p-top{
    padding: 1rem 0;
}
.copyRight{
    margin-top: 5rem;
    padding: 1rem 2rem;
    margin-inline: auto;
    background-color: hsl(var(--clr-black));
    color: hsl(var(--clr-white) /0.5);
}

@media (min-width: 35em) and (max-width: 59em)
{
    .copyRight{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}
@media (min-width:59em)
{
    .copyRight{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .c-font{
        font-size: 1rem;
    }
}