@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root{ 
  --black: #000000;
  --midBlack: #292929;
  --white: #ffffff;
  --primary: #639E8C;
  --secondary: #316C5A;
  --tertiary: #2A5C4D;
  --accent: #F2EEE3;
  --gray: #11111180;
}
html{ scroll-behavior: smooth;}
body{ color: var(--black);margin: 0 auto;padding: 0;font-size: 18px;line-height: 1.3;}
*{ margin: 0;padding: 0;box-sizing: border-box;}
.container{ max-width: 1240px;margin-inline: auto;}
button{ background-color: transparent;border: 0;outline: 0;display: block;font-size: 16px;font-family: "Inter", sans-serif;}
a{ text-decoration: none;}
ul{ list-style: none;}
input{font-family: "Inter", sans-serif;}
img, svg{height: 100%; width: 100%;}
.centerized-button-wrap{display: flex; justify-content: center; align-items: center;}

/*~~~~~~~~~~~~~~~~~~~~~~~~~Typography set START~~~~~~~~~~~~~~~~~~~~~~~~~*/
h1{ font-family: "Inter", sans-serif;font-size: 40px;line-height: 1.3;font-weight: 600;margin-block-end: 20px;text-align: center;}
h1.second{ font-family: "Bebas Neue", sans-serif; font-size: 68px; font-weight: 100;text-align: start;line-height: 1.1;}
h2{font-family: "Inter", sans-serif;font-size:25px; line-height: 1.3;font-weight: 500; }
h2.second{font-family: "Bebas Neue", sans-serif; font-size: 55px; font-weight: 100;}
h3{font-family: "Inter", sans-serif;font-size: 20px; line-height: 1.2;font-weight: 600;margin-block-end: 20px; }
h3.second{font-family: "Bebas Neue", sans-serif; font-size: 40px; font-weight: 100;}
h4{font-family: "Inter", sans-serif;font-size: 13px;line-height: 1.2; font-weight: 600; }
h4.second{font-family: "Bebas Neue", sans-serif; font-size: 15px; font-weight: 100;}
p.description{ font-family: "Poppins", sans-serif; color: var(--gray); font-size: 18px;line-height: 1.2;margin-block-end: 50px; }
/*~~~~~~~~~~~~~~~~~~~~~~~~~Typography set END~~~~~~~~~~~~~~~~~~~~~~~~~*/


/*~~~~~~~~~~~~~~~~~~~~~~~~~Button set START~~~~~~~~~~~~~~~~~~~~~~~~~*/
.primary{background-color: var(--primary); padding: 15px 30px; border-radius: 40px; line-height: 1; color: var(--white);font-family: "Inter", sans-serif;}
button.action{width: 290px;background-color: var(--primary); padding: 22px 30px; border-radius: 20px; line-height: 1; color: var(--white);}
.modal-button{background-color: var(--primary); padding: 15px 30px; border-radius: 50px; line-height: 1; color: var(--white);font-family: "Inter", sans-serif;width: 100%;}
/*~~~~~~~~~~~~~~~~~~~~~~~~~Button set END~~~~~~~~~~~~~~~~~~~~~~~~~*/


header{padding-block: 30px;}
header .container{display: flex; gap: 76px;align-items: center; justify-content: space-between;}
header a.logo{background-color: var(--accent); border-radius: 20px;display: flex; align-items: center; justify-content: center; height: auto; width: 130px; flex: 0 0 130px;}
header a.logo img{object-fit: contain;}
nav{display: flex; gap: 15px;align-items: center; justify-content: space-between;width: 100%;}
nav div.search{background-color: var(--accent);border-radius: 30px; width: 100%;padding-inline-start: 40px;position: relative;}
nav div.search i{position: absolute; left: 15px; top: 50%; transform: translateY(-50%); display: flex;}
nav input{ padding: 15px; width: 100%; border: 0px; outline: 0px;background-color: transparent;font-size: 15px;}
nav input::placeholder{color: var(--midBlack);}


/*~~~~~~~~~~~~~~~~~~~~~~~~~Banner CSS START~~~~~~~~~~~~~~~~~~~~~~~~~*/
main h2, main p.description{text-align: center;}
main ul.banner-cards{display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; margin-block: 63px; list-style: none;}
ul.banner-cards li{width: calc((100% - 40px) / 3);position: relative;}
ul.banner-cards li .banner-cards-image{height: 270px; width: 100%;position: relative; border-radius: 20px; overflow: hidden;}
ul.banner-cards li .banner-cards-image::after{content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 70%;background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.7511379551820728) 100%);}
ul.banner-cards li .text{position: absolute; height: auto; width: 100%; left: 0; bottom: 0;padding: 25px 30px;}
ul.banner-cards li .text h3{color: var(--white);}
ul.discover-cards{display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-block: 50px; list-style: none;}
ul.discover-cards li{width: calc((100% - 40px) / 5);position: relative;border-radius: 20px; overflow: hidden;}
ul.discover-cards li::after{content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%;background-color: rgba(0, 0, 0, 0.4)}
ul.discover-cards li .discover-image{height: 123px;width: 100%; border-radius: 20px;position: relative;}
ul.discover-cards li h3{color: var(--white);position: absolute; width: 100%; left: 0; top: 50%;padding: 10px;z-index: 2; transform: translateY(-50%); text-align: center; margin-block-end: 0x;}
/*~~~~~~~~~~~~~~~~~~~~~~~~~Banner CSS END~~~~~~~~~~~~~~~~~~~~~~~~~*/


.popular-section{margin-block-start: 100px;}
.popular-section h2{text-align: center;}
ul.popular-products{display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; margin-block: 63px 100px; list-style: none;align-items: start;}
ul.popular-products li{width: calc((100% - 60px) / 4);border-radius: 20px;display: flex; flex-direction: column; gap: 10px;}
li.explore-cards .card-image{height: 218px;}
li.explore-cards .card-image img{object-fit: cover;}
li.explore-cards .card-name{display: flex; align-items: center;gap: 5px;}
li.explore-cards .card-name p{color: var(--gray);font-size: 10px;font-family: "Poppins", sans-serif;}
li.explore-cards p{font-weight: 300; font-size: 12px;font-family: "Poppins", sans-serif;}
li.explore-cards span{font-family: "Poppins", sans-serif;color: #006BDD;font-size: 12px; display: inline-block;}
li.explore-cards a{font-family: "Poppins", sans-serif;color: #006BDD;font-size: 12px;display: block; line-height: 1.3;word-wrap: break-word;}
li.explore-cards .shop-at{color: var(--gray);font-family: "Poppins", sans-serif;font-size: 12px;}
li.explore-cards.shadow{box-shadow: 1px 1px 10px 0px #00000021; padding: 10px 10px 26px 10px;}
li.explore-cards.shadow .card-image{border-radius: 18px; overflow: hidden;}

.popular-products li.explore-cards.shadow:nth-child(odd) .card-image{height: 300px;}





/* img {block-size:auto; max-inline-size:100%; vertical-align:middle;}
.embed {overflow:hidden; padding-block-start:100%; position:relative;}
.embed--1-2 {padding-top:calc(100% / (1 / 2));}
.embed--2-1 {padding-top:calc(100% / (2 / 1));}
.embed--2-3 {padding-top:calc(100% / (2 / 3));}
.embed > * {height:100%; left:0; object-fit:cover; padding:0.25em; position:absolute; top:0; width:100%;}
.gallery {display:grid; grid-template-columns:repeat(8, 1fr); grid-template-rows:repeat(5, 1fr);}
.gallery__item--h-2 {grid-column-end:span 2;}
.gallery__item--h-3 {grid-column-end:span 3;}
.gallery__item--v-2 {grid-row-end:span 2;}
.gallery__item--v-3 {grid-row-end:span 3;} */


footer{padding-block:44px 22px ; background-color: var(--secondary);}
footer a.logo{background-color: var(--accent); border-radius: 10px;overflow: hidden; display: flex; align-items: center; justify-content: center; height: auto; width: 190px; flex: 0 0 190px; margin-block-end: 25px;}
footer a.logo img{object-fit: contain;}
footer .container{display: flex; gap: 170px;}
.footer-logo-wrapper{flex: 0 0 290px;}
.footer-logo-wrapper p{color: #ffffff;font-family: "Inter", sans-serif; font-size: 12px;font-weight: 300;}
.footer-form{width: 100%; background-color: var(--tertiary); border-radius: 20px;padding: 30px;}
.footer-form .form-wrap{display: flex; gap: 18px;}
.footer-form .form-wrap > div{width: 50%;display: flex; flex-direction: column; gap: 15px;}
.footer-form .form-wrap input, .footer-form .form-wrap textarea{width: 100%;padding: 17px 15px;border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.7); background-color: transparent; outline: none;color: var(--white);}
.footer-form .form-wrap textarea{height: 120px!important;}
.footer-form .form-wrap input::placeholder, .footer-form .form-wrap textarea::placeholder{color: rgba(255, 255, 255, 0.7);font-family: "Inter", sans-serif; }
.form-button{background-color: var(--white);padding: 17px; color: var(--secondary); width: 100%; margin-block-start: 28px; border-radius: 10px; text-transform: capitalize; font-weight: 600;}


.copy-right{background-color: var(--tertiary);padding-block: 26px;font-family: "Inter", sans-serif;}
.copy-right .container{display: flex; justify-content: space-between; align-items: center; gap: 10px;}
ul.social-icon{display: flex;gap: 9px; align-items: center;}
ul.social-icon li{height: 35px; width: 35px;}
ul.social-icon li a{display: flex; align-items: center; justify-content: center; height: 100%; width: 100%;}
ul.social-icon + p{color: var(--white);font-size: 10px; font-weight: 500;}
ul.social-icon + p + p{color: var(--white); font-size: 13px; font-weight: 600;}




.explore-banner{padding-block-start: 300px;position: relative; z-index: 1;margin-block-end: 100px;}
.explore-banner::after{content: ''; position: absolute; top: 0; background-color: var(--white); right: calc((100% / 3) + -20px); width: 21px; height: 100%;}
.explore-banner::before{content: ''; position: absolute; top: 0; background-color: var(--white); right: calc(((100% / 3) + 33.33%) + -20px); width: 21px; height: 100%;}
.explore-banner h1{width: calc(100% / 3); background-color: var(--white);margin-block-end: 0px;padding-block: 30px 10px;display: inline-block;z-index: 1;position: relative;}
.explore-banner .explore-banner-des{width: calc((100% / 3) + 33.33%);background-color: var(--white);position: relative;}
.explore-banner .explore-banner-des::after{content: ''; position: absolute; top: -60px; background-color: var(--white); right: 0; width: 50%; height: 60px;}
.explore-banner .explore-banner-des p{color: #111111; margin-block-end: 30px;font-family: "Inter", sans-serif;}
.explore-banner-img{position: absolute; left: 0; top: 0;height: 100%; width: 100%;z-index: -1;padding-block-end: 90px;}
.explore-banner-img img{object-fit: cover;}




.interests{margin-block-end: 100px;}
.interests h2{text-align: center;}
.interests p{text-align: center;}
.interests-list{display: flex; margin-block-end: 50px;}
.interests-list .interests-card{width: 60%;}
.interests-list .interest-main{width: 40%;position: relative;}
.interests-list .interest-main::after{content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: linear-gradient(180.13deg, rgba(0, 0, 0, 0) 50%, #0B0B0B 99.89%);}
.interests-list .interest-main div{position: absolute; align-items: center; left: 0; bottom: 0;padding: 0px 40px 40px 40px; z-index: 1;display: flex; gap: 10px; justify-content: space-between;width: 100%;}
.interests-list .interest-main div h3{ margin-block-end: 0px;color: var(--white);}
.interests-list .interest-main div button{display: flex;align-items: center; gap: 10px; font-size: 20px; font-weight: 400; font-family: "Bebas Neue", sans-serif; color: var(--white); padding: 14px 30px; border: 1px solid var(--white);}
.interests-list .interest-main div button svg{width: 19px; height: 10px;}
.interests-list ul{display: flex; flex-wrap: wrap;}
.interests-list ul li{height: 395px; width: 50%;position: relative;}
.interests-list ul li::after{content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: linear-gradient(180.13deg, rgba(0, 0, 0, 0) 50%, #0B0B0B 99.89%);}
.interests-list ul li h3{position: absolute; left: 0; bottom: 0;padding: 0px 40px 40px 40px; color: var(--white);z-index: 1; margin-block-end: 0px;width: 100%;}




.explore-section{margin-block-end: 100px;}
.explore-section ol{ list-style: none;display: flex; flex-direction: column; gap: 50px;}
.explore-section ol li.explore-different-product{width: 100%;display: flex; gap: 20px;}
.explore-section ol li.explore-different-product:nth-child(even){flex-direction: row-reverse;}
.explore-section ol li.explore-different-product .explore-main{width: 30%;}
.explore-section ol li.explore-different-product .explore-card{width: 70%;}
.explore-products{display: flex; list-style: none; column-gap: 20px; flex-wrap: wrap; row-gap: 36px;}
.explore-products li{width: calc((100% - 40px) / 3); display: flex; flex-direction: column; gap: 10px;}
.hashtag span:nth-child(1){background-color: #F1F1F1; font-size: 8px; color: var(--black); padding: 8px 12px; font-weight: 500; border-radius: 3px;}
.divider{height: 1px; width: 100%; background-color: #D9D9D9;}
.explore-name{width: 200px;}
.explore-name-wrap{display: flex; justify-content: space-between; gap: 20px; margin-block-end: 90px;padding-inline: 50px;}
.explore-name-wrap h2{margin-block-end: 50px;}
.explore-name img{object-fit: cover;}




.modal {display:none; position:fixed; z-index:99; left:0; top:0; width:100%; height:100%; overflow:auto; background-color:rgba(0, 0, 0, 0.6);}
.modal-content {background-color:white; margin: auto; padding:20px; border:1px solid #888; width:92%; max-width:960px; border-radius:20px; box-shadow:0 4px 8px rgba(0, 0, 0, 0.2); animation:slide-down 0.4s;position: relative; }
.modal-wrapper{display: flex; gap: 20px; }
.modal-img{width: 60%; height: 346px; border-radius: 10px; overflow: hidden;}
.modal-tag span{font-family: "Inter", sans-serif;color: #006BDD;font-size: 12px; display: inline-block;}
.modal-details{width: 40%; display: flex; flex-direction: column; gap: 25px;}
.modal-details h2{margin-block-start: 15px;}
.modal-details p{font-family: "Inter", sans-serif;font-size: 12px;  display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden;}
.modal-details div a{font-family: "Inter", sans-serif;font-size: 12px; color: var(--black); display: flex; align-items: center; font-weight: 500; }
.show-wrap{display: flex; align-items: center;margin-block-start: 10px;}
.show-wrap svg{height: 7px; width: 19px;}
.modal-details p.expanded {-webkit-line-clamp: inherit;}
.close-btn {color:var(--black); font-size:40px; font-weight:bold; cursor:pointer; transition:color 0.3s;position: absolute; right: 12px; top: 0;}
.close-btn:hover, .close-btn:focus {color:black;}


a.scrollto-bottom{display: flex; gap: 15px;position: fixed; right: 23px; bottom: 40px;z-index: 2; cursor: pointer;align-items: center; }
.scrollto-hand{height: 83px; width: 83px; display: flex; justify-content: center; align-items: center; background-color: var(--primary);padding: 13px; border-radius: 50%;box-shadow: 5px 5px 20.4px 0px #00000040;
}
.scrollto-hand img, .scrollto-arrow img{object-fit: contain;}
.scrollto-arrow{height: 30px; width: 30px;}


@keyframes slide-down {
  from { top: -300px; opacity: 0; }
  to { top: 0; opacity: 1; }
}

ul.search-result {
  position: absolute;
  top: 52px;
  z-index: 999;
  background: #fff;
  padding: 20px;
  max-height: 250px;
  overflow-y: scroll;
  width:100%;
  opacity:0;
}
ul.search-result li{
font-size: 17px;
padding: 5px;
border-bottom: 1px solid;
}