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

.iframe-container {
 max-width: 800px; /* Adjust as needed */
 margin: 0 auto;
 padding: 20px;
 background: #f9f9f9; /* Add a background color */
 border-radius: 8px; /* Rounded corners */
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
}
 
body {
 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
 line-height: 1.6;
 color: #333;
}

.navbar {
 background-color: #0f0f0f;
 color: white;
 padding: 1rem 0;
 position: sticky;
 top: 0;
 z-index: 1000;
}
.nav-container {
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 1rem;
 display: flex;
 justify-content: space-between;
 align-items: center;
}
.logo {
 font-size: 1.5rem;
 font-weight: bold;
 color: white;
 text-decoration: none;
}
.logo .nirvana {
 display: inline-block;
 padding: 1px 3px;
 background-color: #ff9000;
 color: #0f0f0f;
 border: 1px solid #ff9900;
 border-radius: 4px;
}
.nav-right {
 display: flex;
 align-items: center;
 gap: 1rem;
}
.nav-links {
 display: flex;
 gap: 1.5rem;
}
.nav-item {
 position: relative;
}
.dropdown-btn {
 background: none;
 border: none;
 color: white;
 cursor: pointer;
 font-size: 1rem;
 padding: 0.5rem 1rem;
 display: flex;
 align-items: center;
 gap: 0.5rem;
}
.dropdown-btn:hover {
 background-color: #1e1e1e;
 border-radius: 0.375rem;
}
.dropdown-content {
 display: none;
 position: absolute;
 top: 100%;
 left: 0;
 background-color: #1e1e1e;
 min-width: 200px;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
 border-radius: 0.375rem;
 z-index: 1000;
 max-height: 80vh;
 overflow-y: auto;
 padding: 8px 0;
}
.dropdown-content::-webkit-scrollbar {
 width: 8px;
}
.dropdown-content::-webkit-scrollbar-track {
 background: #2e2e2e;
}
.dropdown-content::-webkit-scrollbar-thumb {
 background: #484848;
 border-radius: 4px;
}
.dropdown-content a {
 color: white;
 padding: 0.75rem 1rem;
 text-decoration: none;
 display: block;
}
.dropdown-content a:hover {
 background-color: #2f2f2f;
}
.nav-item:hover .dropdown-content {
 margin-left: 5px;
 display: block;
}

.language-selector {
 position: relative;
}
.language-btn {
 background: none;
 border: 1px solid rgba(255, 255, 255, 0.2);
 border-radius: 0.375rem;
 color: white;
 cursor: pointer;
 display: flex;
 align-items: center;
 gap: 0.5rem;
 padding: 0.5rem;
 font-size: 0.9rem;
}
.language-btn:hover {
 background-color: rgba(255, 255, 255, 0.1);
}
.flag-icon {
 width: 22px;
 height: 16px;
 object-fit: cover;
 border-radius: 3px;
 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.language-dropdown {
 display: none;
 position: absolute;
 top: calc(100% + 8px);
 right: 0;
 background-color: #1e1e1e;
 min-width: 160px;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 border-radius: 8px;
 z-index: 1000;
 border: 1px solid rgba(255, 255, 255, 0.1);
 padding: 6px;
}
.language-dropdown.active {
 display: block;
}
.lang-option {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 padding: 0.75rem 1rem;
 color: white;
 text-decoration: none;
 border-radius: 6px;
 transition: background-color 0.2s;
}
.lang-option:hover {
 background-color: rgba(255, 255, 255, 0.1);
}
.lang-option.active {
 background-color: rgba(255, 140, 0, 0.2);
}

.language-selector.active .language-dropdown {
 display: block;
 animation: dropdownFade 0.2s ease;
}
@keyframes dropdownFade {
 from {
 opacity: 0;
 transform: translateY(-8px);
 }
to {
 opacity: 1;
 transform: translateY(0);
 }
}

.main-content {
 max-width: 1200px;
 margin: 0 auto;
 padding: 2rem 1rem;
}
.welcome-banner {
 background-color: #eff6ff;
 padding: 2rem;
 border-radius: 0.5rem;
 margin-bottom: 2rem;
}
.welcome-banner h1 {
 text-align: center;
 color: #1e40af;
 margin-bottom: 1rem;
 font-size: 2rem;
}
.welcome-banner p {
 text-align: center;
 color: #3b82f6;
}
.featured-section {
 margin-bottom: 2rem;
}
.featured-section h2 {
 font-size: 1.5rem;
 font-weight: 700;
 color: #1a1a1a;
 text-align: center;
 margin: 3rem 0 2rem;
 padding-bottom: 1rem;
 position: relative;
 line-height: 1.2;
}

.featured-section h2::after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 50%;
 transform: translateX(-50%);
 width: 80px;
 height: 4px;
 background: linear-gradient(90deg, #ff8c00, #ff4500);
 border-radius: 2px;
}

.card-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 1.5rem;
}
.two-grid {
 grid-template-columns: repeat(2, 1fr);
}
.card {
 background-color: white;
 border: 1px solid #e5e7eb;
 border-radius: 0.5rem;
 padding: 1.5rem;
 transition: all 0.3s ease;
 display: flex;
 flex-direction: column;
}
.card:hover {
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 transform: translateY(-2px);
}
.card h3 {
 color: #1f2937;
 margin-bottom: 1rem;
 font-size: 1.25rem;
}
.card p {
 color: #6b7280;
 margin-bottom: 1.5rem;
 flex-grow: 1;
}
.learn-more {
 color: #2563eb;
 text-decoration: none;
 display: inline-block;
 font-weight: 500;
}
.learn-more:hover {
 text-decoration: underline;
}

.menu-icon {
 display: block;
 width: 24px;
 height: 2px;
 background-color: white;
 position: relative;
 transition: all 0.3s ease;
}
.menu-icon::before,
.menu-icon::after {
 content: '';
 position: absolute;
 width: 24px;
 height: 2px;
 background-color: white;
 transition: all 0.3s ease;
}
.menu-icon::before {
 top: -6px;
}
.menu-icon::after {
 bottom: -6px;
}

.close-icon {
 background: transparent;
}
.close-icon::before {
 transform: rotate(45deg);
 top: 0;
 
}
.close-icon::after {
 transform: rotate(-45deg);
 top: 0;
}
.mobile-menu-btn {
 display: none;
 background: none;
 border: none;
 color: white;
 cursor: pointer;
 padding: 0.5rem;
}

@media (max-width: 1024px) {
 .card-grid {
 grid-template-columns: repeat(2, 1fr);
 }
}
@media (max-width: 768px) {
 .mobile-menu-btn {
 display: block;
 }
.nav-right {
 gap: 0.5rem;
 }
.nav-links {
 display: none;
 position: absolute;
 top: 100%;
 left: 0;
 right: 0;
 background-color: #0f0f0f;
 padding: 1rem;
 flex-direction: column;
 }
.nav-links.active {
 display: flex;
 }
.nav-item {
 width: 100%;
 }
.dropdown-content {
 position: static;
 box-shadow: none;
 background-color: #1e1e1e;
 }
.dropdown-content a {
 color: white;
 }
.dropdown-content a:hover {
 background-color: #2f2f2f;
 }
.card-grid {
 grid-template-columns: 1fr;
 }
}
@media (max-width: 480px) {
 .welcome-banner {
 padding: 1.5rem;
 }
.welcome-banner h1 {
 font-size: 1.5rem;
 }
.card {
 padding: 1.25rem;
 }
}
.search-bar {
 position: relative;
 max-width: 600px;
 margin: 20px auto 0 auto;
}
.search-input {
 width: 100%;
 padding: 16px 16px 16px 20px;
 font-size: 16px;
 border: 2px solid #e0e0e0;
 border-radius: 12px;
 background-color: #fff;
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><circle cx="11" cy="11" r="8" stroke="gray" stroke-width="2" fill="none"/><line x1="17" y1="17" x2="22" y2="22" stroke="gray" stroke-width="2"/></svg>');
 background-repeat: no-repeat;
 background-position: right 10px center;
 background-size: 20px 20px;
 box-sizing: border-box;
 transition: all 0.3s ease;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.search-input::placeholder {
 color: #888;
 font-size: 16px;
 text-align: left;
}
.search-input:focus {
 outline: none;
 border-color: #ff8c00;
 box-shadow: 0 0 0 4px rgba(255, 140, 0, 0.1);
}
.suggestions-list {
 list-style-type: none;
 margin: 5px 0 0;
 padding: 0;
 background: white;
 border-radius: 12px;
 max-height: 300px;
 overflow-y: auto;
 position: absolute;
 width: 100%;
 z-index: 10;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.suggestions-list li {
 padding: 12px 20px;
 cursor: pointer;
 transition: background-color 0.2s ease;
}
.suggestions-list li:hover {
 background-color: #f8f8f8;
}

.suggestions-list::-webkit-scrollbar {
 width: 8px;
}
.suggestions-list::-webkit-scrollbar-track {
 background: #f1f1f1;
 border-radius: 4px;
}
.suggestions-list::-webkit-scrollbar-thumb {
 background: #ddd;
 border-radius: 4px;
}
.suggestions-list::-webkit-scrollbar-thumb:hover {
 background: #ccc;
}
.footer-section {
 background-color: #f8f9fa;
 padding: 20px;
 text-align: center;
 font-size: 14px;
 border-top: 1px solid #e0e0e0;
}
.footer-content {
 max-width: 800px;
 margin: 0 auto;
}
.footer-info p {
 margin: 5px 0;
 color: #6c757d;
}
.footer-link {
 text-decoration: none;
 color: #007bff;
}
.footer-link:hover {
 text-decoration: underline;
}
.share-button {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 margin-top: 10px;
 padding: 10px 20px;
 font-size: 14px;
 background-color: #007bff;
 color: white;
 border: none;
 border-radius: 8px;
 cursor: pointer;
 transition: all 0.2s ease;
}
.share-button svg {
 width: 20px;
 height: 20px;
}
.share-button:hover {
 background-color: #0056b3;
 transform: translateY(-1px);
}
.share-button:active {
 transform: translateY(0);
}
.scroll-to-top {
 position: fixed;
 bottom: 20px;
 right: 10px;
 background-color: #0f0f0f;
 color: lightcyan;
 border: none;
 border-radius: 50%;
 padding: 10px;
 font-size: 20px;
 z-index: 100;
 cursor: pointer;
 transition: background-color 0.3s ease;
 display: none;
 }
.sr-only {
 position: absolute;
 width: 1px;
 height: 1px;
 margin: -1px;
 padding: 0;
 border: 0;
 clip: rect(0, 0, 0, 0);
 overflow: hidden;
 }