@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@500&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

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

:root{
	--primary-heading-font-size:58px;
	--secondary-heading-font-size:40px;
	--sm-font-size:14px;
	--medium-font-size:24px;
	--font-color:#252B42;
	--background-color: #2DC071;
	--icon-width:16px;
	--icon-height:16px;
	--white-color:#fff;
	--font-weight-bold:700;

}

html {
	scroll-behavior: smooth;
}

body {
	font-family: "Montserrat", sans-serif;
}

.flex {
	display: flex;
}

.flex-wrap {
	flex-wrap: wrap;
}

.relative {
	position: relative;
}

.flex-direction-col {
	flex-direction: column;
}

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

.jcb {
	justify-content: space-between;
}

.jcc {
	justify-content: center;
}

.secondary-txt {
	font-size: var(--sm-font-size);
}

.font-bold {
	font-weight: var(--font-weight-bold);
}

.text-primary {
	color: var(--font-color);
}

.icons {
	width: var(--icon-width);
	height: var(--icons-primary-height);
	fill: var(--white-color);
}

.zero-font-size{
	font-size: 0;
}

.icon-wrapper{
	gap: 5px;
}

.ul-li{
	gap: 15px;
}

.transform-capitalize {
	text-transform: uppercase;
}

.text-secondary {
	color: #737373;
}

.announcement{
	background-color: #252B42;
	padding: 19px 34px 15px 34px;
}

.announcement-bar {
	color: var(--white-color);
	font-size: var(--sm-font-size);
	font-weight: var(--font-weight-bold);
	max-width: 1440px;
	margin-inline: auto;
}

@media (max-width:992px) {
	.announcement{
		display: none;
	}
}

.spacing-wrapper {
	gap: 20px;
}

.social-links{
	gap: 10px;
}

.universal-color {
	color: #fff;
}

.main-header{
	padding: 28px 30px;
}

.header {
	flex-wrap: nowrap;
	font-size: 0;
	max-width: 1440px;
	margin-inline: auto;
	align-items: center;
}

.mobile-menu-icon {
	display: none;
}

.brand-logo {
	font-size: var(--medium-font-size);
	text-decoration: none;
}

.header-links {
	gap: 120px;
}

@media (max-width: 992px) {
	.nav-item-hide {
		display: none;
	}

	.nav-links {
		transform: translateX(-100%);
		width: 100%;
		height: 100%;
		position: fixed;
		top: 55px;
		left: 0;
		z-index: 999;
		opacity: 0;
		background-color: #fff;
    display: flex !important;
		justify-content: center;
    flex-direction: column;
		transition: transform 0.4s ease-in, opacity 0.2s linear;
	}

	.active-menu {
		transform: translateX(0);
		display: block;
		opacity: 1;
	}

	.mobile-menu-icon {
		display: block;
		cursor: pointer;
	}

	.mbl-icon path {
		fill: var(--font-color);
	}

	.counter {
		color: var(--font-color) !important;
	}

	.nav-links li a {
		font-size: 30px;
		font-weight: 400;
		margin-bottom: 0;
	}
}

.anchor-links {
	text-decoration: none;
}

ul li a {
	text-decoration: none;
	display: inline-block;
	position: relative;
	transition: all 0.3s ease-in;
	padding-bottom: 3px;
}

ul li a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	background-color: #737373;
	z-index: 1;
	transition: all .3s ease-in;
}

ul li a:hover::after {
	width: 100%;
}

.list-style {
	list-style: none;
}

.header-text {
	color: #23A6F0;
}

.header-icons {
	gap: 6px;
}

.counter {
	font-size: 12px;
	margin-left: 5px;
}

.primary-btn {
	padding: 15px 18px;
	max-width: 221px;
	text-align: center;
	background-color: var(--background-color);
	border: 0;
	border-radius: 5px;
	cursor: pointer;
	font-size: 24px;
	text-decoration: none;
	position: relative;
	display: inline-block;
	z-index: 1;
	transition: all 0.3s ease-in;
}

.primary-btn::after {
	position: absolute;
	content: "";
	width: 0;
	height: 100%;
	top: 0;
	right: 0;
	z-index: -1;
	background-color: #28ae67;
	border-radius: 5px;
	transition: all 0.3s ease;
}

.primary-btn:hover:after {
	left: 0;
	width: 100%;
}

.primary-btn:active {
	top: 2px;
}

.h1 {
	font-size: var(--primary-heading-font-size);
	line-height: .75;
	width: 565px;
}

@media (max-width:768px){
	.primary-btn{
		margin-inline: auto;
	}

	.h1{
		max-width: 250px;
		font-size: 40px;
		margin-inline: auto;
		line-height: 50px;
	}
}

.collection {
	max-width: 1440px;
	margin-inline: auto;
}

.collection-info__text {
	color: #fafafa;
	font-size: 20px;
	max-width: 396px;
	line-height: 30px;
}

@media (max-width:768px) {
	.collection-info__text {
		max-width: 291px;
    margin-inline: auto;
	}
}
.card-txt {
	max-width: 239px;
	overflow: hidden;
	transition: all .3s ease-in;

	&:hover {
		transform: translateY(-15px);
	}
}

.card-txt-image-div{
	max-width: 239px;
	overflow: hidden;
	object-fit: cover;
}

.collection-info {
	max-width: 509px;
	max-width: 100%;
	gap: 30px;
	position: absolute;
	top: 46%;
	transform: translateY(-50%);
  left: 197px;
	z-index: 1;
}

@media (max-width:992px) {
	.collection-info {
		left: 140px;
	}
}

@media (max-width:768px) {
	.collection-info {
		left: 51px;
	}
}

.footer-icons {
	fill: #23A6F0;
	width: 23px;
	transition: all 0.3s ease-in;
}

.footer-icons:hover {
	fill: #2f45a0;
}

.featured-collection-card-title {
	padding-top: 25px;
	padding-bottom: 10px;
}

.product-price {
	gap: 5px;
	padding-block: 10px 12px;
}

.product-price-primary {
	color: #BDBDBD;
}

.product-price-secondary {
	color: #23856D;
}

.tranparent-div {
	width: 16px;
	height: 16px;
	border-radius: 50%;
}

.tranparent-primary {
	background: #23A6F0;
}

.tranparent-orang {
	background: #23856D;
}

.tranparent-yellow {
	background: #E77C40;
}

.tranparent-dark {
	background: #252B42;
}

.tranparent-shapes {
	gap: 6px;
}

.featured {
	padding-block: 48px;
}

.featured-collection {
	gap: 80px;
	max-width: 1050px;
	margin-inline: auto;
}

.featured-collection-card {
	gap: 30px;
	flex-wrap: wrap;
}

.featured-collection-title {
	font-size: 20px;
}

.featured-collection-heading {
	font-size: var(--medium-font-size);
}

.featured-collection-description {
	font-size: var(--sm-font-size);
	letter-spacing: 0.2px;
}

.classic-collection {
	background:#23856D;
	padding-top: 112px;
	max-width: 1440px;
	margin-inline: auto;
}

.classic-product-text {
	max-width: 509px;
	gap: 30px;
}

.classic-product-title {
	font-size: var(--primary-heading-font-size);
	color: var(--white-color);
	line-height: 1.37;
}

@media (max-width:768px) {
	.classic-product-title{
		font-size: 40px;
	}
}

.classic-product-description {
	max-width: 341px;
	font-size: var(--sm-font-size);
	color: var(--white-color);
	line-height: 1.4;
}

.classic-product-buttons {
	gap: 34px;
}

.classic-product-price {
	font-size: var(--medium-font-size);
	color: var(--white-color);
}

.classic-product-content {
	gap: 63px;
	max-width: 1050px;
    flex-wrap: nowrap;
    margin-inline: auto;
    margin-top: auto;
}

 @media (max-width:992px) {
	.classic-product-content{
		flex-direction: column;
	}
 }

.classic-product-right {
	top: 330px;
}

.text-img {
	max-width: 725px;
	max-width: 100%;
}

.checkout-container-text {
	gap: 30px;
}

.checkout-container-title {
	font-size: 40px;
	max-width: 375px;
}

.checkout-container-description {
	max-width: 383px;
	font-size: 20px;
	line-height: 1.5;
}

.checkout-heading {
	color: #BDBDBD !important;
}

@media (max-width:768px) {
	.checkout-container-title{
		max-width: 230px;
    margin-inline: auto;
	}

	.checkout-container-description {
		max-width: 231px;
	}
}

.checkout-container {
	gap: 60px;
	max-width: 1050px;
	margin-inline: auto;
}

.buying-btn {
	gap: 10px;
}

.new-collection {
	max-width: 1050px;
	gap: 80px;
	margin-inline: auto;
	padding-block: 112px;
}

.new-collection-info{
	align-items: center;
	gap: 10px;
}

.new-collection-subTitle {
	font-size: var(--sm-font-size);
	color: #23A6F0;
}

.new-collection-title {
	font-size: var(--medium-font-size);
}

.new-collection-description {
	max-width: 469px;
	font-size: 20px;
	margin-inline: auto;
	line-height: 1;
	text-align: center;
}

.featured-collection-content {
	max-width: 348px;
	box-shadow: 0px 2px 4px 0px #0000001A;
	transition: all .3s ease;

	&:hover {
		transform: translateY(-10px);
	}
}

.featured-collection-img {
	max-width: 348px;
	object-fit: cover;
	overflow: hidden;
}

.new-collection-img {
	width: 100%;
}

.new-collection-items-list {
	gap: 15px;
	font-size: 12px;
	list-style: none;
}

.google-link {
	color: #23A6F0;
}

.description-details-heading {
	font-size: 20px;
	font-weight: 400;
}

.featured-collection-info {
	padding: 25px;
	gap: 10px;
}

.featured-collection-info-text {
	max-width: 280px;
	font-size: var(--sm-font-size);
	line-height: 20px;
	font-weight: 400;
}

.post-img {
	width: 16px;
	height: 16px;
}

.post-txt {
	font-size: 12px;
}


.timer {
	gap: 10px;
}

.trading {
	gap: 10px;
}

.more-details-link {
	gap: 10px;
	text-decoration: none;
	font-size: 12px;
}

.more-details-link span {
	font-size: 0;
}

.featured-collections {
	gap: 20px;
	justify-content: center;
}

.new-product {
	color: var(--white-color);
	background-color: #E74040;
	padding: 5px 10px 5px 10px;
	position: absolute;
	top: 20px;
	left: 20px;
	font-weight: var(--font-weight-bold);
	border-radius: 5px;
	font-size: 20px;
	animation-name: myAnimation;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

@keyframes myAnimation {
	0% {
		opacity: 50%;
	}
	50% {
		opacity: 60%;
	}
	70% {
		opacity: 70%;
	}
	80% {
		opacity: 80%;
	}
	100% {
		opacity: 100%;
	}
}

.brand-info {
	background-color: #FAFAFA;
	padding-block: 40px;
}

.brand-info-container {
	justify-content: space-between;
	max-width: 1050px;
	margin-inline: auto;
}

.footer-link-list {
	font-size: 0;
	gap: 20px;
	flex-wrap: nowrap;
}

.categories-container {
	justify-content: center;
	gap: 30px;
	flex-wrap: wrap;
}

.men-categories{
	max-width: 551px;
	object-fit: cover;
	overflow: hidden;
	transition: all .3s ease-in;

	&:hover {
		transform: scale(1.01);
	}
}

.categories-container-btn {
	position: relative;
	position: absolute;
	bottom: 26px;
	left: 31px;
	text-transform: uppercase;
	padding: 12px 66px;
	background-color: var(--white-color);
	border: 0;
	font-size: 16px;
	transition: all 0.3s ease-in;
	display: inline-block;
	z-index: 1;
}

.categories-container-btn::after {
	content: "";
	width: 0;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	z-index: -1;
	background: #e0e0e0;
	transition: all .3s ease;
}

.categories-container-btn:hover::after {
	left: 0;
	width: 100%;
}

.women-categories {
	object-fit: cover;
	overflow: hidden;
	transition: all .3s ease-in;

	&:hover {
		transform: scale(1.02);
	}
}

.women-collection-btn {
	padding: 12px 33px;
	left: 21px;
	bottom: 18px;
}

.accesories-categories {
	overflow: hidden;
	transition: all .3s ease-in;

	&:hover {
		transform: scale(1.02);
	}
}

.kids-categories {
	overflow: hidden;
	transition: all .3s ease-in;

	&:hover {
		transform: scale(1.02);
	}
}

.accesories-btn {
	padding: 12px 26px;
	left: 14px;
}

.product-categories{
	background: #fafafa;
	padding-block: 80px;
}

.categories {
	gap: 48px;
	max-width: 1050px;
	margin-inline: auto;
}

.categories-heading {
	font-size: var(--medium-font-size);
}

.categories-paragraph {
	font-size: var(--sm-font-size);
	font-weight: var(--header-width-color);
	line-height: 1.4;
}

.categories-col-container {
	gap: 16px;
}

.kids-btn{
	padding: 12px 40px;
	left: 18px;
}

.collection-bg-768 {
	display: none;
}

.footer-nav-container {
	gap: 30px;
	flex-wrap: wrap;
	max-width: 1050px;
	padding: 50px 0;
	margin-inline: auto;
}

@media (max-width:768px) {
	.footer-nav-container {
		margin-inline: 0;
		flex-direction: column;
		padding: 70px 46px;
	}
}

.footer-nav__anchor {
	gap: 20px;
}

.input,.Subscirbe-btn {
	border: 1px solid #E6E6E6;
	cursor: pointer;
}

.Subscirbe-btn {
	background: #23A6F0;
	color: var(--white-color);
	font-size: var(--sm-font-size);
	position: absolute;
	right: 0;
	top: 64px;
	border-radius: 0 5px 5px 0;
	padding: 14px 20px;
	transition: all 0.3s ease-in;
}

.Subscirbe-btn:hover {
	background: #252B42;
}

.input::placeholder {
	font-size: 14px;
	color: #737373;
	text-transform: capitalize;
}

.input {
	border-radius: 5px;
	width: 300px;
	padding: 15px 20px;
	background: #FAFAFA;
}

 @media (max-width:768px) {
	.input{
		width: 100%;
	}
}

.footer-heading {
	font-size: 20px;
	padding-bottom: 20px;
}

.copy-right {
	background: #FAFAFA;
	padding-block: 25px;
}

.cp-R {
	max-width: 1050px;
	margin-inline: auto;
}

@media (max-width:768px) {
	.copy-right {
		padding: 0;
		padding-block: 25px;
		padding-inline: 93px;
		text-align: center;
	}
}

 .featured-collection-text {
	max-width: 699px;
	text-align: center;
	gap: 10px;
}

 .categories-info {
	max-width: 607px;
	text-align: center;
	gap: 10px;
}

 .svg-icon {
	width: 16px;
	height: 16px;
	fill: var(--font-color);
}

.h5{
	color: var(--white-color);
	font-size: 16px;
}

.collection-bg.active {
	display: block;
}

.slider-buttons {
	display: flex;
	justify-content: center;
	gap: 5px;
	position: absolute;
	left: 40%;
	transform: translatey(50%);
	bottom: 50px;
}

.slider-btn {
	width: 62px;
	height: 10px;
	background-color: var(--white-color);
	border: none;
	cursor: pointer;
	transition: background-color 0.3s;
	padding: 0;
}

.slider-btn.active {
	background-color: #ffffff7d;
}

.slider-btn:hover {
	opacity: 50%;
}

.lore-text {
	font-size: 12px;
}

.checkout-container-txt {
	color: #BDBDBD;
}

.buy-btn{
	font-size: var(--sm-font-size);
	text-transform: uppercase;
	color: #FFF !important;
	padding: 15px 40px;
}

.read-me-btn {
	background: none;
	color: #2DC071;
	width: 171px;
	padding: 15px 40px;
	border-radius: 10px;
	cursor: pointer;
	background-color: #fff;
	position: relative;
	z-index: 1;
	display: inline-block;
	font-size: var(--sm-font-size);
	border: 1px solid currentColor;
	transition: all 0.3s ease-in;
}

.read-me-btn::after {
	content: "";
	position: absolute;
	width: 0;
	height: 100%;
	right: 0;
	top: 0;
	z-index: -1;
	border-radius: 10px;
	background-color: var(--background-color);
	transition: all 0.3s ease;
}

.read-me-btn:hover:after {
	width: 100%;
}

.read-me-btn:hover {
	color: #fff;
	border: 1px solid currentColor;
}

.read-me-btn:active {
	top: 2px;
}

@media (max-width:768px) {
	.buy-btn {
		background-color: #23A6F0;
		max-width: 151px;
	}

	.buy-btn,.read-me-btn {
		border-color: #23A6F0;
		font-size: 14px;
		margin-inline: auto;
		max-width: 100%;
	}

	.read-me-btn {
		color: #23A6F0;
	}

}

@media (max-width:1440px){
	.swiper-button-next{
		top: 283px !important;
		width: 24px !important;
	}

	.swiper-button-prev{
		top: 283px !important;
		width: 24px !important;
	}

}

@media (min-width:1920px) {
	.collection-info {
		left: 25%;
	}
}

@media (max-width:768px) {
	.collection-info {
		top: 48%;
	}
}

.details-arrow{
	width: 10px;
}

@media (max-width:1040px) {
	.featured-collection-card {
		justify-content: center;
		flex-wrap: wrap;
	}

	.checkout-container {
		flex-direction: column-reverse;
		padding-top: 120px;
	}

	.classic-product-text {
		max-width: 100%;
		align-items: center;
	}

	.product-designer {
		padding: 0;
	}

}

@media (max-width:768px) {
	.featured-collections{
		flex-direction: column;
	}

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

	.classic-product-description {
		margin-inline: auto;
	}

	.classic-product-buttons,.featured-collection-card,.buying-btn,.categories-container {
		flex-direction: column;
	}

	.checkout-container-text,.collection-info,.categories {
		text-align: center;
	}

	.new-collection {
		text-align: center;
		padding: 41px;
	}

	.featured-collections {
		text-align: start;
	}

	.categories-container {
		align-items: center;
		width: 100%;
		max-width: 100%;
	}

	.categories-col-container{
		width: 100%;
	}

	.product-categories, .featured-collection {
		padding: 41px;
	}

	.men-categories,.women-categories,.accesories-categories,.kids-categories {
		width: 100%;
		max-width: 100%;
		overflow: hidden;
	}

	.collection-bg-768 {
		display: block;
		width: 100%;
	}

	.featured-collection-card, .card-txt {
		width: 100%;
		max-width: 100%;
	}

	.card-txt-image-div{
		max-width: 100%;
		width: 100%;
	}

	.card-img, .categories-container-image {
		width: 100%;
	}

	.header-links {
		width: 100%;
		flex-wrap: nowrap;
	}

	.brand-info-container{
		flex-direction: column;
	}

	.brand-info-container {
		gap: 24px;
		align-items: flex-start;
	}

	.brand-info {
		padding: 44px;
	}

	.featured-collection-text {
		max-width: 279px;
	}

	.categories-paragraph {
		max-width: 196px;
	}


	.responsive1-768 {
		content: url(../assets/images/newitems/newItems.svg);
		width: 100%;
	}

	.responsive2-768 {
		content: url(../assets/images/newitems/newItemsTwo.svg);
		width: 100%;
	}

	.responsive3-768 {
		content: url(../assets/images/newitems/newItemsThree.svg);
		width: 100%;
	}

	.collection-bg.active {
		display:none;
	}

	.slider-buttons {
		display: none;
	}

	.classic-collection-btn {
		width: 171px;
		padding: 15px;
		font-size: var(--sm-font-size);
	}

	.swiper {
		height: 546px !important;
	}

	.swiper-pagination{
		display: none !important;
	}

	.footer-nav {
		flex-direction: column;
    align-items: flex-start;
    gap: 20px;
	}
}