/* @import '~swiper/swiper-bundle.css'; */
@tailwind base;
@tailwind components;
@tailwind utilities;

@import "./ctrm-menu.css";
@import "./home-swiper.css";
@import "./odometer.css";
@import "./moving-logo.css";
@import "./image-description-swiper.css";
@import "./gallery.css";
@import "./table-swiper.css";
@import "./statement-cards.css";
@import "./offerings-swiper.css";

@font-face {
    font-family: 'Montserrat';
    src: url('../font/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    
}

@font-face {
    font-family: 'Nunito Sans';
    src: url('../font/NunitoSans-VariableFont_YTLC_opsz_wdth_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    
}

@font-face {
    font-family: 'Inter';
    src: url('../font/Inter-VariableFont_opsz,wght.ttf');
    font-weight: 100 900;
    font-style: normal;
    
}
  
.montserrat {
    font-family: 'Montserrat', sans-serif; /* Ensure a fallback font */
}
.nunito {
    font-family: 'Nunito Sans', sans-serif; /* Ensure a fallback font */
}
.inter {
    font-family: 'Inter', sans-serif; /* Ensure a fallback font */
}

@layer base {
    :root {
        --bar-width: 24px;
        --bar-height: 1px;
        --hamburger-gap: 10px;
        --foreground: white;
        --animation-timing: 300ms ease;
        --hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2);
    }

    .no-tailwindcss-base,
    .no-tailwindcss-base *,
    .no-tailwindcss-base > * {
        font-size: revert;
        font-weight: revert;
        margin: revert;
        display: revert;
        vertical-align: revert;
        max-width: revert;
        height: revert;
        border-width: revert;
        border-style: revert;
        border-color: revert;
        border-style: revert;
        outline: revert;
        list-style: revert;
        padding: revert;
    }

    html,
    body {
        overscroll-behavior-y: contain;
    }

    html {
        margin: 0px !important;
        padding: 0px !important;
        box-sizing: border-box !important;
    }

    body {
        width: 100%;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    h1 {
        @apply font-bold inter tracking-normal leading-[1] text-xl mobile-m:text-2xl mobile-l:text-3xl sm:text-4xl 2xl:text-5xl 3xl:text-6xl 4xl:text-[4.063rem];
    }

    h2 {
        @apply font-bold inter text-xl sm:text-3xl leading-[1] lg:text-xl 2xl:text-3xl 4xl:text-[2.813rem] tracking-normal;
    }

    h3 {
        @apply font-bold inter text-base mobile-l:text-lg sm:text-lg leading-snug tracking-tight  2xl:text-2xl 3xl:text-3xl 4xl:text-4xl;
    }

    h4 {
        @apply font-bold inter leading-snug tracking-wide text-4xl sm:text-5xl 4xl:text-[4.688rem];
    }

    h5 {
        @apply font-bold inter text-sm mobile-l:text-base leading-snug tracking-tight 2xl:text-xl 3xl:text-2xl 4xl:text-3xl;
    }

    h6 {
        @apply font-bold inter tracking-tight leading-snug text-xs mobile-m:text-sm mobile-l:text-base lg:text-[1.1rem] 2xl:text-lg 3xl:text-[1.563rem] 4xl:text-[1.875rem];
    }
    
    
    .counter-left-symbol{
        @apply text-base 2xl:text-lg 4xl:text-3xl;
    }

    .nunito-image-label{
        @apply text-lg;
    }


    p,li,a {
        @apply text-xs sm:text-xs 2xl:text-sm 3xl:text-base 4xl:text-[1.375rem] font-[400]  inter;
    }

    p a {
        @apply  text-blue-500 hover:text-blue-400;
    }

    ul{
        @apply list-disc;
    }

    .footer-bold-text{
        @apply font-bold mb-3 sm:mb-2 3xl:mb-3 text-sm
    }

    .footer-small-text{
        @apply sm:text-[0.688rem] 2xl:text-[0.625rem] 3xl:text-xxs 4xl:text-xs;
    }

    .breadcrumb-text{
        @apply text-xxxs mobile-m:text-[0.625rem] 2xl:text-xxs 3xl:text-xs 4xl:text-sm font-[400]  inter;
    }
    

}

@layer components {
    .container {
      @apply min-w-full mx-auto px-6 md:px-10 xl:px-20 4xl:px-32 max-w-7xl xl:max-w-8xl 3xl:max-w-8xl 4xl:max-w-8xl;
    }

    .red-button {
        @apply bg-ctrm-brightRed rounded-full uppercase  
        py-2 px-6 2xl:py-3 2xl:px-7 4xl:px-9 4xl:py-4 ;
    }
    span.red-button-text{
        @apply font-bold nunito text-white text-xs 2xl:text-xs 3xl:text-sm 4xl:text-[1.375rem];
    }

    .cpt-dropdown{
        background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M6 9l6 6 6-6%22/></svg>');
        background-position: right 0.8rem center;
        background-size: 1em;
        width:100%;
        padding:0.5rem 2rem 0.5rem 1rem;
        border: 0.063rem solid rgb(209 213 219);
        border-radius: 0.25rem;
        appearance:none;
        background-repeat: no-repeat;
    }

    .swiper-prev-arrow-button{
        @apply w-[3rem] h-[3rem] p-[.8rem] 
        mobile-l:w-[3rem] mobile-l:h-[3rem] mobile-l:p-[.8rem]
        sm:w-[3rem] sm:h-[3rem] sm:p-[.8rem]
        md:w-[3rem] md:h-[3rem] md:p-[.8rem]
        lg:w-[3rem] lg:h-[3rem] lg:p-[.8rem]
        2xl:w-[3.8rem] 2xl:h-[3.8rem] 2xl:p-[1rem] 
        4xl:w-[5rem] 4xl:h-[5rem] 4xl:p-[1.4rem]
        5xl:w-[6rem] 5xl:h-[6rem] 5xl:p-[1.6rem];
    }

    .swiper-next-arrow-button{
        @apply w-[3rem] h-[3rem] p-[.8rem]  
        mobile-l:w-[3rem] mobile-l:h-[3rem] mobile-l:p-[.8rem]
        sm:w-[3rem] sm:h-[3rem] sm:p-[.8rem]
        md:w-[3rem] md:h-[3rem] md:p-[.8rem]
        lg:w-[3rem] lg:h-[3rem] lg:p-[.8rem]
        2xl:w-[3.8rem] 2xl:h-[3.8rem] 2xl:p-[1rem] 
        4xl:w-[5rem] 4xl:h-[5rem] 4xl:p-[1.4rem] 
        5xl:w-[6rem] 5xl:h-[6rem] 5xl:p-[1.6rem];
    }


    /* paddings, margins, gap */

    .padding-top-100px{
        @apply pt-10 xl:pt-[3.125rem] 2xl:pt-[4.375rem] 3xl:pt-20 4xl:pt-[6.25rem];
    }

    .padding-top-200px{
        @apply pt-20 xl:pt-[8.75rem] 2xl:pt-[8.75rem] 3xl:pt-40 4xl:pt-[12.5rem];
    }

    .padding-bottom-100px{
        @apply pb-10 xl:pb-[3.125rem] 2xl:pb-[4.375rem] 3xl:pb-20 4xl:pb-[6.25rem];
    }

    .padding-y-100px{
        @apply py-10 xl:py-[3.125rem] 2xl:py-[4.375rem] 3xl:py-20 4xl:py-[6.25rem];
    }

    .margin-r-100px{
        @apply pr-10 xl:pr-[3.125rem] 2xl:pr-[4.375rem] 3xl:pr-20 4xl:pr-[6.25rem];
    }

    .margin-top-100px{
        @apply mt-10 xl:mt-[3.125rem] 2xl:mt-[4.375rem] 3xl:mt-20 4xl:mt-[6.25rem];
    }

    .margin-bottom-100px{
        @apply mb-10 xl:mb-[3.125rem] 2xl:mb-[4.375rem] 3xl:mb-20 4xl:mb-[6.25rem];
    }

    .padding-bottom-80px{
        @apply pb-8 xl:pb-10 2xl:pb-14 3xl:pb-16 4xl:pb-20
    }

    .margin-bottom-80px{
        @apply mb-8 xl:mb-10 2xl:mb-14 3xl:mb-16 4xl:mb-20
    }

    .margin-bottom-60px{
        @apply mb-6 xl:mb-[1.875rem] 2xl:mb-[2.625rem] 3xl:mb-12 4xl:mb-[3.75rem];
    }

    .padding-y-50px{
        @apply py-5 xl:py-[1.563rem] 2xl:py-[2.188rem] 3xl:py-10 4xl:py-[3.125rem];
    }

    .margin-y-50px{
        @apply my-5 xl:my-[1.563rem] 2xl:my-[2.188rem] 3xl:my-10 4xl:my-[3.125rem];
    }

    .margin-b-50px{
        @apply mb-5 xl:mb-[1.563rem] 2xl:mb-[2.188rem] 3xl:mb-10 4xl:mb-[3.125rem];
    }

    .margin-minus-t-50px{
        @apply -mt-5 xl:-mt-[1.563rem] 2xl:-mt-[2.188rem] 3xl:-mt-10 4xl:-mt-[3.125rem];
    }

    .padding-top-50px{
        @apply pt-5 xl:pt-[1.563rem] 2xl:pt-[2.188rem] 3xl:pt-10 4xl:pt-[3.125rem];
    }

    .padding-bottom-50px{
        @apply pb-5 xl:pb-[1.563rem] 2xl:pb-[2.188rem] 3xl:pb-10 4xl:pb-[3.125rem];
    }

    .margin-top-50px{
        @apply mt-5 xl:mt-[1.563rem] 2xl:mt-[2.188rem] 3xl:mt-10 4xl:mt-[3.125rem];
    }

    .margin-bottom-50px{
        @apply mb-5 xl:mb-[1.563rem] 2xl:mb-[2.188rem] 3xl:mb-10 4xl:mb-[3.125rem]; 
    }

    .padding-top-40px{
        @apply pt-4 xl:pt-5 2xl:pt-7 3xl:pt-8 4xl:pt-10;
    }
    
    .padding-y-40px{
        @apply py-4 xl:py-5 2xl:py-7 3xl:py-8 4xl:py-10;
    }

    .padding-bottom-40px{
        @apply pb-4 xl:pb-5 2xl:pb-7 3xl:pb-8 4xl:pb-10;
    }

    .margin-top-40px{
        @apply mt-4 xl:mt-5 2xl:mt-7 3xl:mt-8 4xl:mt-10;
    }

    .margin-bottom-40px{
        @apply mb-4 xl:mb-5 2xl:mb-7 3xl:mb-8 4xl:mb-10;
    }

    .margin-y-40px{
        @apply my-4 xl:my-5 2xl:my-7 3xl:my-8 4xl:my-10;
    }

    .padding-top-20px{
        @apply pt-2 xl:pt-2.5 2xl:pt-3.5 3xl:pt-4 4xl:pt-5;
    }

    .padding-bottom-20px{
        @apply pb-2 xl:pb-2.5 2xl:pb-3.5 3xl:pb-4 4xl:pb-5;
    }

    .padding-y-20px{
        @apply py-2 xl:py-2.5 2xl:py-3.5 3xl:py-4 4xl:py-5;
    }

    .margin-top-20px{
        @apply mt-2 xl:mt-2.5 2xl:mt-3.5 3xl:mt-4 4xl:mt-5;
    }

    .margin-bottom-20px{
        @apply mb-2 xl:mb-2.5 2xl:mb-3.5 3xl:mb-4 4xl:mb-5;
    }

    .margin-y-20px{
        @apply my-2 xl:my-2.5 2xl:my-3.5 3xl:my-4 4xl:my-5;
    }

    .padding-top-10px{
        @apply pt-1 xl:pt-[0.313rem] 2xl:pt-[0.438rem] 3xl:pt-2 4xl:pt-2.5;
    }

    .padding-bottom-10px{
        @apply pb-1 xl:pb-[0.313rem] 2xl:pb-[0.438rem] 3xl:pb-2 4xl:pb-2.5;
    }

    .padding-y-10px{
        @apply py-1 xl:py-[0.313rem] 2xl:py-[0.438rem] 3xl:py-2 4xl:py-2.5;
    }
    
    .margin-top-10px{
        @apply mt-1 xl:mt-[0.313rem] 2xl:mt-[0.438rem] 3xl:mt-2 4xl:mt-2.5;
    }
    .margin-bottom-10px{
        @apply mb-1 xl:mb-[0.313rem] 2xl:mb-[0.438rem] 3xl:mb-2 4xl:mb-2.5;
    }
    .margin-y-10px{
        @apply my-1 xl:my-[0.313rem] 2xl:my-[0.438rem] 3xl:my-2 4xl:my-2.5;
    }


    .gap-20px{
        @apply gap-2 xl:gap-2.5 2xl:gap-3.5 3xl:gap-4 4xl:gap-5;
    }

    .gap-40px{
        @apply gap-4 xl:gap-5 2xl:gap-7 3xl:gap-8 4xl:gap-10;
    }

    .gap-y-40px{
        @apply gap-y-4 xl:gap-y-5 2xl:gap-y-7 3xl:gap-y-8 4xl:gap-y-10;
    }

    .gap-50px{
        @apply gap-5 xl:gap-[1.563rem] 2xl:gap-[2.188rem] 3xl:gap-10 4xl:gap-[3.125rem];
    }

    .gap-60px{
        @apply gap-[4.169rem] xl:gap-[1.875rem] 2xl:gap-[2.625rem] 3xl:gap-12 4xl:gap-[3.75rem];
    }

    .gap-70px {
        @apply gap-[4.863rem] xl:gap-[2.187rem] 2xl:gap-[3.062rem] 3xl:gap-14 4xl:gap-[4.375rem];
    }
    
    .gap-80px {
        @apply gap-[5.547rem] xl:gap-[2.494rem] 2xl:gap-[3.491rem] 3xl:gap-[15.96rem] 4xl:gap-[5rem];
    }
    

    .gap-100px{
        @apply gap-10 xl:gap-[3.125rem] 2xl:gap-[4.375rem] 3xl:gap-20 4xl:gap-[6.25rem];
    }
    
    .font-outline-1 {
        -webkit-text-stroke: 1px grey;
      }

}

/* alpinejs */
[x-cloak] {
  display: none !important;
}