* {
    margin: 0;
    padding: 0;
    font-family: 'Calibri', sans-serif;
    box-sizing: border-box;
}
.hd {
    background: rgba(0, 0, 0, 0.5); /* Add a dark overlay */
    background-image: url('images/backdrop.jpg');
    background-size: cover;
    position: relative;
    background-repeat: no-repeat; 
    background-position: center center; 
    width: 100%; 
    height: 100vh; 
    opacity: 1; 
    visibility: inherit; 
    z-index: -1; /* Set the backdrop behind content */
}
/* Cover Image Section */
.cover-section {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    background-color: #f9f9f9; 
}

.cover-section .cover-image {
    width: 200%;
    height: auto;
    max-height: 1000px; /* Adjust the max height as needed */
    object-fit: cover  ; /* Ensures the image covers the section properly */
}
.acover-section .acover-image{
    width: 120%;
    height: auto;
    max-height: 650px; /* Adjust the max height as needed */
    object-fit: cover  ; /* Ensures the image covers the section properly */
}
.ccover-section .ccover-image{
    width: 120%;
    height: auto;
    max-height: 650px; /* Adjust the max height as needed */
    object-fit: cover  ; /* Ensures the image covers the section properly */
}
.scover-section .scover-image{
    width: 120%;
    height: auto;
    max-height: 650px; /* Adjust the max height as needed */
    object-fit: cover  ; /* Ensures the image covers the section properly */
}
/* Main Content Section */
.main-content {
    text-align: center;
    padding: 50px;
    background-color: #d69a68; /* Adjust background if necessary */
}

.main-content h1 {
    font-size: 36px;
    color: white;
}

.main-content p {
    font-size: 18px;
    color: #666;
}

/* Top Contact Info */
.top-contact {
    background-color: #f9f9f9;
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
}

.top-contact .container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.top-contact .contact-info {
    font-size: 14px;
    color: #333;
}

.top-contact .contact-info a {
    color: #ff774c;
    text-decoration: none;
}

/* General Reset */
* {
    margin: 0;
    padding: 0;
    font-family: 'Nunito', sans-serif;
}

/* Navbar and Logo */
header {
    position: fixed; /* Fixes the navbar at the top */
    top: 0;
    width: 100%;
    z-index: 1000;
    background-color: white;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 6%;
}

nav .logo img {
    width: 80px; /* Adjust the logo size */
    margin-left: 0;
}
.toggle-menu {
    display: none; /* Hidden on larger screens */
    cursor: pointer;
    font-size: 28px;
    color: #333;
}

.toggle-menu i {
    margin-right: 20px;
}
nav .nav-links ul {
    display: flex;
    list-style: none;
}

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

nav .nav-links ul li a {
    text-decoration: none;
    font-size: 16px;
    color: black;
    text-transform: uppercase;
}

nav .nav-links ul li a.active {
    color: #ff774c; /* Highlight the active page */
}

/* Hover effect for navigation links */
nav .nav-links ul li a:hover {
    color: #ff774c;
}
/* Mobile Navigation - Toggle Menu for Smaller Screens */
@media (max-width: 768px) {
    nav {
        flex-direction: column;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 100%;
        left: 0;
        padding: 20px;
        background-color: white;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    }
    .nav-links.active {
        display: flex;  /* Show the menu when active */
    }
    .nav-links ul {
        flex-direction: column;
        width: 100%;
    }

    .nav-links ul li {
        text-align: center;
        padding: 15px 0;
        border-bottom: 1px solid #eee;
    }

    /* Show hamburger menu */
    .toggle-menu {
        display: block;
    }

    .toggle-menu i {
        margin-right: 20px;
    }
    .nav-links ul li a {
        font-size: 18px; /* Adjust font size for smaller screens */
    }
    nav {
        justify-content: center; /* Centers the logo and toggle on smaller screens */
    }
}

/* Larger screens: Ensure logo is aligned */
@media (min-width: 768px) {
    .nav-links ul {
        display: flex;
        list-style: none;
    }

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

    .toggle-menu {
        display: none; /* Hide toggle on large screens */
    }
}

/* Navbar links */
nav .nav-links ul li a {
    text-decoration: none;
    font-size: 16px;
    color: black;
    text-transform: uppercase;
}

nav .nav-links ul li a.active {
    color: #99513c;
}
/* Hover effect for navigation links */
nav .nav-links ul li a:hover {
    color: #99513c;
}

/* Top Contact Info */
.top-contact {
    margin-top: 60px; /* Adds spacing below the fixed navbar */
    background-color: #f9f9f9;
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
}

.top-contact .container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.top-contact .contact-info {
    font-size: 14px;
    color: #333;
}

.top-contact .contact-info a {
    color: #ff774c;
    text-decoration: none;
}

/* Body padding to prevent content overlap with navbar */
body {
    padding-top: 80px; /* Ensures content doesn’t overlap with the navbar */
}

/* Responsive Design */
@media (max-width: 700px) {
    nav {
        flex-direction: column;
    }

    nav .nav-links ul {
        flex-direction: column;
        margin-top: 10px;
    }

    nav .nav-links ul li {
        margin: 10px 0;
    }

    nav .logo img {
        width: 140px;
    }
}


.text-box{
    width:90%;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    
}
/* Additional styles */
h1 {
    font-size: 48px;
    font-weight: 600;
}

h3 {
    font-size: 12px;
    text-align: justify;
    text-justify: inter-word;
}

/* Add responsiveness for smaller screens */
@media (max-width: 768px) {
    body {
        padding: 60px 0 0 0; /* Adjust padding for smaller screens */
    }

    nav img {
        width: 100px; /* Even smaller logo for mobile */
    }

    .text-box h1 {
        font-size: 36px; /* Reduce heading size for mobile */
    }
}
.text-box h1{
    font-size: 62px;
}
.text-box p{
    margin: 10px 0 40px;
    font-size: 14px;
    color: #fff;
}
.hero-btn{
    display: inline-block;
    text-decoration:none;
    color:#fff;
    border: 1px solid #fff;
    padding: 12px 34px;
    font-size: 15px;
    background: transparent;
    position: relative;
    cursor:pointer;
}
.hero-btn:hover{
    border: 1px solid #ecccba;
    background:#ecccba;
    transition: 1s;
}
@media(max-width: 700px){
    .text-box h1 {
        font-size: 62px;
    }
    .nav-links ul li{
        display: block;
    }
    .nav-links {
        position: absolute;
        background: powderblue;
        height: 100vh;
        width: 200px;
        top: 0;
        right: -200px;
        text-align: left;
        z-index: 2;
    }
    .nav-links{
        padding: 30px;
    }
}

body {
    background-color: #d69a68; /* A shade of brown */
    color: #fff; /* Sets text color to white for better readability */
    margin: 0;
    padding: 80px 0 0 0; /* Padding to prevent content being hidden behind the navbar */
    padding-top: 80px; 
    font-family: Arial, sans-serif;
}
/* Text box for the hero section (empty in your current code) */
.text-box {
    width: 90%;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/*------CAMPUS (Services Section)-------*/
.campus {
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 50px;
}

.campus-col {
    flex-basis: 48%;  /* Make the columns 48% wide for a 2-column layout */
    border-radius: 10px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.campus-col img {
    width: 100%;
    height: auto;
    object-fit: cover;  /* Ensures image covers the div */
}

.layer {
    
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.layer:hover {
    background: #f5a97d; /* Brown overlay on hover */
}

.layer h3 {
    font-weight: 500;
    color: #fff;
    font-size: 26px;
    margin-bottom: 20px;
    opacity: 0;
    transition: 0.5s;
}

.layer:hover h3 {
    opacity: 1;
}

.layer a.btn {
    font-weight: 500;
    color: #fff;
    background-color: #ff774c;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    opacity: 0;
    transition: 0.5s;
}

.layer:hover a.btn {
    opacity: 1;
}
@media (max-width: 768px) {
    .campus-col {
        flex-basis: 100%;  /* Full width for mobile/tablets */
    }
    
    .layer {
        width: 100%;  /* Allow full width on small screens */
        height: 100%;
        top: 0;
        left: 0;
    }
    
    .layer:hover {
        background: rgba(245, 169, 125, 0.9); /* Darker hover effect */
    }

    .campus {
        width: 95%; /* Adjust container width */
    }
}

/*------COURSE-------*/

.course{
    width: 80%;
    margin:auto;
    text-align: center;
    padding-top: 100px;
}
.course h1{
    font-size:48px;
    font-weight: 600;
    margin-bottom: 20px;
    color:#292929;
}
.course p {
    margin-top: 10px;  /* Adjusts the spacing above the p tag */
    line-height: 1.6;
    font-size: 24;
    color: #292929;
}
h3{font: size 12px;
    text-align: justify;
    text-justify: inter-word;   
    color:#292929;
}


.row{
    margin-top: 5%;
    display: flex;
    justify-content: space-between;
}
/* Styling for course columns */
.course-col {
    background-color: #f16c33;
    border-radius: 20px;
    padding: 25px;
    margin: 10px;
    text-align: center;
    flex-basis: 30%;
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
    text-decoration: none; /* Ensure no underline */
}

.course-col:hover {
    box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.2);
    transform: translateY(-5px);
}

.course-col h1 {
    font-size: 36px;
    font-weight: bold;
    color: white;
}

.course-col p {
    color: #fff;
    font-size: 18px;
    font-weight: 300;
    line-height: 22px;
    padding: 10px;
    text-align: center;
    text-justify: inter-word;
}
.course /* Ensure anchor tag styling */a {
    text-decoration: none; /* Remove underline for links */
    color: inherit; /* Inherit the color from parent */
}

/* Responsive Design */
@media (max-width: 768px) {
    .course-col {
        flex-basis: 100%; /* Make each column take full width */
        margin: 10px 0;
    }

    .course-col h1 {
        font-size: 28px; /* Reduce heading size for mobile */
    }

    .course-col p {
        font-size: 16px; /* Reduce paragraph size for mobile */
        line-height: 20px;
    }
}

@media (max-width: 480px) {
    .course-col h1 {
        font-size: 24px; /* Further reduce heading size for smaller screens */
    }

    .course-col p {
        font-size: 14px; /* Smaller paragraph size */
        line-height: 18px;
    }
}

/* Flexbox row for the course columns */
.row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 20px 0;
}

/* Responsive adjustment for row */
@media (max-width: 768px) {
    .row {
        justify-content: center;
    }
}

/*------FACILITIES-------*/
/*------FACILITIES-------*/
.facilities {
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 100px;
}

.facilities h1{
    color:#292929;
}
.fac-col {
    flex-basis: 31%;
    border-radius: 10px;
    margin-bottom: 5%;
    text-align: left;
}

.fac-col img {
    width: 100%;
    border-radius: 10px;
}

.fac-col h3 {
    margin-top: 16px;
    margin-bottom: 15px;
    text-align: center;
    text-justify: inter-word;
    font-size: 28px;
}

.fac-col p {
    margin-top: 16px;
    margin-bottom: 15px;
    font-size: 1.2rem; /* Increased font size */
    line-height: 1.6;  /* Improved readability */
    color: #575757;
    text-align: justify;
    text-justify: inter-word;
}

/* Responsive for smaller screens */
@media (max-width: 768px) {
    .fac-col {
        flex-basis: 100%;  /* Full-width for smaller screens */
        margin-bottom: 20px;
    }

    .facilities {
        padding-top: 50px;
    }

    .fac-col h3 {
        font-size: 24px; /* Smaller heading size for mobile */
    }

    .fac-col p {
        font-size: 14px; /* Reduce paragraph size */
        line-height: 1.4;
    }
}

/* Why Use Clearview Service Section */
.why-use {
    background-color: #fff;
    text-align: center;
    padding-top: 50px;
}

.why-use h2 {
    font-size: 22px;
    color: #ab7c7c;
}

.why-use h1 {
    font-size: 36px;
    color: #292929;
    margin-bottom: 20px;
}

.why-use p {
    font-size: 18px;
    color: #575757;
    max-width: 800px;
    margin: 0 auto 40px;
    line-height: 1.8;
}

.why-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
}

.feature-box {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 30px;
    width: 300px;
    text-align: center;
    transition: transform 0.3s ease-in-out;
}

.feature-box:hover {
    transform: translateY(-10px);
}

.feature-icon {
    font-size: 36px;
    color: #ab7c7c;
    margin-bottom: 15px;
}

.feature-text h3 {
    font-size: 22px;
    color: #292929;
    margin-bottom: 10px;
    text-align: center;
}

.feature-text p {
    font-size: 16px;
    color: #575757;
    line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 768px) {
    .why-use h1 {
        font-size: 28px; /* Reduce heading size */
    }

    .why-use p {
        font-size: 16px; /* Reduce paragraph size */
        max-width: 100%; /* Adjust for smaller screens */
    }

    .why-features {
        flex-direction: column; /* Stack features vertically */
    }

    .feature-box {
        width: 100%;  /* Full-width feature boxes on mobile */
        max-width: 500px; /* Maximum width for better layout */
    }

    .feature-icon {
        font-size: 28px; /* Smaller icon size */
    }

    .feature-text h3 {
        font-size: 20px; /* Smaller heading size */
    }

    .feature-text p {
        font-size: 14px; /* Smaller text size */
        line-height: 1.4;
    }
}
.why-us {
    display: flex;
    color: #fff; 
    padding: 50px 100px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap; /* Allows wrapping for smaller screens */
}

.why-us p {
    color: #fff;
    text-align: left;
}

.why-left {
    max-width: 40%;
}

.why-left .small-title {
    color: #ab7c7c; /* Lighter text color for small title */
    font-weight: bold;
    margin-bottom: 10px;
}

.why-left h1 {
    color: #292929; /* Darker font color for the heading */
    font-size: 2.5rem;
    line-height: 1.2;
}

.why-right {
    max-width: 50%;
    color: #575757;
}

.why-right p {
    font-size: 1.2rem; /* Increase this value for larger text */
    line-height: 1.6;  /* Adjust for better readability */
    color: #575757;    /* Keeping the color consistent */
}

.why-features {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    justify-content: center; /* Ensures the features are centered on smaller screens */
}

.feature {
    padding: 10px 20px;
    margin: 10px;
    border: 2px solid #141212;
    border-radius: 30px;
    font-size: 2rem;
    color: #141212;
    display: inline-block;
    text-align: center;
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
    .why-us {
        flex-direction: column; /* Stack items vertically on small screens */
        padding: 20px; /* Reduce padding */
    }

    .why-left, .why-right {
        max-width: 100%; /* Full width for mobile */
        text-align: center; /* Center text on smaller screens */
    }

    .why-left h1 {
        font-size: 2rem; /* Reduce heading size */
    }

    .why-right p {
        font-size: 1rem; /* Reduce paragraph size */
        line-height: 1.4;
        text-align: center; /* Center align on mobile */
    }

    .why-features {
        justify-content: center;
        flex-direction: column; /* Stack features vertically */
        align-items: center;
    }

    .feature {
        font-size: 1.5rem; /* Smaller font for features */
        width: 80%; /* Make features full-width */
        max-width: 400px; /* Limit the max width */
    }
}


/* PEXA Announcement Section */
.pexa-announcement {
    
    padding: 50px;
}

.pexa-container {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    margin: auto;
}

.pexa-img img {
    width: 600px; /* Adjust the size of the PEXA image */
    margin-right: 30px;
}

.pexa-content {
    max-width: 600px;
    color: #523524;
}

.pexa-content h2 {
    font-size: 24px;
    font-weight: bold;
    color: #3a2922;
}

.pexa-content ul {
    list-style: none;
    padding: 0;
}

.pexa-content ul li {
    font-size: 18px;
    margin: 10px 0;
    display: flex;
    align-items: center;
}

.pexa-content ul li::before {
    content: '✔'; /* A checkmark before each point */
    margin-right: 10px;
    color: #523524;
}

.lenders {
    text-align: center;
    padding: 50px 20px;
    background-color: #f9f9f9;
}

.lenders h2 {
    font-size: 2em;
    margin-bottom: 10px;
    font-weight: 600;
    color: #333;
}

.lenders p {
    font-size: 1.2em;
    color: #555;
    margin-bottom: 30px;
}

.lender-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.lender-logos img {
    max-width: 120px; /* Adjust logo size */
    height: auto;
    padding: 10px;
    transition: transform 0.3s;
}

.lender-logos img:hover {
    transform: scale(1.1);
}

/* Media Queries for Responsiveness */

/* For large screens (desktops and larger tablets) */
@media (min-width: 1024px) {
    .lenders h2 {
        font-size: 2.5em;
    }

    .lenders p {
        font-size: 1.3em;
    }

    .lender-logos img {
        max-width: 150px; /* Larger logo size for big screens */
    }
}

/* For medium screens (tablets) */
@media (max-width: 1024px) {
    .lender-logos img {
        max-width: 110px; /* Smaller logos for tablets */
    }
}

/* For small screens (mobiles) */
@media (max-width: 768px) {
    .lenders h2 {
        font-size: 1.8em;
    }

    .lenders p {
        font-size: 1.1em;
    }

    .lender-logos {
        gap: 15px; /* Decrease gap between logos */
    }

    .lender-logos img {
        max-width: 80px; /* Smaller logos for mobile */
    }
}


/* Call To Action (CTA) Section */
.cta {
    background-color: #f9f2f2; /* Light pink background */
    padding: 60px 20px;
    text-align: center;
}

.cta h2 {
    font-size: 16px;
    color: #ab7c7c; /* Soft brownish-red color for subheading */
    text-transform: uppercase;
    margin-bottom: 10px;
}

.cta h1 {
    font-size: 28px;
    font-weight: bold;
    color: #2b1611; /* Dark brown for main heading */
    margin-bottom: 15px;
}

.cta p {
    font-size: 18px;
    color: #575757; /* Light gray for supporting text */
    margin-bottom: 25px;
    text-align: center;
}

.cta-btn {
    display: inline-block;
    padding: 12px 30px;
    font-size: 16px;
    background-color: #5b3d2e; /* Dark brown button */
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.cta-btn:hover {
    background-color: #422a1d; /* Darker shade on hover */
}

/* Responsive Design */
@media (max-width: 768px) {
    .cta h1 {
        font-size: 24px;
    }

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

    .cta-btn {
        font-size: 14px;
        padding: 10px 20px;
    }
}

/*-----FOOTER-------*/
/* Footer styling */
footer {
    background-color: #2b1611; /* Dark background */
    color: #f0e7d8; /* Light text */
    padding: 40px 0;
    display: flex;
    justify-content: center;
    font-family: 'Nunito', sans-serif;
}

.footer-container {
    display: flex;
    justify-content: space-around;
    width: 80%;
    max-width: 1200px;
}

.footer-left, .footer-middle, .footer-right {
    width: 30%;
}

.footer-left img {
    max-width: 80px; /* Adjusted logo size (make it bigger) */
    margin-bottom: 15px;
}

.footer-left p {
    font-size: 14px;
    line-height: 1.6;
    color: #d3c4b8;
    text-align: left;
}

.footer-middle h4, .footer-right h4 {
    color: #b27f66;
    margin-bottom: 15px;
    font-size: 18px;
    text-transform: uppercase;
}

.footer-middle ul {
    list-style-type: none;
    padding: 0;
}

.footer-middle ul li {
    margin-bottom: 10px;
}

.footer-middle ul li a {
    color: #d3c4b8;
    text-decoration: none;
    font-size: 14px;
}

.footer-middle ul li a:hover {
    color: #b27f66;
    text-decoration: underline;
}

.footer-right {
    text-align: left;
}

.footer-right h4 {
    color: #b27f66;
    margin-bottom: 15px;
    font-size: 18px;
    text-transform: uppercase;
}

.contact-info p {
    display: flex;
    align-items: center;
    font-size: 13px;
    margin: 10px 0;
    color: #f0e7d8;
}

.contact-info p i {
    color: #ff774c; /* Icon color (Orange) */
    font-size: 16px;
    margin-right: 10px;
}

.contact-info a {
    color: #f0e7d8; /* Email color */
    text-decoration: none;
}

.contact-info a:hover {
    color: #ff774c; /* Change color on hover */
}

/* Button styling for "Contact Us" */
.footer-right .contact-btn {
    display: inline-block;
    text-decoration: none;
    color: #ff774c;
    border: 1px solid #ff774c;
    padding: 10px 20px;
    font-size: 15px;
    margin-top: 20px;
    background-color: transparent;
    transition: background-color 0.3s, color 0.3s;
}

.footer-right .contact-btn:hover {
    background-color: #ff774c;
    color: #fff;
}


/* Media query for smaller screens */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        align-items: center;
    }

    .footer-left, .footer-middle, .footer-right {
        width: 100%;
        text-align: left;
        margin-bottom: 20px;
    }

    .footer-left img {
        max-width: 120px; /* Slightly reduce the logo size on smaller screens */
    }
}
.contact-section {
    background-color: #523524; /* Changed background for better readability */
    padding: 50px 0;
    color: white;
    text-align: center;
}

.contact-section h1 {
    font-size: 36px;
    margin-bottom: 20px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 400px;
}

.form-group label {
    text-align: left;
    font-size: 18px;
    margin-bottom: 5px;
}

.form-group input, .form-group textarea {
    padding: 10px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    width: 100%;
}

.form-group textarea {
    height: 100px;
    resize: none;
}

.submit-btn {
    padding: 15px 30px;
    font-size: 18px;
    background-color: #412211;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.submit-btn:hover {
    background-color: #2e140c;
}

/* Responsive */
@media (max-width: 768px) {
    .form-group {
        width: 90%;
    }
}


/* Location */
.location {
    width: 80%;
    margin: auto;
    padding: 80px 0;
    text-align: center;
}

.location iframe {
    width: 100%;
}
.location p{
    margin-bottom: 25px;
    margin-top: 20px;
    font-weight: 600;
}

.icon .fa {
    color: #f44336;
    margin: 0 13px;
    cursor: pointer;
    padding: 18px 0;
}
.icon .fa-brands {
    color: #f44336;
    margin: 0 13px;
    cursor: pointer;
    padding: 18px 0;
}
.enquire {
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 100px;
}
.enhancements {
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 100px;
}
/* Styling for "Welcome to Clearview" Section */
.about-us {
    background-color: #f9f9f9;
    text-align: center;
    justify-content: center;
    padding-bottom: 30px;
}

.about-us h2 {
    font-size: 22px;
    color: #ab7c7c;
    text-align: center;
    margin-bottom: 20px;
}

.about-us h1 {
    font-size: 36px;
    color: #292929;
    margin-bottom: 20px;
}
.about-us ul{
    list-style-type: none;
    margin-left: 20px;
}



.about-us ul li {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 10px;
    color: #550e0e;
    position: relative;
}


.about-us p {
    font-size: 18px;
    color: #575757;
    line-height: 1.5;
    max-width: 800px;
    padding-bottom: 30px;
    margin: 0 auto 20px;
    text-align: justify;
}

.about-images {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.about-image img {
    width: 100%;
    max-width: 400px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.investment-properties {
    text-align: center;
    margin: 20px 0;
}

.checkboxes {
    display: flex;
    justify-content: center;
    gap: 40px; /* Space between the checkboxes */
    color:#000;
}

.checkboxes label {
    display: flex;
    align-items: center;
    font-size: 18px;
    color:#550e0e
}

.checkboxes input[type="checkbox"] {
    margin-right: 8px;
    transform: scale(1.5); /* Enlarge the checkboxes */
    color: #a00b0b;
}

/* Consistent Button Styling */
.button {
    display: inline-block;
    padding: 12px 30px;
    font-size: 18px;
    background-color: #ab7c7c;
    color: white;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s;
}

.button:hover {
    background-color: #ff5023;
}

/* Responsive Styling for Mobile Devices */
@media (max-width: 768px) {
    .about-images {
        flex-direction: column;
        align-items: center;
    }

    .why-features {
        flex-direction: column;
        gap: 20px;
    }

    .feature-box {
        width: 100%;
        max-width: 350px;
    }
}

/* Services Section */
.services {
    display: flex;
    padding: 40px 20px;
    background-color: #fff;
}

.services-container {
    display: flex;
    width: 100%;
}

/* Sidebar Menu */
.services-sidebar {
    flex: 1;
    max-width: 300px; /* Make sidebar wider */
    background-color: #412211;
    padding: 30px;
    border-radius: 10px;
    color: #fff;
    margin-right: 20px;
}

.services-sidebar h3 {
    color: #fff;
    font-size: 22px;
    margin-bottom: 20px;
    border-bottom: 2px solid #fff;
    padding-bottom: 10px;
}

.services-sidebar ul {
    list-style-type: none;
}

.services-sidebar ul li {
    margin-bottom: 15px;
}

.services-sidebar ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 18px;
    display: block;
    padding: 12px;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Highlight the active section (when clicked) */
.services-sidebar ul li a.active {
    background-color: #ecccba;
    color: #412211;
}

.services-sidebar ul li a:hover {
    background-color: #ecccba;
    color: #412211;
}

/* Services Section */
.services {
    display: flex;
    padding: 40px 20px;
    background-color: #fff;
}

.services-container {
    display: flex;
    width: 100%;
}
.learn-more-btn {
    display: inline-block;
    padding: 10px 10px;
    margin-top: 40px; /* Reduce the space between image and button */
    margin-bottom: 40px;
    background-color: #a00b0b;
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
}

.learn-more-btn:hover {
    background-color: #8c0000;
    color: white;
    text-decoration: none;
}
/* Sidebar Menu */
.services-sidebar {
    flex: 1;
    max-width: 300px; /* Wider sidebar */
    background-color: #412211;
    padding: 30px;
    border-radius: 10px;
    color: #fff;
    margin-right: 20px;
    position: sticky; /* Make it sticky */
    top: 20px; /* Stays 20px from the top of the screen */
}

.services-sidebar h3 {
    color: #fff;
    font-size: 22px;
    margin-bottom: 20px;
    border-bottom: 2px solid #fff;
    padding-bottom: 10px;
}

.services-sidebar ul {
    list-style-type: none;
}

.services-sidebar ul li {
    margin-bottom: 15px;
}

.services-sidebar ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 18px;
    display: block;
    padding: 12px;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Highlight the active section (when clicked) */
.services-sidebar ul li a.active {
    background-color: #ecccba;
    color: #412211;
}

.services-sidebar ul li a:hover {
    background-color: #ecccba;
    color: #412211;
}

/* Main Content Area */
.services-content {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center-aligns everything, including image and button */
    padding: 30px;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0px 0px 10px rgba(97, 23, 23, 0.1);
    text-align: center;
}

.services-content h2 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #412211;

}

.services-content img {
    width: 100%;
    max-width: 400px;
    margin-bottom: 20px;
    border-radius: 20px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.services-content p, .services-content ul {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 10px;
    color: #333;
    text-align: center; /* Justify text for professionalism */
}

.services-content h3 {
    font-size: 18px;
    margin-bottom: 10px;
    color: #412211;
}

.services-content ul {
    list-style-type: none;
    margin-left: 20px;
}

.services-content ul li {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 10px;
    color: #333;
    position: relative;
}

.services-content ul li::before {
    content: '•';
    font-size: 20px;
    color: #412211;
    position: absolute;
    left: -20px;
}

html {
    scroll-behavior: smooth;
}
/* Hero Section */
.hero {
    height: 100px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
}

.hero-text {
    text-align: center;
    color: rgb(80, 21, 21);
}
.hero-text h3{
    color: rgb(80, 21, 21);
    font-size: 24px;
}
.hero h1 {
    font-size: 36px;
    margin-bottom: 10px;
}

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

/* Modal CSS */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 999; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

.modal-content {
    background-color: white;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border-radius: 5px;
    width: 80%; /* Could be more or less, depending on screen size */
    max-width: 400px; /* Maximum width */
    text-align: center;
}

.close-btn {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-btn:hover,
.close-btn:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}