@import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap');

:root{
    --fey-blue-300:#5EA5D4;
    --fey-yellow:#F7CE5D;
    --fey-pale-yellow: #fdf2d6;
    --dark-blue: #063e69;
    --font-family-primary: Verdana, Geneva, Tahoma, sans-serif;
    --font-family-secondary: "Lilita One", sans-serif;
}

*{margin:0; padding:0;font-family: var(--font-family-primary)}
h1{font-family: var(--font-family-secondary);font-size:60px;line-height:70px;font-weight:600;text-transform: uppercase;}
h2{font-family: var(--font-family-secondary);font-size: 36px;line-height:44px;font-weight:400;margin-bottom:15px;text-transform: uppercase;color: var(--fey-blue-300);letter-spacing: 0.5px;}
h3{font-family: var(--font-family-secondary);font-size:24px;line-height:30px;margin-bottom:10px;text-transform: uppercase;color: var(--dark-blue);}
p{font-size:18px; line-height: 27px; margin-bottom:15px;}
ul{margin-left:15px;}


button{background: var(--fey-yellow);padding:6px 20px;border-radius: 5px;border:none;color: #fff !important;font-size:18px;transition: .25s all;}
button:hover{background:var(--dark-blue);}
button a {color:#000; text-decoration:none}
button:hover a {color:#fff}

.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: 160px;}

body{ 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{text-align:center;display: block;}
button:has(#end-buyer-friendly){display:block; margin:0 auto; background:var(--fey-yellow); 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(--dark-blue); }
.logo{max-width:100px;}

/* BANNER */
.banner{display:flex;position:relative;justify-content:center;align-items:center;padding:0;background: linear-gradient(-115deg,var(--fey-blue-300) 0%,var(--fey-blue-300) 50%, var(--fey-yellow) 50%,var(--fey-yellow)100%  );background-color: var(--fey-blue-300);}
.banner-text{width: 35%;text-align:center;position:absolute;background: none;padding: 0;right: 5%;}
.banner-text h1{color: var(--dark-blue);margin-bottom:20px;font-size: 56px;line-height: 58px;}
.banner-text h2{color: #fff; margin-bottom:10px;font-family:var(--font-family-primary)}
.banner img{width: 50%;float: left;margin: 0 50%0 0;}

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

/* SECTIONS */
section{padding: 0px 0;}
.section-wrap{width:90%; margin:0 auto; max-width:1200px;}
.section-02 {background-color:var(--fey-pale-yellow);background: linear-gradient(177deg, #fff 0%, #fff 10%, var(--fey-pale-yellow) 10%, var(--fey-pale-yellow) 90%, #fff 90%);padding: 10% 0;margin: 5px 0;}
.section-04 {background-color:var(--fey-pale-yellow);background: linear-gradient(177deg, #fff 0%, #fff 10%, var(--fey-pale-yellow) 10%, var(--fey-pale-yellow) 100%);padding: 10% 0 0;}

/* BURST */
.burst{margin-top:40px; background: var(--fey-blue-300); padding:40px; text-align:center;}

/* PRODUCTS */
.products{margin-top:40px;}
.products ul{list-style:none;display:flex;justify-content:space-between;gap:50px;margin-left:0;padding-bottom: 5px;}
.products ul li {box-shadow: rgba(99, 99, 99, 0.15) 0px 2px 4px 1px;padding: 5px 1.7em 15px;border-radius: 0.7em;background: #fff;}
.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(--fey-yellow);}

.row{display:flex; gap:50px; justify-content:space-between; align-items:center; background:var(--fey-yellow); padding-left:50px; color:#fff; margin-top:50px;}
.row .col-6{width:50%;}
.row .col-6:has(img){line-height:0;}
.row .col-6 img{float:right;}


footer{
    background-color:var(--fey-blue-300);
    background: linear-gradient(177deg, var(--fey-pale-yellow) 0%, var(--fey-pale-yellow) 30%, var(--fey-blue-300) 30%, var(--fey-blue-300) 100%);
    color:#fff;
    text-align:center;
    padding: 100px 20px 30px;
    position: relative;
    overflow: hidden;
    }
footer h3{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;}

@media screen and (max-width:1024px){
    .banner-text h1{font-size:40px;line-height: 42px;}
    .banner-text h2{font-size:24px;line-height: 29px;}
    .intro{padding:40px 0;}
    .intro-wrap{width:80%;display: inline-block;margin-top: 20px;}
    .intro p{font-size:22px; line-height:35px;}
    .section-02, .section-04{padding-top: 18%;}
    .row img{width:100%;}
    footer {background:var(--fey-blue-300);padding: 25px 10% 20px;}
    .products ul {gap:20px;padding-bottom: 10px;}
    .section-01, .section-02, .section-03, .section-04 {padding:25px 0}
    .section-02, .section-04 {background:var(--fey-pale-yellow)}
}

@media screen and (max-width:600px){
	.banner img {width:100%;margin:0;background-color: var(--fey-blue-300);background: linear-gradient(177deg, var(--fey-pale-yellow) 0%, var(--fey-pale-yellow) 10%, var(--fey-blue-300) 10%, var(--fey-blue-300) 100%);}
    .banner{display:block;line-height:0;background: none;}
    .banner-text{width: 100%;margin-right:0;padding: 20px 5% 0;position:relative;background-color: var(--fey-pale-yellow);}
    .banner-text h1{font-size:25px; line-height:35px; margin-bottom:5px;}
    .banner-text h2{font-size: 22px;line-height:28px;color: #000;margin-bottom: 0;}
    .intro{padding:20px 0;margin-bottom: 0;}
    .intro p{font-size:20px; line-height:30px;}
    .products ul{flex-wrap:wrap; gap:20px;}
    .row{flex-wrap:wrap; gap:20px; padding:20px;}
    .row .col-6{width:100%;}
    footer h3{font-size:22px}
}