@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
     font-family: "Barlow", sans-serif;
}

body {
     margin: 0;
     padding: 0;
}

a {
     text-decoration: none;
}

ul,
li {
     margin: 0;
     padding: 0;
     list-style-type: none;
}

/*=== site header ===*/
header {
     background-color: #002f50;
     padding: 10px 0;
}

.navbar .navbar-nav .nav-link {
     font-size: 15px;
     font-weight: 600;
     color: #fff;
}

.AfterHeader {
     background-color: #002f50;
     padding: 10px 0 30px 0;
}

.AfterHeader ul li {
     font-size: 13px;
     color: #9ebdd3;
     font-weight: bold;
}

.InnerSection {
     padding: 67px 0;
}

.sectionDetail h2 {
     font-size: 40px;
     font-weight: bold;
     color: #002f50;
}

.sectionDetail p {
     font-size: 16px;
     color: #002f50;
     font-weight: normal;
}

.btn-outline-primary {
     font-size: 14px;
     font-weight: 400;
     letter-spacing: 1.4px;
     transition: all 0.2s ease, visibility 0s;
     background: transparent;
     border: 1px solid #002F50;
     color: #002F50;
     border-radius: 2px;
     font-weight: 400;
     height: 40px;
     min-width: 142px;
     display: inline-flex;
     align-items: center;
     width: auto;
     padding: 5px 20px;
     justify-content: center;
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary:focus {
     text-decoration: underline;
     background: transparent;
     border: 1px solid #002F50;
     color: #002F50;
}

.btn-primary {
     font-size: 14px;
     font-weight: 400;
     letter-spacing: 1.4px;
     transition: all 0.2s ease, visibility 0s;
     background: #002F50;
     border: 0px solid #3E627C;
     border-radius: 2px;
     font-weight: 400;
     height: 40px;
     min-width: 142px;
     display: inline-flex;
     align-items: center;
     width: auto;
     justify-content: center;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
     background-color: #7090A8;
}

.feature {
     padding: 25px 0;
     position: relative;
     background-color: #FBFBFB;
     position: relative;
}

.feature:after {
     position: absolute;
     right: 5vw;
     top: 0;
     bottom: 0;
     content: "";
     width: 45%;
     height: 100%;
     background-color: #D7DEE2;
}

.feature .container {
     position: relative;
     z-index: 999;
}

.featureCard h3 {
     font-size: 20px;
     font-weight: 400;
     color: #002F50;
     line-height: 28px;
}

.featureCard p {
     font-size: 16px;
     font-weight: 400;
     color: #002F50;
     line-height: 24px;
}

.serviceCardFull {
     background-color: hsla(0, 0%, 100%, 0.4);
     padding: 45px 15px;
}

.withImg {
     background-image: url(../images/bgImg.jpg);
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
}

footer {
     padding: 66px 0 35px 0;
     background-color: #002f50;
}

.siteFooter .sectionDetail h2 {
     color: #fff;
     font-size: 56px;
     font-weight: bold;
}

.footerList {
     font-size: 26px;
     font-weight: 400;
     color: #fff;
}

.footerList a,
.footerList div {
     font-size: 16px;
     font-weight: 400;
     color: #fff;
}

.footerCpy p {
     font-size: 14px;
     line-height: 22px;
     color: #fff;
     font-weight: 500;
}

.footerFlag p {
     font-size: 9px;
     line-height: 16px;
     color: #fff;
     font-weight: 500;
}

.contactForm label.form-label {
     font-size: 16px;
     color: #002F50;
     font-weight: 500;
     margin: 0px 0px 9px;
     line-height: 16px;
}

.contactForm .form-control {
     height: 37px;
     padding: 3px 3px 3px 10px;
     border: 1px solid #002f50;
     border-radius: 0;
     box-shadow: none !important;
     outline: none !important;
     font-size: 16px;
     color: #002F50;
     font-weight: 400;
}

.contactForm .form-control:hover,
.contactForm .form-control:active,
.contactForm .form-control:focus {
     border: 2px solid #002f50;
}

.contactForm .form-check-input[type=checkbox] {
     border-radius: 0;
     border: 1px solid #002f50;
     outline: none !important;
     box-shadow: none !important;
}

.contactForm .form-check-input[type=checkbox]:checked {
     background-color: #002f50 !important;
}

.completeDesignCard {
     border: 1px solid #000;
     background: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: auto 0px auto -60px;
     padding: 30px 80px;
     width: 100%;
     height: calc(100% - 80px);
}

iframe {
     width: 100%;
     height: 100vh;
     border: none;
}

@media (min-width: 1400px) {

     .container,
     .container-lg,
     .container-md,
     .container-sm,
     .container-xl,
     .container-xxl {
          max-width: 1520px;
     }
}