@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root{
    --gray:#f0f0f0;
    --light-blue: #d9ebf3;
    --blue: #68a1b9;
    --red: #a31f37;
}

*{margin:0; padding:0;}
h1{font-family:"Montserrat", sans-serif; font-size:60px; line-height:70px; font-weight:800;}
h2{font-family:"Montserrat", sans-serif; font-size:34px; line-height:44px; font-weight:800; margin-bottom:15px;}
h3{font-family:"Montserrat", sans-serif; font-size:26px; line-height:34px; margin-bottom:30px; text-align:center; color:var(--red);}
p{font-size:18px; line-height: 27px; margin-bottom:15px;}
ul{margin-left:15px;}


button{background: var(--red); padding:10px 20px; border-radius:50px; border:none; color:#fff; font-size:18px; transition: .25s all;}
button:hover{background:var(--blue);}

.delayed-btn {opacity: 0; transform: translateY(10px) scale(0.95); transition: all 0.6s ease; font-size: 15px; padding: 5px 15px; margin-top: 5px;}
.delayed-btn.show {opacity: 1; transform: translateY(0) scale(1);}


.main-content{margin-top:134px;}

body{font-family:"Montserrat", sans-serif; font-size: 18px; line-height:27px;}
header{display:block; text-align:center; position:fixed; top:0; width:100%; background:#fff; z-index:1; padding:10px 0;}
header a{display: flex; justify-content:center;}
button:has(#end-buyer-friendly){display:inline; font-size:15px; margin:0 auto; background:var(--red); padding:5px 10px; border-radius:50px; border:none; transition:.3s all; margin-top:5px;}
#end-buyer-friendly{color:#fff; text-decoration:none;}
button:has(#end-buyer-friendly):hover{background:var(--blue); }
.logo{max-width:135px;}

/* BANNER */
.banner{display:flex; position:relative; justify-content:center; align-items:center; padding:0;}
.banner-text{width:100%; text-align:center; position:absolute; top:3%;}
.banner-text h1{color:#fff; font-size:70px; width:70%; line-height:80px; margin:0 auto}
.banner-text h2{color: #fff; margin-bottom:10px}
.banner img{width:100%;}

/* pre-intro */
.pre-intro{padding:80px 0; text-align:center; background:var(--blue);}
.pre-intro-wrap{width:75%; margin:0 auto;}
.pre-intro h2{color:#fff; font-size:48px; line-height:54px;}
.pre-intro p{color:#fff; font-size:25px; line-height:40px; margin-bottom:0;}

/* SECTIONS */
.section-01, .section-02, .section-03, .section-04, .section-05, .section-06{border-top:1px solid var(--gray);}

section{padding:80px 0;}
.section-wrap{width:90%; margin:0 auto; max-width:1500px;}

.section-intro{background:var(--light-blue); width:90%; max-width:1500px; margin:80px auto; padding-bottom:0;}
.section-intro .section-wrap{display:flex; flex-wrap:wrap; justify-content:space-around; width:100%;}
.section-intro .text{width:90%; text-align:center; margin-bottom:20px;}
.section-intro .video{width:70%;}
.section-intro .video p{font-size:14px; text-align:center;}
.section-intro .text-close{width:100%; margin:30px auto 0; text-align:center; background:var(--blue); color:#fff; padding:80px 0;}
.section-intro .text-close p{margin-bottom:0; font-size:24px; line-height:38px; width:80%; margin:0 auto;}
.section-intro .text-close a img{width:35px; margin-top:20px;}

.section-02 .row, .section-04 .row, .section-06 .row{padding-left:0; border:10px solid var(--blue)}
.section-02 .row h2, .section-04 .row h2, .section-06 .row h2{background:var(--blue);}
.section-02 h3, .section-06 h3{color:var(--blue);}
.section-02 .burst, .section-06 .burst{background:var(--light-blue)}
.section-02 .burst button, .section-06 .burst button{background:var(--blue)}
.section-02 .burst button:hover, .section-06 .burst button:hover{background:var(--red)}

.section-04 ul{font-weight:400; margin-left:80px;}
.section-04-text-wrap p, .section-04-text-wrap ul{margin-top:0; margin-bottom:0;}


.section-01 .image, .section-03 .image, .section-05 .image{border-left:10px solid var(--red)}
.section-02 .image, .section-04 .image, .section-06 .image{border-right: 10px solid var(--blue)}
.section-01 .image{background: url(images/section-01-b.jpg); background-size:cover;}
.section-02 .image{background: url(images/section-02.jpg); background-size:cover;}
.section-03 .image{background: url(images/section-03.jpg); background-size:cover;}
.section-04 .image{background: url(images/section-04.jpg); background-size:cover;}
.section-05 .image{background: url(images/section-05.jpg); background-size:cover;}
.section-06 .image{background: url(images/section-06.jpg); background-size:cover;}

/* BURST */
.burst{margin-top:40px; background: var(--gray); padding:40px; text-align:center; display:flex; justify-content:space-between; align-content:center; align-items:center;}
button a{color:#fff; text-decoration:none;}
.burst-text{padding-right:50px;}
.burst-text p{width:80%; margin-left:10%;}
.burst img{max-width:600px; display:block;}

/* PRODUCTS */
.products{margin-top:40px;}
.products ul{list-style:none; display:flex; justify-content:space-between; gap:50px; margin-left:0;}
.products img{width:100%;}
.product-name{margin-bottom:5px; color: var(--red); transition:.25s all;}
.products ul li a{text-decoration:none;}
.products ul li a:hover .product-name{color:var(--blue);}
.section-02 .product-name, .section-06 .product-name{color:var(--blue);}
.section-02 .product-name:hover, .section-06 .product-name:hover{color:var(--red) !important}

.row{display:flex; gap: 0px; justify-content:space-between; background:#fff; color:#000; border:10px solid var(--red)}
.row .text{flex:50%; display:flex; flex-wrap:wrap;}
.row h2{background:var(--red); color:#fff; padding:20px 40px; align-content:end;}
.row p{padding:10px 40px;}
.row .image{flex: 40%; height:550px; background-position:center;}
.row .image img{width:100%; display:block;}


footer{background:var(--red); color:#fff; text-align:center; padding:50px 0;}
footer h3{margin-bottom:10px; color:#fff;}
footer .copyright{margin-top:10px;}
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 (min-width:1025px) and (max-width:1300px){
    .banner-text h1{font-size:50px; line-height:60px; width:90%;}
}

@media screen and (max-width:1024px){
    h2{font-size:30px; line-height:40px;}
    .banner-text{width:90%;}
    .banner-text h1{font-size:34px; line-height:46px; width:100%;}
    .banner-text h2{font-size:24px; line-height:34px;}
    .pre-intro{padding:40px 0;}
    .pre-intro-wrap{width:80%;}
    .pre-intro p{font-size:20px; line-height:30px;}
    .row img{width:100%;}
   .pre-intro h2{font-size:30px; line-height:40px;}
   .section-intro .text{width:90%; margin-top:0;}
   .section-intro .video{width:90%; margin-top:10px;}
    .section-intro .text-close{padding:40px 0;}
    .row{gap:20px; flex-wrap:wrap; }
    .row .image, .row .text{width:100%; flex:100%;}
    .row .image{order:2; border:none; height:600px; background-position:top;}
    .product-description{margin-bottom:0;}
    .burst img{max-width:320px;}
    .burst-text p{width:100%; margin-left:0;}
    .row h2{width:100%;}
    .section-04-text-wrap{margin-bottom:30px;}
}

@media screen and (max-width:600px){
    .banner{display:block; line-height:0;}
    .banner-text{width:90%; margin-right:0; padding:20px 5%; position:relative; background:var(--red);}
    .banner-text h1{font-size:25px; line-height:35px; margin-bottom:5px;}
    .banner-text h2{font-size:18px; line-height:28px;}
    .pre-intro{padding:20px 0;}
    .pre-intro p{font-size:20px; line-height:30px;}
    .products ul{flex-wrap:wrap; gap:20px;}
    .row{flex-wrap:wrap; gap:20px; padding:0px;}
    .row .col-6{width:100%;}
    footer h3{font-size:22px}

    .section-intro{margin:30px auto;}
    section{padding: 30px 0;}
    .section-02 .row, .section-04 .row, .section-06 .row{padding:0;}
    .row .image{height:300px;}

    .burst{flex-wrap:wrap;}
    .burst-image{margin-top:30px;}
    .burst-text{padding:20px 20px 0;}
    .burst img{max-width:100%;}
    
}