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

:root { --white: #ffffff; --black: #000000; --red: #B70704; --grey: #383838; }

body { overflow-x: hidden; scroll-behavior: smooth; background-color: var(--white); }

/*Navbar*/
.navbar { background-color: transparent !important; }
.navbar img { max-width: 150px; height: auto; }
.navbar ul { text-align: center; font-size: 1.2em; }
.navbar li .nav-link { color: var(--red) !important; font-weight: bolder !important; }
.navbar li .nav-link:hover { transform: scale(1.05); color: var(--black) !important; transition: 0.7s; opacity: 75%; }

/*Section*/
section h1 { font-size: calc(1.8em + 2vw); font-family: "Poppins", sans-serif; }
section h2 { font-size: 1.5em; font-family: "Poppins", sans-serif; }
section p { font-size: 1.2em; padding: 1% 0; font-family: "Open Sans", sans-serif; }

/*Hero Section*/
#hero { padding: 5%; background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url("https://www.ingonyama27group.co.za/images/hero-img.webp"); background-size: cover; background-position: center center; height: 100vh; width: 100%; color: var(--white); }
#hero h1 { color: var(--white); }
#hero p { font-weight: 550; color: var(--red); }
#hero .badge { padding: 13px 15px !important; font-size: 1em !important; background-color: var(--red) !important; color: var(--white) !important; font-weight: 400 !important; }
#hero a { background-color: var(--white); color: var(--black); border: none; padding: 10px 40px; font-size: 1.2em; font-weight: 650; box-shadow: rgba(0, 0, 0, 0.55) 0px 5px 15px; border-radius: 50px; margin-top: 5%; }
#hero a:hover { transform: scale(1.07); transition: 0.7s; opacity: 75%; }

/*About Section*/
#about { padding: 25vh 5vw;  width: 100%; text-align: center; color: var(--header); background-image: url("https://www.ingonyama27group.co.za/images/about-img.webp"); background-size: cover; background-position: center center; }
#about h1 { color: var(--red); font-size: 3em; font-weight: 550; }
#about .row { margin-top: 1%; }
#about .row p { text-align: left; color: var(--black); font-weight: 500; font-size: 1.1em; }
#about img { max-width: 350px; height: auto; }

/*Services Section*/
#services { padding: 20vh 5vw;  width: 100%; text-align: center; color: var(--header); background-color: var(--grey); }
#services h1 { color: var(--red); font-size: 3em; font-weight: 550; }
#services p { color: var(--white); }
#services .card { width: 100%; height: 20vh; padding: 10px; border-radius: 10px; background-size: cover; background-position: center center; border: none; display: block; }
#services .card:hover { scale: 1.05; transition: 0.75s; }
#services .card.one { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://www.ingonyama27group.co.za/images/card1.webp"); }
#services .card.two { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://www.ingonyama27group.co.za/images/card2.webp"); }
#services .card.three { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://www.ingonyama27group.co.za/images/card3.webp"); }
#services .card.four { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://www.ingonyama27group.co.za/images/card4.webp"); }
#services .card.five { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://www.ingonyama27group.co.za/images/card5.webp"); }
#services .card.six { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://www.ingonyama27group.co.za/images/card6.webp"); }
#services .card.seven { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://www.ingonyama27group.co.za/images/card7.webp"); }
#services .card.eight { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://www.ingonyama27group.co.za/images/card8.webp"); }
#services .card.nine { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://www.ingonyama27group.co.za/images/card9.webp"); }
#services .card.ten { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://www.ingonyama27group.co.za/images/card10.webp"); }
#services .card.eleven { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://www.ingonyama27group.co.za/images/card11.webp"); }
#services .card.twelve { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://www.ingonyama27group.co.za/images/card12.webp"); }
#services h5 { background-color: rgba(0, 0, 0, 0.8); padding: 10px 35px; border-radius: 50px; }

/*Why-Us Section*/
#why-us { padding: 25vh 5vw;  width: 100%; text-align: center; color: var(--header); background-image: url("https://www.ingonyama27group.co.za/images/about-img.webp"); background-size: cover; background-position: center center; }
#why-us h1 { color: var(--red); font-size: 3em; font-weight: 550; }
#why-us i { display: block; margin-bottom: 10px; }
#why-us h5 { font-size: 1.2em; font-weight: 550; background-color: var(--black); color: var(--white); padding: 10px; border-radius: 50px; max-width: 80%; display: block; margin: auto; }
#why-us p { color: var(--grey); font-size: 1em; padding-bottom: 10px; border-bottom: 1px solid var(--red); max-width: 90%; display: block; margin: 2vh auto; }

/*Gallery Section*/
#gallery { padding: 20vh 5vw;  width: 100%; text-align: center; color: var(--header); background-color: var(--grey); }
#gallery h1 { color: var(--red); font-size: 3em; font-weight: 550; }
#gallery p { color: var(--white); }
#gallery img { width: 100%; border-radius: 10px; transition: 0.3s ease; }
#gallery img:hover { transform: scale(1.03); }

/*Contact Section*/
#contact { padding: 25vh 5vw;  width: 100%; text-align: center; color: var(--header); background-image: url("https://www.ingonyama27group.co.za/images/about-img.webp"); background-size: cover; background-position: center center; }
#contact h1 { color: var(--red); font-size: 3em; font-weight: 550; }

/*FOOTER */
footer .container-fluid { background-color: var(--red); padding: 50px 20px; color: var(--white); text-align: center; }
footer a { color: var(--white); text-decoration: none; transition: 0.3s ease; }
footer a:hover { opacity: 0.75; }

/*RESPONSIVE*/
@media (max-width: 768px) {
    #hero, #about, #services, #why-us, #gallery , #contact { padding: 12vh 5vw; }
    #hero h1, #about h1, #services h1, #why-us h1, #gallery h1, #contact h1 { font-size: 2em; }
    
    #hero a { font-size: 1.1em; padding: 10px 25px; }
    #hero .badge { font-size: 0.9em !important; }
    
    #about .row p { font-size: 1em; }
    #about img { max-width: 250px; height: auto; }
    
    #services p { font-size: 1em; }
    #services h5 { font-size: 1.1em; }
    
    #why-us h5 { font-size: 1.1em; }
    
    #gallery p { font-size: 1em; }
    
    #contact h5 { font-size: 1em; }
    
    footer p { font-size: 1em; }

}