/* style.css */
@import url(
'https://fonts.googleapis.com/css2?family=Verdana&display=swap');

*,
*
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* CRITICAL: Forces the body to be at least the height of the screen */
    background-color: #fff;
    font-family: "Verdana", sans-serif;
    font-weight: 400;
}

.header {
    background-color: #FFD966;
    flex-shrink: 0;
}

.content-wrapper {
    flex: 1 0 auto; /* This tells the content to grow and fill all available space */
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important; /* Forces content to start at the top */
    background-color: #fff;
}

.logo {
    background:url(logo.png) no-repeat
    width:100px;
    height:35px;
    text-indent:-9999px;
    cursor: pointer;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 40px; /* Adjust this to control space between Menu and Language */
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: hsl(47, 95%, 76%);
    color: #000;
}

.navbar-links {
    display: flex !important;   /* Force horizontal */
    flex-direction: row !important;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
    gap: 25px;                  /* Space between items */
}

.navbar-links li {
    display: block;
    margin: 0;
    padding: 0;
    line-height: 1;             /* Prevents stepping */
}

.navbar-links li a {
    text-decoration: none;
    color: #1A0841;
    font-weight: bold;
    font-size: 16px;
    display: inline-block;             /* Makes the clickable area consistent */
    padding: 8px 0; /* Add some vertical space for the underline */
    border-bottom: 3px solid transparent; /* Hidden by default */
    transition: border-color 0.3s ease; /* Smooth fade-in for the underline */
}

.navbar-links li a.active {
    border-bottom: 3px solid #FFAD5A !important; /* Your ScoreProf Orange */
}

.language-selector-container {
    text-align: right;
    padding: 10px;
    background: hsl(47, 95%, 76%);
    font-family: "Verdana", sans-serif;
    font-size: 16px;
    font-weight: bold;
}

.content {
    display: none; /* This is the "magic" line */
    padding-top: 60px !important;
    padding-bottom: 20px !important;
    animation: fadeIn 0.5s; /* Optional: Makes it look modern */
    box-sizing: border-box; /* Ensures padding stays inside the container */
    font-family: "Verdana", sans-serif;
    color: #333;
}

@media (max-width: 600px) {
    .content {
	padding: 40px 20px; /* Smaller padding for mobile screens */
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 1. The Full Section (Navy Background) */
.hero-section {
    background-color: #1A0841; /* Your Dark Navy */
    color: white;
    padding: 80px 0;
    min-height: 80vh;
    display: flex;
    align-items: center;
}

/* 2. The Flex Container (The Fix) */
.hero-container {
    display: flex;
    flex-direction: row; /* Forces side-by-side */
    align-items: center; /* Vertically centers text and image */
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 50px;
}

/* 3. Text Styling */
.hero-text {
    flex: 1; /* Takes up half the space */
    text-align: left;
    padding-right: 60px; /* Gap between text and image */
}

.hero-text h1 {
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 20px;
}

.hero-text h1 span {
    color: #FFAD5A; /* Your ScoreProf Orange */
}

/* 4. Image Styling (Vertical Taming) */
.hero-image {
    flex: 0 0 350px; /* Fixes the width so it doesn't get huge */
}

.hero-image img {
    width: 100%;
    height: auto;
    max-height: 550px; /* Keeps it a nice vertical size */
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    border: 1px solid rgba(255, 173, 90, 0.3); /* Subtle orange glow */
}

/* News Section Container */
#news {
    max-width: 900px;
    margin: 0 auto;
    text-align: left; /* News is easier to read left-aligned */
}

/* The Card Container */
.news-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start; /* Keeps icon at the top of text */
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.8) !important;
    margin-bottom: 25px !important;
    padding: 20px !important;
    transition: transform 0.2s, border-color 0.2s;
    border: 1px solid #eee;
    max-width: 800px;
}

.news-card:hover {
    transform: translateY(-3px);
    border-color: #FFAD5A; /* Your ScoreProf Orange */
}

/* The Icon Side */
.news-image {
    flex: 0 0 80px !important; /* Fixed width for the icon */
    margin-right: 25px !important;
}

.news-image img {
    width: 80px !important;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
}

.news-image.icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    /*background: linear-gradient(135deg, #1877F2, #0a52be);*/
    width: 80px;
    height: auto; /* Adjust based on your news-image height */
    object-fit: contain;
    border-radius: 8px;
    color: white;
}

.news-image.icon-box i {
    font-size: 5rem;
    filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.2));
    /*color: #1877F2;  Official Facebook Blue */
}

/* The Text Side */
.news-body {
    flex: 1;
    text-align: left !important;
}

.news-date {
    font-size: 0.8rem;
    color: #888;
    text-transform: uppercase;
    font-weight: bold;
}

.news-body h3 {
    margin: 0 0 10px 0 !important;
    color: #1A0841; /* Your Dark Navy */
}

.news-body p {
    margin: 0;
    color: #555;
    line-height: 1.5;
}

/* Mobile Responsive */
@media (max-width: 600px) {
    .news-card {
        flex-direction: column;
        text-align: center;
    }
    .news-image {
        margin-right: 0;
        margin-bottom: 15px;
    }
}

#services {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center; /* This centers the H1 and Subtitle */
    padding-top: 40px !important; /* Matches the top gap of the About section */
}

#services .about-header {
    text-align: center;
    margin-bottom: 25px;
}

#services .subtitle {
    display: block;
    color: #FFAD5A;
    font-weight: bold;
    font-style: italic;
    margin-top: 5px;
}

.services-footer {
    margin-top: 40px;
    padding: 15px;
    background: rgba(26, 8, 65, 0.03); /* Very light orange tint */
    border-left: 4px solid #FFAD5A;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    font-style: italic;
    clear: both; /* Ensures it stays below the cards */
}

.services-footer p {
    color: #1A0841;
    font-size: 1rem;
    line-height: 1.5;
}

#contact {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center; /* This centers the H1 and Subtitle */
    padding-top: 40px !important; /* Matches the top gap of the About section */
}

#contact .about-header {
    text-align: center;
    margin-bottom: 25px;
}

/* About Section Layout */
#about {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.about-header {
    margin-bottom: 50px;
}

.about-header h1 {
    color: #1A0841; /* Dark Navy */
    font-size: 2.5rem;
}

.about-header .subtitle {
    color: #FFAD5A; /* Orange */
    font-weight: bold;
    font-style: italic;
}

/* Grid for the cards */
.about-grid {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 1100px;
    margin-top: 20px;
    margin: 0 auto;
}

.about-card {
    flex: 1 1 300px; /* Allows cards to grow/shrink intelligently */
    max-width: 340px;
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border-top: 4px solid #1A0841; /* Navy top accent */
    transition: transform 0.3s ease;
    text-align: left;
}

.about-card:hover {
    transform: translateY(-5px);
    border-top-color: #FFAD5A; /* Turns orange on hover */
}

.about-card i {
    font-size: 1.6rem;
    color: #FFAD5A;
    margin-bottom: 12px;
    display: block;
}

.about-card h3 {
    color: #1A0841;
    margin-bottom: 15px;
}

.about-card p {
    color: #555;
    line-height: 1.6;
}

.values-list {
    text-align: left;
    list-style: none;
    padding: 0;
}

.values-list li {
    margin-bottom: 10px;
    font-size: 0.95rem;
    color: #555;
}

.values-list li strong {
    color: #1A0841;
}

/* Mobile Tweak */
@media (max-width: 768px) {
    .about-grid {
        flex-direction: column;
    }
}

/* 5. The Orange Button */
.btn-orange {
    display: inline-block;
    background-color: #FFAD5A;
    color: #1A0841;
    padding: 15px 35px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 30px;
}

.footer {
    background-color: #0f0526; /* A deeper navy for contrast */
    color: #ffffff;
    padding: 20px 0;
    margin-top: auto; /* Pushes to bottom if content is short */
    border-top: 1px solid rgba(255, 173, 90, 0.2); /* Subtle orange line */
    /*font-size: 0.9rem;
    flex-shrink: 0;*/
    width: 100%;
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 50px;
}

.footer-brand, .footer-socials, .footer-legal {
    flex: 1,
}    

.footer-brand {
    text-align: left;
}

/*.footer-brand p {
    margin: 0;
    font-size: 0.9em;
}*/

.footer-brand .tagline {
    color: #FFAD5A; /* Your ScoreProf Orange */
    font-style: italic;
    /*font-weight: bold;*/
    font-size: 0.8em;
    /*margin-top: 4px;*/
}

.fa-facebook {
    color: #1877F2 !important;
    /*color: #ffffff !important;*/
    font-size: 1.5rem;
}

.fb-circle {
    background-color: #1877F2; /* Official Facebook Blue */
    width: 24px;               /* Adjusted to frame a 1.5rem icon */
    height: 24px;
    border-radius: 50%;
    display: inline-flex;      /* Use flex to position the 'f' */
    align-items: flex-end;     /* Force 'f' to the bottom */
    justify-content: flex-end; /* Shift 'f' slightly right as per brand */
    overflow: hidden;          /* Ensures the 'f' doesn't bleed out */
    vertical-align: middle;    /* Aligns circle with the X icon */
    transition: transform 0.2s;    
}

.fb-circle .fa-facebook-f {
    color: white !important;   /* The actual letter 'f' */
    width: 16px;               /* Fixed width */
    line-height: 1;         /* Vertically center the 'f' */
    font-size: 1.2rem !important;
    margin-right: 2.5px;   /* Fine tune the right side offset */
}

.fb-circle-f:hover {
    transform: scale(1.1);     /* Professional hover effect */
    background-color: #145dbf; /* Darker blue on hover */
}

/* Ensure the X icon matches the size for symmetry */
.fa-x-twitter {
    color: white !important;
    font-size: 1.6rem;
    vertical-align: middle;
    margin-left: 0px;
}

.fa-reddit {
    width: 24px;
    height: auto;
    object-fit:contain;
    font-size: 1.6rem;
    vertical-align: middle;
    margin-left: 0px;
}

.footer-socials {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-socials p {
    margin: 0 0 5px 0;
    font-size: 0.8rem;
    color: #aaa;
}

.icons { 
    display: flex;
    gap: 20px;
}

.footer-legal {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Align links to the right */
    gap: 5px;
}

.footer-legal a {
    color: white;
    text-decoration: none;
    font-size: 0.85em;
    transition: color 0.3s;
}

.footer-legal a:hover {
    /*color: #e6b31e;*/
    color: #FFAD5A;
    text-decoration: underline;
}

/* Ensure footer stacks on mobile */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }
    .footer-legal {
	align-items: center;
    }
}

#privacy {
    padding: 40px 10%; /* 40px top/bottom, 10% on sides for better reading width */
    text-align: left;  /* Legal text should always be left-aligned, not centered */
    max-width: 1200px;
    margin: 0 auto;
    line-height: 1.6;  /* Adds 'breathing room' between lines of text */
}

#privacy h1, #privacy h2, #privacy h3 {
    color: #000; /* Using your ScoreProf Orange for headers */
    margin-top: 30px;
}

#privacy p, #privacy li {
    color: #000; /* Keep text white against your navy background */
    margin-bottom: 15px;
}

#legal {
    padding: 40px 10%; /* 40px top/bottom, 10% on sides for better reading width */
    text-align: left;  /* Legal text should always be left-aligned, not centered */
    max-width: 1200px;
    margin: 0 auto;
    line-height: 1.6;  /* Adds 'breathing room' between lines of text */
}

#legal h1, #legal h2, #legal h3 {
    color: #000; /* Using your ScoreProf Orange for headers */
    margin-top: 30px;
}

#legal p, #legal li {
    color: #000; /* Keep text white against your navy background */
    margin-bottom: 15px;
}

i {
    transition: transform 0.5s ease;
}

ul,
li,
a {
    text-decoration: none;
    list-style-type: none;
    color: #000;
}

.home,
.html,
.angular,
.js,
.about-us,
.contact {
    padding: 1rem 0;
}

.navbar-search {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2rem;
}

.html,
.js,
.html-js-link {
    position: relative;
}

.html:hover .html-chevron,
.js:hover .js-chevron {
    transform: rotate(-180deg);
}

.html-js-link:hover i {
    transform: rotate(-90deg);
}

.html-sub-menu,
.js-sub-menu,
.html-js-sub-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 3.45rem;
    left: -5%;
    background-color: hsl(47, 95%, 76%);
    width: 110%;
}

.html-sub-menu li,
.js-sub-menu li,
.html-js-sub-menu li {
    padding: 0.75rem;
}

.html:hover .html-sub-menu,
.js:hover .js-sub-menu {
    display: flex;
}

.html-sub-menu:hover .html-sub-menu {
    display: flex;
}

.html-js-sub-menu {
    top: 5rem;
    left: 9rem;
}

.html-sub-menu li:nth-child(3):hover .html-js-sub-menu {
    display: flex;
}

.html-sub-menu:hover i {
    transform: rotate(-90deg);
}

@media screen and (max-width: 768px) {
    /* 1. Header & Hamburger */
    .nav {
	display: flex !important;
	flex-direction: row !important;
        justify-content: space-between !important;
	align-items: center !important;
        padding: 10px 15px !important;
	overflow: hidden;
    }

    .nav img {
	height: 35px !important;
	width: auto;
    }

    .header-right {
        display: flex;
        align-items: center;
        gap: 10px; /* Gap between Language and Hamburger */
    }

    .language-selector-container label {
        display: none !important; /* Hides "Language:" text on mobile */
    }

    #lang-select {
        font-size: 12px !important; /* Smaller text */
        padding: 2px 5px !important;
        background: white;
        border: 1px solid #1A0841;
    }

    .hamburger {
        display: block !important; /* Show the 3 bars */
        font-size: 24px !important;
        cursor: pointer;
        color: #1A0841;
	padding: 5px;
        order: 3; /* Puts it on the far right */
    }

    /* 2. Hide Menu Links by default on mobile */
    .navbar-links {
        display: none !important; 
        flex-direction: column !important;
        position: absolute;
        top: 55px !important; /* Sits right under the gold header */
        left: 0;
        width: 100%;
        background-color: #FFD966; /* Match header color */
        padding: 20px 0;
        border-bottom: 2px solid #1A0841;
        z-index: 1000;
	text-align: center;
    }

    /* Show menu when toggled */
    .navbar-links.mobile-active {
        display: flex !important;
    }

    /* 3. FIX THE HERO SPACING (The Padding Issue) */
    .hero-section {
        padding-top: 20px !important; /* Reduced top padding */
        padding-bottom: 60px !important; /* Added gap before footer */
    }

    .hero-container {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .hero-text h1 {
        font-size: 1.8rem !important;
        line-height: 1.2;
    }

    .hero-image {
        max-width: 280px !important;
        height: 380px !important;
        margin-bottom: 30px !important; /* Gap before the footer */
    }
    
    /* Hide language label on tiny screens to save space */
    .language-selector-container label {
        display: none;
    }

    .footer-links {
        display: flex;
        flex-direction: column; /* Stacks links vertically on mobile */
        gap: 15px;
        margin-top: 15px;
    }
    
    .footer-links a {
        margin: 0 !important; /* Resets the desktop side-margins */
        font-size: 14px;
    }
}

/* Hide hamburger on desktop */
.hamburger {
    display: none;
}