/* GENERAL STYLES */
body {
    background: #111;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    font-family: 'Roboto', sans-serif;
    color: white;
}

/* Background Cover for Both Rows */
.background-cover {
    background: url('images/header-image-pablo.png') no-repeat center center;
    background-size: cover; /* Ensures the image fully covers the area */
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
    position: relative;
    padding: 0; /* Remove any extra padding */
    margin: 0; /* Remove any margin */
}

/* Ensure the content fits fully inside the container */
.background-cover .container {
    padding: 40px 20px; /* Optional: Adjust spacing inside */
    position: relative;
    z-index: 2; /* Keeps text above the background */
}

/* Keeps HR visible and positioned */
hr.my-5 {
    border: 0;
    height: 1px;
    background: #999;
    width: 100%;
    border-style: dotted;
    margin: 20px 0; /* Add space before and after */
    z-index: 3; /* Ensure it appears on top */
    position: relative;
}

/* Optional Overlay for Better Text Contrast */
.background-cover::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Add dark overlay for contrast */
    z-index: 1; /* Ensure it sits behind the content */
}

.project-management-section {
    background: url('images/project-bg.png') no-repeat center center;
    background-size: cover; /* Ensures full coverage */
    padding: 80px 20px; /* Adds spacing */
    position: relative; /* Ensures proper layering */
    color: white; /* Ensures text is readable */
}

.entity-analysis-section {
    background: url('images/entity-analysis-bg.png') no-repeat center center;
    background-size: cover; /* Ensures full coverage */
    padding: 80px 20px; /* Adds spacing */
    position: relative; /* Ensures proper layering */
    color: white; /* Ensures text is readable */
}

.machine-learning-bg {
    background: url('images/machine-bg.png') no-repeat center center;
    background-size: cover; /* Ensures full coverage */
    padding: 80px 20px; /* Adds spacing */
    position: relative; /* Ensures proper layering */
    color: white; /* Ensures text is readable */
}


/* TEXT STYLES */
th, td, h1, h2, h3, h4, li, label, p {
    color: white;
}

h1, h2, h3, h4, h5 {
    font-family: 'Roboto', sans-serif;
}

h1 {
    font-size: 2.25rem; /* 50% larger */
    font-weight: bold;
}

h2 {
    font-size: 2rem; /* 50% larger */
    font-weight: bold;
}

.large-text {
    font-size: 1.20rem; /* 25% larger */
    line-height: 1.5;
}

.large-text-box {
    font-size: 1rem; /* 25% larger */
    line-height: 1.5;
}

/* BUTTON STYLES */
.custom-btn, .custom-btn-apply {
    background-color: #a29061;
    border-color: #a29061;
}

.custom-btn-login {
    background-color: #223138;
    border-color: #223138;
    width: 120px;
    margin-right: 15px;
}

/* PRIMARY BUTTON */
.btn-primary {
    background-color: rgba(131, 112, 72, 0.8);
    border: 1px solid #a29069 !important;
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: rgba(162, 144, 105, 0.9);
    border: 1px solid #a29069 !important;
    color: #fff;
    box-shadow: none;
}

/* SECONDARY BUTTON */
.btn-secondary {
    background-color: rgba(35, 49, 56, 0.8);
    border: 1px solid #2b586f !important;
}

.btn-secondary:hover {
    background-color: rgba(35, 49, 56, 1);
    border: 1px solid #2b586f !important;
}

/* NAVBAR */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    transition: top 0.3s;
    background: #111;
    border-bottom: 1px dotted #333;
    height: 105px;
    font-size: 1.2rem;
    padding: 20px 0;
}

.navbar-brand {
        margin-left: 15px; /* Ensures brand stays on the left */
    }

.navbar-nav .nav-link {
    color: white !important;
}

.navbar-nav {
        display: flex;
        flex-direction: row; /* Horizontal navigation */
        gap: 20px;
        margin: 0 auto; /* Keeps it centered */
    }
    
 .navbar-toggler {
        display: none; /* Hide hamburger menu */
    }

/* Navbar Hides on Scroll */
.hidden-nav {
    top: -105px;
}

/* Dropdown Menu */
.dropdown-menu {
    background: #222; /* Dark background */
    border: none;
}

/* Dropdown Links */
.dropdown-menu .dropdown-item {
    color: white;
    font-size: 1rem;
    padding: 10px 15px;
}

.dropdown-menu .dropdown-item:hover {
    background: #333;
}

/* HR (DOTTED LINE WITH GLOW) */
/* DOTTED HR WITH GLOW */
hr.my-5 {
    border: 0; /* Removes default border */
    width: 100%;
    background-color: #333; /* Base color */
    display: block;
    height: 1px;
    border-style: dotted; /* Restores your dotted style */
    clear: both;
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.4); /* Subtle glow effect */
}

hr.no-glow {
    border: 0;
    width: 100%;
    background-color: #333; /* Base color */
    display: block;
    height: 1px;
    border-style: dotted; /* Keeps the dotted style */
    clear: both;
    margin: 10px 0; /* Minimal vertical spacing */
    box-shadow: none; /* Removes the glow */
}

/* BACKGROUND IMAGE FOR A SPECIFIC ROW */
.bg-header {
    background: url('') no-repeat center center;
    background-size: cover;
    padding: 60px 20px;
    color: white;
    border-radius: 15px;
}

/* FOOTER */
.footer {
    background-color: rgba(18, 25, 28);
    color: white;
    text-align: center;
    padding: 10px;
    font-size: 9pt;
}

/* CENTER */
.centered-container {
    display: flex;
    justify-content: center;  /* Centers horizontally */
    align-items: center;      /* Centers vertically */
    min-height: 100%;         /* Ensures it takes at least full height */
    text-align: center;       /* Centers text */
    padding: 20px;            /* Adds spacing to avoid text getting cut */
}

/* LINKS */
a {
    color: #a29061;
    text-decoration: none;
}

/* IMAGES */
.logo-image {
    max-width: 100%;
    height: auto;
}

.img-fluid {
    border-radius: 10px;
    border: 1px solid;
    border-image: linear-gradient(to right, #444, #000, #444);
}

/* LOGIN FORM */
.login-form {
    max-width: 500px;
    margin: 0 auto;
    padding-top: 10%;
    text-align: center;
}

/* TAB SYSTEM */
.tab-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 20px;
}

.tabs {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #333;
}

.tab {
    padding: 15px 30px;
    cursor: pointer;
    font-size: 1.2rem;
    text-align: center;
    color: #ccc;
    transition: color 0.3s ease;
}

.tab:hover, .tab.active {
    color: white;
}

.tab-content {
    display: none;
    text-align: center;
    padding: 30px 20px;
    animation: fadeIn 0.5s ease-in-out;
}

.tab-content.active {
    display: block;
}

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

/* COLUMNS */
.columns {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
}

.column {
    flex: 1;
    padding: 20px;
    background-color: #1c2022;
    color: white;
    border-radius: 15px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.machine-learning-section {
    background-color: #1c2022; /* Dark grey background */
    padding: 40px;
    border-radius: 15px; /* Consistent with tab sections */
    display: flex;
    align-items: center;
    color: white;
}

/* NEW FLEXBOX WRAPPER TO ENSURE PROPER COLUMN ALIGNMENT */
.content-wrapper {
    display: flex;
    align-items: flex-start; /* Aligns top edges */
    gap: 40px; /* Adds spacing between text & bullets */
}

/* Ensures text is readable inside */
.machine-learning-section h1 {
    margin-bottom: 20px;
}

.column p {
    font-size: 1.2rem;
    line-height: 1.5;
    margin:15px;
}

/* TWO-COLUMN LISTS */
.column-list {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

.column-list ul {
    list-style-type: disc;
    margin: 0;
    padding: 0 20px;
    font-size: 1.2rem;
    line-height: 1.6;
    flex: 1;
}

.column-list ul li {
    margin-bottom: 10px;
    color: white;
}

/* Left Column (Text) */
.col-md-7 {
    flex: 1; /* Makes it take available space */
}

/* Right Column (List) */
.col-md-5 {
    flex: 1; /* Equal sizing */
}
/* Fixes indentation & alignment of nested lists */
.nested-list {
    list-style-type: circle; /* Different bullet style for sub-items */
    padding-left: 20px;
    font-size: 1.2rem; /* Slightly smaller than parent list */
}

.column-divider {
    width: 2px; /* Keeps the divider thin */
    background-color: #333; /* Divider color */
    height: 100%; /* Ensures it stretches to the tallest column */
    align-self: stretch; /* Matches the height of its container */
    margin-right: 25px; /* Adds space to the right */
}

.no-bullet {
    list-style-type: none;
}

.nested-list li {
    margin-left: 20px; /* Indent nested list items */
    font-size: 1.2rem; /* Standardize font size */
}

/* Ensure the divider stretches to match content */
.col-md-5 h2 {
    text-align: left; /* Align title to the left */
    margin-bottom: 20px; /* Space below the title */
    font-size: 1.5rem; /* Adjust font size */
    font-weight: bold; /* Emphasize the title */
}

.single-column-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    font-size: 1.3rem; 
    gap: 15px; /* Add some spacing between title and list */
}

.single-column-title {
    width: 100%; /* Ensure the title spans the column */
    text-align: left; /* Align the title to the left */
    margin-bottom: 10px; /* Space below the title */
    font-size: 1.5rem; /* Adjust font size */
    font-weight: bold; /* Emphasize the title */
}

.list-wrapper ul {
    padding-left: 20px; /* Indent the list for better spacing */
    font-size: 1.2rem;
    margin-top: 0;
}

.nested-list li {
    padding-left: 10px; /* Further indent nested list items */
    font-size: 1.2rem;
    line-height: 1.5;
}

/* Dark background for modal */
.video-modal {
    background-color: #111;
    color: white;
}

/* Make modal body full-width */
.modal-body {
    position: relative;
    text-align: center;
}

/* Fullscreen Button */
.fullscreen-btn {
    margin-top: 10px;
    padding: 10px 15px;
    background: #222;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
}

.fullscreen-btn:hover {
    background: #333;
}

@media (min-width: 990px) and (max-width: 1200px) {
    h1 {
        font-size: 1.85rem; /* 50% larger */
        font-weight: bold;
    }

    .large-text {
        font-size: 1.0rem; /* Adjusted font size */
        line-height: 1.5rem; /* Adjusted line height */
    }
}

/* Switch to Mobile Menu at 992px */
@media (max-width: 991px) {
    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        position: relative;
    }

    .navbar-toggler {
        display: block; /* Ensure toggler is visible */
        border: none;
        background: none;
        color: white;
        font-size: 1.5rem;
        cursor: pointer;
    }

    .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #111;
        z-index: 999;
        display: none; /* Initially hidden */
    }

    .navbar-collapse.show {
        display: block; /* Ensure it appears when toggled */
    }

    .navbar-nav {
        flex-direction: column;
        width: 100%;
        padding: 10px;
    }

    /* Ensure Login Button Stays Right */
    .custom-btn-login {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 15;
    }

    /* Dropdown Menu */
    .dropdown-menu {
        background-color: #222;
        border: none;
        padding: 10px;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
    }

    .dropdown-item {
        color: white; /* Ensures readability */
        padding: 10px 15px;
    }

    .dropdown-item:hover {
        background-color: #333;
    }

    /* General Layout Adjustments */
    .logo-image {
        max-width: 50%;
        height: auto;
        margin: 0 auto; /* Centers logo */
    }

    .columns {
        flex-direction: column;
        align-items: flex-start;
    }

    .column-list {
        flex-direction: column;
    }

    .column-divider {
        display: none; /* Hides dividers on smaller screens */
    }

    .login-form {
        max-width: 80%;
        margin: 0 auto;
        padding-top: 5%;
        text-align: center;
    }

    .twitter-icon {
        width: 12px;
        height: 12px;
    }    
    
    /* IMAGES */
	.logo-image {
		margin-top:50px;
    	max-width: 70%;
    	height: auto;
	}
	
	h1 {
    	font-size: 1.75rem; /* 50% larger */
   	 	font-weight: bold;
	}

	.large-text {
    	font-size: 1.2rem; /* 25% larger */
    	line-height: 1.5rem;
	}
	
	.columns {
        flex-direction: column;
        width: 100%;
    }

    .column {
        width: 100% !important; /* Forces equal width */
        padding: 20px; /* Adds spacing */
        box-sizing: border-box; /* Ensures padding doesn’t affect width */
    }
    
    .list-wrapper ul {
    	font-size: 1.2rem;
    	padding-left: 20px; /* Indent the list for better spacing */
    	margin-top: 0;
	}
    
    .nested-list li {
    	padding-left: 10px; /* Further indent nested list items */
    	font-size: 1.2rem;
    	line-height: 1.5;
	}
	
	.logo-image {
        display: block;
        margin: 0 auto; /* Centers it horizontally */
        text-align: center;
    }
    
}