/* --- HEADER (Identical to Index) --- */
 nav {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 25px 8%;
     background: white;
     position: sticky;
     top: 0;
     z-index: 1000;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
 }

 .nav-links {
     display: flex;
     gap: 35px;
     list-style: none;
 }

 .nav-links a {
     text-decoration: none;
     color: #333;
     font-weight: 700;
     font-size: 1.2rem;
 }

 .nav-links a:hover {
     color: #ff4d6d;
 }

 /* Hamburger Menu Styles */
 .hamburger-menu {
     display: none;
     flex-direction: column;
     cursor: pointer;
     padding: 5px;
 }

 .hamburger-menu span {
     width: 25px;
     height: 3px;
     background-color: #333;
     margin: 3px 0;
     transition: 0.3s;
     border-radius: 2px;
 }

 /* Hamburger Animation */
 .hamburger-menu.active span:nth-child(1) {
     transform: rotate(45deg) translate(9px, 9px);
 }

 .hamburger-menu.active span:nth-child(2) {
     opacity: 0;
 }

 .hamburger-menu.active span:nth-child(3) {
     transform: rotate(-45deg) translate(7px, -6px);
 }

 /* --- FOOTER (New Design) --- */
 footer {
     background: #0a6375;
     color: white;
     padding: 0;
     position: relative;
     overflow: hidden;
 }

 .footer-bread-top {
     position: relative;
     width: 100%;
     height: auto;
     top: 0;
     left: 0;
     z-index: 1;
 }

 .footer-bread-image {
     width: 100%;
     height: auto;
     display: block;
 }

 .footer-girl-paint {
     position: absolute;
     top: 20px;
     left: 20px;
     z-index: 4;
 }

 .footer-girl-image {
     width: 120px;
     height: auto;
     display: block;
     filter: brightness(1.2) saturate(1.1);
     transform: scaleX(-1);
 }


 .footer-container {
     max-width: 1200px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr;
     gap: 40px;
     position: relative;
     z-index: 2;
     padding: 60px 5% 0;
 }

 .footer-brand {
     display: flex;
     flex-direction: column;
 }

 .footer-logo {
     display: flex;
     align-items: center;
     margin-bottom: 15px;
 }

 .footer-logo img {
     width: 40px;
     height: 40px;
     margin-right: 10px;
 }

 .footer-logo h2 {
     font-family: 'Fredoka One', cursive;
     font-size: 1.5rem;
     color: white;
     margin: 0;
 }

 .footer-description {
     color: #b8e6e4;
     font-size: 0.9rem;
     line-height: 1.5;
     margin-bottom: 20px;
 }

 .footer-section h3 {
     font-family: 'Fredoka One', cursive;
     font-size: 1.2rem;
     color: #fff;
     margin-bottom: 20px;
 }

 .footer-section ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .footer-section ul li {
     margin-bottom: 8px;
 }

 .footer-section ul li a {
     color: #fff;
     text-decoration: none;
     font-size: 0.9rem;
     transition: color 0.3s ease;
 }

 .footer-section ul li a:hover {
     color: #b8e6e4;
 }

 .footer-bottom {
     height: 200px;
     padding: 0 5%;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 20px;
 }

 .footer-decorations {
     position: absolute;
     top: -20px;
     right: 5%;
     width: 80px;
     height: 80px;
     background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="40" r="25" fill="%23ffd93d"/><circle cx="45" cy="35" r="3" fill="%23333"/><circle cx="55" cy="35" r="3" fill="%23333"/><path d="M40,50 Q50,60 60,50" stroke="%23333" stroke-width="2" fill="none"/><path d="M35,20 L40,10 M50,15 L50,5 M65,20 L60,10 M70,30 L80,25 M70,50 L80,55 M65,70 L60,80" stroke="%23ffd93d" stroke-width="3"/></svg>') no-repeat center;
     background-size: contain;
     animation: bounce 2s ease-in-out infinite;
 }

 .social-links {
     display: flex;
     gap: 10px;
 }

 .social-link {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 35px;
     height: 35px;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 50%;
     color: white;
     text-decoration: none;
     transition: all 0.3s ease;
 }

 .social-link:hover {
     background: rgba(255, 255, 255, 0.2);
     transform: translateY(-2px);
 }

 /* Gallery Grid Styles */
 .gallery-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 8px;
     margin-top: 10px;
 }

 .gallery-item {
     border-radius: 8px;
     overflow: hidden;
 }

 .gallery-item img {
     width: 100%;
     height: 60px;
     object-fit: cover;
     transition: transform 0.3s ease;
 }

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

 /* Footer Arrow */
 .footer-arrow {
     position: relative;
 }

 /* Footer Hand */
 .footer-hand-horizontal {
     display: flex;
     align-items: center;
 }

 /* Copyright */
 .copyright {
     color: #b8e6e4;
     font-size: 0.9rem;
 }


 @media (max-width: 768px) {
     .footer-bread-top {
         height: auto;
     }
     
     .footer-bread-image {
         height: 100px;
         object-fit: cover;
     }
     
     .footer-container {
         grid-template-columns: 1fr;
         gap: 35px;
         padding: 50px 4% 0;
         text-align: center;
     }
     
     .footer-brand {
         grid-column: span 1;
         text-align: center;
         margin-bottom: 30px;
         border-bottom: 1px solid rgba(255, 255, 255, 0.1);
         padding-bottom: 30px;
     }
     
     .footer-section {
         text-align: center;
         margin-bottom: 30px;
     }
     
     .footer-section h3 {
         text-align: center;
         margin-bottom: 25px;
         font-size: 1.3rem;
     }
     
     .footer-section ul {
         text-align: center;
     }
     
     .footer-section ul li {
         text-align: center;
         margin-bottom: 10px;
     }
     
     .footer-section ul li a {
         text-align: center;
         font-size: 1rem;
     }
     
     .gallery-grid {
         grid-template-columns: repeat(3, 1fr);
         gap: 8px;
         max-width: 280px;
         margin: 20px auto 0;
     }
     
     .gallery-item img {
         height: 65px;
         border-radius: 8px;
     }
     
     .footer-girl-paint {
         display: none;
     }
     
     .footer-arrow img {
         width: 60px !important;
         top: 15px !important;
         right: 15px !important;
     }

     .footer-bottom {
         flex-direction: column;
         text-align: center;
         height: auto;
         padding: 30px 4%;
         gap: 15px;
     }
     
     .footer-hand-horizontal {
         display: none;
     }
 }

 @media (max-width: 480px) {
     .footer-bread-image {
         height: 80px;
     }
     
     .footer-container {
         grid-template-columns: 1fr;
         text-align: center;
         padding: 40px 4% 0;
         gap: 30px;
     }
     
     .footer-brand {
         grid-column: span 1;
         border-bottom: 1px solid rgba(255, 255, 255, 0.1);
         padding-bottom: 25px;
         margin-bottom: 20px;
         text-align: center;
     }
     
     .footer-logo {
         justify-content: center;
         margin-bottom: 15px;
     }
     
     .footer-logo h2 {
         font-size: 1.4rem;
     }
     
     .footer-description {
         font-size: 1rem;
         margin-bottom: 20px;
         max-width: 280px;
         margin-left: auto;
         margin-right: auto;
         line-height: 1.6;
     }
     
     .social-links {
         justify-content: center;
         gap: 15px;
         margin-bottom: 10px;
     }
     
     .social-link {
         width: 45px;
         height: 45px;
         background: rgba(255, 255, 255, 0.15);
         font-size: 1.1rem;
     }
     
     .footer-section {
         margin-bottom: 35px;
         text-align: center;
     }
     
     .footer-section h3 {
         font-size: 1.3rem;
         margin-bottom: 25px;
         color: #fff;
         text-align: center;
     }
     
     .footer-section ul {
         text-align: center;
         display: block;
     }
     
     .footer-section ul li {
         margin-bottom: 12px;
         text-align: center;
     }
     
     .footer-section ul li a {
         font-size: 1rem;
         padding: 5px 0;
         display: block;
         color: #fff;
         text-align: center;
     }
     
     .footer-girl-paint {
         display: none;
     }
     
     .footer-arrow img {
         width: 50px !important;
         top: 10px !important;
         right: 10px !important;
     }
     
     .gallery-grid {
         grid-template-columns: repeat(3, 1fr);
         gap: 10px;
         max-width: 240px;
         margin: 20px auto 0;
     }
     
     .gallery-item {
         border-radius: 6px;
     }
     
     .gallery-item img {
         height: 60px;
         border-radius: 6px;
     }
     
     .footer-bottom {
         padding: 25px 4%;
         border-top: 1px solid rgba(255, 255, 255, 0.1);
     }
     
     .footer-hand-horizontal {
         display: none;
     }
     
     .copyright {
         font-size: 0.9rem;
         line-height: 1.4;
     }
 }
 
 @media (max-width: 360px) {
     .footer-bread-image {
         height: 60px;
     }
     
     .footer-container {
         padding: 30px 3% 0;
         gap: 25px;
     }
     
     .footer-logo h2 {
         font-size: 1.3rem;
     }
     
     .footer-description {
         font-size: 0.95rem;
         max-width: 220px;
     }
     
     .social-link {
         width: 40px;
         height: 40px;
         font-size: 1rem;
     }
     
     .footer-section {
         margin-bottom: 30px;
     }
     
     .footer-section h3 {
         font-size: 1.2rem;
         color: #fff;
         margin-bottom: 20px;
     }
     
     .footer-section ul li {
         margin-bottom: 10px;
         text-align: center;
     }
     
     .footer-section ul li a {
         font-size: 0.95rem;
         color: #fff;
         text-align: center;
     }
     
     .footer-girl-paint {
         display: none;
     }
     
     .footer-arrow img {
         width: 45px !important;
     }
     
     .gallery-grid {
         max-width: 200px;
         gap: 8px;
     }
     
     .gallery-item img {
         height: 50px;
     }
     
     .footer-hand-horizontal {
         display: none;
     }
     
     .copyright {
         font-size: 0.85rem;
     }
 }



 @media (max-width: 1100px) {

     /* Navbar gap reduction */
     nav {
         padding: 15px 5%;
     }

     .nav-links {
         display: none;
         position: fixed;
         top: 80px;
         right: 0;
         width: 60%;
         height: 480px;
         background: white;
         flex-direction: column;
         align-items: center;
         justify-content: flex-start;
         padding-top: 50px;
         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
         gap: 3px;
     }

     .nav-links.active {
         display: flex;
     }

     .nav-links li {
         margin: 5px 0;
         border-bottom: 1px solid #e0e0e0;
         width: 90%;
     }

     .nav-links a {
         font-size: 1.5rem;
         padding: 10px;
         display: block;
         width: 100%;
         text-align: center;
     }

     .hamburger-menu {
         display: flex;
     }
 }