@charset "utf-8";
/* CSS Document */
@font-face { font-family: 'Kamerik-Book'; src: url('../fonts/HankenGrotesk-Medium.ttf'); font-display: swap;}
@font-face { font-family: 'Kamerik-Bold'; src: url('../fonts/Kamerik-Bold.ttf'); font-display: swap;}
@font-face { font-family: 'Kamerik-Light'; src: url('../fonts/Kamerik-Light.ttf'); font-display: swap;}

body { background:#fff !important; color: #4B4949; font-family:"Kamerik-Book"; font-size: 0.75rem; }
p { font-size: 0.975rem; line-height: 1.625rem !important; width: 100%; text-align: justify; }
h1 { font-size: 2.25rem; color:#0070c0; line-height: 1rem; text-align: center; text-decoration:underline;  margin-bottom: 2.5rem; }
h2 { font-size: 1.625rem; color:#0070c0; line-height: 1.875rem; text-align: center; font-family: 'Kamerik-Bold'; }
h3 { font-size: 1.625rem; line-height: 1rem; text-align: left; line-height: 1.875rem; margin-bottom: 1.25rem; }
h4 { font-size: 1.625rem; color:#0070c0; line-height: 1.875rem; text-align: left; margin-bottom: 1.25rem; }
h5 {font-size: 3.625rem; color:#fff; line-height: 3.875rem; text-align: center; font-family: 'Kamerik-Bold';}
h6 {font-size: 1.625rem; color:#4B4949; line-height: 3.875rem; text-align: center; font-family: 'Kamerik-Bold';}
.caption { font-size: 0.688rem; line-height: 1.375rem !important; width: 100%; text-align: justify; margin-top: 3.438rem; }
.captionb { border: 0.063rem solid #00b050; padding: 0.313rem; }
.captionb p { font-size: 0.7rem !important; line-height: 0.938rem !important; }
.caption-brand { font-size: 0.788rem; line-height: 1.375rem !important; width: 100%; text-align: center; margin-top: 3.438rem; }

.margins { margin-top: 5rem !important; margin-bottom: 5rem !important; }
.navbar-collapse {  max-width: 37.5rem; padding: 0.938rem 0px !important; margin: auto; }
.navbar {position: absolute; width: 100%; top: 0; left: 0; background: transparent !important; z-index: 1000;}

.navbar .nav-link {color: white !important; /* Ensures text is visible on images */font-size: 1rem; margin-right: 20px; /* Adjust spacing between links */ }
.navbar .nav-link:hover {color: #f8f9fa !important; /* Light hover effect */}
.navbar-nav .nav-link.active {font-weight: bold; /* Make text bold */color: white !important; /* White text color */ position: relative; /* Required for the underline */}

.navbar-nav .nav-link.active::after {content: ''; position: absolute; left: 0;bottom: -3px; /* Adjust this for spacing */width: 100%; height: 3px; /* Thickness of underline */background-color: white; /* White underline */}
@media (max-width: 991px) { 
.navbar-collapse {background: white; /* White background for better visibility */padding: 10px;}
.navbar .nav-link {color: #0070c0 !important; /* Black text in mobile view */padding-left: 10px;}
.navbar-nav .nav-link.active {color: #00b050 !important; /* Ensure active link is also black */}
.navbar-nav .nav-link.active::after {background-color: #00b050; /* Black underline */}}

.row { margin: 2.5rem 0px !important; }

.footer { background-color: #0070c0; padding: 0.938rem 0px; }
.footer p { font-size: 0.875rem; color: #fff; line-height: 0.875rem !important; width: 100%; text-align: justify; }

.bi { font-size: 2rem; color:#fff; letter-spacing: 1rem; }
br { margin: 0.013rem 0px; }

@media (max-width: 48rem) { /* Mobile view */
.himg { width: 19.375rem; /* Increase size on mobile */ }
}
.captcha-box { display: flex; align-items: center; }
.captcha { font-weight: bold; font-size: 20px; background: #ddd; padding: 5px 10px; margin-right: 10px; }
.error { color: red; font-size: 14px; }
.form-group { margin-bottom: 15px; }
.form-control { width: 100%; padding: 8px; }
.btn { padding: 10px; background: blue; color: white; border: none; cursor: pointer; }


/* Carousel Fullscreen */
.carousel-item {height: 100vh; /* Makes sure the carousel covers the full viewport */background-size: cover; background-position: center;}
/* Circular Down Arrow */
.scroll-down {bottom: 60px; /* Moved 30px up from previous position */
    width: 80px;  /* Increased circle size */
    height: 80px; /* Increased circle size */
    font-size: 52px; /* Slightly bigger arrow */ position: absolute; left: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, 0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; text-decoration: none; animation: bounce 1.5s infinite; cursor: pointer; transition: background 0.3s, color 0.3s;}

.scroll-down:hover {background: white; color: #0070c0;}
@keyframes bounce {0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); }}
.hero-image {height: 100vh; object-fit: cover; object-position: 30% center; /* Shifts image slightly right */}
.hero-image3 {height: 100vh; object-fit: cover; object-position: 30% center; /* Shifts image slightly right */}