/* comman */
.btn {
    background: linear-gradient(45deg, #133E87, #608BC1);
}

.highlight {
    color: #2E4D9D;
}


/* about-us */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
    .about-us .gradient-background {
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.60) 0%, rgba(255, 255, 255, 0.60) 100%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.91) -3.54%, rgba(255, 255, 255, 0.00) 96.32%),
            linear-gradient(180deg, rgb(50, 89, 121) -98.28%, rgb(69, 141, 201) 30.8%, rgb(18, 96, 160) 63.88%, rgb(0, 103, 187) 99.4%);
    }
}

.about-us .background-image {
    background-image: url('../image/pages/about-us-intro-bg.jpg');
    background-size: cover;
    background-position: center;
}

.about-us .hover-scale {
    transition: transform 0.3s ease-in-out;
}

.about-us .hover-scale:hover {
    transform: scale(1.05);
}



.about-us .section-title {
    font-size: 3rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 1.5rem;
}

.about-us .container-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}




/*auto scroll*/

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

.about-us .animate-marquee {
    animation: marquee 20s linear infinite;
}



/*concat us*/
@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* The container with duplicate content should have a width that is twice the original set */
.animate-marquee {
    animation: marquee 20s linear infinite;
}

/* Continuous and smooth animations */
@keyframes bounce-smooth {

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

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

.contact-us .animate-bounce-smooth {
    animation: bounce-smooth 2s infinite ease-in-out;
}

@keyframes pulse-smooth {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.contact-us .animate-pulse-smooth {
    animation: pulse-smooth 2s infinite ease-in-out;
}

@keyframes wiggle-smooth {

    0%,
    100% {
        transform: rotate(0);
    }

    25% {
        transform: rotate(5deg);
    }

    50% {
        transform: rotate(-5deg);
    }

    75% {
        transform: rotate(3deg);
    }
}

.contact-us .animate-wiggle-smooth {
    animation: wiggle-smooth 2s infinite ease-in-out;
}

@keyframes shake-smooth {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    50% {
        transform: translateX(5px);
    }

    75% {
        transform: translateX(-5px);
    }
}

.contact-us .animate-shake-smooth {
    animation: shake-smooth 2.5s infinite ease-in-out;
}

@keyframes spin-smooth {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

.contact-us .animate-spin-smooth {
    animation: spin-smooth 4s linear infinite;
}


/* faq */

/* Active/Selected effects */
.contact-us .btn-box.active {
    background-color: #2490ef09;
    /* Light blue background */
    font-weight: 600;
}

.contact-us .btn-box.active .icon,
.contact-us .btn-box.active h3 {
    color: #2e4d9d;
    /* Text and icon active color */
}