@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


 :root {
     --primary: #0459a2;
     --secondary: #7fbe36;
     --light: #f5f7fa;
     --light-white: #e5e5e5;
     --color-dark: #333333;
     --color-dark2: #5b5b5b;
     --ChangaOne-family: "Roboto", sans-serif;
     --Inter-family: 'Inter', sans-serif;
     --Montserrat-family: "Montserrat", sans-serif;
 }

 body {
     font-family: var(--Inter-family);
     font-size: 16px; line-height: 1.6;
 }

 /* Navbar */
 .mainheader {
     background: rgba(255, 255, 255, 0.9);
     position: sticky;
     left: 0;
     top: 0;
     z-index: 91;
     width: 100%;
 }
 .hright-btn{margin-left: 30px;} 
 .navbar-brand {
    width: 120px;
 }

 .navbar-nav .nav-link {
     color: var(--color-dark);
     margin: 0 16px;
     text-transform: capitalize;
     font-weight: 700;
     font-size: 18px;
 }

 .navbar-nav .nav-link:hover {
     color: var(--secondary);
 }

 .navbar-toggler {
     border: none;
 }

 .navbar-toggler:focus {
     box-shadow: none;
 }

 .trust-bar {
     gap: 50px; 
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     padding: 10px 20px;
     border-radius: 20px;
     background-color: #eff0f3;
     max-width: fit-content;
     margin: 30px auto;
 }

 .trust-item {
     display: flex;
     align-items: center;
     gap: 8px;
     font-weight: 700;
     color: var(--color-dark);
     font-size: 15px;
 }

 .trust-item .icon { 
     font-size: 16px;
     color: var(--secondary);
 }

 .slick-dotted.slick-slider {
     margin: 0;
 }

 h1,
 h2,
 h3,
 h4,
 h5 {
     font-family: var(--Montserrat-family);
     font-weight: 700;
     color: var(--primary);
 }

 h1 {
     font-size: 67px; 
     font-weight: 800;
 }

 h2 {
     font-size: 40px; 
     font-weight: 800;
 }

 h3 {
     font-size: 26px;
 }

 h4 {
     font-size: 20px;
 }

 h5 {
     font-size: 18px;
 }

 img {
     max-width: 100%;
 }

 /* Hero */
 .hero {
     position: relative;
     color: #fff;
 }
.banner-text{
    text-align: center;
    max-width: 620px;
}
 .hero-slide {
     height: 650px;
     background-size: cover;
     background-position: center;
     position: relative;
 }

 .hero-overlay {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.4);
 }

 .hero-content { 
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
    flex-wrap: wrap; 
 }

 .slick-dots {
     position: absolute;
     bottom: 0;
 }

 .hero-content h1 {
     font-size:45px;
     margin: 0 0 30px;
     color: #fff; 
     text-shadow: 0 5px 7px #000000;
 }

 .bnr-para {
     margin: 0 0 30px;
     color: var(--light-white);
     font-weight: 700;
     font-size: 18px;
 }
 .bnr-para p{margin-bottom: 3px;}

 .bnr-btn-group {
     display: flex;
     gap: 14px;
     justify-content: center;
     flex-wrap: wrap;
 }
.bnr-btn-group .btn{min-width: 230px;}
 .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border-radius: 30px;
     padding: 16px 40px;
     font-size: 20px; line-height: 1;
     min-width: 120px;
     font-weight: 800; 
 }

 .btn img {
     margin-left: 10px;
     width: 15px;
 }

 .btn-primary {
    background: #0459A2;
    background: -webkit-linear-gradient(180deg, rgba(4, 89, 162, 1) 0%, rgba(12, 61, 107, 1) 100%);
    background: -moz-linear-gradient(180deg, rgba(4, 89, 162, 1) 0%, rgba(12, 61, 107, 1) 100%);
    background: linear-gradient(180deg, rgba(4, 89, 162, 1) 0%, rgba(12, 61, 107, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0459A2", endColorstr="#0C3D6B", GradientType=0);
     border: none;
 }
  .btn-primary:hover{
    background: #0459A2;
    background: -webkit-linear-gradient(0deg, rgba(4, 89, 162, 1) 0%, rgba(12, 61, 107, 1) 100%);
    background: -moz-linear-gradient(0deg, rgba(4, 89, 162, 1) 0%, rgba(12, 61, 107, 1) 100%);
    background: linear-gradient(0deg, rgba(4, 89, 162, 1) 0%, rgba(12, 61, 107, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0459A2", endColorstr="#0C3D6B", GradientType=0);
  }

 .btn-success {
    background: #7FBE36;
    background: -webkit-linear-gradient(180deg, rgba(127, 190, 54, 1) 0%, rgba(68, 143, 41, 1) 100%);
    background: -moz-linear-gradient(180deg, rgba(127, 190, 54, 1) 0%, rgba(68, 143, 41, 1) 100%);
    background: linear-gradient(180deg, rgba(127, 190, 54, 1) 0%, rgba(68, 143, 41, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#7FBE36", endColorstr="#448F29", GradientType=0);
     border: none;
 }
.btn-success:hover{
    background: #7FBE36;
    background: -webkit-linear-gradient(0deg, rgba(127, 190, 54, 1) 0%, rgba(68, 143, 41, 1) 100%);
    background: -moz-linear-gradient(0deg, rgba(127, 190, 54, 1) 0%, rgba(68, 143, 41, 1) 100%);
    background: linear-gradient(0deg, rgba(127, 190, 54, 1) 0%, rgba(68, 143, 41, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#7FBE36", endColorstr="#448F29", GradientType=0);
}
/* Mission Section */
.mission-sec{
    text-align: center;
}
.short-desc{
    font-size: 20px;
    font-weight: 600;
    color: var(--color-dark);
}
.short-desc p{margin-bottom: 0;}
.bg-light{
    background-color: #e7eef8 !important;
}
 /* Sections */
 .section {
     padding: 40px 0;
 }

 .section-title {
     margin-bottom: 25px;
     position: relative;
     display: flex;
     align-items: center;
     gap: 20px;
 }
 .section-title::before{
    content: "";
    display: inline-block;
    width: auto; flex: 1;
    height: 1px;
    background-color: #dcdcdc;
 }
 .section-title::after{
    content: "";
    display: inline-block;
    width: auto; flex: 1;
    height: 1px;
background-color: #dcdcdc;
 }

 .pmnt-card img {
     width: 430px;
     margin: 10px 0 0;
     border-radius: 4px;
 }

 /* Impact */
 .impct-wrap{
    background-color: #fff;
    border-radius: 20px;
    padding: 20px;
    max-width: 1180px;
    margin: 0 auto;
 }
  .impact-col{
     border-right: 1px solid #cfcfcf; 
  }
 .impact-box { 
     padding: 0 20px; 
     text-align: center;
 }

 .impact-box h4 {
     font-weight: 700;
     font-size: 36px;
     font-family: var(--ChangaOne-family);
     color: var(--primary);
 }
 .impact-box h4 img{
    width: 44px;
    vertical-align: top;
 }
 .impact-box p {
     font-weight: 700; 
     margin-bottom: 0;
     font-size: 20px;
     color: var(--color-dark2);
 }

 /* Cards */
 .child-card {
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
     border-radius: 10px;
     overflow: hidden;
     transition: all 300ms ease-in-out;
 }
.child-btn-wrap{
    text-align: center;
}
 .child-card:hover {
     transform: translateY(-20px);
 }

 .child-card-content {
     padding: 20px 30px;
 }

 .child-card-content .btn {
     min-width: 230px;
     padding: 13px 10px;
     box-shadow: 0 4px 10px #bcbcbc;
 }
 .child-card-content p{font-size: 20px;}

 .child-card img {
     width: 100%;
 }

 .child-para span {
     font-weight: 700;
 }

 .radius8 {
     border-radius: 8px;
 }

 .stry-para {
     margin: 0 0 30px;
     padding-bottom: 30px;
     border-bottom: 1px solid #ccc;
 }

 /* Donation */
 .donation-box {
     max-width: 1000px;
     margin: 0 auto;
 }

 .donation-box-inr {
     background-color:#eff0f3;
     padding: 10px 25px;
     border: 2px solid var(--light-white);
     border-radius: 10px;
     display: flex;
     align-items: center;
 }

 .donation-box-inr p {
     margin: 0 0 0;
     padding: 0; color: var(--color-dark);
     font-weight: 700;
     text-transform: capitalize;
     font-size: 20px;
 }

 .donation-box .price-text {
     font-weight: 800; 
     margin: 0 15px 0 0;
     color: var(--primary);
     font-size: 30px;
     line-height: 1.1;
 }

 .donation-prce { 
     position: relative;
 }
 .donation-prce .btn{min-width: 300px;}

 .donation-prce .container {
     position: relative;
 }

 /* Footer */
 .footer-section {
    background: #E5EBF7;
    background: -webkit-linear-gradient(90deg, rgba(229, 235, 247, 1) 0%, rgba(228, 234, 246, 1) 100%);
    background: -moz-linear-gradient(90deg, rgba(229, 235, 247, 1) 0%, rgba(228, 234, 246, 1) 100%);
    background: linear-gradient(90deg, rgba(229, 235, 247, 1) 0%, rgba(228, 234, 246, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#E5EBF7", endColorstr="#E4EAF6", GradientType=1);
     font-size: 14px;
 }

 .footer-section a {
     color: inherit;
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: 10px;
 }

 /* Top Bar */
 .footer-top {
    border-bottom: 2px solid #d5dff2;
    padding: 10px 0;
    color: #4a6fa5;
    font-weight: 700;
    font-size: 18px;
 }

 .footer-top .divider {
     color: #4a6fa5;
 }

 .social-icons a {
     color: var(--primary);
     margin-right: 10px;
     font-size: 16px;
     transition: 0.3s;
     width: 28px; height: 28px;
     background-color: #1c4d86;
     display: inline-flex; align-items: center;
     justify-content: center;
     border-radius: 100%;
 }
 .social-icons a:hover{
    background-color: var(--secondary);
 }
 .social-icons a img{
    filter: brightness(0) invert(1);
 }
 .social-icons a:hover {
     color: var(--primary);
 }

 /* Main Footer */
 .footer-main {
     padding: 20px 0;
     color: #333;
 }
 .footer-main a:hover{
    color: var(--secondary);
 }

 .footer-main h6 {
     font-weight: 700;
     color: var(--primary);
     margin-bottom: 10px;
     font-size: 22px;
 }

 .footer-main p {
     margin-bottom: 6px;
     font-weight: 600;
     font-size: 16px;
     color: var(--primary);
 }

 .footer-main i {
     margin-right: 6px;
     color: #1e73be;
 }
 /* Header */
.page-header {
    background: var(--primary);
    color: white;
    padding: 60px 0;
    font-size: 18px;
    text-align: center;
}
.page-header h1{color: #fff; text-shadow: none;}

/* Card */ 

.child-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* Info */
.child-name {
    font-size: 28px;
    font-weight: 700;
    color: var(--primary);
}

.child-info p {
    margin-bottom: 8px;
    font-size: 16px;
}

.highlight {
    font-weight: 600;
}
 

.why-spon-box img{
    height: 50px; 
    width: 50px;
    object-fit: contain;
    margin-bottom: 10px;
}
.slider-item{
    padding: 10px;
}
 /* Detail Page End */
.wpcf7 {
    padding: 30px;
    background: #ffffff;
    max-width: 700px;
    margin: 0 auto;
    text-align: left;
    border-radius:10px;
    box-shadow: 0 0 15px rgb(0 0 0 / 10%);
}
.wpcf7 input, .wpcf7 textarea{
    background:#ccc;
    background: #ffffff;
    width: 100%;
    height: 44px;
    border: 1px solid #ccc;
    border-radius:10px;
}

.wpcf7 label {
    width: 100%;
}
    .wpcf7 label span{
        width:100%;
    }
    .wpcf7 textarea{
        height:100px;
        resize:none;
    }

    .wpcf7 [type="submit"]{
            background: #0459A2;
    background: -webkit-linear-gradient(180deg, rgba(4, 89, 162, 1) 0%, rgba(12, 61, 107, 1) 100%);
    background: -moz-linear-gradient(180deg, rgba(4, 89, 162, 1) 0%, rgba(12, 61, 107, 1) 100%);
    background: linear-gradient(180deg, rgba(4, 89, 162, 1) 0%, rgba(12, 61, 107, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0459A2", endColorstr="#0C3D6B", GradientType=0);
    border: none;
        color:#fff;
        border-radius:10px;
    }
.wpcf7 [type="submit"]:hover{
        background: #0459A2;
    background: -webkit-linear-gradient(0deg, rgba(4, 89, 162, 1) 0%, rgba(12, 61, 107, 1) 100%);
    background: -moz-linear-gradient(0deg, rgba(4, 89, 162, 1) 0%, rgba(12, 61, 107, 1) 100%);
    background: linear-gradient(0deg, rgba(4, 89, 162, 1) 0%, rgba(12, 61, 107, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0459A2", endColorstr="#0C3D6B", GradientType=0);
}
span.wpcf7-spinner {
    position: absolute;
    margin-left: -40px;
    margin-top: 8px;
}
.sponsr-top-imgwrap img{
    width: 100%; height: auto;
    border-radius: 10px;
}
/*-------Responsive starts -----------------*/

/* Responsive Styles */

/* For devices smaller than 992px (Tablets) */
@media (max-width: 991px) {
    .hright-btn {
        margin-left: 0;
        margin-top: 15px;
    }
    
    .navbar-collapse {
        background-color: #fff;
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        margin-top: 10px;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 99;
    }

    .hero-slide {
        height: 600px;
    }
    
    .hero-content h1 {
        font-size: 40px;
    }

    .impact-col {
        border-right: none;
        border-bottom: 1px solid #cfcfcf;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .impact-col:last-child {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .donation-box-inr {
        margin-bottom: 20px;
    }

    .child-card {
        margin-bottom: 30px;
    }

    .footer-main .col-md-4 {
        margin-bottom: 30px;
    }
}

/* For devices smaller than 768px (Mobile) */
@media (max-width: 767px) {
    h1 { font-size: 36px; }
    h2 { font-size: 28px; }
    h3 { font-size: 22px; }
    h4 { font-size: 18px; }
    
    .hero-slide {
        height: auto;
        padding: 60px 0;
    }

    .hero-content {
        text-align: center;
    }

    .hero-content h1 {
        font-size: 32px;
    }

    .banner-text {
        margin: 0 auto;
    }

    .trust-bar {
        flex-direction: column;
        gap: 10px;
        padding: 20px;
    }

    .bnr-btn-group {
        flex-direction: column;
    }

    .bnr-btn-group .btn {
        min-width: 100%;
    }

    .pmnt-card img {
        width: 100%;
        max-width: 100%;
    }

    .short-desc {
        font-size: 16px;
    }

    .stry-para {
        text-align: center;
    }
    
    .text-center .btn {
        width: 100%;
    }

    .donation-prce .btn {
        min-width: 100%;
    }

    .footer-top .d-flex {
        flex-direction: column;
        gap: 15px;
    }

    .footer-top .divider {
        display: none;
    }

    .footer-main {
        text-align: center;
    }

    .page-header {
        padding: 40px 0;
    }

    .child-img {
        margin-bottom: 20px;
    }
    
    .why-spon-box {
        margin-bottom: 30px;
    }
    
    .section-title {
        font-size: 24px;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
    }
    .section-title::before, .section-title::after {
        display: none;
    }
}