@font-face {
	font-family: Apple;
	src: url("Fonts/sf-pro-display_regular.ttf");
}

* {
	padding: 0;
	margin: 0;
	font-family: Apple;
	/* background-color: black; */
}

#main {
	position: relative;
	overflow: hidden;
	height: 564vh;
}

#page1 {
	position: relative;
	height: 100vh;
	width: 100vw;
	background-color: rgb(255, 255, 255);
	/* background-color: white; */
}

#page2 {
	position: relative;
	width: 100vw;
	height: 100vh;
	background-color: white;
}

/* navbar1 */
nav {
	height: 60px;
	background-color: rgb(21, 20, 20);
	width: 100vw;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	color: white;
	position: fixed;
	z-index: 99;
	padding-left: 14px;
}

/* .nav-logo img{
    height: 44px;
    width: 44px;
} */
.nav-items {
	display: contents;
}
.nav-items a {
	text-decoration: none;
	color: wheat;
}

.nav-items a:hover {
	color: white;
}

.nav-items i {
	padding: 8px;
	color: wheat;
	cursor: pointer;
}

.nav-items i:hover {
	color: white;
}

/* navbar1 end */

/* nav2 */
.nav2 {
	color: white;
	background-color: #1d1d1f;
	height: 45px;
	margin: auto;
	width: 100vw;
	padding-left: 7px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 14px;
	padding-top: 45px;
}

.nav2 a {
	color: #2997ff;
	padding: 5px;
	text-decoration: none;
}
/* nav2 end */

.subnav {
	height: 100vh;
	width: 100vw;
	display: none;
}

/* subnav-menu */

/* end */
/* hero-section img */
.hero-section {
	height: 80vh;
	width: 100vw;
	color: rgb(255, 255, 255);
	/* display: flex;
    justify-content: center;
    flex-direction: column; */
	/* background-color:black; */
	background-image: url("../iphone15black.jpg");
	background-position: center;
	overflow: hidden;
	position: relative;
	margin: 0px !important;
}

.hero {
	background-size: cover;
}

.hero-section-img {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* .hero-section-img img{
    height: 365px;
    width: 1520px;
} */

.hero-section-p {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	color: white;
	position: absolute;
	top: 11%;
	gap: 10px;
}

.hero-section-p h2 {
	font-size: 4vw;
}

.hero-section-p h3 {
	font-size: 2vw;
}

.hero-section2 {
	margin: 5px;
	background-image: url("../iphone15white.jpg");
}
.hero-section3 {
	padding-top: 3px;
	background-image: url("../applewatchblack.jpg");
	background-size: cover;
}

.text1 {
	color: black;
}

.links {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	font-size: 21px;
}

.links2 {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 20px;
	line-height: 1px;
}

.links a {
	color: #2997ff;
	text-decoration: none;
}

.links a:hover {
	text-decoration: underline;
}

.hero-section4 {
	width: 100%;
	display: flex;
	/* padding-top: 3px; */
}

.section4-1 {
	width: 50%;
	background-image: url("../applewatchseries.jpg");
	background-repeat: no-repeat;
	margin: 3px;
}

.section4-2 {
	background-image: url("../card1.jpg");
	width: 50%;
	margin: 3px;
}
.text3 {
	color: black;
}

.section5-1 {
	width: 50%;
	background-image: url("../mac1.jpg");
	background-repeat: no-repeat;
	margin: 3px;
}

.section5-2 {
	width: 50%;
	background-image: url("../ipad1.jpg");
}

.text4 {
	color: black;
}

.text4 p {
	font-size: 20px;
	line-height: 3px;
}

.section6-1 {
	width: 50%;
	background-image: url("../card4.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	margin: 3px;
}

.section6-2 {
	width: 50%;
	background-image: url("../card5.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}

.text5 {
	color: black;
	font-size: 20px;
}

.text6 {
	color: white;
	font-size: 20px;
}

/* sliding window css */
.slider {
	margin: 3px;
	background-color: #ffffff;
	height: 80vh;
	width: 100%;
}

.swiper {
	width: 100%;
	height: 100%;
}

.swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #b42929;
	display: flex;
	justify-content: center;
	align-items: center;
}

.swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.swiper-slide {
	width: 60%;
}

.swiper-button-next {
	padding-right: 30px;
}

.s1 {
	background-image: url("../s1.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}

.s2 {
	background-image: url("../s2.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}
.s3 {
	background-image: url("../s3.jpg");
	background-repeat: no-repeat;
	width: 100%;
	background-size: cover;
}
.s4 {
	background-image: url("../s4.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}
.s5 {
	background-image: url("../s5.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}

.floating-bg {
	position: relative;
	width: 100%;
	height: 600px; /* or full viewport height */
	background: #fafafa; /* very light gray */
	overflow: hidden;
}

.floating-bg .item {
	position: absolute;
	max-width: 120px;
	opacity: 0.9;
	filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.1));
	animation: floatUpDown 6s ease-in-out infinite alternate;
}

/* Position each item differently */
.item1 {
	top: 10%;
	left: 20%;
	animation-delay: 0s;
}
.item2 {
	top: 30%;
	left: 70%;
	animation-delay: 2s;
}
.item3 {
	top: 60%;
	left: 40%;
	animation-delay: 4s;
}

/* Float animation: subtle up/down movement */
@keyframes floatUpDown {
	0% {
		transform: translateY(0px);
	}
	100% {
		transform: translateY(-15px);
	}
}

/* End */

/* footer */
footer {
	background-color: #e8e8ed;
	color: #9d9da4;
}

.footer1 {
	display: flex;
	text-align: center;
	justify-content: center;
	flex-direction: column;
	padding: 30px;
	margin: 0px 250px 0px 220px;
}

.footer1 a {
	color: #020202;
	margin-left: 20px;
}

.footer1 .text1 {
	padding-bottom: 10px;
	color: #9d9da4;
}

.footer1 .text2 {
	padding-bottom: 10px;
	color: #9d9da4;
}

.footer1 .text3 {
	padding-bottom: 10px;
	color: #9d9da4;
}

.footer1 .text4 {
	padding-bottom: 10px;
	color: #9d9da4;
}

.footer3 {
	border-top: 1px solid rgba(0, 0, 0, 0.222);
	/* display: flex; */
	/* justify-content: center; */
	padding-left: 30px;
	align-items: center;
	gap: 30px;
	margin: 30px 250px 0px 250px;
}
.panel1 {
	display: flex;
	justify-content: center;
	align-items: center;
}

.panel2 {
	font-size: 14px;
	display: flex;
	justify-content: center;
}

.panel3 {
	display: flex;
	justify-content: end;
}

.panel2 li {
	list-style: none;
	padding: 6px;
	cursor: pointer;
}

.panel2 li:hover {
	text-decoration: underline;
	padding: 6px;
	cursor: pointer;
}

.panel3 li {
	list-style: none;
	padding-left: 100px;
	cursor: pointer;
}

.footer2 {
	line-height: 189%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 30px 250px 0px 250px;
	cursor: default;
}

.footer2 a:hover {
	text-decoration: underline;
}

.footer2 a {
	text-decoration: none;
	color: #9d9da4;
}

.sub-footer1 {
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.sub-footer2 {
	position: relative;
	top: -15px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.sub-footer3 {
	position: relative;
	top: -48px;
	display: flex;
	flex-direction: column;
}

.sub-footer4 {
	position: relative;
	top: -50px;
	display: flex;
	flex-direction: column;
}

.sub-footer5 {
	position: relative;
	top: 7px;
	display: flex;
	flex-direction: column;
}

/* footer end */

.ri-menu-line {
	display: none;
}

/* subnav */

.nav3 {
	/* background-color: #2997ff; */
	height: 100vh;
	position: absolute;
	top: -100%;
	width: 100%;
	z-index: 99;
	transition: all cubic-bezier(0.19, 1, 0.22, 1) 2s;
	pointer-events: none;
}

.nav-top {
	height: 50vh;
	background-color: rgb(21, 20, 20);
}

.nav-bottom {
	height: 45vh;
	background: rgba(255, 255, 255, 0);
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.185);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(4px);
}

.nav-top-store {
	display: flex;
	/* flex-direction: column; */
	padding: 2vw 20vw;
	gap: 3vw;
}

.nav-top-store a {
	text-decoration: none;
	color: white;
	cursor: pointer;
}

.nav-top-store h4 {
	color: rgba(255, 255, 255, 0.241);
	font-weight: 300;
	cursor: default;
}

.store1 {
	line-height: 4vh;
	display: flex;
	flex-direction: column;
	font-weight: 800;
	font-size: 3vh;
}

.store2 {
	line-height: 3vh;
	font-size: 13px;
	display: flex;
	flex-direction: column;
}

.store3 {
	line-height: 3vh;
	font-size: 13px;
	display: flex;
	flex-direction: column;
}

.whatsapp-float {
	position: fixed !important;
	bottom: 20px;
	right: 20px;
	width: 60px;
	height: 60px;
	background-color: #25d366;
	color: #fff;
	font-size: 30px;
	line-height: 60px;
	border-radius: 50%;
	text-align: center;
	z-index: 99999;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
	transition: transform 0.3s ease, background-color 0.3s ease;
}

.whatsapp-float i {
	vertical-align: middle;
}

.whatsapp-float:hover {
	background-color: #1ebe57;
	transform: scale(1.1);
}

@media (max-width: 500px) {
	#main {
		height: 773vh;
	}
	nav {
		position: relative;
		justify-content: space-between;
	}
	.nav-items a {
		padding-right: 10px;
		color: white;
	}

	.nav-items i {
		color: white;
	}

	.ri-apple-fill:before {
		padding-left: 11px;
		padding-right: 237px;
	}

	.ri-menu-line {
		display: initial;
	}

	.subnav {
		padding: 10vw 10vw;
		height: 100vh;
		width: 100vw;
		display: flex;
		flex-direction: column;
		gap: 2vh;
		position: absolute;
		top: -109%;
		z-index: 99;
		background-color: rgb(21, 20, 20);
		transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s;
		/* position: fixed; */
	}

	.subnav i {
		position: absolute;
		top: 1%;
		/* left: 70%; */
		right: 22%;
		font-size: 4vh;
		color: white;
	}
	.subnav a {
		text-decoration: none;
		color: white;
		font-size: 3vh;
		font-weight: 600;
	}

	.hero-section2 {
		background-image: url("../iphone15white.jpg");
		background-repeat: no-repeat;
		background-size: cover;
	}

	.text1 h2 {
		font-size: 9vh;
	}
	.text1 h3 {
		font-size: 2vh;
	}
	.links {
		font-size: 3vh;
	}

	.hero {
		background-image: url("../iphon15resp.jpg");
	}
	.hero-p h2 {
		font-size: 5vh;
	}
	.hero-p h3 {
		font-size: 2vh;
		font-weight: 400;
	}
	.hero-section3 {
		background-repeat: no-repeat;
		background-size: cover;
		width: 100%;
	}

	.text0 h3 {
		font-size: 3vh;
	}

	.hero-section4 {
		justify-content: center;
		align-items: center;
		background-size: contain;
		flex-direction: column;
		/* height: 100%; */
		height: 150vh;
	}
	.section5-1 {
		background-image: url("../card2.jpg");
	}

	.text1 h3 {
		font-weight: 400;
	}

	.text1 h2 {
		font-size: 6vh;
	}

	.text3 h3 {
		font-size: 3vh;
	}
	.text4 h3 {
		font-size: 5vh;
	}

	.text6 h3 {
		font-size: 6vh;
	}
	.text5 .links a {
		font-size: 2.5vh;
	}
	.s1 {
		background-image: url("../resp1.jpg");
	}
	.s2 {
		background-image: url("../resp2.jpg");
	}
	.s3 {
		background-image: url("../resp3.jpg");
	}
	.s4 {
		background-image: url("../resp4.jpg");
	}
	.s5 {
		background-image: url("../resp5.jpg");
	}

	footer {
		width: 414px;
	}
	.footer1 {
		margin: 0;
	}

	.footer3 {
		flex-direction: column;
		align-items: end;
		margin: 0;
		font-size: 17px;
		padding-right: 147px;
	}

	.panel1 {
		display: flex;
		justify-content: end;
		align-items: center;
		font-size: 10px;
		position: relative;
		right: -19%;
	}

	.panel2 {
		flex-direction: column;
		justify-content: center;
		position: relative;
		padding-left: 117px;
		right: 54%;
		padding-bottom: 55px;
	}
	.panel3 {
		display: flex;
		/* justify-content: center; */
		align-items: center;
		width: 55vw;
		font-size: 14px;
	}

	.panel3 a {
		color: #2997ff;
	}

	.nav3 {
		display: none;
	}

	.footer2 {
		position: relative;
		right: 53%;
		bottom: 4%;
		display: block;
	}

	.sub-footer1 {
		width: 140px;
		line-height: 22px;
		padding-bottom: 28px;
	}

	.sub-footer2 {
		width: 140px;
		line-height: 22px;
		padding-bottom: 28px;
	}

	.sub-footer3 {
		width: 140px;
		line-height: 22px;
		padding-bottom: 28px;
	}

	.sub-footer4 {
		width: 140px;
		line-height: 22px;
		padding-bottom: 28px;
	}

	.sub-footer5 {
		width: 140px;
		position: absolute;
		line-height: 22px;
		padding-bottom: 28px;
		top: 78%;
	}
	.footer2 a {
		display: none;
	}
}