/* Styles de base avec Tailwind */
*,
*:before,
*:after {
    box-sizing: inherit;
}

* {
    scroll-behavior: inherit !important;
}

/* Reset et styles globaux avec Tailwind */
html,
body {
    @apply h-auto w-full m-0 p-0 overflow-x-hidden;
    box-sizing: border-box;
}

body {
    @apply p-0 m-0;
    font-size: 15px;
    font-family: 'Catamaran', sans-serif;
}

img {
    @apply max-w-full h-auto rounded;
}

button {
    @apply outline-none !important;
}

dl,
ol,
ul {
    @apply p-0 m-0;
    list-style: none;
}

.d-table {
    @apply w-full h-full;
}

.d-table-cell {
    vertical-align: middle;
}

/* Classes utilitaires pour padding - Maintenant remplacées par Tailwind */
/* Utilisez pt-100, pb-100, etc. directement dans le HTML */

.bg-grey {
    background-color: #f7f8f8;
}

.section-padding {
    @apply py-100;
}

a {
    color: #404040;
    text-decoration: none;
    transition: 0.4s;
    @apply outline-none !important;
}

a:hover {
    color: #21a5ff;
    text-decoration: none;
}

.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
    @apply font-bold leading-normal m-0;
    font-family: 'Dosis', sans-serif;
    line-height: 1.4;
}

p {
    color: #5f5f5f;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.2px;
    font-family: 'Catamaran', sans-serif;
    @apply mb-4;
}

p:last-child {
    @apply mb-0;
}

/* Boutons avec Tailwind */
.read-more {
    @apply text-blue-500 text-base font-semibold flex items-center transition-all duration-400 ease-out;
}

.read-more i {
    @apply text-blue-500 text-2xl flex items-center transition-all duration-400 ease-out mr-1;
}

.read-more:hover i {
    @apply text-blue-500 transform translate-x-1 transition-all duration-400 ease-out;
}

.more-button-box {
    @apply text-center mt-10;
}

.default-btn {
    @apply relative z-10 overflow-hidden text-white text-base font-semibold text-center px-9 py-3 rounded inline-block bg-blue-500 shadow-lg mt-1 transition duration-400 border-none;
}

.default-btn span {
    @apply absolute z-[-1] w-0 h-0 block rounded-full bg-indigo-600 transform -translate-x-1/2 -translate-y-1/2 transition-all duration-500 ease-in-out;
}

.default-btn:hover,
.default-btn:focus {
    @apply text-white;
}

.default-btn:hover span,
.default-btn:focus span {
    @apply w-[200%] h-[500px];
}

/* Section Title */
.section-title {
    @apply text-center leading-normal mb-16;
}

.sub-title {
    @apply text-gray-200 text-base font-bold uppercase tracking-wider mb-1;
}

.section-title h2 {
    @apply text-blue-500 text-4xl font-extrabold my-2 mx-0;
}

.color-text {
    @apply text-blue-500;
}

.text-gradient {
    color: #f44336;
    background-image: -webkit-linear-gradient(45deg, #f44336 48%, #e7edf2 56%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.valign {
    @apply flex items-center;
}

/* Overlay styles */
[data-overlay-dark],
[data-overlay-light] {
    @apply relative;
}

[data-overlay-dark] .container,
[data-overlay-light] .container {
    @apply relative z-10;
}

[data-overlay-dark]:before,
[data-overlay-light]:before {
    content: '';
    @apply absolute z-0 w-full h-full top-0 left-0;
}

[data-overlay-dark]:before {
    @apply bg-gray-900;
}

[data-overlay-light]:before {
    @apply bg-white;
}

/* Go Top Button */
.go-top {
    @apply text-white fixed z-50 top-0 right-4 w-11 h-11 opacity-0 invisible text-center leading-[45px] rounded bg-blue-500 transition duration-900 cursor-pointer;
}

.go-top.active {
    @apply top-[98%] transform -translate-y-[98%] opacity-100 visible;
}

/* Preloader */
.preloader {
    @apply fixed top-0 left-0 w-full h-full z-[99999] bg-transparent;
}

.preloader .loader {
    @apply absolute top-[43%] left-0 right-0 w-12 h-12 transform -translate-y-[43%] text-center transition duration-400 mx-auto;
}

/* Navigation */
.techvio-nav {
    @apply pt-4 px-0 pb-4 bg-transparent;
}

.navbar-section {
    @apply absolute z-[999] top-0 left-0 w-full h-auto bg-transparent transition duration-400;
}

.navbar-section.is-sticky {
    @apply fixed z-[999] top-0 left-0 w-full bg-blue-200 shadow-lg animate-fadeInDown transition duration-400;
}

/* Home Sections */
.home-section {
    @apply overflow-hidden relative z-10 flex items-center h-[800px] min-h-screen;
    background: linear-gradient(to bottom, #370b6f, #00429b, #006dba, #0095ce, #2dbcdc);
}

.main-banner-content {
    @apply pt-12;
}

.main-banner-content h1 {
    @apply text-white text-6xl font-bold mb-5 mx-0;
}

.main-banner-content h6 {
    @apply text-gray-200 text-lg font-bold uppercase tracking-wider mb-4;
}

.main-banner-content p {
    @apply text-white text-base m-0;
}

/* Services */
.single-services-item {
    @apply relative z-10 block text-left p-8 rounded bg-white shadow-lg transition-all duration-500 ease-out mt-8;
}

.services-icon {
    @apply inline-block transition duration-500 mb-4;
    will-change: transform;
}

.services-icon i {
    @apply text-orange-500 text-5xl transition duration-500;
}

.single-services-item h3 {
    @apply text-xl font-bold transition-all duration-400 ease-out mb-0;
}

.single-services-item:hover {
    @apply transform -translate-y-2;
}

.single-services-item:hover .services-icon {
    transform: rotateY(180deg);
}

/* About Section */
.about-content h2 {
    @apply text-4xl font-bold mb-5;
}

.about-btn-box {
    @apply inline-block mt-6;
}

/* Features */
.feature-single-item {
    @apply relative z-10 p-10 text-center rounded bg-white shadow-xl transition-all duration-400 mb-8;
}

.feature-single-item:hover {
    transform: translate(0, -10px);
}

.feature-single-item h3 {
    @apply text-gray-900 text-xl mb-4;
}

/* Portfolio */
.portfolio-item {
    @apply relative block overflow-hidden rounded mt-8;
}

.portfolio-item .portfolio-content-overlay {
    @apply absolute z-20 left-2 right-2 -bottom-5 p-4 opacity-0 invisible overflow-hidden rounded bg-white transition-all duration-300 ease-out;
}

/* Testimonial */
.single-testimonial {
    @apply relative p-8 rounded bg-gray-50;
}

/* Team */
.single-team-box {
    @apply mt-8 overflow-hidden transition duration-500;
}

.team-social-icon a {
    @apply text-white text-lg w-10 h-10 leading-10 rounded border border-white border-solid inline-block opacity-0 invisible transform scale-0 transition-all duration-300;
}

/* Counter */
.counter-area {
    @apply relative z-10 py-30 text-center bg-cover bg-center bg-fixed;
    background: url(../img/bureau.jpg);
}

.counter-area::before {
    content: "";
    @apply absolute z-[-1] top-0 left-0 w-full h-full opacity-60 bg-indigo-900;
}

/* Footer */
.single-footer-widget .footer-social i {
    @apply text-blue-500 text-xl w-10 h-10 leading-10 text-center rounded inline-block border border-white border-solid bg-white transition duration-400;
}

.single-footer-widget .footer-social i:hover {
    @apply text-white border-blue-500 bg-blue-500;
}

/* Animations personnalisées */
@keyframes animate {
    17% {
        border-bottom-right-radius: 3px;
    }
    25% {
        transform: translateY(9px) rotate(22.5deg);
    }
    50% {
        transform: translateY(18px) scale(1, 0.9) rotate(45deg);
        border-bottom-right-radius: 40px;
    }
    75% {
        transform: translateY(9px) rotate(67.5deg);
    }
    100% {
        transform: translateY(0) rotate(90deg);
    }
}

@keyframes shadow {
    50% {
        transform: scale(1.2, 1);
    }
}

@keyframes rotateMe {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes animationFramesOne {
    0% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    20% {
        transform: translate(73px, -1px) rotate(36deg);
    }
    40% {
        transform: translate(141px, 72px) rotate(72deg);
    }
    60% {
        transform: translate(83px, 122px) rotate(108deg);
    }
    80% {
        transform: translate(-40px, 72px) rotate(144deg);
    }
    100% {
        transform: translate(0px, 0px) rotate(0deg);
    }
}

@keyframes moveLeftBounce {
    0% {
        transform: translateX(0px);
    }
    50% {
        transform: translateX(20px);
    }
    100% {
        transform: translateX(0px);
    }
}

@keyframes moveBounce {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(20px);
    }
    100% {
        transform: translateY(0px);
    }
}

/* Classes Tailwind personnalisées pour les padding */
.ptb-100 { @apply py-100; }
.pb-30 { @apply pb-8; }
.pb-40 { @apply pb-10; }
.pb-50 { @apply pb-12; }
.pb-70 { @apply pb-16; }
.pb-80 { @apply pb-20; }
.pb-100 { @apply pb-25; }
.pt-30 { @apply pt-8; }
.pt-40 { @apply pt-10; }
.pt-50 { @apply pt-12; }
.pt-70 { @apply pt-16; }
.pt-80 { @apply pt-20; }
.pt-100 { @apply pt-25; }

/* Responsive */
@media (max-width: 768px) {
    .main-banner-content h1 {
        @apply text-4xl;
    }
    
    .section-title h2 {
        @apply text-3xl;
    }
    
    .home-section {
        @apply h-auto py-20;
    }
}

/* Pour utiliser avec Tailwind, ajoutez ces classes dans votre configuration Tailwind */