@import url('https://fonts.googleapis.com/css2?family=Asap:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css');

:root{
    --red: #bd0f12;
}

*{margin:0; padding:0; }
h1{font-family:"Asap", serif; font-size:45px; line-height:55px; font-weight:600;}
h2{font-family:"Asap", sans-serif; font-size:36px; line-height:46px; font-weight:600; margin-bottom:10px; text-align:center; color: var(--red);}
h3{font-family:"Asap", sans-serif; font-size:28px; line-height:36px; word-break:keep-all; text-align: center; margin-bottom: 20px;}
p{font-size:20px; line-height: 30px; margin-bottom:15px; font-weight: 400;}

body{font-family:"Asap", sans-serif; font-size: 22px; line-height:33px; overflow-x: hidden}
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(--red); 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:150px;}
.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; background-color: #000;
background-image: url("images/banner.jpg"); min-height: 600px; width:100%; max-width:unset; flex-wrap:wrap; background-size:cover; background-repeat:no-repeat; background-position:bottom right;}
.banner-text{margin:140px 0; width:50%; margin-left:5%; text-align:center; text-shadow: 1px 1px 10px #333;}
.banner-text h1{color:#fff; margin-bottom:20px; text-transform: uppercase;}
.banner-text h2{color: #fff; margin-bottom:0; background:none;}
.mobile-banner{display:none;}


/* INTRO */
.intro{margin:0 auto 50px auto; text-align:center; background-color:#000; max-width:unset; width:100%; padding:50px 0;}
.intro p{color:#fff; font-size:25px; line-height:40px;}

/* BODY ROWS */
section {max-width:1200px; margin:100px auto 0; width:90%; display:block;}
.smaller{font-size:26px;}
h2:has(.smaller) {line-height: 40px;}
ul li{font-size:20px; line-height:30px; margin-bottom:15px; list-style:none;}
li:before {content: "\f061"; font-family: "FontAwesome"; font-size: 18px; color: var(--red); display: inline-block; margin-right: 10px; float:left;}
li p:has(strong){margin-bottom:0;}
li p:not(strong){margin-left:27px;}

/* section-01 */
.section-01 {background: #eaeaea; padding: 40px; max-width: 1400px; margin-top: 20px;}

/* section-02 */
.section-02 {background: #fff; padding: 40px 0px; max-width: 1400px; margin-top: 20px;}
.section-02 ul{display:flex; flex-wrap:wrap; justify-content:space-between; padding:0px; margin-top: 30px;}
.section-02 ul li {width:31%; margin-bottom:0px;}
.section-02 ul li img{ margin:20px auto 20px; text-align:center; max-width: 100%; height: auto; display:block; border: 10px solid var(--red); border-radius: 20px;}
.section-02 ul li:before{display:none;}
.section-02 p{padding:0 50px;}
.section-02 ul p{padding:0; text-align:center}

.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(--red); 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;}

.cta{background:var(--red); width:100%; max-width:unset; margin-bottom:0;}
.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; color:#000;}
.cta p{font-size: 26px; line-height: 38px; padding:0 5%; text-align:center; color:#fff; font-weight: bold;}
#cta-button{background:var(--red); color:#fff; text-decoration:none; padding:5px 10px; transition:.25s; font-size:20px;}
#cta-button:hover{background:#000;}

footer {background:#000; color:#fff; text-align:center; padding:50px 0;}
footer h3 {margin-bottom:10px}
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:1024px){
    h2{font-size:30px; line-height:40px;}
    .banner-text{padding:30px 15px 15px; margin-left:3%;}
    .banner-text h1{font-size:32px; line-height:42px;}
    .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-01{margin-top:60px;}
    .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;}
    .cta .section-wrap{margin:60px auto;}
    .smaller{font-size:23px;}
    h2:has(.smaller) {line-height: 36px;}
}

@media screen and (max-width:600px){
    .logo{max-width:130px;}
    .banner-text{padding:20px 0; width:90%; position:absolute; margin-left:5%; margin-top:60%;}
    .banner-text h1{margin-bottom:0;}
    .mobile-banner{width:100%;}
    .mobile-banner{display:block;}
    h1{font-size:40px; line-height:50px;}
    h2{font-size:28px; line-height:38px;}

    .buttons .btn{display:inline-block; margin-bottom:10px;}
    .main-content{margin-top:130px;}
    .intro{margin:0 auto 40px;}

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

    .section-02 ul{padding:0 20px;}
    .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;}
}