@import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=Allura&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Allura&family=Great+Vibes&display=swap');
:root {
    --primary-color : #002470;
    --secondary-color: #0d8612;
    --light-green: #78b833;
    --heading-color: #2563EB;
    --text-color-white: #fff;
    --dark-text: #172554;
    --soft-blue-grey: #E8F1FF;
}
@theme {
    --font-inter: "Inter", sans-serif;
    --font-playfair: "Playfair Display", serif;
    --font-allura: "Allura", cursive;
    --font-Great-vibes: "Great Vibes", cursive;
}

body {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 500;
    background: #fff;
    color: var(--dark-text);
    text-align: justify;
}


/* Chrome, Edge, Safari */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}


.scrolled {
    position: sticky !important;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
}
.menu-active {
    color: var(--secondary-color) !important;
    border-bottom-color: var(--secondary-color) !important;
}

.menu-active i {
    color: var(--secondary-color) !important;
}

.submenu-active {
    color: var(--text-color-white) !important;
    background: var(--secondary-color) !important;
}
.myMobileMenu li a:hover {
    color: var(--text-color-white);
}
.heroCarousel .owl-nav {
    position: absolute;
    bottom: 15%;
    right: 130px;
    background: rgba(0,0,0,.25);
    backdrop-filter: blur(40px);
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 30px;
    padding: 0px 10px;
    color: #fff;
}


.zoomie{
    animation: zoomZoom 2s ease-in-out infinite;
}
@keyframes zoomZoom {

    50%{
        transform: scale(0.80);
    }
    0%,100%{
        transform: scale(1);
    }
}















    /* .masonry-gallery {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
    } */

     .masonry-gallery .gallery-item {
        break-inside: avoid;
        margin-bottom: 10px;
        display: inline-block;
        width: 100%;
    }

    @media (max-width: 1199px) {
        .masonry-gallery {
            column-count: 3;
        }
    }

    @media (max-width: 991px) {
        .masonry-gallery {
            column-count: 2;
        }
    }

    @media (max-width: 575px) {
        .masonry-gallery {
            column-count: 1;
        }
    } 




.unit-thumb-vertical {
    width: 100px;
    min-width: 100px;
    max-height: 500px;

    display: flex;
    flex-direction: column;

    gap: 12px;

    overflow-y: auto;
    overflow-x: hidden;

    padding: 4px;
}


.unit-thumb-item {
    width: 90px;
    height: 75px;

    flex: 0 0 75px;

    padding: 5px;

    background: #fff;

    border: 2px solid transparent;
    border-radius: 10px;

    overflow: hidden;

    cursor: pointer;

    opacity: 0.45;

    transition: 0.3s;
}


.unit-thumb-item img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;
}


.unit-thumb-item.current {
    opacity: 1;

    border-color: var(--primary-color);
}


.unit-thumb-item:hover {
    opacity: 0.8;
}
.unit-tab-btn {
    background: var(--light-green);
    color: var(--dark-text);
    transition: all 0.3s ease;
}

.unit-tab-btn.active {
    background: var(--primary-color);
    color: #fff;
}
h3.brandName span {
    font-family: "Great Vibes", cursive !important;
    text-transform: capitalize;
    font-size: 30px;
    letter-spacing: 3px;
    font-weight: 300;
}










@media (max-width:575px) {
.heroCarousel .owl-nav {
    bottom: 2%;
    right: 90px;
    background: rgba(0, 0, 0, .55);
}
}




/* Loader */

.preloader { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; overflow: hidden; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px); }
.loader-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 54px 54px; transform: perspective(600px) rotateX(58deg) scale(1.8); transform-origin: center bottom; }
.preloader-core { position: relative; width: min(86vw, 420px); display: grid; justify-items: center; gap: 14px; text-align: center; }
.preloader-core img { width: 112px; height: 112px; object-fit: contain; background: var(--white); border-radius: 50%; padding: 10px; box-shadow: 0 0 0 10px rgba(0, 119, 255, 0.09), 0 0 70px rgba(0, 140, 255, 0.733); }
.preloader-core p {  font-size: clamp(20px, 5vw, 28px); line-height: .9; color: #fff;}
.preloader-core small {font-size: clamp(16px, 5vw, 18px); line-height: .9; color: #fff; font-weight:600;}
.preloader-core span { color: var(--secondary-color-one); text-transform: uppercase; font-size: 12px; font-weight: 900; letter-spacing: 2px; }
.loader-line { width: 100%; height: 4px; background: rgba(255, 255, 255, 0.14); overflow: hidden; border-radius: 99px; }
.loader-line i { display: block; width: 45%; height: 100%; background: #2563EB;
 animation: loadbar 1.05s ease-in-out infinite alternate; }

@keyframes loadbar { from { transform: translateX(-20%); } to { transform: translateX(150%); } }