@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

html{
	font-size:62.5%;
	scroll-behavior: smooth;
}

:root{
--body-font: 'Poppins', sans-serif;

--big-font: 4rem;
--h1-font: 3.6rem;
--h2-font: 2.4rem;
--h3-font: 2rem;
--h4-font: 1.8rem;
--normal-font:1.6rem;
--small-font:1.4rem;
--smalller-font:1.3rem;

--font-regular:400;
--font-medium:500;
--font-semi-bold:600;

--primary-color:#c87e4f;
--primary-color-hover:#c2703d;
--text-color:#333;
--text-color-light:#888682;
--border-color:#484848;
--white-color:#fff;
--section-bg:#2c3034;
	
--z-overlay:10;
--z-fixed:100;
	
--tran-0-2:0.2s;
--tran-0-3:0.3s;
--tran-0-5:0.5s;
}

@media screen and (max-width:990px) {
	:root{
		--big-font:3.5rem;
		--h1-font:2.4rem;
		--h2-font:2rem;
		--h3-font:1.8rem;
		--h4-font:1.6rem;
		--normal-font:1.5rem;
		--small-font:1.3rem;
		--smaller-font:1.2rem;
	}
}

/* Pre-CSS */

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

body,
button,
input{
	font-family:var(--body-font);
	font-size:var(--normal-font);
	font-weight:var(--font-regular);
	color:var(--text-color);
}
body{
	overflow-x: hidden;
	background-color: var(--white-color);
}
input{
	outline: none;
}
ul{
	list-style: none;
}
a{
	text-decoration: none;
}
img{
	width:100%;
	height:100%;
	object-fit: cover;
}


/* Reusuable CSS */
.section{
	padding:7rem 2rem;
}
.container{
	max-width:1030px;
	width:100%;
	margin:0 auto;
	padding:0 3rem;
}
.flex{
	display:flex;
	align-items: center;
	column-gap:0.6rem;
}
.button{
	border:none;
	outline:none;
	color: var(--white-color);
	padding: 1.4rem 4rem;
	border-radius: 3rem;
	background-color:#FF7F00;
	transition:var(--tran-0-3);
	cursor:pointer;
}
.button:hover{
	background-color: var(--primary-color-hover);
}
.section-subtitle,
.content-subtitle{
	color:#FF7F00;
	font-size:var(--normal-font);
	letter-spacing: 1px;
	font-weight: var(--font-medium);
	text-align: center;
}
.section-title,
.content-title{
	text-align: center;
	font-size:var(--h2-font);
	font-weight: var(--font-medium);
	margin: 1rem 0;
}
.section-description,
.content-description{
	text-align: center;
	margin-bottom: 2rem;
}
.section-description{
	padding: 0 16rem;
}

/* Header */

.header{
	position:fixed;
	top:0;
	left:0;
	height:7rem;
	width:100%;
	z-index:var(--z-fixed);
	transition: var(--tran-0-5);
}
.header-active{
	height: 6rem;
	background-color: var(--white-color);
	box-shadow: 0 0 10px rgba( 0, 0, 0, 0.2);
}
.nav{
	position:relative;
	height: 100%;
	align-items: center;
	justify-content: space-between;
}
.logo-text,
.nav-link,
.phone-icon,
.phone-number{
	color:var(--white-color);
}
.header-active .logo-text,
.header-active .nav-link,
.header-active .phone-icon,
.header-active .phone-number{
	color: var(--text-color);
}
.phone-icon{
	font-size:2rem;
}
.menu-list{
	column-gap:2rem;
}
.nav-link{
	position: relative;
	text-transform: capitalize;
}

.nav-link::before{
	content:'';
	position:absolute;
	left:50%;
	bottom:-8px;
	height:6px;
	width:6px;
	border-radius:50%;
	transform: translateX(-50%);
	background-color:var(--white-color);
	opacity:0;
}
.active-navlink::before{
	opacity: 1;
}
.header-active .active-navlink::before{
	background-color: var(--text-color);
}
.navClose-btn,
.navOpen-btn{
	display:none;
}

/* nav responsive */

@media screen and (max-width:1000px){
	.contact-content{
		display:none;
	}
	.navClose-btn,
    .navOpen-btn{
	display:block;
}	
	.nav .menu-content{
		position:fixed;
		top:0;
		right:-100%;
		max-width: 300px;
		width:100%;
		height:100%;
		z-index:var(--z-fixed);
		padding: 10rem 0 5rem;
		background-color: var(--white-color);
		box-shadow:0 0 10px rgba(0,0,0,0.2);
		display:flex;
		flex-direction: column;
		align-items:center;
		justify-content:space-between;
		transition: var(--tran-0-5);
	}
	.nav .menu-content.open{
		right:0;
	}
	.menu-list{
		flex-direction: column;
		row-gap:2.5rem;
		font-size:var(--h4-font);
	}
	.nav-link{
		color: var(--text-color);
	}
	.nav-link::before{
		background-color: var(--text-color);
	}
	.navClose-btn{
		position:absolute;
		top:2rem;
		right:2rem;
		font-size:2.5rem;
		cursor:pointer;
	}
	.navOpen-btn{
		font-size:2rem;
		cursor:pointer;
		color: var(--white-color);
	}
	.header-active .navOpen-btn{
	color: var(--text-color);
    }
}

/* Home */
.home{
	height: 100vh;
	width: 100%;
}

.swiper-slide{
	height: 100vh;
	width:100%;
}
.home .swiper-slide::before{
	content:'';
	position: absolute;
	left:0;
	top:0;
	height: 100%;
	width: 100%;
	background-color: rgba( 0, 0, 0, 0.4);
	z-index: var(--z-overlay);
}
.home-img{
	height: 100%;
	width: 100%;
}
/* swiper button */

.swiper-navBtn {
    display: flex; 
	height: 5rem;
	width:5rem;
	color: var(--white-color);
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.2);
	transition: var(--tran-0-2);
	opacity:0;
	visibility:visible;
}
.home:hover .swiper-navBtn,
.review:hover .swiper-navBtn{
	opacity: 1;
}
.swiper-navBtn:hover{
	background-color: rgba(255, 255, 255, 0.2);
}
.swiper-navBtn::after,
.swiper-navBtn::before{
	font-size:2rem;
}
.swiper-button-next{
	right:16rem;
}
.swiper-button-prev{
	left:16rem;
}
.swiper-pagination-bullet{
	background-color: var(--white-color);
	opacity:1;
	height:1.5rem;
	width:1.5rem;
	margin-bottom: 2rem;
	transition: 0.3s;
}
.swiper-pagination-bullet-active{
	border: 3px solid var(--white-color);
	background-color:#FF7F00;
}
.home-details{
	position:absolute;
	top:50%;
	left:50%;
	z-index:var(--z-fixed);
	transform: translate(-50%,-50%);
	display:grid;
	justify-items:center;
	width:100%;
	row-gap:4rem;
}
.homeSubtitle{
	text-align: center;
	font-size: var(--normal-font);
	color: var(--white-color);
}
.homeTitle{
	text-align: center;
	font-size: var(--big-font);
	color: var(--white-color);
	font-weight:var(--font-semi-bold);
}

/* About */

.about .content-subtitle,
.about .content-title,
.about .content-description{
	text-align: left;
}

.about-content{
	display: grid;
	grid-template-columns: repeat(2,1fr);
	column-gap: 7rem;
	align-items: center;
	padding: 0 5rem;
}
.about-imageContent{
	position:relative;
	max-width:400px;
	height:450px;
	border: 6px solid var(--section-bg);
}
.aboutImg-textBox{
	position:absolute;
	bottom:2rem;
	right:-5rem;
	padding: 2rem;
	max-width: 360px;
	width:100%;
	text-align: center;
	border:6px solid var(--section-bg);
	background-color: var(--white-color);
}
.aboutImg-textBox .content-description{
	text-align: center;
	margin-bottom: 0;
}
.heart-icon{
	position: absolute;
	left: -1.9rem;
	top:50%;
	height: 3rem;
	width:3rem;
	color: var(--white-color);
	background-color: var(--section-bg);
	transform: translateY(-50%);
	justify-content:center;
	border-radius:50%;
}
.about-details{
	display:grid;
	row-gap:4rem;
}
.about-lists{
	column-gap:1rem;
	align-items:baseline;
}
.about-list{
	font-weight:var(--font-medium);
	font-size: 1.8rem;
}
.about-list:nth-child(1){
	color:#FF7F00;
}
.about-list.dot{
	font-size: 2.5rem;
}
.about-buttons{
	column-gap:2rem;
}
.about-link .link-text,
.about-arroIcon{
	color: var(--text-color);
	text-transform: uppercase;
}
.about-arrowIcon{
	transition: var(--tran-0-3);
}
.about-link .about-arrowIcon{
	margin-left: 4px;
}

/* Menu */

.menu{
	background-color:var(--section-bg);
}
.section-title,
.section-description{
	color: var(--white-color);
}
.menu .menu-content{
	display:grid;
	grid-template-columns:1.8fr 1fr;
	column-gap: 6rem;
	margin-top: 6rem;	
}
.menu-img{
	height:80px;
	width:80px;
	margin-right: 1.5rem;
	border-radius:50%;
}
.menu-items{
	display: grid;
	row-gap:1.5rem;
}
.menu-item{
	position:relative;
	padding: 0.5rem 1rem;
	background-color: var(--white-color);
}
.menuItem-details{
	margin-right: 1.5rem;
}
.menuItem-topic{
	font-weight: var(--font-semi-bold);
}
.menuItem-des{
	font-size: var(--small-font);
}
.time-topic{
	width:100%;
	display:block;
	text-align: center;
	font-size:1.8rem;
	font-weight: var(--font-regular);
	padding: 1.5rem 0;
	color: var(--white-color);
	background-color:#FF7F00;
}
.time-list{
	padding: 1.5rem;
	border-bottom:2px solid rgba( 0, 0, 0, 0.3);
	justify-content: space-between;
	background-color: var(--white-color);
}
.time-list:nth-child(7){
	border-bottom: none;
}
/* Brand */
.brand .section-subtitle{
	font-size: 3rem;
}
.brand-images{
	display:grid;
	align-items: center;
	column-gap:2rem;
	justify-content: space-between;
	justify-items: center;
	margin-top: 3rem;
	grid-template-columns: repeat(3,1fr);
}
.brand-img{
	border-radius:30%;
	width:200px;
	object-fit: contain;
	opacity: 0.4;
	transition: var(--tran-0-3);
}
.brand-img:hover{
	opacity:1;
}
/* Review */
.review{
	background-color: #f2f2f2;
}
.review .section-title,
.review .section-description{
	color: var(--text-color);
}
.testi-content{
	position: relative;
	height: 100%;
	width: 100%;
	row-gap: 2rem;
	flex-direction: column;
}
.review-quote{
	padding: 0 15rem;
	text-align: center;
}
.quote-icon{
	font-size: 3rem;
	color:#FF7F00;
}
/* swiper btn */
.review .swiper-navBtn{
	background-color: rgba( 0, 0, 0, 0.1);
}
.review .swiper-button-next{
	right:2rem;
	transform: translateX(2rem);
}
.review .swiper-button-prev{
	left: 2rem;
	transform: translateX(2rem);
}
.review .swiper-navBtn:hover{
	background-color: rgba( 0, 0, 0, 0.2);
}
/* Newsletter */
.newsletter .logo-text,
.newsletter .section-description{
	color: var(--text-color);
}
.newletter-container{
	display: grid;
	justify-items:center;
	row-gap: 4rem;
}
.newsletter .logo-text{
	color:#FF7F00;
	font-size: 2rem;
	font-weight: var(--font-medium);
}
/* Footer */
.footer{
	padding: 4rem 2rem 3rem;
	background-color: var(--section-bg);
}
.footer .content-description,
.footer .map-icon,
.footer .location-text{
	color: var(--text-color-light);
}
.footer-container{
	display:grid;
	grid-template-columns: 1fr 2fr;
	column-gap: 7rem;
	align-items: center;
}
.footer-content{
	display: grid;
	row-gap: 3rem;
}
.footer .content-description,
.footer .location-text{
	text-align: left;
	font-size: var(--small-font);
}
.footer .map-icon{
	font-size:3rem;
	margin-right: 1rem;
}
.footer-linkContent{
	display:grid;
	grid-template-columns: repeat(2,1fr);
	justify-items:end;
}
.footer-links{
	display: grid;
	row-gap: 1rem;
	font-weight: var(--font-medium);
	color: var(--white-color);
}
.footer-link{
	font-size:var(--small-font);
	color: rgba( 255, 255, 255, 0.5);
	transition: var(--tran-0-3);
}
.footer-link:hover{
	color: rgba( 255, 255, 255, 0.8);
}
/* Scroll Up */
.scrollUp-btn{
	position: fixed;
	bottom: -30%;
	right: 3rem;
	height: 3rem;
	width: 3rem;
	font-size: 2rem;
	border-radius: 4px;
	color: var(--primary-color-hover);
	cursor: pointer;
	box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.2);
	background-color: var(--white-color);
	z-index: var(--z-overlay);
	justify-content: center;
	transition: var(--tran-0-3);
}
.scrollUpBtn-active{
	bottom: 3rem;
}
.scrollUp-icon{
	opacity: 0.9;
	transition: var(--tran-0-3);
}
.scrollUp-btn:hover .scrollUp-icon{
	opacity:1;
}
/* Responsive media */
@media screen and (max-width:1150px){
	.swiper-button-prev{
		left: 10rem;
	}
	.swiper-button-next{
		right: 10rem;
	}
}
@media screen and (max-width:1000px){
	.swiper-button-prev{
		left: 3rem;
	}
	.swiper-button-next{
		right: 3rem;
	}
	.section-description{
		padding: 0 8rem;
	}
	.about-imageContent{
		height: 400px;
	}
	.aboutImg-textbox{
		padding: 1.5rem 2rem;
	}
	.menu .menu-content{
		grid-template-columns: 1.5fr 1fr;
		column-gap: 3rem;
	}
	.brand-images{
		grid-template-columns: repeat( 3, 1fr);
	}
}
@media screen and (max-width:768px){
	.swiper-navBtn{
		visibility:hidden;
	}
	.swiper-pagination-bullet{
		visibility: visible;
	}
	.section{
		padding: 7rem 1rem;
	}
	.section-description,
	.review-quote{
		padding: 0 6rem;
	}
	.about-content{
		grid-template-columns:1fr;
		row-gap: 3rem;
		justify-items: center;
	}
	.about .content-subtitle,
    .about .content-title,
    .about .content-description{
	text-align: center;
  }
	.about-details{
		justify-items: center;
	}
	.about-lists{
	 justify-content: center; 
	}
	.menu .menu-content{
		grid-template-columns: 1fr;
		row-gap: 3rem;
	}
	.footer-container{
		row-gap: 1.5rem;
	}
}

@media screen and (max-width:600px){
	.container{
		padding:0.5rem;
	}
	.section-description,
	.review-quote{
		padding: 0;
	}
	.aboutImg-textBox{
		right:-2rem;
	}
	.menu-item{
		padding: 1rem;
	}
	.brand-images{
		grid-template-columns: repeat(1, 1fr);
	}
	.footer-container{
		grid-template-columns: 1fr;
		row-gap: 6rem;
	}
	.footer-content{
		justify-items: center;
	}
	.footer-linkContent{
		justify-items: center;
	}
}


.language-selector {
    position: fixed;
    top: 10px;
    right: 50px;
    z-index: 11; /* Ensure it stays above other elements */
    background: linear-gradient(145deg, #FF7F00, #FF7F00); /* Orange color background */
    color: #fff; /* Text color */
    padding: 10px 20px; /* Adjust padding for a more spacious look */
    border-radius: 50px; /* Rounded edges for a modern pill shape */
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1), -3px -3px 10px rgba(255, 255, 255, 0.3); /* Soft shadow for depth */
    font-size: 16px; /* Slightly larger font */
    font-weight: 600; /* Bold text */
    cursor: pointer; /* Pointer cursor on hover */
    transition: all 0.3s ease; /* Smooth transition for hover effect */
}

/* Hover effect for a more interactive feel */
.language-selector:hover {
    background: linear-gradient(145deg, #C2703D, #C2703D); /* Hover color */
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2), -5px -5px 15px rgba(255, 255, 255, 0.2); /* Stronger shadow */
    transform: translateY(-3px); /* Slight upward movement for a 3D effect */
}

/* Focus effect (for accessibility) */
.language-selector:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 127, 0, 0.5); /* Orange outline for focus state */
}

/* Responsive adjustments */
@media screen and (max-width: 1000px) {
    .language-selector {
		top: 10px;
        right: 100px; /* Move it closer to the edge of the screen */
        font-size: 14px; /* Reduce font size for smaller screens */
    }
}

@media screen and (max-width: 480px) {
    .language-selector {
        top: 10px;
        right: 70px; /* Adjust for very small screens */
        font-size: 14px; /* Slightly reduce the font size */
    }
}

@media screen and (min-width: 1000px) {
    .language-selector {
        top: 10px;
        right: 220px; /* Adjust for very small screens */
        font-size: 14px; /* Slightly reduce the font size */
    }
}

@media screen and (min-width: 1100px) {
    .language-selector {
        top: 10px;
        right: 280px; /* Adjust for very small screens */
        font-size: 14px; /* Slightly reduce the font size */
    }
}

@media screen and (min-width: 1230px) {
    .language-selector {
        top: 10px;
        right: 350px; /* Adjust for very small screens */
        font-size: 14px; /* Slightly reduce the font size */
    }
}

@media screen and (min-width: 1370px) {
    .language-selector {
        top: 10px;
        right: 50px; /* Adjust for very small screens */
        font-size: 14px; /* Slightly reduce the font size */
    }
}