@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:45px; line-height:60px; 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; 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;}
.width-wrap{max-width:1200px; margin:0 auto; width:90%;}

/* BANNER */
.banner{justify-content:center; background-color: #000;
background-image: url("images/banner.png"); width:100%; max-width:unset; flex-wrap:wrap; background-size:cover; background-repeat:no-repeat; background-position:center;}
.banner-text{margin:100px 0; width:35%; margin-left:5%; text-align:center; background:rgba(255,255,255,.5); padding:30px 15px;}
.banner-text h1{color:#000; margin-bottom:20px;}
.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; background-image:url("https://www.transparenttextures.com/patterns/dark-geometric.png"); 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; overflow-y:auto;}
.section-wrap{max-width:1200px; width:90%; margin:0px auto;}
.section-01{max-width:unset; width:100%; margin-top:100px;}
.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-02 */
.section-02{max-width:unset; width:100%; background:#ddd; position:relative;}
.section-02:before{background-image:url("https://www.transparenttextures.com/patterns/dark-geometric.png"); width:100%; height:100%; content:""; position:absolute; z-index:0; opacity:.5;}
.section-02 .section-wrap{background:#fff; z-index:1; position:relative; margin:100px auto;}
.section-02 ul{display:flex; flex-wrap:wrap; justify-content:space-between; padding:0 50px;}
.section-02 ul li{width:48%; margin-bottom:0px;}
.section-02 ul li img{ margin:0 auto 20px; text-align:center; max-height:200px; display:block;}
.section-02 ul li:before{display:none;}
.section-02 p{padding:0 50px;}
.section-02 ul p{padding:0; text-align:center}



/* 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; 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){
    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:60px 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{background-image:none;}
    .banner-text{padding:20px 0; width:90%; position:absolute; margin-left:5%; margin-top:8%;}
    .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:190px;}


    .intro{margin:0 auto 40px;}

    section{margin:40px auto 0;}
    .section-01{width:90%;}
    .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%;}
 
    footer{padding:40px 0;}
}