/* General Styles */
body {
    font-family: "Karla", sans-serif;
    background-image: url("bg2.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color: #ffffff;
    padding-bottom: 0px;
}

.container {
    height: 100%;
}

/* Typography */
.brand-name {
    font-weight: bold;
    color: #ffffff;
    margin-left: 1vw; /* Space between logo and text */
    white-space: nowrap; /* Prevent wrapping */
}

.brand-name, .page-title {
    font-size: 5vw; /* Scale font size dynamically */
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

p {
    font-size: 16px;
    margin-bottom: 21px;
}

.page-title {
    font-weight: bold;
    margin-bottom: 6px;
}

.page-description {
    max-width: none;
    width: 100%;
    font-size: 22px;
    margin-bottom: 59px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
}

@media (max-width: 767px) {
    .page-title {
        font-size: 35px;
        margin-bottom: 14px;
    }

    .page-description {
        font-size: 14px;
    }
}

/* Layout */
.navbar-brand {
    margin-right: 0;
}

.navbar-brand img {
    max-height: 20vw; /* Increase size for desktop */
    width: auto;
    max-width: 100%; /* Ensure it doesn’t exceed its container */
}

.navbar-dark {
    padding-top: 35px;
    padding-bottom: 35px;
}

/* Components */
.navbar-dark .navbar-text {
    color: #ffffff;
    opacity: 1;
    padding: 0 20px;
    border-right: 1px solid #ffffff;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}

.navbar-dark .navbar-text:last-child {
    border-right: 0;
}

.footer-social-links .social-link {
    display: inline-block;
    text-align: center;
    line-height: 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
	background-color: #cc5200; /* Darker shade of orange */
    color: #000000;
    margin-right: 16px;
    transition: all 0.3s ease-in-out;
}

.footer-social-links .social-link:last-child {
    margin-right: 0;
}

.footer-social-links .social-link:hover {
    text-decoration: none;
    background-color: #ff6600; /* Vibrant orange */
    color: #ffffff;
}

/* Media Queries */
@media (max-width: 767px) {
    header {
        margin-bottom: 2vh; /* Smaller gap below header */
    }
	
    body {
        padding-bottom: 90px;
    }

    main {
        padding: 2vh 4vw; /* Adjust padding for compact layout */
    }

    .footer-social-links {
        margin-top: 3vh; /* Reduce gap above footer */
    }

    .brand-name {
        font-size: 9vw; /* Larger text for the logo */
    }

    .page-title {
        font-size: 8vw; /* Larger title font size */
        line-height: 1.1; /* Adjust line spacing for better balance */
    }

    .page-description {
        font-size: 5vw; /* Larger description text */
        line-height: 1.3; /* Adjust line spacing */
    }

    .navbar-brand img {
        max-height: 20vw; /* Slightly larger logo */
        width: auto;
    }
}

@media (max-width: 400px) {
    .brand-name {
        font-size: 10vw; /* Extra large for logo text */
    }

    .page-title {
        font-size: 9vw;
    }

    .page-description {
        font-size: 6vw;
    }

    .navbar-brand img {
        max-height: 25vw; /* Even larger logo */
    }
}