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

body {
    font-family: Arial, Helvetica, sans-serif;
    @apply bg-gray-100 dark:bg-gray-700;
}

.container {
    @apply px-4 lg:px-0 mx-auto;
}

.not-edge .container {
    @apply px-4 md:px-10 lg:px-20;
}

.left-container {
    @apply sm:max-w-[630px] md:max-w-[758px] lg:max-w-[529.400px] xl:max-w-[683px] 2xl:max-w-[836.600px];
}

.right-container {
    @apply sm:max-w-[630px] md:max-w-[758px] lg:max-w-[494.600px] xl:max-w-[397px] 2xl:max-w-[499.400px];
}

.not-edge .left-container {
    @apply lg:max-w-[524.400px] xl:max-w-[678px] 2xl:max-w-[831.600px] lg:mr-0 px-4 lg:pr-10;
}

.not-edge .right-container {
    @apply lg:max-w-[489.600px] xl:max-w-[392px] 2xl:max-w-[494.400px] lg:ml-0 px-4 lg:pl-10;
}

.btn {
    @apply px-4 py-3 rounded-lg transition duration-500 ease-in-out;
}

.btn-primary {
    @apply bg-sky-600 hover:bg-sky-700 dark:hover:bg-sky-700 text-gray-100 hover:text-gray-300;
}

.btn-secondary {
    @apply bg-gray-100 hover:bg-gray-300 dark:hover:bg-gray-300 text-gray-800;
}

.btn-primary-border {
    @apply bg-transparent hover:bg-sky-500 dark:hover:bg-sky-500 border-2 border-sky-500 text-sky-500 dark:text-sky-500 hover:text-white dark:hover:text-white;
}

.banner {
    background-image: url("/images/banner-2.jpg");
    background-size: cover;
    @apply py-[100px] relative;
}

.banner-mask {
    @apply absolute inset-0 bg-gradient-to-r from-gray-100/90 to-sky-500/20 dark:from-gray-800/90 dark:to-sky-500/20 transition duration-500 ease-in-out z-[0];
}

.breadcrumbs {
    @apply flex gap-2 font-medium;
}

.text-theme {
    @apply text-gray-700 dark:text-gray-100 transition-colors duration-500 ease-in-out;
}

.text-theme-primary {
    @apply text-sky-500 dark:text-gray-100 transition-colors duration-500 ease-in-out;
}

.bg-theme-primary {
    @apply bg-white dark:bg-gradient-to-bl dark:from-gray-900 dark:to-gray-800 transition-colors duration-500 ease-in-out;
}

.text-theme-secondary {
    @apply text-gray-600 dark:text-gray-300 transition-colors duration-500 ease-in-out;
}

.bg-theme-secondary {
    @apply bg-gray-100 dark:bg-gray-700 transition-colors duration-500 ease-in-out;
}

.bg-theme-form {
    @apply bg-gray-200 dark:bg-gray-600 transition-colors duration-500 ease-in-out;
}

.bg-theme-form-input {
    @apply bg-gray-300 dark:bg-gray-500 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-sky-500 transition duration-500 ease-in-out;
}

.text-theme-contact {
    @apply dark:text-gray-400 text-gray-700 transition duration-500 ease-in-out;
}

.text-theme-contact-link {
    @apply dark:text-gray-400 text-gray-700 hover:text-sky-500 dark:hover:text-sky-500 transition duration-500 ease-in-out;
}

.btn-pagination-primary {
    @apply bg-sky-500 border-sky-600 hover:bg-sky-600 hover:border-sky-700 text-white transition duration-500 ease-in-out;
}

.btn-pagination-secondary {
    @apply bg-gray-200 border-gray-300 dark:bg-gray-500 dark:border-gray-600 hover:bg-sky-200 hover:border-sky-300 hover:dark:bg-gray-600 hover:dark:border-gray-700 text-gray-600 dark:text-gray-300 transition duration-500 ease-in-out;
}

/* 
|
| Navbar Css
|
*/
.utility-bar {
    @apply hidden lg:block absolute top-0 w-full py-1 bg-gray-100 dark:bg-gray-700 transition duration-500 ease-in-out z-10;
}

.utility-content {
    @apply w-auto flex gap-2;
}

.social-media-link {
    @apply mr-3 text-gray-700 dark:text-gray-100 hover:text-sky-500 dark:hover:text-sky-500 transition duration-500;
}

.navbar {
    @apply bg-white dark:bg-gray-800 transition duration-500 ease-in-out shadow-md top-0 lg:top-[40px] fixed lg:absolute w-full z-20;
}

.nav-link {
    @apply text-gray-700 hover:text-sky-500 dark:hover:text-sky-500 dark:text-gray-100 py-5 transition duration-500 ease-in-out border-b-2 border-transparent hover:border-sky-500 flex items-center;
}

.nav-link.active,
.nav-link-dropdown.active {
    @apply font-bold text-sky-500 dark:text-sky-500 border-sky-500;
}

.nav-dropdown {
    @apply bg-white dark:bg-gray-800 absolute top-[4rem] -left-2 w-auto pt-2 p-3 border-2 border-sky-300 dark:border-sky-800 border-t-sky-500 dark:border-t-sky-500 shadow-xl rounded-lg overflow-visible transition-all duration-500 transform;
}

.nav-link-dropdown {
    @apply text-gray-700 hover:text-sky-500 dark:hover:text-sky-500 dark:text-gray-100 pt-2 pb-1 transition duration-500 ease-in-out hover:bg-gray-100 dark:hover:bg-gray-700 rounded border-b border-gray-200 hover:border-sky-500 block mt-2 px-2;
}

.nav-link-mobile {
    @apply hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 hover:text-sky-500 dark:hover:text-sky-500 dark:text-gray-100 py-2 pl-2 border-b border-gray-200 hover:border-sky-500 rounded transition;
}

.hamburger {
    @apply absolute w-6 h-[3px] bg-gray-800 dark:bg-gray-100 rounded transition duration-500 ease-in-out;
}

.dropdown-arrow {
    @apply border-b-2 border-r-2 border-gray-700 dark:border-gray-100 ml-2 w-3 h-3 transition duration-500 ease-in-out;
}

.nav-link-mobile:hover .dropdown-arrow {
    @apply border-sky-500;
}

/* 
|
| Hero Section Css
|
*/
.hero-wrap {
    @apply h-[90vh] md:h-[100vh] lg:h-[110vh] min-h-[40rem] overflow-hidden;
}

.hero-parallax {
    @apply relative h-[90vh] md:h-[100vh] lg:h-[110vh] min-h-[40rem] w-full bg-cover bg-center bg-fixed translate-y-[-0.2px];
}

.hero-mask {
    @apply absolute inset-0 flex items-center justify-center bg-black bg-opacity-30 dark:bg-opacity-50 text-white text-3xl font-bold transition duration-500 ease-in-out;
}

.hero-nav-dot {
    @apply w-3 h-3 my-1 rounded-full transition duration-500 ease-in-out;
}

.benefit-section {
    @apply max-w-full lg:max-w-[85rem] mx-auto lg:absolute top-[100vh];
}

.benefit-card {
    @apply text-sky-900 dark:text-gray-100 p-6 xl:col-span-2 transform transition-transform duration-500 ease-in-out;
}

.hero-benefit-1 {
    @apply bg-sky-400 dark:bg-sky-800 transition-colors duration-300 ease-in-out;
}

.hero-benefit-2 {
    @apply bg-sky-300 dark:bg-sky-700 transition-colors duration-500 ease-in-out;
}

.hero-benefit-3 {
    @apply bg-sky-200 dark:bg-sky-600 transition-colors duration-700 ease-in-out;
}

.benefit-icons-theme {
    @apply fill-sky-900 dark:fill-gray-100 transition duration-500 ease-in-out;
}

.benefit-text-theme {
    @apply text-sky-800 dark:text-sky-400 transition duration-500 ease-in-out;
}

/* 
|
| About Section Css
|
*/
.about-mask {
    @apply absolute inset-0 bg-white/50 dark:bg-gray-700/90 transition duration-500 ease-in-out;
}

.card-vision-theme {
    @apply bg-white dark:bg-gradient-to-br dark:from-gray-700 dark:to-gray-600 rounded-lg shadow-lg hover:shadow-xl border-l-4 border-sky-400 transition duration-500 ease-in-out;
}

.card-mission-theme {
    @apply bg-white dark:bg-gradient-to-bl dark:from-gray-700 dark:to-gray-600 rounded-lg shadow-lg hover:shadow-xl border-l-4 border-sky-400 transition duration-500 ease-in-out;
}

/* 
|
| Service Section Css
|
*/
.bg-service-left {
    @apply bg-sky-100/40 dark:bg-gray-800/90 transition duration-500 ease-in-out;
}

.service-title {
    @apply text-sky-500 dark:text-sky-300 transition-colors duration-500 ease-in-out;
}

.service-desc {
    @apply text-gray-600 dark:text-gray-300 transition-colors duration-500 ease-in-out;
}

.service-card {
    @apply h-full bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6 border-t-4 border-sky-400 dark:border-sky-300 hover:shadow-xl transition duration-500;
}

.proc-card {
    @apply h-full rounded-lg shadow-md flex items-center text-center transition duration-500 ease-in-out hover:shadow-lg overflow-hidden relative;
}

.proc-card-overlay {
    @apply absolute left-0 right-0 z-[2] transition duration-500 opacity-0;
}

.proc-card:hover .proc-card-overlay {
    @apply opacity-100;
}

/*
|
| Gallery Section
|
*/
.modal-prev {
    @apply absolute left-2 top-1/2 transform -translate-y-1/2 text-3xl text-white p-3 bg-black bg-opacity-50 rounded-full transition;
}

.modal-next {
    @apply absolute right-2 top-1/2 transform -translate-y-1/2 text-3xl text-white p-3 bg-black bg-opacity-50 rounded-full transition;
}

.modal-title-overlay {
    @apply absolute bottom-0 left-0 bg-gray-200/60 dark:bg-gray-700/60;
}

/* 
|
| Toggle Language Css
|
*/
.toggle-lang {
    @apply absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center transition-all duration-500 transform;
}

/* 
|
| Toggle Darkmode Css
|
*/
.toggle-dark-mode {
    @apply absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center transition-all duration-500 transform;
}

.toggle-dark-mode-mobile {
    @apply flex items-center justify-center transition-all duration-500 transform;
}

/* 
|
| Footer Css
|
*/
.border-footer {
    @apply border-t border-gray-300 dark:border-gray-700 transition duration-500 ease-in-out;
}

footer table tr a {
    @apply transition duration-500;
}

footer table tr:hover a {
    @apply text-sky-400;
}

/* 
|
| 
|
*/

.wa-hover {
    transform: rotateY(90deg);
}

a:hover .wa-hover {
    transform: rotateY(0deg);
}

.swiper-button-prev::after {
    font-size: 1rem;
}

.swiper-button-next::after {
    font-size: 1rem;
}