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

:root { --red: #80011F; --blue: #356498; --white: #FFFFFF; --black: #000; }

h1, h2, h3, h4, h5, h6 {  font-family: "Oxanium", 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 */
nav img { max-width: 250px; height: auto; padding: 20px; }
.navbar-toggler { background-color: transparent; border: none; outline: none; }
.navbar-toggler:hover, .navbar-toggler:visited, .navbar-toggler:focus { border: none; outline: none; }
.navbar-toggler-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba%281,1,1,1%29' stroke-width='2' d='M4 7h22M4 15h22M4 23h22' /%3E%3C/svg%3E"); }
.offcanvas-header { background-color: var(--white); color: var(--red); }
.offcanvas-header h5 { font-size: 1.3em; font-weight: 550; padding: 10px 5px !important; }
.offcanvas-header button { color: var(--white); }
.offcanvas-body { background: linear-gradient(135deg, var(--red) 0%, #80011f 40%, var(--blue) 100%); }
.offcanvas-body a { color: var(--white); margin-top: 10px; margin-left: 10px; }
.offcanvas-body a:hover { color: #aba6a6; transition: 0.5s; transform: scale(1.05); }
.offcanvas-body i { padding-right: 5px; }

/*Hero - Section*/
#hero { position: relative; width: 100%; height: 110vh; color: var(--white); text-align: center; padding: 5% 5% 0 10%; background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url("https://www.pyxida.co.za/images/about/hero-img.webp"); background-size: cover; background-repeat: no-repeat; background-position: center center; }
#hero h1 { font-size: 4em; text-shadow: 2px 2px 4px rgba(184, 175, 175, 0.5); }
#hero p { font-size: 1.7em; text-shadow: 2px 2px 4px rgba(184, 175, 175, 0.4); }

@media (max-width: 768px) {
    #hero { text-align: left; padding: 10vh 5vw; }
    #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); }
}

/*Introduction Section*/
#introduction { padding: 10vh 8vw; text-align: center; background-image: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)), url("https://www.pyxida.co.za/images/about/intro-bg.webp"); width: 100%; height: auto; background-size: cover; background-repeat: no-repeat; background-position: center center; }
#introduction h2 { font-size: 3em; color: var(--black); }
#introduction p { font-size: 1.5em; padding-bottom: 1em; padding-top: 1em; color: var(--black); }

@media (max-width: 768px) { 
    #introduction { padding: 10vh 3vw; text-align: left; } 
    #introduction h2 { font-size: 2em; } 
    #introduction p { font-size: 1.2em; } 
}

/*Services Section*/
#mission { padding: 10vh 5vw; width: 100%; height: auto; }
#mission h2 { font-size: 3em; color: var(--black); }
#mission p { font-size: 1.5em; padding-bottom: 2em; padding-top: 1em; color: var(--black); }
#mission .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; }
#mission .card.one { background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://www.pyxida.co.za/images/about/mission.webp"); }
#mission .card.two { background-image: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url("https://www.pyxida.co.za/images/about/vision.webp");  }
#mission .card.three { background-image: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url("https://www.pyxida.co.za/images/about/committment.webp");  }
#mission .card:hover { transform: translateY(-5px); box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.15); }
#mission .card h3 { color: var(--red); background-color: var(--white); padding: 10px 1.5em 10px 20px; font-size: 1.4em; font-weight: 500; width: max-content; text-align: left; border-radius: 2px 20px 20px 2px; }
#mission .card p { font-size: 1em; color: var(--white); font-weight: 500 !important; margin-top: 1em; }


@media (max-width: 768px) { 
    #mission {padding: 10vh 3vw; height: auto; } 
    #mission h2 { font-size: 2em; } 
    #mission p { font-size: 1.2em; } 
    #mission .card { margin-bottom: 2em; } 
    #mission .card img { width: 130px; } 
    #mission .card h3 { font-size: 1.15em; } 
    #mission .card p { font-size: 0.95em; } 
}

/*Testimonial Section*/
#testimonial { padding: 10vh 5vw; width: 100%; height: auto; background-image: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)), url("https://www.pyxida.co.za/images/about/intro-bg.webp"); width: 100%; height: auto; background-size: cover; background-repeat: no-repeat; background-position: center center; }
#testimonial h2 { font-size: 3em; color: var(--black); }
#testimonial p { font-size: 1.5em; padding-bottom: 2em; padding-top: 1em; color: var(--black); }

#testimonial .blockquote { border: none; padding: 2em; background: center center / cover no-repeat; border-radius: 8px; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.4); border-radius: 10px; display: flex; flex-direction: column; justify-content: flex-end; transition: transform 0.3s ease, box-shadow 0.3s ease; }
#testimonial .blockquote:hover { transform: translateY(-5px); box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.15); }
#testimonial .blockquote.one { background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://www.pyxida.co.za/images/about/ghostforge.webp"); }
#testimonial .blockquote.two { background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://www.pyxida.co.za/images/shared/candle.webp"); }
#testimonial .blockquote.three { background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://www.pyxida.co.za/images/about/jeseleah.webp"); }
#testimonial .blockquote.four { background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://www.pyxida.co.za/images/about/hills.webp"); }

#testimonial .blockquote p { font-size: 0.9em; color: var(--white); }
#testimonial .blockquote .blockquote-footer { color: #CDCDCD; font-size: 1em; font-weight: 500 !important; }

@media (max-width: 768px) { 
    #testimonial{ padding: 10vh 3vw; text-align: left; height: auto; }
    #testimonial h2 { font-size: 2em; } 
    #testimonial p { font-size: 1.2em; } 
    #testimonial .blockquote p { font-size: 0.85em; }
    #testimonial .blockquote.one, #testimonial .blockquote.three { padding-bottom: 2em; }
    #testimonial .blockquote .blockquote-footer { font-size: 0.9em; }
}
/* Footer Section */
#footer { padding: 6vh 6vw; background: linear-gradient(135deg, var(--red), #80011f 40%, var(--blue) 100%); color: var(--white); font-size: 1rem; }
#footer .footer-flag { height: 50px; }
#footer .footer-tagline { font-size: 1.1rem; color: var(--white); font-weight: 500; margin: 0; }
#footer .list-inline { margin: 0; padding: 0; }
#footer .footer-icon { display: inline-block; transition: transform 0.3s ease, opacity 0.3s ease; width: 40px; height: 40px; }
#footer .footer-icon:hover { transform: scale(1.2); opacity: 0.8; }
#footer .footer-text { font-size: 0.9rem; margin: 0; color: var(--white); }

@media (max-width: 768px) {
    #footer { text-align: center; }
    #footer .footer-flag { margin-bottom: 1rem; }
    #footer .footer-tagline { font-size: 1rem; }
}