/* ==========================================================================
     Project:     Savannah Tech Landing Page
     Date:        04/15/24 - File created	
     Created by:  Third Wave Digital (www.thirdwavedigital.com)
========================================================================== */

:root {

    --white: #FFFFFF;
    --body: #000;
    --warm-black: #242122;
    --blue: #007ab9;
    --dark-blue: #003C64;
    --light-grey: #F2F2F2;
    --grey: #DDDDDD; 
    --dark-grey: #D9D9D9;

}

/* ==========================================================================
    Typograpy
========================================================================== */

body {font-family: "Inter", sans-serif; color: var(--body); background: var(--white);}
h1,h2,.h1,.h2,h3,.h3{font-family: "Montserrat", sans-serif; margin-bottom: 2rem; font-weight: 700; letter-spacing: 1px; color: var(--white);}
h4,.h4,h5,.h5,h6,.h6{font-family: "Aleo", sans-serif; font-weight: 800;}

/* ==========================================================================
     Main Layout
========================================================================== */ 

html {scroll-behavior: smooth;}

/* Skip */
.skip {position:absolute;top:-1000px;left:15px;width:auto;height:auto;text-align:center;overflow:hidden;transition:.25s;background:var(--blue); width:auto;height:auto;overflow:visible;padding:10px;color:var(--white);font-weight:600;font-size:.875rem;z-index:99;text-decoration:underline}
.skip:active,.skip:focus,.skip:hover{left:15px;top:15px;color: var(--white);}

/* Header */
header img {position: absolute; top: 20px; left: 15px; z-index: 1;}

/* Hero */
.hero {height: 725px; position: relative;}
.hero img {object-position: 100% 25%;}
.hero .caption {max-width: 725px;margin-top: 100px}
.hero .caption h2 {color: var(--blue);}
.hero p {color: var(--white);}

/* Footer */
footer {background-color: var(--dark-blue); padding-top: 8rem; color: var(--white);}
footer p, address {font-size: 0.875rem;}
footer p.copyright {font-size: 0.75rem;}
footer h6 {font-size: 1.125rem;}

/* ==========================================================================
     Components
========================================================================== */ 

/* Images */
img {max-width: 100%; height: auto}
p:has(img:only-child) {margin: 0px}
.img-fit {object-fit: cover; width: 100%; height: 100%;}
.img-bg {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit:cover; z-index: -1; object-position: 100% 50%;}
.aspect-ratio-16-9 {aspect-ratio: 16 / 9; object-fit: cover;width: 100%; display:block;}
.aspect-ratio-4-3 {aspect-ratio: 4 / 3; object-fit: cover;width: 100%; display:block;}

/* Text */
.text-dark-blue {color: var(--dark-blue);}
.text-body {color: var(--body);}
.text-blue {color: var(--blue);}

/* Backgrounds */
.bg-light-grey {background-color: var(--light-grey);}
.bg-dark-blue {background-color: var(--dark-blue); z-index: -2;} 

/* Borders */
.border-grey {border: 2px solid var(--grey);}

/* Buttons */
.btn-blue, .btn-white {border:none; font-family: "Montserrat", sans-serif; font-size: .875rem; text-decoration: none; font-weight: 700; text-transform: uppercase; padding: 5px 40px; border-radius: 0px; margin: 0px; transition: all 250ms ease;}
.btn-lg {padding: 10px 30px;}

.btn-blue {background-color: var(--dark-blue); color: var(--white);}
.btn-blue:focus, .btn-blue:hover {background-color: var(--blue); color: var(--white);} 

.btn-white {background-color: var(--white); color: var(--blue); padding: 10px 30px;}
.btn-white:focus, .btn-white:hover {background-color: var(--blue); color: var(--white) !important;} 


/* Horizotonal Line */
hr {border-top: 2px solid rgba(217, 217, 217, 1); margin-top: 2rem; margin-bottom: 2rem;}

/* Line Height */
.leading-loose {line-height: 2;}

/* Featured Programs section */
.featured-programs {position: relative; overflow: hidden;}
.featured-programs::before {content: ""; position: absolute; inset: 0; background-color: var(--dark-blue); opacity: 0.9; z-index: 0;}
.featured-programs .container {position: relative; z-index: 1;}

/* Financial support section */
.financial-support {position: relative;margin-bottom: -6rem;}
.financial-support .content-row {position: relative; overflow: hidden; border: 6px solid var(--white); min-height: 700px}
.financial-support .content-row .img-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;}
.financial-support .content-row::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(0,0,0,.1), rgba(0,0,0,0.8)); z-index: 1;}
.financial-support .content-row > *:not(.img-bg) {position: relative; z-index: 2;}

/* Slideshows */
.section-slideshow .item{transition: transform 250ms ease;position: relative;z-index:0}
.section-slideshow .item {padding: 5px;}
.section-slideshow .item::after  {transition: opacity 250ms ease; opacity: 0; content:""; top: 5px; left: 5px; right: 5px; bottom: 5px; position: absolute; background: rgba(0, 122, 185,.5);display:block;z-index: 1}
.section-slideshow .item:hover::after {opacity: 1 }

.program-slideshow .slick-dots {position: absolute; top: 0; bottom: 0; left: 15px; transform: translateX(-50%); display: flex !important; flex-direction: column; justify-content: center; align-items: center; margin: 0; padding: 0;}
.program-images img {padding: 15px;}
.program-images img:hover {transform: scale(1.10); transition: transform 250ms ease}
.program-slideshow img {height: 325px; width: 100%;}

/* Slick Slideshow */
.slick-track {display: flex !important;}
.slick-slide {height: inherit !important}
.slick-dots {position: relative; list-style:none; display: flex; justify-content: center;padding: 0px;}
.slick-dots li {margin: 0px 2px}
.slick-dots button {width: 7.5px; height: 7.5px; padding: 0px; background: var(--white); opacity: .25; border:none; border-radius: 50%}
.slick-dots .slick-active button {opacity: 1;}

.slick-prev:before, .slick-next:before {display: none;}
.custom-arrow {width: 30px; height: 30px; border-radius: 30px; border: 1.5px solid transparent; color: var(--white); background: rgba(242, 242, 242, 0.33); display: flex; align-items: center; justify-content: center; transition: all 250ms ease; z-index: 3; position: relative;}
.custom-arrow span {font-size: .813rem; line-height: 1;}
.custom-arrow:hover {background-color: var(--blue); border-color: var(--white);}

/* Form */
.form-wrapper {position: relative; z-index:1;}
.form-img {position: relative;height: 100%;}
.form-img::after {content: ""; position: absolute; inset: 0; background-color: rgba(0, 60, 100, 0.72); z-index: 1;}
input.form-control {border-radius: 12px; border: 2px solid var(--dark-grey);}
select.form-control.custom-select {border-radius: 12px; border: 2px solid var(--dark-grey);}
.form-check {font-size: .875rem}

/* Quote Block */
.quote-block-wrapper {max-width: 850px; display: flex; justify-self: center; border: 1px solid var(--grey);}
.quote-block-right { position: relative; background-color: var(--dark-blue); overflow: hidden;}
.quote-block-right::before { content: ""; position: absolute; inset: 0; background: url('/img/savannah-tech-s.webp') center/60% no-repeat; opacity: 0.25; z-index: 1;}
.quote-text {position: relative; z-index: 2;}

/* Thank You Page */
body.thank-you footer {padding-top: 1rem;}
body.thank-you a {text-decoration: none;}

.hero-thanks {height: 475px; position: relative;}
.hero-thanks img {object-position: 100% 25%;}
.hero-thanks .caption {max-width: 800px;margin-top: 100px}
.hero-thanks p {color: var(--white);}
.hero-thanks a {color: var(--blue);}

/* ==========================================================================
     Media Queries
========================================================================== */

@media (min-width: 0px) {
    /* Hero */
    .hero h1 {font-size: 3rem;}
    .hero h2 {font-size: 2rem;}
    
    /* Form */
    .form-wrapper {margin-top: -150px}
    .form-wrapper .form-img {border-top: 6px solid var(--white); border-left: 6px solid var(--white); border-right: 6px solid var(--white);}
    form {border-left: 6px solid var(--white); border-right: 6px solid var(--white); border-bottom: 6px solid var(--white); border-top: none}
    .form-img img {height: 250px; object-position: 50% 20%}

    /* Financial Support */
    .financial-support .content-row .img-bg {object-position: 30% 50%;}
}

@media (min-width: 768px) {
    /* Hero */
    .hero h1 {font-size: 4.125rem;}

    /* Form */
    form {border-top: 6px solid var(--white); border-right: 6px solid var(--white); border-bottom: 6px solid var(--white);  border-left: none;}
    .form-wrapper .form-img {border-top: 6px solid var(--white); border-left: 6px solid var(--white); border-bottom: 6px solid var(--white); border-right: none}
    .form-img img {height: 100%; object-position: 50% 50%;}
}

@media (min-width: 992px) {
    /* Hero */
    .hero h1 {font-size: 4.125rem;}
    .hero h2 {font-size: 2.5rem;}
    
    /* Financial Support */
    .financial-support .content-row .img-bg {height: 100%; object-position: 50% 50%;}
}

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important;scroll-behavior: auto !important;transition: none !important}
}