@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

html {
    height: 100%;
    font-family: "Inter", sans-serif;
    box-sizing: border-box;
}

body {height: 100%;}

h1 {font-size: 46px;color: white;font-weight: 900;line-height: 1.2;}
h2 {font-size: 40px;color: #00569c;font-weight: 700;line-height: 1.2;}
h3 {font-size: 30px;color: #00569c;font-weight: 500;line-height: 1.2;}

a {color: #b97902;text-decoration: none;}
a:hover {color: orange;}

.customInput {height: 35px;border: 1px solid lightgrey;border-radius: 4px;}
.customInput.error {border: 1px solid #ce5959;}

.modalButtonsHolder, .closeButtonHolder {display: none;justify-content: center;width: 100%;gap: 15px;margin-top: 25px;}
.modalButtonsHolder.show, .closeButtonHolder.show {display: flex;}
.closeButtonHolder {flex-direction: column;align-items: center;align-content: center;}
.customButton {display: inline-block;padding: 15px 25px;border-radius: 6px;font-size: 14px;text-transform: uppercase;cursor: pointer;font-weight: 600;}
.customButton.orange {background: orange;color: white;}
.customButton.orange:hover {background: #b97902;transition: .4s;}
.customButton.red {background: #ce5959;color: white;}
.customButton.red:hover {background: #964141;transition: .4s;}
.customButton.green {background: forestgreen;color: white;}
.customButton.green:hover {background: #145414;transition: .4s;}

/* Modal Window */

.modalMask {position: absolute;left:0; top: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.4);z-index: -2;visibility: hidden;opacity: 0;}
.modalMask.show {position: fixed;z-index: 10;visibility: visible;opacity: 1;transition: .4s;}
.modalWindow {position: absolute;width: 500px;height: 410px;background: white;left: 50%;top: 10vh;z-index: -1;visibility: hidden;opacity: 0;border-radius: 8px;transform: translateX(-50%)}
.modalWindow.show {z-index: 11;visibility: visible;opacity: 1;transition: .4s;box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.15);}
.modalContent {padding: 25px 35px;}
.modalTitle {width: 100%;text-align: center;font-size: 16px;text-transform: uppercase;font-weight: 600;margin-bottom: 25px;}
.modalContent > .modalRow {display: flex;gap: 15px;height: 45px;align-items: center;}
.modalRow > .inputLabel {width: 150px;font-weight: 600;font-size: 16px;text-align: right;}


.mainWrapper {display: grid;min-height: 100%;grid-template-rows: 1fr auto;}

.insideWrapper {position: relative;width: 100%;max-width:1440px;margin:0 auto;z-index: 1;}
.headBgImageHolder {position: absolute;width:100%;max-width: 1920px;margin:0 auto;min-height: 800px;z-index: 0;left: 50%;transform: translateX(-50%);}
.dimmerMask {position: absolute;left:0; top:0;background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 1));width: 100%;height: 100%;z-index: 0;}

.logoHolder {position: absolute;max-width: 258px;padding-top: 5px;left: 0;}
.logoHolder > a > img {width: 100%;}

.headerHolder {position: relative;display: flex;gap: 50px;background: rgba(255, 255, 255, 0.6);justify-content: center;height: 80px;border-bottom-right-radius: 6px;border-bottom-left-radius: 6px;
                box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.15);}
.headerHolder > ul {display: flex;flex-direction: row;gap: 25px;}
.headerHolder > ul > a {font-size: 14px;text-decoration: none;text-transform: uppercase;color: #00569c;font-weight: 700;}
.headerHolder > ul > a > li {padding: 33px 10px;}
.headerHolder > ul > a:hover > li {background: white;transition: .4s;}
.headerHolder > ul > a:last-child > li {position:absolute;right: 0;background: orange;border-bottom-right-radius: 6px;padding-bottom: 29px;}
.headerHolder > ul > a:last-child:hover > li {background: #9f6803;transition: .4s;}
.headerHolder > ul > a:last-child {color: white;font-weight: 900;font-size: 18px;}

.topFBIcon {position: absolute;right: 200px;top: calc(50% - 17px);}

.bannerTextHolder {width: 100%;text-align: center;margin-top: 120px;}

.heroText {background: #00569c;width: 100%;max-width: 400px;text-align: center;color: white;border-radius: 6px;margin: 80px auto;line-height: 1.5;box-shadow: 0 2px 18px 0 rgba(0,0,0,0.15);}
.heroText > .heroTextContent {padding: 25px 35px;font-size: 18px;font-weight: 600;}

.buttonHolder {width: 100%;text-align: center;}
.bronButton {display: inline-flex;background: orange;padding:15px 25px;border-radius: 6px;text-transform: uppercase;font-weight: 900;color: white;cursor: pointer;align-items: center;gap:5px;}
.bronButton:hover {background: #9f6803;transition: .4s;}
.bronButton > .icon {width: 25px;height: 25px;}

.verticalLine {height: 50px;width: 2px;background-color: black;margin:20px auto;}

.pageFooter { background-color: #00569c;color: #fff; padding: 20px;font-weight: 800;}
.footerContent {display: flex;justify-content: space-between;align-items: center;}
.footerContent .emailIcon  {position: relative;color:white;text-decoration: none;font-size: 14px;margin-right: 25px;}
.footerContent .emailIcon:hover  {text-decoration: underline;}
.footerContent .emailIcon:before  {position: absolute;content: '';display: inline-block;width: 24px;height:24px;background: url('../images/icons/email.svg') no-repeat;left:-35px;}
.middleSide {font-size: 14px;}
.middleSide > a {color:white;}
.middleSide > a:hover {color: #b97902;text-decoration: underline;transition: .4s;}

.footerContent .phoneIcon  {position: relative;color:white;text-decoration: none;font-size: 14px;margin-right: 45px;}
.footerContent .phoneIcon:before  {position: absolute;content: '';display: inline-block;width: 24px;height:24px;background: url('../images/icons/phone2.svg') no-repeat;left:-25px;}

.footerContent .pinIcon {position: relative;color:white;text-decoration: none;font-size: 14px;margin-right: 50px;}
.footerContent .pinIcon:before {position: absolute;content: '';display: inline-block;width: 24px;height:24px;background: url('../images/icons/pin.svg') no-repeat;left:-30px;top:-3px;}

.pageCenter {width: 100%;max-width: 1440px;margin:0 auto;}

.firstPageGalleryHolder {display: flex;width: 100%;max-width: 1440px;gap:25px;margin:50px auto;justify-content: center;flex-wrap: wrap;}
.firstPageGalleryHolder > .oneImage {background: white;padding:25px 25px;border-radius: 8px;width: 340px;min-height: 100px;box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.15);}
.firstPageGalleryHolder > .oneImage > img {width: 100%;border-radius: 8px;}

/* Mobile menu */

.mobile-trigger {display: none;}
.mobile-trigger > .icon {position: absolute;right:25px;top: 15px;cursor: pointer;}
.menuStripe {width: 30px;height:5px;background: #00569c;margin-bottom: 5px;}

.mobile-nav {position: absolute;top: -100vh;left:0;background: white;height: 0;width:100%;transition: .4s;}
.mobile-nav.opened {position: fixed;top: 0;left:0;background: white;height: 100vh;transition: .4s;}
.mobile-nav > .close {position: absolute;width: 24px;height:24px;right: 25px;top:15px;}
.mobile-nav > .close > img {width: 100%;}
.mobile-nav > .menu {text-align: center;}
.mobile-nav > .menu {padding-top: 10vh;}
.mobile-nav > .menu > li > a {font-size: 20px;text-transform: uppercase;line-height: 2;color: #00569c;font-weight: 700;}
.mobile-nav > .menu > li:last-child {display: inline-block;background: orange;padding: 10px 25px;border-radius: 6px;margin-top: 25px;}
.mobile-nav > .menu > li:last-child > a {color: white;}

@media all and (max-width: 1090px) {
    .headerHolder > ul {gap: 5px;}
}
@media all and (max-width: 990px) {
    .logoHolder {padding-top: 12px;max-width: 185px;}
    .footerContent {flex-direction: column;gap: 15px;}
}

@media all and (max-width: 800px) {
    .headerHolder {height: 55px;}
    .headerHolder > ul {display: none;}
    .mobile-trigger {display: block;}

    .logoHolder {padding-top: 2px;}
    .topFBIcon {right: 10%;}
}

@media all and (max-width: 600px) {
    .heroText {width: 95%;margin: 50px auto;}
    .heroText > .heroTextContent {padding: 20px 15px;}
    .bannerTextHolder {margin-top: 50px;}

    .topFBIcon {right: 20%;}
}

@media all and (max-width: 500px) {
    .footerContent > .rightSide {display: flex;flex-direction: column;gap: 15px;align-items: center;}
    .footerContent .phoneIcon {margin-right: 0;}
    .footerContent .phoneIcon:before {top: -5px;}

    .footerContent .emailIcon:before {top: -5px;}

    .footerContent .pinIcon {margin-right: 0;}

    .modalWindow {width: 95%;height: auto;}
    .modalContent {padding: 25px 10px;}

    .headBgImageHolder {background-position-y: -95px !important;}
}

@media all and (max-width: 450px) {
    h1 {font-size: 40px;}
    h2 {font-size: 25px;}
    h3 {font-size: 20px;}
}