@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Syne:wght@400..800&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --primary-color: #1a4d3d;
    --primary-light: #2d5f4f;
    --gradient-start: #11121a;
    --gradient-end: #1a4d3d;
    --dark-bg: #000101;
    --glass-bg: #76a63c13;
    --glass-border: #fff3;
}

body {
    font-family: Poppins, sans-serif;
    font-weight: 300;
    font-style: normal;
    overflow-x: hidden !important;
}

.second-description {
    margin-left: auto !important;
}

.contact-btn {
    font-size: 15px;
    padding: 8px 20px;
    font-size: 13px !important;
}

.hero-card {
    background-color: var(--glass-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
}

.gradient-bg {
    background: linear-gradient(180deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
    height: 100vh;
    padding-top: 0;
}

.hero-section {
    padding-top: 80px;
    padding-bottom: 0;
    margin-bottom: 0;
}

.hero-section .row.mt-5 {
    margin-top: 2rem !important;
}

.features-bg {
    background: linear-gradient(180deg, var(--primary-color) 0%, black 100%);
}

.feature-card {
    background: transparent;
}

.features-container {
    border: 1px solid var(--glass-border);
    background: #0003;
}

.icon-circle {
    width: 60px;
    height: 60px;
    background: white !important;
}

.feature-card i {
    color: #198754;
}

.feature-card:hover {
    border-bottom: 2px solid #198754 !important; /* your blue */
    border-bottom-width: 1px !important;

}

.feature-card:hover .icon-circle {
    background: #198754 !important;
}

.feature-card:hover .icon-circle i {
    color: #fff;
}

.feature-card-two:hover {
    background-color: #198754; /* green background on hover */
}

.feature-card-two:hover .icon-circle {
    background: #fff !important; /* white circle on hover */
}

.feature-card-two:hover .icon-circle i {
    color: #198754; /* green icon on hover */
}

.feature-card-two .icon-circle {
    width: 50px;
    height: 50px;
    background: #198754 !important;
}

.feature-card-two i:hover {
    color: white !important;
}

/* Decorative shapes */
.decorative-shape {
    width: 200%;
    height: 800px;
    left: 30%;
}

/* Add to your existing CSS */
.circle-layer {
    border-radius: 4rem;
    top: 50%;
    left: 10%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: all 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Initial scattered positions (before animation) */
.circle-1 { 
    background: color-mix(in srgb, var(--primary-light) 15%, transparent); 
    width: 550px; 
    height: 500px;
    transform: translate(-300%, -150%);
    transition-delay: 0.1s;
}

.circle-2 { 
    background: color-mix(in srgb, var(--primary-light) 22%, transparent); 
    width: 480px; 
    height: 430px;
    transform: translate(250%, -180%);
    transition-delay: 0.2s;
}

.circle-3 { 
    background: color-mix(in srgb, var(--primary-light) 28%, transparent); 
    width: 410px; 
    height: 360px;
    transform: translate(-280%, 200%);
    transition-delay: 0.3s;
}

.circle-4 { 
    background: color-mix(in srgb, var(--primary-light) 35%, transparent); 
    width: 340px; 
    height: 290px;
    transform: translate(300%, 180%);
    transition-delay: 0.4s;
}

.circle-5 { 
    background: color-mix(in srgb, var(--primary-light) 45%, transparent); 
    width: 270px; 
    height: 220px;
    transform: translate(-320%, 0%);
    transition-delay: 0.5s;
}

.circle-6 { 
    background: color-mix(in srgb, var(--primary-light) 55%, transparent); 
    width: 200px; 
    height: 150px;
    transform: translate(350%, 50%);
    transition-delay: 0.6s;
}

/* Button container stays in place */
.circle-layer:last-child {
    opacity: 1;
    transform: translate(-50%, -50%) !important;
    transition: none;
}

/* Animated state - circles assemble to their final position */
.decorative-shape.animate .circle-layer {
    transform: translate(-50%, -50%);
    opacity: 1;
}

.decorative-shape.animate .circle-layer:last-child {
    transform: translate(-50%, -50%) !important;
}

.challenges-bg {
    background-color: var(--dark-bg);
}

.btn-action {
    background-color: #198754;
    color: white;
    border: none;
    font-size: 13px;
    width: 130px;
    border-radius: 30px;
}

.btn-action:hover {
    background-color: color-mix(in srgb, var(--primary-color) 90%, black);
}

.logo-slogan {
    font-size: 6px;
}

.hero-wrapper {
    height: auto; /* Full screen */
}

.feature-card-two{
    background-color: #101816;
    height: 280px !important;
}

.icon-circle{
    background-color: #427E72;
}

.feature-btn{
    font-size: 15px;
}

.contact-section { 
    background: linear-gradient(to bottom, #000, #427E72); 
}

.contact-heading .highlight { 
    color: #198754; 
}

.form-control { 
    border: none; 
    border-bottom: 1px solid #e0e0e0; 
    font-size: 12px !important;
}

.form-control:focus { 
    box-shadow: none; 
    border-bottom-color: #427E72; 
    background: transparent; 
}

.btn-send {
    color: #427E72; 
    font-size: 14px;
    width: 150px;
}

.btn-send:hover { 
    border-color: #427E72; 
    color: #427E72; 
}

.footer-section { 
    background: linear-gradient(to bottom, #427E72, #000); 
}

.message-text{
    height: 100px;
}

.contact-card{
 background-color: #101816;
}

textarea::placeholder {
    color: #888 !important;
    opacity: 1 !important;
    font-size: 12px;
}

textarea{
    color: white !important;
    font-size: 12px !important;
}

.social-icon{
    width: 40px; 
    height: 40px; 
    background: #198754;
}

.hero-wrapper {
    min-height: 100vh;
}

.hero-video {
    min-width: 100%;
    min-height: 100%;
}

.partner-logo{
    height: 20px;
}

@media (width > 1600px) {
    /* Your styles here */
    .hero-title{
        font-size: 45px;
        margin-top: 110px;
    }

    .hero-description{
        font-size: 16px;
    }

    .hero-title-two{
        font-size: 30px !important;
    }

    .gradient-bg{
        height: 70vh;
    }

    .page-title{
        font-size: 40px !important;
    }

    .challenges-bg{
        height: 80vh;
    }
}

@media (width < 576px) {
    html, body {
        width: 100%;
        overflow-x: hidden !important;
    }

    .page-title{
        margin-top: 70px;
        font-size: 20px;
    }

    .hero-title-two{
        font-size: 18px;
    }

    .page-description{
        font-size: 12px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .features-container{
        border: none;
        background: transparent;
    }

    .feature-btn{
        margin-left: auto;
        margin-right: auto;
        font-size: 12px;
        width: 120px !important;
    }

    .contact-heading , .contact-subtitle{
        text-align: center;
    }

    .decorative-shape {
        width: 100% !important;
        overflow: hidden;
    }

    .circle-layer {
        display: none !important;
    }
    
}

.hero-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #000000b6;
    z-index: 1;
    pointer-events: none;
    }