* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
}
body {
	font-family: poppins;
}
ul, ul.nav {
	list-style: none;
}

a {
	text-decoration: none;
	cursor: pointer;
	color: inherit;
}

/* Limit the size of the logo */
h2 a img {
    max-width: 100%;  /* Make the image responsive */
    height: auto;     /* Maintain aspect ratio */
    display: block;   /* Ensure the image doesn't overflow */
    margin: 0 auto;   /* Center the logo horizontally if needed */
    max-height: 100px; /* Set a maximum height to control size */
}

h2 a img {
    filter: brightness(0) invert(1);  /* Inverts the image color to white */    
}


/* Optional: Control the size of the <h2> element */
h2 {
    margin: 0;        /* Adjust the margin as needed */
    padding: 0;
    text-align: center; /* Centers the logo inside the <h2> */
}

/* Make header sticky */
header {
    position: fixed; /* Changed from absolute to fixed */
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    padding: 35px 100px 0;
    background-color: rgba(0, 0, 0, 0.8); /* Optional: to give it a slight background when scrolling */
    transition: background-color 0.3s ease;
}

header ul.nav {
    display: flex;
}

header ul.nav li {
    margin: 0 15px;
}

/* Menu icon styling */
.menu-icon {
    display: none; /* Hidden by default on larger screens */
    font-size: 30px;
    cursor: pointer;
    color: white; /* Change icon color */
}

@media only screen and (max-width: 600px) {
    header {
        padding: 20px; /* Adjust header padding for smaller screens */
    }

    /* Menu background to match header */
    header ul.nav {
        display: none; /* Initially hidden */
        flex-direction: column;
        width: 100%;
        margin: 0; /* Remove margin to attach directly under header */
        background-color: rgba(0, 0, 0, 0.8); /* Match the header background */
        padding: 15px 20px; /* Add some padding for the menu items */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Optional shadow for depth */
        position: absolute; /* Use absolute positioning */
        top: 100%; /* Position it directly below the header */
        left: 0; /* Align to the left */
        z-index: 10; /* Ensure it appears above other content */
    }

    header ul.nav.active {
        display: flex; /* Show the menu when active */
    }

    header ul.nav li {
        margin: 10px 0; /* Spacing for menu items */
		text-align: center;
        color: #fff; /* Ensure text color is white for visibility */
    }

    .menu-image {
        width: 30px;
        height: 30px;
        filter: brightness(0) invert(1); /* Invert to make it white */
        mix-blend-mode: screen; /* Ensures the image appears bright against dark backgrounds */
    }
    
    /* Style for the container of the menu icon */
    .menu-icon {
        display: block; /* Ensure it's visible */
        cursor: pointer;
        margin-left: -10px; /* Move it left by 10px */
    }
    
    /* Hide the menu icon when the menu is active */
    .menu-icon.hide {
        display: none; /* Hide when the nav is toggled */
    }
}

/*banner area*/

section {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 110px 100px;
	color: #000;
}
@media (max-width:1000px) {
	section {
		padding: 100px 50px;
	}
}
@media (max-width:600px) {
	section {
		padding: 125px 30px;
	}
}
section p {
	max-width: 800px;
	text-align: left;
	margin-bottom: 35px;
	padding: 0 0px;
	line-height: 2;
}
.banner-area {
	position: relative;
	justify-content: center;
	min-height: 100vh;
	color: #fff;
	text-align: center;
	background: linear-gradient(to bottom, rgb(0 0 0 / 29%), rgba(255, 255, 255, 0.2));
}
.banner-area .banner-img {
	background-image: url(images/a1.jpg);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-background-size: cover;
	background-size: cover;
	z-index: -1;
	background-position: center center;
}
.banner-area .banner-img::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: .7;
}
.banner-area h1 {
	margin-bottom: 15px;
	font-size: 65px;
	text-transform: uppercase;
}
.banner-area h1 span {
	color: #d1ba37;
	font-family: "Old Standard TT", serif;
    font-weight: 700;
    font-style: normal;
}
.banner-area h3 span{
	color: #fab14a;
	font-family: "Oleo Script", system-ui;
    font-weight: 700;
	letter-spacing: 4px;
	font-size: 25px;
    font-style: normal;
}

.banner-area h3 {
	font-size: 15px;
	letter-spacing: 4px;
	font-weight: 100;
	text-transform: uppercase;
}
.banner-area a.banner-btn {
	padding: 15px 35px;
	background: #0aa1bf;
	text-transform: uppercase;
}
@media (max-width:800px) {
	.banner-area {
		min-height: 600px;
	}
	.banner-area h1 {
		font-size: 27px;
	}
	.banner-area h3 {
		font-size: 20px;
	}
	.banner-area a.banner-btn {
		padding: 8px 20px;
	}
}
/* About area with parallax effect */
.parallax-banner {
    position: relative;
    height: 800px;
    background-image: url('images/banner.jpg'); /* Replace with your banner image */
    background-attachment: fixed; /* Parallax effect */
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    z-index: 1;
}

.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)); /* Darkened the overlay */
    z-index: -1;
}

/* about area */
.section-title {
    font-size: 50px;
    text-transform: uppercase;
    margin-bottom: 30px;
    margin-top: 30px;
    color: #fff;
    z-index: 2; /* Ensure it's above the gradient */
}
.section-title span {
    color: #fab14a;
}

.about-area{
	height: fit-content;
}

.about-content {
    display: flex;
    justify-content: space-between; /* Push left and right sections to the edges */
    flex-wrap: nowrap; /* Prevent wrapping so the elements stay aligned to the sides */
    width: 100%; /* Ensure it spans the full width */
    max-width: 1200px; /* Add a max-width for central alignment */
    margin: 0 auto; /* Center the content */
    padding: 0 20px; /* Add padding for spacing on the sides */
    z-index: 2;
}

.about-left {
    flex-basis: 35%;
    border-radius: 10px;
    height: 500px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.about-left:hover {
    transform: scale(1.05); /* Add hover effect */
}

.about-right {
    flex-basis: 60%;
    text-align: left;
    z-index: 2;
}

.about-right h2 {
    font-family: "Dancing Script";
    font-size: 48px;
    font-weight: 700;
    color: #fff;
    margin-top: 20px;
    line-height: 1.2;
    text-align: left;
}

.about-right p {
    font-family: "Abril Fatface", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 32px;
    color: #fff;
    max-width: 800px;
    margin-bottom: 20px;
}

.about-features li {
    color: #ccc;
    font-size: 18px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.about-features li i {
    color: #bf0a30;
    margin-right: 10px;
}

@media (max-width: 768px) {
	.about-right h2{
        font-size: 36px;
	}

	.about-right p{
		font-size: 24px;
	}

	.about-right{
		margin-left: 20px;
	}

	.section-title {
		margin-top: -80px;
	}
}

@media (max-width: 600px) {
    /* Adjust padding and margin for the about section */
    .about-area {
        padding: 40px 20px;  /* Reduce padding for smaller screens */
        margin-top: 80px;    /* Add margin to prevent overlapping */
		height: fit-content;
    }

    /* Adjust section title styling for smaller screens */
    .section-title {
        font-size: 24px;
        margin-top: 40px;  /* Increase top margin for the title */
    }

    /* Stack content vertically and center-align */
    .about-content {
        flex-direction: column; /* Stack the iframe and content vertically */
        align-items: center;    /* Center-align the content */
    }

    /* Make iframe take full width for smaller screens */
    .about-left iframe {
        width: 100%;  /* Full width of the container */
        height: auto; /* Allow iframe to adjust height */
        max-width: 300px; /* Limit max width for readability */
    }

    /* Ensure the left and right sections stack */
    .about-left {
        flex-basis: 100%;  /* Full width for the iframe */
        margin-bottom: 20px;  /* Add spacing below iframe */
		margin-top: 20px;
    }

    .about-right {
        flex-basis: 100%; /* Full width for the content */
        text-align: center; /* Center align text for smaller screens */
    }

	.tabs-header.basic-color-background{
		display: none;
	}

    /* Adjust font sizes for readability on small screens */
    .about-right h2 {
        font-size: 24px;  /* Smaller font size for headings */
		text-align: center;
    }

    .about-right p {
        font-size: 18px;  /* Smaller font size for paragraphs */
		text-align: center;
    }
}

.msg-area {
	background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(images/a2.jpeg);
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
	align-items: center;
	background-attachment: fixed;
	color: #fff;
	text-align: center;
}

.msg-area h2{
	font-size: 48px;
}

.msg-area h2 span {
	color: #fab14a;
	font-size: 48px;
}

.msg-area p{
	font-size:24px;
	text-align: center;
}
.msg-area p span{
	font-size:24px;
	color: #fab14a;
}

@media (max-width: 768px) {
	.msg-area h2{
		font-size: 28px;
	}

	.msg-area h2 span{
		font-size: 28px;
	}

	.msg-area p{
		font-size: 20px;
		text-align: center;
	}

	.msg-area p span{
		font-size: 20px;
	}
}

@media (max-width: 600px) {

	.msg-area h2{
		font-size: 18px;
	}

	.msg-area h2 span{
		font-size: 18px;
	}

	.msg-area p{
		font-size: 12px;
		text-align: center;
	}

	.msg-area p span{
		font-size: 12px;
	}
}


/*footer*/
footer {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	color: #fff;
	background-color: #000;
	padding: 60px 0;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.experience-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    position: relative;
	height: 500px;
    overflow: hidden; /* Ensure content does not overflow */
}

.container {
    display: flex;
    max-width: 1200px;
    width: 100%;
    position: relative; /* Relative positioning for child elements */
}

.left-container {
    flex: 1;
    display: flex;
    justify-content: center;
    position: relative; /* For pattern positioning */
}

.right-container {
    flex: 1;
    padding-left: 20px; /* Slight padding for spacing */
}

.right-container h2{
	font-family: "Merriweather", serif;
    font-weight: 900;
    font-style: italic;
    color: #fab14a;
	font-size: 32px;
}

.experience-img {
    max-width: 65%; /* Ensure the image is responsive */
    height: auto;
    z-index: 2; /* Ensure the image is above the overlays */
    position: relative; /* Needed to apply z-index */
}

.right-container p {
    margin: 0;
    padding: 0;
    text-indent: 0;
	font-family: "Merriweather", serif;
	font-weight: 700;
	font-style: bold;

}

p {
    margin: 0;
    padding: 0;
    text-indent: 0;
	font-family: "Halant", serif;
    font-weight: 700;
    font-style: normal;
}

/* Overlay styles */
.experience-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(173, 216, 230, 0.3), rgba(255, 215, 0, 0.2));
    z-index: 1; /* Place behind content */
}

.left-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: -30px; /* Adjust as needed */
    width: 20px; /* Width of the striped area */
    height: 100%;
    background-image: repeating-linear-gradient(
        135deg,
        rgb(230 187 111), /* More visible gold */
        rgb(230 187 111) 10px,
        transparent 10px,
        transparent 20px
    );
    z-index: 0; /* Behind the image */
}

/* Blueish overlay on the left */
.left-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%; /* Adjust width as needed */
    height: 100%;
    background: rgba(255, 255, 255, 0.4); /* Light blueish overlay */
    z-index: 0; /* Behind the image */
}

/* Circular rings on the bottom right */
.experience-section::after {
    content: '';
    position: absolute;
    bottom: 10px; /* Adjust as needed */
    right: 10px; /* Adjust as needed */
    width: 120px; /* Width of the outer ring */
    height: 120px; /* Height of the outer ring */
    border: 10px solid #fab14a; /* Golden ring */
    border-radius: 50%; /* Make it circular */
    z-index: 0; /* Behind content */
}

.experience-section::after {
    content: '';
    position: absolute;
    bottom: 50px; /* Adjust position for the smallest ring */
    right: 50px; /* Adjust position for the smallest ring */
    width: 80px; /* Width of the smallest ring */
    height: 80px; /* Height of the smallest ring */
    border: 5px solid #fab14a; /* Another golden ring */
    border-radius: 50%; /* Make it circular */
    z-index: 0; /* Behind content */
}

/* Media query for screens with max-width of 768px */
@media screen and (max-width: 768px) {
    .experience-section {
        flex-direction: column; /* Stack the containers on top of each other */
        height: auto; /* Adjust height to fit content */
    }

    .experience-img {
        max-width: 90%; /* Make the image almost full width */
        height: 250px; /* Ensure the image remains responsive */
		top: 10%;
    }

    .right-container h2 {
        font-size: 16px; /* Reduce font size */
    }

    .right-container p {
        font-size: 12px; /* Reduce paragraph font size */
    }

    .experience-section::before {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(173, 216, 230, 0.2), rgba(255, 215, 0, 0.1));
    }

    /* Adjust the circular rings */
	.experience-section::after {
        display: none;
    }
}

/* Media query for screens with max-width of 600px */
@media screen and (max-width: 600px) {
    .experience-section {
        flex-direction: column; /* Stack the containers vertically */
    }

    .container {
        flex-direction: column; /* Align containers in a single column */
    }

    .left-container {
        order: 1; /* Make left container appear on top */
    }

    .right-container {
        order: 2; /* Right container appears below */
        padding-left: 0;
        padding-top: 20px;
    }

    .experience-img {
        max-width: 70%; /* Ensure the image takes up full screen width */
        height: auto; /* Responsive height */
    }

    .right-container h2 {
        font-size: 20px; /* Further reduce font size */
    }

    .right-container p {
        font-size: 14px; /* Further reduce paragraph font size */
    }

    /* Reduce size of circular rings */
    .experience-section::after {
        display: none;
    }
}

@media (min-width:375px) {
	.continue-text {
		display: inline-block; /* Keep it inline to not break the flow */
		margin-left: 10px; /* Adjust to align with the previous line */
	}
}

@media (max-width:320px) {
	.about-area p{
		font-size: 14px;
	}
}

@media (max-width:375px) {
	p{
		font-size: 12px;
	}
}