/* Global Styles */
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f8f9fa;
    color: #212529;
    line-height: 1.5;
    overflow-x: auto; /* Prevent horizontal scrolling */
}
html {
    font-size: 62.5%; /* 1rem = 10px for easier calculations */
}

body {
    font-size: 1.3rem; /* 1.6rem = 16px */
}

@media (max-width: 768px) {
    html {
        font-size: 100%; /* 1rem = 8px */
    }
}

@media (min-width: 1200px) {
    html {
        font-size: 70%; /* 1rem = 11.2px */
    }
}

/* Hero Section */
.hero-section {
    position: relative;
    display: flex
;
    align-items: center;
    justify-content: center;
    background: var(--t1-color);
    min-height: 502px;
    z-index: 4;
    padding-bottom: 34px;

}
.hero-section {
    position: relative;
    overflow: hidden;

    background: transparent; /* Ensure no color conflicts with .hero__bg__span */
}



.hero-section .container {
    position: relative;
    text-align: left !important;

    z-index: 1; /* Ensures content stays on top of background */
}

.text-info {
    color: #17a2b8 !important; /* Optional if text-info is not already defined */
}
.hero-section {
    position: relative;
    overflow: hidden; /* Keep content within bounds */
    background: lightblue; /* Light blue background as the base */
}

.hero-section .hero__bg__span {
    transform: matrix(1, -0.25, 0, 1, 0, 0);
    transform-origin: bottom left;
    background: #001F3F;
    height: 173%;
    display: block;
    width: 9000px;
    left: 100%;
    position: absolute;
    margin-left: -3009px;
    z-index: 0;
    transform: skewY(-8.9deg);
}




/* Features Section */
.feature-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
}

/* About Section */
.about {
    background: white;
    color: #333;
    padding: 50px 0;
    text-align: center;
}

/* Footer */
footer {
    background: #001F3F;
    color: white;
    padding: 20px 0;

    text-align: center;
}
.navbar {
    font-family: Arial, sans-serif;
    background-color: #001F3F !important;
    font-size:1,3rem;
}

.navbar-nav .nav-item .nav-link {
    color: #fff;
    margin-right: 10px;
}

.navbar-nav .nav-item .nav-link:hover {
    color: #ffc107;
}

.navbar-nav .dropdown-menu {
    background-color: #343a40;
    border: none;
    margin-top: 0;
}

.navbar-nav .dropdown-menu .dropdown-item {
    color: #fff;
}

.navbar-nav .dropdown-menu .dropdown-item:hover {
    background-color: #495057;
    color: #ffc107;
}

.navbar-nav .btn {
    margin-left: 10px;
    background-color: #ffc107;
    border: none;
    transition: background-color 0.3s;
}

.navbar-nav .btn:hover {
    background-color: #e0a800;
}


.feature-card {
    background: linear-gradient(to bottom right, #e0f7fa, deepskyblue);
    border-radius: 20px !important; /* Reduced border radius */
    width: 75% !important; /* Reduced width */
    text-align: center;
    transition: transform 0.3s ease-in-out;
    font-size: 0.9rem; /* Slightly smaller font size */
    padding: 1.5rem; /* Adjust padding for proportional content */
}

.container2 {
    max-width: 1000px; /* Limit the container width */
    margin-left: auto; /* Align to the left */
    margin-right: auto; /* Push it away from the right */
    width: 100%;

}

.container{
    max-width: 1000px; /* Limit the container width */
}

.feature-card:hover {
    transform: scale(1.05);
}

.feature-card p {
    color: #333;
text-align: left;
    font-weight: bold;
    font-size: 1.3rem ;
}

.arrow-button {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #6a00ff, #00d2ff);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); /* Softer, more subtle shadow */
    border: none; /* Clean borderless design */
    cursor: pointer;
    text-decoration: none;
    font-size: 1.5rem;
    color: white; /* Ensures text is visible */
    padding: 0 15px; /* Add some horizontal padding for better layout */
}

.arrow-button:hover {
    transform: scale(1.15);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); /* Enhanced hover shadow */
    background: linear-gradient(135deg, #00d2ff, #6a00ff); /* Reverse gradient for hover */
}

.arrow-button span {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.8rem; /* Increased font size */
    font-weight: bold; /* Made text bolder */
    margin-left: 12px; /* Maintain spacing between arrow and text */
    color: white; /* Ensures text remains consistent with the button */
}



.arrow-button:hover::before {
    transform: translateX(8px); /* Enhanced arrow movement on hover */
}


.feature-card {
    text-align: left; /* Align the content to the left */
}
.features-row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 1rem;
    padding: 0 1rem;
    scroll-behavior: smooth;
}

.feature-item {
    flex: 0 0 100%;
    min-width: 100%;
    transition: opacity 0.3s ease;
}

.feature-card-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;

}


.feature-card {
    text-align: left;
    background-color: #f8f9fa;
    flex: 1;
}

.arrow-button {
    font-size: 1.5rem;
    text-decoration: none;
    color: #007bff;
    font-weight: bold;
}

/* Mobile-specific styles */
@media (max-width: 768px) {
    .feature-item {
        flex: 0 0 calc(100% - 75px); /* Main item size with space for the next item */
        min-width: calc(100% - 75px);
    }

    .features-row .feature-item.low-opacity {
        opacity: 0.4; /* Low opacity for non-active items */
    }
}

@media (min-width: 1024px) {
    .feature-card-wrapper {
        width:24%;
        place-self: flex-end;

    }
}

.message {
    font-size: 2.3rem;
    color: #555;
    text-align: left;
    max-width: 100%;
}
/* styles.css */

/* General Section Styling */
.about {
    background-color: #f9f9f9; /* Light neutral background for contrast */
    padding: 3rem 1.5rem;
    font-family: 'Poppins', sans-serif;
    color: #333;
}

/* Section Title */
.about h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a73e8; /* Modern blue for focus */
    margin-bottom: 1rem;
}

/* Paragraph Text */
.about p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #555;
}

/* Row Styling */
.about .row {
    margin-top: 2rem;
    align-items: center;
}

/* Image Styling */
.about img {
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about img:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* Video Styling */
.video-container video {
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* Call-to-Action Paragraph */
.cta {
    background: #1a73e8; /* Primary color */
    color: #fff;
    text-align: center;
    font-weight: 600;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Responsive Design */
@media (max-width: 768px) {
    .about h2 {
        font-size: 2rem;
    }
    .about img {
        margin-top: 1rem;
    }
}
/* Hide the message divs on smaller screens */
@media (max-width: 768px) {
    .message {
        display: none;
    }
}