/* =====================================================
   LUCAS INSURANCE SERVICES – PREMIUM GRAY + GOLD THEME
   Author: Web Design System
   Version: 1.0
   ===================================================== */

/* =====================
   ROOT COLOR VARIABLES
   ===================== */

:root {
  --gold-primary: #C9A24D;
  --gold-hover: #E6C878;

  --dark-gray: #0B0D10;
  --mid-gray: #15181D;
  --light-gray: #2A2F36;

  --text-gray: #5C636E;
  --light-text: #BFC5CC;

  --white: #FFFFFF;
}

/* =====================
   GLOBAL RESET
   ===================== */

nav.fixed .max-w-7xl {max-width: 85rem !important;}

body {
  background-color: var(--white);
  color: var(--text-gray);
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  line-height: 1.6;
}

/* =====================
   HEADINGS
   ===================== */


.text-ocean-teal {
    color: var(--gold-primary) !important;
}


h1, h2, h3, h4, h5, h6 {
  color: var(--mid-gray);
  font-weight: 600;
  letter-spacing: 0.3px;
}

.dark-section h1,
.dark-section h2,
.dark-section h3 {
  color: var(--white);
}


.home-hero-bg {
    width: 100%;
    background-size: cover !important;
    height: 95vh;
}


/* =====================
   LINKS
   ===================== */

a {
  color: var(--gold-primary);
  text-decoration: none;
  transition: 0.3s ease;
}

a:hover {
  color: var(--gold-hover);
}

/* =====================
   NAVIGATION BAR
   ===================== */

.bg-white\/95,
header,
.main-header,
.site-header,
.elementor-nav-menu--main {
  background-color: var(--dark-gray) !important;
  border-bottom:1px solid #C9A24D;
}

.bg-ocean-teal {background-color: #0B0D10 !important;}
 

nav a, .elementor-nav-menu a, .main-navigation a {
    color: var(--gold-primary) !important;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0px;
    font-size: 14px;
}



nav a:hover,
.elementor-nav-menu a:hover,
.main-navigation a:hover {
  color: var(--gold-hover) !important;
}


.space-x-8 > :not([hidden]) ~ :not([hidden]){
  margin-left: 10px !important;
}

nav.fixed a{
      padding: 8px 12px;
    border-radius: 30px;
    
}

nav.fixed a:hover{
  background: #C9A24D;
  color: #0B0D10 !important;

}

/* =====================
   BUTTONS (GLOBAL)
   ===================== */

button,
input[type="submit"],
.elementor-button,
.btn-primary {
  background-color: var(--gold-primary) !important;
  color: var(--dark-gray) !important;
  border: none;
  padding: 14px 28px;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: 0.3s ease;
}

button:hover,
input[type="submit"]:hover,
.elementor-button:hover,
.btn-primary:hover {
  background-color: var(--gold-hover) !important;
  transform: translateY(-1px);
}

/* =====================
   SECTION STYLES
   ===================== */


.bg-warm-sand {
    background-color: #F9F9F9 !important;
}



.dark-hero-bg {
    background: linear-gradient(180deg, #050608 0%, #2A2F36 100%) !important;
    background-size: cover;
    background-position: center;
}

.list-item .text-lg{
  color:#15181D !important;
}

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

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

/* White Content Sections */
.home-hero,
.hero-bg,
.bg-white,
.section-white,
.content-area,
.page-content {
  background-color: var(--white) !important;
  padding: 40px 0;
}

/* Dark Gradient Headers */
.section-header,
.hero-section,
.gradient-header {
  background: linear-gradient(180deg, var(--dark-gray) 0%, var(--light-gray) 100%);
  color: var(--white);
  padding: 100px 0;
}

.section-header h1,
.hero-section h1 {
  color: var(--white);
}

/* =====================
   CARDS / BOXES
   ===================== */

.grid-cols-3 .bg-seafoam,
.card,
.info-box,
.elementor-widget-container {
  background-color: var(--white);
  border: 1px solid #E2E2E2;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.04);
  transition: 0.3s ease;
}

.card:hover,
.info-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

/* =====================
   FORMS
   ===================== */

input,
select,
textarea {
  border: 1px solid #DADADA;
  padding: 12px;
  border-radius: 4px;
  width: 100%;
  background-color: var(--white);
  color: var(--mid-gray);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--gold-primary);
  outline: none;
  box-shadow: 0 0 0 2px rgba(201, 162, 77, 0.2);
}

/* =====================
   CALLOUT / CTA SECTION
   ===================== */

.cta-section {
  background: linear-gradient(180deg, var(--light-gray) 0%, var(--dark-gray) 100%);
  color: var(--white);
  text-align: center;
  padding: 80px 20px;
}

.cta-section h2 {
  color: var(--white);
}

/* =====================
   FOOTER
   ===================== */

footer,
.site-footer {
  background-color: var(--dark-gray);
  color: var(--light-text);
  padding: 60px 0;
}

footer a {
  color: var(--gold-primary);
}

footer a:hover {
  color: var(--gold-hover);
}

footer h4{
  color: #BFC5CC;
}

footer .text-sunset-coral {
    color: #BFC5CC !important;
}


        .hover\:text-white:hover {
            --tw-text-opacity: 1;
            color: #E6C878 !important;
        }


/* =====================
   PAGE BANNERS
   ===================== */

.page-banner {
  background: linear-gradient(180deg, var(--dark-gray) 0%, var(--mid-gray) 100%);
  padding: 80px 0;
  text-align: center;
  color: var(--white);
}

/* =====================
   RESPONSIVE TWEAKS
   ===================== */

@media (max-width: 768px) {
  .section-header,
  .hero-section,
  .page-banner {
    padding: 60px 20px;
  }

  .elementor-nav-menu a {
    letter-spacing: 0.5px;
  }

.home-hero-bg {
  height: 70vh;
  background-position: center !important;
}

    #mobile-menu{padding-top:0 !important;}
    nav.fixed a {width: 100%;display: block;}

    .about-us .container{grid-template-columns: 1fr !important;width: 92% !important;}


}