@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins: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');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css');

:root{
    --red: #9d172e;
    --navy: #253948;
    --light-blue: #66b1d1;
}

*{margin:0; padding:0; }
h1 {font-family:"Anton", sans-serif; font-size:60px; line-height:80px; font-weight:400;}
h2 {font-family:"Anton", sans-serif; font-size:40px; line-height:55px; font-weight:400; margin-bottom:10px; text-align:center; color: var(--light-blue);}
h3 {font-family:"Anton", sans-serif; font-size:28px; line-height:36px; word-break:keep-all; text-align: center; margin-bottom: 20px;}
p {font-size:18px; line-height: 30px; margin-bottom:15px; font-weight: 400;}

body{font-family:"Poppins", sans-serif; font-size: 22px; line-height:33px; overflow-x: hidden; font-weight: 400;}
header{display:block; text-align:center; position:fixed; top:0; width:100%; background:#fff; z-index:2; padding:10px 0;}
header a{text-align:center;}
.btn{display:inline; margin:0 auto; background:var(--light-blue); padding:5px 10px; border-radius:0px; border:none; transition:.3s all}
.btn{color:#fff; text-decoration:none;}
.btn:hover{background:#000; }
.buttons .btn{font-size:16px; margin:0 5px;}

.delayed-btn {
  opacity: 0;
  transform: translateY(10px) scale(0.95);
  transition: all 0.6s ease;
}
.delayed-btn.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.logo{max-width:300px;}
.main-content{margin-top:140px;}
/*.main-content{margin-top:100px;}*/
.width-wrap{max-width:1200px; margin:0 auto; width:90%;}

/* BANNER */
/*section.banner {overflow-y:auto;}*/
.banner {justify-content:center; position: relative; width:100%; max-width: 100%; flex-wrap:wrap; margin-bottom: 20px; /*background-color: #000;
background-image: url("images/banner.jpg"); min-height: 500px; background-size:cover; background-repeat:no-repeat; background-position:top right;*/}
.banner-text {position: absolute; bottom: -10%; padding: 5%; width:51%; box-sizing: border-box; margin-left:5%; text-align:center; text-shadow: 1px 1px 10px #333; background: var(--navy); border-bottom-right-radius: 40px;}
img.hero {width: 100%!important; height: auto;}
.banner-text h1 {color:#fff; text-transform: uppercase; text-align: left; text-shadow: 1px 1px 20px #0f1b25;}
.banner-text h2 {color: #fff; margin-bottom:0; background:none;}
.mobile-banner {display:none;}

/* INTRO */
.intro {margin:0 auto 0px auto; text-align:center; max-width:unset; width:100%; padding:40px 0px 20px 0px;}
.intro p {color:#000; font-size:21px; line-height:34px; margin-bottom: 10px;}

/* BODY ROWS */
section {max-width:1200px; margin:20px auto 0; width:90%; display:block;}
.smaller{font-size:26px;}
h2:has(.smaller) {line-height: 40px;}
ul li {font-size:18px; line-height:30px; margin-bottom:15px; list-style:none;}

/* section-01 */
.section-01 {background: #eaeaea; padding: 40px; border-bottom-right-radius: 40px; /* max-width: 1400px; */ margin-top: 0px; margin-bottom: 30px; float: left; width: 90%; max-width: 100%; box-sizing: border-box; margin-left: 5%;}
.stat {font-family:"Anton", sans-serif; font-size: 28px; text-transform: uppercase; font-weight: 600; color: var(--red);}
ul.stats {display: flex; list-style: none;}
ul.stats li {flex: 1; text-align: center; padding: 1% 3%; align-items: center; font-size: 20px; line-height: 34px;}
ul.stats li:nth-of-type(2) {border-right: 1px solid #c5c5c5; border-left: 1px solid #c5c5c5;}

ul.industries li {width: 16.6667%; float: left; text-align: center; padding: 1%; box-sizing: border-box; font-weight: bold; line-height: 24px;}
ul.industries .fa-solid {color: var(--red); font-size: 50px; padding-bottom: 10px; padding-top: 5px; transition: all ease-in-out .125s;}
ul.industries li:hover .fa-solid {padding-bottom: 15px; padding-top: 0px;}

/* section-02 */
.section-02 {background: #fff; padding: 40px 0px; max-width: 1400px;}
.section-02 h2 {margin-top: 30px; float: left; width: 100%;}
.section-02 ul {display:flex; flex-wrap:wrap; justify-content:space-between; padding:0px; margin-top: 30px;}
.section-02 p, .section-02 ul {padding:0 20px;}
ul.bullets li:before {content: "\f553"; font-family: "FontAwesome"; font-size: 22px; color: var(--red); display: inline-block; margin-right: 10px; float:left; margin-bottom: 1px;}
.section-02 ul.offset {width: 63%; margin: 30px auto;}
.section-02 ul.offset li {width: 47%;}
.section-02 h3 {width: 70%; margin: 0px auto 40px auto;}
.number {color: #fff; font-size: 50px; font-weight: bold; background: var(--light-blue); border-radius: 50px; width: 74px; height: 52px; margin: 0px auto; text-align: center; position: absolute; padding-top: 20px; float: none; display: inline-block; left: 43%; top: -2%;}

/* section-03 */
.section-03 {margin-bottom:60px; overflow: hidden}
.section-03 ul {display:flex; flex-wrap:wrap; text-align:center; margin-top:30px; gap:3%; justify-content:center;}
.section-03 ul li{margin-bottom:40px; width:40%;}
.section-03 ul li:nth-child(5), .section-03 ul li:nth-child(6), .section-03 ul li:nth-child(7){margin-bottom:0;}
.section-03 ul li img{max-width:125px; margin-bottom:10px}
.section-03 ul li:before{content:"";}
.section-03 li p{margin-left:0;}

/* PRODUCTS */
.products {margin-top:40px;}
.products ul {list-style:none; display:flex; justify-content:space-between; gap:50px; margin-left:0; flex-wrap: unset;}
.products li {flex: 1;}
.products img {width:100%; border-top-left-radius: 40px; transition: all ease-in-out .25s;}
.products li:hover img {opacity: .75;}
.product-name {margin-bottom:5px; color: var(--navy); transition:.25s all;}
.section-02 .products p {padding: 0px;}
.products ul li a {text-decoration:none;}
.products ul li a:hover .product-name{color:var(--red);}

.cta {background: url(images/navy-bg.jpg); width:100%; max-width:unset; margin-bottom:0; text-shadow: 1px 1px 20px #0f1b25;}
.cta .section-wrap{display:flex; flex-wrap:wrap; justify-content:center; padding:5% 0; margin:0px auto; max-width:1200px; width:90%;}
.cta h2 {background:unset; margin-bottom:10px; padding:0;}
.cta p, .cta li {color: #fff;}
.cta li {width: 32%; float: left; padding: 0px 1%; text-align: center;}
.cta li:nth-of-type(1) {padding-left: 0px;}
.cta li:nth-of-type(3) {padding-right: 0px;}
/*.cta li:before {content: "\f061"; font-family: "FontAwesome"; font-size: 22px; color: var(--light-blue); display: inline-block; margin-right: 10px; float:left; margin-bottom: 31px;}
#cta-button {background:var(--light-blue); color:#fff; text-decoration:none; padding:5px 10px; transition:.25s; font-size:20px;}*/
#cta-button:hover {background:#000;}

.cta img {width: 55px; height: auto;}
.cta .fa-solid {
    color: var(--light-blue);
    font-size: 50px;
    padding-bottom: 10px;
    padding-top: 5px;
    transition: all ease-in-out .125s;
}

footer {background: #0f1b25; color:#fff; text-align:center; padding:50px 0;}
footer h3 {margin-bottom:10px; color: #e9d5ae;}
footer .copyright {margin-top:10px; margin-bottom:0;}
footer p, footer .copyright{font-size:16px;}
footer a{color:#fff; text-decoration:none; transition:.2s all}
footer a:hover{color:#fff; text-decoration:underline;}

@media screen and (max-width:1400px) {
.banner-text h1 {font-size: 45px; line-height: 65px;}
}

@media screen and (max-width:1024px) {
    .banner-text h1 {font-size: 35px; line-height: 55px;}
    .intro {padding-top: 20px;}
    ul.stats li {padding: 1% 1%; font-size: 18px; line-height: 30px;}
    ul.industries li {width: 25%; min-height: 130px; font-size: 16px;}
    h2{font-size:30px; line-height:40px;}
    .banner-product{margin-bottom:60px;}
    .banner-products img:nth-child(6), .banner-products img:nth-child(7){display:none;}
    section{margin:60px auto 0;}
    .section-02 .section-wrap{margin:0px auto;}
    .section-03{margin-bottom:30px;}
    .section-03 ul{justify-content:center; gap:5%;}
    .section-03 ul li{width:47%; margin-bottom:0;}
    .cta{margin-top:30px;}
    .smaller{font-size:23px;}
    h2:has(.smaller) {line-height: 36px;}
}

@media screen and (max-width:600px) {
    .logo{max-width:130px;}
    .hero {display: none;}
    .banner-text {position: relative; bottom: 0px; margin-left: 0px; width: 100%;}
    .banner-text h1{margin-bottom:0; font-size: 34px; line-height: 45px;}
    .mobile-banner {width:100%;}
    .mobile-banner {display:block;}
    h1{font-size:40px; line-height:50px;}
    h2{font-size:28px; line-height:38px;}
    ul.stats {display: block;}
    ul.stats li:nth-of-type(2) {border-left: 0px; border-right: 0px;}
.section-01 {padding: 30px 20px;}
.section-02 p, .section-02 ul {padding: 0px;}
ul.industries li {width: 50%; font-size: 16px;}
.products ul {display: block;}
.cta li:before {margin-bottom: 0px;}
    .buttons .btn{display:inline-block; margin-bottom:10px;}
    .main-content{margin-top:120px;}
    .intro {padding-top: 10px;}
    .cta li {width: 100%; padding: 0px;}

    section{margin:40px auto 0;}
    .smaller{font-size:21px; line-height:25px;}
    h2:has(.smaller) {line-height: 33px;}

    .section-02 ul li{width:100%;}
    .section-02 ul p{margin-left:0;}
    .section-03 ul li{margin-bottom:20px; width:100%;}
 .section-02 ul.offset li {width: 100%;}
 .section-02 h3 {width: 100%; margin-bottom: 0px;}
 .section-02 ul.offset {width: 94%; margin: 0px; box-sizing: border-box; padding: 0px;}

    footer{padding:40px 0;}
    footer h3 {font-size: 24px;}
}