@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,300;1,400;1,700&display=swap");
* {
   font-family: "Lato", "Arial";
}
body {
   margin: 0px;
   height: 2000px;
}
/* . HEADER AND NAV */
#header {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   padding: 2px 25px;
   background: var(--nav-theme-color);
   box-shadow: 0px 5px 10px 2px rgba(14, 14, 14, 0.192);
   z-index: 97;
   position: sticky;
   top: 0;
   left: 0;
}
#navbar {
   display: flex;
   flex-direction: row;
   gap: 60px;
   align-items: center;
   transition: 0.3s;
   padding-left: 0;
}
.bottomMobile {
   display: flex;
   gap: 35px;
}
.cart-con {
   transition: 0.3s;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 20px;
}
#navbar li,
.cart-con {
   list-style: none;
   text-decoration: none;
}
#navbar li a {
   text-decoration: none;
   color: var(--text-color);
   font-size: 1.25rem;
   font-weight: 700;
   transition: color 0.3s ease;
   position: relative;
}
#navbar li a:hover,
#navbar li a.active {
   color: #f0ac2f;
}
#navbar li a::after {
   content: "";
   background-color: #f0ac2f;
   height: 2px;
   width: 0; /* Start with a width of 0 */
   bottom: -5px;
   left: 50%; /* Center the line */
   position: absolute;
   transition: width 0.3s ease, left 0.3s ease; /* Add a transition */
}
.cart-box::after {
   content: "";
   background-color: #f0ac2f;
   height: 2px;
   width: 0; /* Start with a width of 0 */
   bottom: -5px;
   left: 110.4%;
   position: absolute;
   transition: width 0.3s ease, left 0.3s ease; /* Add a transition */
}
#navbar li a.active::after,
#navbar li a:hover::after {
   content: "";
   background-color: #f0ac2f;
   height: 2px;
   width: 50%;
   bottom: -5px;
   left: 25%;
   position: absolute;
}
.cart-box:hover::after,
.cart-box.active::after {
   content: "";
   background-color: #f0ac2f;
   height: 2px;
   width: 50%;
   bottom: -5px;
   left: 33.1%;
   position: absolute;
}
.logo {
   display: flex;
   height: 100px;
   object-fit: contain;
   object-position: center;
}
.cart-box {
   position: relative;
}
.cart-img {
   height: 40px;
}
.cart-amount {
   position: absolute;
   top: -7px;
   right: -12px;
   padding: 4px 10px;
   border-radius: 50%;
   color: white;
   font-size: 1.02rem;
   font-weight: 700;
   z-index: 20;
   background-image: linear-gradient(307deg, #f6ea41 -7% -7%, #f047c7 106% 106%);
}
.bar-icon img {
   width: 40px;
   cursor: pointer;
}
/* .NAV SMALL */
#mobile {
   display: none;
   align-items: center;
}
.close-nav-button {
   display: none;
}
/* .PADDINGS  */
.section-p1 {
   padding: 15px 40px;
}
.section-m1 {
   margin: 40px 0px;
}
/* .HERO SECTION */

#hero {
   background-image: url("https://i.pinimg.com/originals/34/e3/63/34e3637add139dd9eb7d3b98998f422e.jpg");
   height: 90vh;
   width: 95.3%;
   background-size: cover;
   background-position: top 28% right 0%;
   padding: 0px 60px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
}
#hero h4,
h2,
h1,
p {
   margin: 0px;
}
#hero h4 {
   padding-bottom: 10px;
   font-size: 1.8rem;
}
#hero h2 {
   font-size: 2rem;
   font-weight: 800;
}
#hero h1 {
   font-weight: 800;
   font-size: 2.7rem;
   color: #035a51;
   padding-bottom: 17px;
}
#hero p {
   color: rgb(55, 77, 100);
   padding-bottom: 20px;
   font-size: 1.3rem;
   font-weight: 600;
}
#hero button {
   position: relative;
   background-image: url("https://img.freepik.com/free-vector/vector-grunge-template-header-design_2065-551.jpg");
   background-color: transparent;
   border: 5px white;
   color: rgb(206, 206, 206);
   background-repeat: no-repeat;
   cursor: pointer;
   font-weight: 700;
   font-size: 1.6rem;
   padding: 10px 30px 10px 30px;
   background-position: top 17% left 40%;
   border-radius: 7px;
}
#hero button::before {
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   border: 3px solid rgb(218, 218, 218);
   border-radius: 7px;
   transition: border 0.3s;
}
#hero button:hover::before {
   border: 3px solid rgb(182, 182, 182);
}
#hero .welcoming h2,
.welcoming h4 {
   color: black;
}

/* . Features */
#feature {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
}

.feature-box {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   justify-content: center;
   box-shadow: 2px 5px 20px rgba(0, 0, 0, 0.308);
   border: 1px solid rgb(151, 121, 121);
   border-radius: 4px;
   margin: 15px 40px;
   padding: 14px 35px;
   width: 7vw;
   cursor: pointer;
   transition: box-shadow 0.2s;
   background-color: var(--secondary-background-color);
}
.feature-box:hover {
   box-shadow: 2px 5px 13px rgba(0, 0, 0, 0.308);
}
.feature-box h4 {
   background-color: #0c8075;
   display: inline-block;
   padding: 7px 25px;
   border-radius: 5px;
   color: white;
   font-size: 1.1rem;
   line-height: 1;
}
.feature-box:nth-child(2) h4 {
   background-color: rgb(224, 156, 77);
}
.feature-box:nth-child(3) h4 {
   background-color: rgb(91, 111, 167);
}
.feature-box:nth-child(4) h4 {
   background-color: rgb(163, 91, 145);
}
.feature-box:nth-child(5) h4 {
   background-color: rgb(151, 7, 218);
}
.feature-box:nth-child(6) h4 {
   background-color: rgb(228, 105, 105);
}
.feature-box img {
   height: 100px;
}

/* . PRODUCTS HOME PAGE */
.title-feature {
   text-align: center;
   padding-bottom: 40px;
   justify-content: space-evenly;
   align-items: center;
   display: flex;
   flex-direction: column;
   gap: 5px;
}
.title-feature-shop {
   text-align: center;
   padding-bottom: 40px;
   justify-content: space-evenly;
   align-items: center;
   display: flex;
   flex-direction: row;
   gap: 5px;
}
.title-feature h2,
.title-feature-shop h2 {
   font-size: 2rem;
}
.genderSelection button {
   padding: 10px 15px;
   background-color: transparent;
   border: red 2px solid;
   cursor: pointer;
   font-size: 1.3rem;
   color: var(--text-color);
   border-radius: 14px;
}
.maleGenderButton button {
   border: 3px solid #7393b3;
   transition: background-color 0.2s ease-in-out;
}
.femaleGenderButton button {
   border: 3px solid #f88379;
   transition: background-color 0.2s ease-in-out;
}
.maleGenderButton button:hover {
   background-color: #7393b3;
}
.femaleGenderButton button:hover {
   background-color: #f88379;
}
.maleGenderButton.active {
   background-color: #7393b3;
   border-radius: 14px;
   transition: background-color 0.2s ease-in-out;
}
.femaleGenderButton.active {
   background-color: #f88379;
   border-radius: 14px;
   transition: background-color 0.2s ease-in-out;
}

#product1 .pro-container {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
   gap: 45px;
   justify-items: center;
}
#product1 .newly-products-con {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
   gap: 45px;
   justify-items: center;
}

#product1 .pro {
   width: 12%;
   min-width: 250px;
   padding: 10px 12px;
   border: 1px solid #72c2ba;
   border-radius: 25px;
   cursor: pointer;
   box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.308);
   text-align: center;
   transition: box-shadow 0.2s ease;
   position: relative;
   background-color: var(--secondary-background-color);
}
#product1 .pro a {
   text-decoration: none;
   color: inherit;
}
#product1 .pro:hover {
   box-shadow: var(--hover-card-color);
}
#product1 .pro .product-image {
   width: 100%;
   border-radius: 20px;
   min-width: 250px;
   max-width: 300px;
}
#product1 .pro .des {
   text-align: start;
   position: relative;
}
#product1 .pro h4 {
   font-size: 1.2rem;
   margin: 6px 0px;
}
#product1 .pro h5 {
   font-size: 1.3rem;
   margin: 6px 0px;
   text-align: center;
   color: var(--text-color);
}
#product1 .pro span {
   color: rgb(133, 132, 132);
   margin-bottom: px;
}
#product1 .pro .shopping-cart-button {
   display: flex;
   justify-content: center;
   position: absolute;
   bottom: 50px;
   right: 7px;
}
/* * When shopping-cart-button is clicked */
#product1 .pro .shopping-cart-button.add-to-cart-button-animation {
   animation: click-animation 0.5s;
}
#product1 .pro .shopping-cart-button img {
   height: 30px;
}
#product1 .pro .star {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-bottom: 20px;
   margin-top: 20px;
}
#product1 .pro .star .stars-rating {
   font-size: 20px;
   cursor: pointer;
   transition: background-image 0.5s ease-in-out;
   color: var(--star-color);
}
#product1 .pro .star .stars-rating.active {
   display: inline-block;
   width: 1.13em;
   height: 1em;
   vertical-align: -0.125em;
   content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%23ffe02f' d='M259.3 17.8L194 150.2L47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103l-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5l105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2L316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0'/%3E%3C/svg%3E");
   transition: background-image 0.5s ease-in-out;
}
#product1 .pro .star .stars-rating:hover {
   filter: drop-shadow(4px 7px 5px rgba(0, 0, 0, 0.795));
}

/* .BANNER */
.banner-content {
   padding: 28px 0px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 25px;
   text-align: center;
}
.banner-content h4 {
   margin: 0;
   color: rgb(53, 239, 249);
   text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.932);
   font-weight: 800;
   font-size: 1.9rem;
}
.banner-content h2 {
   font-weight: 900;
   font-size: 2rem;
}
.banner-content button {
   padding: 8px 13px;
   font-size: 1.4rem;
   background-color: transparent;
   font-weight: 900;
   border: solid rgb(155, 155, 155) 3px; /* Make the border transparent */
   border-radius: 8px;
   cursor: pointer;
   transition: background-color 0.4s, border-color 0.4s; /* Add transition for the border color */
   box-sizing: border-box; /* Add this line */
}

.banner-content button:hover {
   border-color: rgb(155, 155, 155); /* Change the border color on hover */
   background-color: rgb(155, 155, 155);
}

.discount-amount {
   color: rgb(131, 3, 3);
}
#banner {
   height: auto;
   min-height: 14vh;
   min-width: 19vh;
   width: 100%;
   background-image: url("https://as2.ftcdn.net/v2/jpg/02/85/86/83/1000_F_285868337_UJwkW55vZwHyfzXVEGc54l4mskmXed8y.jpg");
   background-position: top;
}

/* .Many Banners */
#banners {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   gap: 30px;
   justify-content: space-between;
   text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.932);
}
.banner-con {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: first baseline;
   background-image: url("https://elagia.com/cdn/shop/files/head_banner_3.jpg?v=1686737655&width=1800");
   background-size: cover;
   background-position: 1%;
   flex: 1;
   height: 35vh;
   padding: 30px 20px;
   border-radius: 5px;
}
.banner-con2 {
   background-image: url(../img/Banner.jpg);
}
.banner-con h4 {
   color: white;
   font-size: 1.4rem;
}
.banner-con h2 {
   color: white;
   font-size: 1.9rem;
   font-weight: 1000;
}
.banner-con span {
   padding-top: 15px;
   padding-bottom: 40px;
   color: #ebd888;
   font-size: 1.3rem;
   font-weight: 900;
   font-style: italic;
}
#banners .banner-con2 span {
   color: #f1f2c5;
}
.banner-con button {
   cursor: pointer;
   background-color: transparent;
   border: solid 2px rgb(85, 159, 189);
   color: white;
   font-size: 1.37rem;
   padding: 10px 20px;
   width: auto;
   min-width: 20%;
   box-sizing: border-box;
   transition: background-color 0.3s, border 0.8s;
}
.banner-con button:hover {
   background-color: rgb(85, 159, 189);
   border: solid 2px transparent;
   font-size: 1.37rem;
}

/* .BANNER 3 */
#banner3 {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-between;
   gap: 140px;
}
.text-banner {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
   background-image: url("https://allaboutfashionphotography.files.wordpress.com/2014/11/branded-coat-by-burberry-as-women-and-men-outfits-for-winter-and-autumn2.jpg");
   background-size: cover;
   height: auto;
   flex: 1;
   padding: 11px 20px;
   text-shadow: rgba(0, 0, 0, 0.979) 0px 0px 8px;
   cursor: pointer;
   transition: box-shadow 0.3s;
   border-radius: 5px;
}
#banner3 .banner2 {
   background-image: url("https://nhabegarment.com/uploads/Images/tshirt-manufacturer.jpg");
}
#banner3 .banner2 h3 {
   color: white;
}
#banner3 .banner3 h3 {
   color: orange;
}
#banner3 .banner3 {
   background-image: url("https://cdn.runrepeat.com/storage/gallery/post/28953/womenvmenhero-19925083-720.jpg");
   background-position: center;
}
.text-banner:hover {
   box-shadow: 4px -4px 10px rgba(0, 0, 0, 0.308);
}
.text-banner h2 {
   color: white;
   font-weight: 900;
   font-size: 2.4rem;
}
.text-banner h3 {
   color: rgb(28, 124, 250);
   font-size: 1.6rem;
   font-weight: bolder;
   font-style: italic;
}
.text-banner .negative {
   font-size: 2rem;
   font-weight: bolder;
   color: white;
}

/* .NEWSLETTER */
#newsLetter {
   display: flex;
   background-image: url("https://cdn.pixabay.com/photo/2020/08/29/13/02/abstract-design-5527006_1280.jpg");
   background-position: center;
   height: 10vh;
   flex-wrap: wrap;
   align-items: center;
   padding: 15px 40px;
}
.newsletter-con {
   padding: 0px 24px;
   width: 100%;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
}
.newsletter-left h2 {
   color: white;
   font-size: 2.2rem;
   font-weight: 900;
   padding-bottom: 20px;
   text-shadow: rgba(109, 109, 109, 0.979) 0px 0px 8px;
}
.newsletter-left p {
   font-size: 1.06rem;
   color: rgb(168, 141, 141);
   text-shadow: rgba(121, 121, 121, 0.979) 0px 0px 7px;
   font-weight: 700;
}
.newsletter-left .gold-text {
   color: gold;
}
.newsletter-right input {
   font-size: 1.6rem;
   border-radius: 5px 0px 0px 5px;
   width: 20vw;
   padding: 16px 0px 16px 18px;
   border: none;
   outline: none;
   box-sizing: border-box;
}
.newsletter-right input.invalid {
   outline: red 2px solid;
}
.newsletter-right input::placeholder {
   color: rgb(158, 158, 158);
}
.email-invalid {
   position: absolute;
   color: red;
   font-size: 1.2rem;
   padding-top: 10px;
   font-weight: 900;
   filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, 0.986));
}
.newsletter-signedup , .newsletter-already-signedup {
   position: absolute;
   color: white;
   padding-top: 10px;
   font-size: 1.2rem;
   font-weight: 900;
   filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, 0.986));
}
.newsletter-right button {
   font-size: 1.6rem;
   box-sizing: border-box;
   border-radius: 0px 5px 5px 0px;
   padding: 16px 15px;
   margin-left: -12px;
   border: none;
   cursor: pointer;
   background-color: rgb(4, 197, 4);
}

/* .FOOTER */
.footer-con {
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   text-align: center;
   margin-bottom: 4px;
}
.footer-section {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}
.footer-section div {
   font-size: 1.5rem;
   font-weight: 900;
   margin-bottom: 14px;
}
.footer-section span {
   color: rgb(126, 126, 126);
}
.footer-section img {
   width: 4vw;
}
.footer-section .below-contact {
   font-size: 1.2rem;
   margin-bottom: 9px;
}
/* .Social media icons footer */
.footer-follow {
   width: 50%;
}
.social-icons a {
   width: 30px;
   padding-right: 12px;
}
.social-icons .twitter {
   color: #1da1f2;
}
.social-icons .youtube {
   color: #ff0000;
}
.copyright div {
   color: rgb(126, 126, 126);
   font-size: 1.2rem;
   text-align: center;
   align-items: center;
   justify-content: center;
   margin-bottom: 20px;
}

.footer-links a {
   text-decoration: none;
   color: rgb(126, 126, 126);
   cursor: default;
   margin-bottom: 9px;
}
.footer-links span {
   cursor: pointer;
   font-size: 1.3rem;
   font-weight: 700;
}
.footer-links span:hover {
   text-decoration: underline;
}
/* .FOOTER LAST */
.footer-app span {
   font-size: 1.3rem;
   font-weight: 700;
}
.app-download {
   margin: 0px;
}
.app-download img {
   width: 170px;
}
.footer-app .payments-logo {
   width: 100%;
   margin-top: 17px;
}
.footer-app .payments-logo img {
   width: 50px;
   align-items: center;
   justify-content: space-between;
}

/* .DARK MODE */

.mode-con,
.mode-con-mobile {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 60px;
   height: 60px;
   border-radius: 50%;
   cursor: pointer;
   position: relative;
}
.mode-con input,
.mode-con-mobile input {
   position: absolute;
   opacity: 0;
   cursor: pointer;
}
.moon,
.sun {
   font-size: 32px;
   filter: drop-shadow(-4px 4px 4px rgba(68, 68, 68, 0.534));
   position: absolute;
}
.sun {
   transform: scale(0) rotate(-120deg) translate(50%, 70%);
   transform-origin: bottom right;
   filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.74));
}
.moon {
   color: #5c5c5c !important;
}
.theme-transition .moon,
.theme-transition .sun,
.theme-transition .toggle-mode {
   transition: transform 1.7s ease-in-out, background-color 2s;
}
input:checked ~ .moon {
   transform: translate(-50%, 70%) rotate(120deg) scale(0);
}
input:checked ~ .sun {
   transform: scale(100%) translate(0%, 0%) rotate(0deg);
}
.toggle-mode {
   position: absolute;
   display: block;
   width: 60px;
   height: 60px;
   background: #363636;
   border-radius: 50%;
   box-shadow: inset 0px 0px 6px rgba(24, 24, 24, 0.363);
   z-index: -1;
}
input:checked ~ .toggle-mode {
   background-color: rgb(255, 255, 255);
}

/* .LOGIN STYLE */

.login {
   position: relative;
   background-color: transparent;
   padding: 20px 30px;
   border-radius: 20px;
   color: #3f3f3f;
   font-size: 1.3rem;
   cursor: pointer;
   font-weight: 700;
   transition: background-color, text-shadow, color 0.3s ease-in-out;
   z-index: 1;
   border: none; /* Remove existing border */
   outline: none; /* Remove focus outline */
}

.login::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   padding: 4px; /* Adjust this value to the thickness of the border */
   border-radius: 20px; /* Match this to the button's border-radius */
   background: linear-gradient(to right, rgb(46, 49, 146) 0%, rgb(27, 255, 255) 100%);
   -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
   -webkit-mask-composite: xor;
   mask-composite: exclude;
   z-index: -1;
}
.login::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   border-radius: 20px;
   background: linear-gradient(to right, rgb(46, 49, 146) 0%, rgb(27, 255, 255) 100%);
   z-index: -2;
   opacity: 0;
   transition: opacity 0.3s ease-in-out;
}
.login:hover::after {
   opacity: 1;
}

.login:hover {
   background-color: transparent;
   text-shadow: 0px 0px 10px rgba(22, 22, 22, 0.76);
   color: white;
}
@keyframes pop-In-Slowly {
   0% {
      opacity: 0;
   }
   100% {
      opacity: 1;
   }
}
.login-pop-con {
   padding: 80px 50px;
   max-width: 26vw; /* Adjust to a percentage of viewport width */
   width: 90vw; /* Makes the width responsive */
   border-radius: 10px;
   border: solid 2px white;
   background: rgba(235, 235, 235, 0.534); /* Semi-transparent white background */
   backdrop-filter: blur(5px); /* Apply blur to create frosted glass effect */
   -webkit-backdrop-filter: blur(5px); /* Safari support */
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); /* Soft shadow to enhance the effect */
   z-index: 99;
   position: fixed;
   top: 50vh;
   left: 50vw;
   transform: translate(-50%, -50%);
   text-align: center;
   overflow: hidden;
   display: none;
}

#overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
   display: none;
   z-index: 98;
   cursor: pointer;
}
.animateOnce {
   animation: pop-In-Slowly 1s ease-in-out 1; /* the last 1 is how many times should it run */
}
.register-pop-con {
   padding: 80px 50px;
   max-width: 26vw; /* Adjust to a percentage of viewport width */
   width: 90vw; /* Makes the width responsive */
   border-radius: 10px;
   border: solid 2px white;
   background: rgba(235, 235, 235, 0.534); /* Semi-transparent white background */
   backdrop-filter: blur(5px); /* Apply blur to create frosted glass effect */
   -webkit-backdrop-filter: blur(5px); /* Safari support */
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); /* Soft shadow to enhance the effect */
   z-index: 99;
   position: fixed;
   top: 50vh;
   left: 50vw;
   transform: translate(-50%, -50%);
   text-align: center;
   overflow: hidden;
   display: none;
}
.showRegisterBox,
.showLoginBox {
   display: block;
}
.login-pop-con h2,
.register-pop-con h2 {
   font-size: 2.3rem;
   font-weight: 900;
   margin-bottom: 50px;
}
.input-con-login {
   position: relative;
   width: 100%;
}
.input-con-login iconify-icon {
   position: absolute;
   left: 7px;
   top: 50%;
   font-size: 22px;
   transform: translateY(-50%);
   color: rgb(105, 103, 103);
   pointer-events: none;
}
.logindetailsEP {
   display: flex;
   flex-direction: column;
   gap: 25px;
   align-items: center;
   justify-content: center;
}
.login-fields {
   border-radius: 10px;
   width: 100%;
   padding: 10px 10px;
   border: none;
   padding-left: 40px;
   height: 42px;
   box-sizing: border-box;
   line-height: 1.5;
   font-size: 1.1rem;
   font-weight: 600;
}
.floating-label {
   position: absolute;
   top: 50%;
   left: 40px; /* Adjust for icon space */
   transform: translateY(-55%);
   transition: 0.2s ease all;
   color: rgb(105, 103, 103);
   pointer-events: none;
   font-size: 16px;
}
.login-fields:focus + .floating-label, /*? when the input with class .login-fields is focused, the label with class .floating-label will be targeted by this CSS rule.*/
.login-fields:not(:placeholder-shown) + .floating-label {
   /*? :placeholder-shown: This pseudo-class selects input elements that are currently displaying their placeholder text. When an input field contains text, this pseudo-class will not apply. */
   top: -10px; /* Adjust to position label above input */
   font-size: 12px; /* Adjust font size for floating effect */
   color: #3d64ff; /* Adjust label color when focused */
}
.remember-forget {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 20px;
   margin-top: 20px;
}
.remember-forget a,
.no-account a {
   text-decoration: none;
   color: rgb(105, 103, 103);
   font-weight: 800;
}
.remember-forget a:hover,
.no-account a:hover {
   text-decoration: underline;
}
.login-final-button {
   margin-bottom: 20px;
   margin-top: 20px;
}
.login-in-button {
   width: 80%;
   padding: 10px 0;
   border: none;
   border-radius: 10px;
   cursor: pointer;
   background-color: #3d64ff;
   font-weight: 800;
   font-size: 1.12rem;
   color: rgb(240, 240, 240);
}

.close-button {
   position: absolute;
   top: 0px;
   cursor: pointer;
   font-size: 48px;
   right: 0px;
   color: black;
   background: rgba(94, 94, 94, 0.26);
   backdrop-filter: blur(40px); /* Apply blur to create frosted glass effect */
   -webkit-backdrop-filter: blur(5px); /* Safari support */
   border-bottom-left-radius: 20px;
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
   justify-content: center;
}

/* .RESPONSIVE */

@media (width <= 1574px) {
   .feature-box {
      padding: 14px 55px;
      margin: 15px 20px;
   }

   .feature-box img {
      height: 70px;
   }
   .feature-box h4 {
      font-size: 13px;
      padding: 7px 8px;
   }
}
@media (width > 834px) {
   .mode-con-mobile {
      display: none;
   }
   .logincon-mobile {
      display: none;
   }
}
/* .small screen phone */
@media (width <= 834px) {
   /* .homescreen image */
   #hero {
      background-position: top 28% right 40%;
      padding: 0px 0px;
      width: 100vw;
   }
   #navbar {
      display: flex;
      flex-direction: column;
      gap: 9vh;
      align-items: center;
      position: fixed;
      top: 0;
      right: 0;
      height: 100vh;
      width: 70vw;
      background-color: #d9dbe7;
      box-shadow: -10px 15px 40px rgba(0, 0, 0, 0.897);
      border-radius: 40px 0px 0px 40px;
      padding-left: 0;
      justify-content: center;
      margin-top: 0;
      transform: translateX(108%);
      transition: transform 0.5s ease-in-out;
      z-index: 100;
   }
   #navbar.active {
      transform: translateX(0);
      z-index: 100;
   }
   #navbar li a {
      font-size: 1.9rem;
   }
   #navbar li a::after {
      height: 5px;
   }
   #navbar li a.active::after,
   #navbar li a:hover::after {
      content: "";
      background-color: #f0ac2f;
      height: 5px;
      width: 50%;
      bottom: -5px;
      left: 25%;
      position: absolute;
   }
   #mobile a.active::after {
      content: "";
      background-color: #f0ac2f;
      height: 2.8px;
      width: 41.6%;
      bottom: -1.5px;
      left: 37.7%;
      position: absolute;
   }
   /* *Products card */
   #product1 .pro-container {
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
   }
   #product1 .newly-products-con {
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
   }
   .section-p1 {
      padding: 15px 25px;
   }
   #cartID {
      display: none;
   }
   .close-nav-button {
      display: inline-block;
      cursor: pointer;
      position: absolute;
      top: 40px;
      left: 50px;
   }
   .close-nav-button img {
      width: 38px;
   }
   .cart-amount {
      display: none;
   }
   #mobile {
      display: flex;
      align-items: center;
      gap: 40px;
   }
   .cart-con-mobile {
      position: relative;
      cursor: pointer;
   }
   .cart-amount-mobile {
      position: absolute;
      top: -6px;
      right: -10px;
      padding: 2px 8px;
      border-radius: 50%;
      color: white;
      font-size: 1.02rem;
      font-weight: 700;
      z-index: -20;
      background-image: linear-gradient(307deg, #f6ea41 -7% -7%, #f047c7 106% 106%);
      z-index: 1;
   }
   .cart-img {
      padding-bottom: 6px;
   }

   /* *FEATURE BOXES */
   #feature {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
   }
   /* *Footer */
   .footer-section img {
      width: 15%;
   }

   /* *SINGLE PRODUCT */
   #prodetails {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0;
      padding: 0px 5px;
      margin-bottom: 20px;
   }
   #prodetails .single-pro-image {
      width: 100%;
      height: auto;
   }
   #prodetails .single-pro-image #MainImg {
      object-fit: contain;
      height: 70vh;
   }
   #prodetails .about-product-con {
      padding-top: 0;
      width: 100%;
      justify-content: center;
      text-align: center;
   }
   #prodetails .about-product-con .add-value {
      justify-content: center;
      margin-bottom: 34px;
      margin-top: 44px;
   }
   #prodetails .about-product-con h6 {
      padding: 0;
   }
   #prodetails .about-product-con h4 {
      padding: 15px 0px;
   }
   /* *ALL HEROS */
   .hero-blog {
      width: 72%;
      justify-content: center;
      transform: translateX(20%);
      background-position: top 32% right 50%;
   }
   .hero-about {
      width: 72%;
      justify-content: center;
      transform: translateX(20%);
      background-position: top 32% right 50%;
   }
   .hero-contact {
      width: 72%;
      justify-content: center;
      transform: translateX(20%);
      background-position: top 24% right 64%;
   }
   .logincon {
      display: none;
   }
   /* *DARK MODE */
   .mode-con {
      display: none;
   }
}
/* . FULL HD */
@media (width <= 1920px) {
   /* .home background image */
   #hero {
      background-position: top 40% right 100%;
   }
}

/* . 1162px */
@media (width <= 1162px) {
   #hero {
      background-position: top 50% right 40%;
   }
   /* *NEWSLETTER */
   .newsletter-right input {
      font-size: 0.8rem;
   }
   .newsletter-right button {
      font-size: 0.8rem;
   }
   .newsletter-left h2 {
      font-size: 1.6rem;
   }
   .newsletter-left p {
      font-size: 0.87rem;
   }
   /* *BLOG */
   .blog-img {
      width: 32vw;
   }
   /* *Checkout */
   #cart table td:nth-child(1) {
      width: 40px;
      text-align: center;
   }
   #cart table td:nth-child(2) {
      width: 120px;
   }
   #cart table td:nth-child(3),
   #cart table td:nth-child(4),
   #cart table td:nth-child(5),
   #cart table td:nth-child(6) {
      width: 95px;
      text-align: center;
      text-wrap: wrap;
   }

   /* .LOGIN */
   .login-pop-con {
      padding: 80px 40px;
      max-width: 50vw;
      width: 90vw;
   }
}
/* .896px */
@media (width <= 896px) {
   /* *BLOG */
   .blog-img {
      width: 40vw;
   }
   /* *ABOUT US */
   .Who-con {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      height: auto;
   }
   .right-con-about {
      width: 100%;
      margin-top: 30px;
   }
   .left-con-about {
      width: 100%;
      padding-top: 0px;
   }
   .left-con-about h1 {
      font-size: 3rem;
   }
   .left-con-about span {
      overflow-wrap: break-word;
      font-size: 1rem;
      font-weight: 600;
      line-height: 30px;
   }
   /* *Download section */
   .about-app-con {
      gap: 26px;
   }
   .video iframe {
      width: 100%;
      height: 100%;
   }
   /* *Form on Contact */
   #formCon {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: 50px 17.7px;
      gap: 35px;
      flex-direction: column;
   }
   .staff-box {
      display: flex;
      flex-direction: row;
      width: 100%;
      gap: 15px;
      flex-wrap: wrap;
   }
   .form-box {
      width: 100%;
   }
   .left-side-contact {
      width: 100%;
   }

   /* *CHECKOUT CART */
   #cart {
      padding: 0px !important;
      margin-top: 20px;
   }
   #cart .table-scroller {
      overflow-x: auto;
      white-space: nowrap;
      table-layout: fixed;
      width: 100%;
   }
   #cart table {
      table-layout: auto;
      white-space: normal;
      overflow-wrap: break-word;
   }
   #cartTableHeader {
      position: sticky;
      top: 0; /* Adjust top offset as needed */
      z-index: 10;
      transition: background-color 0.4s ease-in-out, opacity 0.4s ease-in-out;
   }
   #cartTableHeader.scrolled {
      position: sticky; /* Becomes sticky after reaching table content */
      background-color: #b9bbc5;
      opacity: 0.84;
      border-radius: 12px;
      transition: background-color 0.4s ease-in-out, opacity 0.2s ease-in-out;
   }

   #cart table thead th,
   #cart table td {
      font-size: 0.9em;
      padding: 15px 10px;
   }
   #cart table thead th {
      padding: 0px 10px;
   }

   #cart table td:nth-child(5) input {
      width: 60%;
      padding: 12px 8px 12px 12px;
      font-size: 1.1rem;
      font-weight: 900;
      background-color: transparent;
      border: solid 1px;
   }
   /* *BELOW CART */
   .below-cart-con {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0px 90px;
      flex-direction: column;
      gap: 35px;
      padding: 0 !important;
   }
   .coupon-side {
      display: flex;
      flex-direction: column;
      width: 100%;
      align-items: center;
   }
   .coupon-side div input {
      width: 100%;
   }
   .total-side {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      border: solid 1px #d3d3d3;
      padding: 20px 10px;
      width: 85%;
   }
}

/* .690px */
@media (width <= 690px) {
   /* *NEWSLETTER */
   #newsLetter {
      padding: 20px 0px;
      height: auto;
   }
   .newsletter-con {
      padding: 0px 24px;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
   }

   .newsletter-right input {
      font-size: 0.7rem;
      padding: 16px 0px 16px 14px;
      width: 40vw;
   }
   .newsletter-right button {
      font-size: 0.7rem;
   }
   .newsletter-left h2 {
      font-size: 1.5rem;
   }
   .newsletter-left p {
      font-size: 0.9rem;
   }
   /* *Download Store images */
   .footer-section img {
      width: 35%;
   }
   /* *BLOG */
   .blog-box {
      flex-direction: column;
   }
   .blog-img {
      width: 60vw;
   }
   #blogSection {
      gap: 87px;
   }
}
/* .506px */
@media (width <= 506px) {
   /* *BLOG */
   .blog-img {
      width: 78vw;
   }

   /* *ALL heros */
   .hero-blog {
      width: 100%;
      background-repeat: no-repeat;
      justify-content: center;

      transform: translateX(0%);
   }
   .hero-about {
      width: 100%;
      background-repeat: no-repeat;
      justify-content: center;

      transform: translateX(0%);
   }
   .hero-contact {
      width: 100%;
      background-repeat: no-repeat;
      justify-content: center;
      background-position: top 24% right 70%;
      transform: translateX(0%);
   }
   /** Banners on home page */
   .banner-con {
      height: auto;
   }
}
/* .364px */
@media (width <= 364px) {
   /* *BLOG */
   .blog-img {
      width: 94vw;
   }
}
/* .1238px */
@media (width <= 1238px) {
   .footer-con {
      justify-content: center;
   }
   /* *CONTACT */
   .contact-info-con {
      display: flex;
      flex-direction: column;
      width: 100%;
      align-items: center;
      justify-content: center;
      padding: 0px;
      gap: 20px;
   }
   .left-side-contact * {
      width: 100%;
      text-align: center;
   }
   .left-side-contact div {
      gap: 20px;
   }
   .right-side-contact {
      width: 94%;
   }
   .left-side-contact div li {
      display: flex;
      flex-direction: column;
      align-items: center !important;
      gap: 0px;
      justify-content: center !important;
   }
}

/* .Dark MODE  */
:root {
   /* Light mode */
   --text-color: black;
   --background-color: white;
   --third-background-color: white;
   --nav-theme-color: #e3e6f3;
   --star-color: black;
   --hover-card-color: 5px 4px 14px rgba(0, 0, 0, 0.404);

   /* Add any other styles you want to change in light mode */
   transition: all 8s ease; /* Add transition for light mode */
}

[data-theme="dark"] {
   /* Dark mode */
   --text-color: white;
   --second-text-color: #808080;
   --third-text-color: rgb(201, 201, 201);
   --background-color: rgb(29, 29, 29);
   --secondary-background-color: rgb(39, 39, 39);
   --third-background-color: rgb(53, 53, 53);
   --nav-theme-color: linear-gradient(40deg, rgba(77, 72, 85, 1) 0%, rgba(163, 153, 178, 1) 100%);
   --star-color: white;
   /* Add any other styles you want to change in dark mode */
   --hover-card-color: 5px 4px 14px rgba(102, 102, 102, 0.404);
   transition: all 8s ease; /* Add transition for light mode */
}
body {
   color: var(--text-color);
   background-color: var(--background-color);
   /* Add any other styles using the variables */
}
input {
   background-color: var(--third-background-color);
   color: var(--third-text-color) !important;
}

textarea {
   background-color: var(--third-background-color);
   color: var(--third-text-color);
}
td {
   color: var(--second-text-color) !important;
}
/* *Nav dark */