/*
Theme Name: ATPCH Industry Education
Theme URI: https://atpch.com
Author: OPINF Team
Author URI: https://opinf.com
Description: A multi-section theme for ATPCH Industry Education Platform
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: atpch
Domain Path: /languages
Requires at least: 5.9
Requires PHP: 7.4
*/


/* Base Theme Variables */

:root {
    --color-primary: #1e3a8a;
    --color-secondary: #eab308;
    --color-text: #1f2937;
    --color-heading: #111827;
    --color-light: #f3f4f6;
}


/* Base Styles */

html {
    font-size: 16px;
}

@media (max-width: 1024px) {
    html {
        font-size: 14.5px;
    }
}

@media (max-width: 768px) {
    html {
        font-size: 13.5px;
    }
}

body {
    font-size: 1rem;
}

html[dir="ltr"] {
    font-family: sans-serif, system-ui, -apple-system;
}

a.custom-logo-link img,.logo {
    max-width: 100px;
    max-height: 60px;
}

.landing-visible-text{
    position: absolute;
    top: 2vw;
    padding: 1rem;
    background: rgb(0,0,0);
    background: radial-gradient(circle, rgba(0, 0, 0, 1) 0%, rgb(0 0 0 / 25%) 67%, rgba(255, 255, 255, 0) 100%);
}
/* Section Colors */

.section-education {
    --section-color: var(--color-primary);
}

.section-property {
    --section-color: #15803d;
}

.section-legal {
    --section-color: #9f1239;
}

.section-contractors {
    --section-color: #7e22ce;
}


/* Buttons */

.btn-primary,
.btn-secondary {
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-primary {
    background-color: var(--section-color);
    color: white;
}

.btn-secondary {
    background-color: var(--color-secondary);
    color: var(--color-primary);
}

.btn-primary:hover,
.btn-secondary:hover {
    opacity: 0.9;
}


/* Course Badge and Type */

.course-badge,
.course-type {
    position: absolute;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    top: 10px;
}

.course-badge {
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
}

.course-type {
    left: 10px;
}

.type-online {
    background: #10b981;
    color: white;
}

.type-in-person,
.type-offline {
    background: #f59e0b;
    color: white;
}


/* Price Tag */

.price-tag {
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
}


/* Course Rating */

.course-rating {
    display: flex;
    align-items: center;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

.rating-stars {
    color: #FCD34D;
    display: flex;
    gap: 0.25rem;
}

.rating-count {
    color: #6B7280;
    font-size: 0.875rem;
    margin-right: 0.5rem;
}

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


/* Countdown Timer */

.countdown {
    display: flex;
    margin: 8px 0;
    direction: ltr;
    align-items: center;
    justify-content: flex-end;
}

.countdown-item {
    text-align: center;
    color: rgba(245, 158, 11, var(--tw-bg-opacity));
    padding: 4px;
    border-radius: 4px;
    min-width: 45px;
}

.countdown-number {
    font-size: 14px;
    font-weight: bold;
}

.countdown-label {
    font-size: 10px;
    opacity: 0.8;
}


/* Mega Menu */

.megamenu {
    position: relative;
}

.megamenu-m {
    display: none;
    position: absolute;
    top: 100%;
    width: 100vw;
    background: #ffffffc9;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
    padding: 1.5rem;
    z-index: 50;
    opacity: 0.5;
    visibility: hidden;
    transition: all 0.2s ease-in-out;
    right: -46vw;
}

.megamenu:hover .megamenu-m,
.megamenu-m:hover {
    display: block;
    opacity: 1;
    visibility: visible;
}

.megamenu-m::before {
    content: '';
    position: absolute;
    top: -10px;
    right: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid white;
}


/* Swiper Customization */
.swiper-wrapper {
    height: auto !important;
}
.swiper-container,.overflow-hidden{
    overflow:hidden !important;
}
.aspect-\[4\/3\] {
    aspect-ratio: 4/3;
}
.swiper-slide img.object-cover{
    object-fit: cover;
}
.grid.grid-cols-2.gap-y-2.text-sm.text-gray-600.mb-4 {
    height: 4rem;
}
.swiper-button-next,
.swiper-button-prev {
    color: #1e3a8a !important;
}

.swiper-button {
    align-items: center !important;
    background: hsla(0, 0%, 100%, .75);
    border-radius: 50%;
    box-shadow: 0 0 2px #7d7d7d;
    height: 40px !important;
    width: 40px !important;
    transition: .3s ease-in-out;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 2rem !important;
}

.swiper-button:hover {
    background: #fff;
}
.swiper-container{

    position: relative;
}

/* Utility Classes */

.ellipsis-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 2.5rem;
    height: 3.5rem;
}

.ellipsis-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5rem;
    height: 3.3rem;
}

.ellipsis-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.1rem;
    height: 1.2rem;
}

.ellipsis-1-big {
    line-height: 2rem;
    height: 2rem;
}


/* Form Elements */

.form-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    transition: all 0.2s;
}

.form-input:focus {
    outline: none;
    border-color: var(--section-color);
    box-shadow: 0 0 0 2px rgba(var(--section-color), 0.1);
}


/* Status Messages */

.error {
    color: #dc2626;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.success {
    color: #16a34a;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}


/* Media Queries */

@media (max-width: 768px) {
    .megamenu-content {
        position: static;
        min-width: auto;
        box-shadow: none;
        padding: 1rem 0;
    }
    .countdown-item {
        min-width: 45px;
    }
    .course-card {
        margin: 0 1rem;
    }
}

@media print {
    .no-print {
        display: none !important;
    }
}


/* Footer Styles */

.footer-widget {
    margin-bottom: 2rem;
}

.footer-widget ul {
    margin-bottom: 1rem;
}

.footer-widget ul li a {
    color: #9ca3af;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

.footer-widget ul li a:hover {
    color: white;
}

.footer-widget ul li a:before {
    content: '\f054';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-left: 0.5rem;
    font-size: 0.75rem;
}

.footer-widget .newsletter-form {
    display: flex;
    margin-top: 1rem;
}

.footer-widget .newsletter-form input {
    background-color: #1f2937;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0 0.375rem 0.375rem 0;
    flex-grow: 1;
    outline: none;
}

.footer-widget .newsletter-form button {
    background-color: #eab308;
    color: #1f2937;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem 0 0 0.375rem;
    transition: background-color 0.2s;
}

.footer-widget .newsletter-form button:hover {
    background-color: #d97706;
}

.footer-widget .social-icons a {
    transition: color 0.2s;
}

.footer-widget .social-icons a:hover {
    color: #eab308;
}

#comments .reply-button {
    display: none;
}

.text-body-2 {
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 2.17;
}

.text-body-2 {
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 2.17;
}

.\!leading-\[15px\] {
    line-height: 15px!important;
}

.bg-hint-object-error {
    background-color: var(--color-hint-object-error);
}

.ProductPrice_ProductPrice__discountWrapper__1Ru_1 {
    height: 20px;
    width: 34px;
}

.text-h5 {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.875rem;
}

button,
input,
optgroup,
select,
textarea {
    line-height: inherit;
    color: inherit;
    border-width: thin;
    padding-right: 5px !important;
    padding-left: 5px !important;
    padding-top: 5px;
    padding-bottom: 5px;
}

.filter-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.filter-group {
    position: relative;
}

.filter-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #475569;
}

.filter-group select,
.filter-group input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    background-color: white;
    transition: border-color 0.2s;
}

.searchable-select-wrapper {
    position: relative;
}

.searchable-select-input {
    width: 100%;
    padding: 0.75rem;
    padding-right: 2.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    background-color: white;
}

.searchable-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    margin-top: 0.25rem;
    max-height: 200px;
    overflow-y: auto;
    z-index: 50;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    display: none;
}

.searchable-select-dropdown.active {
    display: block;
}

.searchable-select-option {
    padding: 0.75rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.searchable-select-option:hover {
    background-color: #f8fafc;
}

.searchable-select-option.selected {
    background-color: #e2e8f0;
}

.filter-group .reset-filters {
    background: #ef4444;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.filter-group .reset-filters:hover {
    background: #dc2626;
}

.filter-group .apply-filters {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.filter-group .apply-filters:hover {
    background: #eb4425;
}


/* Primary Container */

#primary.content-area {
    padding: 20px;
    margin-top: 30px;
    margin-bottom: 30px;
    background-color: #f9fafb;
}


/* Main Content Area */

#main.site-main {
    color: #374151;
}


/* Breadcrumb Navigation */

.woocommerce-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #4b5563;
}


/* Breadcrumb Links */

.woocommerce-breadcrumb a {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.woocommerce-breadcrumb a:hover {
    text-decoration: underline;
    color: #eb4425;
}


/* Breadcrumb Separator */

.woocommerce-breadcrumb span {
    color: #9ca3af;
    font-size: 14px;
}


/* Active Breadcrumb Item */

.woocommerce-breadcrumb .active {
    font-weight: 600;
    color: #1f2937;
}


/* Page Container */

.page {
    margin: 0 auto;
    background-color: #ffffff;
}


/* General Button Styles */

.wc-block-components-button {
    display: inline-flex;
    /* Flexbox for alignment */
    align-items: center;
    /* Vertically center content */
    justify-content: center;
    /* Horizontally center content */
    padding: 12px 20px;
    /* Add padding */
    font-size: 14px;
    /* Adjust font size */
    font-weight: 600;
    /* Semi-bold text */
    text-decoration: none;
    /* Remove underline */
    color: #ffffff;
    /* White text */
    background-color: #3b82f6;
    /* Blue background */
    border-radius: 6px;
    /* Rounded corners */
    transition: all 0.3s ease;
    /* Smooth hover effect */
}


/* Hover State */

.wc-block-components-button:hover {
    background-color: #eb4425;
    /* Darker blue on hover */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Subtle shadow on hover */
}


/* Button Text Styling */

.wc-block-components-button__text {
    display: inline-block;
    /* Inline-block for precise padding and alignment */
    font-size: 14px;
    /* Base font size */
    font-weight: 600;
    /* Semi-bold text */
    color: #fff;
    /* Inherit text color from the parent button */
    line-height: 1.5;
    /* Improve readability */
    text-align: center;
    /* Center-align text */
    text-transform: none;
    /* Optional: Use natural case for the text */
    user-select: none;
    /* Prevent text selection */
}


/* Specific Button Variations */

.wc-block-cart__submit-button {
    border: 2px solid #3b82f6;
    /* Add border */
    background-color: #3b82f6;
    /* Blue background */
}

.wc-block-cart__submit-button:hover {
    background-color: #eb4425;
    /* Darker blue on hover */
    border-color: #eb4425;
    /* Match border to hover color */
}


/* Navigation Styles */


/* Base Navigation */

.site-header .nav-menu {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
}

.site-header .menu-item {
    position: relative;
}

.site-header .menu-item a {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    color: #1f2937;
    font-weight: 500;
    transition: all 0.2s;
    font-size: 0.8rem
}

.site-header .menu-item a:hover {
    color: #a81e1e;
    background-color: #f9fafb;
    border-radius: 0.375rem;
}


/* Mega Menu */

.desktop-menu .has-megamenu {
    position: static !important;
}

.desktop-menu .has-megamenu:hover .megamenu-content {
    display: block;
}

.megamenu-grid {
    display: flex;
    gap: 2rem;
    justify-content: space-between;
}

.desktop-menu .megamenu-column {
    flex: 1;
    min-width: 280px;
}

.megamenu-column .sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.megamenu-column>.sub-menu>li>a {
    display: block;
    font-weight: 600;
    color: #a81e1e;
    border-right: 4px solid #fbbf24;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
}

.megamenu-column .sub-menu .sub-menu {
    padding-right: 1.5rem;
    margin-bottom: 1.5rem;
}

.megamenu-column .sub-menu .sub-menu a {
    display: block;
    color: #4b5563;
    font-weight: normal;
    padding: 0.5rem 1rem;
    transition: all 0.2s;
}

.desktop-menu .megamenu-column .sub-menu .sub-menu a:hover {
    color: #a81e1e;
    background-color: #f9fafb;
    border-radius: 0.375rem;
    padding-right: 1.5rem;
}

.megamenu-column>li>a:after {
    content: "\f053";
    padding-right: 5px;
    font-family: 'FontAwesome';
    font-size: 0.6rem;
}


/* Mobile */

@media (max-width: 768px) {
    .site-header .nav-menu {
        display: none;
        flex-direction: column;
        gap: 0;
    }
    .site-header .nav-menu.active {
        display: flex;
        position: absolute;
        inset: 100% 0 auto 0;
        background: white;
        border-top: 1px solid #e5e7eb;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }
    .has-megamenu {
        position: relative;
    }
    .megamenu-content {
        position: static;
        min-width: 100%;
        box-shadow: none;
        padding: 1rem;
        transform: none;
    }
    .megamenu-grid {
        flex-direction: column;
        gap: 1rem;
    }
    .megamenu-column {
        width: 100%;
        min-width: 0;
    }
    .megamenu-column>.sub-menu>li>a {
        border-right: 0;
        border-bottom: 2px solid #fbbf24;
    }
}


/* Optimized CSS */

.desktop-menu .megamenu-content {
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    background: white;
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    z-index: 50;
}

.megamenu-grid {
    display: flex;
    gap: 2rem;
}

.desktop-menu .megamenu-column {
    min-width: 280px;
    flex: 1;
}

.site-header .sub-menu.depth-0 {
    display: contents;
}

.desktop-menu .megamenu-column>li>a {
    display: block !important;
    font-weight: 600 !important;
    color: #a81e1e !important;
    border-right: 4px solid #fbbf24;
    padding: 0.5rem!important;
    margin-bottom: 0.5rem!important;
    font-size: 0.8rem;
}

.desktop-menu .megamenu-column .sub-menu {
    padding-right: 1.5rem;
    margin-bottom: 1.5rem;
}

.megamenu-column .sub-menu a {
    display: block;
    color: #4b5563;
    padding: 0.5rem;
    transition: 0.2s;
    font-size: 0.8rem;
}

.desktop-menu .megamenu-column .sub-menu a:hover {
    color: #a81e1e;
    background: #f9fafb;
    border-radius: 0.375rem;
    padding-right: 1.5rem;
}

nav.footer-legal-nav,
.footer-column {
    font-size: 0.8rem;
}


/* Mobile Navigation Styles */

.mobile-nav {
    position: fixed;
    top: 0;
    right: -300px;
    /* Start off-screen */
    width: 250px;
    height: 100vh;
    background-color: white;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease;
    z-index: 1000;
    overflow-y: auto;
    padding: 10px;
}

.mobile-nav.active {
    right: 0;
}

.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 999;
}

.mobile-nav-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-nav__close {
    position: absolute;
    top: 20px;
    left: 20px;
    background: none;
    border: none;
    font-size: 24px;
    color: #666;
    cursor: pointer;
}

.mobile-nav .nav-menu {
    list-style: none;
    padding: 0;
    margin: 40px 0 0;
}

.mobile-nav .nav-menu li {
    margin: 0;
    padding: 0;
}

.mobile-nav .nav-menu a {
    display: block;
    padding: 12px 0;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #eee;
}

.mobile-nav .has-megamenu>a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mobile-nav .has-megamenu.active>a::after {
    transform: rotate(180deg);
}

.mobile-nav .megamenu-content {
    display: none;
    padding-left: 20px;
}

.mobile-nav .has-megamenu.active .megamenu-content {
    display: block;
}

.mobile-nav .megamenu-grid {
    display: block;
}

.mobile-nav .megamenu-column {
    margin: 10px 0;
}

.mobile-nav__user-section {
    padding: 15px;
    border-bottom: 1px solid #eee;
    margin-bottom: 15px;
}

.mobile-nav__user-section .account-card-icons {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.mobile-nav__user-section .account-card-icons a {
    text-decoration: none;
}

.megamenu-column li.menu-item-type-post_type_archive a {
    border: none;
    font-size: 1rem;
    color: #000;
}

.not-active .badge {
    background: linear-gradient(90deg, #f97316 0%, #ec4899 100%);
}

.text-body-2 {
    font-size: 0.875rem;
    /* 14px */
    line-height: 1.25rem;
}

.text-caption {
    font-size: 0.75rem;
    /* 12px */
    line-height: 1rem;
}

.text-neutral-300 {
    color: #D4D4D4;
}

.post-card .wp-post-image.main-cover {
    height: 20vw;
    object-fit: cover;
}

.description-container {
    position: relative;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.description-container.collapsed {
    max-height: 100px;
    /* Fixed height for collapsed state */
}

.description-container.expanded {
    max-height: none;
    /* Allow full height when expanded */
}

.description-container.collapsed:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    pointer-events: none;
}

.expand-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #eb4425;
    cursor: pointer;
    padding: 4px 8px;
    border: none;
    background: none;
    font-size: 14px;
    margin-top: 8px;
}

.expand-button:hover {
    color: #af1e1e;
}

.expand-button svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.expand-button.expanded svg {
    transform: rotate(180deg);
}

@keyframes blob {
    0% {
        transform: translate(0px, 0px) scale(1);
    }
    33% {
        transform: translate(30px, -50px) scale(1.1);
    }
    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
        transform: translate(0px, 0px) scale(1);
    }
}

.animate-blob {
    animation: blob 5s infinite;
}

.animation-delay-2000 {
    animation-delay: 1s;
}

.animation-delay-4000 {
    animation-delay: 3s;
}
@keyframes headlight {
    0% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.1); }
    100% { opacity: 0.3; transform: scale(1); }
  }

  @keyframes taillight {
    0% { opacity: 0.2; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.05); }
    100% { opacity: 0.2; transform: scale(1); }
  }

  .headlight {
    animation: headlight 3s infinite;
    background: radial-gradient(circle at center, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.2) 60%, transparent 100%);
  }

  .taillight {
    animation: taillight 3s infinite;
    background: radial-gradient(circle at center, rgba(255,0,0,0.8) 0%, rgba(255,0,0,0.2) 60%, transparent 100%);
  }
  @keyframes carLightLeft {
    0% {
      transform: translateX(-100%) scale(1);
      opacity: 0;
    }
    50% {
      transform: translateX(50vw) scale(1.2);
      opacity: 1;
    }
    100% {
      transform: translateX(100vw) scale(1);
      opacity: 0;
    }
  }

  @keyframes carLightRight {
    0% {
      transform: translateX(100vw) scale(1);
      opacity: 0;
    }
    50% {
      transform: translateX(-50vw) scale(1.2);
      opacity: 1;
    }
    100% {
      transform: translateX(-100%) scale(1);
      opacity: 0;
    }
  }

  .animate-car-light-left {
    animation: carLightLeft 4s infinite;
  }

  .animate-car-light-right {
    animation: carLightRight 4s infinite;
  }
  @keyframes flash {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}
@keyframes flash-50 {
    0%, 100% { filter: brightness(0.5); }
    50% { filter: brightness(1.5); }
}
.animate-flash {
    animation: flash 1.5s infinite;
}
.animate-flash-50 {
    animation: flash-50 1.5s infinite;
}
.animate-flash-delay {
    animation: flash 1.5s infinite;
    animation-delay: 0.75s;
}

.bg-gradient-radial {
    background: radial-gradient(circle at center, var(--tw-gradient-from) 0%, var(--tw-gradient-to) 70%);
}

/* Add this to your CSS file */

.woocommerce-traditional-login {
    margin-top: 2rem;
    padding: 1rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.woocommerce-traditional-login h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
}
.swiper-button:after {
    color: #F00 !important;
}
.hero-landing{
    height:80vh;
}
button:disabled {
    background-color: #cbd5e0; /* Fallback gray color */
    cursor: not-allowed;
}
/*.text-stroke.text-white {
    -webkit-text-stroke: thick;
    -webkit-text-stroke-color: #000000c4;
    paint-order: stroke;
}
.text-stroke.text-black {
    -webkit-text-stroke: thick;
    -webkit-text-stroke-color: #fefefec4;
    paint-order: stroke;
}*/
.hero-landing .relative {
    background: linear-gradient(0deg, transparent 0%, rgba(0,0,0,0.7) 50%, transparent 100%);
    padding: 2rem 1rem;
    width: auto;
    border-radius: 1rem;
    /*filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));*/
}
.service-info h2, .service-info h3, .service-info p, .service-info hr, .service-info ul {
    padding-bottom: 1rem!important;
    text-align: justify;
}
.service-info ul {
    list-style: disc;
    padding-right: 1.5rem;
}
/* custom Loader */

.pelakiran-loader {
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.97);
    position: fixed;
    overflow: hidden;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index:9999
}

.car-container {
    width: 100%;
    height: 30vh;
    position: relative;
}

#sports-car {
    position: absolute;
    width: calc(80px + 10vw); /* Responsive size */
    height: auto;
    bottom: -15%;
    animation: driveAcross 5s linear infinite;
}

@keyframes driveAcross {
    0% {
        transform: translateX(-100vw) scaleX(1);
    }
    49% {
        transform: translateX(100vw) scaleX(1);
    }
    50% {
        transform: translateX(100vw) scaleX(-1);
    }
    99% {
        transform: translateX(-100vw) scaleX(-1);
    }
    100% {
        transform: translateX(-100vw) scaleX(1);
    }
}

/* Car shadow */
#sports-car::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    width: 80%;
    height: 10px;
    background: rgba(0,0,0,0.3);
    border-radius: 50%;
    transform: translateX(-50%);
    filter: blur(5px);
    animation: shadowMove 1s infinite alternate;
}

@keyframes shadowMove {
    from {
        transform: translateX(-50%) scaleX(0.9);
    }
    to {
        transform: translateX(-50%) scaleX(1.1);
    }
}

/* Loading text */
.loading-text {
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: calc(14px + 0.5vw);
    text-transform: uppercase;
    letter-spacing: 2px;
    animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
}
.animate__lightSpeedInRight{-webkit-animation-name:lightSpeedInRight;animation-name:lightSpeedInRight;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedInLeft{0%{-webkit-transform:translate3d(-100%,0,0) skewX(30deg);transform:translate3d(-100%,0,0) skewX(30deg);opacity:0}60%{-webkit-transform:skewX(-20deg);transform:skewX(-20deg);opacity:1}80%{-webkit-transform:skewX(5deg);transform:skewX(5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes lightSpeedInLeft{0%{-webkit-transform:translate3d(-100%,0,0) skewX(30deg);transform:translate3d(-100%,0,0) skewX(30deg);opacity:0}60%{-webkit-transform:skewX(-20deg);transform:skewX(-20deg);opacity:1}80%{-webkit-transform:skewX(5deg);transform:skewX(5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__lightSpeedInLeft{-webkit-animation-name:lightSpeedInLeft;animation-name:lightSpeedInLeft;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOutRight{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOutRight{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.animate__lightSpeedOutRight{-webkit-animation-name:lightSpeedOutRight;animation-name:lightSpeedOutRight;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes lightSpeedOutLeft{0%{opacity:1}to{-webkit-transform:translate3d(-100%,0,0) skewX(-30deg);transform:translate3d(-100%,0,0) skewX(-30deg);opacity:0}}@keyframes lightSpeedOutLeft{0%{opacity:1}to{-webkit-transform:translate3d(-100%,0,0) skewX(-30deg);transform:translate3d(-100%,0,0) skewX(-30deg);opacity:0}}.animate__lightSpeedOutLeft{-webkit-animation-name:lightSpeedOutLeft;animation-name:lightSpeedOutLeft;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}
.bg-white\/90{
    background-color: rgba(255, 255, 255, 0.9);
}
.d-flex {
    display: flex !important;
}
span.select2.select2-container {
    width: 100% !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none !important;
}
.woocommerce-MyAccount-content .tab-content .woocommerce-orders-table {
    font-size: 1rem !important;
}
.woocommerce-MyAccount-content .tab-pane.active{
    overflow:scroll !important;
    width: 100% !important;
    height: 100vh !important;
}