/*---
  ___  ___   ___ _____ ___ _____ ___    _   ___    ___ _   _ ___ _____ ___  __  __
 | _ )/ _ \ / _ \_   _/ __|_   _| _ \  /_\ | _ \  / __| | | / __|_   _/ _ \|  \/  |
 | _ \ (_) | (_) || | \__ \ | | |   / / _ \|  _/ | (__| |_| \__ \ | || (_) | |\/| |
 |___/\___/ \___/ |_| |___/ |_| |_|_\/_/ \_\_|    \___|\___/|___/ |_| \___/|_|  |_|

---*/
    /*--- Accordion ---*/
        /*--- Red ---*/
            .accordion.accordion-red-custom .accordion-button:not(.collapsed){
                background-color: var(--custom-bg-red-lighten);
                color: var(--custom-color-red);
            }
            .accordion.accordion-red-custom .accordion-button:focus{
                box-shadow: 0 0 0 0.25rem var(--custom-bg-red-darken);
            }
        /*------*/
    /*------*/

    /*--- Button ---*/
        .btn-brown-custom{
            --bs-btn-color: #ffffff;
            --bs-btn-bg: rgb(var(--custom-bg-brown));
            --bs-btn-border-color: var(--custom-color-brown);
            --bs-btn-hover-color: #ffffff;
            --bs-btn-hover-bg: var(--custom-color-brown-hover);
            --bs-btn-hover-border-color: var(--custom-color-brown-hover);
            --bs-btn-focus-shadow-rgb: var(--custom-bg-brown-shadow);
            --bs-btn-active-color: #ffffff;
            --bs-btn-active-bg: var(--custom-color-brown-active);
            --bs-btn-active-border-color: var(--custom-color-brown-active);
            --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
            --bs-btn-disabled-color: #ffffff;
            --bs-btn-disabled-bg: rgb(var(--custom-bg-brown));
            --bs-btn-disabled-border-color: var(--custom-color-brown);
        }
        .btn-gold-custom{
            --bs-btn-color: #000;
            --bs-btn-bg: rgb(var(--custom-bg-gold));
            --bs-btn-border-color: var(--custom-color-gold);
            --bs-btn-hover-color: #000;
            --bs-btn-hover-bg: var(--custom-color-gold-hover);
            --bs-btn-hover-border-color: var(--custom-color-gold-hover);
            --bs-btn-focus-shadow-rgb: var(--custom-bg-gold-shadow);
            --bs-btn-active-color: #000;
            --bs-btn-active-bg: var(--custom-color-gold-active);
            --bs-btn-active-border-color: var(--custom-color-gold-active);
            --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
            --bs-btn-disabled-color: #000;
            --bs-btn-disabled-bg: rgb(var(--custom-bg-gold));
            --bs-btn-disabled-border-color: var(--custom-color-gold);
        }
        .btn-red-custom{
            --bs-btn-color: #ffffff;
            --bs-btn-bg: rgb(var(--custom-bg-red));
            --bs-btn-border-color: var(--custom-color-red);
            --bs-btn-hover-color: #ffffff;
            --bs-btn-hover-bg: var(--custom-color-red-hover);
            --bs-btn-hover-border-color: var(--custom-color-red-hover);
            --bs-btn-focus-shadow-rgb: var(--custom-bg-red-shadow);
            --bs-btn-active-color: #ffffff;
            --bs-btn-active-bg: var(--custom-color-red-active);
            --bs-btn-active-border-color: var(--custom-color-red-active);
            --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
            --bs-btn-disabled-color: #ffffff;
            --bs-btn-disabled-bg: rgb(var(--custom-bg-red));
            --bs-btn-disabled-border-color: var(--custom-color-red);
        }
        .btn-outline-danger{
            --bs-btn-color: rgb(var(--custom-bg-red))!important;
            --bs-btn-border-color: rgb(var(--custom-bg-red))!important;
            --bs-btn-hover-color: #fff;
            --bs-btn-hover-bg: rgb(var(--custom-bg-red))!important;
            --bs-btn-hover-border-color: rgb(var(--custom-bg-red))!important;
            --bs-btn-focus-shadow-rgb: 220,53,69;
            --bs-btn-active-color: #fff;
            --bs-btn-active-bg: rgb(var(--custom-bg-red))!important;
            --bs-btn-active-border-color: rgb(var(--custom-bg-red))!important;
            --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
            --bs-btn-disabled-color: rgb(var(--custom-bg-red))!important;
            --bs-btn-disabled-bg: transparent;
            --bs-btn-disabled-border-color: rgb(var(--custom-bg-red))!important;
            --bs-gradient: none
        }
    /*------*/

    /*--- Carousel ---*/
        .carousel-caption-top{
            bottom: initial!important;
            top: 1.25rem!important;
        }
    /*------*/

    /*--- Dropdown ---*/
        /*--- Brown ---*/
            .dropdown.dropdown-brown-custom .dropdown-item.active{
                background-color: rgb(var(--custom-bg-brown))!important;
            }
            .dropdown.dropdown-brown-custom .dropdown-item:active{
                background-color: var(--custom-bg-brown-darken)!important;
            }
        /*------*/
        /*--- Gold ---*/
            .dropdown.dropdown-gold-custom .dropdown-item.active{
                background-color: rgb(var(--custom-bg-gold))!important;
                color: #000!important;
            }
            .dropdown.dropdown-gold-custom .dropdown-item:active{
                background-color: var(--custom-bg-gold-darken)!important;
                color: #000!important;
            }
        /*------*/

        /*--- Red ---*/
            .dropdown.dropdown-red-custom .dropdown-item.active{
                background-color: rgb(var(--custom-bg-red))!important;
            }
            .dropdown.dropdown-red-custom .dropdown-item:active{
                background-color: var(--custom-bg-red-darken)!important;
            }
        /*------*/

        .dropdown-toggle.dropdown-toggle-decoration-none::after{
            display: none!important;
        }
    /*------*/

    /*--- Form ---*/
        /*--- Form control ---*/
            .form-gold-custom .form-control:focus{
                border-color: var(--custom-color-gold);
                box-shadow: 0 0 0 .25rem var(--custom-color-gold-shadow);
            }
        /*------*/

        /*--- Form input ---*/
            .form-gold-custom .form-check-input:checked{
                background-color: var(--custom-color-gold);
                border-color: var(--custom-color-gold);
            }
            .form-gold-custom .form-check-input:focus{
                box-shadow: 0 0 0 .25rem var(--custom-color-gold-shadow);
                border-color: var(--custom-color-gold);
            }
            .form-gold-custom .form-check-input:checked[type=checkbox]{
                --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")
            }

            /*--- Validation ---*/
                .form-gold-custom.was-validated .no-validation .form-check-input:valid, .form-gold-custom .was-validated .no-validation .form-check-input:invalid{
                    border-color: var(--bs-border-color);
                }
                .form-gold-custom.was-validated .no-validation .form-check-input:valid:focus, .form-gold-custom .was-validated .no-validation .form-check-input:invalid:focus{
                    box-shadow: 0 0 0 .25rem var(--custom-color-gold-shadow);
                }
                .form-gold-custom.was-validated .no-validation .form-check-input:valid:checked, .form-gold-custom .was-validated .no-validation .form-check-input:invalid:checked{
                    background-color: var(--custom-color-gold);
                    border-color: var(--custom-color-gold);
                }
                .form-gold-custom.was-validated .no-validation .form-check-input:valid~.form-check-label, .form-gold-custom .was-validated .no-validation .form-check-input:invalid~.form-check-label{
                    color: inherit;
                }
            /*------*/
        /*------*/
    /*------*/

    /*--- Links ---*/
        a.icon-link .bi{
            vertical-align: -0.125em;
        }
    /*------*/

    /*--- Nav ---*/
        /*--- Pills ---*/
            /*--- Brown custom ---*/
                .nav-pills.nav-pills-brown-custom .nav-link{
                    color: var(--custom-color-brown)!important;
                }
                .nav-pills.nav-pills-brown-custom .nav-link:hover{
                    color: var(--custom-color-brown-hover)!important;
                }
                .nav-pills.nav-pills-brown-custom .nav-link.active{
                    background-color: var(--custom-color-brown)!important;
                    color: #ffffff!important;
                }
                .nav-pills.nav-pills-brown-custom .nav-link.active:hover{
                    background-color: var(--custom-color-brown-active)!important;
                    color: #ffffff!important;
                }
            /*------*/

            /*--- Gold custom ---*/
                .nav-pills.nav-pills-gold-custom .nav-link, .nav-pills.nav-pills-gold-custom .dropdown .btn{
                    color: var(--custom-color-gold)!important;
                }
                nav:not(data-bs-theme=dark) .offcanvas .nav-pills.nav-pills-gold-custom .nav-link, nav:not(data-bs-theme=dark) .offcanvas .nav-pills.nav-pills-gold-custom .dropdown .btn{
                    color: black!important;
                }
                .nav-pills.nav-pills-gold-custom .nav-link:hover{
                    color: var(--custom-color-gold-hover)!important;
                }
                .nav-pills.nav-pills-gold-custom .nav-link.active{
                    background-color: var(--custom-color-gold)!important;
                    color: #000!important;
                }
                .nav-pills.nav-pills-gold-custom .nav-link.active:hover{
                    background-color: var(--custom-color-gold-active)!important;
                    color: #000!important;
                }
            /*------*/

            /*--- Red custom ---*/
                .nav-pills.nav-pills-red-custom .nav-link{
                    color: var(--custom-color-red)!important;
                }
                .nav-pills.nav-pills-red-custom .nav-link:hover{
                    color: var(--custom-color-red-hover)!important;
                }
                .nav-pills.nav-pills-red-custom .nav-link.active{
                    background-color: var(--custom-color-red)!important;
                    color: #ffffff!important;
                }
                .nav-pills.nav-pills-red-custom .nav-link.active:hover{
                    background-color: var(--custom-color-red-active)!important;
                    color: #ffffff!important;
                }
            /*------*/
        /*------*/
    /*------*/

/*---
  ___   ___   ___ _   _ __  __ ___ _  _ _____
 |   \ / _ \ / __| | | |  \/  | __| \| |_   _|
 | |) | (_) | (__| |_| | |\/| | _|| .` | | |
 |___/ \___/ \___|\___/|_|  |_|___|_|\_| |_|

---*/
    /*--- Animation ---*/
        /*--- Pulse ---*/
            .pulse{
                animation: pulse 2s linear infinite
            }
            @keyframes pulse{
                0%{
                    box-shadow: 0 0 0 0 rgb(255, 109, 74, 0.7) , 0 0 0 0 rgb(255, 109, 74, 0.7)
                }
                40%{
                    box-shadow: 0 0 0 10px rgb(255, 109, 74, 0) , 0 0 0 0 rgb(255, 109, 74, 0.7)
                }
                80%{
                    box-shadow: 0 0 0 10px rgb(255, 109, 74, 0) , 0 0 0 10px rgb(255, 109, 74, 0)
                }
                100%{
                    box-shadow: 0 0 0 0 rgb(255, 109, 74, 0) , 0 0 0 10px rgb(255, 109, 74, 0)
                }
            }
            /*--- Danger ---*/
                .pulse-danger{
                    animation: pulse-danger 2s linear infinite;
                }
                @keyframes pulse-danger{
                    0%{
                        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7), 0 0 0 0 rgba(220, 53, 69, 0.7);
                    }
                    40%{
                        box-shadow: 0 0 0 10px rgba(220, 53, 69, 0), 0 0 0 0 rgba(220, 53, 69, 0.7);
                    }
                    80%{
                        box-shadow: 0 0 0 10px rgba(220, 53, 69, 0), 0 0 0 10px rgba(220, 53, 69, 0);
                    }
                    100%{
                        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0), 0 0 0 10px rgba(220, 53, 69, 0);
                    }
                }
            /*------*/

            /*--- Info ---*/
                .pulse-info{
                    animation: pulse-info 2s linear infinite;
                }
                @keyframes pulse-info{
                    0%{
                        box-shadow: 0 0 0 0 rgba(13, 202, 240, 0.7), 0 0 0 0 rgba(13, 202, 240, 0.7);
                    }
                    40%{
                        box-shadow: 0 0 0 10px rgba(13, 202, 240, 0), 0 0 0 0 rgba(13, 202, 240, 0.7);
                    }
                    80%{
                        box-shadow: 0 0 0 10px rgba(13, 202, 240, 0), 0 0 0 10px rgba(13, 202, 240, 0);
                    }
                    100%{
                        box-shadow: 0 0 0 0 rgba(13, 202, 240, 0), 0 0 0 10px rgba(13, 202, 240, 0);
                    }
                }
            /*------*/

            /*--- Success ---*/
                .pulse-success{
                    animation: pulse-success 2s linear infinite;
                }
                @keyframes pulse-success{
                    0%{
                        box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.7), 0 0 0 0 rgba(25, 135, 84, 0.7);
                    }
                    40%{
                        box-shadow: 0 0 0 10px rgba(25, 135, 84, 0), 0 0 0 0 rgba(25, 135, 84, 0.7);
                    }
                    80%{
                        box-shadow: 0 0 0 10px rgba(25, 135, 84, 0), 0 0 0 10px rgba(25, 135, 84, 0);
                    }
                    100%{
                        box-shadow: 0 0 0 0 rgba(25, 135, 84, 0), 0 0 0 10px rgba(25, 135, 84, 0);
                    }
                }
            /*------*/
        /*------*/

        /*--- Smooth underline ---*/
            .on-hover-smooth-underline::after{
                content: '';
                position: absolute;
                bottom: 0;
                right: 0;
                width: 100%;
                height: 1px;
                opacity: 0;
                transition: opacity 300ms, transform 300ms;
                transform: scale(0);
                transform-origin: center;
            }
            .on-hover-smooth-underline::after{
                background-color: var(--custom-color-red);
            }
            .on-hover-smooth-underline{
                position: relative;
                width: fit-content;
            }
            .on-hover-smooth-underline:hover::after,
            .on-hover-smooth-underline:focus::after{
                animation: underline-bounce .5s;
                opacity: 1;
                transform: scale(1);
            }
            .on-hover-smooth-underline.active:hover::after,
            .on-hover-smooth-underline.active:focus::after{
                transform: scale(0)!important;
            }
            @keyframes underline-bounce{
                0%{
                    opacity: 0;
                    transform: scale(0);
                }
                50%{
                    opacity: 1;
                    transform: scale(1);
                }
                80%{
                    opacity: 1;
                    transform: scale(0.8);
                }
                100%{
                    opacity: 1;
                    transform: scale(1);
                }
            }
        /*------*/
    /*------*/

    /*--- Background ---*/
        /*--- Backgrounded ---*/
            .backgrounded{
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center;
            }
        /*------*/
    /*------*/

    /*--- Form ---*/
        form input[with-eye]~.bi{
            position: absolute;
            right: 0.75rem;
            top: calc(0.5 * 58px);
            display: flex;
            font-size: 1.3rem;
            cursor: pointer;
            transform: translateY(-50%);
        }
    /*------*/

    /*--- General ---*/
        .logo-container img{
            height: 56px;
        }
        .logo-container span{
            font-family: 'Lemonada';
            font-size: 2rem;
            font-weight: 500;
        }
        .logo-container.logo-inline-text, .logo-container.logo-inline-text > span{
            height: 46px;
            display: inline-block;
        }
    /*------*/

    /*--- Hero ---*/
        .logo-container.logo-hero img{
            height: calc(4rem + 10vw);
        }
        .logo-container.logo-hero > span{
            font-size: calc(2rem + 5vw);
        }

        .logo-container.logo-hero.logo-remini > span > span{
            font-size: calc(1rem + 1vw);
        }
    /*------*/

    /*--- Image Backgrounded ---*/
        .img-backgrounded{
            background-size: cover;
            background-repeat: no-repeat;
            padding-top:1rem;
            padding-bottom: 300px;
        }
    /*------*/

    /*--- Main ---*/
        .nav-fixed-120{
            padding-top: 120px;
        }
        .nav-fixed-120:has(> [ignore-nav-fixed]){
            padding-top: 0!important;
        }
    /*------*/

    /*--- Nav ---*/
        nav{
            padding: 1rem 0;
        }
        .nav-container{
            padding: 1rem;
            background: rgb(var(--custom-bg-secondary));
            border-radius: 5px;
        }

        /*--- Dropdown ---*/
            .nav-container button{
                color: white!important;
            }

            .nav-container .dropdown-menu.show{
                background: rgb(var(--custom-bg-secondary));
            }
        /*------*/
    /*------*/

    /*--- Zoom ---*/
        .zoom-20{
            transition: scale 1s cubic-bezier(0.075, 0.82, 0.165, 1);
        }
        .zoom-20:hover{
            scale: 1.2;
        }
    /*------*/

/*---
   ___ _   _ ___ ___ ___ _  _ _____   ___ ___  ___     _ ___ ___ _____
  / __| | | | _ \ _ \ __| \| |_   _| | _ \ _ \/ _ \ _ | | __/ __|_   _|
 | (__| |_| |   /   / _|| .` | | |   |  _/   / (_) | || | _| (__  | |
  \___|\___/|_|_\_|_\___|_|\_| |_|   |_| |_|_\\___/ \__/|___\___| |_|

---*/

    /*--- Home ---*/
        #img-backgrounded-trucks{
            background-image: url('/storage/images/all-trucks.jpg');
        }
    /*------*/

    /*--- Hauling ---*/
        #our-partners{
            @media (min-width: 576px){
                margin-bottom: 100px;
            }
        }
    /*------*/

    /*--- Trading ---*/
        .easy-read-card{
            text-align: center;
            padding-top: 1.5rem;
            margin-top: 4rem;
            background: linear-gradient(347deg, #000000 0%, #003366 80%);
            color: white;
            box-shadow: 0 0 5px 0 white;
        }
        .easy-read-card img{
            position: absolute;
            transform: translateX(-50%);
            left: 50%;
            width: 100px;
            top: -64px;
            z-index: 0;
            border-radius: 50%;
        }
        .easy-read-card.blue img{
            background: #0D47A1;
            border: 5px solid #082C5A;
            box-shadow: 0 0 15px 0px #082C5A;
        }
        .easy-read-card.red img{
            background: #B71C1C;
            border: 5px solid #7F0000;
            box-shadow: 0 0 15px 0px #7F0000;
        }
        .easy-read-card.purple img{
            background: #4527A0;
            border: 5px solid #2C1763;
            box-shadow: 0 0 15px 0px #2C1763;
        }
        .easy-read-card.orange img{
            background: #E65100;
            border: 5px solid #BF360C;
            box-shadow: 0 0 15px 0px #BF360C;
        }
        .easy-read-card.brown img{
            background: #3E2723;
            border: 5px solid #281914;
            box-shadow: 0 0 15px 0px #281914;
        }
        .easy-read-card.green img{
            background: #004D40;
            border: 5px solid #00332B;
            box-shadow: 0 0 15px 0px #00332B;
        }
        .easy-read-card.yellow img{
            background: #F57F17;
            border: 5px solid #A65F00;
            box-shadow: 0 0 15px 0px #A65F00;
        }
        .easy-read-card.gray img{
            background: #263238;
            border: 5px solid #1A2429;
            box-shadow: 0 0 15px 0px #1A2429;
        }
    /*------*/