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

:root { --white: #FFFFFF; --black: #000; --blue: #72A6F4; --red: #F73533; --light-blue: #B2D1F3; --green: #2C6475; }

h1, h2, h3, h4, h5, h6 { font-family: "Barlow Condensed", sans-serif; font-optical-sizing: auto; font-weight: 600; }
p, a, li { font-family: "Open Sans", sans-serif; font-optical-sizing: auto; font-weight: 350 !important; }

body { overflow-x: hidden; scroll-behavior: smooth; }
  
/* Navbar - Section */
.navbar { background-color: transparent !important; }
.navbar img { max-width: 200px; height: auto; }
.navbar ul { text-align: center; font-size: 1.2em; }
.navbar li .nav-link { color: var(--dark-blue) !important; font-weight: 500 !important; }
.navbar li .nav-link:hover { color: var(--blue) !important; transition: 0.5s;  }

@media (max-width: 768px) { 
    .navbar img { max-width: 200px; }
    .navbar ul { text-align: center; font-size: 1.2em; }
}

/*Hero - Section*/
#hero { width: 100%; height: 110vh; text-align: center; padding: 5% 5% 0 10%; color: var(--white); background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url("https://www.zipdocs.pyxida.co.za/images/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); }
#hero a { width: max-content; padding: 10px 2.5em; border-radius: 5px; background-color: transparent; color: var(--white); border: 1px solid var(--white); margin: 3% auto; font-size: 1.3em; font-weight: 450 !important; }
#hero a:hover { background-color: var(--white); color: var(--black); transform: scale(1.05); transition: background-color 0.5s, color 0.4s, transform 0.7s; }

@media (max-width: 768px) {
    #hero { padding: 10vh 5vw; text-align: left; }
    #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 a { margin: 5% 0 0 0; font-size: 1em; padding: 10px 3em; }
}

/*Features - Section*/
#features { padding: 14vh 5vw; width: 100%; }
#features h2 { font-size: 3em; text-align: center; color: var(--black); }
#features .card { border: none; padding: 15px; text-align: center; margin-top: 5em; box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px; border-radius: 10px; }
#features .card:hover { transform: scale(0.95); box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; transition: 0.5s; }
#features .card img { max-width: 100px; height: auto; display: block; margin: auto; padding-top: 10px; }
#features .card h3 { margin-top: 2em; color: var(--blue); padding: 0px; }
#features .card p { padding: 5px; color: var(--black); font-weight: 450 !important; }
#features .btn-primary { display: block; margin: 5% auto; background-color: var(--blue); text-decoration: none; color: var(--black); font-weight: 550 !important; font-size: 1.2em; border: none; padding: 10px 25px; border-radius: 5px; box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; }
#features a:hover { background-color: var(--blue); color: var(--white); border: none; transition: 0.5s; }

@media (max-width: 768px) {
    #features { padding: 12vh 6vw; }
    #features h2 { font-size: 2.1em; }
    #features .card { margin-top: 2em; box-shadow: rgba(14, 63, 126, 0.06) 0px 0px 0px 1px, rgba(42, 51, 70, 0.03) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 2px 2px -1px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.03) 0px 5px 5px -2.5px, rgba(42, 51, 70, 0.03) 0px 10px 10px -5px, rgba(42, 51, 70, 0.03) 0px 24px 24px -8px; }
    #features .card img { max-width: 90px;}
    #features .card h3 { font-size: 1.4em; }
    #features .card p { font-size: 0.9em; }
    #features a { margin-top: 15%; font-size: 1em; padding: 10px 30px; }
}

/*Zipbooks - Section*/
#zipbooks { width: 100%; height: 110vh; text-align: center; padding: 5% 5% 0 10%; color: var(--white); background-image: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url("https://www.zipdocs.pyxida.co.za/images/zipbooks-hero.webp"); background-size: cover; background-repeat: no-repeat; background-position: center center; }
#zipbooks h2 { font-size: 3.5em; text-shadow: 2px 2px 4px rgba(184, 175, 175, 0.5); }
#zipbooks p { font-size: 1.4em; text-shadow: 2px 2px 4px rgba(184, 175, 175, 0.4); }
#zipbooks a { width: max-content; padding: 10px 2.5em; border-radius: 5px; background-color: transparent; color: var(--white); border: 1px solid var(--white); margin: 3% auto; font-size: 1.3em; font-weight: 450 !important; text-decoration: none; }
#zipbooks a:hover { background-color: var(--white); color: var(--black); transform: scale(1.05); transition: background-color 0.5s, color 0.4s, transform 0.7s; }

@media (max-width: 768px) {
    #zipbooks { padding: 10vh 5vw; text-align: left; }
    #zipbooks h1 { font-size: 2.5em; text-shadow: 1px 1px 3px rgba(184, 175, 175, 0.7); }
    #zipbooks p { font-size: 1.2em; text-shadow: 1px 1px 2px rgba(184, 175, 175, 0.7); }
    #zipbooks a { margin: 5% 0 0 0; font-size: 1em; padding: 10px 3em; }
}

/*How it Works - Section*/
#how-it-works { padding: 14vh 5vw; width: 100%; }
#how-it-works h2 { font-size: 3em; padding: 20px 0px 50px 0px; text-align: center; color: var(--black); }
#how-it-works .card { border: none; padding: 15px; text-align: center; margin-top: 5em; box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px; border-radius: 10px; }
#how-it-works .card:hover { transform: scale(0.95); box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; transition: 0.5s; }
#how-it-works .card img { max-width: 100px; height: auto; display: block; margin: auto; padding-top: 10px; }
#how-it-works .card h3 { margin-top: 2em; color: var(--blue); padding: 0px; }
#how-it-works .card p { padding: 5px; color: var(--black); font-weight: 450 !important; }

/*How it Works - Section*/
#faq {  width: 100%; height: auto; padding: 10vh 5vw; color: var(--white); background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url("https://www.zipdocs.pyxida.co.za/images/faq-hero.webp"); background-size: cover; background-repeat: no-repeat; background-position: center center; }
#faq h2 { font-size: 3em; padding: 20px 0px 50px 0px; text-align: center; }
#faq .card { padding: 10px; margin-top: 1em; border: none; border-bottom: 1px solid #CDCDCD; border-radius: 0px; background-color: transparent; }
#faq .card h3 { background-color: var(--blue); color: var(--white); padding: 10px 25px; border-radius: 0px 30px 30px 0px; width: max-content; }
#faq .card p { color: var(--white); font-weight: 450 !important; margin-top: 10px; }

@media (max-width: 768px) {
    #faq { padding: 10vh 3vw; background-position: 30% center;  }
    #faq .card h3 { background-color: transparent; color: var(--blue); padding: 5px 5px 0px 0px; border-radius: 0px; width: auto; font-size: 1.3em; }
    #faq .card p { font-size: 0.9em; margin-top: 0px; }
}

/*Contact Section*/
#contact { padding: 14vh 5vw; text-align: center; width: 100%; height: auto; }
#contact h2 { font-size: 3em; color: var(--black); padding: 5px; }
#contact p { font-size: 1.4em; padding-bottom: 2em; color: var(--black); font-weight: 450 !important; }
#contact form button { width: max-content; padding: 10px 2em; border-radius: 30px; background-color: var(--blue); color: var(--white); border: none; margin: 3% auto; font-size: 1.2em; font-weight: 450 !important; }
#contact form button:hover { background-color: var(--light-blue); color: var(--black); transform: scale(1.05); transition: background-color 0.5s, color 0.4s, transform 0.7s; }

@media (max-width: 768px) { 
    #contact { padding: 10vh 4vw; } 
    #contact h2 { font-size: 3em; text-align: center; } 
    #contact p { font-size: 1.4em; font-weight: 400 !important; text-align: center; }   
    #contact form button { margin: 5% auto; font-size: 1em; padding: 8px 2em; } 
}

/* Footer Section */
#footer { padding: 6vh 6vw; background-color: var(--black); color: var(--white); font-size: 1rem; }
#footer a { color: var(--blue); text-decoration: none; }
#footer a:hover { color: var(--light-blue); transition: 0.5s; }

@media (max-width: 768px) {
    #footer { text-align: center; }
    #footer a { font-size: 1em; }
}