* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
/*border: 2px solid red;*/
 }
            
.section-head {
    color: #0ea2b0;
    font-weight: 600;
}
/* Tablet */
@media (max-width: 992px) {
.section-head {
        font-size: 28px;
    }
}

/* Mobile */
@media (max-width: 768px) {
.section-head{

        font-size: 24px;
    }
}
@media (max-width: 576px) {
    .section-head{
    text-align : center;
    }
}
.section-desc {
    font-weight: 700;
    font-size: 42px;
    line-height: 1.2;
    text-align: left; /* optional */
}

/* Tablet */
@media (max-width: 992px) {
.section-desc{
        font-size: 36px;
    }
}

/* Mobile */
@media (max-width: 768px) {
.section-desc{
        font-size: 28px;
    }
}

.hero-section {
    position: relative;
    width: 100%;
    height: 70vh; /* Adjusted height */
    background: url('../images/backgroundimage.jpg') no-repeat center center; /* Check path */
    background-size: cover;
    background-attachment: scroll; /* Fixed issues on mobile */
    overflow: hidden;
   /* border: 2px solid red;*/
}
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

/* Hero Content */
.hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    z-index: 2;
    width: 80%;
}

.hero-content h1 {
    font-size: 42px; /* Slightly reduced size */
    font-weight: bold;
    margin-bottom: 20px;
    opacity: 0;
    animation: fadeInUp 1s ease forwards;
    animation-delay: 0.5s;
}

.hero-content p {
    font-size: 18px;
    margin-bottom: 30px;
    opacity: 0;
    animation: fadeInUp 1s ease forwards;
    animation-delay: 0.8s;
}

.hero-content .btn {
    margin-top: 10px;
    padding: 10px 25px;
    background: #0ea2b0;
    border: none;
    border-radius: 30px;
    font-weight: 600;
    transition: all 0.3s ease;
    opacity: 0;
    animation: fadeInUp 1s ease forwards;
    animation-delay: 1.1s;
}

.hero-content .btn:hover {
    background: #0c8d99;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

    /*accordion*/
    .accordion-button:not(.collapsed) {
        background-color: #eeeeee;
        color: #333;
      }
      .accordion-button:focus {
        box-shadow: none;
      }
      
      .year-content {
        padding: 15px;
      }
        /*pictures*/
        .profile-card {
            display: flex;
            max-width: 800px;
            width: 100%;
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        
        .profile-image {
            flex: 1;
            min-width: 300px;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        .profile-image img {
            max-width: 100%;
            height: auto;
            border-radius: 4px;
        }
        
        .profile-info {
            flex: 1;
            padding: 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        
        .profile-title {
            color: #555;
            margin-bottom: 10px;
            font-size: 18px;
        }
        
        .profile-name {
            font-size: 32px;
            font-weight: bold;
            color: #333;
            margin-bottom: 20px;
        }
        
        .profile-position {
            font-size: 24px;
            font-weight: bold;
            color: #333;
            margin-bottom: 15px;
        }
        
        .profile-organization {
            font-size: 16px;
            color: #555;
        }
/* Full height carousel */
.carousel {
    position: relative;
    width: 100%;
    height: 100vh;
}

.carousel-item img {
    height: 100vh;
    width: 100%;
    object-fit: cover;
}
/* Dark Overlay for Carousel */
.carousel-item {
    position: relative;
}

.carousel-item::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* Adjust visibility */
    z-index: 1;
}

/* Ensure caption is visible over overlay */
.carousel-caption {
    z-index: 2;
    position: absolute;
    bottom: 20%;
}


/* Top Navbar - Transparent */
.top-navbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: transparent;
    color: white;
    padding: 5px 20px;
    z-index: 1050;
}

.top-navbar .contact-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.top-navbar a {
    color: white;
    margin-left: 10px;
    text-decoration: none;
}

/* Text + Icons */
.topbartext {
    font-size: 18px;
    font-weight: bold;
}
.topbaricon,
.topbarsocialicon {
    font-size: 20px;
    color: white;
}


/* 📱 Mobile Responsive */
@media (max-width: 992px) {
    .top-navbar {
        padding: 5px 10px;
    }

    .top-navbar .contact-info {
        flex-direction: column;
        text-align: center;
        gap: 5px;
    }

    .topbartext {
        font-size: 15px;
        line-height: 18px;
    }

    .topbarsocialicon {
        font-size: 18px;
    }
}

@media (max-width: 576px) {
    .top-navbar .contact-info {
        gap: 3px;
    }

    .topbartext {
        font-size: 14px;
        font-weight: 600;
    }

    .topbarsocialicon {
        font-size: 17px;
    }
}
/* Mobile Logo Fix */
@media (max-width: 768px) {
    .navbar-overlay {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 50px;
    }

    .logo-container {
       
        background: rgba(255, 255, 255, 0.85);
        border-radius: 6px;
        padding: 6px 10px;
        text-align: center;
        display: flex;
        justify-content: center;
    }

    .logo-container img {
        height: auto;
        width: auto;
        max-width: 85%; /* Make logo wider */
        max-height: 65px;
    }
}


/*--------------------------------/*  
/* Centered navbar container */
.navbar-overlay {
    position: absolute;
    top: 50px; 
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    text-align: center;
  
}


.bottom-navbar {
    background: white;
    border-radius: 8px;
    padding: 5px;
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.8);
}

.bottom-navbar .nav-link {
    color: black !important;
}


.logo-container {
    text-align: center;
    padding: 5px;
    border-radius:5px;
    background: rgba(255, 255, 255, 0.8);

  
}

.logo-container img {
    height: 80px;
    max-width: 100%;
    width: auto;
}
@media (max-width: 768px) {
    .logo-container img {
        height: 60px;  
    }
}
@media (max-width: 576px) {
    .logo-container img {
        height: 40px; 
    }
} 
    @media (max-width: 576px) {
    .logo-container img {
        height: 35px; 
    }
}
@media (max-width: 992px) {
    
    .navbar-overlay .container-fluid {
        justify-content: flex-end !important;
        
    }

    .navbar-toggler {
        margin-left: auto !important;
        position: relative;
        right: 10px;
        z-index: 9999;
        
    }
    .navbar-toggler-icon{
        font-size:20px; 
    }
}
@media (max-width: 600px) {
    .navbar-toggler-icon{
        font-size:15px; 
    }
}

/*---------------------------------*/
.carousel-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    text-align: center;
    color: white;
    padding: 0 15px;
}

.carousel-caption h1 {
    font-size: 46px;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.7);
}

.carousel-caption p {
    font-size: 18px;
    margin-bottom: 15px;
    font-weight: 400;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.carousel-caption .btn {
    padding: 10px 22px;
    font-size: 16px;
}


@media (max-width: 992px) {
    .carousel-caption {
        top: 55%; 
    }

    .carousel-caption h1 {
        font-size: 34px;
    }

    .carousel-caption p {
        font-size: 16px;
    }
}


@media (max-width: 768px) {
    .carousel-caption {
        top: 58%;
    }

    .carousel-caption h1 {
        font-size: 26px;
        line-height: 1.3;
    }

    .carousel-caption p {
        font-size: 14px;
    }

    .carousel-caption .btn {
        padding: 8px 18px;
        font-size: 14px;
    }
}


@media (max-width: 400px) {
    .carousel-caption {
        top: 62%;
    }

    .carousel-caption h1 {
        font-size: 22px;
    }

    .carousel-caption p {
        display: none; 
    }

    .carousel-caption .btn {
        font-size: 13px;
        padding: 6px 16px;
    }
}



/*---------------------------------------*/

.image-container1 {
    position: relative;
    width: 100%;
    height: auto !important;
    padding-top: 10px;
}

/* Large Image */
#large {
    width: 80%;
    height: auto;
    border: 2px solid #fff;
    border-radius: 6px;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
    
}

/* Small Image Overlay */
#small {
    position: absolute;
    bottom: -120px;
    right: 5%;
    width: 65%;
    height: auto;
    border: 2px solid #fff;
    border-radius: 6px;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
}

@media (max-width: 1024px) {
    .image-container1 {
        margin-top: 20%;
    }
}

/* 📱 Mobile Responsive */
@media (max-width: 768px) {
    .image-container1 {
        text-align: center;
        justify-items: center;
        margin-top: 20%;
        padding-top:10px;
        
    }

    #large {
        width: 85%;
        right: 10%;
         
}
    

    #small {
        position: absolute;
        bottom: -130px;
        right: -5%;
        
}
.welcome1{
    font-size: 14px;
}
}
/* 📱 Small Phones */
@media (max-width: 480px) {
    .image-container1 {
        text-align: center;
        justify-items: center;
        margin-top: 5%;
    }
    #small {
        width: 70%;
        bottom: -120px;
        right: 35%;
        transform: translateX(50%);
    }
    .welcome1{
        font-size: 12px;
}
}


/*--------------------------------*/
/*.position-relative {
position: relative;
display: inline-block;
}*/



#programs {
position: relative;
/* display: inline-block;
position: relative;*/
height: 500px; /* Increase height if needed */
background-color: black;
color: white;
padding-bottom: 100px; /* Adjust for overlay space */
}

#joinimages {
position: absolute;
/*bottom: -390%; */
bottom:-2300px;
left: 50%;
transform: translateX(-50%);
width: 100%;
z-index: 10;
}


#nobleimages {
position: absolute;
/*bottom: -900%; */
bottom:-4750px; 
left: 50%;
transform: translateX(-50%);
width: 100%;
z-index: 10;

}
/*.testimonial {
background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), 
        url('images/new.jpg');
background-size: cover;  
background-position: center; 
background-attachment: fixed; 
background-repeat: no-repeat; 
/*display: flex;
align-items: center;
justify-content: center;
text-align: center;
}

.testimonial-card {
    background: white;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
}
.testimonial-img {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50%;
    object-fit: cover;
   
}
.testimonial-quote {
    font-size: 5rem;
    color: #00a2c6;
    position: absolute;
    right: 20px;
    top: 20px;
}
.overlaytext {
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: 100%;

color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 10px;
}
*/

.videocss{
    width:80%;height:350px;border-radius:20px;
}

.noblecontainer{
    padding-left:10%;
}
.nobleimagesrow{
    border-radius:5px;width:80%;height:200px;background-color:#0ea2b0;
}
.nobletext{
    font-weight: bolder;padding-top:2%;
}
.safeadven{
    padding-left:6%;
}
.donationsecond{
    margin-left:-10%;
}
.donationtext{
    padding-left:6%;
}
.donationbox{
    padding-left:5%;width:270px;height:450px;border-radius:20px;background-color:#01173c;color:white;
}
.program1{
    position: relative;margin:0px !important;
}
.program1image{
    height:240px;width: 110%; display: block;
}
.program2image{
    height:240px;width: 110%; display: block;
}
.program3image{
    height:240px;width: 110%; display: block;
}
.program4image{
    height:240px;width: 100%; display: block;
}

.section-title, .section-title-1 {
    color: #333;
    margin-bottom: 20px;
    font-weight: bold;
}

.other-links, .other-links-2, .other-links-3 {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.other-links h1, .other-links-2 h1, .other-links-3 h1 {
    font-size: 1.5rem;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.other-links ul, .other-links-2 ul, .other-links-3 ul {
    list-style-type: none;
    padding-left: 0;
}

.other-links li, .other-links-2 li, .other-links-3 li {
    padding: 5px 0;
}

.other-links a, .other-links-2 a, .other-links-3 a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s;
}

.other-links a:hover, .other-links-2 a:hover, .other-links-3 a:hover {
    color: aqua;
}

/*footer codes */ 

/*@media screen and (max-width: 768px) {
footer > div > div {
flex: 1 0 50% !important; 
}

.top-navbar .contact-info > div:first-child {  
    display: none;
}

.topbarsocialicon {
    font-size: 16px; 

}


    /*.keyareas{
        margin-top:40%;
    }
    .key{
        margin-top:5%;
    }
    .keyimage{
        margin-left:40% !important;
    }*/
    .happy{
        margin-left:0px !important;
    }
    .happyimage{
        margin-left:0px !important;   
    }
    .societytext{
        margin-top:5%;
    }
    
    #joinimages {
        position: relative; /* Change position to relative so it flows naturally */
        bottom: auto; /* Reset bottom value */
        width: 100%;
        left: 0;
        transform: none; /* Remove transform to avoid shifting */
        text-align: center; /* Center content if necessary */
    }
    .joinimagemobile{
        margin-top:15%;
    }
   
    #centervideo {
       
        bottom:-6300px; 
        left: 50%;
       
        }
        
       

             #nobleimages {
                position: relative; 
                bottom: auto; 
                left: 0;
                transform: none; 
                width: 100%;
                text-align: center; 
            }
            .noblecontainer{
                padding-left:10%;
            }
            .adventure{
                margin-top:90%;
            }
            .safeadven{
                margin-top:5%;
            }
            .donation{
                margin-top:70%;
            }
            .testisecond{
                margin-top:10%;
            }
            .donationfirst{
                margin-top:2%;
               /* margin-left:10%;*/
            }
            .donationsecond{
                margin-left:0px;
            }
            .program1image{
                width:100%;
            }

            .program2image{
                width:100%;
            }
            .program3image{
                width:100%;
            }
            .program4image{
                width:100%;
            }
           



 /*table*/
 .info-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    border: 1px solid #333;
}

.info-table tr {
    border-bottom: 1px solid #333;
}

.info-table td {
    padding: 12px 15px;
    vertical-align: top;
    border-right: 1px solid #333;
}

.info-table td:first-child {
    width: 30%;
    font-weight: bold;
    background-color: #f9f9f9;
}

.info-table td:last-child {
    width: 70%;
}

.title {
    font-weight: bold;
    text-align: center;
    margin-bottom: 5px;
}

.email {
    color: #1a73e8;
}

.highlight {
    font-weight: bold;
}

/* Responsive styles */
@media screen and (max-width: 768px) {
    .info-table td {
        padding: 10px;
    }
    
    .info-table td:first-child {
        width: 40%;
    }
    
    .info-table td:last-child {
        width: 60%;
    }
}

@media screen and (max-width: 480px) {
    .info-table, .info-table tbody, .info-table tr, .info-table td {
        display: block;
        width: 100%;
    }
    
    .info-table td {
        border-right: none;
    }
    
    .info-table td:first-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    
    .info-table tr {
        margin-bottom: 20px;
    }
}


@media screen and (max-width: 480px) {
footer > div > div {
flex: 1 0 100% !important; /* 1 column on mobile */
}

.social-icon {
margin-right: 8px !important;
width: 35px !important;
height: 35px !important;
}

h3 {
font-size: 18px !important;
}
  /* Responsive layout */
  @media (max-width: 768px) {
    .profile-card {
        flex-direction: column;
    }
    
    .profile-image {
        min-width: 100%;
        padding: 20px 20px 0 20px;
    }
    
    .profile-info {
        padding: 20px;
    }
}
}




.hover-aqua {
transition: color 0.3s ease;
}

/* Hover effect that changes only the text to aqua */
.hover-aqua:hover {
color: aqua !important;
}

/* Ensure bullets don't change color on hover */
.list-unstyled li a::before {
color: white;
display: inline-block;
width: 1em;
margin-right: 0.5em;
}

.list-unstyled li a:hover::before {
color: white; /* Keep bullet white even on hover */
}


.social-icon {
   background-color: grey; /* Grey background */
   color: white; /* Icon color */
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 50%;
   width: 40px;
   height: 40px;
   margin-right: 10px; /* Space between icons */
   margin-bottom: 10px; /* Space below icons */
   transition: background-color 0.3s, transform 0.3s; /* Smooth transition */
}

.social-icon:hover {
   background-color: black; /* Change to black on hover */
   transform: scale(1.1); /* Slightly enlarge on hover */
}

.social-icon i {
   font-size: 16px; /* Adjust icon size */}
 
 /* Timeline container */
 .chronicle-wrapper {
    width: 100%;
    max-width: 1200px;
    overflow: hidden;
    position: relative;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Inner slider */
.phase-slider {
    display: flex;
    transition: transform 0.8s ease-in-out;
}

/* Individual slide */
.timepiece {
    min-width: 100%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Content layout */
.chronicle-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1000px;
    gap: 40px;
}

/* Text content container */
.text-vessel {
    flex: 1;
    text-align: left;
    padding: 20px;
}

/* Image container */
.visual-element {
    flex: 1;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.visual-element img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.visual-element:hover img {
    transform: scale(1.03);
}

/* Date styles */
.moment {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
    padding: 8px 20px;
    border-radius: 50px;
    display: inline-block;
    position: relative;
    z-index: 1;
}

/* Description text */
.narrative {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Individual styling for each slide */
.timepiece-1 { background-color: #f1f7ff; }
.timepiece-1 .moment { background-color: #2563eb; color: white; }

.timepiece-2 { background-color: #fffaf0; }
.timepiece-2 .moment { background-color: #f97316; color: white; }

.timepiece-3 { background-color: #f0fff4; }
.timepiece-3 .moment { background-color: #16a34a; color: white; }

.timepiece-4 { background-color: #fdf2f8; }
.timepiece-4 .moment { background-color: #db2777; color: white; }

.timepiece-5 { background-color: #f5f3ff; }
.timepiece-5 .moment { background-color: #7c3aed; color: white; }

.timepiece-6 { background-color: #ecfeff; }
.timepiece-6 .moment { background-color: #0891b2; color: white; }

.timepiece-7 { background-color: #fff1f2; }
.timepiece-7 .moment { background-color: #e11d48; color: white; }

.timepiece-8 { background-color: #fffbeb; }
.timepiece-8 .moment { background-color: #d97706; color: white; }

.timepiece-9 { background-color: #f1f5f9; }
.timepiece-9 .moment { background-color: #475569; color: white; }

.timepiece-10 { background-color: #f0f9ff; }
.timepiece-10 .moment { background-color: #0284c7; color: white; }

/* Navigation dots */
.timeline-navigation {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    gap: 8px;
    padding-bottom: 15px;
}

.era-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #cbd5e1;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.era-indicator.active {
    background-color: #1e40af;
}

/* Event title */
.achievement-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #1e293b;
}

/* Call to action button */
.action-prompt {
    display: inline-block;
    padding: 10px 25px;
    background-color: #2563eb;
    color: white;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    margin-top: 10px;
    transition: all 0.3s ease;
}

.action-prompt:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(37, 99, 235, 0.3);
}

/* Alternating layout for even/odd slides */
.timepiece:nth-child(even) .chronicle-content {
    flex-direction: row-reverse;
}

/* Media queries */
@media (max-width: 992px) {
    .chronicle-content {
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .timepiece {
        padding: 30px 20px;
    }
    
    .chronicle-content {
        flex-direction: column !important;
        gap: 20px;
    }
    
    .text-vessel, .visual-element {
        width: 100%;
    }
    
    .achievement-title {
        font-size: 20px;
    }
    
    .narrative {
        font-size: 14px;
    }
    
    .moment {
        font-size: 16px;
        padding: 6px 16px;
    }
    
    .action-prompt {
        padding: 8px 20px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .timepiece {
        padding: 20px 15px;
    }
    
    .achievement-title {
        font-size: 18px;
    }
    
    .narrative {
        font-size: 13px;
    }
}
/*accordion*/
.accordion-button:not(.collapsed) {
    background-color: #eeeeee;
    color: #333;
  }
  .accordion-button:focus {
    box-shadow: none;
  }
  
  .year-content {
    padding: 15px;
  }
    /*pictures*/
    .profile-card {
        display: flex;
        max-width: 800px;
        width: 100%;
        background-color: white;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    
    .profile-image {
        flex: 1;
        min-width: 300px;
        background-color: #f0f0f0;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
    }
    
    .profile-image img {
        max-width: 100%;
        height: auto;
        border-radius: 4px;
    }
    
    .profile-info {
        flex: 1;
        padding: 40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .profile-title {
        color: #555;
        margin-bottom: 10px;
        font-size: 18px;
    }
    
    .profile-name {
        font-size: 32px;
        font-weight: bold;
        color: #333;
        margin-bottom: 20px;
    }
    
    .profile-position {
        font-size: 24px;
        font-weight: bold;
        color: #333;
        margin-bottom: 15px;
    }
    
    .profile-organization {
        font-size: 16px;
        color: #555;
    }
    
    /* Responsive layout */
    @media (max-width: 768px) {
        .profile-card {
            flex-direction: column;
        }
        
        .profile-image {
            min-width: 100%;
            padding: 20px 20px 0 20px;
        }
        
        .profile-info {
            padding: 20px;
        }
    }
    /*accordion-documentation*/
  .document-content {
    padding: 15px;
  }

/*gallery*/
.gallery-container {
max-width: 1200px;
margin: 0 auto;
}

.gallery-row {
display: flex;
flex-wrap: wrap;
margin: -10px;
}

.gallery-item {
flex: 0 0 33.333333%;
padding: 10px;
transition: transform 0.3s ease;
}

.gallery-item img {
width: 100%;
height: 250px;
object-fit: cover;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}

.gallery-item:hover {
transform: scale(1.03);
}

.gallery-item img:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Responsive adjustments */
@media (max-width: 992px) {
.gallery-item {
    flex: 0 0 50%;
}
}

@media (max-width: 576px) {
.gallery-item {
    flex: 0 0 100%;
}

h1 {
    font-size: 2rem;
}
}


/*contact*/


.sm-container {
max-width: 800px; /* Reduced max-width */
margin: 0 auto;
padding: 20px 10px; /* Reduced padding */
background-color: #fff;
border-radius: 6px; /* Slightly reduced border-radius */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Reduced shadow */

}

.sm-heading {
text-align: center;
margin-bottom: 20px; /* Reduced margin */
color: #2c3e50;
font-size: 1.8rem; /* Reduced font size */
}

.sm-contact-layout {
display: flex;
flex-wrap: wrap;
gap: 20px; /* Reduced gap */
}

.sm-form-area {
flex: 1 1 300px; /* Reduced flex-basis */

}

.sm-map-area {
flex: 1 1 300px; /* Reduced flex-basis */
}

.sm-form .sm-field {
margin-bottom: 12px; /* Reduced margin */
}

.sm-form .sm-label {
display: block;
margin-bottom: 4px; /* Reduced margin */
font-weight: 600;
color: #2c3e50;
font-size: 12px; /* Reduced font size */
}

.sm-form .sm-input,
.sm-form .sm-textarea,
.sm-form .sm-select {
width: 100%;
padding: 8px 10px; /* Reduced padding */
border: 1px solid #ddd;
border-radius: 4px;
font-size: 12px; /* Reduced font size */
transition: border-color 0.3s;
}

.sm-form .sm-input:focus,
.sm-form .sm-textarea:focus,
.sm-form .sm-select:focus {
border-color: #3498db;
outline: none;
}

.sm-form .sm-textarea {
height: 100px; /* Reduced height */
resize: vertical;
}

.sm-button {
background-color: #3498db;
color: white;
border: none;
padding: 8px 15px; /* Reduced padding */
font-size: 12px; /* Reduced font size */
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.sm-button:hover {
background-color: #2980b9;
}

.sm-map-wrapper {
width: 100%;
height: 100%;
min-height: 250px; /* Reduced min-height */
border-radius: 4px; /* Reduced border-radius */
overflow: hidden;
border: 1px solid #ddd;
}

.sm-map-wrapper iframe {
width: 100%;
height: 100%;
min-height: 250px; /* Reduced min-height */
border: none;
}

.sm-contact-details {
margin-top: 20px; /* Reduced margin */
padding: 10px; /* Reduced padding */
background-color: #f8f9fa;
border-radius: 4px;
font-size: 12px; /* Reduced font size */
}

.sm-contact-details .sm-section-title {
margin-bottom: 10px; /* Reduced margin */
color: #2c3e50;
font-size: 14px; /* Reduced font size */
}

.sm-contact-details p {
margin-bottom: 6px; /* Reduced margin */
}

.sm-contact-details i {
margin-right: 6px; /* Reduced margin */
color: #3498db;
}

@media (max-width: 768px) {
.sm-container {
    padding: 15px 8px; /* Reduced padding */
}

.sm-heading {
    font-size: 1.6rem; /* Reduced font size */
}

.sm-button {
    width: 100%;
}

.sm-map-wrapper, 
.sm-map-wrapper iframe {
    min-height: 200px; /* Reduced min-height */
}
}

@media (max-width: 480px) {
.sm-container {
    padding: 15px 5px; /* Reduced padding */
}

.sm-heading {
    font-size: 1.4rem; /* Reduced font size */
    margin-bottom: 15px; /* Reduced margin */
}

.sm-contact-layout {
    gap: 15px; /* Reduced gap */
}


}
/*
.joinimagerow {
display: flex;
justify-content: center;
gap: 15px;
}

.joinimages .col-md-3 {
background: white;
padding: 10px;
border-radius: 10px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}*/

.box {
    background-color: white;
    border: 2px solid white;
    border-radius: 10px;
    color: black;
    height: 230px;
    box-shadow: 5px 5px 10px white;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding:4%;
  }

  .box:hover {
    transform: translateY(-10px);
  /*  box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.2);*/
  }