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


:root { --white: #FFFFFF; --black: #000; --gold: #CDA540; --yellow: #F9E791; }

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

@keyframes fadeSlideUp {
    0% {
      opacity: 0;
      transform: translateY(30px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
}
  
  /* Initial state before scroll */
.fade-up-init {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
  
/* Triggered on scroll */
.fade-up-visible {
    animation: fadeSlideUp 0.6s ease-out forwards;
}
  
  
body { overflow-x: hidden; scroll-behavior: smooth; }

/*Back Button*/
.back-to-top { position: fixed; bottom: 20px; right: 20px; z-index: 999; background: var(--gold); color: #333; padding: 10px 12px; border-radius: 50%; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); text-align: center; font-size: 24px; line-height: 1; transition: opacity 0.3s ease; opacity: 0.8; display: none; }
.back-to-top:hover { opacity: 1; background: #f0f0f0; color: var(--black); }

/* Navbar - Section */
.navbar { background-color: var(--black) !important; }
.navbar img { max-height: 150px; height: auto; width: auto; padding: 5px;}
.navbar-brand { display: flex; align-items: center; gap: 10px; }
.navbar ul { text-align: center; font-size: 1.2em; }
.navbar li .nav-link { color: var(--gold) !important; font-weight: 500 !important; }
.navbar li .nav-link:hover { color: var(--yellow) !important; transition: 0.5s;  }

@media (max-width: 768px) {
    .navbar img { max-height: 120px; padding: 5px; margin-left: 10px; }
    .navbar ul { font-size: 1.1em; }
}

/*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.tactpam.com/images/hero-img.webp"); background-size: cover; background-repeat: no-repeat; background-position: center center; }
#hero h1 { font-size: 3em; text-shadow: 2px 2px 4px rgba(184, 175, 175, 0.1); }
#hero p { font-size: 1.7em; text-shadow: 2px 2px 4px rgba(184, 175, 175, 0.1); }
#hero a { width: max-content; padding: 15px 2em; border-radius: 30px; background-color: var(--black); color: var(--gold); border: none; margin: 3% auto; font-size: 1.3em; font-weight: 450 !important; }
#hero a:hover { background-color: var(--gold); color: var(--black); transform: scale(1.05); transition: background-color 0.5s, color 0.4s, transform 0.7s; }
#hero i { margin-right: 8px; }

@media (max-width: 768px) {
    #hero { text-align: left; padding: 10vh 5vw; background-position: 25% center; }
    #hero h1 { font-size: 1.8em; text-shadow: 1px 1px 3px rgba(184, 175, 175, 0.1); }
    #hero p { font-size: 1.1em; text-shadow: 1px 1px 2px rgba(184, 175, 175, 0.1); padding-top: 20px; }
    #hero a { margin: 5% 0 0 0; font-size: 1em; padding: 15px 2em; }
}
 
/*Challenge - Section*/
#challenge { border: 20px solid var(--gold); width: 100%; height: 110vh; text-align: center; padding: 10vh 5vw; color: var(--white); background-image: linear-gradient(rgba(252, 252, 252, 0.7), rgba(254, 254, 254, 0.7)), url("https://www.tactpam.com/images/challenge.webp"); background-size: cover; background-repeat: no-repeat; background-position: center center; }
#challenge i { padding-right: 5px; }
#challenge h2 { font-size: 3em; color: var(--black); }
#challenge p { font-size: 1.5em; color: var(--black); padding: 15px 30px; border-top: 1px solid var(--black); border-bottom: 1px solid var(--black); margin-top: 3%; border-radius: 0px; background-color: rgba(254, 254, 254, 0.7); }

@media (max-width: 768px) {
    #challenge { border: 5px solid var(--gold); padding: 10vh 3vw; height: auto; }
    #challenge h2 { font-size: 1.8em; }
    #challenge p { font-size: 1em; padding: 5px 10px; }
}

/* About Us - Section */
#about { width: 100%; height: auto; padding: 12vh 5vw; background-color: var(--black); }
#about h2 { font-size: 3em; color: var(--white); }
#about .lead { color: var(--gold); font-size: 1.4em; padding: 2% 4%; }
#about img { width: 100%; width: 100%; height: 100%; object-fit: cover; }
#about .about-text { color: var(--yellow); border-left: 1px solid #6b6868; max-width: 800px; margin: 0 auto; }
#about a { background-color: transparent; border: 1px solid var(--gold); color: var(--gold); padding: 8px 15px; }
#about a:hover { background-color: var(--gold); color: var(--black); transition: 0.5s; }

@media (max-width: 768px) {
    #about { padding: 10vh 4vw; }
    #about h2 { font-size: 1.8em; } 
    #about .lead { font-size: 1em; padding: 20px 6vw; }
    #about img { width: 100%; }
    #about .about-text { margin-top: 30px; border: none; }
    #about a { padding: 8px 15px; font-size: 1em; }
}

/* Solutions - Section */
#solutions{ width: 100%; height: auto; padding: 12vh 5vw; }
#solutions h2 { color: var(--black); font-size: 3em; }
#solutions .lead { font-size: 1.4em; padding: 2% 4%;  }

@media (max-width: 768px) { 
    #solutions { padding: 10vh 3vw; } 
    #solutions h2 { color: var(--black); font-size: 3em; }
    #solutions .lead { font-size: 1em; padding: 20px 6vw; } 
}

/* Products - Section */
#products { width: 100%; height: auto; padding: 12vh 5vw; background-color: var(--black); }
#products h2 { color: var(--white); font-size: 3em; }
#products .lead { color: var(--gold); font-size: 1.4em; padding: 2% 4%; }
#products .row i { font-size: 60px; color: var(--white); }
#products .row h5 { margin-top: 5%; color: var(--gold); font-size: 1.3em; }
#products .card-body { font-size: 1em; color: var(--white); border: 1px solid var(--yellow); padding: 10px 20px; border-radius: 5px; display: block; margin: 2% auto 0 auto; }
#products .btm-font { text-align: center; color: var(--gold); border-top: 1px solid #545353; border-bottom: 1px solid #545353; width: max-content; padding: 10px 20px; display: block; margin: 5% auto 0 auto; }

@media (max-width: 768px) { 
    #products { padding: 10vh 4vw; } 
    #products h2 { font-size: 1.8em; } 
    #products .lead { font-size: 1em; padding: 20px 6vw; }
    #products .row i { font-size: 50px; }
    #products .row h5 { margin-top: 5%; font-size: 1.2em; }
    #products .card-body { font-size: 1em; }
    #products .btm-font { font-size: 1em; width: auto; }
}

/* Benefits - Section */
#benefits { width: 100%; height: auto; padding: 12vh 5vw; }
#benefits h2 { color: var(--black); font-size: 3em; }
#benefits .text-muted { color: var(--black); font-size: 1.4em; padding: 2% 4%; }
#benefits .card { padding: 2em; width: 100%; height: 30vh; background: center center / cover no-repeat; border-radius: 4px; 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; }
#benefits .card h3 { display: block; margin: 2% auto; color: var(--gold); background-color: var(--black); font-size: 1.2em; font-weight: 500; width: max-content;  border: 1px solid var(--gold); padding: 10px 15px; border-radius: 5px; }

#benefits .card i { padding-right: 8px; }
#benefits .card p { text-align: center; color: var(--white); padding: 5px; border-bottom: 1px solid var(--white); }

#benefits .card.one { background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://www.tactpam.com/images/natural-ingredients.webp"); }
#benefits .card.two { background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://www.tactpam.com/images/local-farmers.webp");  }
#benefits .card.three { background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://www.tactpam.com/images/science-backed.webp");  }
#benefits .card.four { background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://www.tactpam.com/images/affordable-alternative.webp");  }
#benefits .card.five { background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://www.tactpam.com/images/private-label.webp");  }
#benefits .card.six { background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://www.tactpam.com/images/south-african.webp");  }

#benefits .card:hover { transform: translateY(-5px); box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.15); }

@media (max-width: 768px) { 
    #benefits {padding: 10vh 3vw; } 
    #benefits h2 { font-size: 1.8em; } 
    #benefits .text-muted { font-size: 1em; padding: 20px 6vw; }
    #benefits .card { margin-bottom: 2em; } 
    #benefits .card h3 { font-size: 1em; padding: 10px; } 
    #benefits .card i { padding-right: 4px; } 
}

/* Partners - Section */
#partners { width: 100%; height: auto; padding: 12vh 5vw; background-color: var(--black); }
#partners h2 { color: var(--white); font-size: 3em; }
#partners .lead { color: var(--gold); font-size: 1.4em; padding: 2% 4%; }
#partners lord-icon { width: 150px; height: 150px; }
#partners .row h5 { margin-top: 5%; color: var(--gold); font-size: 1.3em; }

@media (max-width: 768px) { 
    #partners { padding: 10vh 4vw; } 
    #partners h2 { font-size: 1.8em; } 
    #partners .lead { font-size: 1em; padding: 20px 6vw; }
    #partners .row i { font-size: 50px; }
    #partners .row h5 { margin-top: 5%; font-size: 1.1em; }
}

/* Contact - Section */
#contact { padding: 12vh 5vw; width: 100%; height: auto; }
#contact h2 { color: var(--black); font-size: 3em; }
#contact .text-muted { font-size: 1.5em; }
#contact .socials { padding-top: 40px; }
#info ul { padding: 5px 0px 0px 50px; }
#info li { text-align: left; }
#contact form { margin-top: 5%; }
#contact form button { background-color: var(--black); color: var(--gold); border: none; }
#contact form button:hover { background-color: var(--gold); color: var(--black); transition: 0.5s; }

@media (max-width: 768px) {
    #contact { text-align: left; padding: 10vh 5vw; }
    #contact h2 { font-size: 1.8em; }
    #contact .text-muted { font-size: 1.1em; padding: 20px 5vw; }
    #contact form { width: 95%; display: block; margin: auto; }
    #info ul { padding: 5px; }
    #info li { font-size: 1em !important; }
}

/* Footer Section */
#footer { padding: 6vh 6vw; background-color: var(--black); color: var(--gold); font-size: 1rem; }
#footer a, #footer p { color: var(--gold); text-decoration: none; }
#footer a:hover { color: var(--yellow); transition: 0.5s; }
#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(--gold); }

@media (max-width: 768px) {
    #footer { text-align: center; }
}