@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: #ED2024;
}

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

body{font-family:"Asap", sans-serif; font-size: 22px; line-height:33px;}
header{display:block; text-align:center; position:fixed; top:0; width:100%; background:#fff; z-index:1; 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:85px;}
.width-wrap{max-width:1200px; margin:0 auto; width:90%;}

/* BANNER */
.banner{display:flex; justify-content:center; background-color: #000;
background-image: url("https://www.transparenttextures.com/patterns/dark-geometric.png"); width:100%; max-width:unset; flex-wrap:wrap;}
.banner-text{padding:50px 0 30px; width:70%; text-align:center;}
.banner-text h1{color:#fff; margin-bottom:20px;}
.banner-text h2{color: #fff; margin-bottom:0; background:none;}
.banner-products{display:flex; gap:20px; justify-content:space-between; width:80%;max-width:1100px; background:#fff; padding:30px 40px; border:5px solid var(--red); margin-bottom:60px;}
.banner-products img{width:12.5%;}

/* INTRO */
.intro{margin:50px auto; text-align:center;}
.intro p{color:#000; font-size:25px; line-height:40px;}

/* BODY ROWS */
section{max-width:1200px; margin:100px auto 0; width:90%; display:block; overflow-y:auto;}
.section-wrap{max-width:1200px; width:90%; margin:0px auto;}
.section-01{max-width:unset; width:100%; margin-top:50px;}
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-burst{color:var(--red); font-weight:600;}
.burst{margin:100px auto 0; background-color:#000; background-image:url("https://www.transparenttextures.com/patterns/dark-geometric.png"); padding:100px 0;}
.burst-wrap{max-width:1000px; width:80%; padding:5%; background:#fff; margin:0 auto;}
.burst-wrap h3{text-align:center; font-size:34px; line-height:44px; width:80%; margin:0 auto 30px;}
.burst-wrap .row{display:flex; gap:30px; justify-content:center; /*align-items:center;*/}
.burst-copy{flex:55%;}
.burst-image{flex:45%;}
.burst-image img{width:100%;}
/* section-02 */
/*.section-02{max-width:unset; width:100%; background:#fff; background-image:url("https://www.transparenttextures.com/patterns/dark-geometric.png")}
.section-02 .section-wrap{max-width:1100px; width:90%; margin:100px auto; padding:50px; background:#fff;}*/
.section-02 ul li:before{content:"\f00c"}
/* section-03 */
.section-03{margin-bottom:60px;}
.section-03 ul{display:flex; flex-wrap:wrap; text-align:center; margin-top:30px;}
.section-03 ul li{flex:30%; margin-bottom:40px;}
.section-03 ul li img{max-width:150px; background:#000;}
.section-03 ul li:nth-child(2n) img{background:var(--red)}
.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; background:#fff; margin:100px auto; max-width:1200px; width:90%;}
.cta h2{background:unset; margin-bottom:10px; padding:0; color:#000;}
.cta p{padding:0 5%; text-align:center; color:#000;}
#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){
    .banner-text{padding:60px 0 30px;}
    .banner-product{margin-bottom:60px;}
    .banner-products img:nth-child(6), .banner-products img:nth-child(7){display:none;}
    section{margin:60px auto 0;}
    .burst{padding:60px 0;}
    .burst-wrap .row{flex-wrap:wrap;}
    .burst-wrap img{width:70%; margin:0 auto; display:block;}
    .section-03{margin-bottom:30px;}
    .cta{margin-top:30px;}
    .cta .section-wrap{margin:60px auto;}
}

@media screen and (max-width:600px){
    .logo{max-width:130px;}
    .banner-text{padding:40px 0; width:90%;}
    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:190px;}

    .banner-products{flex-wrap:wrap; gap:5%; width:65%; margin-bottom:40px;}
    .banner-products img:nth-child(5), .banner-products img:nth-child(6), .banner-products img:nth-child(7){display:none;}
    .banner-products img{width:45%; margin:10px 0;}

    .intro{margin:40px auto;}

    section{margin:40px auto 0;}
    .section-01{width:90%;}
    .burst{padding:40px 5%; margin:40px auto 0;}
    .burst-wrap{padding:5%;}
    .burst-wrap .row{gap:10px;}
    .burst-wrap h3{font-size:23px; line-height:33px;}
    .burst-wrap p{font-size:18px; line-height:28px;}
    .burst-wrap .row{flex-wrap:wrap;}
    .section-03 ul li{margin-bottom:20px;}
    .section-03 ul li:nth-child(2n) img{background:#000}
    .section-03 ul li:nth-child(2) img, .section-03 ul li:nth-child(3) img, .section-03 ul li:nth-child(6) img, .section-03 ul li:nth-child(2) img, .section-03 ul li:nth-child(3) img, .section-03 ul li:nth-child(7) img, .section-03 ul li:nth-child(2) img, .section-03 ul li:nth-child(3) img, .section-03 ul li:nth-child(9) img{background: var(--red)}
    footer{padding:40px 0;}
}