:root {
--primary-blue: #1e3a8a;
--header-bg: #ffffff;
--text-dark: #1f2937;
--text-muted: #4b5563;
--bg-light: #f3f4f6;
--accent-blue: #2563eb;
--white: #ffffff;
--border-color: #e5e7eb;
}

* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
color: var(--text-dark);
line-height: 1.6;
background-color: var(--white);
}

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

/* Buttons & CTAs */
.btn {
display: inline-block;
padding: 12px 24px;
border-radius: 30px;
text-decoration: none;
font-weight: 600;
text-align: center;
transition: all 0.3s ease;
cursor: pointer;
font-size: 16px;
}

.btn-blue {
background-color: var(--accent-blue);
color: var(--white);
border: 2px solid var(--accent-blue);
}

.btn-blue:hover {
background-color: #1d4ed8;
}

.btn-outline-white {
background-color: transparent;
border: 2px solid var(--white);
color: var(--white);
}

.btn-outline-white:hover {
background-color: var(--white);
color: var(--primary-blue);
}

/* 1. HEADER */
header:not(.site-header) {
background-color: var(--header-bg);
border-bottom: 1px solid var(--border-color);
padding: 12px 0;
position: sticky;
top: 0;
z-index: 1000;
}

.header-container {
display: flex;
justify-content: space-between;
align-items: center;
}

.logo-container {
display: flex;
align-items: center;
text-decoration: none;
}

.logo-container img {
height: 42px;
width: auto;
object-fit: contain;
}

.legacy-page-nav {
display: flex;
align-items: center;
gap: 20px;
}

.legacy-page-nav a {
color: var(--text-dark);
text-decoration: none;
font-size: 16px;
font-weight: 500;
transition: color 0.2s;
}

.legacy-page-nav a:hover {
color: var(--accent-blue);
}

/* 1. HERO SECTION */
.hero {
background: linear-gradient(135deg, #1e3a8a 0%, #172554 100%);
color: var(--white);
padding: 80px 0;
text-align: center;
}

.hero-content {
margin: 0 auto;
}

.hero h1 {
font-size: 40px;
line-height: 1.2;
margin-bottom: 20px;
}

.hero h1 span {
display: block;
font-size: 14px;
color: #93c5fd;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 10px;
font-weight: 600;
}

.hero p {
font-size: 18px;
margin-bottom: 30px;
opacity: 0.9;
line-height: 1.7;
}

.hero-buttons {
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
margin-bottom: 30px;
}

.hero-trust {
letter-spacing: 1px;
text-transform: uppercase;
opacity: 0.7;
}

/* General Section Layouts */
.section { padding: 80px 0; }
.section-light { background-color: var(--bg-light); }
.text-center { text-align: center; }

.section-title {
color: var(--primary-blue);
font-size: 34px;
margin-bottom: 15px;
}



.grid-2 {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 40px;
align-items: center;
}

.grid-3 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
}

.grid-4 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
}

.card {
background: var(--white);
padding: 30px;
border-radius: 8px;
border: 1px solid var(--border-color);
box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}


/* Timeline (Section 2 & 6) */
.timeline {
position: relative;
max-width: 700px;
margin: 0 auto;
padding-left: 25px;
border-left: 3px solid var(--accent-blue);
}

.timeline-step {
position: relative;
margin-bottom: 30px;
}

.timeline-step::before {
content: '';
position: absolute;
left: -33px;
top: 4px;
width: 13px;
height: 13px;
border-radius: 50%;
background-color: var(--accent-blue);
border: 3px solid var(--white);
}
.timeline-step h4 { color: var(--primary-blue); font-size: 16px; margin-bottom: 4px; }
.timeline-step p { color: var(--text-muted); font-size: 13px; }

/* Checklist Style (Section 10) */
.checklist-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.checklist-box {
background: var(--white);
padding: 30px;
border-radius: 8px;
border: 1px solid var(--border-color);
}
.checklist-box h3 { color: var(--primary-blue); margin-bottom: 20px; font-size: 20px; }
.checklist-box label {
display: block;
margin-bottom: 12px;
font-size: 18px;
cursor: pointer;
}
.checklist-box input[type="checkbox"] {
margin-right: 10px;
transform: scale(1.2);
}

/* FAQ Accordion (Section 12) */
.faq-container { max-width: 800px; margin: 0 auto; }
details {
background: var(--white);
border: 1px solid var(--border-color);
border-radius: 6px;
margin-bottom: 12px;
padding: 16px 20px;
cursor: pointer;
}
details[open] { border-color: var(--accent-blue); }
summary {
font-weight: 600;
color: var(--primary-blue);
font-size: 18px;
outline: none;
display: flex;
justify-content: space-between;
}
summary::-webkit-details-marker { display: none; }
details p {
margin-top: 12px;
color: #333;
font-size: 18px;
border-top: 1px solid var(--bg-light);
padding-top: 12px;
}

/* Final CTA (Section 13) */
.final-cta {
background: linear-gradient(rgba(30, 58, 138, 0.9), rgba(23, 37, 84, 0.9)), url('../../images/uni-pages/old-tbilisi.webp') center/cover;
color: var(--white);
text-align: center;
padding: 90px 0;
}
.final-cta h2 { color: var(--white); font-size: 36px; margin-bottom: 15px; }
.final-cta p { max-width: 650px; margin: 0 auto 30px auto; font-size: 16px; opacity: 0.9; }

/* Footer */
footer:not(.site-footer) {
background-color: #0f172a;
color: #94a3b8;
padding: 60px 0 25px 0;
font-size: 14px;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 30px;
margin-bottom: 40px;
}
.footer-col h4 { color: var(--white); font-size: 16px; margin-bottom: 15px; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 8px; }
.footer-col ul li a { color: #94a3b8; text-decoration: none; }
.footer-col ul li a:hover { color: var(--white); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; text-align: center; font-size: 13px; }

@media (max-width: 900px) {
.legacy-page-nav { display: none; }
.grid-2, .checklist-grid, .footer-grid { grid-template-columns: 1fr; }
}
/* UNIVERSITY DROPDOWN */

.dropdown {
position: relative;

}

.dropdown .dropbtn {
display: block;
cursor: pointer;
}

.dropdown-content {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #ffffff;
min-width: 280px;
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 8px 0;
z-index: 2000;
}

.dropdown-content a {
display: block;
padding: 10px 16px;
color: var(--text-dark);
text-decoration: none;
font-size: 14px;
white-space: nowrap;
}

.dropdown-content a:hover {
background: var(--bg-light);
color: var(--accent-blue);
}

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

/* CSP-safe: converted inline style attributes */
.csp-adm-1{padding: 10px 20px}
.csp-adm-2{background: #ffffff; color: var(--primary-blue)}
.csp-adm-3{text-align: left; margin-top: 40px}
.csp-adm-4{margin-top: 30px}
.csp-adm-5{margin-top: 30px; margin-bottom: 40px}
.csp-adm-6{color: var(--primary-blue); margin-bottom: 15px}
.csp-adm-7{color: var(--text-muted); font-size: 14px; margin-bottom: 20px}
.csp-adm-8{margin: 0 0 20px 0}
.csp-adm-9{list-style: disc; padding-left: 20px; color: #333; font-size: 18px; line-height: 1.8}
.csp-adm-10{background: var(--primary-blue); color: var(--white); border: none}
.csp-adm-11{color: var(--white); font-size: 22px; margin-bottom: 15px}
.csp-adm-12{color: #e2e8f0; font-size: 14px; line-height: 1.7; margin-bottom: 20px}
.csp-adm-13{width: 100%; border-radius: 6px; padding: 10px}

.csp-adm-15{font-size: 13px !important; color: var(--text-muted); margin-top:20px;}
.csp-adm-16{display: flex; justify-content: center; gap: 10px; flex-wrap: wrap}
.csp-adm-17{font-size: 12px; opacity: 0.8}





/* Base Paragraph / Body Text */
p {
  font-size: 1.125rem !important; /* 18px */
  line-height: 1.6;
}

/* h1 - Main Page Title */
h1 {
  font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem) !important; /* ~40px to 56px */
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
}

/* h2 - Section Headings */
h2 {
  font-size: clamp(2rem, 1.6rem + 1.5vw, 2.75rem) !important; /* ~32px to 44px */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
}

/* h3 - Sub-sections */
h3 {
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem) !important; /* ~24px to 32px */
  font-weight: 600;
  line-height: 1.3;
}

/* Base Paragraph Text (18px) */
p {
  font-size: 1.125rem !important; /* 18px */
  line-height: 1.6;
}

/* h6 - Paragraph-a vida konjam perusu (20px) */
h6 {
  font-size: 1.25rem !important; /* 20px */
  font-weight: 700;
  line-height: 1.4;
  font-family: var(--font-family);
  color: var(--primary-color);
  margin: 0 0 12px;
}

/* h5 - (22px) */
h5 {
  font-size: 1.375rem !important; /* 22px */
  font-weight: 600;
  line-height: 1.4;
  font-family: var(--font-family);
  color: var(--primary-color);
  margin: 0 0 14px;
  text-wrap: balance;
}

/* h4 - (24px) */
h4 {
  font-size: 1.5rem !important; /* 24px */
  font-weight: 600;
  line-height: 1.4;
  font-family: var(--font-family);
  color: var(--primary-color);
  margin: 0 0 16px;
  text-wrap: balance;
}

.ccard {
    background: var(--white);
    padding: 20px 15px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}


.csp-adm-4 .card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    padding: 24px;
  }

  .csp-adm-4 .card h6 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
    white-space: nowrap; /* Ensures single line headings */
  }

  .csp-adm-4 .card ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
  }

  .csp-adm-4 .card ul li {
    font-size: 18px;
    line-height: 2.2; /* Better spacing between lines */
   /* Forces each point onto a single line */
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .csp-adm-4 .card ul li::before {
    content: "• ";
    font-weight: bold;
    margin-right: 6px;
  }

  .section-desc {
    margin-bottom:20px;
  }

  .cardd {
    background: var(--white);
padding: 30px;
border-radius: 8px;
border: 1px solid var(--border-color);
box-shadow: 0 4px 6px rgba(0,0,0,0.02);}

.cardd h4, .cardd p{
    text-align: center;
  }

/* =========================================================
   MOBILE / TABLET RESPONSIVE CENTERING
   (Timeline section and list-based sections are excluded)
   ========================================================= */
@media (max-width: 1024px) {

  /* Tablet: keep 2-column grids readable, avoid squeezing content */
  .grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .checklist-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {

  /* Eligibility section (cardd) */
  .cardd,
  .cardd h4,
  .cardd p { text-align: center; }

  /* Choosing University section (ccard) */
  .ccard,
  .ccard h6,
  .ccard p { text-align: center; }

  /* After Admission / Pre-Departure card block (excluding its ul list) */
  .grid-2 > div:not(:has(.timeline)) h4.section-title,
  .grid-2 > div:not(:has(.timeline)) p.section-desc { text-align: center; }
  .csp-adm-10,
  .csp-adm-11,
  .csp-adm-12 { text-align: center; }
  .grid-2 { justify-items: center; text-align: center; }
  .grid-2 ul.csp-adm-9 { text-align: left; margin: 0 auto; display: inline-block; }

  /* Arrival in Georgia cards, Documents cards (headings/paragraphs only; keep <ul><li> left-aligned) */
  .card h4,
  .card h6,
  .card > p { text-align: center; }
  .card ul { text-align: left; }

  /* Checklist section: stack to single column on mobile, keep labels left-aligned for readability */
  .checklist-grid { grid-template-columns: 1fr; }
  .checklist-box { text-align: center; }
  .checklist-box label { text-align: left; }

  /* FAQ section heading/description centered, keep accordion text natural */
  .faq-container summary { text-align: center; justify-content: center; }

  /* Footer: center columns on mobile, keep link lists usable */
  .footer-grid { grid-template-columns: 1fr; text-align: center; }
  .footer-col ul { display: inline-block; text-align: left; }

  /* Indian students section already centered via text-center */

  /* Final CTA already centered via .final-cta text-align */

  /* Grid layouts collapse to single column on mobile for readability */
  .grid-3,
  .grid-4 { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 28px; }
  .section-title { font-size: 26px; }
  .btn { width: 100%; }
  .hero-buttons { flex-direction: column; }
  .hero-buttons .btn { width: 100%; }
}