/* --- GLOBAL STYLES --- */
:root {
    --primary-blue: #0d3749;
    --secondary-teal: #147f91;
    --wa-green: #25D366;
    --accent-orange: #d2772c;
    --light-bg: #f8fafb;
    --text-dark: #103a4b;
}

body {
    color: #333;
    overflow-x: hidden;
    background: #fdfdfe;
}

a { text-decoration: none !important; transition: 0.3s; }

    /*GOOGLE MARATHI FONT CSS*/
        .bakbak-one-regular {
          font-family: "Bakbak One", sans-serif;
          font-weight: 400;
          font-style: normal;
        }

        .mukta-extralight {
          font-family: "Mukta", sans-serif;
          font-weight: 200;
          font-style: normal;
        }

        .mukta-light {
          font-family: "Mukta", sans-serif;
          font-weight: 300;
          font-style: normal;
        }

        .mukta-regular {
          font-family: "Mukta", sans-serif;
          font-weight: 400;
          font-style: normal;
        }

        .mukta-medium {
          font-family: "Mukta", sans-serif;
          font-weight: 500;
          font-style: normal;
        }

        .mukta-semibold {
          font-family: "Mukta", sans-serif;
          font-weight: 600;
          font-style: normal;
        }

        .mukta-bold {
          font-family: "Mukta", sans-serif;
          font-weight: 700;
          font-style: normal;
        }

        .mukta-extrabold {
          font-family: "Mukta", sans-serif;
          font-weight: 800;
          font-style: normal;
        }
        
    /*GOOGLE MARATHI FONT CSS*/

/* --- HEADER & TOP BAR --- */
.top-bar {
    background: linear-gradient(90deg, rgb(255, 193, 7) 0%, rgb(255, 111, 0) 100%);
    padding: 9px 0px;
    
}
.top-bar span{
    font-size: 17px;
    color: #103a4b!important;
}

.navbar {
    background: linear-gradient(135deg, var(--primary-blue), var(--secondary-teal)) !important;
    border-bottom: 1px solid #ff7200;
    padding: 10px 0;
}

.navbar-brand img {     
    height: 40px;
    background: #fff;
    padding: 3px 7px;
    border-radius: 3px;
}

.nav-link { color: #fff !important; font-size: 17px; margin: 0 5px; }
.nav-link:hover { color: #e9f600 !important; }

.lang_toggle_btn {
    background: linear-gradient(90deg, rgb(255, 193, 7) 0%, rgb(255, 111, 0) 100%);
    color: #fff;
    border-radius: 20px;
    font-size: 13px;
}

/* --- Navbar Toggler Styles (Fix for Mobile) --- */
.navbar-toggler {
    border: none !important;
    box-shadow: none !important;
    padding: 0;
}

.navbar-toggler:focus {
    outline: none !important;
}

.custom-toggler {
    height: 22px;
    width: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}

.toggler-icon {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #fff; /* हे आयकॉन दृश्यमान करते */
    border-radius: 5px;
    transition: all 0.3s ease;
}

/* Animation when toggler is clicked */
.navbar-toggler:not(.collapsed) .toggler-icon:nth-child(1) {
    transform: rotate(45deg) translate(5px, 6px);
}
.navbar-toggler:not(.collapsed) .toggler-icon:nth-child(2) {
    opacity: 0;
}
.navbar-toggler:not(.collapsed) .toggler-icon:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -6px);
}

/* --- BANNER SECTION --- */
.main-banner { position: relative; overflow: hidden; }

.main-banner .banner-side-image{
    width: 63% !important;
    padding-top: 183px;
}

.banner-slide {
    height: 500px;
    background-size: cover;
    background-position: center;
    position: relative;
}

/* GIF Background logic */
.slide-1 { 
    background: linear-gradient(145deg, #d4f9fd, #f1e4d7) !important; 
    /*background: linear-gradient(rgba(13, 55, 73, 0.7), rgba(13, 55, 73, 0.7)), url('../images/banner/static_back.jpg'); background-size: cover; */
}
.slide-gif { 
    background: linear-gradient(145deg, #d4f9fd, #f1e4d7) !important; 
    background-size: cover; 
    background-position: center;
}

.banner-heading { font-size: 2.5rem; line-height: 1.2;color:#0f4e60!important  }
.text-highlight { color: #e67418!important;}

.highlight_box {
    background: rgb(1 101 130);
    padding: 10px 20px;
    border-left: 4px solid #eaf700;
    display: block; 
    width: fit-content;
    backdrop-filter: blur(5px);
}

.highlight_box p{
    margin: 0px;
}

.badge-founding {
    color: rgb(13 55 73) !important;
    padding: 7px 27px;
    border-radius: 50px;
    font-size: 14px;
    display: inline-block;
    box-shadow: 0px 0px 10px #c0fe58;
}

.join-btn {
    background:linear-gradient(60deg, rgb(255, 193, 7) 0%, rgb(255, 111, 0) 100%);
    color: #fff;
    padding: 12px 30px;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(210, 119, 44, 0.4);
    margin-top: 10px; /* Added spacing from box above */
}

/* --- CAROUSEL INDICATORS FIX --- */
.custom-indicators {
    z-index: 15 !important;
}

.custom-indicators button {
    cursor: pointer !important;
    background-color: #0d3b4d!important;
    pointer-events: auto !important;
}

/* --- VISION SECTION --- */
.vision-section {
    background: linear-gradient(344deg, rgb(255 255 255) 0%, rgb(252 238 196) 100%);
    border-top: 1px solid #ff7200;
    border-bottom: 1px solid #ff7200;
    padding-bottom: 0px!important;
}
.vision-section  .floating-img{
 width: 50%!important;
}
.vision-tagline-text{
    color: red;
}
.vision-section h2{
    color: #0f4f61;
}
.vision-section h4{
   color:  #104f61 !important
}
.vision-section p{
   color:  #104f61 !important;
   font-size: 18px;
}
.vision-underline { width: 60px; height: 4px; background: var(--accent-orange); border-radius: 2px; }
.btn-vision { background: linear-gradient(90deg, rgb(255, 193, 7) 0%, rgb(255, 111, 0) 100%); color: #fff; border-radius: 50px; font-weight: 700; }

/* --- PROBLEMS SECTION --- */
.common-problems { background: #f0f4f7; }
.common-problems h3{
    font-size: 37px;
    color: #0d3749;
}

.problems-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
}

.problem-card {
    background:#ebfbff;
    padding: 15px 20px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: 0.3s;
}
.problem-card span{
    color: #0f4f61;
}

.problem-card:hover { transform: translateY(-5px);  }
.problem-icon { font-size: 22px; color: #e67418!important; }

/* --- FEATURES SLIDER --- */

/*COMMUNUTY LEAD START CSS*/
    .communityLead{
        background: #fff;
    }
/*COMMUNUTY LEAD END CSS*/

.community-features { background: linear-gradient(344deg, rgb(255 255 255) 0%, rgb(252 238 196) 100%); overflow: hidden; }

.community-features h3{
    font-size: 37px;
    color : #0d3749;
}

.slider-track {
    display: flex;
    width: calc(300px * 12);
    animation: scroll 30s linear infinite;
}

.feature-item {
    background: linear-gradient(135deg, #0d3749, #147f91);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    flex: 0 0 250px;
    margin: 0 15px;
    padding: 30px 20px;
    text-align: center;
    border: 2px solid #ff7901;
}

.feature-item img { height: 120px; object-fit: contain; }
.feature-item h5 { color: #f3d98d; font-size: 18px; }

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

    /*SECTION 2 CSS START*/
    .join-community{
        background: linear-gradient(360deg, rgb(255 200 155) 0%, rgb(255 255 255) 30%);
        color: #0d3749!important;
    }
    .join-community .btn-outline-success{
        color: #ee6900!important;
        border-color: #fda905!important;
    }
    .join-community .btn-outline-success:hover{
        background: linear-gradient(90deg, rgb(255, 193, 7) 0%, rgb(255, 111, 0) 100%);
        border-color: #0d3749!important;
        color: #0d3749!important;
    }
    .join-community h3{
        color: #14435f;
        text-shadow: 1px 1px 12px #f87901;
        font-size: 37px !important;
    }
    /*SECTION 2 CSS END*/

/* --- LEAD FORM --- */
.communityLead h4{
    font-size: 37px;
    color: #0d3749;
}
div:where(.swal2-container).swal2-center>.swal2-popup {
    background: linear-gradient(145deg, #d4f9fd, #f1e4d7) !important;
}
.form-card {
    background: linear-gradient(318deg, #f7d674, #b6fcb9);
    border-radius: 12px;
    box-shadow: 0 8px 47px rgb(249 217 124);
    border: 1px solid #fa7e01;
    max-width: 500px;
}

.input-group-text { background: #0d3749; color: #fff; border: none; }
.input-group input{
    height: 52px!important;
}
.input-group select{
    height: 52px!important;
}
.input-group input:focus{
    outline: none!important;
    border: none!important;
    box-shadow: none!important;
}
.whatsapp-btn {
    background: #058b37 !important;
    color: #fff !important;
    border-radius: 52px;
    padding: 9px 27px;
    margin: auto;
}

/*FAQ SECTION CSS START*/
    .faq-section{
        background: linear-gradient(344deg, rgb(255 255 255) 0%, rgb(252 238 196) 100%);
    }

    .faq-section h3{
        font-size: 37px;
        color: #0d3749;
    }
/*FAQ SECTION CSS END*/

/* --- ANIMATIONS --- */
.floating-img { animation: float 4s ease-in-out infinite; }
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.pulse-btn { animation: pulse 2s infinite; }
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
    70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* --- STICKY FOOTER --- */
.sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 20px;
    background: #fff;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.1);
    z-index: 9999;
}

.btn-whatsapp-sticky { 
    background: linear-gradient(90deg, rgb(255, 193, 7) 0%, rgb(255, 111, 0) 100%);
    color: #fff;
    /* font-weight: 700; */
    border-radius: 10px;
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 768px) {
    .banner-slide { height: 450px; text-align: center; }
    .banner-heading { font-size: 1.8rem; }
    .banner-text { font-size: 14px; }
    .highlight_box { display: block; margin-left: auto; margin-right: auto; }
    .content_box { padding-top: 0; }
    .communityLead h4 {font-size: 43px;}
    .form-card {padding: 30px 12px!important;}
    footer { padding-bottom: 80px; } /* Space for sticky bar */
}

footer { background: var(--primary-blue); color: #fff; }
.extra-small { font-size: 10px; }