/*********************************
 ALJAWABI OILFIELD BRAND UI
**********************************/

/* ====== GLOBAL ====== */
body {
    background: var(--light);
    color: #1e293b;
}

/* ====== BUTTONS ====== */
.btn-primary {
    background: var(--secondary);
    border-color: var(--secondary);
    color: #111827;
    font-weight: 600;
}
.btn-primary:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

.btn-outline-light:hover {
    background: var(--secondary);
    color: #111;
    border-color: var(--secondary);
}

/* ====== NAVBAR ====== */
.navbar-dark {
    background: transparent;
}

.sticky-top.navbar-dark {
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(36,48,75,.08);
}

.navbar-dark .navbar-nav .nav-link {
    color: #ffffff;
    font-weight: 600;
}

.sticky-top.navbar-dark .nav-link {
    color: var(--dark);
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
    color: var(--secondary);
}

/* underline animation */
.navbar-dark .navbar-nav .nav-link::before {
    background: var(--secondary);
}

/* ====== HERO / SLIDER ====== */
.carousel-caption {
    background: linear-gradient(
        rgba(15,23,42,.88),
        rgba(15,23,42,.78)
    );
}

.carousel-caption h1,
.carousel-caption h5 {
    color: #ffffff;
}

/* ====== SECTION TITLES ====== */
.section-title::before {
    background: var(--secondary);
}
.section-title::after {
    background: var(--primary);
}

/* ====== FACTS ====== */
.facts .bg-primary {
    background: linear-gradient(
        135deg,
        var(--primary),
        var(--dark)
    ) !important;
}

/* ====== SERVICES ====== */
.service-item {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(36,48,75,.08);
}
.service-item .service-icon {
    background: var(--primary);
}
.service-item a.btn {
    background: var(--secondary);
    border-color: var(--secondary);
}
.service-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(36,48,75,.15);
}

/* ====== PROJECTS / BLOG ====== */
.blog-item {
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(36,48,75,.08);
}
.blog-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 25px 45px rgba(36,48,75,.14);
}
.blog-item span,
.blog-item a {
    color: var(--secondary);
}

/* ====== FOOTER ====== */
.bg-dark {
    background: linear-gradient(
        135deg,
        var(--primary),
        var(--dark)
    ) !important;
}

.footer-about {
    background: linear-gradient(
        135deg,
        var(--primary),
        var(--dark)
    );
}

.footer-about h1,
.footer-about p,
.bg-dark p,
.bg-dark a {
    color: #ffffff;
}

.link-animated a:hover {
    color: var(--secondary);
}

/* ====== SOCIAL ====== */
.btn-primary.btn-square {
    background: var(--secondary);
    border-color: var(--secondary);
    color: #111;
}
.btn-primary.btn-square:hover {
    background: var(--primary);
    color: #fff;
}

/* ====== BACK TO TOP ====== */
.back-to-top {
    background: var(--secondary);
    color: #111;
}
.back-to-top:hover {
    background: var(--primary);
    color: #fff;
}

/* ====== TRANSITIONS ====== */
a,
button,
.service-item,
.blog-item {
    transition: all .35s ease;
}