/* ========================================================= BLINN COLLEGE DISTRICT STEPS TO APPLY ========================================================= */
/* ========================================================= FONT ========================================================= */
/* @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;
500;
600;
700&display=swap');*/
/* ========================================================= GLOBAL ========================================================= */
/* * {
     box-sizing: border-box;
}
 html {
     scroll-behavior: smooth;
}
 body {
     margin: 0;
     font-family: Arial, Helvetica, sans-serif;
     background: #ffffff;
     color: #173f78;
}*/
/* ========================================================= MAIN WRAPPER ========================================================= */
 .university-steps {
     width: 100%;
     background: #ffffff;
}
/* ========================================================= TOP STEP NAVIGATION WHITE BACKGROUND ========================================================= */
 .steps-section {
     width: 100%;
     padding: 25px 0 60px;
     background: #ffffff;
}
 .steps-container {
     width: 100%;
     max-width: 1500px;
     margin: 0 auto;
     padding: 0 40px;
}
/* ========================================================= PAGE HEADING ========================================================= */
 .steps-heading {
     text-align: center;
     margin-bottom: 25px;
}
 .steps-heading h1 {
     margin: 0 0 8px;
     color: #123f7a;
     font-family: "Oswald", sans-serif;
     font-size: clamp(44px, 5vw, 68px);
     font-weight: 700;
     line-height: 1;
     letter-spacing: -1px;
}
 .steps-heading p {
     margin: 0 auto;
     max-width: 900px;
     color: #596b82 !important;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 17px;
     line-height: 1.5;
}
/* ========================================================= TOP STEP SEQUENCE ========================================================= */
 .step-sequence {
     position: relative;
     width: 100%;
     max-width: 1250px;
     height: 210px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     align-items: end;
}
/* ========================================================= INTERACTIVE BASE LINE CENTERED WITH GRAPHICS ========================================================= */
 .sequence-line {
     position: absolute;
     left: 12.5%;
     right: 12.5%;
    /* * The line is positioned through the * center area of the step graphics. */
     top: 55%;
     height: 5px;
     background: #cbd7e6;
     border-radius: 20px;
     z-index: 1;
}
/* ========================================================= INTERACTIVE PROGRESS LINE ========================================================= */
 .sequence-progress {
     position: absolute;
     left: 12.5%;
    /* * Keep this at the exact same vertical * position as the base line. */
     top: 55%;
     width: 0;
     height: 5px;
     border-radius: 20px;
     background: linear-gradient( 90deg, #fdbb30 0%, #ef7d22 33%, #31a6b7 66%, #6cc24a 100% );
     z-index: 2;
     transition: width 0.4s ease;
}
/* ========================================================= TOP GRAPHIC BUTTONS ========================================================= */
 .sequence-button {
     position: relative;
     width: 100%;
     height: 210px;
     padding: 0;
     margin: 0;
     border: 0;
     background: transparent;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: flex-end;
     cursor: pointer;
     z-index: 3;
}
/* ========================================================= TOP STEP GRAPHICS ========================================================= */
 .sequence-icon {
     width: 150px;
     height: 150px;
     object-fit: contain;
     display: block;
     flex-shrink: 0;
     transition: transform 0.25s ease, filter 0.25s ease;
}
/* ========================================================= GRAPHIC HOVER ========================================================= */
 .sequence-button:hover .sequence-icon {
     transform: translateY(-4px);
}
/* ========================================================= ACTIVE GRAPHIC ========================================================= */
 .sequence-button.active .sequence-icon {
     transform: translateY(-4px);
}
/* ========================================================= HIDE OLD TOP NUMBERS ========================================================= */
 .sequence-number {
     display: none;
}
/* ========================================================= KEYBOARD ACCESSIBILITY ========================================================= */
 .sequence-button:focus-visible {
     outline: 3px solid #123f7a;
     outline-offset: 5px;
}
/* ========================================================= ACCORDION SECTION BLUE-GRAY BACKGROUND ========================================================= */
 .application-steps {
     width: 100%;
     max-width: none;
     margin: 0;
     padding: 55px max(40px, calc((100% - 1400px) / 2)) 70px;
     background: #eef3f9;
}
/* ========================================================= INDIVIDUAL ACCORDION CARD ========================================================= */
 .application-step {
     width: 100%;
     margin: 0 0 12px;
     background: #ffffff;
     border: 0;
     border-radius: 14px;
     overflow: hidden;
     box-shadow: 0 4px 14px rgba(30, 60, 100, 0.08), 0 1px 3px rgba(30, 60, 100, 0.06);
     scroll-margin-top: 25px;
     transition: box-shadow 0.25s ease, transform 0.25s ease;
}
/* ========================================================= CARD HOVER ========================================================= */
 .application-step:hover {
     box-shadow: 0 7px 20px rgba(30, 60, 100, 0.11), 0 2px 5px rgba(30, 60, 100, 0.06);
}
/* ========================================================= STEP COLORS ========================================================= */
 #step-1 {
     --step-color: #fdbb30;
     --step-color-dark: #e4a719;
}
 #step-2 {
     --step-color: #ef7d22;
     --step-color-dark: #dc6910;
}
 #step-3 {
     --step-color: #31a6b7;
     --step-color-dark: #218d9d;
}
 #step-4 {
     --step-color: #6cc24a;
     --step-color-dark: #55aa38;
}
/* ========================================================= ACCORDION HEADER ========================================================= */
 .accordion-header {
     position: relative;
     width: 100%;
     min-height: 88px;
     display: flex;
     align-items: center;
     gap: 22px;
     padding: 15px 24px 15px 28px;
     border: 0;
     border-left: 6px solid var(--step-color);
     border-radius: 14px;
     background: #ffffff;
     color: #123f7a;
     text-align: left;
     cursor: pointer;
     transition: background 0.25s ease, border-radius 0.25s ease;
}
/* ========================================================= HEADER HOVER ========================================================= */
 .accordion-header:hover {
     background: #fbfcfe;
}
/* ========================================================= ACCORDION NUMBER LARGE + BOLD ========================================================= */
 .accordion-number {
     flex-shrink: 0;
     width: 58px;
     height: 58px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     background: var(--step-color);
     color: #ffffff;
     font-family: "Oswald", sans-serif;
     font-size: 25px;
     font-weight: 700;
     line-height: 1;
     transition: transform 0.25s ease, background 0.25s ease;
}
/* ========================================================= STEP 1 - YELLOW ========================================================= */
 #step-1 .accordion-number {
     background: #fdbb30;
     color: #123f7a;
}
/* ========================================================= STEP 2 - ORANGE ========================================================= */
 #step-2 .accordion-number {
     background: #ef7d22;
     color: #123f7a;
}
/* ========================================================= STEP 3 - TURQUOISE ========================================================= */
 #step-3 .accordion-number {
     background: #31a6b7;
     color: #123f7a;
}
/* ========================================================= STEP 4 - GREEN ========================================================= */
 #step-4 .accordion-number {
     background: #6cc24a;
     color: #123f7a;
}
/* ========================================================= NUMBER HOVER ========================================================= */
 .application-step:hover .accordion-number {
     transform: scale(1.04);
}
/* ========================================================= ACCORDION TITLE ========================================================= */
 .accordion-title {
     flex: 1;
     color: #123f7a;
     font-family: "Oswald", sans-serif;
     font-size: clamp(23px, 2vw, 30px);
     font-weight: 700;
     line-height: 1.15;
     letter-spacing: 0;
}
/* ========================================================= PLUS / MINUS BUTTON ========================================================= */
 .accordion-toggle {
     flex-shrink: 0;
     width: 42px;
     height: 42px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     background: #f0f4f9;
     color: #123f7a;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 26px;
     font-weight: 400;
     line-height: 1;
     transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
/* ========================================================= OPEN ACCORDION HEADER ========================================================= */
 .application-step.open .accordion-header {
     background: #ffffff;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
}
/* ========================================================= OPEN ACCORDION NUMBER COLORS ========================================================= */
 #step-1.open .accordion-number {
     background: #fdbb30;
     color: #123f7a;
}
 #step-2.open .accordion-number {
     background: #ef7d22;
     color: #123f7a;
}
 #step-3.open .accordion-number {
     background: #31a6b7;
     color: #123f7a;
}
 #step-4.open .accordion-number {
     background: #6cc24a;
     color: #123f7a;
}
/* ========================================================= OPEN ACCORDION TOGGLE ========================================================= */
 .application-step.open .accordion-toggle {
     background: var(--step-color);
     color: #000000;
     transform: rotate(45deg);
}
/* ========================================================= ACCORDION CONTENT ========================================================= */
 .accordion-content {
     display: grid;
     grid-template-rows: 0fr;
     transition: grid-template-rows 0.4s ease;
}
 .accordion-content-inner {
     overflow: hidden;
}
/* ========================================================= OPEN CONTENT ========================================================= */
 .application-step.open .accordion-content {
     grid-template-rows: 1fr;
}
/* ========================================================= ACCORDION BODY ========================================================= */
 .accordion-body {
     padding: 10px 55px 45px 108px;
     background: #ffffff;
     color: #333333;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 17px;
     line-height: 1.7;
}
/* ========================================================= BODY MAX WIDTH ========================================================= */
 .accordion-body-inner {
     max-width: 1050px;
}
/* ========================================================= BODY PARAGRAPHS ========================================================= */
 .accordion-body p {
     margin: 0 0 18px;
}
/* ========================================================= BODY LISTS ========================================================= */
 .accordion-body ul {
     margin: 15px 0 0;
     padding-left: 24px;
}
 .accordion-body li {
     margin-bottom: 7px;
}
/* ========================================================= BODY HEADINGS ========================================================= */
 .accordion-body h2, .accordion-body h3 {
     color: #123f7a;
     font-family: "Oswald", sans-serif;
     font-weight: 700;
     line-height: 1.2;
}
 .accordion-body h2 {
     margin-top: 30px;
     margin-bottom: 12px;
     font-size: 30px;
}
 .accordion-body h3 {
     margin-top: 25px;
     margin-bottom: 10px;
     font-size: 24px;
}
/* ========================================================= LINKS ========================================================= */
 .accordion-body a {
     color: #2862b2;
}
/* ========================================================= TABLET ========================================================= */
 @media (max-width: 900px) {
     .steps-container {
         padding: 0 25px;
    }
     .step-sequence {
         height: 185px;
    }
     .sequence-button {
         height: 185px;
    }
     .sequence-icon {
         width: 125px;
         height: 125px;
    }
    /* Move line with the graphics on tablet */
     .sequence-line, .sequence-progress {
         top: 55%;
    }
     .application-steps {
         padding: 45px 25px 60px;
    }
     .accordion-body {
         padding-left: 95px;
         padding-right: 35px;
    }
}
/* ========================================================= MOBILE ========================================================= */
 @media (max-width: 600px) {
     .steps-section {
         padding: 20px 0 35px;
    }
     .steps-container {
         padding: 0 15px;
    }
     .steps-heading {
         margin-bottom: 15px;
    }
     .steps-heading h1 {
         font-size: 42px;
         letter-spacing: -0.5px;
    }
     .steps-heading p {
         font-size: 15px;
         line-height: 1.45;
    }
    /* ===================================================== MOBILE STEP GRAPHICS ===================================================== */
     .step-sequence {
         height: 125px;
    }
     .sequence-button {
         height: 125px;
    }
     .sequence-icon {
         width: 78px;
         height: 78px;
    }
    /* ===================================================== MOBILE INTERACTIVE LINE CENTERED WITH GRAPHICS ===================================================== */
     .sequence-line {
         left: 12.5%;
         right: 12.5%;
         top: 55%;
         bottom: auto;
         height: 3px;
    }
     .sequence-progress {
         left: 12.5%;
         top: 55%;
         bottom: auto;
         height: 3px;
    }
    /* ===================================================== MOBILE ACCORDION BACKGROUND ===================================================== */
     .application-steps {
         padding: 30px 12px 45px;
    }
    /* ===================================================== MOBILE CARDS ===================================================== */
     .application-step {
         margin-bottom: 10px;
         border-radius: 11px;
    }
    /* ===================================================== MOBILE ACCORDION HEADER ===================================================== */
     .accordion-header {
         min-height: 76px;
         gap: 13px;
         padding: 12px 14px 12px 16px;
         border-left-width: 4px;
         border-radius: 11px;
    }
    /* ===================================================== MOBILE NUMBER ===================================================== */
     .accordion-number {
         width: 46px;
         height: 46px;
         font-family: "Oswald", sans-serif;
         font-size: 20px;
         font-weight: 700;
    }
    /* ===================================================== MOBILE TITLE ===================================================== */
     .accordion-title {
         font-family: "Oswald", sans-serif;
         font-size: 19px;
         font-weight: 700;
         line-height: 1.1;
    }
    /* ===================================================== MOBILE PLUS ===================================================== */
     .accordion-toggle {
         width: 34px;
         height: 34px;
         font-size: 21px;
    }
    /* ===================================================== MOBILE BODY ===================================================== */
     .accordion-body {
         padding: 8px 20px 30px 60px;
         font-size: 16px;
         line-height: 1.65;
    }
     .accordion-body h2 {
         font-family: "Oswald", sans-serif;
         font-size: 22px;
    }
     .accordion-body h3 {
         font-family: "Oswald", sans-serif;
         font-size: 19px;
    }
}
/* ========================================================= VERY SMALL PHONES ========================================================= */
 @media (max-width: 400px) {
     .steps-heading h1 {
         font-size: 36px;
    }
     .sequence-icon {
         width: 68px;
         height: 68px;
    }
     .step-sequence {
         height: 115px;
    }
     .sequence-button {
         height: 115px;
    }
    /* Keep the line centered with smaller graphics */
     .sequence-line, .sequence-progress {
         top: 55%;
    }
     .accordion-title {
         font-family: "Oswald", sans-serif;
         font-size: 17px;
         font-weight: 700;
    }
     .accordion-number {
         width: 42px;
         height: 42px;
         font-family: "Oswald", sans-serif;
         font-size: 18px;
         font-weight: 700;
    }
     .accordion-body {
         padding-left: 20px;
         padding-right: 20px;
    }
}