.sr-only {
     border: 0;
     clip: rect(0, 0, 0, 0);
     height: 1px;
     margin: -1px;
     overflow: hidden;
     padding: 0;
     position: absolute;
     white-space: nowrap;
     width: 1px;
 }

 h1 {
     font-family: "Rozha One", serif;
     font-weight: 400;
     font-style: normal;
 }

 h2 {
     text-align: center;
     font-family: "Raleway", sans-serif;
     font-optical-sizing: auto;
     font-weight: 400;
 }

 p {
     font-family: "Raleway", sans-serif;
     font-optical-sizing: auto;
     font-weight: 300;
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: "Raleway", sans-serif;
     background: linear-gradient(135deg, #1a1a1a 0%, #2d3748 100%);
     color: white;
     overflow-x: hidden;
 }

 header {
     position: sticky;
     top: 0;
     z-index: 1000;
 }

 /* === Navigation === */
 nav {
     padding: .5em;
     display: flex;
     justify-content: space-evenly;
     position: sticky;
     top: 0;
     background-color: rgb(27, 27, 27);
     z-index: 1000;
 }

 .dropdown-content {
     display: none;
     position: absolute;
     background-color: #fbb831;
     min-width: 260px;
     box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.2);
     padding: 5px;
     border-radius: 10px;
     z-index: 1100;
     top: 100%;
     left: 0;
 }



 nav ul {
     margin: 0;
     padding: 0;
     list-style: none;
     display: flex;
 }

 nav a {
     color: rgb(255, 255, 255);
     text-decoration: none;
     padding: .2em .5em;
     margin: 0 20pt;
     text-align: left;
 }

 a {
     font-family: "Raleway", sans-serif;
     font-optical-sizing: auto;
     font-weight: 300;
     font-style: normal;
     padding: 10px;
     font-size: 15pt;
     line-height: 1.5em;
 }

 nav ul li a:hover {
     color: #bfbfbf;
     border-bottom: 2px solid #fbb831;
 }


 li.dropdown {
     position: relative;
 }

 li.dropdown:hover .dropdown-content {
     display: block;
 }

 .dropdown-content a {
     font-size: 12pt;
     color: rgb(0, 0, 0);
     text-decoration: none;
     display: block;
 }

 .dropdown-content a:hover {
     color: rgb(255, 255, 255);
     border-bottom: none;
 }

 .social {
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 20px;
 }

 #instagram-button {
     background: none;
     border: none;
     padding: 0;
     margin: 0;
 }

 #instagram-logo {
     width: 30px;
     height: auto;
     transition: transform 0.3s;
 }

 #instagram-button:hover #instagram-logo {
     transform: scale(1.1) rotate(5deg);
 }

 footer {
     font-size: x-small;
     text-align: center;
     color: rgb(255, 255, 255);
     padding: 10px;
     background-color: white;
     margin-top: 100pt;
     width: 100%;

     text-align: center;
     padding: 3rem 2rem;
     background: rgba(0, 0, 0, 0.3);
     backdrop-filter: blur(10px);

 }

 /* Scroll progress bar */
 .progress-bar {
     position: fixed;
     top: 0;
     left: 0;
     height: 4px;
     background: linear-gradient(90deg, #fbb831 0%, #f5a623 100%);
     width: 0%;
     z-index: 9999;
     transition: width 0.1s ease;
 }

 /* Animated Background */
 aside {
     position: relative;
     float: left;
     width: 250px;
     height: auto;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
     padding-top: 2rem;
     margin-right: 2rem;
     backdrop-filter: blur(4px);
     margin-left: 20pt;
 }

 aside img {
     width: 250px;
     height: auto;
     margin-bottom: 1rem;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     opacity: 70%;
 }

 aside img:hover {
     transform: scale(1.1);
     box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
 }


 .bg-animation {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
     background: linear-gradient(135deg, #1a1a1a 0%, rgb(27, 27, 27) 100%);
 }

 .bg-animation::before {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: radial-gradient(circle, rgba(79, 87, 104, 0.2) 1px, transparent 1px);
     background-size: 50px 50px;
     animation: moveGrid 20s linear infinite;
 }

 @keyframes moveGrid {
     0% {
         transform: translate(0, 0);
     }

     100% {
         transform: translate(50px, 50px);
     }
 }

 /* Hero Section */
 .hero {
     min-height: 500px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     padding: 2rem;
     position: relative;
     overflow: hidden;
 }

 .logo-container {
     animation: fadeInScale 1s ease-out;
     text-align: center;
     margin-bottom: 120px;
     margin-top: 70px;
 }

 @keyframes fadeInScale {
     from {
         opacity: 0;
         transform: scale(0.8);
     }

     to {
         opacity: 1;
         transform: scale(1);
     }
 }

 .logo-container img {
     max-width: 700px;
     width: 100%;
     height: auto;
     filter: drop-shadow(0 5px 10px rgba(79, 87, 104, 0.5));

 }

 @keyframes float {

     0%,
     100% {
         transform: translateY(0px);
     }

     50% {
         transform: translateY(-20px);
     }
 }

 .hero-title {
     font-family: "Rozha One", serif;
     font-size: clamp(2rem, 5vw, 4rem);
     margin-top: -10px;
     margin: 1rem 0;
     background: linear-gradient(135deg, #fff 0%, #b1b1b3 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;

 }

 .hero-subtitle {
     font-size: clamp(1.rem, 3vw, 1rem);
     font-weight: 300;
     letter-spacing: 4px;
     animation: fadeInUp 1s ease-out 0.6s both;
     text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
     margin-top: 15px;
     margin-bottom: 100px;
 }

 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(30px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* About Section */
 .about-section {
     padding: 4rem 2rem;
     max-width: 1000px;
     margin: 0 auto;
     display: flex;
     justify-content: center;
     align-items: center;


     text-align: center;

 }

 .about-container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 3rem;
     align-items: center;
 }

 .about-images {

     animation: fadeIn 1s ease-out;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 .about-images img {
     width: 100%;
     height: auto;
     object-fit: cover;

     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
     transition: transform 0.4s ease, box-shadow 0.4s ease;
 }

 .about-images img:hover {
     transform: translateY(-10px) scale(1.05);
     box-shadow: 0 20px 40px rgba(79, 87, 104, 0.4);
 }

 .about-content {
     animation: slideInRight 1s ease-out;
 }

 @keyframes slideInRight {
     from {
         opacity: 0;
         transform: translateX(50px);
     }

     to {
         opacity: 1;
         transform: translateX(0);
     }
 }

 .about-content h2 {
     font-family: "Slabo 13px", serif;
     font-size: clamp(1.8rem, 4vw, 2.5rem);
     margin-bottom: 1.5rem;
     position: relative;
     display: inline-block;
 }

 .about-content h2::after {
     content: '';
     position: absolute;
     bottom: -10px;
     left: 0;
     width: 60px;
     height: 3px;
     background: linear-gradient(90deg, #fff, transparent);
 }

 .about-content p {
     font-size: 1.1rem;
     line-height: 1.8;
     margin-bottom: 2rem;
     color: rgba(255, 255, 255, 0.9);
 }

 /* Button Row */
 .button-row {
     display: flex;
     gap: 1rem;
     flex-wrap: wrap;
     margin-top: 1rem;
     text-align: center;
 }

 .btn {
     padding: 1rem 2rem;
     border: none;
     border-radius: 15px;
     font-family: "Raleway", sans-serif;
     font-size: 1rem;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
     text-decoration: none;
     display: inline-block;
 }

 .btn::before {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     width: 0;
     height: 0;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.3);
     transform: translate(-50%, -50%);
     transition: width 0.6s, height 0.6s;
 }

 .btn:hover::before {
     width: 300px;
     height: 300px;
 }

 .btn span {
     position: relative;
     z-index: 1;
 }

 .btn-primary {
     background: #fbb831;
     border: 2px solid white;
     color: rgb(0, 0, 0);
     box-shadow: 0 5px 20px rgba(79, 87, 104, 0.4);
 }

 .btn-primary:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 30px rgba(79, 87, 104, 0.6);
 }

 .btn-secondary {
     background: rgba(255, 255, 255, 0.1);
     border: 2px solid white;
     color: white;
     backdrop-filter: blur(10px);
 }

 .btn-secondary:hover {
     background: white;
     color: rgb(79, 94, 125);
     transform: translateY(-3px);
 }



 /* Responsive */
 @media (max-width: 800px) {

     .about-images {
         grid-template-columns: 1fr;
     }

     .button-row {
         flex-direction: column;
     }

     .btn {
         width: 100%;
         text-align: center;
     }

     aside {
         display: none;
     }

     nav {
         padding: 8px;
         display: flex;
         justify-content: space-evenly;
         position: sticky;
         top: 0;
         margin-top: 30px;
         z-index: 1000;
         /* Add this */
     }

     nav ul {
         margin: 0;
         padding: 8px;
         list-style: none;
         display: flex;
     }

     nav a {
         color: rgb(255, 255, 255);
         text-decoration: none;
         padding: .1em .4em;
         margin: 2pt;
         text-align: left;
     }

     a {
         font-family: "Raleway", sans-serif;
         font-optical-sizing: auto;
         font-weight: 300;
         font-style: normal;
         padding: 2px;
         font-size: 12pt;
         line-height: 1.5em;
     }

     nav ul li a:hover {
         color: #6d8291;
         border-bottom: 2px solid rgb(79, 94, 125);

     }

     .dropdown-content {
         display: none;
         position: absolute;

         min-width: 120px;
         box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.2);
         padding: 3px;
         border-radius: 10px;
         background-color: #fbb831;
     }

     li.dropdown {
         position: relative;
     }

     li.dropdown:hover .dropdown-content {
         display: block;
     }

     .dropdown-content a {
         font-size: 9pt;
         color: white;
         text-decoration: none;
         display: block;
     }

     .dropdown-content a:hover {
         color: rgb(79, 94, 125);
         border-bottom: none;
     }
 }

 @media (min-width: 800px) and (max-width: 1299px) {
     aside {
         position: relative;
         float: left;
         width: 200px;
         height: auto;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: flex-start;
         padding-top: 2rem;
         margin-right: 2rem;
         backdrop-filter: blur(4px);
         margin-left: 20pt;
     }

     aside img {
         width: 200px;
         height: auto;
         margin-bottom: 1rem;
         transition: transform 0.3s ease, box-shadow 0.3s ease;
         opacity: 70%;
     }

     aside img:hover {
         transform: scale(1.1);
         box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
     }

     nav {
         padding: .5em;
         display: flex;
         justify-content: space-evenly;
         position: sticky;
         top: 0;
         margin-top: 30px;
     }

     nav ul {
         margin: 0;
         padding: 0;
         list-style: none;
         display: flex;
     }

     nav a {
         color: rgb(255, 255, 255);
         text-decoration: none;
         padding: .2em .5em;
         margin: 0 20pt;
         text-align: left;
     }

     a {
         font-family: "Raleway", sans-serif;
         font-optical-sizing: auto;
         font-weight: 300;
         font-style: normal;
         padding: 10px;
         font-size: 15pt;
         line-height: 1.5em;
     }

     nav ul li a:hover {
         color: #6d8291;
         border-bottom: 2px solid rgb(79, 94, 125);

     }

     .dropdown-content {
         display: none;
         position: absolute;
         background-color: #b1b1b3;
         min-width: 260px;
         box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.2);
         padding: 5px;
         border-radius: 10px;
     }

     li.dropdown {
         position: relative;
     }

     li.dropdown:hover .dropdown-content {
         display: block;
     }

     .dropdown-content a {
         font-size: 12pt;
         color: white;
         text-decoration: none;
         display: block;
     }

     .dropdown-content a:hover {
         color: rgb(79, 94, 125);
         border-bottom: none;
     }
 }