.body{
	height: 100%;
    background-color: #fffaf3 ;
    margin: 0;
    padding: 0;
	font-family:pridi;
	
	}
	
	
       /* Floating Menu Button */
        .menu-button {
            position: fixed;
            top: 50px;
            right: 100px;
            background-color: #0044cc;
            color: white;
            padding: 10px 15px;
            border-radius: 5px;
            cursor: pointer;
            z-index: 1000;
        }
		
		.menu-button:hover {
      transform: translateX(3px); /* Smaller movement for mobile */
    }
		
		
        .menu {
            position: fixed;
            top: 0;
            right: -250px;
            width: 250px;
            height: 100%;
            background: rgba(51, 102, 0, 0.8);
            color: white;
            padding-top: 100px;
            transition: 0.3s;
			 z-index: 999
        }
        .menu.active {
            right: 0;
        }
        .menu a {
            display: block;
            color: white;
            padding: 10px 20px;
            text-decoration: none;
            border-bottom: 1px solid rgba(255, 255, 255, 0.3);
            position: relative;
        }
        .menu a:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        .submenu {
            display: none;
            position: absolute;
            left: -200px;
            top: 0;
            background: rgba(51, 102, 0, 0.8);
            width: 200px;
            padding: 10px 0;
        }
        .menu a.has-submenu::before {
            content: "\2190";
            margin-right: 10px;
        }
        .submenu-container:hover .submenu {
            display: block;
        }
        .submenu a {
            padding: 10px 20px;
            color: white;
            display: block;
            text-decoration: none;
        }
        .submenu a:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        .submenu-container {
            position: relative;
        }
        /* Floating Right-Side Buttons */
        .floating-buttons {
            position: fixed;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
			  z-index: 1000;
		
			
        }
        .floating-buttons .button {
            background: #0044cc;
            color: white;
			font-size:14px;
			transform: rotate(180deg);
            padding: 10px 10px;
            margin: 3px 0;
		            text-decoration: none;
            border-radius: 5px ;
            text-align: center;
            writing-mode: vertical-rl;
            text-orientation: mixed;
          font-weight:bold;
        }
		
	
	
		.floating-buttons a:nth-child(odd) {
    background-color: #1E3A8A; /* Blue */
}

.floating-buttons a:nth-child(even) {
    background-color: #F59E0B; /* Orange */
}
		
		
		.scrolling-header {
            position: fixed;
            top: 0;
            width: 100%;
            background: #fffaf3;
			
            color: white;
            text-align: center;
            padding: 10px;
            display: none;
            z-index: 999;
        }
	
@media (max-width: 768px) {
.hide-on-mobile {
        display: none;
    }
	}
	
	.scrolling-header-img {
    width: 30%;
    transition: width 0.3s ease-in-out;
}

@media screen and (max-width: 768px) {
    .scrolling-header-img {
        width: 60%; /* Adjust width for mobile screens */
    }
}

@media screen and (max-width: 480px) {
    .scrolling-header-img {
        width: 80%; /* Further increase width for very small screens */
    }
}


		
		
		
		.go-top {
            position: fixed;
    bottom: 20px;
    right: 40px;
    background: red;
    color: white;
    padding: 10px 15px;
    border-radius: 50%;
    cursor: pointer;
    display: none; /* Initially hidden */
    z-index: 1000;
    font-size: 18px;
    text-align: center;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease-in-out;
            cursor: pointer;
		border: 2px solid white; /* White border added */
        }
		
		.go-top:hover {
    background: #002a80;
	 border-radius: 50%;
}
		
        @media (max-width: 768px) {
		
		.menu {
                width: 200px;
                right: -200px;
            }
            .menu-button {
                top: 20px;
                right: 15px;
                padding: 8px 12px;
				font-size:10px;
            }
            .menu a {
                padding: 8px 15px;
                font-size: 10px;
            }
            .submenu {
                left: -180px;
                width: 180px;
            }
		
            
            .side-buttons a {
                 padding: 8px 15px;
                font-size: 11px;
            }
            .go-top {
                right: 10px;
                bottom: 10px;
                padding: 8px;
				height:40px;
				width:40px;
            }
			.social-icons a {
                padding: 8px 10px;
                font-size: 14px;
                writing-mode: horizontal-tb;
                text-orientation: mixed;
            }
            
             
        }
		
.social-icons {
            position: fixed;
            left: 0;
            top: 150px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            z-index: 1000;
        }
        .social-icons a {
            background: #004aad;
            color: white;
            padding: 10px;
            margin: 5px 0;
            text-decoration: none;
            border-radius: 0 5px 5px 0;
            text-align: center;
            font-size: 20px;
        }
		
		
 
 .footer {
             background: #5A1F09;
            color: white;
            padding: 50px;
            display: flex;
            justify-content: space-around;
            text-align: left;
			left:50px;
			font-family:poppins;
        }
        .footer-column {
            flex: 1;
            padding: 50px;
			font-family:poppins;
			
		}
 
 @media screen and (max-width: 768px) {
    .footer {
        padding: 20px;  /* Reduce padding */
        flex-direction: column;  /* Stack items vertically */
 
    }
    
    .footer-column {
        padding: 10px;  /* Reduce padding */
		font-family:poppins;
		margin-left:20px;
    }
}
 
 
 
 
 
        
		
		#head1{
    top:20%
	}
	@media (max-width: 768px) {
  #head1 {
top:20px;
    width: 60%
    
   }
   }
   @media (max-width: 480px) {
  #head1 {
 margin-top:20px;
    width:80%
  
   }
   }
   
   
  


/* Heading Styles */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    margin-bottom: 6px;
 
}

h1 { font-size: 48px;  }
h2 { font-size: 36px; }
h3 { font-size: 28px; color:green;}
h4 { font-size: 24px; color:#26096d;}
h5 { font-size: 20px;}
h6 { font-size: 18px; }	

/* Responsive Typography */
@media (max-width: 992px) {
    h1 { font-size: 38px; }
    h2 { font-size: 30px; }
    h3 { font-size: 24px; }
    h4 { font-size: 20px; }
    h5 { font-size: 16px; }
    h6 { font-size: 12px; }
}

@media (max-width: 768px) {
    h1 { font-size: 30px; }
    h2 { font-size: 26px; }
    h3 { font-size: 22px; }
    h4 { font-size: 18px; }
    h5 { font-size: 14px; }
    h6 { font-size: 10px; }
}


	
	ul li { 
	font-family:pridi;
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 15px;
	margin-left:15px;
	}
	
	
	/*style for links*/
	.a1 {
            color: white;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }



.image-container {
    position: relative;
    display: inline-block;
	width:100%;
	background-color:#fffaf3;
}


.text-overlay {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    color: white;
    font-size: 48px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

@media (max-width: 768px) {
.text-overlay {
 font-size: 20px;
align-items:center;
 }}

  
/* Paragraphs */
p { 
	font-family:Pridi;
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 15px;
}
@media (max-width: 768px) {
p {
    font-size: 15px;
    line-height: 1.1;
    margin-bottom: 12px;

}
}

.back-to-home {
    position: fixed;
    top: 30px;
    right: 10px; /* Place it after the menu button */
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
	z-index:  1000;
  }

  .back-to-home img {
    width: 80px; /* Adjust size as needed */
    height: auto;
  }

  .back-to-home:hover {
    transform: translateX(5px); /* Moves the button slightly right */
  }

  @media (max-width: 768px) {

    .back-to-home {
	top:75px;
      right: 10px;
    }

    .back-to-home img {
      width: 50px; /* Smaller size for mobile */
    }

    .back-to-home:hover {
      transform: transform: rotate(360deg);  /* Smaller movement for mobile */
    }
  }

/*holiday table */
.holiday-table {
      width: 70%;
      border-collapse: collapse;
      margin: 20px 0;
      background-color: transparent;
      box-shadow: 0 0 10px rgba(0,0,0,0.05);
    }

    .holiday-table th,
    .holiday-table td {
      border: 1px solid #ccc;
      padding: 12px;
      text-align: left;
    }

    .holiday-table th {
      background-color: #005a87;
      color: white;
    }

    @media (max-width: 768px) {
      .holiday-table thead {
        display: none;
      }

      .holiday-table, 
      .holiday-table tbody, 
      .holiday-table tr, 
      .holiday-table td {
        display: block;
        width: 100%;
      }

      .holiday-table tr {
        margin-bottom: 15px;
        border-bottom: 2px solid #ddd;
        background: #fff;
      }

      .holiday-table td {
        text-align: right;
        padding-left: 50%;
        position: relative;
      }

      .holiday-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 15px;
        width: 45%;
        padding-left: 10px;
        font-weight: bold;
        text-align: left;
      }
    }
	
	
	/*photo slider for all pages*/
 .container-photo {
      max-width: 500px;
      margin: 40px auto;
      overflow: hidden;
      position: relative;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    .photo-slider img {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      transition: opacity 1s ease-in-out;
    }

    .photo-slider img.active {
      opacity: 1;
      position: relative;
    }