/* Responsive Design */

/* Tablets & small laptops (up to 768px wide) */
@media (max-width: 768px) {

  .container, section {
    width: 100%;
    padding: 0 15px;
  }

  .navbar-front {
    gap: 20px;
    top: 10px;
  }

  .navbar-logo {
    height: 70px;
    width: 70px;
  }

  .mandal-name {
    max-width: 80%;
  }

  .hero-image {
    height: auto;
    width: 100%;
  }

  .yearOfJourney section {
    width: 100%;
  }

  .history-section, 
  .committee-section, 
  .ganeshotsav-section, 
  .gallery-section, 
  .help-section {
    padding: 30px 15px;
  }

  .parent {
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
  }

  .committee-section > #committe_list_img {
    width: 100%;
  }

  .map-heading p {
    width: 100%;
  }

  .footer-heading h2 {
    font-size: 22px;
  }

  .footer-links a {
    display: block;
    margin: 6px 0;
  }
}

/* Extra Small Screens (up to 480px wide) */
@media (max-width: 480px) {

  html, body{
    height: auto;
  }

  /* General container & sections */
  .container, section {
    padding: 0 20px;
  }

  .header-info{
    padding: 0px 20px;
    font-size: 12px;
    height: 30px;
  }

  .navbar-bg{
    height: 26px;
  }

  .navbar-front {
    gap: 10px;
    top: 8px;
    flex-direction: row;
  }

  .navbar-logo {
    height: 40px;
    width: 40px;
  }

  .mandal-name {
    max-width: 60%;
    text-align: center;
  }

  .hamburger{
    padding: 14px 6px;
  }

  .hamburger .lines::before{
    width: 24px;
  }

  .hamburger .lines::after{
    width: 24px;
  }

  .hamburger .lines{
    width: 24px;
  }

  .menu-panel{
    right: 28px;
    top: 40px;
  }

  .menu-list{
    padding: 4px;
  }

  .menu-listi{
    border-radius: 4px;
    padding: 6px 8px;
  }

  .hero-section{
    padding-top: 50px;
  }

  .section-logo{
    width: 100px;
  }

  /* sticky social media icons */
  /* .social-icons {
    
  } */

  .social-icons a img {
    width: 24px;
    height: 24px;
  }

  .social-icons a.instagram{
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  }

  .social-icons a.whatsapp{
    background: linear-gradient(45deg, #25D366, #21c35e);
  }

  .social-icons a.youtube{
    background: linear-gradient(45deg, #FF0000, #cc0000);
  }

  .social-icons a::after,
  .social-icons a::before {
    content: none !important;
  }

  /* Year of Journey adjustments */

  .yearOfJourney{
    padding: 40px 0px 0px 0px;
  }

  .yearOfJourney section {
    font-size: 14px;
    line-height: 20px;
    width: auto;
  }

  .yearOfJourney > section > p{
    text-indent: 0em;
  }

  .history-section, .committee-section, .ganeshotsav-section, .gallery-section, .help-section {
    padding: 20px 20px;
  }

  section h3{
    font-size: 16px;
  }

  .para-heading {
    font-size: 18px;
  }

  /* History section */

  .history-section section h3 {
    grid-gap: 12px;
  }

  .history-section section>.sub-section {
    padding-left: 15px;
  }

  .sub-section > ul {
    padding:0 0 0 28px;
  }

  .sub-section h4, .sub-section h3 {
    margin-bottom: 4px;
  }

  .history-heading {
    flex-direction: row;
    gap: 20px;
  }

  .history-heading > img {
    height: 80px;
  }

  .ganeshotsav-section img {
    width: 150px;
  }

  /* Gallery */

  .gallery-section h1, .gallery-section p {
    width: auto;
  }

  .parent {
    grid-template-columns: repeat(3, 1fr);
  }

  .parent img{
    filter: grayscale(0%);
  }

  /* Lightbox */

  .lightbox-img {
    max-width: 70%;
    border-radius: 4px;
  }

  .lightbox .close {
    top: 20px;
    right: 20px;
    font-size: 35px;
  }

  .lightbox .prev {
    left: 10px;
  }

  .lightbox .next{
    right: 10px;
  }

  .lightbox .close, .lightbox .prev, .lightbox .next {
    font-size: 35px;
    padding: 5px;
  }

  .lightbox .prev:hover, .lightbox .next:hover, .lightbox .close:hover {
    color: var(--bg);
  }

  /* Contact */

  .map-heading h2{
    font-size: 20px;
    margin: 0px 0px 3px 0px;
  }

  .map-heading p{
    font-size: 12px;
  }

  .contact div iframe{
    width: 310px;
    height: 250px;
    padding: 5px;
  }

  /* Footer */
  .footer img{
    width: 100%;
  }

  .footer-heading{
    margin: 0px auto 15px auto
  }

  .footer-heading h2 {
    font-size: 20px;
  }

  .footer-heading p{
    margin: 4px;
    font-size: 10px;
  }

  .footer-links {
    display: flex;               /* use flex on the parent */
    flex-direction: column;
    justify-content: center;     /* center all links horizontally */
    flex-wrap: wrap;             /* wrap to next line on small screens */
  }

  .footer-links a {
    margin: 5px 0;
    display: inline-block;       /* inline-block is enough */
    width: auto;                 /* remove fit-content issue */
    color: white;   
  }

  .footer-bottom > .credit{
    letter-spacing: 0px;
    font-size: 10px;
  }
}