:root {
    --primary-color: 236, 114, 22;
    --primary-foreground: 255, 255, 255;
    --secondary-color: 241, 245, 249;
    --tertiary-color: 51, 63, 92;

    --primary-font-family: "Quicksand", sans-serif;
}

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

@layer utilities {

    *,
    body,
    html {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        scroll-snap-align: center;
    }

    body {
        font-family: var(--primary-font-family);
        background-color: rgba(var(--secondary-color));
        font-family: var(--primary-font-family);
        font-synthesis: none;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .arrow-icon {
        opacity: 0;
        transform: translateX(-10px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .hover-link:hover .arrow-icon {
        opacity: 1;
        transform: translateX(0);
    }

    .client-carousel .client-item img {
        width: 300 !important;
    }

    .client-item img {
        height: 100px !important;
        object-fit: contain !important;
        aspect-ratio: 3/2 !important;
        mix-blend-mode: color-burn;
    }

    .mapouter {
        position: relative;
        text-align: right;
        width: 100%;
        height: 700px;
    }

    .gmap_canvas {
        overflow: hidden;
        background: none !important;
        width: 100%;
        height: 700px;
    }

    .gmap_iframe {
        width: 100% !important;
        height: 700px !important;
    }

}