body{font-size: 16px; font-family: "Titillium Web", sans-serif; font-weight: 400; font-style: normal;}

img{max-width: 100%;}

.container{width: 1200px; margin: 0 auto; max-width: calc(100vw - 100px);}
.container.slim{width: 980px;}

.btn{padding: 0 10px; text-transform: uppercase; text-decoration: none; color: #000; background-color: #C1B49A; white-space: nowrap;}

.main-header{position: absolute; top: 0; left: 0; width: 100%; background-color: rgba(255,255,255,0.6);}
.main-header-content{display: flex; align-items: center;}
.main-header-content .logo{margin: 20px 0; max-width: 360px;}

.header-cta{margin-left: auto;}
.header-cta .btn{font-size: 1.313rem; font-weight: 900;}

.main-footer-content{display: flex; align-items: center; gap: 20px;}
.main-footer-content .logo{margin: 20px 0; max-width: 280px;}
.main-footer-content .highlight{color: #006838;}

.hero{background: url(../images/Shaheen-Skyline-2.jpg) 50% 50% no-repeat; background-size: cover; min-height: 80vh; display: flex; align-items: center;}
.hero .overlay{background-color: rgba(0,0,0,0.6); color: #fff; font-size: 2rem; font-weight: 700; text-align: center; margin-top: 100px; padding: 20px 40px 20px 100px;}
.hero .overlay .large{font-size: 2.5rem; font-weight: 900;}
.hero .overlay .counter{font-size: 5.375rem;}

.title-line{background-color: #C1B49A; text-align: center; padding: 20px; font-size: 1.875rem; line-height: 1; color: #fff;}
.title-line-content{display: flex; flex-flow: column;}
.title-prom{font-size: 6.5rem; font-weight: 900; line-height: 1; position: relative; margin: 0 auto; padding: 0 100px;}
.title-prom:before, .title-prom:after{content: ''; position: absolute; top: calc(50% - 5px); height: 10px; width: 70px; background-color: #fff;}
.title-prom:before{left: 0px;}
.title-prom:after{right: 0px;}
.title-prom span:before, .title-prom span:after{content: ''; position: absolute; top: calc(50% - 15px); height: 30px; width: 10px; background-color: #fff;}
.title-prom span:before{left: 70px;}
.title-prom span:after{right: 70px;}

.cta-line{padding: 30px; text-align: center;}
.cta-line.black{background-color: #000;}
.cta-line.green{background-color: #006838;}
.cta-line .btn{font-size: 1.875rem; font-weight: 700; padding: 0 20px;}

.banner{position: relative; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; display: flex;}
.banner.img-1{background-image: url(../images/Shaheen-Building-1.jpg); margin-bottom: 10px;}
.banner.img-2{background-image: url(../images/Shaheen-Building-2.jpg);}

.banner .container{position: relative;}

.banner .overlay{background: rgba(0,0,0,0.4); margin: 100px 0; padding: 30px; font-size: 1.875rem; text-align: center; width: 50%; color: #fff; text-shadow: 6px 6px 6px rgba(0,0,0,0.6);}
.banner .overlay:after{content: ''; position: absolute; top: 0; bottom: 0; height: 100%; width: 138px; background: url(../images/S-Pattern.png) 0 0 repeat-y; opacity: 0.5;}
.banner.overlay-right .overlay{margin-left: auto;}
.banner.overlay-left .overlay:after{right: 0;}
.banner.overlay-right .overlay:after{left: 0;}


@media (max-width: 980px) {
    .main-footer-content{flex-flow: column; gap: 0; text-align: center;}

    .title-prom{font-size: 4.5rem;}
}

@media (max-width: 768px) {
    .main-header-content{flex-flow: column;}
    .header-cta{margin: 0 auto 20px;}
    .hero .overlay{width: 100%; margin-top: 140px; padding: 20px 40px; font-size: 1.25rem;}
    .hero .overlay .large{font-size: 1.5rem;}
    .hero .overlay .counter{font-size: 3.375rem;}
    .title-line{font-size: 1.5rem;}
    .title-prom{font-size: 3rem;}
    .cta-line .btn{font-size: 1.5rem;}
    .banner .overlay{width: calc( 100% - 60px); font-size: 1.5rem;}
    .banner .overlay:after{display: none;}
}

@media (max-width: 480px) {
    .title-prom{padding: 0;}
    .title-prom:before, .title-prom:after,
    .title-prom span:before, .title-prom span:after{display: none;}
}

/* Properties */
.header-relative .main-header{position: relative;}