/* ==========================================
   1. CAROUSEL STYLES (Strictly Bounded)
   ========================================== */

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .carousel-item h1 {
        font-size: 20px;
        background-color: rgba(68, 69, 68, 0.4); /* Dark gray with 40% transparency */
        padding: 5px;
    }
    .carousel-item h3 {
        font-size: 15px;
        background-color: rgba(68, 69, 68, 0.4); 
        padding: 5px;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .carousel-item h1 { font-size: 30px; background-color: rgba(68, 69, 68, 0.4); padding: 8px; }
    .carousel-item h3 { font-size: 15px; background-color: rgba(68, 69, 68, 0.4); padding: 8px; }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .carousel-item h1 { font-size: 50px; background-color: rgba(68, 69, 68, 0.4); padding: 10px; }
    .carousel-item h3 { font-size: 30px; background-color: rgba(68, 69, 68, 0.4); padding: 10px; }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .carousel-item h1 { font-size: 100px; background-color: rgba(68, 69, 68, 0.4); padding: 15px; }
    .carousel-item h3 { font-size: 60px; background-color: rgba(68, 69, 68, 0.4); padding: 15px; }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .carousel-item h1 { font-size: 150px; background-color: rgba(68, 69, 68, 0.4); padding: 20px; }
    .carousel-item h3 { font-size: 70px; background-color: rgba(68, 69, 68, 0.4); padding: 20px; }
}


/* ==========================================
   2. GLOBAL / LAYOUT STYLES
   ========================================== */
.mainheader {
    background-color: aqua;
}

.mainCaroucel {
    background-color: blue;
}

.mainFooter {
    background-color: blueviolet;
}

.lastFooter {
    background-color: #292929;
}

.my-3 {
    text-align: justify;
}

/* button with black and white text*/
.btn {
    background-color: #2c3539; /* Matches the dark section background */
    color: #ffffff;            /* Crisp white text for perfect readability */
    border: none;
    padding: 10px 20px;        /* Gives the button a nice, premium size */
    transition: background-color 0.2s ease; /* Makes a smooth hover effect */
}

/* Optional: Adds a subtle change when the user hovers over it */
.btn:hover {
    background-color: #1a1a1a; /* Darkens slightly to solid black on hover */
}

/* ==========================================
   3. SECTION SPECIFIC STYLES
   ========================================== */

/* Combining the tag 'section' and the ID '#about' forces higher priority */
section#proven, #standards, #servicetext {
    background: linear-gradient(to left, #e0b086 50%, #fdf6ee) !important;
}

section#services {
    background-color: #2c3539 !important;
    color: #ffffff;
}

/* Targets original homepage sections AND your new unique services section name */
section#trust-markers,
section#service-offer {
    background-color: #2c3539 !important;
    color: #ffffff;
}

/* 1. Solid Card Background & Crisp White Border */
section#trust-markers .card,
section#service-offer .card {
    background: linear-gradient(175deg, #dddada 0%, #e0b086 100%) !important; 
    border: 4px solid #ffffff !important; /* Your crisp white border */
    box-shadow: none !important;          /* Keeps the frame flat */
}

/* Forces all card images to be consistent */
.card-img-top {
    width: 100%;
    height: 200px;        /* You can adjust this height to whatever looks best */
    object-fit: cover;    /* This prevents the stretching/expanding */
}

/* ==========================================
   TITLES-ONLY MICRO TEXT SHADOW
   ========================================== */

/* 2. Targets ONLY the Card Titles */
section#trust-markers .card-title,
section#service-offer .card-title {
    text-shadow: 0.5px 0.5px 0px rgba(44, 37, 32, 0.45) !important; 
}

/* 3. Ensures body paragraphs and buttons stay completely flat and sharp */
section#trust-markers .card-body p,
section#trust-markers .card .btn,
section#service-offer .card-body p,
section#service-offer .card .btn {
    text-shadow: none !important;
    box-shadow: none !important;
}

/* Call to action section*/
section#home-cta {
    background: linear-gradient(to right, #e0b086 50%, #fdf6ee) !important;
    color: #ffffff;
    text-shadow: 1px 1px 4px rgba(114, 76, 43, 0.4); /* Subtle warm shadow for readability */
}

/* This is for the cards on the homepage in the why choose us section */
section#footer {
    background-color: #2c3539 !important;
    color: #ffffff;
}

/* About standards section*/
/* ==========================================
   4. ABOUT US PAGE SPECIFIC STYLES
   ========================================== */

/* Dark slate background for the entire section container */
section#about-standards, #reviews, #yelp {
    background-color: #2c3539 !important;
    color: #ffffff;
}

/* Matching the warm tan gradient, white border, and flat profile of the homepage cards */
section#about-standards .card {
    background: linear-gradient(175deg, #dddada 0%, #e0b086 100%) !important; 
    border: 4px solid #ffffff !important; 
    box-shadow: none !important;          
    color: #2c3539 !important; /* Keeps card text dark against the tan background for readability */
}

/* Targets the About Us Card Titles for that sharp micro 3D text-shadow */
section#about-standards .card-title {
    text-shadow: 0.5px 0.5px 0px rgba(44, 37, 32, 0.45) !important; 
}

/* Ensures description paragraphs inside the cards stay sharp, dark, and flat */
section#about-standards .card-body p {
    text-shadow: none !important;
    box-shadow: none !important;
    color: #444544 !important; /* Slightly softened dark gray for crisp body reading */
}

/* ==========================================
   NAVBAR ACTIVE STATE STYLES
   ========================================== */
.navbar-nav .nav-link.active {
    font-weight: 700 !important;
    color: #ffffff !important; /* Ensures the active page link is solid, crisp white */
}