/* General Reset */
body, h1, h2, h3, p, ul, li, a {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    
}

.top-section {
   background: url('/images/homebg1.jpg') no-repeat center center;
    background-attachment: fixed; /* Optional for a nice scrolling effect */
    padding-bottom: 50px; /* Prevents it from cutting off */
}

ul {
    list-style-type: none;
}

body {
    background-color: #F0F8FF; /* Very Light Blue */
    color: #002147; /* Dark Blue Text */
    line-height: 1.6;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */


header {
 
    background-color:rgba(101, 175, 255, 0.5);
    
    
    position: relative;
    z-index: 2;
    /**background-size: cover; /* Add background image */
   /** animation: moveBackground 30s linear infinite; /* Animation for background */
    color: white;
    padding: 15px 0;
    box-sizing: border-box;
    position: relative;
}


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

header nav ul {
    display: flex;
    gap: 20px;
}

header nav a {
    color: white;
    text-decoration: none;
    font-size: 1.1em;
    font-weight: bold;
}

header .logo img {
    height: 100px; /* Adjust the size of your logo */
    width: auto;  /* Maintain the aspect ratio */
    max-width: 100%;/* Set a max width to prevent it from becoming too large */
    display: inline-block;
}
/* CTA Section */
.cta {
    
    color: white;
    text-align: center;
    padding: 10px 0; /* Adjusted padding to reduce vertical height */
    margin: 10px 0; /* Margin added to create space from other sections */
}

.cta a {
    background-color: #141699; /* Gold background for the button */
    color: #FFD700; /* yellow */
    padding: 5px 10px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.2em;
    font-weight: bold;
    display: inline-block;
    
}

.cta a:hover {
    background-color: #15a44b; /* Darker green on hover */
}

/* Hero Section */
#hero {
   /** background: url('/images/homebg1.jpg') no-repeat center center;**/
    /**background-color:#ADD8E6; /* Light Blue */
    text-align: center;
    padding: 80px 20px;
}

#hero h1 {
    font-size: 2.8em;
    color: #002147;
    margin-bottom: 20px;
}

#hero p {
    font-size: 1.3em;
    margin-bottom: 30px;
}

#hero .cta-button {
    background-color: #007BFF; /* Medium Blue */
    color: white;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.2em;
    font-weight: bold;
    border: none;
}

#hero .cta-button:hover {
    background-color: #0056b3;
}

.highlight {
    background-color: #0b59bf; /* Blue background */
    color: white; /* White text */
    padding: 5px 10px; /* Adds some spacing */
    border-radius: 5px; /* Optio#0b59bfnal: Rounds the edges */
}
/* About Section */
#about {
    background-color: #F0F8FF;
    padding: 60px 20px;
}

#about .container {
    
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

#about h2 {
    font-size: 2.5em;
    font-weight: bold;
    color: #002147;
    margin-bottom: 20px;
    text-align: center!important;
}

#about .text-content {
    width: 100%;
    text-align: center;
}

#about img {
    width: 45%;
    max-width: 500px;
    border-radius: 10px;
}

/* Services Section */
#services {
    background-color: #D6EAF8; /* Soft Blue */
    padding: 60px 20px;
    text-align: center;
}

#services h2 {
    font-size: 2.5em;
    color: #002147;
    margin-bottom: 40px;
}

.service-boxes {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.service {
    width: 30%;
    background-color: #ADD8E6;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.service h3 {
    font-size: 1.8em;
    margin-bottom: 10px;
    color: #002147;
}

/** our process section **/
#our-process {
       /** background-color: #E0F7FA; /* Light Cyan */
        padding: 50px 20px;
        text-align: center;
        margin-bottom: 50px;
    }

    #our-process h2 {
        font-size: 2.3em;
        color: #1A237E;
        margin-bottom: 30px;
    }

    .process-steps {
        display: flex;
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;
    }

    .process-step {
        text-align: center;
        padding: 15px;
        font-size: 1.1em;
        color: #1A237E;
    }

    .process-step i {
        font-size: 3em;
        color: #01579B;
        margin-bottom: 10px;
    }

    .process-step h3 {
        font-size: 1.6em;
        color: #01579B;
        margin-bottom: 10px;
    }

    .process-step p {
        color: #1A237E;
    }

    /* Mobile-friendly styles */
    @media (max-width: 768px) {
        .process-steps {
            flex-direction: column;
            align-items: center;
        }

        .process-step {
            width: 80%;
            margin-bottom: 20px;
        }
    }
/* CTA Section */
#cta {
    /*background-color: #007BFF; /* Medium Blue */
    background-color:#6fb0d0;
    color: white;
    text-align: center;
    padding: 80px 20px;
}

#cta h2 {
    font-size: 2.5em;
    margin-bottom: 20px;
}

#cta p {
    font-size: 1.3em;
    margin-bottom: 30px;
}

#cta .cta-button {
    background-color: #1a73e8; /* background for the button */
    color: #002147; /* Dark text color */
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.2em;
    font-weight: bold;
    border: none;
    display: inline-block;
    margin-top: 20px;
}

#cta .cta-button:hover {
    background-color: #1461c6;
}

.cta a {
    display: inline-flex;
    align-items: center;
    background-color: #25D366; /* WhatsApp Green */
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
}

.cta a i {
    margin-right: 8px; /* Space between icon and text */
    font-size: 20px;
}

/* Footer */
footer {
        background-color: #002147; /* Dark Navy Blue */
        color: white;
        padding: 50px 20px;
        text-align: center;
    }

    .container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .footer-content {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 30px;
        text-align: left;
    }

    .footer-column {
        flex: 1;
        min-width: 250px;
    }

    .logo-column img {
        width: 150px;
        margin-bottom: 15px;
    }

    .footer-column h3 {
        font-size: 1.5em;
        margin-bottom: 10px;
        color: #f8f9fa;
    }

    .footer-column p {
        font-size: 1em;
        color: #d1d1d1;
        margin-bottom: 5px;
    }

    .social-icons {
        display: flex;
        gap: 15px;
        margin-top: 10px;
    }

    .social-icons a {
        color: white;
        font-size: 1.5em;
        transition: color 0.3s;
    }

    .social-icons a:hover {
        color: #D6EAF8; /* Light Blue Hover Effect */
    }

    .footer-bottom {
        margin-top: 30px;
        border-top: 1px solid #ffffff33;
        padding-top: 15px;
        font-size: 0.9em;
        color: #d1d1d1;
    }




    /* Responsive Design */
    @media (max-width: 768px) {
        .footer-content {
            flex-direction: column;
            text-align: center;
        }

        .social-icons {
            justify-content: center;
        }
    }

/** about us **/

.background-image-container {
    background: url('/images/homebg1.jpg') no-repeat center center; /* Replace with your image path */
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Optional: Make the background fixed when scrolling */
    color: white; /* Text color for readability */

    position: relative;
}
#about-hero {
    
    padding: 60px 0;
    text-align: center;
    color: white;
    padding-bottom:30px!important;
}

#about-content {
    padding: 50px 20px;
    text-align: center;
    padding-top: 30px!important;
}

#about-hero, #about-content {
    background-color: rgba(0, 0, 0, 0.5)!important; /* Optional: Add a transparent overlay for readability */
}

.floating-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
   
    z-index: 2; /* Keeps image above the background */
    background-color: rgba(0, 0, 0, 0.5)!important;
}

.floating-circle-image {
    width: 200px; /* Increased size */
    height: 200px;
    border-radius: 50%;
    object-fit: contain;
    border: 5px solid white; /* Makes image stand out */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Slightly stronger shadow */
    background: white; /* Ensures visibility if background is dark */
    display: block;
    position: relative;
   
}

/* Responsiveness for tablets and smaller screens */
@media (max-width: 768px) {
    .floating-circle-image {
        width: 200px;
        height: 200px;
        
    }
}

@media (max-width: 480px) {
    .floating-circle-image {
        width: 150px;
        height: 150px;
       
    }
}

.mission-vision-container {
    display: flex;
    justify-content: center;
    gap: 180px; /* Reduced space between circles */
    align-items: center;
    text-align: center;
    margin-top: 50px;
}

/* Circular Box Styling */
.circle-box {
    width: 350px; /* Adjusted size */
    height: 350px;
    border-radius: 20px; /* Missing semicolon fixed */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: white;
    border: none;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    padding: 25px;
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

/* Responsive Design */
@media (max-width: 992px) {
    .mission-vision-container {
        flex-direction: column;
        gap: 30px; /* Closer spacing for smaller screens */
    }

    .circle-box {
        width: 250px;
        height: 250px;
        font-size: 16px;
    }
}

@media (max-width: 576px) {
    .circle-box {
        width: 220px;
        height: 220px;
        font-size: 14px;
    }
}

#our-team {
    text-align: center;
    padding: 50px 20px;
}

#our-team .team-description {
    padding: 20px; /* Adds padding around the text */
    margin-bottom: 30px; /* Adds some margin below to separate from the next section */
    font-size: 18px; /* Adjust the font size for readability */
    color: #333; /* Adjust color if needed */
    
    border-radius: 8px; /* Optional: rounded corners for the background */
}
.team-members {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.team-member {
    width: 30%;
}

.team-member img {
    width: 100%;
    border-radius: 10px;
}
.team_name{
    
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
}
.team_name::after {
    content: "";
    width: 60px;
    height: 4px;
    background-color: #007bff; /* Adjust to match your brand color */
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
}
.mission-title, .vision-title {
    font-size: 2rem; /* Adjust the font size */
    font-weight: bold;
    margin-bottom: 20px; /* Add space between heading and paragraph */
    color: #333; /* Adjust the color if needed */
}

#mission-vision p {
    font-size: 1.1rem;
    color: #555;
}


/* About Us Styles */
.about-heading {
    font-size: 2.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.about-text {
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Who We Are Section */
#about-content {
    background: rgba(0, 123, 255, 0.1); /* Light blue background */
    padding: 80px 0;
}

.who-we-are-heading {
    font-size: 2.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    
    margin-bottom: 20px;
    position: relative;
}

.who-we-are-heading::after {
    content: "";
    width: 80px;
    height: 4px;
    background: var(--bs-primary);
    display: block;
    margin: 10px auto 0;
    border-radius: 2px;
}

.who-we-are-text {
    font-size: 1.2rem;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
    /**color: #555;**/
}

.text-highlight {
    color: #ffcc00;
    font-weight: bold;
    text-transform: uppercase;
}

.text_dhub{
    color: blue;
    font-weight: bold!important;
    text-transform: uppercase;
}