:root {
    --bg-color: #0f0f0f;
    --text-color: #ffffff;
    --accent-color: #00d4ff;
    --section-1-bg: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
    --section-2-bg: linear-gradient(135deg, #2b32b2 0%, #1488cc 100%);
    --section-3-bg: linear-gradient(135deg, #cc2b5e 0%, #753a88 100%);
    --section-4-bg: linear-gradient(135deg, #000428 0%, #004e92 100%);
    --font-main: 'Outfit', sans-serif;
}

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

html,
body {
    height: 100%;
    overflow: hidden;
    /* Prevent default scrolling */
    font-family: var(--font-main);
    color: var(--text-color);
    background-color: var(--bg-color);
}

/* Preloader Styles */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.8s ease, visibility 0.8s;
}

#preloader.fade-out {
    opacity: 0;
    visibility: hidden;
}

.loader-content {
    text-align: center;
}

.loader-logo {
    width: 200px;
    margin-bottom: 2rem;
    animation: pulse 2s infinite ease-in-out;
}

.loader-line {
    width: 150px;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.loader-line::after {
    content: '';
    position: absolute;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #fd7e14;
    /* Using the orange accent */
    animation: loading 1.5s infinite ease-in-out;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

@keyframes loading {
    0% {
        left: -100%;
    }

    50% {
        left: 0;
    }

    100% {
        left: 100%;
    }
}

.logo-symbol {
    margin-top: 12rem;
    width: 30%;
    height: auto;
}

.content-center {
    text-align: center;
}

.scroll-container {
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    /* Hide scrollbar for cleaner look */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
}

.scroll-container::-webkit-scrollbar {
    display: none;
    /* Chrome Safari */
}

.text-orange {
    color: rgb(234 94 0);
}

.hero-content {
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 900px;
    padding: 2rem;
    margin-top: -50px;
    /* Slight offset up */
}

.section {

    height: 100vh;
    width: 100vw;
    scroll-snap-align: start;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    flex-wrap: wrap;
    align-content: center;
}

.hero-description {

    color: #ffffff;
    margin: auto;
    text-align: center;
    width: 50%;
    margin-top: 14rem;
}

.service-card img {
    width: 50%;
}

.service-card {
    text-align: center;
}

/* Backgrounds */
#section-1 {
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('assets/banner.jpg');
    background-size: cover;
    background-position: center;
}

#section-2 {
    background: var(--section-2-bg);
}

#section-3 {
    display: block !important;
    background: #ffffff;
}

#section-4 {
    background: #ffffff;
}

/* Top Navbar */
.top-header {
    /* position: fixed via fixed-top */
    /* top, left, width handled */
    padding: 1rem 3rem;
    /* Reduced vertical padding slightly for navbar standard */
    transition: transform 0.3s ease-in-out, background-color 0.3s ease;
    /* transition: all 0.3s ease; */
    /* display: flex handled by navbar class */
}

/* Navbar solid black on scroll */
.top-header.nav-solid-black {
    background-color: #000000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Hidden state for non-home sections */
.top-header.navbar-hidden {
    transform: translateY(-100%);
}

/* Glass effect on scroll (optional, or always) */
.top-header {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Mobile Toggler Styling */
.navbar-toggler {
    border: none;
}

.navbar-toggler:focus {
    box-shadow: none;
}


.logo {
    display: flex;
    align-items: center;
}

.navbar-brand img {
    height: 40px;
    width: auto;
    object-fit: contain;
}


.top-nav {
    gap: 2rem;
    /* Bootstrap handles flex display */
}

/* Mobile menu background upgrade */
@media (max-width: 991px) {
    .navbar-collapse {
        background: rgba(15, 15, 15, 0.95);
        backdrop-filter: blur(10px);
        padding: 1rem;
        border-radius: 10px;
        margin-top: 10px;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Hide logos in section headers on mobile, excluding the main header */
    nav.top-nav .navbar-brand {
        display: none !important;
    }

    .logo-symbol {
        width: 50%;
        margin-top: 0rem;
    }

    .hero-description {
        width: 75%;
        margin-top: 0rem
    }

    .no-padding {
        padding: 0px !important;
    }
}

.top-nav .nav-link {
    color: rgba(255, 255, 255, 0.7) !important;
    /* Force override bootstrap */
    font-size: 1rem;
    font-weight: 400;
    transition: all 0.3s ease;
    position: relative;
    padding-left: 0;
    padding-right: 0;
}

.top-nav .nav-link:hover,
.top-nav .nav-link.active {
    color: #fff !important;
}

.top-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0px;
    /* Adjust for bootstrap padding */
    left: 0;
    width: 0;
    height: 2px;
    background: var(--text-color);
    transition: width 0.3s ease;
}

.top-nav .nav-link.active::after,
.top-nav .nav-link:hover::after {
    width: 100%;
}


/* Enhanced Aesthetics */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 999;
}

.content {
    text-align: center;
    z-index: 10;
    padding: 3rem 4rem;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    max-width: 800px;
    transition: transform 0.3s ease;
}

.content:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.2);
}

h1 {
    font-size: 6rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    letter-spacing: -3px;
    background: linear-gradient(to right, #fff, #aaa);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

h2 {
    font-size: 4.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    letter-spacing: -1px;
}

/* Button Glow */
.cta-button {
    margin-top: 2.5rem;
    padding: 1.2rem 2.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-radius: 50px;
    font-family: var(--font-main);
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    overflow: hidden;
}

.abbar-title {}

.cta-button:hover {
    background: white;
    color: black;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    transform: scale(1.05);
}

/* Nav Dot Pulse */
/* About Section Specifics */
/* #section-2.about-section {
    min-height: 100vh;
    padding: 100px 0 50px 0;
   
    display: block;
    overflow-y: auto; 
} */

.custom-geb {
    --bs-gutter-y: -2rem;
}

.custom-geb-2 {
    --bs-gutter-y: -1.5rem;
}

#section-2 {
    background: white;
}

.about-container {
    /* max-width: 1290px;
    margin: 0 auto;
    padding: 0 0px;
    text-align: left; */
}

.about-header {

    border-bottom: 1px solid #eee;
    /* Optional separator */
    padding-bottom: 10px;
    margin-bottom: 1rem;
}

.about-header h2 {
    font-size: 2.5rem;
    color: #000;
    font-style: italic;
    font-family: 'Times New Roman', serif;
    /* Serif font as per image */
    font-weight: 400;
    letter-spacing: 0;
    background: none;
    -webkit-text-fill-color: #000;
}

.about-text-left {}

.about-text-right {}

.about-content {
    display: flex;
    align-items: baseline;

}

.about-content p {

    font-size: 0.95rem;
    /* Small, dense text as per image */
    line-height: 1.2;
    margin-bottom: 1rem;
    color: #333;
    font-family: var(--font-main);
    /* Or standard sans */
    font-style: italic;
    /* The image text looks italicized throughout */
}

/* Vision/Mission Layouts */
.vision-wrapper,
.mission-wrapper {
    display: flex;
    align-items: center;
    gap: 30px;
    /* margin: 2rem 0; */
}

.vision-wrapper {
    flex-direction: row;
}

.mission-wrapper {
    flex-direction: row-reverse;
    /* Icon on right? Image shows icons generally wrapped or floating. 
                                    Vision icon is roughly in middle right. Mission icon is bottom right. 
                                    Actually text wraps around them or they are inline-block. */
    justify-content: space-between;
}

/* Let's try float for exact "wrapped text" feel if preferred, or flex for cleaner layout. 
   Simple flex is safer. */

.val-icon {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

/* Specific text styles */
.highlight-text {
    font-weight: 500;
    /* margin-top: 2rem; */
}

.mission-icon-container {
    text-align: center;
}

.mission-icon-container img {
    height: 109px;
    width: 120px;
}

.quote-text {
    font-weight: 600;
    text-align: center;
    /* margin-top: 3rem; */
    font-size: 1.1rem;
    color: #000;
}

/* Overrides for text color in white section */
#section-2 h2,
#section-2 p {
    text-shadow: none;
}

/* Drill Bits Section Styles */
#section-drill-bits {
    background-color: #ffffff;
}

#section-drill-bits .intro-content p {
    line-height: 1.6;
}

#section-drill-bits h4 {
    letter-spacing: 0.5px;
}

#section-drill-bits .drill-images img {
    transition: transform 0.3s ease, filter 0.3s ease;
    cursor: pointer;
}



/* Well Construction Section Styles */
#section-well-construction {
    background-color: #ffffff;
}

#section-well-construction .deployment-images img {
    transition: transform 0.3s ease, filter 0.3s ease;
    cursor: pointer;
}

#section-well-construction .deployment-images img:hover {}

#section-well-construction h4 {
    letter-spacing: 0.5px;
}