 * {
            box-sizing: border-box;
        }
        
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }
        
  
  a {
    color: #000;
    text-decoration: none;
  }
  
  a:hover {
    color: #333;
    text-decoration: none;
  }
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: Arial, sans-serif;
  }
  
/* ***************** navbar section started here ********************* */
#nav-bar{
    position: static;
    top: 0;
    z-index: 10;
    padding: 0;
}

.brand-text h5 {
    font-weight: bold;
    margin: 0;
 }
 
 .brand-text small {
    font-size: 0.85rem;
    color: #555;
 }
 



/* Navbar Custom Styling */
.navbar {
    background-color: #fff;
    padding: 0;
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); Adds a subtle shadow to the navbar */
}

.navbar-brand img {
    width: 90%;
    display: flex;
    justify-content: flex-end;
}

.navbar-nav li {
    padding: 0 10px;
}

.navbar-nav li a {
    color: #000;
    font-weight: 400;
    font-family: sans-serif;
    float: right;
    text-align: left;
    font-size: 16px; /* Set font size for the navbar items */
    padding: 10px 15px;
    transition: color 0.3s ease; /* Smooth transition on hover */
}

/* Hover effect for menu items */
.navbar-nav li a:hover {
    color: solid rgb(236 85 72);
}

/* Navbar toggler button */
.navbar-toggler:focus {
    box-shadow: none !important;
}

.fa-bars {
    color: #fff;
    font-size: 30px;
}

.navbar-toggler {
    outline: none;
}

/* Custom Styling for Nested Dropdowns */
.dropdown-submenu {
    position: relative;
}

/* Style for nested dropdown menu */
.dropdown-submenu .dropdown-menu {
    display: none; 
    position: absolute;
    top: 0;
    left: 100%;
    margin-top: -1px;
    padding: 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background-color: #f8f9fa;
    border-radius: 0.25rem;
    transition: all 0.3s ease-in-out; 
}

/* Show the nested dropdown when hovering (for desktop) */
.dropdown-submenu:hover > .dropdown-menu {
    display: block;
    animation: slideIn 0.2s ease-out; 
}

/* Add a slide-in effect */
@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateX(-15px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Arrow icon for nested dropdowns */
.dropdown-submenu > a::after {
    /* content: "▸"; Use an arrow to indicate the submenu */
    float: right;
    margin-left: 10px;
    color: #007bff; 
}




/* Hover effect for nested dropdown items */
.dropdown-submenu .dropdown-item:hover {
    background-color: #007bff;
    color: white;
    transition: background-color 0.3s ease;
}

/* Hover effect for top-level menu items */
.nav-item.dropdown:hover > a {
    background-color: #f1f1f1;
    color: #007bff;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Adjust the dropdown menu items */
.dropdown-menu > .dropdown-item {
    color: #37517e; /* Dark color for the menu items */
    padding: 10px 20px;
    font-size: 14px; /* Set font size for the items */
}

/* Hover effect for normal dropdown items */
.dropdown-menu > .dropdown-item:hover {
    background-color: #007bff;
    color: white;
}

/* Adjust for mobile view */
.navbar-toggler {
    border: none;
    /* background-color: #007bff; */
}

/* Adjust the look of the hamburger icon */
.navbar-toggler-icon {
    background-color: white;
}

/* For mobile view, force the dropdowns to be clickable */
@media (max-width: 992px) {
    .dropdown-menu {
        position: static;
        float: none;
        width: 100%;
    }

    .dropdown-submenu .dropdown-menu {
        left: 0;
        margin-top: 0;
    }
}


/* index banner */


.glance-head {
    font-size: 49px;
    font-weight: 300;
    display: flex;
    justify-content: center;
    font-family: sans-serif;

}
.glance-para {
    text-align: center;
    font-size: 18px;
    font-weight: 300;
    font-family: sans-serif;
    color: rgb(255 255 255);;
}

.activities-head {
    color: rgb(151 192 232);
   margin-bottom: 30px;
}

.activities-para {
    font-size: 17px;
    color: #333333;
    font-weight: 400;
}


 
        
        /* Common section styling */
        .section-container {
            width: 100%;
            margin: 0;
            padding: 0;
            position: relative;
             background-color: #f8f9f9;
        }
        
        /* Row styling */
        .section-row {
            display: flex;
            flex-wrap: wrap;
            margin: 0;
            width: 100%;
            min-height: 620px;
        }
        
        /* Column styling */
        .image-column {
            padding: 0;
            position: relative;
            overflow: hidden;
        }
        
        .content-column {
            padding: 0;
            position: relative;
            background-color: #ffffff;
        }
        
        /* Image styling */
        .image-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            min-height: 620px;
        }
        
        .section-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
        }
        
        /* Specific image positioning */
        #education-section .section-image {
            object-position: 66% 0%;
        }
        
        #charity-section .section-image {
            object-position: 78% 0%;
        }
        
        #health-section .section-image {
            object-position: 50% 50%;
        }
        
        #culture-section .section-image {
            object-position: 50% 50%;
        }
        
        /* Content wrapper */
        .content-wrapper {
            padding: 60px 40px;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background-color: #f8f9f9;
        }
        
        /* Text styling - exact match */
        .section-title {
            color: #4a6fa5;
            font-size: 22px;
            font-weight: 700;
            text-transform: uppercase;
            text-align: center;
            line-height: 1.41em;
            margin-bottom: 15px;
            letter-spacing: normal;
        }
        
        .section-subtitle {
            color: #333333;
            font-size: 18px;
            font-weight: 400;
            text-align: center;
            line-height: 1.75em;
            margin-bottom: 20px;
        }
        
        .section-description {
            color: #333333;
            font-size: 17px;
            font-family: sans-serif;
            line-height: 1.875em;
            text-align: center;
            font-weight: 400;
            margin: 0 auto;
        }


        /* ========== QUOTE SECTION STYLING ========== */
        #quote-section {
            width: 100%;
            margin: 0;
            padding: 0;
            position: relative;
        }
        
        .quote-image-wrapper {
            position: relative;
            width: 100%;
            height: 700px;
            overflow: hidden;
        }
        
        .quote-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: 50% 50%;
        }
        
        .quote-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(0, 0, 0, 0.3); /* Subtle overlay for better text readability */
        }
        
        .quote-content {
            text-align: center;
            color: #ffffff;
            padding: 40px;
            max-width: 800px;
            margin: 0 auto;
        }
        
        .quote-text {
            font-size: 22px;
            font-weight: 400;
            line-height: 1.41em;
            margin-bottom: 20px;
            font-style: italic;
        }
        
        .quote-author {
            font-size: 18px;
            font-weight: 400;
            line-height: 1.75em;
        }


        /* ========== CONTACT SECTION STYLING ========== */
        #contact-section {
            width: 100%;
            margin: 0;
            padding: 80px 0;
            background-color: #ffffff;
        }
        
        .contact-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }
        
        .contact-title {
            color: #97c0e8;
            font-size: 40px;
            font-weight: 500;
            text-align: center;
            line-height: 1.35em;
            margin-bottom: 30px;
        }
        
        .contact-description {
            color: #333333;
            font-size: 17px;
            line-height: 1.875em;
            text-align: center;
            margin-bottom: 20px;
        }
        
        .contact-description:last-of-type {
            margin-bottom: 40px;
        }
        
        /* Social Icons */
        .social-icons {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 40px;
        }
        
        .social-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            /* background-color: #f5f5f5; */
            /* border-radius: 50%; */
            color: #000;
            font-size: 18px;
            text-decoration: none;
            transition: all 0.3s ease;
        }
        
        .social-icon:hover {
            background-color: #000;
            color: #ffffff;
            transform: translateY(-3px);
        }
        
        /* Form Styling */
        .contact-form {
            background-color: #f9f9f9;
            padding: 40px;
            border-radius: 8px;

        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 15px;
            color: #333;
            transition: border-color 0.3s ease;
        }
        
        .form-control:focus {
            border-color: #4a6fa5;
            outline: none;
            box-shadow: 0 0 0 2px rgba(74, 111, 165, 0.2);
        }
        
        .form-control::placeholder {
            color: #999;
        }
        
        textarea.form-control {
            min-height: 150px;
            resize: vertical;
        }
        
        .submit-btn {
            background-color: #4a6fa5;
            color: #ffffff;
            border: none;
            padding: 12px 30px;
            font-size: 16px;
            font-weight: 600;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            display: block;
            width: 100%;
        }
        
        .submit-btn:hover {
            background-color: #3a5a8a;
        }
        
        .submit-btn:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }
        
        .success-message {
            text-align: center;
            color: #28a745;
            font-size: 18px;
            margin-top: 20px;
            display: none;
        }
        
        /* Responsive design */
        /* Large devices (desktops, 992px and up) */
        @media (min-width: 992px) {
            .section-row {
                min-height: 620px;
            }
            
            .image-wrapper {
                min-height: 700px;
            }
            
            .content-wrapper {
                padding: 60px 40px;
            }
            
            .image-column, 
            .content-column {
                flex: 0 0 50%;
                max-width: 50%;
            }
             .quote-image-wrapper {
                height: 700px;
            }
            
            .quote-content {
                padding: 60px 40px;
            }
        }
        
        /* Medium devices (tablets, 768px to 991px) */
        @media (min-width: 768px) and (max-width: 991px) {
            .section-row {
                min-height: 550px;
            }
            
            .image-wrapper {
                min-height: 550px;
            }
            
            .content-wrapper {
                padding: 50px 35px;
            }
            
            .image-column, 
            .content-column {
                flex: 0 0 100%;
                max-width: 100%;
            }
              .quote-image-wrapper {
                height: 600px;
            }
            
            .quote-content {
                padding: 50px 35px;
            }
              #contact-section {
                padding: 60px 0;
            }
            
            .contact-form {
                padding: 35px;
            }
        }
        
        /* Small devices (landscape phones, 576px to 767px) */
        @media (min-width: 576px) and (max-width: 767px) {
            .section-row {
                min-height: 500px;
            }
            
            .image-wrapper {
                min-height: 500px;
            }
            
            .content-wrapper {
                padding: 40px 30px;
            }
            
            .image-column, 
            .content-column {
                flex: 0 0 100%;
                max-width: 100%;
            }
            .quote-image-wrapper {
                height: 500px;
            }
            
            .quote-content {
                padding: 40px 30px;
            }
            
            .quote-text {
                font-size: 20px;
            }
            
            .quote-author {
                font-size: 17px;
            }
             
            #contact-section {
                padding: 50px 0;
            }
            
            .contact-title {
                font-size: 36px;
            }
            
            .contact-form {
                padding: 30px;
            }
        }
        
        /* Extra small devices (portrait phones, less than 576px) */
        @media (max-width: 575px) {
            .section-row {
                min-height: auto;
            }
            
            .image-wrapper {
                min-height: 400px;
            }
            
            .content-wrapper {
                padding: 35px 25px;
            }
            
            .image-column, 
            .content-column {
                flex: 0 0 100%;
                max-width: 100%;
            }
            
            .section-title {
                font-size: 20px;
            }
            
            .section-subtitle {
                font-size: 17px;
            }
            
            .section-description {
                font-size: 14px;
            }
              .quote-image-wrapper {
                height: 400px;
            }
            
            .quote-content {
                padding: 35px 25px;
            }
            
            .quote-text {
                font-size: 18px;
            }
            
            .quote-author {
                font-size: 16px;
            }
            contact-section {
                padding: 40px 0;
            }
            
            .contact-title {
                font-size: 32px;
            }
            
            .contact-description {
                font-size: 14px;
            }
            
            .contact-form {
                padding: 25px 20px;
            }
            
            .social-icon {
                width: 36px;
                height: 36px;
                font-size: 16px;
            }
        }
        
        /* Very small devices */
        @media (max-width: 375px) {
            .image-wrapper {
                min-height: 350px;
            }
            
            .content-wrapper {
                padding: 30px 20px;
            }
            .quote-image-wrapper {
                height: 350px;
            }
            
            .quote-content {
                padding: 30px 20px;
            }
              #contact-section {
                padding: 35px 0;
            }
            
            .contact-title {
                font-size: 28px;
            }
        }

.hand-background-image {
            width: 100%;
            height: 510px;
            object-fit: cover;
            object-position: center center;
        }
 .color-underlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }
        
        /* For the image wrapper/container */
        .image-container {
            position: relative;
            height: 510px;
            overflow: hidden;
        }

/* footer  */

.footer-text {
    color: #000 !important;
    font-size: 16px;
}



/* blog page */







 
    /*--------------------------------------------------------------
  # Preloader
  --------------------------------------------------------------*/
  #preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    overflow: hidden;
    background: #cccccc;
  }
  
  #preloader:before {
    content: "";
    position: fixed;
    top: calc(50% - 30px);
    left: calc(50% - 30px);
    border: 6px solid rgb(236, 85, 72);;
    border-top-color: #fff;
    border-bottom-color: #fff;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: animate-preloader 1s linear infinite;
  }
  
  @keyframes animate-preloader {
    0% {
      transform: rotate(0deg);
    }
  
    100% {
      transform: rotate(360deg);
    }
  }
  
  /*--------------------------------------------------------------
  # Back to top button
  --------------------------------------------------------------*/
  .back-to-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: 15px;
    z-index: 996;
    background: rgb(236, 85, 72);;
    width: 40px;
    height: 40px;
    border-radius: 50px;
    transition: all 0.4s;
  }
  
  .back-to-top i {
    font-size: 24px;
    color: #fff;
    line-height: 0;
  }
  
  .back-to-top:hover {
    background: rgb(156, 32, 20);;
    color: #fff;
  }
  
  .back-to-top.active {
    visibility: visible;
    opacity: 1;
  }

  .nav-item .dropdown-menu .dropdown-item{
    color: #000;
  }

  @media(max-width: 768px){
    #footer .footer-top .footer-links{
      justify-content: unset;
    }
  }

  @media(max-width: 992px){
    .navbar-nav li a{
      float: unset;
    }
  }
  .shadow{
    margin: 10px;
  }



  