/* Universal box-sizing for consistent layout */
* {box-sizing:border-box;}
body {margin:0;padding:0;font-family:Arial,sans-serif;background-color:#b2d7f4;color:#444;display:flex;flex-direction:column;min-height:100vh}
.navbar {height:68px;display:flex;justify-content:space-between;align-items:center;padding:15px 20px;background-color:transparent;box-shadow:0 2px 5px rgba(0,0,0,0.1);position:relative;z-index:100}
.logo-placeholder {font-weight:bold;font-size:2em;padding:5px 0;}
.logo-placeholder a, .logo-placeholder a:visited {text-decoration:none;color:#e85007;transition:color 0.3s ease}
/* .logo-placeholder a:hover {color:#007bff;} */

/* Desktop Navigation Links */
.nav-links {list-style:none;margin:0;padding:0;display:flex;gap:25px;}
.nav-links li {display:flex;align-items:center;}
.nav-links li a {text-decoration:none;/*color:#1E3A8A;*/color:#444;font-weight:bold;transition:color 0.3s ease,background-color 0.3s ease,padding 0.3s ease,border-radius 0.3s ease;display:block}
.nav-links li a:hover {color:#007bff}
.nav-links li a.selected {background-color:rgba(0,123,255,0.15);padding:8px 15px;border-radius:20px;color:#007bff}
.mobile-menu-toggle {display:none;background:none;border:none;font-size:24px;cursor:pointer;color:#1E3A8A;padding:5px;width:40px;height:40px;border-radius:5px;transition:background-color 0.2s ease,border-radius 0.2s ease;line-height:1;}
.mobile-menu-toggle:hover {background-color:rgba(0,0,0,0.05);border-radius:5px;}

/* Main Content Styling: Updated for two-column layout */
.main-content {flex-grow:1;padding:40px;font-size:1.2em;line-height:1.6;width:100%;max-width:1650px;margin:20px auto;background-color:white;border-radius:8px;box-shadow:0 4px 10px rgba(0,0,0,0.08);display:flex;flex-direction:column;gap:30px;position:relative;overflow:hidden;}
.home {align-items:center;justify-content:center;background-color:rgba(255,255,255,0.4)}
.content-left {padding:10px;text-align:left;position:relative;min-height:700px;overflow:hidden;}
.content-left p {margin:0;color:#666;font-size:2.5em;font-weight:bold;font-family:Arial,sans-serif;font-style:italic;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:100%;text-align:left;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 1s ease-in-out,visibility 0s linear 1s;}
.content-left p.active {opacity:1;visibility:visible;pointer-events:auto;transition:opacity 1s ease-in-out,visibility 0s linear 0s;}
.content-right {padding:10px;text-align:left;}
.content-right img {max-width:100%;height:auto;max-height:600px;object-fit:contain;border-radius:8px;box-shadow:0 4px 8px rgba(0,0,0,0.1);}
.rotating-text-item{font-family:Arial,sans-serif;font-style:italic;text-align:left;position:relative;padding-left:1em}
.rotating-text-item::before{content:"“";font-size:1.2em;position:absolute;left:0;top:0;}
.rotating-text-item::after{content:"”";font-size:1.2em;margin-left:2px;}

/* Footer Styling */
.footer {text-align:center;padding:20px;background-color:transparent;color:#555;font-size:0.9em;margin-top:auto}

/* Responsive adjustments for smaller screens */
@media (max-width:768px) {
  .nav-links {display:none;flex-direction:column;gap:10px;width:100%;position:absolute;top:70px;left:0;background-color:#fff;box-shadow:0 5px 10px rgba(0,0,0,0.1);border-radius:0 0 8px 8px;padding:10px 0;overflow:hidden;transition:max-height 0.3s ease-in-out,opacity 0.3s ease-in-out;max-height:0;opacity:0;pointer-events:none;}
  .nav-links.active {display:flex;max-height:600px;opacity:1;pointer-events:auto;padding-left:10px;padding-right:10px}
  .nav-links li {width:100%;}
  .nav-links li a {padding:12px 20px;border-radius:0;color:#1E3A8A;text-align:center;width:100%;}
  .nav-links li a.selected {background-color:rgba(0,123,255,0.1);padding:12px 20px;}
  .nav-links li a:hover {background-color:rgba(0,0,0,0.05);}
  .mobile-menu-toggle {display:flex;justify-content:center;align-items:center;}

  /* Mobile: Stack content vertically */
  .main-content {flex-direction:column;padding:20px}
  .home {text-align:left;padding:40px 20px !important}
  .content-left {min-height:170px;overflow:hidden;}
  .content-left, .content-right {width:100%;text-align:center;max-width:100%;}
  .content-left p {font-size:1.2em;}
  .content-right img {width:100%;height:auto;max-width:100%;max-height:unset;}

  h1 {font-size:1.25em;margin-top:0}
  h2 {font-size:1.1em}
}

/* Desktop: Two-column layout */
@media (min-width:769px) {
  .main-content {flex-direction:row;text-align:left}
  .content-left {flex:2;} /* Text occupies 2/3 of the space */
  .content-right {flex:1;} /* Image occupies 1/3 of the space */
  .content-right {display:flex;justify-content:center;align-items:center;}
}