.material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        body {
            background-color: #f9f9f9;
        }
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #f1f1f1; }
        ::-webkit-scrollbar-thumb { background: #8c7071; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #570013; }
        
        .academic-border {
            border-left: 4px solid #570013;
        }

        @keyframes vertical-scroll {
            0% { transform: translateY(0); }
            100% { transform: translateY(-50%); }
        }
        .animate-vertical-scroll {
            animation: vertical-scroll 15s linear infinite;
        }
        .animate-vertical-scroll:hover {
            animation-play-state: paused;
        }

        /* Lightbox styles */
        #lightbox {
            position: fixed;
            z-index: 1000;
            inset: 0;
            background: rgba(0, 0, 0, 0.9);
            justify-content: center;
            align-items: center;
        }
        #lightbox.active {
            display: flex;
        }
        .d-none{ display: none !important;}
        .lightbox-img {
            max-width: 90vw;
            max-height: 80vh;
            object-fit: contain;
        }
        
        /* Dropdown transition */
        .nav-dropdown {
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: all 0.3s ease;
        }
        .nav-item:hover .nav-dropdown {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        
:root {
  --cream: #f9f3e6;
  --gold-soft: #c9a256;
  --charcoal: #2b2620;
  
  --font-20: 20px;
  --line-20: 27px;
  
  --font-16: 16px;
  --line-16: 25px;
  
  --font-15: 15px;
  --line-15: 25px;
  
  --font-14: 14px;
  --line-14: 24px;
  
  --font-11: 11px;
  --line-11: 14px;
  
  
}  
.fs-20{ font-size: var(--font-20) !important; line-height: var(--line-20) !important;}
.fs-15{ font-size: var(--font-15) !important; line-height: var(--line-15) !important;}
.fs-16{ font-size: var(--font-16) !important; line-height: var(--line-16) !important;}
.fs-14{ font-size: var(--font-14) !important; line-height: var(--line-14) !important;}
.fs-11{ font-size: var(--font-11) !important; line-height: var(--line-11) !important;}

.text-headline-md{ font-size: var(--font-20) !important; line-height: var(--line-20) !important;}


#drawer-toggle{ display: none;}

.nav-logo{ display: flex;}
.nav-logo img{ height: 60px; margin-right: 10px;}
.nav-logo .name { font-family: Libre Caslon Text; font-size: 20px; color: #570013;}
.nav-logo .sub { font-size: 12.5px;
  letter-spacing: .08em;
  color: var(--gold-soft);
  text-transform: uppercase;}

.opacity-10 {
  opacity: 0.01 !important;
}

.grid li.text-on-surface-variant, .parchment-fill li{ position: relative; padding-left: 20px;}
.grid li.text-on-surface-variant:before, .parchment-fill li:before{ content: "◆"; color: rgb(233 195 73 / var(--tw-text-opacity, 1)); position: absolute; top: 0px; left: 0px;}
.text-uppercase{ text-transform: uppercase;}


.hero-pattern {
            background-image: linear-gradient(rgba(87, 0, 19, 0.9), rgba(87, 0, 19, 0.9));
            background-size: cover;
            background-position: center;
        }

.gallery-item{ height: 300px;}
.close_btn{ display: flex;}


.map-sec iframe{ width: 100%; height: 100%;}

/* Custom Academic Navy accents */
        .border-academic { border-color: #8c7071; }
        .bg-institutional-maroon { background-color: rgb(128 0 32 / var(--tw-bg-opacity, 1)) !important; }
        
        /* Smooth transitions for interactive elements */
        .btn-transition { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
button.bg-primary:hover {
  background-color: rgb(255 224 136 / var(--tw-text-opacity, 1)) !important; color: rgb(128 0 32 / var(--tw-bg-opacity, 1)) !important;
}

button.bg-primary:hover .material-symbols-outlined{
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.academic-grid-bg {
            background-image: radial-gradient(circle, #e0bfbf 1px, transparent 1px);
            background-size: 32px 32px;
        }
        .gold-border-top {
            border-top: 4px solid #735c00;
        }
        .maroon-border-top {
            border-top: 4px solid #570013;
        }
        .parchment-fill {
            background-color: #fcfbf7;
        }

.nav-dropdown .text-body-md{ font-size: 14px;}

nav .text-label-md {
  font-size: 16px;}
.nav-dropdown .py-3{ padding-left: .55rem;
  padding-right: .55rem;}
.nav-dropdown .py-3{ padding-top: 0.55rem;
  padding-bottom: 0.55rem;}
.cmspage .text-body-lg{ font-size: var(--font-16) !important; line-height: var(--line-16) !important;}

.cmspage .text-headline-md {
  margin-bottom: 1.5rem;color: rgb(26 28 28 / var(--tw-text-opacity, 1));
}
.cmspage section{
  margin-bottom: 4rem;
}
.cmspage .list-none{ margin-top: 20px;}

.mb-0 {
  margin-bottom: 0px !important;
}
.cmspage .text-tertiary-fixed {
  --tw-text-opacity: 1;
  color: rgb(213 227 255 / var(--tw-text-opacity, 1));
}
.cmspage .text-white{ color: #fff;}


.home-banner .bg-right-bottom {
    background-position: right top 0 !important;
    background-size: cover !important;
}
.home-banner .opacity-5 {
    opacity: 0.09;
}
.about-banImg{opacity: 0.09 !important;}




button.close_btn.bg-primary:hover .material-symbols-outlined {
    --tw-translate-x: 0.25rem;
    transform: inherit;
}


.contact-form textarea{ height: 100px;}
.contact-form br{ display: none;}
.contact-form span.text-label-md{ width: 100%; display: inline-block;}
.contact-form label{ padding-bottom: 10px;}
.wpcf7-not-valid-tip{ color: #e5103e;}

.wpcf7-response-output{ padding: 10px 0;}

.subject-articl li.flex{ display: inline-block; width: 100%; }
.subject-articl li.flex em{     --tw-text-opacity: 1;
    color: rgb(115 92 0 / var(--tw-text-opacity, 1)); text-transform: uppercase;  font-weight: 600;}

.other-dtl-Item:nth-child(2){
    --tw-bg-opacity: 1;
    background-color: rgb(254 214 91 / var(--tw-bg-opacity, 1)); display: flex; gap: 1.5rem; 
    align-items: center;
}
.other-dtl-Item:nth-child(2) .mb-4{ margin-bottom: 0px;}
.dress-dtl-Item:nth-child(3) > div, .dress-dtl-Item:nth-child(4) > div{ display: flex; gap: 1.5rem; align-items: center; }
.dress-dtl-Item:nth-child(3) .mb-4, .dress-dtl-Item:nth-child(4) .mb-4{ margin-bottom: 0px;}
.dress-dtl-Item:nth-child(3), .dress-dtl-Item:nth-child(4) {
    padding: 10px 22px;
    justify-content: center;
    background: none;
    box-shadow: none;
}
.other-dtl-Item:nth-child(1){ text-align: center;}







@media only screen and (max-width:1199px){
.p-6 {
  padding: .5rem;
}
.text-body-lg {
  font-size: 15px !important;}
.md\:p-12 {
    padding: 2rem !important;
  }
.text-display-lg {
  font-size: 36px !important;
  line-height: 42px !important;
}

.nav-logo .name{ font-size: 15px;}
.nav-logo .sub {
  font-size: 10.5px;}
.nav-logo img {
  height: 48px;
  margin-right: 6px;
}




}

@media only screen and (max-width:767px){

#drawer-toggle {
  display: block !important;
}

.headrMenu{
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  width: 100%;
}

.py-20 {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}
.pt-16{ padding-top: 3rem !important;}
.pb-20 {
  padding-bottom: 4rem !important;
}
.pt-20 {
  padding-top: 4rem !important;
}
footer{ padding-bottom: 115px !important;}





}
@media only screen and (max-width:480px){
body{ font-size: 14px;
  line-height: 20px}
 .nav-logo .sub {
    font-size: 8.5px;
    line-height: 10px;
  }
.p-8 {
  padding: 20px !important;
}

.text-body-md {
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 400;
}
.py-16 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}





}
