.img-400 {
    max-width: 400px;
    max-height: 400px;
}

.img-w-400 {
    max-width: 400px;
}

.img-h-400 {
    max-height: 400px;
}

.img-w-300 {
    max-width: 300px;

}

.img-h-300 {
    max-height: 300px;
}

.icon-logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

/* --------------------- Typography --------------------- */

.text-gray-900 {
    color: #1a202c;
}

/* Very dark gray */
.text-gray-700 {
    color: #4a5568;
}

/* Light Grays (closer to white) */
.text-gray-50 {
    color: #f8f9fa !important;
    /* Very light gray, often used for subtle backgrounds */
}

.text-gray-100 {
    color: #e9ecef !important;
    /* Lighter than 200 */
}

.text-gray-200 {
    color: #dee2e6 !important;
    /* Light gray */
}

.text-gray-300 {
    color: #ced4da !important;
    /* Slightly darker light gray */
}

.text-gray-400 {
    color: #adb5bd !important;
    /* Medium-light gray */
}

/* Mid Gray */
.text-gray-500 {
    color: #6c757d !important;
    /* Standard medium gray, often used for secondary text */
}

/* Dark Grays (closer to black) */
.text-gray-600 {
    color: #495057 !important;
    /* Medium-dark gray */
}

.text-gray-700 {
    color: #343a40 !important;
    /* Dark gray, good for body text on light backgrounds */
}

.text-gray-800 {
    color: #212529 !important;
    /* Very dark gray, almost black */
}

.text-gray-900 {
    color: #101010 !important;
    /* Near black, slightly softer than pure black */
}

/* Custom font sizes for headings and cards */
.text-3xl {
    font-size: 1.875rem;
}

/* Large font size */
.text-4xl {
    font-size: 2.25rem;
}

/* Extra large font size */
.text-xl {
    font-size: 1.25rem;
}

/* --------------------- Typography --------------------- */


.sub-lead {
    font-size: 1.13rem;
    line-height: 1.7;
    color: #5e5e5e;
}

.head-desc {
    max-width: 600px;
    text-align: center;
    margin-inline: auto;
}


.nast-bg-gradient-2 {


    background:
        /* Primary linear gradient for the dominant color flow */
        linear-gradient(135deg,
            /* Angle from top-left to bottom-right, similar to the icon's flow */
            #B3E0FF 0%,
            /* Very Light Blue (start) */
            #87CEEB 40%,
            /* Medium Blue */
            #A0D9D0 75%,
            /* Light Teal/Green */
            #66B2B2 100%
            /* Medium Teal/Blue (end) */
        ),
        /* Subtle radial gradient for a soft, almost imperceptible "glow" or atmospheric effect */
        radial-gradient(circle at 80% 20%,
            /* Positioned towards the top-right, creating a subtle light source */
            rgba(255, 255, 255, 0.1) 0%,
            /* Very subtle transparent white */
            rgba(255, 255, 255, 0) 70%
            /* Fades out quickly */
        );
}

.nast-bg-gradient-body {
    margin: 0;
    /* Remove default body margin */
    min-height: 100vh;
    /* Ensure the gradient covers the full viewport height */
    font-family: "Inter", 'sans-serif';
    /* Example font */
    color: #333;
    /* Default text color */

    /* The main background: A linear gradient */
    background:
        /* Layer 1: The subtle base linear gradient (top-left to bottom-right) */
        linear-gradient(135deg,
            #D7EEF7 0%,
            /* Light Blue */
            #9fbfca 35%,
            /* Medium Blue */
            #BCEAE4 70%,
            /* Teal/Light Green */
            #b7d3d1 100%
            /* Medium Teal/Blue */
        ),

        /* Layer 2: A large, soft radial "glow" for general lightness (subtle glassy highlight) */
        radial-gradient(circle at 20% 10%,
            /* Positioned subtly top-left */
            rgba(255, 255, 255, 0.2) 0%,
            /* Very light, almost transparent white */
            rgba(255, 255, 255, 0) 60%
            /* Fades out */
        ),

        /* Layer 3: Another large, soft radial "glow" for general lightness (different position) */
        radial-gradient(circle at 75% 85%,
            /* Positioned subtly bottom-right */
            rgba(255, 255, 255, 0.15) 0%,
            /* Slightly less bright */
            rgba(255, 255, 255, 0) 50%
            /* Fades out */
        ),

        /* Layer 4: A smaller, slightly more defined radial highlight for glassy effect (top-center) */
        radial-gradient(circle at 50% 15%,
            /* Slightly off-center top */
            rgba(255, 255, 255, 0.25) 0%,
            /* Noticeable but still subtle */
            rgba(255, 255, 255, 0) 30%
            /* Fades out faster */
        ),

        /* Layer 5: A subtle "shadow" radial gradient for depth (bottom-left) */
        radial-gradient(circle at 10% 90%,
            /* Bottom-left corner */
            rgba(0, 0, 0, 0.05) 0%,
            /* Very subtle transparent black */
            rgba(0, 0, 0, 0) 40%
            /* Fades out */
        );

    background-attachment: fixed;
    /* Ensures the background stays put during scroll */
}

.nast-bg-gradient-body-2x {
    margin: 0;
    min-height: 100vh;
    color: #333;
    overflow-x: hidden;
    /* Prevent horizontal scrollbar if background-size exceeds 100% */

    background:
        /* Layer 1: Main linear gradient with refined HSL colors */
        linear-gradient(135deg,
            hsla(199, 100%, 91%, 0.949) 0%,
            /* Very Light Blue */
            hsl(202, 25%, 94%) 20%,
            /* Lighter Medium Blue */
            hsl(268, 88%, 97%) 45%,
            /* True Medium Blue */
            hsl(171, 45%, 91%) 70%,
            /* Light Teal */
            hsl(175, 22%, 68%) 100%
            /* Deeper Teal/Blue */
        ),

        /* Layer 2: A large, soft radial "glow" for general lightness (subtle glassy highlight) */
        radial-gradient(circle at 20% 10%,
            /* Positioned subtly top-left */
            rgba(255, 255, 255, 0.18) 0%,
            /* Very light, almost transparent white */
            rgba(255, 255, 255, 0) 60%
            /* Fades out */
        ),

        /* Layer 3: Another large, soft radial "glow" for general lightness (different position) */
        radial-gradient(circle at 75% 85%,
            /* Positioned subtly bottom-right */
            rgba(255, 255, 255, 0.12) 0%,
            /* Slightly less bright */
            rgba(255, 255, 255, 0) 50%
            /* Fades out */
        ),

        /* Layer 4: Smaller, sharper highlight for more direct reflections (top-center) */
        radial-gradient(ellipse at 50% 15%,
            /* Slightly off-center top, elliptical for more dynamic shape */
            rgba(255, 255, 255, 0.28) 0%,
            rgba(255, 255, 255, 0) 30%),

        /* Layer 5: A subtle "shadow" radial gradient for depth (bottom-left) */
        radial-gradient(circle at 10% 90%,
            /* Bottom-left corner */
            rgba(0, 0, 0, 0.03) 0%,
            /* Very subtle transparent black */
            rgba(0, 0, 0, 0) 40%
            /* Fades out */
        ),

        /* Layer 6: VERY subtle noise/texture (simulated with tiny repeating linear gradients) */
        linear-gradient(rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.01) 50%,
            /* Horizontal lines of noise */
            transparent 50%, transparent 100%),
        linear-gradient(90deg,
            /* Vertical lines of noise */
            rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.01) 50%,
            transparent 50%, transparent 100%);

    background-size: cover;
    /* Ensure gradient covers the entire area */
    background-attachment: fixed;
    /* Stays fixed during scroll */
}


.section {
    margin-block: 4rem;
    padding-block: 4rem;
    padding-inline: 4rem;
}

.hero-section {

    --bg-img: url('./images/hero-bg.png');

    /* Vertical padding */
    height: calc(100vh - var(--header-height));
    background-image: var(--bg-img);
    background-position: center;
    background-size: cover;
    position: relative;
    overflow: hidden;
}


.hero-section-content {
    position: relative;
    z-index: 3;
    /* Ensure content is above the background */
    color: #fff;
    height: 100%;
    display: flex;
    align-items: center;
}


.hero-section-bg-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, rgb(25 43 67 / 45%) 35%, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0) 100%);
    /* Dark overlay */
    z-index: 1;
    mix-blend-mode: multiply;
}

.header-x {
    z-index: 10;
    background:
        linear-gradient(135deg,
            hsl(199, 100%, 91%) 0%,

            hsl(202, 25%, 94%) 20%,

            hsl(268, 88%, 97%) 70%,

            hsl(171, 45%, 91%) 100%);
    /* Optional: Add a very subtle border-bottom that matches a darker color */
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    /* Very light, almost invisible line */

}

:root {
    --header-height: clamp(3rem, 10vh, 4rem);
}

.header {
    height: var(--header-height);
    align-items: center;
}

.header>nav.navbar {
    height: 100%;
}

.header,
.header .dropdown .dropdown-menu {
    background-color: #18355d;
    color: #f7f7f7 !important;
    height: auto;
}

.header .dropdown-menu .dropdown-item:hover {
    background-color: #f7f7f730 !important;

    /* Ensures dropdown items are also light */
}

.header * {
    color: #f7f7f7 !important;
}


.text-justify {
    text-align: justify;
    /* Justify text for a clean look */
}


.glassy-bg-filter {
    /* The correlating gradient background for the header */
    background-color: rgba(234, 233, 233, 0.15);
    backdrop-filter: blur(6px);
    box-shadow: 1px 0px 5px rgba(0, 0, 0, 0.1);
}

/* Glassy Cards */

.hover-lift-shadow {
    transition: all 0.3s ease-in-out;
    /* Smooth transition for all properties */
}

.hover-lift-shadow:hover {
    transform: translateY(-5px);
    /* Lifts the box up by 5px */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    /* Adds a light shadow */
}


.glassy-card {
    background: rgba(255, 255, 255, 0.3);
    /* Glassy effect - more transparent*/
    backdrop-filter: blur(10px);
    /* Add blur to the background */
    border: 1px solid rgba(255, 255, 255, 0.);
    /* Add a border */
    border-radius: 1rem;
    /* Rounded corners */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    /* Slightly stronger shadow */
    padding: 1rem 2rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Smooth transition */
    margin-bottom: 2rem;
    height: 90%;
    text-align: center;
}

.glassy-card:hover {
    transform: translateY(-5px);
    /* Slight lift on hover */
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2);
    /* Increased shadow on hover */
}

.glassy-card h3 {
    color: #2c3e50;
    /* Darker heading color */
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.glassy-card p {
    color: #34495e;
    /* Slightly darker paragraph color */
    line-height: 1.7;
    /* Improved line height for readability */
}

.feature-icon {
    margin-bottom: 1rem;
    font-size: 2.5rem;
    /* Larger icon size */
    color: #4299e1;
    /* Example icon color: blue */
}


/* ============================= Glassy Card CSS  ============================= */


.glassy-bg-filter:has(.card-toggle:checked) {
    /* When the card toggle is checked, apply the glassy background filter */
    background-color: rgba(234, 233, 233, 0.15);
    backdrop-filter: initial;
    box-shadow: 1px 0px 5px rgba(0, 0, 0, 0.1);
}

.card-toggle:checked+.glassy-card-enhanced {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 90% !important;
    height: auto;
    transform: translate(-50%, -50%) scale(1);
    z-index: 10;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 0.95);
}

.card-toggle:checked+.glassy-card-enhanced {


    .see-more-btn {
        display: none;
    }
}

.card-toggle:not(:checked)+.glassy-card-enhanced {

    .card-extra-text {
        display: none;
    }
}

.card-h-auto {
    height: clamp(70vh, 85vh, 90vh) !important;
    max-height: 700px;
    display: flex;
    align-items: center;
}


.transition-card {
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.glassy-card-wrapper {
    position: relative;
    /* perspective: 1000px; */
}

.glassy-card-enhanced {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    max-width: 350px;
    height: 100%;
    /* Specific max-width not available in Bootstrap utilities */
}

.glassy-card-inline {
    max-width: 350px;
    /* Specific max-width for the simple card */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Flexbox properties for centering content vertically */
    display: flex;
    align-items: center;
    text-align: center;
}

.glassy-simple-card-layout.hover-lift-shadow:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    /* Reapply hover-lift-shadow effect */
}

.glassy-card-enhanced:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2);
}

.card-icon {
    font-size: 3.5rem;
    /* Custom font size */
    color: #4299e1;
    /* Custom color */
}

.card-icon svg {
    width: 3.5rem;
    /* Ensure SVG takes the specified size */
    height: 3.5rem;
    color: #4299e1;
}

.card-title {
    color: #2c3e50;
    /* Custom color */
    font-size: 1.5rem;
    /* Custom font size */
}

.card-subtitle {
    color: #5a6a7a;
    /* Custom color */
    line-height: 1.4;
    /* Custom line height */
    font-size: 1rem;
    /* Custom font size */
}




.mix-blend-multiply {
    background-color: transparent;
    mix-blend-mode: multiply;
    filter:
        brightness(1.05) contrast(1.1);
}

.mix-blend-none {
    background-color: initial;
    mix-blend-mode: none;
}



.logo-shadow {
    --shadow-color: rgba(0, 0, 0, 0.5);
    filter: drop-shadow(-17px 5px 20px var(--shadow-color));
}

/* =================================== Overlay =================================== */


/* Base Section Styling (similar to Bootstrap's container-fluid or specific section padding) */
.section-bg {
    background-size: cover;
    /* Changed from 'contain' for a more common full-bleed background */
    background-position: center;
    color: #fff;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

/* Background Image Utility (can be applied to .section-bg or other elements) */
.bg-ci-cd {
    background-image: url('./images/CI-CD\ bg.png');
}

.bg-img {
    --bg-image: url('https://placehold.co/600x450/e9ecef/212529?text=Image+Not+Available');
    background-image: var(--bg-image);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.bg-img-right {
    background-position: right;
}

.bg-img-left {
    background-position: left;
}




/* Dark Overlay Utility (can be combined with .section-bg or other elements needing an overlay) */
.bg-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    mix-blend-mode: multiply;
    backdrop-filter: blur(0.6px);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-overlay {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}



.bg-overlay-dark::before {
    background-color: rgba(0, 0, 0, 0.4);
}

.bg-overlay-blue::before {
    background-color: rgba(15, 83, 125, 0.4);
}

.bg-overlay-blue-50::before {
    background: rgba(15, 83, 125, 0.5);
}

.bg-overlay-blue-60::before {
    background: rgba(15, 83, 125, 0.6);
}

.bg-overlay-blue-70::before {
    background: rgba(15, 83, 125, 0.7);
}

/* Content Container (similar to Bootstrap's .container or .container-sm/md/lg) */
.content-wrapper {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}

/* Text Alignment Utility */
.text-center {
    text-align: center;
}

/* Hover Effect Utility (can be applied to any element that needs a slight lift on hover) */
.hover-lift-sm {
    transition: transform 0.3s ease-in-out;
}

.hover-lift-sm:hover {
    transform: translateY(-5px);
}