:root {
     --primary-blue: #1a3a8f;
     --secondary-blue: #2554C6;
     --accent-gold: #FFD700;
     --light-gray: #f8f9fa;
     --dark-gray: #333;
     --text-gray: #555;
 }

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



 .container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 20px;
 }

 /* Header Section */
 .hero-section {
     text-align: center;
     margin-bottom: 50px;
     padding: 30px 0;
     background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url('https://images.unsplash.com/photo-1483728642387-6c3bdd6c93e5?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
     background-size: cover;
     background-position: center;
     border-radius: 10px;
 }

 .hero-section h1 {
     font-size: 2.5rem;
     color: #1a3a8f;
     margin-bottom: 15px;
 }

 .hero-section p {

     max-width: 800px;
     margin: 0 auto 30px;
 }

 .flag-badge {
     display: inline-flex;
     align-items: center;
     background: #f5f7ff;
     padding: 8px 15px;
     border-radius: 30px;
     margin-bottom: 15px;
 }


 .flag-badge img {
     margin-right: 10px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 }

 /* Content Sections */
 .content-section {
     background: white;
     border-radius: 15px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
     padding: 40px;
     margin-bottom: 40px;
 }

 .section-title {
     color: var(--primary-blue);
     font-size: 1.8rem;
     margin-bottom: 25px;
     position: relative;
     padding-bottom: 10px;
     display: flex;
     align-items: center;
 }

 .section-title i {
     margin-right: 15px;
     color: var(--accent-gold);
 }

 .section-title::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 60px;
     height: 3px;
     background: var(--accent-gold);
 }

 /* Reasons Grid */
 .reasons-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 25px;
     margin-top: 30px;
 }

 .reason-card {
     background: #f2f2f2;
     border-radius: 10px;
     padding: 25px;
     transition: transform 0.3s ease;
     border-left: 4px solid var(--secondary-blue);
 }

 .reason-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }

 .reason-card h3 {
     color: var(--primary-blue);
     margin-bottom: 15px;
     font-size: 1.3rem;
 }

 /* Quick Facts */
 .quick-facts {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 20px;
     margin-top: 30px;
 }

 .fact-box {
     background: #f2f2f2;
     border-radius: 10px;
     padding: 20px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
     border-top: 3px solid var(--secondary-blue);
 }

 .fact-box h4 {
     color: var(--primary-blue);
     margin-bottom: 15px;
     font-size: 1.1rem;
 }

 .fact-box ul {
     list-style-type: none;
 }

 .fact-box li {
     margin-bottom: 8px;
     position: relative;
     padding-left: 20px;
 }

 .fact-box li::before {
     content: '•';
     color: var(--accent-gold);
     font-weight: bold;
     position: absolute;
     left: 0;
 }

 /* Education System */
 .education-system {
     margin-top: 30px;
 }

 .education-levels {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 20px;
     margin-top: 20px;
 }

 .level-card {
     background: #f2f2f2;
     border-radius: 10px;
     padding: 20px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
     text-align: center;
     border: 1px solid rgba(0, 0, 0, 0.05);
 }

 .level-card h4 {
     color: var(--primary-blue);
     margin-bottom: 10px;
 }

 .level-card p {
     color: var(--text-gray);
     font-size: 0.9rem;
 }

 /* Universities Table */
 .university-table {
     width: 100%;
     border-collapse: collapse;
     margin-top: 30px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
     border-radius: 10px;
     overflow: hidden;
 }

 .university-table th {
     background: var(--primary-blue);
     color: white;
     padding: 15px;
     text-align: left;
 }

 .university-table td {
     padding: 12px 15px;
     border-bottom: 1px solid #eee;
 }

 .university-table tr:nth-child(even) {
     background: #f9f9f9;
 }

 .university-table tr:hover {
     background: #f1f5ff;
 }

 /* Process Timeline */
 .process-timeline {
     position: relative;
     margin-top: 40px;
     padding-left: 30px;
 }

 .process-timeline::before {
     content: '';
     position: absolute;
     top: 0;
     left: 10px;
     height: 100%;
     width: 2px;
     background: var(--secondary-blue);
 }

 .process-step {
     position: relative;
     margin-bottom: 30px;
     padding-left: 30px;
 }

 .process-step::before {
     content: '';
     position: absolute;
     left: 0;
     top: 5px;
     width: 20px;
     height: 20px;
     border-radius: 50%;
     background: var(--accent-gold);
     border: 4px solid var(--primary-blue);
 }

 .process-step h4 {
     color: var(--primary-blue);
     margin-bottom: 10px;
 }

 /* Cost Breakdown */
 .cost-breakdown {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 30px;
     margin-top: 30px;
 }

 .cost-card {
     background: white;
     border-radius: 10px;
     padding: 25px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
 }

 .cost-card h4 {
     color: var(--primary-blue);
     margin-bottom: 20px;
     font-size: 1.2rem;
     border-bottom: 1px solid #eee;
     padding-bottom: 10px;
 }

 .cost-item {
     display: flex;
     justify-content: space-between;
     margin-bottom: 15px;
     padding-bottom: 15px;
     border-bottom: 1px dashed #eee;
 }

 .cost-item:last-child {
     border-bottom: none;
     margin-bottom: 0;
     padding-bottom: 0;
 }

 /* Visa Process */
 .visa-process {
     margin-top: 30px;
 }

 .visa-types {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 20px;
     margin-top: 20px;
 }

 .visa-card {
     background: #f1f5ff;
     border-radius: 10px;
     padding: 20px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
     border-left: 4px solid var(--secondary-blue);
 }

 .visa-card h4 {
     color: var(--primary-blue);
     margin-bottom: 15px;
 }

 /* Scholarship Cards */
 .scholarship-cards {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 20px;
     margin-top: 30px;
 }

 .scholarship-card {
     background: #f1f5ff;
     border-radius: 10px;
     padding: 25px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
     position: relative;
     overflow: hidden;
 }

 .scholarship-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 5px;
     height: 100%;
     background: var(--accent-gold);
 }

 .scholarship-card h4 {
     color: var(--primary-blue);
     margin-bottom: 10px;
 }

 .scholarship-amount {
     font-weight: 600;
     color: var(--secondary-blue);
     margin: 10px 0;
 }

 .scholarship-deadline {
     display: inline-block;
     background: #fff8e1;
     padding: 5px 10px;
     border-radius: 20px;
     font-size: 0.8rem;
     margin-top: 10px;
 }

 /* FAQ Section */
 .faq-section {
     margin-top: 50px;
 }

 .faq-container {
     margin-top: 30px;
 }

 .faq-item {
     background: #f1f5ff;
     border-radius: 10px;
     margin-bottom: 15px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
     overflow: hidden;
 }

 .faq-question {
     padding: 20px;
     cursor: pointer;
     font-weight: 500;
     color: var(--primary-blue);
     position: relative;
 }

 .faq-question::after {
     content: '+';
     position: absolute;
     right: 20px;
     top: 50%;
     transform: translateY(-50%);
     font-size: 1.5rem;
     color: var(--secondary-blue);
 }

 .faq-item.active .faq-question::after {
     content: '-';
 }

 .faq-answer {
     padding: 0 20px;
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.3s ease, padding 0.3s ease;
 }

 .faq-item.active .faq-answer {
     padding: 0 20px 20px;
     max-height: 500px;
 }

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


     .content-section {
         padding: 25px;
     }

     .section-title {
         font-size: 1.5rem;
     }

     .university-table {
         display: block;
         overflow-x: auto;
     }
 }