/* custom properties */
: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;
}
/*================== Media Queries for font size =====================*/
/*// for mobile phone ////*/
@media (min-width: 35em){
:root{
/* 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: 1rem;
--fs-bf-16: 0.6rem;
--fs-bf-15: 0.8rem;
}
}
/*////////// for tablet ipad /////////*/
@media (min-width: 35em) and (max-width: 59em){
:root{
/* 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: 2.55rem;
--fs-bf-20: 1.25rem;
--fs-bf-16: 1rem;
--fs-bf-15: 0.8375rem;
}
}
/*///////// for desktop //////////*/
@media (min-width: 59em){
:root{
/* 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: 2rem;
--fs-bf-16: 1rem;
--fs-bf-15: 0.9375rem;
}
}
/* //defult reset =======*/
*,
* ::after,
* ::before{
box-sizing: border-box;
}
/* // removing defult margin ===== */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd{
margin: 0;
}
/* removing list style ====== */
ul[role="list"],
ol[role="list"]{
list-style: none;
}
/* /set core root defult ===== */
html:focus-within{
scroll-behavior: smooth;
}
/* set core body defult =====*/
body{
min-height: 100vh;
text-rendering: optimizeSpeed;
line-height: 1.5;
}
/* a element that dont have a class get defult style===*/
a:not([class]){
text-decoration-skip-ink: auto;
}
/* make image easier to work with =====*/
img,
picture{
max-width: 100%;
display: block;
}
/* inherit fonts for inputs and buttons====*/
input,
button,
textarea,
select{
font: inherit;
}
::-webkit-scrollbar{
display: none;
}
/* remove all animation, transition and smooth scroll for people
that perfer not to see them */
@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;
}
}
/*==================End For General Reset=================*/
/*=========================================================*/
/* some important utility class */
/*================================*/
body{
overflow-x: hidden;
}
/*////////////// background-color utility class */
.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 utility class========*/
.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));}
/*=================font size===========*/
.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-500{font-size: var(--fs-bf-15);}
/*====================font bold============*/
.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;}
/*===============font family===========*/
.fs-poppins{font-family: "poppins", sans-serif;}
.fs-montserrat{font-family: "Montserrat", sans-serif;}
/*=========End of utility class===========
*/
/* ===utility class === */
.text-align{
text-align: center;
}
.p-top{
padding: 1rem 0;
}
/* end of utility clss */
/*===========Component utility class =========*/
.uil{
cursor: pointer;
}
.flex{
display: flex;
gap: var(--flex-gap, 1rem);
}
.grid{
display: grid;
gap: var(--grid-gap, 1rem);
}
.container{
width: 96vw;
margin-inline: auto;
padding-inline: 2rem;
}
/*============== End of utility class===========*/
/*=============== Start Header Section==========================*/
.primary-header {
justify-content: space-between;
align-items: center;
padding: 2rem;
}
.header-inner-one{
align-items: center;
}
.logo-container{
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 a{
color: hsl(var(--clr-black)/0.6);
text-decoration: none;
}
.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));
text-align: center;
height: 1.4rem;be
margin-top: -3rem;
margin-left: 1rem;
border-radius: 0.3rem;
display: grid;
color: hsl(var(--clr-white));
font-size: 1.2rem;
font-weight: 700;
} */
.number{
background-color: hsl(var(--clr-red));
color: hsl(var(--clr-white));
border-radius: 0.3rem;
padding: 0rem 0.2rem ;
font-size: 1.2rem;
margin-bottom: 2rem;
height: 1.4rem;
margin-left: 4.2rem;
display: flex;
position: absolute;
width: 1rem;
}
.mobile-open-btn{
display: none;
}
/*====================== Cart Box =======================*/
.cart{
position: fixed;
top: 0;
/* right: 0; */
right: -100%;
width: 360px;
height: 100vh;
z-index: 999;
overflow-y: auto;
overflow-x: hidden;
padding: 20px;
background-color: hsl(var(--clr-gray));
box-shadow: -2px solid 4px hsl(0 4% 15% / 10%);
border: 1px solid hsl(var(--clr-red));
transition: 1.5s;
}
.cart.active{
right: 0;
transition: .5s;
}
.cart-title{
text-align: center;
font-size: 1.5rem;
font-weight: 600;
margin-top: 1rem;
}
.cart-box{
display: grid;
grid-template-columns: 32% 50% 18%;
align-items: center;
gap: 1rem;
margin-top: 1rem;
}
.cart-img{
width: 100px;
height: 100px;
object-fit: contain;
padding: 10px;
}
.detail-box{
display: grid;
row-gap: .5rem;
}
.cart-product-title{
font-size: 1.5rem;
text-transform: uppercase;
}
.cart-price{
font-weight: 500;
}
.cart-quantity{
border: 1px solid hsl(var(--clr-black));
outline-color: hsl(var(--clr-red));
width: 2.4rem;
text-align: center;
font-size: 1rem;
}
.cart-remove{
font-size: 24px;
color: hsl(var(--clr-black));
&:hover{
color: hsl(var(--clr-red));
}
cursor: pointer;
}
.total{
display: flex;
justify-content: flex-end;
margin-top: 1.5rem;
border-top: 1px solid hsl(var(--clr-red));
}
.total-title{
font-size: 1rem;
font-weight: 600;
}
.total-price{
margin-left: .5rem;
}
.buy-btn{
display: flex;
margin: 1.5rem auto 0 auto;
padding: 12px 20px;
border: none;
background-color: hsl(var(--clr-red));
color: hsl(var(--clr-white));
font-size: 1rem;
font-weight: 500;
cursor: pointer;
}
.buy-btn:hover{
background-color: hsl(var(--clr-black));
}
#cart-close{
position: absolute;
top: 1rem;
right: .8rem;
font-size: 1.5rem;
color: hsl(var(--clr-black));
&:hover{
color: hsl(var(--clr-red));
}
cursor: pointer;
}
/*==============Header Medium Quaries====================*/
/*============== MObile======================*/
@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;
}
}
/*================= I pad ===========*/
@media (min-width: 35rem) and (max-width: 59rem) {
.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;
}
}
/************************ DESTOP *************************/
@media (min-width: 59em){
.cart-icon{
position: absolute;
inset: 10% 5% 9% 60%;
border-radius: 1rem;
transform: translateX(150%);
transition: transform 250ms ease-in-out;
z-index: 222;
}
.cart-icon[data-visible="true"]{
transform: translateX(0%);
}
.cart-icon .shopping{
display: none;
}
.cart{
padding-top: 4rem;
}
}
/*===============End Header Section======================*/
/*==========================================================================*/
/* Hero Section */
/*==========================================================================*/
/* Utility classes */
.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 Cs ================================*/
.hero-section{
width: 93vw;
margin-inline: auto;
padding-inline: 1rem;
background-color: hsl(var(--clr-gray));
border-radius: 2rem;
padding-top: 5rem;
height: 55vw;
}
.hero-section >* img{
margin-top: 1rem;
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 Ipad ===================*/
@media (min-width: 35em) and (max-width:59em) {
.hero-section{
width: 95vw;
margin-inline: auto;
padding-inline: 2.5rem;
padding-top: 7rem;
}
.hero-section>* img{
margin-top: -10rem;
margin-left: 5rem;
}
.lineheight2{
--line2: 7rem;
}
}
/*==========================Media Destop========================*/
@media (min-width: 59rem) {
.hero-section{
width: 95v;
margin-inline: auto;
padding-inline: 3rem;
padding-top: clamp(4rem, 30vh, 15rem);
}
.hero-section >* img{
margin-top: -28rem;
}
.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 ================*/
.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 1rem;
position: relative;
overflow: hidden;
z-index: 9;
margin-block: 1rem;
}
.product-btn{
margin-top: 1rem;
padding-inline: 2rem;
}
/*====================1======================*/
.earphone{
color: hsl(var(--clr-white) /0.3);
}
.product-img1{
position: absolute;
top: -2.3rem;
right: 3rem;
z-index: -11;
}
/*====================2======================*/
.watch{
color: hsl(var(--clr-white) /0.4);
}
.product-img2{
position: absolute;
top: 0.5rem;
right: -6rem;
}
/*====================3======================*/
.laptop{
color: hsl(var(--clr-white) /0.5);
}
.product-img3{
position: absolute;
width: 77%;
top: 2.5rem;
right: -4rem;
}
/*====================4======================*/
.Conse {
color: hsl(var(--clr-white) /0.5);
}
.product-img4{
position: absolute;
width: 50%;
top: 5rem;
right: 0rem;
}
/*====================5======================*/
.oculus{
color: hsl(var(--clr-white)/0.5 );
}
.product-img5{
position: absolute;
width: 100%;
top: 3rem;
right: -4rem;
z-index: -1;
}
/*====================6======================*/
.speaker{
color: hsl(var(--clr-white) /0.3);
}
.product-img6{
position: absolute;
width: 70%;
top: 5rem;
right: -3rem;
z-index: -1;
}
/*============ Building layout for tab and desktop========*/
.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;
margin-inline: auto;
margin-block: 2rem;
display: grid;
gap: 1.5rem;
grid-template-areas: 'one two'
'three three'
'six five'
'four four' ;
}
.category{
margin-block: 0rem;
}
.product-img2{
right: -6rem;
top: 3rem;
width: 90%;
}
.product-img3{
position: absolute;
width: 60%;
right: -1rem;
top: 1rem;
}
.product-img4{
width: 50%;
position: absolute;
right: 1rem;
top: 1rem;
}
.product-img5{
position:absolute;
width: 110%;
top:4.8rem;
}
}
/*================== Destop ===================*/
@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: -6rem;
z-index: -11;
}
.product-img2{
right: -5rem;
width: 105%;
}
.product-img3{
width: 80%;
right: -3.5rem;
top: -0.5rem;
}
.product-img4{
width: 50%;
right: 1rem;
top: 2rem;
}
.product-img5{
width: 126%;
right: -4.2rem;
top: 6rem;
z-index: -1;
}
.product-img6{
width: 90%;
right: -3rem;
top: 6rem;
z-index: -1;
}
.lineheight{
--line: 3rem;
}
.lineheight2{
--line: 3rem;
}
}
/*========================== End product Section ================*/
/*========================== service section =====================*/
.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 querie for destop ==============*/
@media(min-width: 59em){
.service-section{
width: 90vw;
margin-inline: auto;
display: grid;
gap: 5rem;
grid-template-areas: 'one two three four ';
}
.service .fs-200{
font-size: 1rem;
}
.service .fs-50{
font-size: 0.79rem;
}
}
/*========================== End service section =====================*/
/*=========================== feature section 1 ===================*/
.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 Querie for i-pad ===========*/
@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 Querie for Destkop ===========*/
@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: 10rem;
z-index: -1;
}
.smile{
display: block;
margin-bottom: 2rem;
}
.font-size{
font-size: 7rem;
line-height: 5.5rem;
}
}
/*=========================== End feature section 1 ===================*/
/*======================= Best seller product =======================*/
.best-product{
padding-block: 5rem;
text-align: center;
}
.letter-spacing{
font-size: 2.5rem;
}
.best-sell-product{
width: 90vw;
margin-inline: auto;
display: grid;
text-align: center;
gap: 3rem;
grid-template-areas:
'one'
'two'
'three'
'four'
'five'
'six'
'seven'
'eight'
'nine'
'ten'
'eleven'
'twelve';
}
.product_title{
text-transform: uppercase;
}
.product_img{
object-fit: cover;
}
.best-sell-product:nth-child(1){
grid-area: one;
}
.best-sell-product:nth-child(2){
grid-area: two;
}
.best-sell-product:nth-child(3){
grid-area: three;
}
.best-sell-product:nth-child(4){
grid-area: four;
}
.best-sell-product:nth-child(5){
grid-area: five;
}
.best-sell-product:nth-child(6){
grid-area: six;
}
.best-sell-product:nth-child(7){
grid-area: seven;
}
.best-sell-product:nth-child(8){
grid-area: eight;
}
.best-sell-product:nth-child(9){
grid-area: nine;
}
.best-sell-product:nth-child(10){
grid-area: ten;
}
.best-sell-product:nth-child(11){
grid-area: eleven;
}
.best-sell-product:nth-child(12){
grid-area: twelve;
}
.product{
text-align: left;
--grid-gap: 0.5rem;
cursor: pointer;
position: relative;
overflow-x: hidden;
}
.product > a > img{
border-radius: 2rem;
}
.product:hover
.product:focus{
color: hsl(var(--clr-red));
}
.product:hover .shop-btn{
transform: translateX(0%);
}
.product-detail{
position: absolute;
height: 28%;
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-detail{
transform: translateX(0%);
}
.product > img{
border-radius: 2rem;
}
.letter-spacing{
letter-spacing: -1px;
font-size: 2.2rem;
}
/*================= Media querie for I pad =================*/
@media (min-width: 35em) and (max-width: 59em){
.best-sell-product{
padding-block: 2rem;
grid-template-areas:
'one two'
'three four'
'five six'
'seven eight'
'nine ten'
'eleven twelve';
}
.product .shop-btn{
transform: translateX(-33%);
}
}
/*====================== media querie for desktop ============*/
@media (min-width:59em){
.best-sell-product{
width: 95vw;
grid-template-areas:
'one two three four'
'five six seven eight'
'nine ten eleven twelve' ;
padding-block: 2rem;
}
.product .shop-btn {
transform: translateX(-45%);
}
}
/*======================= End Best seller product =======================*/
/* ======================== feature section 2==================== */
.feature-green img{
margin-top: -19rem;
right: 2rem;
width: 80%;
}
/* ===================== media for i-pad ================= */
@media (min-width:35em) and (max-width:59em) {
.feature-green img{
margin-top: -20rem;
right: 13rem;
width: 70%;
}
}
/* ============= media for desktop =============== */
@media (min-width:59em) {
.feature-green img{
margin-top: -19rem;
right: 40rem;
width: 50%;
}
}
/* ======================== End feature section 2 ==================== */
/* =======================News Sections =================== */
.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 a{
text-decoration: none;
color: hsl(var(--clr-red)) ;
display: inline-block;
position: relative;
right: -0.7rem;
background-color: hsl(var(--clr-gray-light) / 0.9);
padding: 8px 15px;
width: 30%;
text-align: center;
border-radius: 2rem;
}
.recent-news a:hover{
background-color: hsl(var(--clr-black));
}
.recent-news .date{
position: absolute;
color: white;
font-size: 1.2rem;
display: inline-block;
background-color: #ada62b;
padding:3px 1px 2px;
border-top-left-radius: 1.2rem;
}
.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: tranform 250ms ease-in-out;
}
/* ====================Desktop media ===================== */
@media (min-width: 59rem){
.recent-news{
width: 95vw;
margin-inline: auto;
--grid-gap: 2rem;
padding-bottom: 5rem;
grid-template-areas:
'one two three';
}
.news{
--grid-gap: 0.8rem;
}
.news >h2{
font-size: 1.3rem;
}
.news >h3{
font-size: 1.3rem;
}
.news >p{
font-size: 0.9rem;
padding-right: 4rem;
}
}
/* ======================= End News Sections =================== */
/* ======================= Brand Section ======================== */
.brands{
place-items: center;
gap: 4rem;
padding-block: 4rem;
margin-block: 2rem;
background-color: hsl(var(--clr-gray));
grid-template-areas:
'one'
'two'
'three'
'four'
'five';
}
.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.3;
cursor: pointer;
transition: transform 250ms ease-in-out;
}
.brands >* img:hover{
opacity: 1;
}
/* ================medial for i-pad ================ */
@media(min-width:35em) and (max-width:59em){
.brands{
grid-template-areas:
'one two'
'three four';
}
}
/* ====================== Media for desktop ================ */
@media(min-width:59em){
.brands{
grid-template-areas:
'one two three four five';
}
}
/* ======================= End Brand Section ======================== */
/*========================= Footer Section================ */
.footer{
margin-block: 5rem;
width: 95vw;
margin-inline: auto;
grid-auto-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 For I-pad =================== */
@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: 1rem;
}
.footer-menu a{
font-size: 1rem;
}
.update{
font-size: 1.5rem;
}
.inputfield input{
border: 0;
width: 50%;
}
.inputfield input[type="email"]{
margin-left: 1rem;
}
}
/* ==================== Media Desktop ================== */
@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;
}
.emails > h3{
font-size: 1rem;
}
}
/*========================= End Footer Section================ */
/* ============ Copy Right Section ================== */
.copyright{
margin-top: 5rem;
padding: 1rem 2rem;
margin-inline: auto;
background-color: hsl(var(--clr-black));
color: hsl(var(--clr-white) /0.6);
}
/* =============== media for i-pad ============== */
@media (min-width:35em) and (max-width:59em){
.copyright{
display: flex;
justify-content: space-between;
align-items: center;
}
}
/* ================ media for desktop ========== */
@media (min-width:59em){
.copyright{
display: flex;
justify-content: space-between;
align-items: center;
}
.c-font{
font-size: 1rem;
}
}
/* ============ END Copy Right Section ================== */
/* ============= login section ====================== */
/* Importing Google font - Open Sans */
/* @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap"); */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
/* font-family: "Open Sans", sans-serif; */
}
.navbar {
display: flex;
padding: 2px 0;
align-items: center;
max-width: 1200px;
margin: 0 auto;
justify-content: space-between;
}
.navbar .login-btn {
border: none;
outline: none;
background: #fff;
color: hsl(var(--clr-black)/0.5);
font-size: 0.9rem;
font-weight: 550;
padding: 10px 18px;
border-radius: 3px;
cursor: pointer;
transition: 0.15s ease;
}
.navbar .login-btn:hover {
background: #ddd;
border-radius: 2rem;
}
.form-popup {
position: fixed;
top: 50%;
left: 50%;
z-index: 10;
width: 100%;
opacity: 0;
pointer-events: none;
max-width: 720px;
background: #f9f9f9;
border: 2px solid #fff;
transform: translate(-50%, -70%);
}
.show-popup .form-popup {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, -50%);
transition: transform 0.3s ease, opacity 0.1s;
}
.form-popup .close-btn {
position: absolute;
top: 12px;
right: 12px;
color: #878484;
cursor: pointer;
font-size: 1.3rem;
}
.blur-bg-overlay {
position: fixed;
top: 0;
left: 0;
z-index: 10;
height: 100%;
width: 100%;
opacity: 0;
pointer-events: none;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
transition: 0.1s ease;
}
.show-popup .blur-bg-overlay {
opacity: 1;
pointer-events: auto;
}
.form-popup .form-box {
display: flex;
}
.form-box .form-details {
width: 100%;
color: #fff;
max-width: 330px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.login .form-details {
padding: 0 40px;
background: url("image/login-img.jpg");
background-position: center;
background-size: cover;
}
.signup .form-details {
padding: 0 20px;
background: url("image/signup-img.jpg");
background-position: center;
background-size: cover;
}
.form-box .form-content {
width: 100%;
padding: 35px;
}
.form-box h2 {
text-align: center;
margin-bottom: 29px;
}
form .input-field {
position: relative;
height: 50px;
width: 100%;
margin-top: 20px;
}
.input-field input {
height: 100%;
width: 100%;
background: none;
outline: none;
font-size: 0.95rem;
padding: 0 15px;
border: 1px solid #717171;
border-radius: 3px;
}
.input-field input:focus {
border: 1px solid #00bcd4;
}
.input-field label {
position: absolute;
top: 50%;
left: 15px;
transform: translateY(-50%);
color: #4a4646;
pointer-events: none;
transition: 0.2s ease;
}
.input-field input:is(:focus, :valid) {
padding: 16px 15px 0;
}
.input-field input:is(:focus, :valid)~label {
transform: translateY(-120%);
color: #00bcd4;
font-size: 0.75rem;
}
.form-box a {
color: #00bcd4;
text-decoration: none;
}
.form-box a:hover {
text-decoration: underline;
}
form :where(.forgot-pass-link, .policy-text) {
display: inline-flex;
margin-top: 13px;
font-size: 0.95rem;
}
form button {
width: 100%;
color: #fff;
border: none;
outline: none;
padding: 14px 0;
font-size: 1rem;
font-weight: 500;
border-radius: 3px;
cursor: pointer;
margin: 25px 0;
background: #00bcd4;
transition: 0.2s ease;
}
form button:hover {
background: #0097a7;
}
.form-content .bottom-link {
text-align: center;
}
.form-popup .signup,
.form-popup.show-signup .login {
display: none;
}
.form-popup.show-signup .signup {
display: flex;
}
.signup .policy-text {
display: flex;
margin-top: 14px;
align-items: center;
}
.signup .policy-text input {
width: 14px;
height: 14px;
margin-right: 7px;
}
@media (max-width: 950px) {
.navbar :is(.hamburger-btn, .close-btn) {
display: block;
}
.navbar {
padding: 15px 0;
}
.navbar .logo img {
display: none;
}
.navbar .login-btn {
font-size: 0.9rem;
padding: 7px 10px ;
}
}
@media (max-width: 760px) {
.form-popup {
width: 95%;
}
.form-box .form-details {
display: none;
}
.form-box .form-content {
padding: 30px 20px;
}
}
/* ==================== ENd of login section ================== */
/* ============== search Section ================ */
.header-login .search{
font-size: 1.2rem;
}
.header-login .search:hover{
color: hsl(var(--clr-red));
}
.search-form input{
border: none;
outline: none;
}
.primary-header .search-form{
position: absolute;
border: 0;
top: 15%;
right: -110%;
height: 3rem;
background-color: hsl(var(--clr-white));
border-radius: .5rem ;
overflow: hidden;
display: flex;
align-items: center;
width: 30rem;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
.primary-header .search-form.active{
right: 2rem;
transition: .4s linear;
}
.primary-header .search-form input{
height: 100%;
width: 100%;
background: none;
text-transform: none;
font-size: 1rem;
color: hsl(var(--clr-black));
padding: 0 1rem;
}
.primary-header .search-form label{
font-size: 1.4rem;
padding: 0 1rem;
color: hsl(var(--clr-black));
cursor: pointer;
}
.primary-header .search-form label:hover{
color: hsl(var(--clr-red));
}
/* ============== End search Section ================ */
/* =============== Pop Up section =============== */
.popup{
position:fixed;
display: flex;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: hsl(var(--clr-black)/0.2);
justify-content: center;
align-items: center;
z-index: 9999;
transition: 0.3s;
transform: scale(1);
}
.popup-content{
position: absolute;
top: 50%;
left: 50%;
width: 90%;
margin: 0 auto;
height: 5rem;
transform: translate(-50%, -50%);
padding: 1.6rem;
display: table;
overflow: hidden;
background-color: hsl(var(--clr-white));
border-radius: 1rem;
}
.popup-close{
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0.8rem;
right: 1rem;
padding: 0.2rem;
cursor: pointer;
color: hsl(var(--clr-black));
font-size: 1.5rem;
}
.popup-left{
display: table-cell;
width: 50%;
height: 100%;
vertical-align: middle;
}
.popup-right{
display: table-cell;
width: 50%;
vertical-align: middle;
padding: 3rem 5rem;
}
.popup-img-container{
width: 100%;
overflow: hidden;
}
.popup-img-container img .popup-img{
display: block;
width: 60rem;
height: 45rem;
max-width: 100%;
border-radius: 1rem;
object-fit: cover;
}
.popup-img-container .popup-img{
border-radius: 2rem;
}
.right-content{
text-align: center;
width: 85%;
margin: 0 auto;
}
.right-content h1 {
font-size: 2rem;
color: hsl(var(--clr-black));
margin-bottom: 1.6rem;
}
.right-content h1 span{
font-size: 2.5rem;
color: hsl(var(--clr-red));
}
.right-content p{
font-size: 1.3rem;
color: hsl(var(--clr-red));
margin-bottom: 1.6rem;
}
.popup-form{
width: 100%;
padding: 1.2rem 0;
text-indent: 1rem;
margin-bottom: 1.6rem;
border-radius: 2rem;
background-color: hsl(var(--clr-gray));
font-size: 1rem;
color: hsl(var(--clr-black));
border: none;
}
.popup-form::placeholder{
color: hsl(var(--clr-black));
}
.popup-form:focus{
outline: none;
}
.right-content a:link,
.right-content a:visited{
display: inline-block;
padding: 1.2rem 4rem;
border-radius: 3rem;
font-size: 1.2rem;
font-weight: 700;
color: hsl(var(--clr-white));
background-color: hsl(var(--clr-red));
text-decoration: none;
border: 1px solid hsl(var(--clr-gray));
transition: 0.3s;
}
.right-content a:hover{
background-color: hsl(var(--clr-black));
}
.hide-popup{
transform: scale(0.2);
opacity: 0;
visibility: hidden;
}
@media (max-width: 1200px){
.right-content{
width: 100%;
}
.right-content h1{
font-size: 3.5rem;
margin-bottom: 1.3rem;
}
}
@media (max-width: 998px){
.popup-right{
width: 100%;
}
.popup-left{
display: none;
}
.popup-right{
width: 100%;
}
.right-content h1{
font-size: 2.5rem;
}
}
@media (max-width:768px){
.right-content{
font-size: 1rem;
}
.right-content p{
font-size: 1.2rem;
}
.popup-form{
width: 90% ;
margin: 0 auto;
padding: 1rem 0;
margin-bottom: 1.5rem;
}
}
@media (max-width:567px){
.popup-right{
padding: 0 1.6rem;
}
.popup-content{
height: 35rem;
width: 90%;
margin: 0 auto;
}
.right-content{
width: 100%;
}
.right-content h1{
font-size: 3rem;
}
.right-content p{
font-size: 1.4rem;
}
.popup-form{
width: 100% ;
padding: 1.5rem 0;
margin-bottom: 1.3rem;
}
.right-content a:link,
.right-content a:visited{
padding: 1.5rem 3rem;
}
.popup-close{
top: 1rem;
right: 1rem;
padding: 0.5rem;
}
}
/* =============== End Pop Up section =============== */
/* ============= HOME SECTION COMPLECTED =================== */