@media (min-width: 840px){

    .hero-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 1rem;
    padding-right: 1rem;
    width: 100%;
    height: 80px;
    flex-shrink: 0;
     background-image: linear-gradient(to right, rgba(0,47,75,1), 
                                    rgba(0,78,124,1),
                                     rgba(0,103,138,1));
    }

    .dsk-extra-nav{
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        gap: 2rem;
        width: 50%;
        color: #fff;
    }

    .dsk-extra-nav a{
        text-decoration: none;
        color: #fff;
    }

    .dsk-extra-nav a:hover{
        text-decoration: none;
        color: #8CA5D9;
    }

    .logo{
    font-family: 'century', sans-serif;
    font-size: 2rem;
    font-weight: bold;
    }

    .overlay{
        padding: 1.2rem 2rem 0.5rem 2rem;
    }

    .hero-content small{
    font-size: 1.3rem;
    font-weight: 600;
    }

    .hero-content h1{
        font-size: 2.3rem;
        margin-top: 0.5rem;
    }

}

/*Communities page starts here*/
.community-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 1rem;
    margin-top: 2rem;
}

/* 3 columns — tablets */
@media (min-width: 600px) {
    .community-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .logo-img{
        display: block;
    }

    .mob-logo{
        display: none;
    }
}

/* 4 columns — small desktops */
@media (min-width: 900px) {
    .community-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 5 columns — large desktops with fixed sizes */
@media (min-width: 1150px) {
    .community-grid {
        grid-template-columns: repeat(5, 220px);
        justify-content: center;
        gap: 1.2rem;
    }

    .community-box {
        width: 220px;
        height: 264px;
    }
}
/*Communities page ends here*/


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

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

/*Gallery page starts here*/
@media (min-width: 600px) {
  .gallery-grid {
    grid-template-columns: repeat(3, minmax(140px, 1fr));
    gap: 0.9rem;
  }
}

/* ---------- Large tablets / small desktop — 4 columns ---------- */
@media (min-width: 900px) {
  .gallery-grid {
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 1rem;
  }
}

/* ---------- Desktop wide — final 5 columns fixed at 220x264 ---------- */
/* until this breakpoint items scale proportionally; after it we lock size */
@media (min-width: 1200px) {
  .gallery-grid {
    grid-template-columns: repeat(5, 220px);
    justify-content: center;
    gap: 1.1rem;
  }

  .gallery-item {
    width: 220px !important;
    height: 264px !important;
    aspect-ratio: auto;
  }

  .gallery-filter{
    width: 300px;
  }
}



@media (min-width: 1350px) {
    .gallery-filter{
    width: 300px;
    margin-left: 6rem;
  }
}
/*Gallery page ends here*/



/*------------------------Event calendar starts here----------------------------*/
/* EVENT CALENDAR PAGE – Tablet & Desktop */


@media (min-width: 768px) {
    .event-month-filter-area {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-bottom: 30px;
    }

    .event-month-filter {
        width: 250px;
        padding: 10px;
    }

    .calendar-event-header h4 {
        text-align: center;
        font-size: 1.6rem;
        margin: 40px 0 20px;
    }

    #calendarContainer {
        max-width: 900px;
        margin: 0 auto;
    }

     .accordion-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (min-width: 1200px) {
      .event-month-filter-area {
        gap: 30px;
        margin-bottom: 40px;
    }

    .event-month-filter {
        width: 300px;
    }

    .calendar-event-header h4 {
        font-size: 1.8rem;
    }

    .calendar-event-wrap {
        margin-top: 20px;
    }

    #calendarContainer {
        max-width: 1000px;
    }

    .accordion-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 20px;
    }
}


/*------------------------Event calendar ends here----------------------------*/


/*News page*/
@media (max-width: 500px) {
    .carousel-slide {
        min-width: 90%; /* perfect fit on small phones */
        scroll-snap-align: none;
    }
      #carouselContainer {
      scroll-snap-type: none;
  }
}

/* TABLETS — 600px and above */
@media (min-width: 600px) {
    .carousel-slide {
        width: 450px;      /* fixed width for tablets */
    }
}

/* 720px = 2 COLUMNS */
@media (min-width: 720px) {
    #otherNewsContainer {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 1200px = 3 COLUMNS */
@media (min-width: 1200px) {
    #otherNewsContainer {
        grid-template-columns: repeat(3, 1fr);
    }

       .carousel-slide {
        width: 600px;      /* fixed width for desktops */
    }
}


/*Article starts*/
/* ---------- Desktop view (min 992px) ---------- */
@media (min-width: 992px) {
    .article-area {
        max-width: 900px;
    }

    .article-main-img-file {
        max-width: 850px;
        max-height: 500px;   /* stops the image from growing forever */
        margin-left: auto;
        margin-right: auto;
        display: block;
        object-fit: fill;
    }

    .preview-article-wrap {
        padding: 0 2rem;
    }

    .preview-article-wrap h2 {
        font-size: 2.3rem;
        line-height: 2.5rem;
    }

    .preview-article-wrap p {
        font-size: 1.05rem;
        line-height: 1.65rem;
    }
}
/*Article ends*/

/*Per community page starts here*/
@media (min-width: 600px) {

    .per-community h1 {
        font-size: 2.3rem;
    }

    .media img {
        width: 36px;
        height: 36px;
    }

    .per-com-banner img {
        max-width: 550px;
        margin: 1rem auto;
        display: block;
    }

    .community-article {
        max-width: 700px;
        margin: auto;
    }
}


/* -----------------------------------------
   Desktop Styles (SURPRISE HERO VERSION)
   -----------------------------------------*/

@media (min-width: 400px){
    .per-community{
        width: 400px;
    }
}

@media (min-width: 900px) {

    .per-community-grid {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 4rem;
        width: 100%;
        max-width: 1200px;
        margin: auto;
        align-items: center;
    }

    /* Left side hero block */
    .left-hero {
        flex: 1;
        max-width: 450px;
        text-align: left;
    }

    .left-hero .media {
        justify-content: flex-start;
    }

    .media{
         margin: 1.5rem 3rem;
    }

    /* Right side large image */
    .per-com-banner {
        flex: 1;
        max-width: 460px;
    }

    .per-com-banner img {
        width: 100%;
        max-width: 460px;
        border-radius: 50px 0 50px 0;
    }

    /* Description full width */
    .community-article {
        max-width: 900px;
        margin: 2rem auto;
        text-align: left;
    }
}
/*Per community page ends here*/


/*Media starts here*/
/* Tablet and Desktop Styling */
@media (min-width: 768px) {

    .media-wrapper {
        width: 90%;               /* centers the whole block */
        max-width: 900px;         /* keeps it tidy on large screens */
        margin: 0 auto;           /* center horizontally */
        padding: 2rem 0;
    }

    .media-player iframe {
        height: 500px;            /* bigger video for tablet+desktop */
    }

    .media-description {
        padding: 2rem 1.5rem;
        text-align: left;         /* still clean, no center text */
    }

    .media-description h2 {
        font-size: 1.8rem;
        margin-top: 1rem;
    }

    .media-content {
        font-size: 1rem;
        line-height: 1.65rem;
    }

    .created-at {
        flex-direction: row;      
        gap: 1rem;
        align-items: center;
    }

    .media-type {
        margin-top: 0;            /* avoids awkward spacing */
        transform: skew(-12deg);  /* slightly smoother for large screens */
    }

}


/*Media ends here*/


/*Contact us*/
/* Tablet & Desktop */
@media (min-width: 768px) {
  .contact-info {
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
  }

  .contact-card {
    width: 100%;
    max-width: 420px;
  }

  .contact-intro{
    width: 100%; 
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
  }
}

@media (min-width: 1024px) {
  .contact-info {
    grid-template-columns: repeat(3, 1fr);
  }
}

/*Contact us ends here*/

/*Donate starts here*/
/* Tablet */
@media (min-width: 768px) {
  .donation-methods {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .donation-methods {
    max-width: 900px;
    margin: 0 auto 2rem;
  }
}

/*Donate ends here*/