/************************************************************************
------------------------------------ INDEX ------------------------------
*************************************************************************/
/* 
    1. Categories Landing Page CSS
        1.1. General
        1.2. Categories Cards Section
        1.3. Media Queries Categories

    2. Category Landing Page CSS
        2.1. Category Hero Section
        2.2. Category Products Section
        2.3. Category Social Proof Section
        2.4. Category Media Queries

    3. Product Landing Page CSS
        3.1. Product General
        3.2. Product Hero Section
        3.3. Product Hero Form
        3.4. Product Features Section
        3.5. Product Video Section
        3.6. Product Perks Section
        3.7. Product Available Products Section
        3.8. Product Available Products Modal Section
        3.9. Product Media Queries

    4. Footer
*/

:root {
    --blue-color: #005499;
    --white-color: #ffffff;
    --yellow-color: #FCD426;
    --light-gray: #f6f6f6;
    --default-background-gradient: radial-gradient(82.29% 144.63% at 17.71% 57.95%, rgba(0, 84, 153, 0.88) 0%, #004B89 100%);
}

h2, h3 {
    text-wrap: balance;
} 

/************************************************************************
---------------------- 1. Categories Landing Page CSS -------------------
*************************************************************************/

/* 1.1. General */

.categories-section > .row {
    padding: 70px !important;
}

.categories-section a {
    text-decoration: none;
}

/* 1.2. Categories Cards Section */

.categories-section .card h3 {
    margin: 20px 0 0 0 !important;
}

.categories-section .card:hover {
    transform: scale(1.01);
    box-shadow: 0px 0px 10px rgba(0, 80, 145, 0.39);
    transition: 0.3s ease-in-out;
}

.categories-section .bottom-pattern {
    margin: 15px 0;
    background-image: url("data:image/svg+xml,%3Csvg width='2084' height='100' viewBox='0 0 2084 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1020.08' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='932.076' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1063.98' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='975.983' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='756.076' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1107.89' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='228.076' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='668.076' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1151.8' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1284.08' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1020.08' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='799.983' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='492.076' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='140.076' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='932.076' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1063.98' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='711.983' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='975.983' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1196.08' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='843.891' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1107.89' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='404.076' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='887.799' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='271.983' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1151.8' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='756.076' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1020.08' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='668.076' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='799.983' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='932.076' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='711.983' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1327.98' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='843.891' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='183.983' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1063.98' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='887.799' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='535.983' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='7.98322' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='315.891' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='756.076' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='975.983' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='668.076' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='359.799' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='799.983' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1107.89' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='711.983' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='228.076' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='843.891' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='140.076' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1151.8' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='887.799' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='271.983' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1239.98' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='447.983' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='183.983' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='315.891' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='359.799' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='579.891' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='228.076' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='51.8909' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='140.076' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='271.983' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='623.799' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='183.983' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='95.7986' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='315.891' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='359.799' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1284.08' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='492.076' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1196.08' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='404.076' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1327.98' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='535.983' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='7.98322' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1239.98' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='447.983' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='579.891' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='51.8909' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='623.799' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='95.7986' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1284.08' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='492.076' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1196.08' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='404.076' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1327.98' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='535.983' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='7.98322' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1239.98' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='447.983' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='579.891' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='51.8909' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='623.799' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='95.7986' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1768.08' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1680.08' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1811.98' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1723.98' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1504.08' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1855.89' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='976.076' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1416.08' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1899.8' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='2032.08' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1768.08' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1547.98' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1240.08' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='888.076' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1680.08' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1811.98' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1459.98' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1723.98' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1944.08' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1591.89' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1855.89' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1152.08' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1635.8' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1019.98' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1899.8' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1504.08' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1768.08' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1416.08' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1547.98' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1680.08' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1459.98' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='2075.98' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1591.89' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='931.983' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1811.98' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1635.8' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1283.98' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='755.983' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1063.89' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1504.08' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1723.98' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1416.08' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1107.8' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1547.98' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1855.89' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1459.98' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='976.076' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1591.89' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='888.076' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1899.8' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1635.8' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1019.98' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1987.98' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1195.98' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='931.983' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1063.89' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1107.8' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1327.89' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='976.076' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='799.891' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='888.076' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1019.98' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1371.8' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='931.983' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='843.799' cy='7.98322' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1063.89' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1107.8' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='2032.08' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1240.08' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1944.08' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1152.08' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='2075.98' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1283.98' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='755.983' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1987.98' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1195.98' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1327.89' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='799.891' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1371.8' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='843.799' cy='49.8951' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='2032.08' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1240.08' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1944.08' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1152.08' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='2075.98' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1283.98' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='755.983' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1987.98' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1195.98' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1327.89' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='799.891' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='1371.8' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3Ccircle cx='843.799' cy='91.807' r='7.98322' fill='%23FCD426'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    height: 75px;
}

/* 1.3. Media Queries Categories LP */

@media (max-width:767px) {
    .categories-section > .row {
        padding: 70px 10px !important;
    }

    .categories-section .bottom-pattern {
        background-size: cover;
    }
}


/************************************************************************
-------------------------- 2. Category Landing Page CSS -----------------
*************************************************************************/


/* 2.1. Category Hero Section */

.category-hero-section {
    background-size: cover;
    background-position: center right;
    height: 100%;
}


.category-hero-container h1,
.category-products-container h2,
.category-products-container  span {
    text-transform: capitalize;
}

.category-hero-container {
    width: fit-content;
    max-width: 40%;
    background: #00549996;
    padding: 15px 50px 30px 30px;
    color: var(--white-color);
    border-bottom-right-radius: 15px;
    text-wrap: balance;
    text-align: center;
}

.category-hero-mobile,
.product-hero-section-mobile,
.visit-cat-btn-mobile {
    display: none;
}


/* 2.2. Category Products Section */


.category-products-container {
    padding: 20px 70px;
    background-color: var(--light-gray);
}


.available-products .card,
.category-products-container .card {
    border: 2px solid #DCDCDC;
    background: var(--white-color);
}


.available-products .card img,
.category-products-container .card img {
    height: 150px;
    object-fit: contain;
}

.available-products .card-caption h3,
.category-products-container .card h3,
.category-products-container h3,
.social-proof-section h2,
.category-products-container h2 {
    color: var(--blue-color);
    font-size: 1.1rem;
    font-weight: bolder;
}

.category-products-container h2 {
    font-size: 1.2rem;
}

.category-products-container h2 a {
    font-weight: 500;
}

.category-products-container h2 a:hover {
    text-decoration: underline;
    color: var(--blue-color);
}

.category-products-container h3 {
    font-size: 1.5rem;
    margin: 50px 0 0 0;
}

.available-products .card-caption h4,
.category-products-container .card h4 {
    margin: 20px 0 0 0;
    font-size: 1rem;
    color: #545454;
}

.available-products .available-popup-btn,
.category-products-container .card .category-card-btn,
.available-modal-container .see-specs-btn {
    height: 50px;
    width: 100%;
    color: var(--white-color);
    background: var(--blue-color);
    border-radius: 2px;
    border: 0;
    margin: 30px 0 0 0;
}

.category-products-container .card {
    height: 100%;
    width: 95%;
}

/* 2.3. Category Social Proof Section */

.social-proof-section {
    margin: 100px 70px;
}

.social-proof-section h2 {
    font-size: 2rem;
}

.social-proof-section p {
    margin: 50px 0;
    padding: 0 15%;
    font-size: 1.2rem;
}

#accordion-learn-btn,
.social-proof-section .visit-awards-btn {
    background: var(--yellow-color);
    color: var(--blue-color);
    padding: 10px 35px;
    border-radius: 50px;
    font-weight: 900;
    border: 0;
}

.social-proof-section .visit-awards-btn {
    background: var(--blue-color);
    color: var(--yellow-color);
    box-shadow: 1px 1px 3px #000;
}

.awards-learn-more-btn {
    color: black;
    background: var(--yellow-color);
    border: 0;
    padding: 10px 15px;
    margin: 0 0 20px 0;
}

.social-proof-section .available-products .card-award.thumbnail {
    padding: 0;
    min-height: 460px;
}

.social-proof-section .available-products .card-caption h3 {
    margin: 0;
}

.social-proof-section .available-products .card-award .card-caption {
    padding: 20px;
}

.social-proof-section .available-products .card.card-award img {
    height: unset;
    object-fit: cover;
    min-height: 212px;
}

/* 2.4. Category Media Queries */
    @media (min-width:991px) {
        .category-hero-section article {
            margin-top: -180px;
        }
        #hero-accordion {
            width: 30% !important;
        }
    }

    @media (max-width:991px) {
        .category-hero-container {
            width: 100%;
            max-width: 100%;
            border-bottom-right-radius: 0;
        }

        .social-proof-section {
            margin: 70px 10px;
        }
    }


@media (max-width:767px) {
    .category-hero-section {
        background-image: unset !important;
        height: fit-content;
        text-align: center;
        margin: -1px 0 0 0;
        height: 100%;
    }
    .category-hero-section article{
        padding:30px 0;
        background: var(--default-background-gradient);
    }
    .category-hero-mobile {
        display: block;
    }

    .social-proof-section p {
        padding: 0 10px;
    }

    .hero-img-mobile {
        width: 100%;
    }

    .category-hero-container {
        background: var(--default-background-gradient);
    }

    .category-products-container {
        padding: 20px 10px;
    }
}


/************************************************************************
-------------------------- 3. Product Landing Page CSS ------------------
*************************************************************************/

/* 3.1. Product General */

.container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.row {
    margin-right: 0;
    margin-left: 0;
}

.hide {
    display: none !important;
}


/* 3.2. Product Hero Section */

.img-logo {
    max-width: 200px;
    max-height: 70px;
}

.navbar-brand {
    padding-bottom: 0;
}

.accordion-container {
    padding: 30px;
}

.product-hero-section {
    background-size: cover;
    background-position: center right;
    min-height: 700px;
}

.hero-cover-gradient {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
}

.hero-title-container {
    width: fit-content;
    background: #00549996;
    padding: 15px 50px 15px 30px;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    color: var(--white-color);
}

.visit-cat-btn {
    background: #0054996c;
    color: var(--white-color);
    padding: 15px 30px;
    border: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    font-size: 1.1rem;
    text-decoration: underline;
    text-underline-offset: 5px;
}

#hero-accordion {
    width: 80%;
}

.hero-accordion-container  {
    min-height: 600px;
}

.hero-accordion-btn {
    border-radius: 0;
    padding: 15px 30px;
    border: 0;
    text-align: left;
}

.hero-accordion-btn .arrow .arrow-l-line,
.hero-accordion-btn .arrow .arrow-r-line {
    height: 10px;
    width: 2px;
    margin: 0 0 0 4px;
    transition: transform 0.3s ease-in-out;
}

.hero-accordion-btn[aria-expanded="false"] .arrow .arrow-r-line,
.hero-accordion-btn[aria-expanded="false"] .arrow .arrow-l-line {
    background-color: #013865;
}

.hero-accordion-btn[aria-expanded="true"] .arrow .arrow-r-line,
.hero-accordion-btn[aria-expanded="true"] .arrow .arrow-l-line {
    background-color: var(--white-color);
}

.hero-accordion-btn[aria-expanded="false"] .arrow .arrow-r-line {
    transform: rotate(45deg);
}

.hero-accordion-btn[aria-expanded="false"] .arrow .arrow-l-line {
    transform: rotate(315deg);
}

.hero-accordion-btn[aria-expanded="true"] .arrow .arrow-l-line {
    transform: rotate(225deg);
}

.hero-accordion-btn[aria-expanded="true"] .arrow .arrow-r-line {
    transform: rotate(135deg);
}

.btn:focus {
    box-shadow: none;
}

.hero-accordion-btn[aria-expanded="true"] {
    background: #0054996c;
    color: var(--white-color);
}

.hero-accordion-btn[aria-expanded="false"] {
    background: #ffffffb4;
    color: #013865;
}

#hero-accordion > div:not(:nth-last-child(-n+2)) {
    border-bottom: 2px solid var(--blue-color);
}

.card-body {
    background: #ffffffeb;
    color: #000;
}

.hero-accordion-btn .text-btn {
    margin: 0;
}

/* 3.3. Product Hero Form */

input[type=radio] {
    accent-color: var(--blue-color);
}

input[type=radio]:focus {
    border-color: none;
    box-shadow: none;
}

.hero-form-container form .form-group {
    width: 100%;
    max-width: 100%;
    flex: 100%;
}

@keyframes animation-opacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 100%;
    }
}

.hero-form-container {
    background-color: #003159B2;
    color: var(--white-color);
    padding: 25px;
}

.hero-form-container,
.accordion-f-mobile,
#hero-accordion,
.available-modal-container {
    opacity: 0;
    animation-name: animation-opacity;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}

#close-hero-form-btn,
#close-available-form-btn {
    background: none;
    color: var(--yellow-color);
    font-weight: bolder;
    font-size: 1.7rem;
    border: 0;
    height: fit-content;
}

#close-available-form-btn {
    color: var(--blue-color);
    position: absolute;
    right: 10px;
    z-index: 999;
}

.hero-form-container form .col-md-2 {
    max-width: 50%;
}

.hero-form-container a,
.available-modal-container .submit-container a {
    color: var(--white-color);
    text-decoration: underline;
}

.hero-form-container h2 {
    font-size: 1.3rem;
    margin: 0 0 20px 0;
}

.hero-form-container h2 > span {
    font-size: 0.9rem;
    text-transform: uppercase;
}

.hero-form-container .contacted-input-group p {
    width: 100%;
    margin: 0 0 10px 0;
}

.hero-form-container form .contacted-input-group label {
    margin-bottom: 0;
}

.hero-form-container form .contacted-input-group input {
    margin: 2.5px 20px 0 5px;
}

.hero-form-container form input::placeholder {
    font-size: 1rem;
}

.hero-form-container form .list-unstyled {
    margin: 0;
}

.hero-form-container form .button-send {
    margin: 0 0 20px 0;
}

.hero-form-container form .form-button,
.available-modal-container form .form-button {
    width: 100%;
    background: var(--yellow-color);
    font-weight: bolder;
    padding: 15px 0;
}

.hero-form-container form .disclaimer {
    font-size: 0.8rem;
}

.thank-you-txt {
    color: var(--white-color);
}

.form-check-input {
    position: relative;
    margin: 0.15rem 5px 0 0;
    height: fit-content;
}

.small, small {
    font-size: 100%;
}

h2.thank-you-txt{
    font-size: 70px;
    font-weight: 900;
    letter-spacing: 10px;
}

p.thank-you-txt{
    font-size: 21px;    
}


@media only screen and (max-width: 991px) {
    h2.thank-you-txt {
        font-size: 40px;
        letter-spacing: 0px;
    }
    
    p.thank-you-txt {
        text-align: center;
        font-size: 20px!important;
    }    
}

/* 3.4. Product Features Section */

.features-section .features-title,
.perks-section h2,
.ava-products,
.avaliable-form-title {
    text-transform: capitalize;
    color: var(--blue-color);
    font-weight: bolder;
}

.features-section .features-description {
    font-size: 1rem;
    margin: 30px 0 20px 0 !important;
}

.features-grid-container {
    min-height: 550px;
    padding: 1rem 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
    width: 750px;
}

.features-grid {
    width: min(100%, 100%);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 1fr);
}

.features-btn {
    background: var(--yellow-color);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    border: 0;
    max-width: 45px;
    max-height: 45px;
    border-radius: 50%;
    border: 2px solid var(--white-color);
}

.features-btn .numbers,
.accordion-f-mobile {
    display: none !important;
}

.features-btn .v-line,
.features-btn .h-line {
    position: absolute;
    background-color: var(--white-color);
}

.features-btn .v-line {
    height: 20px;
    width: 3px;
}

.features-btn .h-line {
    width: 20px;
    height: 3px;
}

.tooltip-inner {
    background-color: var(--white-color);
    color: #2b2b2b;
    font-size: 1rem;
    min-width: 400px;
    padding: 20px;
    border: #bdbdbd 2px solid;
}

.tooltip-inner h2 {
    color: var(--blue-color);
    font-size: 1.2rem;
    margin: 0 0 20px 0;
    text-transform: uppercase;
}

.tooltip-inner p,
.tooltip-inner h2 {
    text-align: left;
}

.tooltip.show {
    opacity: 1;
}

.bs-tooltip-auto[x-placement^=top] .arrow::before,.bs-tooltip-top .arrow::before{
    border-top-color:#bdbdbd !important;
}
.bs-tooltip-auto[x-placement^=bottom] .arrow::before,.bs-tooltip-bottom .arrow::before{
    border-bottom-color:#bdbdbd !important;
}
.bs-tooltip-auto[x-placement^=right] .arrow::before,.bs-tooltip-right .arrow::before{
    border-right-color:#bdbdbd !important;
}
.bs-tooltip-auto[x-placement^=left] .arrow::before,.bs-tooltip-left .arrow::before{
    border-left-color:#bdbdbd !important;
}


/* 3.5. Product Video Section */

.video-section {
    background: var(--default-background-gradient);
    background-size: cover;
}

.video-section-wrap {
    background-image: url("data:image/svg+xml,%3Csvg width='250' height='450' viewBox='0 0 250 450' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.00291978 222.499L249.003 -7.19193e-05L249.003 449.2L0.00291978 222.499Z' fill='%23FCD426'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 160px 60%;
    height: 700px;
}

.video-section .col-md-6 {
    height: 100%;
}

.video-section h2 {
    font-family: 'Anton', sans-serif ;
    font-size: 4rem;
    color: var(--white-color);
    text-shadow: 2px 2px 5px #0000006b;
}

.video-section h2 > span {
    color: var(--yellow-color);
}

.video-section .video-info-container {
    max-height: 400px;
}

.video-section .video-info-container p,
.video-section .video-info-container h3 {
    max-width: 80%;
}

.video-section .video-info-container h3 {
    margin: 20px 0 30px 0;
    color: var(--yellow-color);
}

.video-section .video-info-container p {
    color: var(--white-color);
}

/* 3.6. Product Perks Section */

.perks-section {
    margin: 100px 0 0 0;
}

.perks-section h2 {
    margin: 50px 0;
}

.perks-section .cards-container {
    padding: 70px;
}

.perks-section .cards-container .card,
.categories-section .card  {
    box-shadow: 0px 0px 10px rgba(0, 79, 145, 0.25);
    padding: 0 0 20px 0;
    border-radius: 5px;
    z-index: 2;
    height: 100%;
    transition: transform 0.3s ease-in-out;
}

.perks-section .cards-container .card img,
.categories-section .card img {
    height: 250px;
    width: 100%;
    object-fit: cover;
}

.perks-section .cards-container .card h3,
.categories-section .card h3 {
    text-transform: uppercase;
    font-weight: bolder;
    color: var(--blue-color);
    margin: 30px 0 20px 0;
    font-size: 1.2rem;
    text-align: center;
}

.card-back-pattern-top,
.card-back-pattern-bottom {
    position: absolute;
    height: 120px;
    width: 120px;
    background-image: url("data:image/svg+xml,%0A%3Csvg width='149' height='142' viewBox='0 0 149 142' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8.00293' cy='8' r='8' fill='%23FCD426'/%3E%3Ccircle cx='52.0029' cy='8' r='8' fill='%23FCD426'/%3E%3Ccircle cx='96.0029' cy='8' r='8' fill='%23FCD426'/%3E%3Ccircle cx='140.003' cy='8' r='8' fill='%23FCD426'/%3E%3Ccircle cx='8.00293' cy='50' r='8' fill='%23FCD426'/%3E%3Ccircle cx='52.0029' cy='50' r='8' fill='%23FCD426'/%3E%3Ccircle cx='96.0029' cy='50' r='8' fill='%23FCD426'/%3E%3Ccircle cx='140.003' cy='50' r='8' fill='%23FCD426'/%3E%3Ccircle cx='8.00293' cy='92' r='8' fill='%23FCD426'/%3E%3Ccircle cx='52.0029' cy='92' r='8' fill='%23FCD426'/%3E%3Ccircle cx='96.0029' cy='92' r='8' fill='%23FCD426'/%3E%3Ccircle cx='140.003' cy='92' r='8' fill='%23FCD426'/%3E%3Ccircle cx='8.00293' cy='134' r='8' fill='%23FCD426'/%3E%3Ccircle cx='52.0029' cy='134' r='8' fill='%23FCD426'/%3E%3Ccircle cx='96.0029' cy='134' r='8' fill='%23FCD426'/%3E%3Ccircle cx='140.003' cy='134' r='8' fill='%23FCD426'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.card-back-pattern-top {
    top: -55px;
    left: -15px;
}

.card-back-pattern-bottom {
    bottom: -65px;
    right: -15px;
    margin-left: auto;
    z-index: 0;
}

small.disclaimer{
    font-size: 80%;
    font-weight: 400;
}

/* 3.7. Product Available Products Section */

.middle-gray h1, .mob-title {
    color: var(--blue-color);
    font-size: 28px;
    font-weight: 700;
    position: relative;
    text-transform: uppercase;
}

.mob-title { 
    text-align: center;
    margin-bottom: 60px !important
}

h3.ava-products {
    color: var(--blue-color);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 30px 0;
}

.available-products .thumbnail {
    padding: 20px;
    margin-right: 20px;
    height: 100%;
    min-height: 430px;
}

.available-products .slick-prev, .available-products .slick-next { top: -20% }

.available-products .card-caption h3 {
    color: #545454;
    margin-top: 30px;
    margin-bottom: 0px;
}	

.available-products .card-caption p { 
    font-size: 14px;
    margin-bottom: 0px;
    color: #000;
}

button.slick-prev.slick-arrow, button.slick-next.slick-arrow {
    width: 60px;
    height: 60px;
}

.social-header {
    margin: 0 0 15px 0;
}

.available-products .slick-prev,
.available-products .slick-next {
    top: -11%;
}

.ava-products {
    font-size: 1.5rem;
    margin: 0 0 35px 0;
}

.slick-track {
    height: 410px;
}

/* 3.8. Product Available Products Modal Section */

.available-modal-container {
    position: fixed;
    top: 0;
    height: 100vh;
    background-color: var(--white-color);
    z-index: 999;
    overflow-y: scroll;
    display: flex;
}

.available-modal-container form {
    max-width: 90%;
    padding: 0 0 50px 0;
}

.available-modal-container .radio-btn-input,
.hero-form-container form .radio-btn-input {
    width: fit-content;
    height: fit-content;
    margin: 2.5px 0 0 5px;
}

.available-modal-container .available-form-description {
    margin: 0 10px 0 0;
}

.available-modal-container .contacted-input-group p {
    margin: 0 10px 0 0;
}

.available-modal-container .contacted-input-group label {
    margin: 0 0 0 20px;
}

.available-modal-container .see-specs-btn {
    width: 200px;
}

.available-modal-container .selected-available-image {
    max-height: 55vh;
    max-width: 90%;
}

.available-modal-container .form-container {
    max-height: 40vh;
}

.available-modal-container .form-wrap {
    background: var(--blue-color);
    color: var(--white-color);
}

.available-modal-container .form-wrap h3 {
    font-weight: bolder;
    margin: 40px 0;
}

.available-modal-container .submit-container {
    display: flex;
    align-items: center;
}

.available-modal-container .submit-container .disclaimer {
    font-size: 0.9rem;
    margin: 0;
}

.available-modal-container .submit-container .btn-container {
    min-width: 250px;
}

.available-modal-container form > .row > .col-md-2 {
    max-width: 20%;
    flex: 0 0 20%;
}

.available-modal-container form > .row > .col-md-4 {
    max-width: 22%;
    flex: 0 0 22%;
}

.available-modal-container form > .row > .col-12 {
    max-width: 15%;
    flex: 0 0 15%;
}

.available-modal-container .thank-you-txt {
    padding: 70px 0;
}

/* 3.9. Product Media Queries */

@media only screen and (max-width: 991px) {
    .available-products {
        display: block;
        margin-bottom: 120px;
        padding: 0 0px 0px 30px;
    }

    .available-products .thumbnail { min-height: 223px; }

    .pt-0 { padding-top: 0px !important }

    h3.ava-products { margin-left: 30px; }

    .available-products .slick-prev, .available-products .slick-next { top: 115%;}
    .available-products .slick-next { right: 25%; }
    .available-products .slick-prev { right: 60%; }
    .available-products .slick-prev:before, .available-products .slick-next:before { font-size: 60px }
}

@media only screen and (max-width: 767px) {
    .available-products .slick-prev, .available-products .slick-next { top: 130%;}
    .available-products .slick-next { right: 35%; }
}


@media only screen and (max-width: 420px) {
    .mob-title {
        font-size: 22px !important;
    }
}

@media (max-width: 991px) {
    .navbar-toggler {
        border-color: var(--white-color);
        display: block;
        margin: 0 auto;
        margin: 30px 0 0 0;
    }

    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
    }

    .nav-items-container {
        flex-direction: column;
    }
    

    .product-hero-section {
        background-position: top center;
        background-size: 100%;
        background-repeat: no-repeat;
        background-color: var(--blue-color);
        background-image: linear-gradient(1deg, rgba(2, 59, 105, 0.6) 40%, rgba(0, 84, 153, 0.538889) 50%, rgba(0, 84, 153, 0.0425259) 60%, rgba(0, 84, 153, 0) 100%),-webkit-image-set(url('https://demotest.jfgomez.dev.nhdealer.com/sites/nhdealer.com/pages/images/categories-products-landing-pages/high-horsepower-tractors/t9-with-plm-intelligence/hero-banner.webp') 1x) !important;
    }

    .hero-accordion-container  {
        align-items: end !important;
        height: 90%;
    }
    
    .hero-title-container h1 {
        font-size: 1.5rem;
    }

    .product-hero-section {
        height: fit-content;
        background: none;
        background-image: unset !important;
        background: var(--default-background-gradient) !important;
    }

    .hero-accordion-container  {
        align-items: end !important;
        height: unset;
        min-height: unset;
        padding: 30px 0;
    }

    .hero-title-container {
        background: none;
    }

    .product-hero-section-mobile {
        display: block;
    }

    .video-section-wrap {
        height: fit-content;
        flex-direction: row !important;
        background-size: 160px 40%;
    }

    .video-section .video-info-container {
        align-items: center;
        text-align: center;
        margin: 30px 0;
    }

    .video-section .video-info-container h3 {
        margin-bottom: 10px;
    }

    .perks-section h2 {
        margin: 70px 0;
    }

    
    .available-modal-container form > .row > .col-md-2,
    .available-modal-container form > .row > .col-md-4,
    .available-modal-container form > .row > .col-12 {
        max-width: 100%;
        flex: 0 0 100%;
    }

    .available-modal-container .submit-container {
        flex-direction: column;
    }

    .available-modal-container .submit-container .btn-container {
        width: 100%;
        margin: 10px 0 20px 0;
    }

    .available-modal-container .contacted-input-group label {
        margin: 0;
    }

    .available-modal-container .radio-btn-input {
        margin: 2.5px 10px 0 5px;
    }
    
    .avaliable-form-title {
        margin: 40px 0 20px 0;
    }
}

@media (max-width: 767px) {
    p, .btn, h3 {
        font-size: 1.2rem !important;
    }

    .features-section .features-description {
        margin: 30px 0 0 0 !important;
    }

    .visit-cat-btn-mobile {
        display: flex;
    }

    .visit-cat-btn-mobile a {
        color: var(--white-color);
        font-size: 0.9rem;
        margin: 15px 0 0 0;
    }

    .features-grid-container {
        width: 100%;
        background-size: contain;
    }

    .features-grid-container {
        min-height: 470px;
    }

    .features-btn {
        border: 1px solid var(--white-color);
    }

    .tooltip-inner {
        font-size: 1rem;
        min-width: 300px;
    }

    .available-modal-container .contacted-input-group p {
        width: 100%;
    }

    .accordion-f-mobile  {
        display: block !important;
        margin: 0 0 80px 0;
        padding: 0 20px;
        text-decoration: none;
        width: 100%;
    }

    .features-btn {
        max-width: 30px;
        max-height: 30px;
    }
    
    .features-btn .plus,
    .tooltip,
    .product-hero-section .visit-category-container {
        display: none !important;
    }
    
    .features-btn .numbers {
        display: flex !important;
        color: var(--white-color);
        text-shadow: 1px 1px 3px #000;
        font-weight: bolder;
        font-size: 1.2rem;
        line-height: 1rem;
    }

    .features-btn .numbers p {
        margin-bottom: 0;
    }

    .accordion-f-mobile .hero-accordion-btn {
        width: 100%;
        text-align: left;
    }

    .accordion-f-mobile .hero-accordion-btn[aria-expanded="false"] {
        background: var(--blue-color);
        color: var(--white-color);
    }

    .accordion-f-mobile .hero-accordion-btn[aria-expanded="true"] {
        background: var(--yellow-color);
        color: var(--blue-color);
    }

    .accordion-f-mobile > div:not(:last-child) {
        border-bottom: 2px solid var(--white-color);
    }

    .accordion-f-mobile .card-body {
        border: 1px solid var(--blue-color);
    }

    .accordion-f-mobile .btn-link:hover {
        text-decoration: none;
    }

    .video-section-wrap {
        padding: 40px 10px !important;
        background-image: none;
    }

    .video-section h2 {
        text-align: center;
        font-size: 3.5rem;
    }

    .video-section .video-info-container {
        max-height: fit-content;
    }

    .video-section .video-info-container p {
        max-width: 90%;
        margin: 20px 0 0 0;
    }

    .perks-section .cards-container {
        padding: 70px 10px;
    }

    .perks-section .card-back-pattern-top {
        left: 0;
    }

    .perks-section .card-back-pattern-bottom {
        right: 0;
        bottom: -30px;
    }

    .perks-section .mb-md-5 {
        padding-bottom: 30px;
    }

    .ava-products {
        text-align: center;
    }

    .hero-form-container form .col-md-2 {
        max-width: 100%;
    }

    .available-modal-container .selected-available-image {
        margin: 40px 0;
    }
}


/* 4. Footer */

.social-icons img {
    max-height: 25px;
}