@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/portfolio/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); }
}

/* Portfolio Section */
#portfolio { padding: 10vh 5vw; }
#portfolio h2 { color: var(--red); font-size: 1.8em; font-weight: 550; padding-top: 10px; text-align: center; }
#portfolio p {  color: var(--blue); text-align: center; font-weight: 500 !important; }
#portfolio img { max-width: 170px; height: auto; display: block; margin: auto; }
#portfolio a { color: var(--black); text-decoration: none; font-weight: 600; font-size: 1em; padding: 4px 8px; border: 1px solid var(--black); border-radius: 5px; display: block; margin: auto; text-align: center; width: 50%; margin-top: 5%; }
#portfolio a:hover { background-color: var(--red); color: var(--white); border: none; }
#portfolio .service-card { background-color: var(--white); padding: 20px; border-radius: 10px; transition: transform 0.3s ease; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; border: 1px solid #CDCDCD; }
#portfolio.service-card:hover { transform: scale(1.05); }
#portfolio .additional-info { display: none; padding: 20px; border-top: 1px solid var(--blue); margin-top: 20px; text-align: center; }
#portfolio .additional-info p { text-align: left; font-size: 1em; color: var(--red); }
#portfolio .additional-info li { color: var(--blue) !important; font-size: 0.9em; text-align: left; }
#portfolio .additional-info a { border: none; padding: 5px; background-color: transparent; color: var(--red) !important; font-size: 1em; width: 60%; }
#portfolio .additional-info .btn-primary:hover {  transform: scale(1.05); }
#portfolio .service-card.expanded .additional-info { display: block; }

@media (max-width: 768px) {
  #portfolio { padding: 10vh 2vw; }
  #portfolio h2 { font-size: 1.2em; padding-top: 5px; text-align: left; }
  #portfolio p { font-size: 1em; text-align: left; }
  #portfolio img { max-width: 80px; height: auto; float: left; margin-right: 10px; }
  #portfolio a { display: block; margin-right: 20px; font-size: 0.85em; padding: 5px; width: 30%; }
  #portfolio .service-card { padding: 15px 10px; }
  #portfolio .additional-info { padding: 15px; text-align: left; }
  #portfolio .additional-info p { text-align: left; font-size: 0.9em; }
  #portfolio .additional-info li { font-size: 0.8em; text-align: left; }
  #portfolio .additional-info .btn-primary { display: block; margin: auto; width: 50%; font-size: 0.95em;  }
  #portfolio .service-card.expanded .additional-info { display: block; }
}

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