/* ==========================================
   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;
        }
        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; }
        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; }
        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; }
        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; }
        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;
}

/*
.btn {
    background-image: rgba(68, 69, 68, 0.6); /* button with 60% transparency 
}*/

/* 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 {
    /*to left is to adjust the direction of the gradient*/
    background: linear-gradient(to left, #e0b086 50%, #fdf6ee) !important;
}

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

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

/* 1. Solid Card Background & Crisp White Border */
section#trust-markers .card {
    /* Applies your exact gradient directly to the card body so it's not transparent */
    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 */
}

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

/* 2. Targets ONLY the Card Titles */
section#trust-markers .card-title {
    /* Sharp, non-blurry 0.5px offset to help the large headline pop */
    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 {
    text-shadow: none !important;
    box-shadow: none !important;
}

/* Call to action section*/
section#home-cta {
    /* Your tan stays solid across the left, then subtly softens into a warm cream */
    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;
}