@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.1), rgba(0, 0, 0, 0.1)), url("https://www.pyxida.co.za/images/home/hero-bg.png"); background-size: cover; background-repeat: no-repeat; background-position: center center; }
#hero::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, var(--red) 0%, #80011f 40%, var(--blue) 100%); z-index: -1; }
#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); }
#hero .btn-primary { width: max-content; margin: 3em auto; --border-color: linear-gradient(-45deg, #80011f, #356498, #FFF); --border-width: 0.125em; --curve-size: 0.3em; --blur: 30px; --bg: #080312; --color: #afffff; color: var(--color); cursor: pointer; position: relative; isolation: isolate; display: inline-grid; place-content: center; padding: 1em 2em; font-size: 1.2em; border: 0; text-transform: uppercase; box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.6); clip-path: polygon( 0% var(--curve-size), var(--curve-size) 0, 100% 0, 100% calc(100% - var(--curve-size)), calc(100% - var(--curve-size)) 100%, 0 100% );  transition: color 250ms; }
#hero .btn-primary::after, .btn-primary::before { content: ""; position: absolute; inset: 0; }
#hero .btn-primary::before { background: var(--border-color); background-size: 300% 300%; animation: move-bg7234 5s ease infinite; z-index: -2; }
@keyframes move-bg7234 { 0% { background-position: 31% 0%; } 50% { background-position: 70% 100%; } 100% { background-position: 31% 0%; } }
#hero .btn-primary::after { background: var(--bg); z-index: -1; clip-path: polygon(var(--border-width) calc(var(--curve-size) + var(--border-width) * 0.5), calc(var(--curve-size) + var(--border-width) * 0.5) var(--border-width), calc(100% - var(--border-width)) var(--border-width), calc(100% - var(--border-width)) calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5)), calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5)) calc(100% - var(--border-width)), var(--border-width) calc(100% - var(--border-width))); transition: clip-path 500ms; }
#hero .btn-primary:where(:hover, :focus)::after { clip-path: polygon(calc(100% - var(--border-width)) calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5)), calc(100% - var(--border-width)) var(--border-width), calc(100% - var(--border-width)) var(--border-width), calc(100% - var(--border-width)) calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5)), calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5)) calc(100% - var(--border-width)), calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5)) calc(100% - var(--border-width))); transition: 200ms; }
#hero .btn-primary:where(:hover, :focus) { color: #fff; }

@media (max-width: 768px) {
    #hero { background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url("https://www.pyxida.co.za/images/home/hero-bg.png"); 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); }
    #hero .btn-primary { display: block; font-size: 1em; padding: 1em 1.5em; margin: 3em 0px !important; }
}

/*Introduction Section*/
#introduction { padding: 5vw; text-align: center; background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), url("https://www.pyxida.co.za/images/home/intro-bg.webp"); width: 100%; height: 80vh; 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); }
#introduction a { margin: 2% auto; font-weight: 500 !important; padding: 12px 3em; color: var(--red); background-color: transparent; cursor: pointer; border: 2px solid var(--red); border-radius: 30px; box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); transition: all 0.3s ease 0s; }
#introduction a:hover { background-color: var(--blue); box-shadow: 0px 15px 20px rgba(43, 44, 44, 0.4); color: #fff; border: none; transform: translateY(-7px); }
#introduction a:active { transform: translateY(-1px); }

@media (max-width: 768px) { 
    #introduction { padding: 3vw; text-align: left; } 
    #introduction h2 { font-size: 2em; } 
    #introduction p { font-size: 1.2em; } 
    #introduction a { margin: 5% auto; padding: 8px 2em; } 
}

/*Services Section*/
#service { padding: 10vh 5vw; width: 100%; height: auto; }
#service h2 { font-size: 3em; color: var(--black); }
#service p { font-size: 1.5em; padding-bottom: 2em; padding-top: 1em; color: var(--black); }
#service .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; }
#service .card.one { background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("https://www.pyxida.co.za/images/home/strategy.webp"); }
#service .card.two { background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url("https://www.pyxida.co.za/images/home/web-dev.webp");  }
#service .card.three { background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("https://www.pyxida.co.za/images/home/marketing.webp");  }
#service .card:hover { transform: translateY(-5px); box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.15); }
#service .card h3 { color: var(--red); background-color: var(--white); padding: 10px 3em 10px 20px; font-size: 1.4em; font-weight: 500; width: max-content; text-align: left; border-radius: 2px 20px 20px 2px; }
#service .card p { font-size: 1em; color: var(--white); font-weight: 500 !important; margin-top: 1em; }
#service a { margin-top: 3%; background-color: transparent; padding: 10px 2em; color: var(--red); font-weight: 600 !important; border-radius: 25px; }
#service a:hover { background-color: var(--blue); box-shadow: 0px 15px 20px rgba(43, 44, 44, 0.4); color: #fff; border: none; transform: translateY(-7px); }
#service a:active { transform: translateY(-1px); }

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

/*Choice Section*/
#choice { padding: 15vh 5vw; text-align: left; width: 100%; height: auto; background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url("https://www.pyxida.co.za/images/home/choice-bg.webp"); background-size: cover; background-repeat: no-repeat; background-position: center center;  }
#choice h2 { font-size: 3em; color: var(--black); }
#choice p { font-size: 1.5em; padding-bottom: 2em; padding-top: 1em; color: var(--black); }
#choice .card { background-color: transparent; padding: 2em; border: none; }
#choice .card img { width: 250px; }
#choice .card h3 { color: var(--white); background-color: var(--red); font-size: 1.3em; padding: 10px 3em 10px 20px; text-align: left; width: max-content; border-radius: 3px 20px 20px 3px;  }
#choice .card p { color: var(--black); font-size: 1.1em; font-weight: 450; }

@media (max-width: 768px) { 
    #choice { padding: 10vh 3vw; text-align: left; height: auto; }
    #choice .card img { width: 180px; }
    #choice h2 { font-size: 2em; } 
    #choice p { font-size: 1.2em; } 
    #choice .card h3 { font-size: 1.25em; } 
    #choice .card p { font-size: 1em; } 
}

/*Project Section*/
#project { padding: 10vh 5vw; width: 100%; height: auto; }
#project h2 { font-size: 3em; color: var(--black); }
#project p { font-size: 1.5em; padding-bottom: 2em; padding-top: 1em; color: var(--black); }
#project .card { background-color: transparent; border: none; padding: 2em; }
#project img { width: 300px; height: auto; margin-left: -50px; }
#project .card h4 { color: var(--red); font-size: 1.3em; font-weight: 500; border-bottom: 1px solid #CDCDCD; padding: 0px 20px 10px 0px;  width: max-content; }
#project .card p { color: var(--blue); font-size: 1.2em; font-weight: 450 !important; margin-top: -10px; }
#project .card ul { margin-top: -30px; list-style: circle; font-size: 1em; margin-left: 15px; }
#project .card a { margin-top: 20px; color: var(--blue); font-weight: 500 !important; width: max-content; font-size: 1.1em; }
#project .card a:hover { color: var(--red); transition: 0.5s; }
#project .btn { margin-top: 3%; background-color: transparent; padding: 10px 2em; color: var(--red); font-weight: 600 !important; border-radius: 25px; }
#project .btn:hover { background-color: var(--blue); box-shadow: 0px 15px 20px rgba(43, 44, 44, 0.4); color: #fff; border: none; transform: translateY(-7px); }
#project .btn:active { transform: translateY(-1px); }

@media (max-width: 768px) { 
    #project { padding: 10vh 3vw; text-align: left; height: auto; }
    #project h2 { font-size: 2em; } 
    #project p { font-size: 1.2em; } 
    #project .card img { width: 250px; margin-left: -30px; } 
    #project .card ul { margin-left: 9px; }
    #project .card h4 { font-size: 1.25em; } 
    #project .card p { font-size: 1em; } 
    #project .card.one, #project .card.two { border-bottom: 1px solid #CDCDCD; border-radius: 0px; }
    #project a { padding: 8px 2em; margin-top: 5%; } 
}

/*Shop Section*/
#shop { padding: 5vw; 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/home/shop-img.webp"); width: 100%; height: 80vh; background-size: cover; background-repeat: no-repeat; background-position: center center; }
#shop h2 { font-size: 3em; color: var(--black); }
#shop p { font-size: 1.5em; padding-bottom: 1em; padding-top: 1em; color: var(--black); }
#shop a { margin: 2% auto; font-weight: 500 !important; padding: 12px 3em; color: var(--red); background-color: transparent; cursor: pointer; border: 2px solid var(--red); border-radius: 30px; box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); transition: all 0.3s ease 0s; }
#shop a:hover { background-color: var(--blue); box-shadow: 0px 15px 20px rgba(43, 44, 44, 0.4); color: #fff; border: none; transform: translateY(-7px); }
#shop a:active { transform: translateY(-1px); }

@media (max-width: 768px) { 
    #shop { padding: 3vw; text-align: left; } 
    #shop h2 { font-size: 2em; } 
    #shop p { font-size: 1.2em; } 
    #shop a { margin: 5% auto; padding: 8px 2em; } 
}

/*Testimonial Section*/
#testimonial { padding: 10vh 5vw; width: 100%; height: auto; }
#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/home/gym.webp"); padding-bottom: 3.5em; }
#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/shared/singer.webp"); padding-bottom: 3.5em; }
#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; }
}

/*Contact Section*/
#contact { padding: 5vw; text-align: center; background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url("https://www.pyxida.co.za/images/home/contact-img.webp"); width: 100%; height: 80vh; background-size: cover; background-repeat: no-repeat; background-position: center center; }
#contact h2 { font-size: 3em; color: var(--black); }
#contact p { font-size: 1.5em; padding-bottom: 1em; padding-top: 1em; color: var(--black); }
#contact a { margin: 2% auto; font-weight: 500 !important; padding: 12px 3em; color: var(--red); background-color: transparent; cursor: pointer; border: 2px solid var(--red); border-radius: 30px; box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); transition: all 0.3s ease 0s; }
#contact a:hover { background-color: var(--blue); box-shadow: 0px 15px 20px rgba(43, 44, 44, 0.4); color: #fff; border: none; transform: translateY(-7px); }
#contact a:active { transform: translateY(-1px); }

@media (max-width: 768px) { 
    #contact { padding: 3vw; text-align: left; } 
    #contact h2 { font-size: 2em; } 
    #contact p { font-size: 1.2em; } 
    #contact a { margin: 5% auto; padding: 8px 2em; } 
}

/* 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; }
}