@import "@fortawesome/fontawesome-free/css/all.css";

        @tailwind base;
        @tailwind components;
        @tailwind utilities;

        html {
            scroll-behavior: smooth;
        }

        :root {
            /* Updated Brand Colors from tailwind.config.js */
            --main-color: #3989D5;
            --main-color-hover: #4e9ae7;
            --main-dark-color: #012244;
            --main-dark-hover: #163b65;

            --secondary-color: #FFC414;
            --secondary-color-hover: #ffd21a;

            --tertiary-color: #D2232A;
            --tertiary-color-hover: #e03b42;

            --tertiary-dark-color: #991418;
            --tertiary-dark-hover: #b32128;

            --black-color: #000;
            --white-color: #fff;

            --text-color-normal: #5c5c5c;
            --text-color-gray: #767676;

            /* Legacy fallback colors (keeping for backward compatibility) */
            --primary-color: var(--main-color);
            --primary-color-hover: var(--main-color-hover);
            --secondary-color-alt: #9158a0;
            --secondary-color-alt-hover: #844f91;
            --accent-color: var(--secondary-color);
            --accent-color-hover: var(--secondary-color-hover);
        }

        .bg-primary {
            background-color: var(--main-color);
        }

        .bg-primary-2 {
            background-color: var(--main-dark-color);
        }

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

        .bg-accent {
            background-color: var(--secondary-color);
        }

        .bg-accent-hover {
            background-color: var(--secondary-color-hover);
        }

        .bg-secondary-light {
            background-color: #fff7e0;
        }

        .text-primary {
            color: var(--main-color);
        }

        .text-custom-gray {
            color: var(--text-color-gray);
        }

        .text-main {
            color: var(--main-color);
        }

        .text-secondary {
            color: var(--secondary-color);
        }

        .text-tertiary {
            color: var(--tertiary-color);
        }

        .text-tertiary-dark {
            color: var(--tertiary-dark-color);
        }

        .text-black {
            color: var(--black-color);
        }

        .text-white {
            color: var(--white-color);
        }

        .text-normal {
            color: var(--text-color-normal);
        }

        body {
            font-family: "Poppins", sans-serif;
            color: var(--text-color-normal);
        }

        h1,
        h2,
        h3 {
            color: var(--text-color-normal);
            /* font-weight: 700; */
        }

        .transition-3s {
            transition: .3s;
        }

        section {
            padding-top: 70px;
        }

        #header .logo-header {
            width: 140px;
        }

        #header .nav-link-container a.main-nav-link {
            font-weight: 500;
            color: var(--text-color-normal);
        }

        #header .nav-link-container a.main-nav-link:hover {
            color: var(--main-color);
        }

        #header .nav-link-container a.active {
            color: var(--main-color);
            font-weight: 700;
        }

        #header .cta-header {
            color: white;
            padding: 10px 20px;
            border-radius: 5px;
        }

        #header .cta-header:hover {
            background-color: var(--main-color-hover) !important;
        }

        #header .cta-header-icon {
            font-size: 20px;
        }

        #header {
            transition: .3s;
            padding-top: 10px;
        }

        #header .header-container {
            /* background-color: white; */
        }

        #header.sticky {
            position: fixed;
            /* Stick to the top */
            top: 0;
            left: 0;
            background-color: white;
            padding-top: 0;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        #header .mobile-menu-divider-1 {
            border-bottom: 2px solid rgb(255 255 255 / 60%);
            margin-top: 25px;
        }

        .custom-nav-link-container {}

        .header-icon-link {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 8px;
            border-radius: 6px;
            transition: all 0.2s ease-in-out;
        }

        .header-icon-link:hover {
            background-color: var(--main-color);
            color: white !important;
            transform: translateY(-1px);
        }

        .header-icon-link svg {
            transition: transform 0.2s ease-in-out;
        }

        .header-icon-link:hover svg {
            transform: scale(1.1);
        }

        .header-icon-link.small svg {
            width: 1rem;
            height: 1rem;
        }

        .header-icon-link.medium svg {
            width: 1.5rem;
            height: 1.5rem;
        }

        .header-icon-link.large svg {
            width: 2rem;
            height: 2rem;
        }

        .header-icon-link.xlarge svg {
            width: 2.5rem;
            height: 2.5rem;
        }

        .header-icon-link .absolute {
            font-size: 0.75rem;
            font-weight: 600;
            min-width: 1rem;
            height: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.2s ease-in-out;
        }

        .header-icon-link:hover .absolute {
            transform: scale(1.1);
        }

        @media (max-width:1280px) {
            #mobileMenuContainer {
                display: block;
            }
        }

        .custom-modal.show .modal-content {
            animation: modalShow 0.3s ease-out forwards;
        }

        .custom-modal.hide .modal-content {
            animation: modalHide 0.2s ease-in forwards;
        }

        .swal-reverse-buttons {
            display: flex;
            flex-direction: row-reverse;
            /* Reverses the button order */
            gap: 15px;
        }

        .custom-banner {
            position: relative;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            margin-top: 20px;
            margin-bottom: 100px;
            margin-left: 95px;
            margin-right: 95px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 50px;
        }

        /* .custom-banner {
  position: relative;
  margin: 20px 95px 50px 95px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
} */
        .custom-banner-inner {
            position: relative;
            z-index: 2;
        }

        section#banner {
            padding-top: 95px;
        }

        @media (max-width: 768px) {
            .custom-banner {
                background-position: center center;
                margin-left: 20px;
                margin-right: 20px
            }
        }

        @media (max-width: 480px) {
            .custom-banner {
                background-position: center center;
            }
        }

        /* .bg-banner-primary {
  background-image: url('../img/banner-bg.jpg');
}
.bg-banner-secondary {
  background-image: url('../img/banner-secondary.jpg');
}
.bg-banner-tertiary {
  background-image: url('../img/banner-tertiary.jpg');
} */
        .banner-overlay-light {
            background: linear-gradient(135deg, rgba(1, 34, 68, 0.3) 0%, rgba(57, 137, 213, 0.2) 100%);
        }

        .banner-overlay-medium {
            background: linear-gradient(135deg, rgba(1, 34, 68, 0.5) 0%, rgba(57, 137, 213, 0.4) 100%);
        }

        .banner-overlay-dark {
            background: linear-gradient(135deg, rgba(1, 34, 68, 0.7) 0%, rgba(57, 137, 213, 0.6) 100%);
        }

        .content-column {
            animation: slideInLeft 0.8s ease-out;
        }

        .image-column {
            animation: slideInRight 0.8s ease-out;
        }

        .banner-heading {
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 1s ease-out 0.3s forwards;
        }

        .banner-description {
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 1s ease-out 0.6s forwards;
        }

        .banner-actions {
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 1s ease-out 0.9s forwards;
        }

        .banner-image-container {
            animation: float 3s ease-in-out infinite;
        }

        .banner-image-container img {
            transition: transform 0.3s ease-in-out;
        }

        @keyframes slideInLeft {
            from {
                opacity: 0;
                transform: translateX(-50px);
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes slideInRight {
            from {
                opacity: 0;
                transform: translateX(50px);
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-10px);
            }
        }

        @media (max-width: 1024px) {
            .content-column {
                text-align: center;
                padding: 2rem 1rem;
            }

            .image-column {
                /* order: -1; */
                margin-bottom: 2rem;
            }
        }

        @media (max-width: 768px) {
            .banner-description {
                font-size: 1rem;
            }

            .banner-actions {
                flex-direction: column;
                align-items: center;
            }

            .btn-primary,
            .btn-secondary {
                width: 100%;
                max-width: 300px;
            }
        }

        .we-buy-ship-section {
            /* background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); */
        }

        .service-card {
            position: relative;
            overflow: hidden;
            animation: fadeInUp 0.8s ease-out;
        }

        .service-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            /* background: linear-gradient(90deg, var(--main-color) 0%, var(--secondary-color) 100%); */
            transform: scaleX(0);
            transition: transform 0.3s ease-in-out;
        }

        .service-card:hover::before {
            transform: scaleX(1);
        }

        .service-card:hover {
            border-color: var(--main-color);
        }

        .service-card:nth-child(2) {
            animation-delay: 0.2s;
        }

        .service-card .w-24 {
            transition: transform 0.3s ease-in-out;
        }

        .service-card:hover .w-24 {
            transform: scale(1.1);
        }

        .service-card .space-y-3>div {
            opacity: 0;
            transform: translateX(-20px);
            animation: slideInLeft 0.6s ease-out forwards;
        }

        .service-card .space-y-3>div:nth-child(1) {
            animation-delay: 0.3s;
        }

        .service-card .space-y-3>div:nth-child(2) {
            animation-delay: 0.4s;
        }

        .service-card .space-y-3>div:nth-child(3) {
            animation-delay: 0.5s;
        }

        .service-card a {
            position: relative;
            overflow: hidden;
        }

        .service-card a::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s;
        }

        .service-card a:hover::before {
            left: 100%;
        }

        @media (max-width: 768px) {
            .we-buy-ship-section {
                padding: 2rem 0;
            }

            .service-card {
                margin-bottom: 2rem;
            }

            .service-card .space-y-3>div {
                animation-delay: 0.1s !important;
            }
        }

        .fade-in-section {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .transition-3s {
            opacity: 1 !important;
            transform: translateY(0) !important;
        }