@font-face {
    font-family: 'Helvetica';
    src: url('../fonts/Helvetica.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Helvetica';
    src: url('../fonts/Helvetica-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Helvetica';
    src: url('../fonts/Helvetica-BoldOblique.ttf') format('truetype');
    font-weight: bold;
    font-style: oblique;
}

/* ============== Default Element Style ================ */
body {
    font-family: 'Helvetica', sans-serif;
    font-size: clamp(0.9rem, 1vw + 0.2rem, 1rem);
    color: #373737;
}

html {
    scroll-behavior: smooth;
}

h1, .h1 {
    font-weight: 700;
    font-size: clamp(2rem, 6vw, 3.2rem); /* min 40px, scales, max 69px */
    line-height: 1.3;
    letter-spacing: normal;
}

h2, .h2 {
    font-weight: 700;
    font-size: clamp(1.8rem, 4.5vw, 2.2rem); /* min 32px, max 44px */
    line-height: 1.1;
    letter-spacing: normal;
}

h3, .h3 {
    font-weight: 700;
    font-size: clamp(1.3rem, 3.5vw, 1.56rem); /* min 24px, max 30px */
    line-height: 1.1;
    letter-spacing: normal;
}

h4, .h4 {
    font-weight: 700;
    font-size: clamp(1.12rem, 2.5vw, 1.3rem); /* min 20px, max 24px */
    line-height: 1.1;
    letter-spacing: normal;
}

h5, .h5 {
    font-weight: 400;
    font-size: clamp(1rem, 2vw, 1.125rem); /* min 16px, max 18px */
    line-height: 1.2;
    letter-spacing: normal;
}

p, a {
    font-style: normal;
    font-weight: 400;
    font-size: clamp(0.9rem, 1vw + 0.2rem, 1rem);
    line-height: 1.5;
    color: #373737;
}

p {
    color: #575757;
}

.text-justify {
    text-align: justify;
}

.social_icons a {
    display: inline-block; /* Required for transform to work on inline elements */
}

.social_icons i {
    display: flex; /* Important to make it scalable */
    align-items: center;
    justify-content: center;
    border: 1px solid #fff;
    padding: 8px 8px;
    border-radius: 6px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

    .social_icons i:hover {
        transform: scale(1.2);
        background-color: #83A300;
        color: #000;
        box-shadow: 0 4px 12px rgba(255, 255, 255, 0.4);
    }

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

a, a:hover, a:focus {
    text-decoration: none !important;
}

img {
    border-style: none;
}

.logo {
    max-height: 60px;
    object-fit: contain;
    width: auto;
}

.btn_theme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    color: #000;
    background: #C9E165;
    border: 1px solid #83A300;
    border-radius: 10px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(131, 163, 0, 0.15);
    position: relative;
    padding: 10px 20px;
}

    /* Hover Animation */
    .btn_theme:hover {
        background: #83A300;
        color: #fff !important;
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(131, 163, 0, 0.3);
    }

    .btn_theme::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 10px;
        box-shadow: 0 0 0 rgba(131, 163, 0, 0);
        transition: box-shadow 0.4s ease;
    }

    .btn_theme:hover::after {
        box-shadow: 0 0 15px rgba(131, 163, 0, 0.6);
    }


.padding-100 {
    padding: 100px 0px;
}

.padding-top {
    padding-top: 100px;
}

.padding-bottom {
    padding-bottom: 100px;
}

.text-green {
    color: #83A300;
}

.text-green-light {
    color: #C9E165;
}

#hero-section {
    overflow: hidden;
}

.hero-wrapper {
    position: relative;
}

    .hero-wrapper picture img {
        width: 100%;
        height: 95vh;
        display: block;
        object-fit: cover;
    }

.hero-heading {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    margin: 0;
    z-index: 1;
    max-width: 500px;
    color: #C9E165;
}

/*@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(-50%);
    }
}

@keyframes floatParallax {
    0% {
        transform: scale(1) translateY(10px);
        opacity: 0;
    }

    60% {
        transform: scale(1.02) translateY(-5px);
        opacity: 1;
    }

    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}*/

#header {
    background-color: #575757 !important;
}

    #header .nav-link {
        color: #fff;
    }

.hero-wrapper img {
    /*	animation: floatParallax 2.5s cubic-bezier(0.25, 1, 0.5, 1) 0.2s forwards;
	opacity: 0;*/
}

.hero-heading {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    margin: 0;
    z-index: 1;
    max-width: 500px;
    color: #C9E165;
    /*    opacity: 0;
*/ /*    animation: fadeSlideIn 1s ease-out 0.5s forwards;
*/
}

#hero-section {
    margin-top: 43px;
}

@media (max-width: 992px) {
    #header .nav-link {
        color: #000;
        color: #000;
        border-bottom: 1px solid #00000045;
        margin-bottom: 10px;
        text-align: center;
        font-size: 16px;
        font-weight: 500;
    }

    .nav-item {
        text-align: center;
    }
}

.owl-theme .owl-nav [class*=owl-] {
    color: #fff;
    background: unset !important;
    font-size: 20px !important;
}

.owl-prev {
    position: absolute;
    top: 40%;
    left: 10px;
}

.owl-next {
    position: absolute;
    top: 40%;
    right: 10px;
}

@media (max-width: 768px) {
    .hero-wrapper .container {
        position: unset !important;
        transform: none !important;
    }

    .hero-heading {
        transform: unset !important;
    }

    .padding-100 {
        padding: 40px 0px;
    }

    .padding-top {
        padding-top: 40px;
    }

    .padding-bottom {
        padding-bottom: 40px;
    }

    .hero-wrapper {
        display: flex;
        flex-direction: column;
    }

    .hero-carousel {
        background: #c9e165;
    }

    .hero-heading {
        position: static;
        transform: none;
        color: #000 !important;
        padding: 20px;
        text-align: center;
        width: 100%;
        box-sizing: border-box;
    }

    .hero-wrapper picture img {
        height: 310px;
        object-fit: cover;
        width: 100%;
        object-position: 63%;
    }

    #hero-section .bg_green, .hero-wrapper {
        background: #C9E165;
    }
}

#footer {
    background: url('../img/conventional-parking-space.png') no-repeat center center;
    background-size: cover;
    padding-top: 50px;
    padding-bottom: 30px;
}

    #footer p, a {
        color: #fff;
    }

    #footer a, #contact-us-details a {
        display: inline-block; /* necessary for transform */
        transition: all 0.3s ease;
    }

#contact-us-details a {
    color: #373737;
}

    #footer a:hover, #contact-us-details a:hover {
        color: #83A300;
        transform: scale(1.05);
        transition: all 0.3s ease;
    }

.car_text {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 1;
}

.application-area1 {
    background-color: #575757;
}

    .application-area1 h3 {
        color: #C9E165 !important;
    }

    .application-area1 p {
        color: #fff;
    }

#application-area .nav-link {
    position: relative;
    overflow: hidden;
    border: 1px solid #83A300;
    margin-bottom: 20px;
    color: #000;
    z-index: 1;
    background: #fff;
    transition: color 0.3s ease;
}

#application-area .tab-content img {
    height: 240px;
    object-fit: cover;
}

#application-area .nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background-color: #C9E165;
    z-index: -1;
    transition: width 0.4s ease-in-out;
}

#application-area .nav-link:hover::before,
#application-area .nav-link.active::before {
    width: 100%;
}

#application-area .nav-link:hover,
#application-area .nav-link.active {
    color: #000;
}

#application-area .arrow-icon i {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

#application-area .nav-link:hover .arrow-icon i {
    transform: translateX(5px);
}

.list_disc {
    list-style: disc;
    padding-left: 30px;
}

#application-area .form-select:focus {
    border-color: #4CAF50;
    outline: 0;
    box-shadow: 0 0 0 .18rem rgb(131 163 0 / 23%);
}

.bg_salient {
    background: #C9E165;
    border-top-left-radius: 60px;
    border-bottom-left-radius: 60px;
    padding: 35px 0;
    padding-left: 60px;
    padding-right: 50px;
}

@media (max-width: 400px) {
    .gif_img {
        height: 130px;
        object-fit: cover;
        object-position: right;
    }

    .car_text {
        position: unset !important;
        transform: unset;
        text-align: center;
    }

    .form-select {
        font-size: 14px;
    }

    .bg_salient {
        padding: 30px 12px !important;
    }
}

.top_salient {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

    .top_salient p, .top_salient h5 {
        color: #373737;
    }

@media (max-width: 992px) {
    .top_salient {
        position: unset;
        top: 50%;
        right: 0;
        transform: unset;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    #salient-features {
        padding: 0px 30px;
    }

    .bg_salient {
        border-radius: 15px;
        padding: 30px 25px;
    }

    .img_salient {
        border-radius: 38px;
    }
}

/*.feature-card {
    position: relative;
    perspective: 600px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0px 4px 15px 0px #0000001A;
    padding: 30px 10px 30px 16px;
    margin: 0px 6px;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    z-index: 0;
}*/

/*
    .feature-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to right, #81a500, #a6c223, #c9e166);
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
        z-index: -1;
    }

    .feature-card:hover {
        transform: scale(1.03);
        box-shadow: 0px 6px 20px 0px #0000002a;
    }

        .feature-card:hover::before {
            opacity: 1;
        }

        .feature-card:hover p,
        .feature-card:hover h3, .feature-card:hover h4 {
            color: #fff;
            transition: color 0.3s ease-in-out;
        }
*/

.join-box {
    position: relative;
    perspective: 600px;
    overflow: hidden;
    box-shadow: 0px 4px 15px 0px #0000001A;
    padding: 30px 10px 30px 16px;
    margin: 0px 6px;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

    .join-box .info {
        position: absolute;
        inset: 0;
        padding: 20px;
        pointer-events: none;
        background: linear-gradient(to right, #81a500, #a6c223, #c9e166);
        transform: rotate3d(1, 0, 0, 90deg);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 0;
        opacity: 0;
    }

    .join-box h4,
    .join-box p {
        position: relative;
        z-index: 1;
        user-select: none;
        transition: color 0.5s ease-in-out;
    }

    .join-box:hover h4,
    .join-box:hover p {
        color: #fff !important;
    }

.icon-badge img {
    position: relative;
    z-index: 99999;
}

/* Direction origins */
.in-top .info,
.out-top .info {
    transform-origin: 50% 0%;
}

.in-right .info {
    transform-origin: 100% 50%;
}

.out-right .info {
    transform-origin: 100% 50%;
}

.in-bottom .info,
.out-bottom .info {
    transform-origin: 50% 100%;
}

.in-left .info {
    transform-origin: 0% 50%;
}

.out-left .info {
    transform-origin: 0% 50%;
}

/* IN animations */
.in-top .info {
    animation: in-top 0.5s forwards;
}

.in-right .info {
    animation: in-right 0.5s forwards;
}

.in-bottom .info {
    animation: in-bottom 0.5s forwards;
}

.in-left .info {
    animation: in-left 0.5s forwards;
}

/* OUT animations */
.out-top .info {
    animation: out-top 0.5s forwards;
}

.out-right .info {
    animation: out-right 0.5s forwards;
}

.out-bottom .info {
    animation: out-bottom 0.5s forwards;
}

.out-left .info {
    animation: out-left 0.5s forwards;
}

/* Keyframes */
@keyframes in-top {
    0% {
        transform: rotate3d(-1, 0, 0, 90deg);
        opacity: 0;
    }

    100% {
        transform: rotate3d(0, 0, 0, 0);
        opacity: 1;
    }
}

@keyframes in-right {
    0% {
        transform: rotate3d(0, -1, 0, 90deg);
        opacity: 0;
    }

    100% {
        transform: rotate3d(0, 0, 0, 0);
        opacity: 1;
    }
}

@keyframes in-bottom {
    0% {
        transform: rotate3d(1, 0, 0, 90deg);
        opacity: 0;
    }

    100% {
        transform: rotate3d(0, 0, 0, 0);
        opacity: 1;
    }
}

@keyframes in-left {
    0% {
        transform: rotate3d(0, 1, 0, 90deg);
        opacity: 0;
    }

    100% {
        transform: rotate3d(0, 0, 0, 0);
        opacity: 1;
    }
}

@keyframes out-top {
    0% {
        transform: rotate3d(0, 0, 0, 0);
        opacity: 1;
    }

    100% {
        transform: rotate3d(-1, 0, 0, 90deg);
        opacity: 0;
    }
}

@keyframes out-right {
    0% {
        transform: rotate3d(0, 0, 0, 0);
        opacity: 1;
    }

    100% {
        transform: rotate3d(0, -1, 0, 90deg);
        opacity: 0;
    }
}

@keyframes out-bottom {
    0% {
        transform: rotate3d(0, 0, 0, 0);
        opacity: 1;
    }

    100% {
        transform: rotate3d(1, 0, 0, 90deg);
        opacity: 0;
    }
}

@keyframes out-left {
    0% {
        transform: rotate3d(0, 0, 0, 0);
        opacity: 1;
    }

    100% {
        transform: rotate3d(0, 1, 0, 90deg);
        opacity: 0;
    }
}






.img_choose_us {
    margin-left: -26px;
}

.trail-drop {
    position: fixed;
    width: 10px;
    height: 10px;
    background-color: #83A300;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.6;
    transform: scale(1);
    animation: waterTrail 0.6s ease-out forwards;
    z-index: 9999;
}

@keyframes waterTrail {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

#inner-banner {
    background-color: #C9E165;
    margin-top: 86px;
    padding: 60px 0;
}

#contact-us-details .info-card {
    border: 1px solid #83A300;
    border-radius: 20px;
    overflow: hidden;
    transition: color 0.3s ease-in-out;
}

    #contact-us-details .info-card:hover {
        transform: scale(1.05);
    }

#contact-us-details .f-inform {
    background-color: #83A300;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

#contact-us-details .form-information {
    border: 1px solid #83A300;
    border-radius: 20px;
}

#contact-us-details .form-control:focus {
    box-shadow: unset;
    border-color: #83A300;
}

.img_animate {
    transition: transform 0.4s ease, filter 0.4s ease;
}

    .img_animate:hover {
        transform: scale(1.05);
        filter: brightness(1.04) contrast(1.1);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }

.animate_salient {
    transition: transform 0.4s ease, filter 0.4s ease;
    transform-origin: left center; /* Key part */
}

    .animate_salient:hover {
        transform: scale(1.03);
        text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    }

/*	#salient-features {
		overflow: hidden;
	}*/

@media (max-width: 600px) {
    #inner-banner {
        padding: 40px 0;
    }
}

/* Hide arrows on mobile */
@media (max-width: 767.98px) {
    .owl-nav {
        display: none !important;
    }
}

/* Hide dots on desktop */
@media (min-width: 768px) {
    .owl-dots {
        display: none !important;
    }
}