/* 
Theme Name: Crash Lab Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: NiXaam Team
Author URI: https://nixaam.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

body {
    scroll-behavior: smooth !important;
    overflow-x: hidden !important;
}
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #dbdbdb;
}
::-webkit-scrollbar-thumb {
    background: #FFC314;
}
.menu-div {
    clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%) !important;
}
.header-social-i .e-fas-phone-alt {
    fill: #ffc314 !important;
}
.my-btn a.elementor-button {
    transform: skew(-30deg) !important;
}
.my-btn span.elementor-button-text, .my-btn span.elementor-button-icon {
    transform: skew(30deg) !important;
}
.my-btn a.elementor-button::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    left: 0;
    background: #fff;
    opacity: 0;
    z-index: -1;
    transition: all 1s;
}
.my-btn.my-btn-dark a.elementor-button::before {
    background: #000;
}
.my-btn a.elementor-button:hover {
    color: #fff;
}
.my-btn a.elementor-button:hover::before {
    left: 0;
    right: 0;
    opacity: 1;
}
.mouse-img img {
    animation: upDown 2s ease-in-out infinite !important;
}
@keyframes upDown {
    0% {
        transform: translateY(0);
   }
    50% {
        transform: translateY(-20px);
   }
    100% {
        transform: translateY(0);
   }
}
.my-second-sec::before {
    content: '';
    position: absolute;
    background-image: url(../../../wp-content/uploads/2024/10/slider-curve.png);
    width: 100%;
    height: 100%;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    top: -15%;
    left: 0%;
}
.my-second-sec::after {
    content: '';
    position: absolute;
    background-image: url(../../../wp-content/uploads/2024/10/slider-curve-bottom.png);
    width: 100%;
    height: 100%;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: bottom center;
    bottom: 0%;
    left: 0%;
}
.my-second-sec, #services-sec, #reviews-sec, #contact-sec {
    scroll-margin-top: 20px !important;
}
.about-col .elementor-element-populated {
    position: relative !important;
    top: 15% !important;
}
.services-col {
    transform: skew(-7deg) !important;
}
.services-col .elementor-image-box-content {
    transform: skew(7deg) !important;
    padding: 0px 20px 15px 20px !important;
}
.services-col p.elementor-image-box-description a {
    color: #ffc314 !important;
    font-size: 14px !important;
    display: block !important;
    margin-top: 10px !important;
    font-weight: 600 !important;
}
.services-col p.elementor-image-box-description a:hover {
    color: #000 !important;
    transition: 0.2s ease-in !important;
}
.quote-bg {
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%) !important;
}
.quote-main img {
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%) !important;
}
.benefit-sec::before {
    content: '';
    position: absolute;
    background-image: url(../../../wp-content/uploads/2024/11/benefits-top-curve-new.png);
    width: 100%;
    height: 100%;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    top: -1%;
    left: 0%;
}
.benefit-sec::after {
    content: '';
    position: absolute;
    background-image: url(../../../wp-content/uploads/2024/11/benefits-bottom-curve.png);
    width: 100%;
    height: 100%;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: bottom center;
    bottom: -1%;
    left: 0%;
}
.icons-div {
    position: absolute !important;
    top: 40% !important;
}
.ct-icon {
    position: relative !important;
    top: -20% !important;
    right: -40% !important;
    z-index: 9 !important;
}
.oy-icon {
    position: relative !important;
    top: -20% !important;
    left: -35% !important;
    z-index: 9 !important;
}
.cs-icon {
    position: relative !important;
    top: 30% !important;
    right: -10% !important;
    z-index: 9 !important;
}
.sa-icon {
    position: relative !important;
    top: 30% !important;
    left: -10% !important;
    z-index: 9 !important;
}
.testo-sec ul.slick-dots {
    margin-top: 10px !important;
}
.brand-sec .swiper-pagination {
    bottom: -20% !important;
}
.icons-div .elementor-image-box-title {
    margin-top: 0px !important;
}
.cta-icon .elementor-icon svg {
    transform: skew(30deg) !important;
}
.cta-icon .elementor-icon-box-icon {
    background-color: #ffc314 !important;
    padding: 7px 12px !important;
    transform: skew(-30deg) !important;
}
.footer-sec::before {
    content: '';
    position: absolute;
    background-image: url(../../../wp-content/uploads/2024/11/footer-curve.png);
    width: 100%;
    height: 100%;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    top: -1%;
    left: 0%;
}
.my-main-form input {
    border-radius: 0px !important;
    background-color: #fff !important;
    color: #393939 !important;
    font-size: 14px !important;
    border: none !important;
    padding: 15px !important;
    font-family: 'Poppins' !important;
}
.my-inner-form {
    display: flex !important;
}
.my-main-form .my-inner-form .div-1 {
    margin-right: 5px !important;
    width: 50% !important;
}
.my-main-form .my-inner-form .div-2 {
    margin-left: 5px !important;
    width: 50% !important;
}
.my-main-form p {
    margin-bottom: 10px !important;
}
.mybtn-form button {
    background-color: #ffc314 !important;
    font-family: 'Poppins' !important;
    font-weight: 700 !important;
    color: #000 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    padding: 15px 30px !important;
    transform: skew(-30deg) !important;
    border: none !important;
    border-radius: 0px !important;
}
.mybtn-form span {
    transform: skew(30deg) !important;
    display: inline-block !important;
}
.mybtn-form button::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    left: 0;
    background: #fff;
    opacity: 0;
    z-index: -1;
    transition: all 1s;
}
.mybtn-form button:hover {
    color: #fff;
}
.mybtn-form button:hover::before {
    left: 0;
    right: 0;
    opacity: 1;
}
.my-main-form .wpcf7-response-output {
    color: white !important;
}
.car-com-sec::before {
    content: '';
    position: absolute;
    background-image: url(../../../wp-content/uploads/2024/11/car-cruve.png);
    width: 100%;
    height: 100%;
    background-size: 85%;
    background-repeat: no-repeat;
    background-position: bottom left;
    bottom: 0%;
    left: 0%;
}
.for-height {
    display: inline-block !important;
    height: 120px !important;
}
.testo-col:hover .quote-bg {
    background-color: #ffc314 !important;
}
.testo-col:hover .quote-bg svg {
    fill: #fff !important;
}
/* Popup CSS */
.popup-btn a.paoc-popup-button {
    background-color: #FFC314;
    font-family: "Poppins", Sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    fill: #000000;
    color: #000000;
    border-radius: 0px 0px 0px 0px;
    padding: 15px 30px 15px 30px;
    transform: skew(-30deg) !important;
}
.popup-btn a.paoc-popup-button span {
    transform: skew(30deg) !important;
    display: inline-block !important;
}
.popup-btn a.paoc-popup-button span i {
    padding-left: 5px !important;
}
.popup-btn a.paoc-popup-button::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    left: 0;
    background: #fff;
    opacity: 0;
    z-index: -1;
    transition: all 1s;
}
.popup-btn a.paoc-popup-button:hover {
    color: #000;
}
.popup-btn a.paoc-popup-button:hover::before {
    left: 0;
    right: 0;
    opacity: 1;
}
.app-btn {
    text-align: center !important;
}

/* Media Query */
@media screen and (min-width: 1400px) {
    .car-com-sec::before {
        background-size: 80%;
    }
    .my-second-sec::before {
        top: -20%;
    }
    .banner-sec {
        padding-bottom: 230px !important;
    }
}
@media screen and (max-width: 1024px) {
    .menu-div {
        clip-path: none !important;
    }
    .services-col {
        transform: skew(0deg) !important;
    }
    .services-col .elementor-image-box-content {
        transform: skew(0deg) !important;
        padding: 0px 10px 15px 10px !important;
    }
}
@media screen and (max-width: 991px) {
    .services-col {
        width: 50% !important;
    }
    .services-col img {
        width: 100% !important;
    }
    .for-height {
        height: auto !important;
    }
}
@media screen and (max-width: 767px) {
    .header-social-i .e-fas-phone-alt {
        fill: #fff !important;
    }
    .icons-div {
        position: relative !important;
        top: 0% !important;
    }
    .ct-icon {
        top: 0% !important;
        right: 0 !important;
    }
    .oy-icon {
        top: 0% !important;
        left: 0% !important;
    }
    .cs-icon {
        top: 0% !important;
        right:00% !important;
    }
    .sa-icon {
        top: 0% !important;
        left: 0% !important;
    }
    .about-col .elementor-element-populated {
        top: 0% !important;
    }
    .my-second-sec {
        padding-bottom: 70px !important;
    }
    .my-second-sec::before {
        top: -9%;
    }
}
@media screen and (max-width: 575px) {
    .banner-sec {
        padding-top: 150px !important;
    }
    .services-col {
        width: 100% !important;
    }
    .benefit-sec::before {
        top: -1px !important;
    }
    .benefit-sec::after {
        bottom: -1px !important;
    }
    .my-inner-form {
        display: block !important;
    }
    .my-main-form .my-inner-form .div-1 {
        margin-right: 0px !important;
        width: 100% !important;
    }
    .my-main-form .my-inner-form .div-2 {
        margin-left: 0px !important;
        width: 100% !important;
    }
}