@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

:root { --pink: #E8A0A0; --red: #BF2828; --white: #FFFFFF; --black: #000; }

h1, h2, h3, h4, h5, h6 { font-family: "Poppins", sans-serif; font-optical-sizing: auto; font-weight: 600; }
p, a, li { font-family: "Raleway", sans-serif; font-optical-sizing: auto; font-weight: 350 !important; }

body { overflow-x: hidden; scroll-behavior: smooth; }
  
/* Navbar - Section */
.navbar { background-color: var(--pink) !important; padding: 20px 0px; }
.navbar img { max-width: 200px; height: auto; }
.navbar ul { text-align: center; font-size: 1.3em; }
.navbar li .nav-link { color: var(--red) !important; font-weight: 500 !important; }
.navbar li .nav-link:hover { color: var(--black) !important; transition: 0.5s;  }

@media (max-width: 768px) { 
    .navbar img { max-width: 200px; }
    .navbar ul { text-align: center; font-size: 1.2em; }
}

/*Hero - Section*/
#hero { width: 100%; height: 110vh; color: var(--white); text-align: left; padding: 5% 5% 0 10%; background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url("https://www.toptiertreatz.co.za/images/hero-img.webp"); background-size: cover; background-repeat: no-repeat; background-position: center center; }
#hero h1 { font-size: 3.7em; text-shadow: 2px 2px 4px #383642; }
#hero p { font-size: 1.5em; text-shadow: 2px 2px 4px rgba(184, 175, 175, 0.4); }
#hero .btn-primary { box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); margin: 2em auto; width: max-content; position: relative; display: inline-grid; place-content: center; padding: 10px 2em; font-size: 1.2em; font-weight: 450 !important; background-color: var(--pink); color: var(--black); border: none; border-radius: 5px; }
#hero .btn-primary:hover { background-color: var(--red); color: var(--white); transform: scale(1.05); transition: background-color 0.5s, color 0.5s, scale 0.5s; }

@media (max-width: 768px) {
    #hero { text-align: left; padding: 10vh 3vw; }
    #hero h1 { font-size: 2.5em; text-shadow: 1px 1px 3px rgba(184, 175, 175, 0.7); }
    #hero p { font-size: 1.2em; text-shadow: 1px 1px 2px rgba(184, 175, 175, 0.7); }
    #hero .btn-primary { display: block; font-size: 1em; padding: 0.7em 1.5em; margin: 3em 0px !important; }
}

/*About Section*/
#about { padding: 12vh 5vw; text-align: center; width: 100%; height: auto; background-color: var(--pink); }
#about h2 { font-size: 3em; color: var(--black); text-align: center; }
#about p { font-size: 1.5em; padding-bottom: 2em; color: var(--grey); text-align: center; }
#about .card { padding: 2em; width: 100%; height: 40vh; background: center center / cover no-repeat; border-radius: 8px; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; justify-content: flex-end; transition: transform 0.3s ease, box-shadow 0.3s ease; }
#about .card.one { background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url("https://www.toptiertreatz.co.za/images/fresh.webp"); }
#about .card.two { background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url("https://www.toptiertreatz.co.za/images/handcraft.webp"); }
#about .card.three { background-image: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url("https://www.toptiertreatz.co.za/images/quality.webp"); }
#about .card:hover { transform: translateY(-5px); box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.15); }
#about .card h3 { color: var(--white); padding: 0px 10px 10px 0px; border-bottom: 1px solid #CDCDCD; font-size: 1.4em; font-weight: 500; width: max-content; text-align: left; }
#about .card p { font-size: 1em; color: var(--white); font-weight: 500 !important; margin-top: 0px; text-align: left; }

@media (max-width: 768px) { 
    #about { padding: 10vh 3vw; text-align: left; } 
    #about h2 { font-size: 2em; } 
    #about p { font-size: 1.2em; } 
    #about .card { margin-bottom: 2em; }
    #about .card h3 { font-size: 1.15em; }
    about .card p { font-size: 0.9em; }
}

/*Services Section*/
#service { padding: 12vh 20vw; width: 100%; height: auto; background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url("https://www.toptiertreatz.co.za/images/white-bg.webp"); background-size: cover; background-repeat: no-repeat; background-position: center center; }
#service h2 { font-size: 3em; color: var(--black); }
#service p { font-size: 1.5em; padding-bottom: 2em; color: var(--black); }
#service .card { border: none; padding: 0px; width: 100%; height: auto; border-radius: 13px; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2); transition: transform 0.3s ease, box-shadow 0.3s ease; }
#service .card img { width: 100%; border-top-right-radius: 13px; border-top-left-radius: 13px;}
#service .card:hover { transform: translateY(-5px); box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.25); }
#service .card h4 { color: var(--black); font-size: 1.3em; border-bottom: 1px solid var(--pink); max-width: max-content; padding: 10px 10px 10px 0px; }
#service .card p { color: var(--red); font-size: 1em; padding: 5px 0px; }

@media (max-width: 768px) { 
    #service {padding: 10vh 3vw; height: auto; background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url("https://www.toptiertreatz.co.za/images/white-bg-mobile.webp"); } 
    #service h2 { font-size: 2em; } 
    #service p { font-size: 1.2em; } 
}

/*Contact Section*/
#contact { padding: 12vh 5vw; text-align: center; width: 100%; width: 100%; height: auto; background-color: var(--pink); }
#contact h2 { font-size: 3em; color: var(--black); }
#contact p { font-size: 1.5em; padding-bottom: 2em; color: var(--black); }

#contact .card h3 { font-size: 1.4em; background-color: var(--red); color: var(--white); text-align: center; padding: 15px 2em; border-radius: 5px 5px 0px 0px; }
#contact .card p { padding: 10px 10px; font-size: 1.2em; font-weight: 500 !important; }

#contact .card h4:hover { background-color: var(--red); }
#contact form { padding: 2em; text-align: left; }
#contact form .btn-primary { background-color: var(--red); color: var(--white); outline: none; border: none; padding: 10px 2em; width: max-content; display: block; margin: 2% auto 0 auto; }
#contact form .btn-primary:hover { box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.15); background-color: var(--pink); color: var(--black); transition: box-shadow 0.5s, background-color 0.5s; }

@media (max-width: 768px) { 
    #contact {padding: 10vh 3vw; } 
    #contact h2 { font-size: 2em; } 
    #contact p { font-size: 1.2em; } 
    #contact .card h3, #contact .card h4 { text-align: left; padding: 10px 15px; font-size: 1.3em; }
    #contact .card p { font-size: 1em; padding: 10px 20px; }  
    #contact form { padding: 2em 10px; }
    #contact form .btn-primary { width: 95%; margin-top: 8%; }
}

/*Footer Section*/
#footer { padding: 8vh 2vw; background-color: var(--pink); font-size: 1.1em; }
#footer p { color: var(--black); font-weight: 500 !important; }
#footer a { text-decoration: none; color: var(--black); font-weight: 500 !important; }
#footer i { color: var(--black); font-weight: 500 !important;  }
#footer a:hover { opacity: 50%; text-shadow: none; }

@media (max-width: 768px) {
    #footer { font-size: 1em; }
}