html, body {
    overflow-x: hidden;
    margin: 0;
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
}

/* Header Section Start*/
.header{
  background-image: url('https://go2.enrollmentfuel.com/rs/994-KED-496/images/SSWD-header-bg.jpg');
   position: relative;              
  min-height: 600px;               
  background-size: cover;
  background-position: 50% 20%;
}

.hero-overlay {
  position: absolute;              
  top: 53%;
  right: 10%;
  transform: translateY(-50%);     /* vertically centers it */
  text-align: center;               
  color: #ffffff;
  max-width: 600px;
}

.hero-logo {
  width: 184px; 
  margin-bottom: 16px;
}

.hero-top img:hover {
  filter: brightness(0.1); 
}

.hero-title {
  font-size: 36px;
  font-weight: 900;
  line-height: 100%;
  margin: 0;

}

.hero-title span {
  color: #FDB927;
}

.hero-btn {
  background: #FDB927;
  color: #004684;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
  width: 100%;
  padding: 15px 20px;
  border: none;
  border-radius: 4px;
}

.hero-btn:hover {
  background: #e5a000;
  color: #003b6b;
}

.spacer {
  padding-top: 30px;
}

/* Body Section 1 Start*/

.growing {
  padding: 60px 100px;
  background-color: #004684;

}

.growing-header-1{
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 900;
  font-size: 36px;
  line-height: 30px;
  color: #ffffff;
  text-transform: uppercase;
}

.desktop-hide, .tablet-hide {
  display: none;
}

.growing-header-2{
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 900;
  font-size: 36px;
  line-height: 30px;
  color: #FDB927; 
  text-transform: uppercase;
  margin-bottom:40px;
}

.growing p {
  
  color:#fff;
  font-size: 16px;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 400;
  line-height: 140%;


}

.headline {
  font-family: "Montserrat", Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 0.02em;
  padding-top: 40px;
}

.headline-top {
  display: flex;
  align-items: center;
  gap: 16px;              /* space between text and line */
}

.headline-top-text {
  color: #fff;            /* top line color */
  font-size: 36px;        /* adjust */
  line-height: 1;
  white-space: nowrap;    /* keep on one line */
}

.headline-line {
  flex: 1;                /* makes it stretch across */
  height: 8px;            /* thickness of the yellow line */
  background: #FDB927;    /* yellow */
  
}

.headline-bottom {
  margin-top: 6px;        /* tighten/loosen space between lines */
  color: #FDB927;          /* bottom line color */
  font-size: 36px;        /* match top */
  line-height: 25px;
}

/* Body Section 1 End*/

/* Stat Section Start*/
.stats-section {
  background: #004684; /* your deep blue */
  padding: 60px 100px;
}

.stat-img{
  width:100%;
  height:260px;
  object-fit:cover;
}

.stat-number {
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 36px;
  font-weight: 900;
  color: #FDB927;  /* yellow */
  line-height: 1;
}

.stat-label {
  margin-top: 6px;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 24px;
  color: #ffffff;
  line-height: 1.3;
  font-weight: 400;
}

/* Stat Section End*/

/* Body Section 2 Start*/
.work{
  padding: 60px 100px 0;
  background-color: #F2F1EE;

}

.work-header-1{
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 900;
  font-size: 36px;
  line-height: 30px;
  color: #004684;
  text-transform: uppercase;
}

.work-header-2{
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 900;
  font-size: 36px;
  line-height: 30px;
  color: #FDB927; 
  text-transform: uppercase;
  margin-bottom:40px;
}

.work p {
  
  color:#1e1e1e;
  font-size: 16px;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 400;
  line-height: 140%;


}

.collaborate-header-1{
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 900;
  font-size: 28px;
  line-height: 20px;
  color: #004684;
  text-transform: uppercase;
  margin-top: 50px;
}

.collaborate-header-2{
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 900;
  font-size: 28px;
  line-height: 20px;
  color: #FDB927; 
  text-transform: uppercase;
  margin: 0;
  padding-bottom: 20px;
}
/* Body Section 2 End*/


/* ag Section Start*/
/* ===== Base ===== */
.ag{
  background:#f4f3ef;
  padding:56px 24px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.ag__container{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns: 1fr 54px 1fr; /* left | timeline | right */
  column-gap:24px;
  align-items:start;
}

/* Show desktop blocks by default */
.ag__left,
.ag__right{
  display:block;
}

/* Hide mobile block by default */
.ag__mobile{
  display:none;
  grid-column: 1 / -1; /* safety */
}

/* ===== Timeline (ONE line always) ===== */
.ag__timeline{
  position:relative;
  height:680px;
  justify-self:center;
}

.ag__timeline::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
  width:2px;
  height:100%;
  background:#FDB927;
  border-radius:999px;
}

/* Desktop dots (hidden on mobile) */
.ag__dot{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:18px;
  height:18px;
  border-radius:50%;
  background:#FDB927;
  border:2px solid #0b4a7a;
}

.ag__dot--1{ top:0; }
.ag__dot--2{ top:140px; }
.ag__dot--3{ top:280px; }
.ag__dot--4{ top:440px; }

/* ===== Desktop headings ===== */
.ag__title,
.ag__heading{
  color:#0b4a7a;
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.15;
  margin:0;
  font-size:20px;
}

.ag__left, .ag__right{ min-width:0; } /* prevent weird wrapping */

.ag__title{
  text-align:right;
  margin-left:auto;
  max-width:520px;
}

.ag__title--top{ padding:18px 0 120px; }
.ag__title--mid{ padding:60px 0 120px; }

.ag__heading{
  text-align:left;
  max-width:520px;
  margin:52px 0 120px;
}

.ag__heading--bottom{ margin:52px 0 0; }

/* ===== Cards ===== */
.ag__card{
  border:1px solid #FDB927;
  border-radius:10px;
  padding:20px 18px;
  background:transparent;
  max-width:440px;
  text-align:left;
}

.ag__cardHead{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:8px;
}

.ag__icon{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 34px;
}

.ag__icon img{
  width:34px;
  height:auto;
  display:block;
}

.ag__cardTitle{
  margin:0;
  font-size:16px;
  font-weight:700;
  color:#0b4a7a;
}

.ag__cardText{
  margin:0;
  font-size:16px;
  line-height:1.45;
  color:#2a2a2a;
  max-width:52ch;
}

/* Desktop positioning near timeline */
.ag__card--left{ margin-left:auto; }

.ag__card--right{
  margin-right:auto;
  margin-left:-18px; /* pull closer to center line */
}

.ag__card--top{ margin-top:8px; }

/* ===== Mobile ===== */
@media (max-width: 600px){

  /* grid becomes: line column | content column */
  .ag__container{
    grid-template-columns: 28px 1fr;
    column-gap:14px;
  }

  /* Hide desktop columns on mobile */
  .ag__left,
  .ag__right{
    display:none;
  }

  /* Show mobile flow on mobile */
  .ag__mobile{
    display:block;
    grid-column: 2; /* content stays in column 2 */
  }

  /* Timeline in column 1 and stretches */
  .ag__timeline{
    grid-column: 1;
    height:100%;
    min-height: 900px;  /* extend as needed */
    justify-self:stretch;
  }

  /* Hide desktop dots on mobile */
  .ag__dot{
    display:none;
  }

  /* Mobile items */
  .ag__mItem{
    position:relative;
    margin-bottom:24px;
  }

  /* DOT: always centered on the real line
     - line center is 50% of 28px => 14px from left edge of col 1
     - gap between col1 and col2 is 14px
     - dot radius is 9px
     So from col2, we go left by: (gap + lineCenter + radius) = 14 + 14 + 9 = 37px */
  .ag__mDot{
    position:absolute;
    left: -37px;
    top: 0.45em;
    width:18px;
    height:18px;
    border-radius:50%;
    background:#FDB927;
    border:2px solid #0b4a7a;
  }

  .ag__mTitle{
    color:#0b4a7a;
    font-weight:700;
    font-size:20px;
    line-height:1.15;
    margin:0 0 10px;
    text-align:left;
  }

  .ag__mCard{
    border:1px solid #FDB927;
    border-radius:10px;
    padding:18px 16px;
    background:transparent;
    max-width:520px;
    margin-left:auto;
  }
}
/* ag Section End*/



/* forward Section Start*/
.forward-section {
  background: #004684; /* your deep blue */
  
}

.forward-column {
  padding: 40px;
}

.student-hero-img {
  border-radius: 0.5rem; 
}

.forward-title {
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.1;
  margin-bottom: 16px;
  font-size: 36px;
  
}

.forward-title span {
  color: #FDB927; /* yellow */
}

.forward-text-1 {
  color: #ffffff;
  max-width: 58ch;
  font-size: 16px;
}

.forward-text-2 {
  color: #FDB927;
  max-width: 58ch;
  font-size: 16px;
}

.forward-btn {
  background: #FDB927;
  color: #004684;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
  width: 100%;
  padding: 15px 20px;
  border: none;
  border-radius: 4px;
}

.forward-btn:hover {
  background: #e5a000;
  color: #003b6b;
}
/* forward Section End*/


/* Partners section*/
.partners {
  background: #F2F1EE;
  padding: 60px 100px;
}

.partners-container {
  max-width: 980px;  
}

.logo-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 26px;     
  min-height: 110px;   
  transition: transform 0.55s ease, opacity 0.5s ease; 
}

  .logo-cell img:hover {
    opacity: 50%;
    transform: translateY(-8px);
  }

.partner-logo {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.logo-ncat{ max-height: 58px; }
.logo-uapb{ max-height: 87px; }
.logo-famu{ max-height: 59px; }
.logo-fvsu{ max-height: 90px; }
.logo-lu{   max-height: 63px; }
.logo-emes{   max-height: 115px;}
.logo-vsu{   max-height: 79px;}
.logo-tu{   max-height: 86px;}


.universities {
  font-family: "Montserrat", Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 0.02em;
  padding-top: 20px;
}

.universities-top {
  display: flex;
  align-items: center;
  gap: 16px;              
}

.universities-top-text {
  color: #004684;            
  font-size: 36px;        
  line-height: 1;
  white-space: nowrap;  
}

.universities-bottom {
  margin-top: 6px;        
  color: #FDB927;        
  font-size: 36px;       
  line-height: 25px;
  padding-bottom: 50px;
}

.partners {
  background: #FFFFFF;
  padding: 60px 100px;
}



/* Center logos on tablet/desktop only */
@media (min-width: 768px) {
  .partners .col-md-6,
  .partners .col-md-4 {
    display: flex;
    justify-content: center;
  }
}

/* Left align on mobile */
@media (max-width: 767px) {
  .partners .col-12 {
    display: flex;
    justify-content: flex-start;
  }
}


.rest-universities {
  font-family: "Montserrat", Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 0.02em;
  padding-top: 70px;
}

.rest-universities-top {
  display: flex;
  align-items: center;
  gap: 16px;              
}

.rest-universities-top-text {
  color: #004684;           
  font-size: 28px;        
  line-height: 1;
  white-space: nowrap;    
}

.rest-universities-bottom {
  margin-top: 6px;        
  color: #FDB927;          
  font-size: 28px;       
  line-height: 25px;
  padding-bottom: 50px;
}

.partners-list a {
  color: #004684;         
  text-decoration: none;
  font-size: 18px;
  display: block;
  text-decoration: underline;
  
}

.partners-list a:hover {
  color: #FDB927;
}

.partners-list {
 padding: 0;
 text-align: left!important;
}

.partners-list .col-12,
.partners-list .col-md-4 {
  justify-content: left!important;
}

.footer {
  background: #F2F1EE;
  color: #1a1a1a;
  padding: 60px 100px 20px;
}

.footer .py5{
  padding-bottom: 0;
}


.footer-logo {
  width: 127px;   
  height: auto;
}

.footer-logo:hover {
  opacity: 0.5; 
}

.footer-title {
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  margin: 0 0 8px 0;
  line-height: 1.2;
}

.footer-address {
  font-size: 16px;
  line-height: 1.4;
  margin: 0;
}

.footer-email {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  color: #004684; 
  text-decoration: none;
  font-weight: 400;
  text-decoration: underline;
}

.footer-email:hover {
  text-decoration: underline;
  color: #FDB927;
}

/*Animation*/

/*### Stats Section ### */
/* Base hidden state (slow fade) */
.stats-section .stat-card {
  opacity: 0;
  transition: opacity 1.6s ease, transform 1.6s ease; /* slower */
  will-change: opacity, transform;
}

/* Direction: 1st & 3rd from top */
.stats-section .stat-card:nth-child(1),
.stats-section .stat-card:nth-child(3) {
  transform: translateY(-40px);
}

/* Direction: 2nd from bottom */
.stats-section .stat-card:nth-child(2) {
  transform: translateY(40px);
}

/* Visible */
.stats-section .stat-card.show {
  opacity: 1;
  transform: translateY(0);
}

/* One-by-one (stagger) */
.stats-section .stat-card:nth-child(1) { transition-delay: 0.0s; }
.stats-section .stat-card:nth-child(2) { transition-delay: 0.25s; }
.stats-section .stat-card:nth-child(3) { transition-delay: 0.5s; }


/* Base hidden state (slow) */
.ag .ag-anim {
  opacity: 0;
  transition: opacity 2.2s ease, transform 2.2s ease; /* slower */
  will-change: opacity, transform;
}

/* Left side: fade/slide in left -> right */
.ag__left .ag-anim {
  transform: translateX(-56px);
}

/* Right side: fade/slide in right -> left */
.ag__right .ag-anim {
  transform: translateX(56px);
}

/* Mobile: fade up */
.ag__mobile .ag-anim {
  transform: translateY(32px);
}

/* Visible */
.ag .ag-anim.show {
  opacity: 1;
  transform: translateX(0) translateY(0);
}

/* One-by-one stagger */
.ag__left .ag-anim { transition-delay: 0s; }
.ag__left .ag-anim:nth-of-type(2) { transition-delay: 0.25s; }
.ag__left .ag-anim:nth-of-type(3) { transition-delay: 0.5s; }
.ag__left .ag-anim:nth-of-type(4) { transition-delay: 0.75s; }

.ag__right .ag-anim { transition-delay: 0s; }
.ag__right .ag-anim:nth-of-type(2) { transition-delay: 0.25s; }
.ag__right .ag-anim:nth-of-type(3) { transition-delay: 0.5s; }
.ag__right .ag-anim:nth-of-type(4) { transition-delay: 0.75s; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .ag .ag-anim {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}



/* Mobile Section*/
@media (max-width: 600px) {

  
.header{
  background-image: url('https://go2.enrollmentfuel.com/rs/994-KED-496/images/SSWD-header-bg-m.jpg');
   display: flex;             
  min-height: 900px;               
  background-size: cover;
  
}

  .hero-overlay{
    position: relative;            
    top: auto;
    right: auto;
    transform: none;
    width: 100%;
    max-width: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    text-align: center;
  }

  .hero-top{
    text-align: center;
  }

  .hero-logo{
    width:150px;
  }


  .hero-title{
    font-size:28px;
    line-height:1.05;
    text-align: left;
    padding: 0 10px;
  }

  .spacer {
    padding: 0;
  }

  .hero-btn{
    width:80%;
    padding-top: 10px
  }

  .hero-bottom{
    padding: 0 0 20px;    
  }

  .growing {
    padding: 60px 14px 10px;
  }

  .growing-header-1, .growing-header-2 {
    line-height: 100%;
    margin: 0;
  }

  .growing p {
    padding-top: 20px;
  }

  .headline {
    padding-top: 24px;
    position: relative;
  }

  /* Turn off the horizontal line */
  .headline-line {
    display: none;
  }

  .headline-top {
    display: block;
    gap: 0;
  }

  .headline-top-text,
  .headline-bottom {
    font-size: 34px;     
    white-space: normal;
  }

  .headline-bottom {
    margin-top: 6px;
  }

  /* Add the vertical gold bar */
  .headline::before {
    content: "";
    display: block;
    margin-left: 30px;
    width: 10px;
    height: 133px;        
    background: #FDB927;
    margin-bottom: 16px;
  }


  .desktop-hide {
  display: block;
}
  .stats-section {
    padding: 20px 0 60px;
  }

   .stat-card{
    display:flex;
    align-items:flex-start;
    gap:16px;
    
  }


  .stat-img{
    width:160px;
    height:160px;
    margin-bottom:0 !important;
    border-radius:12px;
    flex:0 0 120px;
  }

  .stat-content{
    display: flex;
    flex-direction: column;   
    padding-top: 20px;
  }

  .stat-number{
    line-height: 1;         
  }

  .stat-label{
    margin-top: 4px;
    line-height: 100%;  
  }

  .collaborate-header-1 {
    line-height: 100%;;
  }


  .student-hero-img {
  border-radius: 0; 
}

  .forward-column{
    padding: 60px 14px;
  }

  .work {
    padding: 60px 20px 0;
  }

  .universities-bottom {
    line-height: 100%;
    margin-top: 0;
  }

  .line-bottom::after {
    content: "";
    display: block;
    margin-left: 30px;
    width: 10px;
    height: 133px;        
    background: #FDB927;
    margin-bottom: 16px;
  }

  .logo-cell{
    padding: 0;
  }

  .rest-universities-bottom {
    line-height: 100%;
    margin-top: 0;
  }

  .partners {
    padding: 60px 14px;
  }

  .footer {
    padding: 30px 14px;
  }

  .footer .row {
    display: flex;
    flex-wrap: nowrap; /* prevents stacking */
    align-items: center; /* vertically aligns logo + text */
  }

  .footer .col-12 {
    width: auto;
    flex: 0 0 auto;
  }

  .footer-logo {
  width: 90px;  
  height: auto;
}

  
}

/*tablet Section*/
@media (min-width: 600px) and (max-width: 990px) {

  .header{
  background-image: url('https://go2.enrollmentfuel.com/rs/994-KED-496/images/SSWD-header-bg-t.jpg');
   position: relative;              
  min-height: 600px;               
  background-size: cover;
  background-position: 50% 20%;
}

.hero-overlay {
  position: absolute;              
  top: 45%;
  right: 5%;
  transform: translateY(-50%);     /* vertically center it */
  text-align: center;               
  color: #ffffff;
}

  .headline-line {
    display: none;
  }

  .headline::before {
        content: "";
        display: block;
        margin-left: 30px;
        width: 10px;
        height: 133px;
        background: #FDB927;
        margin-bottom: 16px;
    }

   .line-bottom::after {
    content: "";
    display: block;
    margin-left: 30px;
    width: 10px;
    height: 133px;        /* bar height */
    background: #FDB927;
    margin-bottom: 16px; /* space between bar and text */
  }

.universities-top-text {
  padding-right: 30px;;
}

.universities-bottom {
  line-height: 100%;
}

.tablet-hide {
  display: block;
}


}