/* =========================================================
	   RINARI CEDAR COTTAGES - MAIN STYLE.CSS
	========================================================= */

	/* GOOGLE FONTS */
	@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Poppins:wght@300;400;500;600&display=swap');


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

	html,
	body{
		overflow-x:hidden;
	}

	body{
		font-family:'Georgia', serif;
		background:#f4f1ea;
		color:#333;
		line-height:1.6;
	}


	/* =========================================================
	   COMMON CONTAINER
	========================================================= */
	.container{
		width:100%;
	}


	/* =========================================================
	   NAVBAR
	========================================================= */
	.navbar{
		background:#fff;
		padding:0px 0;
		position:sticky;
		top:0;
		z-index:999;
		box-shadow:0 2px 12px rgba(0,0,0,0.05);
	}	
	

	.navbar .container{
		display:flex;
		align-items:center;
		justify-content:space-between;
	}

	.logo img{
		width:140px;
		height:auto;
		object-fit:contain;
		display:block;
	}

	.nav-links{
		display:flex;
		align-items:center;
		gap:25px;
		flex-wrap:wrap;
	}

	.nav-links a,
	.navbar a{
		color:#333;
		text-decoration:none;
		font-size:15px;
		font-weight:500;
		transition:0.3s;
	}

	.nav-links a:hover,
	.navbar a:hover{
		color:#4b5d4a;
	}

	.navbar a.active{
		color:#4b5d4a;
		font-weight:700;
		border-bottom:2px solid #4b5d4a;
		padding-bottom:5px;
	}

	.btn-book{
		background:#4b5d4a;
		color:#fff !important;
		border-radius:30px;
		padding:10px 22px;
		display:inline-block;
		transition:0.3s;
	}

	.btn-book:hover{
		background:#344235;
		transform:translateY(-2px);
	}


	/* =========================================================
	   HERO SECTION
	========================================================= */
	.hero{
		height:80vh;
		background:url('../images/cottage1.jpeg') center/cover no-repeat;
		display:flex;
		align-items:center;
		justify-content:center;
		text-align:center;
		color:#fff;
		position:relative;		
	}
	
	.inner-hero{
		height:30vh !important;
	}

	.hero.small-hero{
		height:30vh;
		background:url('../images/cottage/g2.jpg') center/cover no-repeat;
	}

	.hero::before{
		content:"";
		position:absolute;
		inset:0;
		background:rgba(0,0,0,0.4);
	}

	.hero-content{
		position:relative;
		z-index:2;
		padding:20px;
	}

	.hero h1{
		font-size:55px;
		margin-bottom:15px;
		font-family:'Playfair Display', serif;
	}

	.hero p{
		font-size:18px;
		max-width:700px;
		margin:auto;
	}


	/* =========================================================
	   BUTTONS
	========================================================= */
	.btn-main{
		background:#4b5d4a;
		color:#fff;
		border:none;
		border-radius:30px;
		padding:12px 28px;
		display:inline-block;
		text-decoration:none;
		margin:5px;
		transition:0.3s;
	}

	.btn-main:hover{
		background:#344235;
		color:#fff;
	}

	.btn-light-custom{
		background:#ddd;
		color:#222;
		border-radius:30px;
		padding:12px 28px;
		display:inline-block;
		text-decoration:none;
	}


	/* =========================================================
	   HIGHLIGHT SECTION
	========================================================= */
	.highlight{
		text-align:center;
		padding:60px 0;
	}

	.highlight img{
		width:40px;
		margin-bottom:12px;
	}


	/* =========================================================
	   FEATURE SECTION
	========================================================= */
	.feature{
		padding:70px 0;
	}

	.feature img{
		width:100%;
		border-radius:12px;
	}


	/* =========================================================
	   CTA SECTION
	========================================================= */
	.cta{
		background:#1c2a31;
		color:#fff;
		text-align:center;
		padding:70px 20px;
	}


	/* =========================================================
	   FOOTER
	========================================================= */
	footer{
		background:#1c2a21;
		color:#ccc;
		padding:40px 0;
	}

	footer p{
		margin-bottom:0;
	}


	/* =========================================================
	   BOOKING PAGE
	========================================================= */
	.booking-box{
		background:#fff;
		padding:30px;
		border-radius:15px;
		box-shadow:0 5px 20px rgba(0,0,0,0.08);
	}

	label,
	form label{
		font-weight:600;
	}

	form input,
	form textarea,
	form select{
		border-radius:8px !important;
		padding:12px;
	}
	
	/* This is for booking calender */
	.total-box{
		height:50px;
		font-size:20px;
		font-weight:700;
		background:#f8f9fa;
		border-radius:12px;
		border:2px solid #dfe6e9;
		color:#2d3436;
	}

	.availability-btn{
		height:50px;
		display:flex;
		align-items:center;
		justify-content:center;
		font-size:16px;
		font-weight:600;
		border-radius:12px;
		transition:0.3s;
	}

	.availability-btn:hover{
		transform:translateY(-2px);
		box-shadow:0 8px 20px rgba(0,0,0,0.15);
	}


	/* =========================================================
	   CONTACT PAGE
	========================================================= */
	.contact-box{
		display:flex;
		align-items:center;
		background:#fff;
		padding:18px;
		border-radius:12px;
		margin-top:15px;
		box-shadow:0 5px 15px rgba(0,0,0,0.08);
	}

	.contact-box .icon{
		font-size:28px;
		margin-right:15px;
	}


	/* =========================================================
	   COTTAGE PAGE
	========================================================= */
	.cottage-section{
		margin-bottom:90px;
	}

	.cottage-title{
		font-family:'Playfair Display', serif;
		font-size:38px;
		margin-bottom:10px;
	}

	.cottage-subtitle{
		color:#4b5d4a;
		font-size:22px;
		font-weight:600;
		margin-bottom:15px;
	}

	.cottage-text{
		color:#555;
		line-height:1.8;
		text-align:justify;
	}

	.cottage-btn{
		background:#4b5d4a;
		color:#fff;
		padding:12px 25px;
		border-radius:8px;
		text-decoration:none;
		display:inline-block;
		margin-top:15px;
	}

	.cottage-btn:hover{
		background:#344235;
		color:#fff;
	}

	.cottage-img{
		width:100%;
		height:400px;
		object-fit:cover;
		border-radius:12px;
	}

	.cottage-section:nth-child(even) .row{
		flex-direction:row-reverse;
	}


	/* =========================================================
	   EXPERIENCE PAGE
	========================================================= */
	.exp-card{
		background:#fff;
		padding:25px;
		border-radius:14px;
		box-shadow:0 8px 25px rgba(0,0,0,0.08);

		display:flex;
		flex-direction:column;
		height:100%;

		transition:0.3s;
	}

	.exp-card:hover{
		transform:translateY(-8px);
		box-shadow:0 12px 30px rgba(0,0,0,0.15);
	}

	.exp-icon{
		font-size:42px;
		margin-bottom:10px;
		text-align:center;
	}

	.exp-title{
		font-family:'Playfair Display', serif;
		font-size:24px;
		text-align:center;
		margin-bottom:12px;
	}

	.exp-text{
		font-family:'Poppins', sans-serif;
		text-align:justify;
		font-size:15px;
		line-height:1.8;
		color:#444;
	}

	.exp-tag{
		margin-top:auto;
		font-weight:500;
		color:#4b5d4a;
		font-size:14px;
		padding-top:10px;
	}

	.row.g-4 > div{
		display:flex;
	}


	/* =========================================================
	   SECTION TITLE
	========================================================= */
	.section-title{
		text-align:center;
		margin-bottom:45px;
	}

	.section-title h2{
		font-size:38px;
		font-family:'Playfair Display', serif;
	}

	.section-title p{
		color:#666;
	}


	/* =========================================================
	   GALLERY
	========================================================= */
	.gallery img{
		width:100%;
		height:250px;
		object-fit:cover;
		border-radius:15px;
		margin-bottom:15px;
		cursor:pointer;
		transition:0.3s;
	}

	.gallery img:hover{
		transform:scale(1.03);
		filter:brightness(0.9);
	}


	/* =========================================================
	   MODAL GALLERY
	========================================================= */
	.modal-custom{
		display:none;
		position:fixed;
		z-index:9999;
		inset:0;
		background:rgba(0,0,0,0.95);
		text-align:center;
		padding-top:50px;
	}

	.modal-custom img{
		max-width:90%;
		max-height:80vh;
		border-radius:10px;
	}

	.close-btn{
		position:absolute;
		top:20px;
		right:30px;
		font-size:32px;
		color:#fff;
		cursor:pointer;
	}

	.prev,
	.next{
		position:absolute;
		top:50%;
		transform:translateY(-50%);
		font-size:40px;
		color:#fff;
		cursor:pointer;
		padding:10px;
	}

	.prev{
		left:20px;
	}

	.next{
		right:20px;
	}


	/* =========================================================
	   COTTAGE DETAILS
	========================================================= */
	.main-img{
		width:100%;
		border-radius:12px;
	}

	.info-box{
		background:#f9f9f9;
		padding:25px;
		border-radius:12px;
		box-shadow:0 5px 20px rgba(0,0,0,0.08);
	}

	.info-item{
		display:flex;
		align-items:center;
		margin-bottom:20px;
	}

	.info-item span{
		font-size:24px;
		margin-right:10px;
	}
	
	/* This is for booking calender */
	#calendar{
		background:#fff;
		padding:20px;
		border-radius:15px;
		box-shadow:0 5px 20px rgba(0,0,0,0.08);
	}

	.fc-toolbar-title{
		font-size:22px !important;
		color:#2f4633;
		font-weight:bold;
	}

	.fc-daygrid-day{
		background:#eef8ee;
	}

	.fc-event{
		border:none !important;
		padding:4px;
		font-size:12px;
		font-weight:600;
	}

	.calendar-legend{
		text-align:center;
		margin-bottom:20px;
	}

	.calendar-legend span{
		display:inline-block;
		padding:8px 15px;
		border-radius:20px;
		margin:5px;
		color:#fff;
		font-size:14px;
	}

	.booked{
		background:#dc3545;
	}

	.available{
		background:#198754;
	}
	
	
	.full-booked{
		background:#dc3545 !important;
		opacity:1 !important;
	}
	
	.half-end{
		background: linear-gradient(
			135deg,
			#dc3545 50%,
			transparent 50%
		) !important;

		opacity:1 !important;
	}
	
	.half-start{
		background: linear-gradient(
			315deg,
			#dc3545 50%,
			transparent 50%
		) !important;

		opacity:1 !important;
	}


	/* =========================================================
	   RESPONSIVE
	========================================================= */
	@media(max-width:991px){

		.hero h1{
			font-size:42px;
		}

		.nav-links{
			gap:15px;
		}

		.cottage-title{
			font-size:30px;
		}

		.section-title h2{
			font-size:32px;
		}
	}


	@media(max-width:768px){

		.navbar .container{
			flex-direction:column;
			gap:15px;
		}

		.logo img{
			width:150px;
		}

		.nav-links{
			justify-content:center;
			text-align:center;
		}

		.hero{
			height:60vh;
			padding:20px;
		}

		.hero.small-hero{
			height:35vh;
		}

		.hero h1{
			font-size:34px;
		}

		.hero p{
			font-size:16px;
		}

		.feature{
			padding:40px 0;
		}

		.cottage-img{
			height:250px;
			margin-top:20px;
		}

		.exp-card{
			margin-bottom:20px;
		}

		.gallery img{
			height:220px;
		}
	}


	@media(max-width:576px){

		.hero h1{
			font-size:28px;
		}

		.btn-main,
		.btn-light-custom,
		.btn-book{
			width:100%;
			text-align:center;
		}

		.nav-links{
			flex-direction:column;
			gap:12px;
		}

		.section-title h2{
			font-size:28px;
		}
	}