@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.45), rgba(0, 0, 0, 0.45)), url("https://www.pyxida.co.za/images/terms/hero-img.webp"); 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 { 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; }
}

/* Terms Section */
#terms { padding: 10vh 12vw; }
#terms img { max-width: 200px; height: auto; display: block; margin: auto; padding-bottom: 20px; }
#terms h2 { color: var(--red); font-size: 3em; text-align: center; font-weight: 600; padding-bottom: 3%; }
#terms h3 { color: var(--red); font-size: 1.5em; text-align: left; font-weight: 600; }
#terms p { color: var(--blue); font-size: 1.2em; font-weight: 500; }
#terms li { color: var(--red); font-size: 1.1em; font-weight: 500; }

@media (max-width: 768px) {
    #terms { padding: 10vh 5vw; }
    #terms img { max-width: 120px; }
    #terms h2 { font-size: 2.2em;  }
    #terms p { font-size: 1em; } 
}

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