/*
Theme Name: CourierApp4B
Theme URI: https://wordpress.org/themes/courier/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors.
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
Version: 1.3
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: courier4b
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/


/* Custom styles for the specific red color #bb0000 */
         :root {
             --custom-red: #bb0000; /* Original bright red */
             --deep-red: #880000; /* Deeper red for background */
             --custom-dark-gray: #343a40;
             --custom-light-gray: #f8f9fa;
             --light-red: #cc0000; /* Used for the accent bubble/highlight */
             /* New variables for Red Gradient */
             --grad-start: #cc0000; /* Bright red */
             --grad-end: #880000; /* Deep red */
             --grad-pulse-shadow: rgba(239, 68, 68, 0.6); 
             /* Added: Original Orange for Process/Form Accent */
             --form-accent-orange: #ff9800; 
             /* Added: Service Card specific variables */
             --service-bg: #f5f5f5; /* Light background for card */
         }
         header a,h1.h2,h3,h4,h5,h6,p,ul,li,button,a,label,input,textarea,div{
             font-family: "Quicksand", sans-serif !important;
         }
         .bg-custom-red {
             background-color: var(--custom-red) !important;
         }
         .text-custom-red {
             color: var(--custom-red) !important;
         }
         .text-deep-red {
             color: var(--deep-red) !important;
         }
         /* Process Section Styles (Kept orange for visual pop, as in original image) */
         .process-section {
             padding: 40px 0;
             background-color: #ffffff;
             text-align: center;
         }
         .process-icon {
             color: #c40000; /* Using the original Orange */
             font-size: 3.5rem;
             line-height: 1;
             margin-bottom: 10px;
         }
         .process-text {
             font-weight: bold;
             font-size: 1rem;
             color: var(--custom-dark-gray);
             text-transform: uppercase;
         }
         .phcall{
             color: #880000;
             font-size: 20px;
             font-weight: 600;
         }
         .step-arrow {
             color: #c40000; /* Using the original Orange */
             font-size: 1.5rem;
             display: flex;
             align-items: center;
             justify-content: center;
             height: 100%;
         }
         @media (max-width: 767.98px) {
             .step-arrow {
                 display: none;
             }
         }
         .border-custom-red {
             border-color: var(--custom-red) !important;
         }
         /* --- BANNER STYLES (Kept as is) --- */
         .banner-section {
             position: relative;
             overflow: hidden;
             background-color: var(--deep-red) !important;
         }
         .banner-height {
             min-height: 450px;
             display: flex;
             align-items: center;
         }
         @media (min-width: 768px) {
             .banner-height {
                 min-height: 600px;
             }
         }
         .banner-image-container {
             position: absolute;
             top: 0;
             right: 0;
             bottom: 0;
             width: 70%;
             background-image: url('https://blogs4businesses.com/wp-content/uploads/2025/10/Gemini_Generated_Image_yhuhphyhuhphyhuh.jpg');
             background-size: cover;
             background-position: center;
             background-repeat: no-repeat;
             z-index: 1;
         }
         .banner-image-container::after {
             content: '';
             position: absolute;
             top: 0;
             left: 0;
             right: 0;
             bottom: 0;
             background: linear-gradient(to right, var(--deep-red) 5%, transparent 35%);
         }
         @media (max-width: 767px) {
             .banner-image-container {
                 display: none;
             }
         }
         .banner-content {
             position: relative;
             z-index: 3;
             padding-top: 4rem;
             padding-bottom: 4rem;
         }
         .accent-badge {
             display: inline-block;
             background-color: var(--light-red); 
             color: white;
             padding: 0.25rem 0.75rem;
             border-radius: 0.5rem;
             font-size: 0.9rem;
             font-weight: 600;
             margin-bottom: 1rem;
         }
         .headline-text {
             font-size: 3rem; 
             font-weight: 900;
             line-height: 1.1;
             text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); 
         }
         @media (min-width: 992px) {
             .headline-text {
                 font-size: 4.5rem;
             }
         }
         .headline-highlight {
             color: white; 
             font-weight: 900;
         }
         .custom-logo {
             height: 32px;
         }
         @media (min-width: 768px) {
             .custom-logo {
                 height: 40px;
             }
         }
         .footer-logo-img {
             height: 24px;
         }
         @media (min-width: 768px) {
             .footer-logo-img {
                 height: 32px;
             }
         }
         /* --- FANCY BUTTON STYLES (Kept as is) --- */
         .btn, .card {
             transition: all 0.3s ease-in-out;
         }
         .btn:hover {
             transform: translateY(-2px) scale(1.01);
             box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
         }
         .btn-cta-light {
             background-color: #ffffff !important;
             color: var(--deep-red) !important;
             border: 2px solid #ffffff;
             font-weight: 700;
             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
             padding: 0.8rem 1.6rem;
             border-radius: 0.75rem;
         }
         .btn-cta-light:hover {
             background-color: #f0f0f0 !important;
         }
         .animated-button {
             background-image: linear-gradient(to right, var(--grad-start), var(--grad-end));
             color: white; 
             font-weight: 900 !important;
             padding: 1.25rem 2.5rem; 
             border-radius: 50px; 
             font-size: 1.5rem !important; 
             border: none;
             animation: pulse 2.5s infinite;
             transition: all 0.3s ease-in-out;
             box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); 
             display: inline-flex;
             align-items: center;
             justify-content: center;
         }
         @keyframes pulse {
             0% {
                 transform: scale(1);
                 box-shadow: 0 0 0 0 var(--grad-pulse-shadow);
             }
             70% {
                 transform: scale(1.05);
                 box-shadow: 0 0 0 25px rgba(239, 68, 68, 0);
             }
             100% {
                 transform: scale(1);
                 box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
             }
         }
         .animated-button:hover {
             animation: none;
             transform: scale(1.05) translateY(-2px);
             box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4);
             background-image: linear-gradient(to right, #d90000, #a10000); 
         }
         .animated-button .arrow-circle {
             background-color: white;
             width: 50px;
             height: 50px;
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
             box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
             margin-left: 1.25rem;
         }
         .animated-button .arrow-circle svg {
             color: var(--deep-red);
         }
         /* --- FORM STYLES (Updated to Red Theme) --- */
         .formbg {
             z-index: 2;
             position: relative;
             padding: 0 !important; /* Remove excessive padding here, let .form-container handle it */
         }
         .form-container {
             /* Changed background to a subtle red tint */
             background-color: #fce7e7; 
             border-radius: 10px;
             padding: 30px;
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
             max-width: 600px;
             margin: auto;
             position: relative;
         }
         .i4ewOd-pzNkMb-tJHJj{
            display: none !important;
         }
         .header-bar {
             /* Changed from yellow to the deep red theme */
             background-color: var(--deep-red); 
             color: #ffffff;
             padding: 15px 30px;
             border-radius: 10px 10px 0 0;
             display: flex;
             justify-content: space-between;
             align-items: center;
         }
         .form-control, .form-select {
             border-radius: 8px;
             height: 45px;
             border: 1px solid #ced4da;
         }
         textarea.form-control {
             height: auto;
             min-height: 150px;
         }
         .form-label {
             font-weight: 500;
             color: var(--custom-dark-gray);
             margin-bottom: 5px;
         }
         .small-text {
             font-size: 0.85rem;
             color: #6c757d;
             margin-top: 0px;
             margin-bottom: 15px;
         }
         .service-type-btn {
             background-color: white;
             border: 1px solid #ced4da;
             color: #343a40;
             border-radius: 25px;
             padding: 10px 15px;
             cursor: pointer;
             transition: all 0.2s;
             display: flex;
             align-items: center;
             justify-content: center;
             font-size: 0.9rem;
             font-weight: 500;
         }
         .service-type-btn.active {
             /* Used the theme's red for active button */
             background-color: #fbecec;
             border-color: var(--custom-red); 
             color: var(--deep-red);
         }
         .service-type-btn i {
             margin-right: 5px;
             font-size: 1.2rem;
         }
         .btn-danger{
            background-color: var(--deep-red) !important; 
            border-radius: 0px !important;
         }
         .bg-dangers{
            background-color: var(--deep-red) !important; 

         }
         .text-dangers{
            color: var(--deep-red) !important; 

         }
         .submit-btn {
             /* Changed from orange to the deep red theme */
             text-decoration: none;
             background-color: var(--deep-red); 
             border: none;
             color: white;
             font-weight: bold;
             padding: 10px 30px;
             border-radius: 8px;
             display: flex;
             align-items: center;
             justify-content: center;
             font-size: 1.1rem;
             box-shadow: 0 4px 6px rgba(136, 0, 0, 0.4); /* Red shadow */
             transition: background-color 0.2s;
         }
         .submit-btn:hover {
             background-color: var(--custom-red); 
         }
         .submit-btn i {
             margin-left: 10px;
             font-size: 1.2rem;
         }
         .form-check-input {
             border-radius: 4px;
             margin-top: 0.3em;
         }
         header nav li{
             margin-left: 5px;
             margin-right: 5px;
             color: black !important;
             font-size: 18px;
         }
         header nav li a{
             color: black !important;
         }

         /* --- NEW STYLES FOR SERVICE SECTION --- */
         .btn-custom-red {
             background-color: var(--custom-red);
             border-color: var(--custom-red);
             color: white;
             font-weight: 700;
             transition: all 0.2s;
         }
         .btn-custom-red:hover {
             background-color: var(--deep-red);
             border-color: var(--deep-red);
             transform: translateY(-2px);
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
         }
         
         .service-card {
             position: relative;
             overflow: hidden;
             border-radius: 12px !important; /* Slightly larger border-radius */
             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
             background-color: var(--service-bg);
             cursor: pointer;
             transition: transform 0.3s ease, box-shadow 0.3s ease;
             border: none;
             min-height: 370px; /* Ensure a minimum height for consistency */
         }

         .service-card:hover {
             transform: translateY(-5px);
             box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
         }

         .service-image {
             width: 100%;
             height: 100%; /* Make it fill the card height */
             position: absolute;
             top: 0;
             left: 0;
             object-fit: cover;
             transition: all 0.5s ease;
             filter: brightness(0.85); /* Slightly darker image for better text contrast */
         }
         
         .service-card:hover .service-image {
             filter: brightness(1.05) contrast(1.1);
             transform: scale(1.02);
         }

         .service-overlay {
             position: absolute;
             top: 0;
             left: 0;
             right: 0;
             bottom: 0;
             z-index: 10;
             /* Gradient to ensure text readability */
             background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 60%); 
             color: white;
             padding: 20px;
             display: flex;
             flex-direction: column;
             justify-content: flex-end; /* Push content to the bottom */
             transition: background 0.3s ease;
         }
         
         .service-overlay h5 {
             color: white !important; /* Override deep-red class for readability */
             font-size: 1.5rem;
             margin-bottom: 5px;
             text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
         }

         .service-overlay p, .service-overlay li {
             color: rgba(255, 255, 255, 0.9);
             margin-bottom: 0.5rem;
             text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
         }

         .service-overlay .fa-check-circle {
             color: var(--custom-red) !important;
         }

         /* Custom styling for the list to remove default bullets if present */
         .service-overlay .list-unstyled {
             padding-left: 0;
         }
         
         @media (max-width: 767px) {
             .service-card {
                 min-height: 220px;
             }
         }
         
         /* --- NEW BLOG SECTION STYLES --- */
         .blog-card {
             border: none;
             border-radius: 12px;
             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
             overflow: hidden;
             transition: transform 0.3s ease, box-shadow 0.3s ease;
             min-height: 100%; /* Make cards the same height */
             display: flex;
             flex-direction: column;
         }

         .blog-card:hover {
             transform: translateY(-5px);
             box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
         }
         
         .blog-card-img {
             width: 100%;
             height: 200px;
             object-fit: cover;
         }
         
         .blog-card-body {
             padding: 25px;
             flex-grow: 1;
             display: flex;
             flex-direction: column;
         }
         
         .blog-card-title {
             font-size: 1.35rem;
             font-weight: 700;
             color: var(--deep-red);
             margin-bottom: 15px;
         }
         
         .blog-card-meta {
             font-size: 0.85rem;
             color: #6c757d;
             margin-bottom: 10px;
         }
         
         .blog-card-footer {
             margin-top: auto; /* Push footer to the bottom */
             padding-top: 15px;
             border-top: 1px solid #f0f0f0;
         }
         
         .read-more-link {
             color: var(--custom-red);
             font-weight: 600;
             text-decoration: none;
             transition: color 0.2s;
         }

         .read-more-link:hover {
             color: var(--deep-red);
             text-decoration: underline;
         }

         /* --- NEW STYLES FOR TESTIMONIALS (What customers say about us) --- */
         .testimonial-card {
             background-color: white;
             border: 1px solid #e0e0e0;
             border-radius: 12px;
             padding: 30px;
             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
             transition: all 0.3s ease;
             min-height: 250px;
             display: flex;
             flex-direction: column;
         }
         .testimonial-card:hover {
             box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
             transform: translateY(-3px);
         }
         .quote-icon {
             font-size: 2.5rem;
             color: var(--custom-red);
             margin-bottom: 15px;
         }
         .testimonial-text {
             font-style: italic;
             color: var(--custom-dark-gray);
             flex-grow: 1;
             margin-bottom: 20px;
         }
         .testimonial-author {
             font-weight: 700;
             color: var(--deep-red);
             margin-bottom: 0;
         }
         .testimonial-company {
             font-size: 0.9rem;
             color: #6c757d;
         }

         /* --- NEW STYLES FOR FAQ (Accordion) --- */
         .accordion-item {
             border: 1px solid #f0f0f0;
             margin-bottom: 10px;
             border-radius: 8px !important;
             overflow: hidden;
         }
         .accordion-button:not(.collapsed) {
             color: white;
             background-color: var(--custom-red);
             box-shadow: none;
             font-weight: 700;
         }
         .accordion-button:focus {
             box-shadow: 0 0 0 0.25rem rgba(187, 0, 0, 0.25);
         }
         .accordion-button {
             background-color: var(--custom-light-gray);
             color: var(--deep-red);
             font-weight: 600;
             padding: 1rem 1.25rem;
             border-radius: 8px !important;
             transition: all 0.2s;
         }
         .accordion-body {
             background-color: white;
             padding: 1.25rem;
             border-top: 1px solid #f0f0f0;
             font-size: 0.95rem;
             color: var(--custom-dark-gray);
         }

         .icon-list{
            padding: 20px;
            background-color: #fce7e7;
         }

         .bg-primary-red {
            background-color: var(--primary-color) !important;
        }
        .text-primary-red {
            color: var(--primary-color) !important;
        }
        .btn-primary-red {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            color: var(--white);
            transition: background-color 0.3s;
        }
        .btn-primary-red:hover {
            background-color: #a00000; /* Slightly darker red on hover */
            border-color: #a00000;
            color: var(--white);
        }
        .btn-outline-red {
            color: var(--primary-color);
            border-color: var(--primary-color);
        }
        .btn-outline-red:hover {
            background-color: var(--primary-color);
            color: var(--white);
        }
        /* Hero Section Styling - Using an image similar to the pattern */
        .hero-section {
            /* background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('courier-van-placeholder.jpg');  */
            /* Replace with a suitable high-res image */
            background-size: cover;
            background-position: center;
            color: white;
            padding: 100px 0;
            
        }
        .section-padding {
            padding: 60px 0;
        }
        .card-shadow {
            box-shadow: 0 4px 8px rgba(0,0,0,.08);
            transition: all 0.3s ease-in-out;
            border: none;
        }
        .card-shadow:hover {
            box-shadow: 0 8px 16px rgba(0,0,0,.15);
        }
        .service-icon, .trust-badge-icon {
            font-size: 2.5rem;
            color: var(--primary-color);
            margin-bottom: 15px;
        }
        .testimonial-card {
            border-left: 5px solid var(--primary-color);
        }
        .separator {
            border-top: 1px solid #e9ecef;
            margin: 40px 0;
        }
        
        /* Modern Booking Form Card Styling */
        .booking-form-card {
            background-color: var(--white);
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 10px 30px rgba(0,0,0,.1);
            border: 1px solid #ddd;
        }
        .form-section-header {
            border-bottom: 2px solid var(--primary-color);
            padding-bottom: 10px;
            margin-bottom: 25px;
        }
        .booking-card { background: #fff; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); padding: 40px; transition: all 0.4s ease; }
.stepper { display: flex; justify-content: space-between; position: relative; margin-bottom: 30px; }
.stepper::before { content: ''; position: absolute; top: 25%; left: 12%; width: 76%; height: 3px; background: #ffbdbd; transform: translateY(-50%); z-index: 0; }
.step { position: relative; z-index: 1; text-align: center; flex: 1; transition: all 0.3s ease; }
.step .circle { width: 45px; height: 45px; border-radius: 50%; background: white; color: #6c757d; display: flex; justify-content: center; align-items: center; margin: auto; font-size: 20px; transition: all 0.3s ease; }
.step.active .circle { background: #880000; color: #fff; box-shadow: 0 0 10px rgba(136,0,0,0.6); }
.step.completed .circle { background: #28a745; color: #fff; }
.step p { margin-top: 16px !important; font-weight: 500; color: #6c757d; transition: all 0.3s ease; }
.step.active p { color: #880000; font-weight: 600; }
.progress { height: 8px; background: #e9ecef; border-radius: 10px; }
.progress-bar { background: linear-gradient(90deg, #880000, #aa0000); transition: width 0.4s ease; }

.form-section { opacity: 0; transform: translateX(50px); transition: all 0.4s ease; display: none; }
.form-section.active { opacity: 1; transform: translateX(0); display: block; }

.btn-custom { background: #880000; border: none; transition: all 0.3s ease; }
.btn-custom:hover { background: #aa0000; }
.btn-outline-secondary:hover { background: #dee2e6; }

.invalid-feedback { display: none; color: red; font-size: 0.875em; }

@media (max-width: 768px) { .booking-card { padding: 25px; } .step p { font-size: 12px; } }


.dark-red-bg {
            /* This is a deep, dark red color, similar to the image */
            background-color: #8B0000;
        }

        .cta-text {
            /* Custom font size for the main line if needed */
            font-size: 2.5rem;
            font-weight: bold;
        }

        .btn-quote {
            /* Styling for the GET A QUOTE button (white background) */
            background-color: white;
            color: black;
            border: 2px solid white; /* Ensures border is visible */
            padding: 0.75rem 1.5rem;
            text-transform: uppercase;
            font-weight: bold;
        }

        .btn-call {
            /* Styling for the CALL 131 770 button (dark red background, white text/border) */
            background-color: #8B0000; /* Same as the banner background */
            color: white;
            border: 2px solid white;
            padding: 0.75rem 1.5rem;
            font-weight: bold;
        }