﻿
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');



:root {
	--maincolor: #8e44ad;
	--black: #2e3192;
	--white: #fff;
	--light-black: #777;
	--light-white: #fff9;
	--dark-bg: rgba(0,0,0,.7);
	--light-bg: #eee;
	--border: .1rem solid var(--black);
	--box-shadow: 0 .5 rem 1rem rgba(0,0,0,.1);
	--text-shadow: 0. 1.5rem 3rem rgba(0,0,0,.3);
}

.paypal-button {
	transform: scale(1.5); /* Increase the button size by 1.5 times */
	transform-origin: 0 0; /* Adjust transform origin if needed */
	display: inline-block;
	padding: 1rem 3rem;
	cursor: pointer;
}



.content {
	color: purple;
	padding: 15px;
}

h1 {
	color: #2e3192;
}
/*about list starts*/



ul {
	list-style-type: square; /* Square bullets */
}

	ul.my-list {
		list-style-type: circle; /* Circle bullets for a specific class */
	}

		ul.my-list li {
			margin-bottom: 10px; /* Add some space between list items */
		}


/*about list ends*/


*{
  font-family: "Roboto", sans-serif;
  margin:0; padding:0;
  box-sizing: border-box;
  outline: none; border:none;
  text-decoration:none;
  text-transform: capitalize;

}

html{
	font-size: 62.5%;
	overflow-x: hidden;

}

html::-webkit-scrollbar{
	width:1rem;

}

html::-webkit-scrollbar-track{
	background-color: var(--white);

}

html::-webkit-scrollbar-thumb{
	background-color:var(--main-color);

}

section{
	padding: 5rem 10%;
}

@keyframes fadeIn {

	0%{
		transform: scale(.5);
		opacity: 0;
	}
}


.btn{
	display:inline-block;
	background: var(--black);
	margin-top: 1rem;
	color: var(--white);
	font-size: 1.7rem;
	padding:1rem 3rem;
	cursor: pointer;

}

.btn:hover{


}
.header{
  position: sticky;
  top:0; left:0;  right:0;
  z-index:1000;
  background-color: var(--white);
  display: flex;
  padding-top: 2rem;
  padding-bottom: 2rem;
  box-shadow: var(--box-shadow);
  align-items: center;
  justify-content: space-between;
}

.header .logo{
	font-size: 2rem;
	color:var(--black);
}

.header .navbar a{
	font-size: 2rem;
	margin-left:2rem;
	color:var(--black);

}
.header .navbar a:hover{
	color:var(--main-color);

}

/*header ends*/

/*slider*/
.home{
	padding:0;
}



.home .slide{
 text-align: center;
 padding: 2rem;
 display: flex;
 align-items: center;
 justify-content: center;
 background-size: cover !important;
 background-position: center !important;
 min-height: 60rem;
}

.home .slide .content{
  width: 85rem;
  display:none;
}

.home .swiper-slide-active .content{
	display:inline-block;
	
}

.home .slide .content span{
	display:block;
	font-size:2.2rem;
	color: var(--light-white);
	padding-bottom: 1rem;
	animation:fadeIn .4s linear backwards .2s;

}

.home .slide .content .btn{

animation:fadeIn .4s linear backwards .6s;
}


.home .slide .content h3{
	font-size: 6vw;
	color: var(--white);
	text-transform:uppercase;
	line-height:1;
	text-shadow: var(--text-shadow);
	padding:1rem 0;
	animation:fadeIn .4s linear backwards .4s;

}

.home .swiper-button-next,
.home .swiper-button-prev{

	top:inherit;
	left:inherit;
	bottom: 0;
	right: 0;
	height: 7rem;
	width: 7rem;
	background: var(--white);
	color:var(--black);


}


.home .swiper-button-next:hover,
.home .swiper-button-prev:hover{
	background: var(--main-color);
	color:var(--white);

}

.home .swiper-button-next::after,
.home .swiper-button-prev::after{
	font-size:2rem;
}

.home .swiper-button-prev{
	right:7rem;
}

/*slider ends*/

/*about begins*/

.home-about{
	display:flex;
	align-items:center;
	flex-wrap: wrap;

}


.home-about .image{
	flex:1 1 41rem;
}

.home-about .image  img{
	width:100%;
}

.home-about .content{
	flex:1 1 41rem;
	padding: 3rem;
	background: var(--light-bg);
}

.home-about .content h3{
   font-size: 3rem;
   color: var(--black);

}

.home-about .content p{
   font-size: 1.5rem;
   padding:1rem 0;
   line-height: 2;
   color: var(--black);

}

.home-packages{
	background: var(--light-bg);
}
/*about ends*/

/*services home*/
.heading-title{
	font-size:6rem;
	text-align:center;
}


.home-packages  .box-container{
	display:grid;
	grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
	gap: 2rem;

}

.home-packages  .box-container .box{
	border: var(--border);
	box-shadow: var(--box-shadow);
	background: var(--white);


}

.home-packages  .box-container .box .image{
	height: 25rem;
	overflow: hidden;

}

.home-packages  .box-container .box .image img{
	height: 100%;
	width: 100%;
	object-fit: cover;
	transition: .2s linear;
}

.home-packages  .box-container .box .content{
	padding: 2rem;
	text-align:center;

}

.home-packages  .box-container .box .content h3{
	font-size: 2.5rem;
	color: var(--black);

}

.home-packages  .box-container .box .content p{
	font-size: 1.5rem;
	color: var(--light-black);
	line-height: 2;
	padding: 1rem 0;

}

.booking  .book-form {
	padding:2rem;
	background: var(--light-bg);
}

.booking .book-form .flex{
	display: block;
	flex-wrap: wrap;
	gap: 2rem;
}

	.booking .book-form .flex .inputBox {
		flex: 1 1 42rem;
	}

.booking .book-form  .flex  .inputBox  input{
	width: 100%;
	padding:1.2rem 1.4rem;
	font-size: 1.6rem;
	color: var(--light-black);
	text-transform: none;
	margin-top: 1.5rem;
	border:var(--border);
}

.booking .book-form .flex .inputBox input:focus{
	background: var(--black);
	color:var(--white);
}

.booking .book-form .flex .inputBox input:focus::placeholder{
		background: var(--black);
		color: var(--light-white);
}

.booking .book-form .flex .inputBox{
	font-size: 2rem;
	color:var(--light-black);
}
.booking .book-form .btn{
   margin-top: 2rem;
}
	/*services home ends*/
	/*about page starts*/
	.heading {
		background-size: cover !important;
		background-position: center !important;
		padding-top: 10rem;
		padding-bottom: 15rem;
		display: flex;
		align-items: center;
		justify-content: center;
	}

.heading h1{
	font-size: 10rem;
	text-transform: uppercase;
	color:var(--white);
	text-shadow: var(--text-shadow);
}

.about{
	display:flex;
	align-items: center;
	flex-wrap: wrap;
	gap:3rem;
}

.about .image{
	flex:1 1 41rem;

}

.about .image img {
    width:100%;
}

.about .content {
	flex:1 1 41rem;
	text-align:center;
}

.about .content h3{
	font-size: 3rem;
	color:var(--black);
}

.about .content  p{
   font-size: 1.5rem;
   color: var(--light-black);
   line-height: 2;
   padding: 1rem 0;
}

	.about .content ul {
		font-size: 1.5rem;
		text-align: left;
		color: var(--light-black);
		line-height: 2;
		padding: 1rem 0;
	}

.about .content .icons-container{
	margin-top: 2rem;
	display: flex;
	flex-wrap: wrap;
	gap:1.5rem;
	align-items: flex-end;
}

.about .content .icons-container .icons{
	background: var(--light-bg);
	padding:2rem;
	flex:1 1 16rem;
}

.about .content .icons-container .icons i{
	font-size: 4rem;
	margin-bottom: 2rem;
	color:var(--main-color);
}

.about .content .icons-container .icons span{
	font-size: 1.5rem;
	color:var(--light-black);
	display:block;
}
	/*about page ends*/


    /*address starts*/
.address {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 3rem;
}
.address .image {
		flex: 1 1 41rem;
	}

.address .image img {
			width: 100%;
		}

.address .content {
		flex: 1 1 41rem;
		text-align: center;
	}




.address .content .icons-container {
			margin-top: 2rem;
			display: flex;
			flex-wrap: wrap;
			gap: 1.5rem;
			align-items: flex-end;
		}

.address .content .icons-container .icons {
				background: var(--light-bg);
				padding: 2rem;
				flex: 1 1 16rem;
			}

.address .content .icons-container .icons i {
					font-size: 4rem;
					margin-bottom: 2rem;
					color: var(--main-color);
				}

.address .content .icons-container .icons span {
					font-size: 10rem;
					color: var(--light-black);
					display: block;
				}


	/*address ends*/

	/*calendar starts*/


.calendar {
	border: 1px solid #ccc;
	border-radius: 8px;
	overflow: hidden;
	width: 300px;
	background: white;
	align-items:center;
}

.calendar-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
	background: #007bff;
	color: white;
}

	.calendar-header h2 {
		margin: 0;
	}

	.calendar-header button {
		background: none;
		border: none;
		color: white;
		font-size: 20px;
		cursor: pointer;
	}

.calendar-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	grid-gap: 1px;
}

.calendar-day,
.calendar-date {
	padding: 10px;
	text-align: center;
}

.calendar-day {
	background: #007bff;
	color: white;
	font-weight: bold;
}

.calendar-date {
	background: #f4f4f4;
	color: #333;
}

	.calendar-date.empty {
		background: #e0e0e0;
	}

	.calendar-date:nth-child(7n) {
		border-right: 1px solid #ccc;
	}

	.calendar-date:nth-child(-n+7) {
		border-bottom: 1px solid #ccc;
	}

	.calendar-date:nth-last-child(-n+7) {
		border-top: 1px solid #ccc;
	}

.calendar-grid div:nth-child(7n) {
	border-right: none;
}


	/*calendar ends*/

	/*contact info*/

.contact-container {
	max-width: 800px;
	margin: 40px auto;
	padding: 20px;
	background-color: #ffffff;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.contact-list {
	list-style-type: none;
	padding: 0;
}

.contact-item {
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid #ddd;
}

	.contact-item:last-child {
		border-bottom: none;
	}

.label {
	font-weight: bold;
	color: #555;
	font-size:17px;
}

.value {
	color: #0077cc;
	font-size: 17px;
}

a {
	text-decoration: none;
	color: inherit;
}

	a:hover {
		text-decoration: underline;
	}


	/*contact info ends*/

	/*terms*/
.terms {
	max-width: 900px;
	margin: 30px auto;
	padding: 20px;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}


.terms-content {
	line-height: 1.6;
}

	.terms-content h2 {
		font-size: 1.8rem;
		color: #444;
		margin-top: 20px;
	}

	.terms-content p {
		font-size: 1rem;
		color: #555;
	}

	.terms-content ul {
		list-style-type: disc;
		margin-left: 20px;
	}

	.terms-content a {
		color: #0077cc;
		text-decoration: none;
	}

		.terms-content a:hover {
			text-decoration: underline;
		}


  /*terms ends*/

	/*footer*/
	.footer {
		background: url(..//images/footer-bg.jpeg) no-repeat;
		background-size: cover;
		background-position: center;
		background-attachment: fixed;
	}


.footer .box-container{
	display:grid;
	grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
	gap: 3rem;

}

.footer .box-container .box h3{
   color:var(--white);
   font-size:2.5rem;
   padding-bottom: 2rem;
   
}

.footer .box-container .box a{
   color:var(--light-white);
   font-size:1.5rem;
   padding-bottom: 1rem;
   display:block;
}

.footer .box-container .box a i{
	color:var(--main-color);
	padding-right: .5rem;
	transition: .2s linear;


}
.footer .box-container .box a:hover i{
	padding-right: .2rem;


}


.footer .credit{
 text-align:center;
 padding-top: 3rem;
 margin-top: 3rem;
 border-top: .1rem solid var(--light-white);
 font-size: 2rem;
 color:var(--white);

/*footer ends*/

}
/*media queries */
#menu-btn{
	font-size: 2.5rem;
	cursor:pointer;
	color:var(--black);
	display:none;
}






@media (max-width:1200px){

	section{
		padding: 3rem 5%;
	}



}

@media (max-width:991px){

	html{
		font-size:55%;
	}

	section{
		padding: 3rem 2rem;
	}

	.home .slide .content h3{
		font-size:10vw;
	}

}

@media (max-width:768px){


    #menu-btn{
	display:inline-block;
	transition: .2s linear;
 }

	#menu-btn.fa-times{
		transform: rotate(180deg);
	}

	.header .navbar{
		position:absolute;
		top: 99%; left: 0; right: 0;
		background-color: var(--white);
		border-top: var(--border);
		padding: 2rem;
		transition: .2s linear;
		clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
	}

	.header .navbar.active{
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	}

	.header .logo{
		font-size:1rem;
	}
    .header .navbar a{
		display: block;
		margin: 2rem;
		text-align: center;
	}

}

@media (max-width:450px){

	html{
		font-size:50%;
	}

	.header .logo {
		font-size: 1rem;
	}


}

@media (max-width:390px) {

	html {
		font-size: 50%;
	}

	.header .logo {
		font-size: .5rem;
	}
}