@import url(https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap);

:root{
    --gray:#f6f3f0;
    --red:#ba0d19;
    --dark-blue:#222;
}

*{margin:0; padding:0;}
h1{font-family:"Google Sans", sans-serif; font-size:50px; line-height:55px; font-weight:600; transition: all ease-in-out .25s;}
h2{font-family:"Google Sans", sans-serif; font-size:38px; line-height:44px; font-weight:600; margin-bottom:15px; transition: all ease-in-out .25s;}
h3{font-family:"Google Sans", sans-serif; font-size:24px; line-height:30px; margin-bottom:10px; color: var(--red); text-transform: uppercase; letter-spacing: .5px;}
p{font-family:"Google Sans", sans-serif; font-size:18px; line-height: 27px; margin-bottom:15px;}
ul{margin-left:15px;}
a {font-family:"Google Sans", sans-serif;}

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

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

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

body{font-family:"Google Sans", sans-serif; font-size: 18px; line-height:27px;}
header{display:block; text-align:center; position:fixed; top:0; width:100%; background:#fff; z-index:2; padding:10px 0px 5px 0px;}
header a{text-align:center;}
header button {display:inline-block; margin:0 auto; background:var(--red); padding:7px 20px; border-radius:50px; border:none; transition:.3s all; margin-top:5px;}
header button a {color:#fff; text-decoration:none; font-size: 15px;}
header button:hover {background:var(--dark-blue); }
.button-wrapper {display: block; margin: 0px auto; text-align: center;}

.logo{max-width:150px;}

/* BANNER */
.banner{display:flex; position:relative; justify-content:center; align-items:center; padding:0;}
.banner-text{width:45%; max-width: 700px; text-align:center; position:absolute; background:rgba(0,0,0, .6); padding: 30px 2%; left: 8%; border-top-left-radius: 50px; border-bottom-right-radius: 50px; text-shadow: 1px 1px 10px #333;}
.banner-text h1{color:#d0c7be; margin-bottom:15px;}
.banner-text h2{color: #fff; margin-bottom:10px; font-weight: 400; font-size: 30px;}
.banner-text p {color: #fff;  font-size: 18px;}
.banner img{width:100%;}

/* INTRO */
.intro{padding:40px 0; text-align:center; background:var(--gray);}
.intro-wrap{width:70%; margin:0 auto;}
.intro p{color:#000; font-size:25px; line-height:40px;}

/* SECTIONS */
section{padding:80px 0;}
.section-wrap{width:90%; margin:0 auto; max-width:1240px;}
.section-02{background: var(--gray);}

img.icon {float: left; margin-right: 20px; margin-bottom: 20px; margin-top: -25px; width: 250px;}

/* COLUMNS */
.columns {display:flex; gap:50px; width: 100%; justify-content:space-between; align-items:center;}
.col2 {background: var(--gray); padding: 2% 3%; border-top-left-radius: 50px; border-bottom-right-radius: 50px;}

/* RED BOXES */
.burst {margin-top:20px; background: var(--gray); padding:40px; text-align:center; text-align: left; border-top-left-radius: 50px; border-bottom-right-radius: 50px;}
.burst.first {margin-top: 80px;}
.burst.offset {background: #dfdcda;}
.burst.tertiary {background: #c2bfbc;}

/* 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(--dark-blue); transition:.25s all;}
.products ul li a{text-decoration:none;}
.products ul li a:hover .product-name{color:var(--red);}

.row {display:flex; gap:25px; justify-content:space-between; align-items:top; text-align: center;}
.row.first {margin-top: 50px; margin-bottom: 25px;}
.col4 {width: 25%; background: #dfdcda; border-radius: 10px; padding: 2%; box-sizing: border-box;}
.col4 p {margin-bottom: 0px;}
.col4 h3 {text-transform: none; letter-spacing: 0px; font-size: 22px; line-height: 28px;}


footer{background:var(--red); color:#fff; text-align:center; padding:50px 0;}
footer h3 {color: #fff; text-transform: none; margin-bottom:10px}
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;}
.footer-logos {border-radius: 15px; max-width: 100%; height: auto;}

@media screen and (max-width:1200px){
h1 {font-size: 36px; line-height: 41px;}
h2 {font-size: 32px; line-height: 40px;}
.banner-text h2 {font-size: 28px; line-height: 38px;}
}

@media screen and (max-width:1024px){
.banner-text {width: 50%; left: 5%;}
h1 {font-size: 28px; line-height: 36px;}
.banner-text h2 {font-size: 24px; line-height: 32px;}
}

@media screen and (max-width:600px){
h1 {font-size: 32px; line-height: 38px;}
.main-content {margin-top: 180px;}
.intro-wrap {width: 80%;}
.banner {display: block;}
.banner-text {left: 0px; border-radius: 0px; background: #000; width: 100%; padding: 5%; box-sizing: border-box; position: relative;}
img.icon {width: 70%; margin-left: 15%; margin-right: 15%; margin-top: 0px;}
.columns, .row {display: block;}
.col2 {padding: 7%; box-sizing: border-box; margin-bottom: 10px;}
.col4 {width: 100%; margin-bottom: 10px; padding: 5%;}
.section-wrap {overflow-x: hidden;}
footer {padding: 50px;}
}