/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

a {
    text-decoration: none;
    color: white;
}

ul {
    list-style: none;
}

/* Header Styles */
header {
    background-color: #103143;
    padding: 10px;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img{
    max-width: 150px; /* Set the max width for the logo */
    margin-bottom: 20px;
	
}

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

nav ul li a {
    font-size: 1rem;
    padding: 10px 15px;
    transition: background 0.3s;
}

nav ul li a:hover {
    background-color: #1c4f72;
    border-radius: 5px;
}

/* Mobile Menu Toggle Button */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.menu-toggle span {
    height: 3px;
    width: 25px;
    background: white;
    margin: 4px 0;
    transition: 0.3s;
}

/* Responsive Styles */
@media screen and (max-width: 768px) {
    nav ul {
        position: absolute;
        top: 60px;
        right: 0;
        width: 100%;
        flex-direction: column;
        align-items: center;
        background-color: #103143;
        display: none;
    }

    nav ul.active {
        display: flex;
    }

    nav ul li {
        width: 100%;
        text-align: center;
        padding: 10px 0;
    }

    .menu-toggle {
        display: flex;
    }
}
/* Hero Section Styles */
.hero-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 100px 0;
    min-height: 100vh;
    background-color: #083750;
}

.hero-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}

.hero-text {
    max-width: 50%;
}

.hero-text h2 {
    font-size: 2.0rem;
    margin-bottom: 20px;
	color: white;
	text-align: left;
}

.hero-text p {
    font-size: 1.2rem;
    line-height: 1.5;
	color:#e9dede;
}

/* Sign-Up Box Styles */
.sign-up-box {
    background-color: #1c4f72;
    padding: 30px;
    border-radius: 10px;
    max-width: 350px;
    width: 100%;
}
.form-group {
    text-align: center; /* Center the button horizontally */
}
/* Centering the content */
.text-center {
    text-align: center; /* Center the span text */
}

.sign-up-btn1 {
    display: inline-block;
    padding: 10px 20px;
    background-color: #ff8b00;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1rem;
    text-align: center;
}

.sign-up-btn1:hover {
    background-color: #e67e22;
}


.sign-up-box h3 {
    font-size: 1.5rem;
    margin-bottom: 20px;
	color: white;
	
}

.form-group {
    margin-bottom: 15px;
}

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

.form-group button {
    width: 100%;
    padding: 10px;
    background-color: #0288d1;
    border: none;
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.3s;
}

.form-group button:hover {
    background-color: #01579b;
}

/* Responsive Styles */
@media screen and (max-width: 768px) {
    .hero-content {
        flex-direction: column;
        align-items: center;
    }

    .hero-text {
        max-width: 100%;
        text-align: center;
        margin-bottom: 30px;
    }

    .sign-up-box {
        max-width: 100%;
    }

    nav ul {
        position: absolute;
        top: 60px;
        right: 0;
        width: 100%;
        flex-direction: column;
        align-items: center;
        background-color: #103143;
        display: none;
    }

    nav ul.active {
        display: flex;
    }

    .menu-toggle {
        display: flex;
    }
}
/* About Us Section */
.about-us-section {
    background-color: #0e3546; /* Section Background */
    padding: 60px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.about-content-container {
    background-color: #092635; /* Column Background */
    padding: 40px;
    border-radius: 10px;
    text-align: center;
    max-width: 800px;
    width: 100%;
    color: white;
}

.about-us-section h3 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.about-us-section p {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

.sign-up-btn {
    padding: 12px 30px;
    background-color: #0288d1;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.3s;
}

.sign-up-btn:hover {
    background-color: #01579b;
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .about-us-section h3 {
        font-size: 1.8rem;
    }

    .about-us-section p {
        font-size: 1rem;
        padding: 0 10px;
    }

    .sign-up-btn {
        padding: 10px 25px;
        font-size: 1rem;
    }
}
/* Primary Advantage Section */
.primary-advantage-section {
    background-color: #103143; /* Section Background */
    padding: 60px 20px;
    color: white;
}

/* Part 1: Centered Heading and Paragraph */
.centered-content {
    text-align: center;
    margin-bottom: 50px;
}

.centered-content h3 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.centered-content p {
    font-size: 1.2rem;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}

/* Part 2: Image on Left, Text on Right */
.advantage-image-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 40px;
}

.advantage-image-text img {
    width: 45%;
    border-radius: 10px;
}

.text-content {
    width: 50%;
    text-align: left;
}

.text-content h4 {
    font-size: 1.8rem;
    margin-bottom: 15px;
}

.text-content p {
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Sign-Up Button Styling */
.signup-button-container {
    text-align: center;
    margin-top: 50px;
}

.signup-btn {
    background-color: #FF6F61; /* Button Color */
    color: white;
    padding: 15px 30px;
    font-size: 1.2rem;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.signup-btn:hover {
    background-color: #FF5733;
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    /* Centered Heading and Paragraph */
    .centered-content h3 {
        font-size: 1.6rem;
    }

    .centered-content p {
        font-size: 1rem;
    }

    /* Stacking Image and Text on Smaller Screens */
    .advantage-image-text {
        flex-direction: column;
        text-align: center;
    }

    .advantage-image-text img {
        width: 100%;
        margin-bottom: 20px;
    }

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

    .text-content h4 {
        font-size: 1.6rem;
    }

    .text-content p {
        font-size: 1rem;
    }

    /* Sign-Up Button Responsive Styling */
    .signup-btn {
        font-size: 1rem;
        padding: 10px 20px;
    }
}
/* Key Section Styling */
.key-section {
    background-color: #082b3c; /* Section Background */
    padding: 60px 20px;
    color: white;
    text-align: center; /* Centered span and h3 */
}

/* Styling for Span and H3 */
.key-heading span {
    display: block;
    font-size: 1.2rem;
    color: #FF6F61; /* Span color */
    margin-bottom: 10px;
}

.key-heading h3 {
    font-size: 2.2rem;
    margin-bottom: 40px;
}

/* Six Columns Styling */
.key-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
}

.key-feature {
    flex: 0 1 calc(33.333% - 20px); /* Three columns layout */
    background-color: transparent; /* No visible border */
    padding: 20px;
    text-align: left; /* Align heading to the left */
}

.key-feature h4 {
    font-size: 1.6rem;
    margin-bottom: 15px;
}

.key-feature p {
    font-size: 1rem;
    line-height: 1.6;
    text-align: justify; /* Justify the paragraph content */
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    /* Stack columns on smaller screens */
    .key-feature {
        flex: 0 1 100%;
        margin-bottom: 20px;
    }

    /* Adjust font size for smaller devices */
    .key-heading h3 {
        font-size: 1.8rem;
    }

    .key-feature h4 {
        font-size: 1.4rem;
    }

    .key-feature p {
        font-size: 0.9rem;
    }
}
/* Customer Experience Section */
.customer-experience-section {
    background-color: #103143; /* Section Background */
    padding: 60px 20px;
    color: white;
    text-align: center;
}

/* Styling for Span and H3 */
.customer-heading span {
    display: block;
    font-size: 1.2rem;
    color: #FF6F61; /* Span color */
    margin-bottom: 10px;
}

.customer-heading h3 {
    font-size: 2.2rem;
    margin-bottom: 40px;
}

/* Six Columns Styling */
.customer-experiences {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
}

/* Individual Customer Experience Box */
.customer-experience {
    flex: 0 1 calc(33.333% - 20px); /* Three columns layout */
    background-color: transparent; /* No visible background */
    padding: 20px;
    border: 1px solid #163d50; /* Very light border */
    border-radius: 8px;
    text-align: left; /* Align the text to the left */
}

.customer-experience .stars {
    font-size: 1.5rem;
    color: #ff8b00; /* Orange star color */
    margin-bottom: 10px;
}

.customer-experience h6 {
    font-size: 1.4rem;
    margin-bottom: 10px;
}

.customer-experience p {
    font-size: 1rem;
    line-height: 1.6;
    text-align: justify; /* Justified paragraph */
}

/* Customer Info Styling (Image and Name) */
.customer-info {
    display: flex;
    align-items: center;
    margin-top: 15px;
}

.customer-info img {
    width: 40px;
    height: 40px;
    border-radius: 50%; /* Circular image */
    margin-right: 10px;
	
}

.customer-info span {
    font-size: 1rem;
    color: white;
	
	
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    /* Stack columns on smaller screens */
    .customer-experience {
        flex: 0 1 100%;
        margin-bottom: 20px;
    }

    /* Adjust font size for smaller devices */
    .customer-heading h3 {
        font-size: 1.8rem;
    }

    .customer-experience h6 {
        font-size: 1.2rem;
    }

    .customer-experience p {
        font-size: 0.9rem;
    }

    .customer-info img {
        width: 30px;
        height: 30px;
    }

    .customer-info span {
        font-size: 0.9rem;
		padding: 20px;
    }
}
/* About Us2 Section */
.about-us2-section {
    background-color: #082b3c; /* Section Background */
    padding: 60px 20px;
    color: white;
}

/* Flexbox Layout for Content */
.about-us2-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap; /* Ensures responsiveness */
    height: 100%; /* Make both sides equal in size */
}

/* Left Side Styling (Text) */
.about-us2-left {
    flex: 1;
    max-width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically align content */
}

.about-us2-left h3 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.about-us2-left p {
    font-size: 1.2rem;
    line-height: 1.6;
    text-align: justify; /* Justified text */
}

/* Right Side Styling (Image and Button) */
.about-us2-right {
    flex: 1;
    max-width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Vertically align content */
}

.about-us2-right img {
    width: 100%;
    max-width: 550px; /* Adjust as necessary */
    height: auto;
    margin-bottom: 20px;
}

.sign-up-button {
    padding: 10px 20px;
    background-color: #ff8b00; /* Button color */
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    border-radius: 5px;
}

.sign-up-button:hover {
    background-color: #ff6f00; /* Darker hover state */
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .about-us2-content {
        flex-direction: column; /* Stack content vertically */
        text-align: center;
    }

    .about-us2-left, .about-us2-right {
        max-width: 100%;
    }

    .about-us2-left {
        margin-bottom: 20px;
    }
}
/* FAQ Section Styling */
.faq-section {
    background-color: #103143; /* Section Background */
    padding: 60px 20px;
    color: white;
}

/* FAQ Header (Span and H5) */
.faq-header {
    text-align: center;
    margin-bottom: 40px;
}

.faq-header span {
    display: block;
    font-size: 1.2rem;
    color: #ff8b00; /* Span color */
    margin-bottom: 10px;
}

.faq-header h5 {
    font-size: 1.8rem;
    margin: 0;
    color: white;
}

/* FAQ Container: Divided into two equal-sized columns */
.faq-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap; /* Flex-wrap for responsiveness */
}

/* Left and Right Sides */
.faq-left, .faq-right {
    flex: 1;
    max-width: 50%;
}

/* FAQ Item (Each Question and Answer Pair) */
.faq-item {
    margin-bottom: 30px;
}

/* Bold Question (First Paragraph) */
.faq-question {
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 10px;
    text-align: left;
}

/* Non-Bold Answer (Second Paragraph) */
.faq-answer {
    font-size: 1rem;
    line-height: 1.6;
    text-align: left;
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .faq-container {
        flex-direction: column; /* Stack content vertically */
    }

    .faq-left, .faq-right {
        max-width: 100%; /* Full width on small screens */
    }
}
/* Footer Section Styling */
.footer-section {
    background-color: #103143; /* Background color */
    padding: 40px 20px;
    color: white;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap; /* Allows wrapping on small screens */
    max-width: 1200px;
    margin: 0 auto;
}

/* Footer Left (80%) */
.footer-left {
    flex: 1;
    max-width: 80%;
    text-align: left;
}

.footer-logo img {
    max-width: 150px; /* Set the max width for the logo */
    margin-bottom: 20px;
}

.footer-description {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

.footer-copyright {
    text-align: center;
    font-size: 0.9rem;
    margin-top: 20px;
}

/* Footer Section Styling */
.footer-section {
    background-color: #103143; /* Background color */
    padding: 40px 20px;
    color: white;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap; /* Allows wrapping on small screens */
    max-width: 1200px;
    margin: 0 auto;
}

/* Footer Section Styling */
.footer-section {
    background-color: #103143; /* Background color */
    padding: 40px 20px;
    color: white;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap; /* Allows wrapping on small screens */
    max-width: 1200px;
    margin: 0 auto;
}

/* Footer Left (80%) */
.footer-left {
    flex: 1;
    max-width: 80%;
    text-align: left;
}

.footer-logo img {
    max-width: 150px; /* Set the max width for the logo */
    margin-bottom: 20px;
}

.footer-description {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 30px;
    text-align: justify; /* Justify the paragraph */
}

.footer-copyright {
    text-align: center;
    font-size: 0.9rem;
    margin-top: 20px;
}

/* Footer Right (Horizontal Navigation) - 20% */
.footer-right {
    flex: 1;
    max-width: 25%;
}

.footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-direction: column; /* Display navigation items in a horizontal row */
    justify-content: space-between; /* Add space between items */
}

.footer-nav ul li {
    margin: 0 50px; /* Add horizontal spacing between navigation items */
}

.footer-right footer-company {
	color: #ff8b00;
    text-decoration: none;
    font-size: 1.2rem;
}

.footer-nav ul li a {
    color: #ff8b00;
    text-decoration: none;
    font-size: 1.2rem;
}

.footer-nav ul li a:hover {
    text-decoration: none;
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .footer-container {
        flex-direction: column; /* Stack the columns vertically */
    }

    .footer-left, .footer-right, .footer-company {
        max-width: 100%;
    }

    .footer-right, .footer-company {
        margin-top: 30px;
    }

    /* Ensure horizontal navigation on mobile devices */
    .footer-nav ul {
        flex-direction: column; /* Keep navigation horizontal and spaced */
    }

    .footer-nav ul li {
        margin-bottom: 0; /* Remove any extra spacing */
    }
}
/* Team Section Styling */
.team-section {
    background-color: #082b3c; /* Maintain the background color */
    padding: 60px 20px;
    color: white;
}

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

/* Span and H5 Aligned to Left */
.team-intro {
    font-size: 1.2rem;
    display: block;
    text-align: left;
    margin-bottom: 10px;
}

.team-header {
    font-size: 3rem;
    text-align: left;
    margin-bottom: 20px;
}

/* Full-Width Paragraph */
.team-description {
    font-size: 1.1rem;
    text-align: justify;
    margin-bottom: 40px;
}

/* Team Grid Layout */
.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns on larger screens */
    gap: 30px;
}

.team-member {
    text-align: left;
}

/* Team Member Rectangle (Image Only) */
.team-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 15px;
}

/* Team Member Info (H5, Span, P after the image) */
.team-member h5 {
    font-size: 1.2rem;
    margin: 10px 0;
}

.team-member span {
    display: block;
    font-size: 1rem;
    color: #ff8b00; /* Highlighted color for positions */
    margin-bottom: 10px;
}

.team-member p {
    font-size: 1.2rem;
    text-align: justify;
}

/* Responsive Design */
@media screen and (max-width: 1024px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for medium screens */
    }
}

@media screen and (max-width: 768px) {
    .team-grid {
        grid-template-columns: 1fr; /* Stack members in a single column for small screens */
    }

    .team-description {
        text-align: left; /* Left-align paragraph for small screens */
    }
}

/* Contact Us Section Styling */
.contact-us-section {
    background-color: #103143; /* Maintain original background color */
    padding: 60px 20px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.contact-container {
    width: 60%; /* Contact form occupies 60% of the space */
    background-color: transparent; /* Transparent background */
    margin: 0 auto; /* Center the form horizontally */
}

/* Span, H5, and Paragraph Styling */
.contact-intro {
    font-size: 1.2rem;
    display: block;
    text-align: left;
    margin-bottom: 10px;
}

.contact-header {
    font-size: 1.8rem;
    text-align: left;
    margin-bottom: 20px;
}

.contact-description {
    font-size: 1rem;
    text-align: left;
    margin-bottom: 40px;
}

/* Form Group Styling */
.form-group {
    margin-bottom: 20px;
    text-align: left;
}

/* Input and Textarea Styling */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 5px;
    background-color: #f2f2f2; /* Light background color for input fields */
    font-size: 1rem;
    color: #333;
    box-sizing: border-box;
}

.contact-form textarea {
    height: 150px; /* Larger height for the message box */
    resize: none;
}

/* Submit Button Styling */
.submit-btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #ff8b00;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1rem;
    text-align: center;
    cursor: pointer;
}

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

/* Responsive Design */
@media screen and (max-width: 768px) {
    .contact-container {
        width: 100%; /* On smaller devices, the form takes up full width */
    }
    
    .contact-header, .contact-description, .contact-intro {
        text-align: left; /* Ensure text remains aligned left on small screens */
    }
}