/* CSS Document */

@font-face {
  font-family: nineFiveBlack;
  src: url(../../assets/fonts/Helvetica 95 Black.ttf);
}

@font-face {
  font-family: fiveFiveRoman;
  src: url(../../assets/fonts/Helvetica 55 Roman.ttf);
}

html {}

body {font-family: fiveFiveRoman, sans-serif; text-align: justify;}

.blue-bg {background-color: var(--downtown-blue);}

/*//////////////////////
Header                //
//////////////////////*/

.coming-soon-text {font-size: 30px; color: #fff; text-transform: uppercase; margin-top: 200px; margin-bottom: 200px; text-align: justify; text-justify: inter-character;}
.black {font-family: nineFiveBlack, sans-serif; font-weight: 900; font-size: 72px; line-height: 80px;}

/*//////////////////////
Nav                   //
//////////////////////*/

.navbar {background-color: #fff;}
.nav-link {color: var(--downtown-blue); text-transform: uppercase; font-weight: bold; padding: 1rem !important;}
.nav-link.active {color: var(--downtown-blue) !important; text-decoration: underline;}

#vision, #highlights, #qa, #news, #history, #contact, #larkins {scroll-margin-top: 169px;}

/*//////////////////////
Main Content          //
//////////////////////*/

/* Hero */
.hero {
  background: url(https://cdn.pompanobeachfl.gov/city/storage/images/downtown/homepage-bg-new.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center;
  text-align: center;
  margin-top: -1px;
  padding: 315px 0;
  color: #fff;}

.moving {text-transform: uppercase; font-size: 3.5rem; letter-spacing: 2px;}
.forward {font-family: nineFiveBlack, sans-serif; text-transform: uppercase; font-size: 10rem; line-height: 100px; font-weight: 900;;}

.blue-bar {width: 100%; height:120px; background-color: var(--downtown-blue); color: #fff; text-transform: uppercase; font-size: 2rem; text-align: center; line-height: 120px; font-weight: 900; letter-spacing: 1px;}

/* Patience */
.patience {text-align: center; /*background-image: url(https://cdn.pompanobeachfl.gov/city/storage/images/downtown/lot-of-progress-bg.png); background-repeat: no-repeat; background-size: 25% auto;*/}
.patience-img-container {background-image: url(https://cdn.pompanobeachfl.gov/city/storage/images/downtown/lot-of-progress-bg-2.png); background-repeat: no-repeat; background-size: cover; background-position: top; background-position: right;}
.patience-center {padding: 100px 0;}
.patience-side {}
.section-title {font-size: 32px;}
.green-bold {color: var(--downtown-green); font-weight: 900;}
.green-bg {background-color: var(--downtown-green); color: #fff; display: inline-block; text-transform: uppercase; padding:2px 10px; letter-spacing: 4px; font-size: 24px;}

/* Vision */
.vision {background-color: var(--downtown-yellow); color: #fff;}
.vision-title {background-image: url(https://cdn.pompanobeachfl.gov/city/storage/images/downtown/vision-faded-text.png); background-repeat: no-repeat;}
.vision-title img {margin-top: 85px; height: 75px; width: 290px;}
.white-bar {width: 100%; height: 75px; background-color: #fff; display: block; margin-top: 85px;}
.vision-title h3 {margin-top: -75px; line-height: 75px;margin-right: 90px; color: var(--downtown-yellow); text-transform: uppercase; font-size: 48px; font-weight: 900; font-family: nineFiveBlack, sans-serif; letter-spacing: -3px;}
.vision-img-container {background-image: url(https://cdn.pompanobeachfl.gov/city/storage/images/downtown/vision-bg.png); background-repeat: no-repeat; background-size: cover; background-position: top; background-position: left;}
.vision-text {margin-bottom: 50px;}

/* Updates */
.construction-updates {background-color: var(--downtown-pink); color: #fff; padding: 50px 0;}
.construction-updates .section-title {margin-bottom: 30px;}

/* Stats */
.coin-hand {background-image: url(https://cdn.pompanobeachfl.gov/city/storage/images/downtown/coin-hand-icon-3.png); background-size: contain; background-repeat: no-repeat; background-position: center;}
.tree-icon {background-image: url(https://cdn.pompanobeachfl.gov/city/storage/images/downtown/tree-icon_2024-07-22-153919.png); background-size: contain; background-repeat: no-repeat; background-position: center;}
.money-icon {background-image: url(https://cdn.pompanobeachfl.gov/city/storage/images/downtown/money-bag-icon_2024-07-22-153915.png); background-size: contain; background-repeat: no-repeat; background-position: center;}
.calc-icon {background-image: url(https://cdn.pompanobeachfl.gov/city/storage/images/downtown/calculator-icon_2024-07-22-153919.png); background-size: contain; background-repeat: no-repeat; background-position: center;}
.building-icon {background-image: url(https://cdn.pompanobeachfl.gov/city/storage/images/downtown/skyline-icon_2024-07-22-153914.png); background-size: contain; background-repeat: no-repeat; background-position: center;}
.percent-icon {background-image: url(https://cdn.pompanobeachfl.gov/city/storage/images/downtown/tax-revenue-icon_2024-07-22-153920.png); background-size: contain; background-repeat: no-repeat; background-position: center;}
.hat-icon {background-image: url(https://cdn.pompanobeachfl.gov/city/storage/images/downtown/hard-hat-icon_2024-07-22-153917.png); background-size: contain; background-repeat: no-repeat; background-position: center;}
.cycle-icon {background-image: url(https://cdn.pompanobeachfl.gov/city/storage/images/downtown/cash-flow-icon_2024-07-22-153918.png); background-size: contain; background-repeat: no-repeat; background-position: center;}

.stats {background-color: var(--downtown-green); color: #fff; padding: 50px 0; text-transform: uppercase;}
.stat-box {height: 150px; margin:0px 0 50px 0; }
.stat-box p:first-child {padding-top: 50px; margin-bottom: 0px;}
.stat-box p:last-child {font-size: 14px;}
.stats p b {font-size: 36px; align-items: center; }

/* Q&A */
.qa-img {background-size: cover; width: 100%;}
.questions {margin: 75px 0;}
.qa-title {background-image: url(https://cdn.pompanobeachfl.gov/city/storage/images/downtown/orange-chevron-qa.png); background-repeat: no-repeat; height: 75px; line-height: 75px; padding: 0 0 0px 50px; color: #fff; font-size: 48px; font-weight: 900; margin-bottom: 20px;}
.qa-title .small {font-size: 24px;}

/* Q&A Form */
.q-form {padding: 50px 0; color:#fff;}
.q-form input {margin-bottom: 15px; width: 100%}

/* History Slider */
.slider-overlay {position: absolute; width: 50%; height: 80%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-color: rgba(34,154,191,0.85); z-index: 10;}
.slider-overlay img {margin-top: 85px;}
.slider-overlay h3 {margin-top: -65px; color: var(--downtown-blue); text-transform: uppercase; font-size: 48px; font-weight: 900; letter-spacing: -3px;}
.carousel-item img {max-height: 700px; object-fit: cover;}
.carousel-caption {z-index: 11; top: 250px; width: 50%; left: 0; padding-right: 19.66%;}
.carousel-caption h4 {font-size: 36px; font-weight: bold;}

/* Highlights and Community Engagement*/
.highlights {padding: 100px 0; background-image: url(https://cdn.pompanobeachfl.gov/city/storage/images/downtown/highlights-faded-text.png); background-repeat: no-repeat; background-position: top; text-align: center;}
.highlights i {font-size: 5rem; color: var(--downtown-blue); margin-bottom: 2rem;}
.h-text {font-size: 20px; color: var(--downtown-blue);}
.h-row-1 {margin-bottom: 2rem;}
.highlights ul li {font-size: 18px; line-height: 30px;}
.community-engagement {margin-top: 100px;}
.learn-more {width: fit-content; text-transform: uppercase; color: #fff; margin: 0 auto; padding: .75rem 1.5rem !important;}
.circle-row {text-transform: uppercase;}
.circle {height: 100px ; width: 100px; border-radius: 50%; margin: 0 auto;}
.circle img {width: 60%; height: 60%; margin: 20%;}


/* Milestones */
.milestones {background-color: #000; color: #fff; text-transform: uppercase; text-align: center; padding: 50px 0;}
.milestones h3 {font-size: 48px; font-weight: 900;}
.timeline h4 {font-size: 36px;}

.timeline-middle {background: linear-gradient(#000, #000) no-repeat center/2px 100%;}
.fade-in {background: linear-gradient(#fff, #000) no-repeat center/2px 100%; height: 100px;}
.fade-out {background: linear-gradient(#000, #fff) no-repeat center/2px 100%; padding-bottom: 100px;}


.email-reports {background-color: var(--downtown-blue); color: #fff; padding: 50px 0;}
.email-reports .section-title {margin-bottom: 30px;}

/* Larkins */
.multi-line-title {width: 100%; height:auto; background-color: var(--downtown-blue); color: #fff; text-transform: uppercase; font-size: 2rem; text-align: center; font-weight: 900; letter-spacing: 1px; padding: 20px;}
.img-right {float:right; margin: 0 0 20px 20px; width:25%;}

/* News */
.article {color: #fff; text-decoration: none;}
.article:hover {text-decoration: underline;}

.table-container {display: table;  height: 100%;}
.text-bottom {display: table-cell; vertical-align: bottom; padding-left:30px;}
.article-one {display: flex; justify-content: flex-end;}
.article-one .text-bottom {padding: 0 30px 0 0;}

.text-lh {line-height: 36px;}

#contact {margin-top: 100px; margin-bottom: 100px;}
#contact h3 {font-size: 36px; font-weight: 900;}

.email-us {text-transform: uppercase; padding: 0 50px; color: #fff;}

/*//////////////////////
Buttons               //
//////////////////////*/

.accordion-item {border: 0px !important;}
.accordion-button {--bs-accordion-btn-padding-x: 50px;}
.accordion-button::after {
   margin-left: 0; order: -1; margin-right: 0.5em; border:4px solid var(--downtown-yellow); padding: 15px; border-radius: 5px;
   --bs-accordion-btn-icon-width: 32px;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23e1a800' class='bi bi-plus' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
   transition: all 0.5s; height: 40px; width: 40px;
}
.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23e1a800' class='bi bi-dash' viewBox='0 0 16 16'%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3E%3C/svg%3E");
}
.accordion-body {--bs-accordion-body-padding-x: 50px;}

.btn {padding: .75rem; font-weight: bold;}

/*//////////////////////
Forms                 //
//////////////////////*/

input {padding: 10px;}
.form-control {padding: .75rem;}

/*//////////////////////
Footer                //
//////////////////////*/

footer {background-color: #000;}
.copyright {text-transform: uppercase; font-weight: 200; color: #fff; margin-top: 30px;}

footer .nav-link {color: #fff; font-weight: 200; display: flex; flex-direction: row; align-items: center; height: 100%;}
footer .nav {height: 100%;}
footer .row {padding-top: 30px;}

.social-icon {width:25px; height: 25px;}

/*//////////////////////
Scaling               //
//////////////////////*/

@media (max-width: 1200px) {
    .moving {font-size: 3rem;}
    .forward {font-size: 8rem;}

    .blue-bar {font-size: 2rem; line-height: 120px;}

    .stat-box {height: 200px;}
}

@media (max-width: 992px) {
    .nav-link {text-align: center;}

    .hero {padding: 75px 0;}

    .moving {font-size: 2rem;}
    .forward {font-size: 6rem;}

    .blue-bar {font-size: 2rem; line-height: 40px; padding: 20px;}

    .stat-box {height: 150px;}

    .slider-overlay {width: 50%; height: 100%; margin: 0;}

    .carousel-caption {top: 200px;}
}

@media (max-width: 768px) {
    .moving {font-size: 2rem;}
    .forward {font-size: 6rem;}

    .blue-bar {font-size: 2rem; line-height: 40px; padding: 20px;}

    .patience-center {padding: 50px 15px;}

    .article-one {display: table-cell; vertical-align: bottom;}
    .article-one .text-bottom {padding: 0 0 0 30px;}

    .timeline-middle {background: none;}
    .circle {margin-bottom: 20px;}
    .fade-in {display: none;}
    .fade-out {background: none; padding: 0;}

    .footer-logo {padding: 0 25%;}

    .slider-overlay .white-bar {display: none;}
    .slider-overlay {width: 100%; height: 50%; bottom: 0;}
    .carousel-caption {top: unset; padding-left: 20px; padding-right: 20px; text-align: center; width: 100%;}
    .carousel-caption h4 {font-size: 24px; font-weight: bold; text-align: center;}

    .img-right {float:right; margin: 0 0 20px 0px; width:100%;}
}

@media (max-width: 576px) {
    .navbar-brand img {height: 100px; width: auto;}

    .hero {padding: 50px 0;}
    .moving {font-size: 1.5rem;}
    .forward {font-size: 4rem; line-height: 50px;}

    .blue-bar {font-size: 1.5rem; line-height: 30px; padding: 20px; height: auto;}
    .blue-bar p {margin-bottom: 0;}

    .timeline-text {padding: 0 20px;}

    .carousel-caption {top: 0;}
    .slider-overlay {width: 100%; height: 100%;}

}

@media (max-width: 400px) {
    .moving {font-size: 1rem; margin-bottom: 0;}
    .forward {font-size: 3rem; line-height: 50px;}
}