* {
    margin     : 0;
    padding    : 0;
    box-sizing : border-box;
    font-family: 'Poppins', sans-serif;
}

:root {
    --primary-color  : #ffb046;
    --secondary-color: #38373a;
    --text-color     : #ffffff;
    --link-color     : #67c3ef;

    --accent-color: #F16122;
    --dark-bg     : #000;
    --light-text  : #A8A9AD;
}

body {
    overflow-x      : hidden;
    background-color: var(--text-color);

}

/* Top Bar Styles */
.top-border {
    /* background   : rgb(115 194 244); */
    color        : var(--text-color);
    padding      : 18px 0;
    font-size    : 14px;
    border-bottom: 1px solid #e6bd87;
    transition   : all 0.4s ease;
}

.top-contact span {
    margin-right: 20px;
    display     : inline-flex;
    align-items : center;
    transition  : transform 0.3s ease;
}

.top-contact span a {
    text-decoration: none;
    color          : var(--text-color);
    font-size      : 15px;
    font-weight    : 600;
}

.top-contact span:hover {
    transform: translateY(-2px);
}

.top-contact i {
    margin-right: 8px;
    color       : #34bdff;
    font-size   : 20px;
}

.social-icons a {
    color          : var(--text-color);
    margin-left    : 15px;
    font-size      : 16px;
    transition     : all 0.3s ease;
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    width          : 30px;
    height         : 30px;
    border-radius  : 50%;
    background     : var(--primary-color);
    text-decoration: none;
}

.social-icons a:hover {
    background: var(--link-color);
    transform : translateY(-3px) rotate(5deg);
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4);
}

/* Main Navbar Styles */

.main-navbar {
    box-shadow         : 0 5px 20px rgba(0, 0, 0, 0.1);
    transition         : all 0.4s ease;
    background         : linear-gradient(215deg, rgb(0 0 0 / 52%) 0%, rgb(0 0 0 / 77%) 100%), url(../images/nav-bg.jpg);
    background-size    : cover;
    background-repeat  : no-repeat;
    background-position: center;
}


.main-navbar.scrolled {
    padding            : 8px 0;
    background-image   : url("../images/nav-bg.jpg");
    background-size    : cover;
    background-repeat  : no-repeat;
    background-position: center;
    backdrop-filter    : blur(10px);
}

.navbar-toggler span i {
    color        : var(--text-color);
    border       : 1px solid #fff;
    padding      : 10px;
    border-radius: 20%;
}

.navbar-brand {


    transition : all 0.3s ease;
    display    : flex;
    align-items: center;
}

.navbar-brand img {

    height: 130px;

    margin-right: 10px;
}

.navbar-brand span {
    color: var(--link-color);
}

.navbar-brand:hover {
    transform: scale(1.05);
}

.nav-link {
    font-weight   : 600 !important;
    color         : var(--text-color) !important;
    margin        : 0 10px;
    position      : relative;
    transition    : all 0.3s ease;
    text-transform: uppercase;
    font-size     : 15px !important;
}

.nav-link:before {
    content   : '';
    position  : absolute;
    bottom    : 0;
    left      : 50%;
    width     : 0;
    height    : 2px;
    background: var(--link-color);
    transition: all 0.3s ease;
    transform : translateX(-50%);
}

.nav-link:hover {
    color    : var(--link-color) !important;
    transform: translateY(-2px);
}

.nav-link:hover:before {
    width: 100%;
}

.call-now {
    display      : flex;
    align-items  : center;
    background   : #0084c3;
    color        : var(--text-color);
    padding      : 10px 20px;
    border-radius: 50px;
    font-weight  : 600;
    transition   : all 0.3s ease;
    box-shadow   : 0 4px 6px rgba(59, 130, 246, 0.3);
}

.call-now:hover {
    transform : translateY(-3px);
    box-shadow: 0 8px 15px rgba(59, 130, 246, 0.4);
    background: #4db1d8;
}

.call-now i {
    margin-right: 8px;
    font-size   : 18px;
}

.call-now a {
    text-decoration: none;
    color          : var(--text-color);
}

/* Video Background Section */
.video-background {
    position       : relative;
    width          : 100%;
    height         : 80vh;
    overflow       : hidden;
    display        : flex;
    align-items    : center;
    justify-content: center;
}

.video-background video {
    position  : absolute;
    top       : 50%;
    left      : 50%;
    min-width : 100%;
    min-height: 100%;
    width     : auto;
    height    : auto;
    transform : translateX(-50%) translateY(-50%);
    z-index   : -1;
}
.mobile{
    display: none;
}



/* Mobile Navbar Animation */
.navbar-toggler {
    border    : none;
    padding   : 4px 8px;
    transition: all 0.3s ease;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    transition      : all 0.3s ease;
}

.navbar-toggler:hover .navbar-toggler-icon {
    transform: rotate(90deg);
}

/* Offcanvas Animation */
.offcanvas {
    background     : rgba(15, 23, 42, 0.98) !important;
    backdrop-filter: blur(10px);
}

.offcanvas-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-close {
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    opacity   : 0.8;
    transition: all 0.3s ease;
}

.btn-close:hover {
    opacity  : 1;
    transform: rotate(90deg);
}

.offcanvas-body .nav-link {
    color        : rgba(255, 255, 255, 0.9) !important;
    font-size    : 1.2rem;
    padding      : 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin       : 0;
}

.offcanvas-body .nav-link:before {
    display: none;
}

.offcanvas-body .nav-link:hover {
    color       : var(--link-color) !important;
    padding-left: 15px;
    background  : rgba(255, 255, 255, 0.05);
}

.offcanvas-contact {
    padding   : 20px;
    margin-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.offcanvas-contact div {
    margin-bottom: 15px;
    color        : rgba(255, 255, 255, 0.8);
    display      : flex;
    align-items  : center;
}

.offcanvas-contact i {
    margin-right: 10px;
    color       : var(--link-color);
    font-size   : 18px;
    width       : 25px;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity  : 0;
        transform: translateY(50px);
    }

    to {
        opacity  : 1;
        transform: translateY(0);
    }
}

/* about section start here  */


.section-padding {
    padding: 50px 0px;
}

.section-label {
    display       : inline-block;
    color         : var(--primary-color);
    font-size     : 16px;
    font-weight   : 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom : 15px;
    background    : rgba(255, 176, 70, 0.1);
    padding       : 8px 20px;
    border-radius : 30px;
}

.section-title {
    color        : var(--secondary-color);
    font-size    : 42px;
    font-weight  : 700;
    line-height  : 1.2;
    margin-bottom: 30px;
}

.section-description {
    color        : #555;
    font-size    : 18px;
    margin-bottom: 40px;
    line-height  : 1.8;
}

.image-container {
    position    : relative;
    margin-right: 30px;
}

.main-image {
    width        : 100%;
    border-radius: 10px;
    box-shadow   : 0 15px 30px rgba(0, 0, 0, 0.1);
}

.floating-image {
    position     : absolute;
    border-radius: 10px;
    box-shadow   : 0 10px 25px rgba(0, 0, 0, 0.15);
    border       : 4px solid white;
}

.image-1 {
    width  : 55%;
    bottom : -40px;
    right  : -30px;
    z-index: 2;
}

.image-2 {
    width  : 45%;
    top    : -30px;
    left   : -30px;
    z-index: 3;
}

.feature-box {

    padding: 3px;

    height       : 100%;
    margin-bottom: 0px;

    transition: all 0.3s ease;
}



.feature-icon {
    width          : 60px;
    height         : 60px;
    background     : rgba(255, 176, 70, 0.15);
    border-radius  : 12px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    margin-bottom  : 15px;
}

.feature-icon i {
    font-size: 24px;
    color    : var(--primary-color);
}

.feature-title {
    font-size    : 20px;
    font-weight  : 700;
    margin-bottom: 12px;
    color        : var(--secondary-color);
}

.feature-description {
    color      : #666;
    font-size  : 16px;
    line-height: 1.6;
}

.highlight-text {
    background   : #f9f9f9;
    padding      : 25px;
    border-radius: 12px;
    margin       : 30px 0;
    font-size    : 18px;
    line-height  : 1.8;
    color        : #555;
    border-left  : 4px solid var(--accent-color);
}

.action-buttons {
    display    : flex;
    align-items: center;
    flex-wrap  : wrap;
    gap        : 30px;
    margin-top : 30px;
}


.btn-primary-custom {
    background     : #0084c3;
    color          : white;
    padding        : 15px 30px;
    border-radius  : 50px;
    font-weight    : 600;
    text-decoration: none;
    display        : inline-flex;
    align-items    : center;
    transition     : all 0.3s ease;
}

.btn-primary-custom:hover {
    background: var(--primary-color);
    color     : var(--secondary-color);
    transform : translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.btn-icon {
    margin-left: 10px;
    transition : transform 0.3s ease;
}

.btn-primary-custom:hover .btn-icon {
    transform: translateX(5px);
}

.contact-widget {
    display      : flex;
    align-items  : center;
    background   : white;
    padding      : 15px 25px;
    border-radius: 50px;
    box-shadow   : 0 5px 20px rgba(0, 0, 0, 0.1);
}

.contact-icon {
    width          : 50px;
    height         : 50px;
    background     : rgb(255 176 70);
    border-radius  : 50%;
    display        : flex;
    align-items    : center;
    justify-content: center;
    margin-right   : 15px;
    color          : #fff;
}

.contact-icon i {
    color    : var(--accent-color);
    font-size: 20px;
}

.contact-text {
    display       : flex;
    flex-direction: column;
}

.contact-label {
    font-size    : 14px;
    color        : #666;
    margin-bottom: 4px;
}

.contact-number {
    font-size      : 18px;
    font-weight    : 700;
    color          : var(--accent-color);
    text-decoration: none;
}

/* Responsive Styles */
@media (max-width: 992px) {
    .section-title {
        font-size: 36px;
    }

    .image-container {
        margin-right : 0;
        margin-bottom: 50px;
    }

    .floating-image {
        position  : relative;
        width     : 100% !important;
        position  : static;
        margin-top: 20px;
    }
}

@media (max-width: 768px) {
    .about-section {
        padding: 60px 0;
    }

    .section-title {
        font-size: 32px;
    }

    .section-description {
        font-size: 16px;
    }

    .action-buttons {
        flex-direction: column;
        align-items   : flex-start;
        gap           : 20px;
    }

    .contact-widget {
        padding: 12px 20px;
    }
}

@media (max-width: 576px) {
    .section-title {
        font-size: 28px;
    }

    .feature-box {
        padding: 20px;
    }

    .feature-title {
        font-size: 18px;
    }

    .highlight-text {
        padding  : 20px;
        font-size: 16px;
    }

    .btn-primary-custom {
        padding: 12px 25px;
    }
}





/* service section start here  */
/* Section Three Styles */
.section-three {
    background: var(--dark-bg);
    padding   : 100px 0;
    position  : relative;
    overflow  : hidden;
}

.quality-main {
    text-align   : center;
    margin-bottom: 30px;
}

.quality {
    color         : var(--primary-color);
    font-size     : 16px;
    font-weight   : 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display       : inline-block;
    background    : rgba(255, 176, 70, 0.1);
    padding       : 8px 20px;
    border-radius : 30px;
}

.handyman-services-textMain {
    display       : flex;
    flex-direction: column;
    gap           : 30px;
    margin-bottom : 60px;
}

@media (min-width: 992px) {
    .handyman-services-textMain {
        flex-direction: row;
        align-items   : center;
    }
}

.handyman-text {
    color      : var(--text-color);
    font-size  : 42px;
    font-weight: 700;
    line-height: 1.2;
}

.handyman-services {
    flex: 1;
}

.malesuada {
    color      : var(--light-text);
    font-size  : 18px;
    line-height: 1.8;
    margin     : 0;
}

/* Owl Carousel Customization */
.services_slider {
    margin-top: 60px;
    position  : absolute;
}

.services-slider-box {
    position     : relative;
    overflow     : hidden;
    border-radius: 12px;
    cursor       : pointer;
    height       : 450px;
    margin       : 15px;
    transition   : all 0.3s ease;
}

.services-slider-box::before {
    content       : "";
    position      : absolute;
    top           : 0;
    left          : 0;
    width         : 100%;
    height        : 100%;
    background    : linear-gradient(180deg, rgba(34, 34, 34, 0.00) 0%, #222 100%);
    pointer-events: none;
    z-index       : 1;
    transition    : all 0.3s ease;
}

.services-slider-box:hover::before {
    background: linear-gradient(180deg, rgba(241, 97, 34, 0.00) 0%, var(--accent-color) 100%);
}

.services-icon {
    width     : 100%;
    height    : 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.services-slider-box:hover .services-icon {
    transform: scale(1.05);
}

.services-icon-box {
    position  : absolute;
    bottom    : 0;
    color     : white;
    width     : 100%;
    padding   : 30px;
    z-index   : 2;
    transition: all 0.3s ease;
}

.services-solution-main-text {
    color        : var(--text-color);
    font-size    : 24px;
    font-weight  : 600;
    margin-bottom: 15px;
    transition   : all 0.3s ease;
}

.aliquam-text {
    color      : var(--text-color);
    font-size  : 16px;
    line-height: 1.6;
    opacity    : 0;
    max-height : 0;
    overflow   : hidden;
    transition : opacity 0.5s ease, max-height 0.5s ease;
}

.services-slider-box:hover .aliquam-text {
    opacity   : 1;
    max-height: 100px;
}

.services-slider-box:hover .services-icon-box {
    bottom: 20px;
}



.View-btn-sec-btn-main .btn-main.btn2 {
    max-width: 230px;
}

.btn-main.btn2 {
    max-width: 200px;
    width    : 100%;
}

.btn2 {
    background: #000;
}

.sec-one-buttons {
    display    : flex;
    align-items: center;
    gap        : 90px;
    margin-top : 60px;
    margin-left: 30px;
}

.btn-main {
    color      : var(--2, #F16122);
    font-family: Outfit;
    font-size  : 18px;
    font-style : normal;
    font-weight: 600;
    line-height: 24px;
    position   : relative;
    background : #FFFF;
    padding    : 17px 0;
    text-align : center;
    cursor     : pointer;
    transition : all 0.3s ease;
}

.arrow {
    transform: rotate(-45deg);
}

.View-btn-sec-btn-main a {
    text-decoration: none;
}

.arrow-section {
    display        : flex;
    align-items    : center;
    justify-content: center;
    width          : 42px;
    height         : 42px;
    background     : #F16122;
    transform      : rotate(45deg);
    position       : absolute;
    left           : -20px;
    top            : 8px;
    z-index        : 1;
    transition     : all 0.3s ease;
}

.btn1 {
    max-width: 210px;
    width    : 100%;
}

.btn-box-left,
.btn-box-right {
    width     : 42px;
    height    : 42px;
    background: #FFF;
    transform : rotate(45deg);
}

.btn-box-left {
    position  : absolute;
    left      : -20px;
    top       : 8px;
    transition: all 0.3s ease;
}

.btn-box-right {
    position  : absolute;
    right     : -20px;
    top       : 8px;
    transition: all 0.3s ease;
}

.btn-main:hover .arrow-section {
    left      : 90%;
    background: #F16122;
}

.btn-main:hover {
    background: #F16122;
    color     : #FFF;
}

.btn-main:hover .btn-box-right,
.btn-main:hover .btn-box-left {
    background: #F16122;
}

.arrow-section {
    display        : flex;
    align-items    : center;
    justify-content: center;
    width          : 42px;
    height         : 42px;
    background     : #F16122;
    transform      : rotate(45deg);
    position       : absolute;
    left           : -20px;
    top            : 8px;
    z-index        : 1;
    transition     : all 0.3s ease;
}

.btn-main {
    color      : var(--2, #F16122);
    font-family: Outfit;
    font-size  : 18px;
    font-style : normal;
    font-weight: 600;
    line-height: 24px;
    position   : relative;
    background : #FFFF;
    padding    : 17px 0;
    text-align : center;
    cursor     : pointer;
    transition : all 0.3s ease;
}

.View-btn-sec-btn-main {
    margin-top     : 40px;
    display        : flex;
    align-items    : center;
    justify-content: center;
}

.View-btn-sec-btn-main .btn-main.btn2 {
    max-width: 230px;
}

/* Owl Carousel Nav */
.owl-nav {
    position: absolute;
    top     : -100px;
    right   : 0;
    display : flex;
    gap     : 15px;
}

.owl-nav button {
    width          : 50px;
    height         : 50px;
    border-radius  : 50%;
    background     : rgba(255, 255, 255, 0.1) !important;
    color          : white !important;
    display        : flex;
    align-items    : center;
    justify-content: center;
    transition     : all 0.3s ease;
}

.owl-nav button:hover {
    background: var(--primary-color) !important;
    color     : var(--secondary-color) !important;
}

.owl-dots {
    text-align: center;
    margin-top: 40px;
}

.owl-dot {
    width        : 12px;
    height       : 12px;
    border-radius: 50%;
    background   : rgba(255, 255, 255, 0.3) !important;
    margin       : 0 5px;
    transition   : all 0.3s ease;
}

.owl-dot.active {
    background: var(--primary-color) !important;
    transform : scale(1.3);
}



/* Animation Classes */
.fade_down {
    opacity   : 0;
    transform : translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade_down.show {
    opacity  : 1;
    transform: translateY(0);
}

/* service section end here  */

/* our process section start here */

.section-five {
    background   : var(--dark-bg);
    padding      : 100px 0 200px;
    position     : relative;
    overflow     : visible;
    margin-bottom: 234px;
}

.process-section {
    position : absolute;
    top      : 90%;
    left     : 50%;
    transform: translate(-50%, -30%);
    width    : 85%;
}

.quality-main {
    text-align   : center;
    margin-bottom: 30px;
}

.quality {
    color         : var(--primary-color);
    font-size     : 16px;
    font-weight   : 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display       : inline-block;
    background    : rgba(255, 176, 70, 0.1);
    padding       : 8px 20px;
    border-radius : 30px;
}

.handyman-text {
    color        : var(--text-color);
    font-size: 36px;
    font-weight  : 700;
    line-height  : 1.2;
    /* text-align   : center; */
    margin-bottom: 20px;
}

.process-para {
    color      : var(--light-text);
    font-size  : 18px;
    line-height: 1.8;
    text-align : center;
    max-width  : 850px;
    margin     : 0 auto 60px;
}

.steps-box-main {
    position     : relative;
    margin-bottom: 30px;
}

.steps-box {
    background: var(--secondary-color);
    clip-path : polygon(50% 0%, 100% 15%, 100% 85%, 50% 100%, 50% 100%, 0 85%, 0 15%);
    text-align: center;
    padding   : 30px 25px;
    height    : 100%;
    transition: all 0.6s ease;
    position  : relative;
    z-index   : 1;
}

.steps-box:hover {
    background: var(--accent-color);
    transform : translateY(-10px);
    box-shadow: 0 20px 40px rgba(241, 97, 34, 0.3);
}

.number-circel {
    width           : 60px;
    height          : 60px;
    background-color: var(--text-color);
    border-radius   : 50%;
    display         : flex;
    align-items     : center;
    justify-content : center;
    color           : var(--card-bg);
    font-size       : 28px;
    font-weight     : 700;
    position        : absolute;
    left            : 50%;
    top             : 0;
    transform       : translate(-50%, -50%);
    z-index         : 2;
    transition      : all 0.6s ease;
}

.steps-box:hover .number-circel {
    background-color: var(--text-color);
    color           : var(--accent-color);
    transform       : translate(-50%, -50%) scale(1.1);
}

.register-img-main {
    display        : flex;
    align-items    : center;
    justify-content: center;
    margin         : 40px 0 20px;
    transition     : all 0.6s ease;
}

.register-img-main img {
    max-width : 70px;
    height    : auto;
    transition: all 0.6s ease;
}

.steps-box:hover .register-img-main img {
    filter   : brightness(0) invert(1);
    transform: scale(1.1);
}

.Register-text {
    color        : var(--text-color);
    font-size    : 24px;
    font-weight  : 600;
    margin-bottom: 15px;
    transition   : all 0.6s ease;
}

.proin {
    color        : var(--light-text);
    font-size    : 16px;
    line-height  : 1.6;
    margin-bottom: 20px;
    transition   : all 0.6s ease;
}

.steps-box:hover .proin {
    color: var(--text-color);
}

/* Animation Classes */
.fade_down {
    opacity   : 0;
    transform : translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade_down.show {
    opacity  : 1;
    transform: translateY(0);
}

.flip_left {
    opacity   : 0;
    transform : perspective(1000px) rotateY(90deg);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.flip_left.show {
    opacity  : 1;
    transform: perspective(1000px) rotateY(0deg);
}

/* our project section start here  */

/* footer section start here  */


/* Footer Styles */

.site-footer {
    position        : relative;
    background-color: var(--dark-bg);
    overflow        : hidden;
    z-index         : 1;

}

.site-footer::before {
    content   : '';
    position  : absolute;
    top       : 0;
    left      : 0;
    width     : 100%;
    height    : 5px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color), var(--link-color));
    z-index   : 2;
    animation : gradientShift 3s infinite alternate;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

.site-footer__top {
    background-color: #0d0d0e;
    padding         : 40px 0 30px;
    border-bottom   : 1px solid rgba(255, 255, 255, 0.1);
}

.site-footer__inner {
    padding: 0 20px;
}

.site-footer__contact-points {
    display        : flex;
    flex-wrap      : wrap;
    justify-content: space-around;
    gap            : 30px;
}

.site-footer__contact-points li {
    display    : flex;
    align-items: center;
    padding    : 15px 0;
    transition : transform 0.3s ease;
}

.site-footer__contact-points li:hover {
    transform: translateY(-5px);
}

.site-footer__contact-points li .icon {
    width          : 60px;
    height         : 60px;
    background     : linear-gradient(145deg, var(--primary-color), var(--accent-color));
    border-radius  : 50%;
    display        : flex;
    align-items    : center;
    justify-content: center;
    margin-right   : 20px;
    box-shadow     : 0 5px 15px rgba(241, 97, 34, 0.3);
    animation      : pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 176, 70, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(255, 176, 70, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 176, 70, 0);
    }
}

.site-footer__contact-points li .icon i {
    font-size: 24px;
    color    : white;
}

.site-footer__contact-points li .content h4 {
    font-size    : 18px;
    font-weight  : 600;
    margin-bottom: 5px;
    color        : var(--text-color);
}

.site-footer__contact-points li .content p,
.site-footer__contact-points li .content a {
    color          : var(--light-text);
    text-decoration: none;
    transition     : color 0.3s ease;
}

.site-footer__contact-points li .content a:hover {
    color: var(--primary-color);
}

.site-footer__middle {
    padding: 70px 0 50px;
}

.footer-widget__column {
    margin-bottom: 30px;
    animation    : fadeInUp 1s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity  : 0;
        transform: translateY(30px);
    }

    to {
        opacity  : 1;
        transform: translateY(0);
    }
}

.footer-widget__logo a {
    display      : inline-block;
    margin-bottom: 20px;
}

.footer-widget__logo img {
    max-height   : 120px;
    /* filter    : brightness(0) invert(1); */
}

.site-footer__text {
    color        : var(--light-text);
    line-height  : 1.6;
    margin-bottom: 20px;
}

.footer-widget__title {
    font-size     : 22px;
    font-weight   : 700;
    margin-bottom : 25px;
    position      : relative;
    padding-bottom: 10px;
    color         : var(--text-color);
}

.footer-widget__title::after {
    content      : '';
    position     : absolute;
    bottom       : 0;
    left         : 0;
    width        : 50px;
    height       : 3px;
    background   : linear-gradient(to right, var(--primary-color), var(--accent-color));
    border-radius: 3px;
}

.footer-widget__useful-links-list li {
    margin-bottom: 12px;
    list-style   : none;
}

.footer-widget__useful-links-list li a {
    color          : var(--light-text);
    text-decoration: none;
    transition     : all 0.3s ease;
    display        : inline-block;
    position       : relative;
}

.footer-widget__useful-links-list li a::before {
    content   : '→';
    position  : absolute;
    left      : -20px;
    opacity   : 0;
    transition: all 0.3s ease;
    color     : var(--primary-color);
}

.footer-widget__useful-links-list li a:hover {
    color    : var(--primary-color);
    transform: translateX(10px);
}

.footer-widget__useful-links-list li a:hover::before {
    opacity: 1;
    left   : -15px;
}








.site-footer__social {
    display: flex;
    gap    : 15px;
}

.site-footer__social a {
    width          : 40px;
    height         : 40px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    background     : rgba(255, 255, 255, 0.1);
    border-radius  : 50%;
    color          : var(--text-color);
    transition     : all 0.3s ease;
    text-decoration: none;
}

.site-footer__social a:hover {
    background: linear-gradient(to right, var(--primary-color), var(--accent-color));
    transform : translateY(-5px);
    box-shadow: 0 5px 15px rgba(241, 97, 34, 0.4);
}

.site-footer__bottom {
    background: rgba(0, 0, 0, 0.4);
    padding   : 25px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.site-footer__bottom-inner {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    flex-wrap      : wrap;
    gap            : 20px;
}

.site-footer__bottom-text,
.site-footer__bottom-text-two {
    color: var(--light-text);
}

.site-footer__bottom-text a,
.site-footer__bottom-text-two a {
    color          : var(--primary-color);
    text-decoration: none;
    transition     : all 0.3s ease;
}

.site-footer__bottom-text a:hover,
.site-footer__bottom-text-two a:hover {
    color          : var(--link-color);
    text-decoration: underline;
}

/* Animation for elements on scroll */
.animate-on-scroll {
    opacity   : 0;
    transform : translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.animate-on-scroll.animated {
    opacity  : 1;
    transform: translateY(0);
}

.copyright-text p {
    color: var(--text-color);
}

.copyright-text a {
    text-decoration: none;
    color          : var(--text-color);

}


/* footer section end here  */

/* testimonial section start here  */
.testimonial-section {
    padding         : 80px 0;
    background-color: #fff;
    position        : relative;
}


.section-title {
    /* text-align   : center; */
    margin-bottom: 60px;
}

.section-title span {
    color         : var(--primary-color);
    font-size     : 16px;
    font-weight   : 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display       : inline-block;
    background    : rgba(255, 176, 70, 0.1);
    padding       : 8px 20px;
    border-radius : 30px;
}

.section-title h2 {
    font-size  : 36px;
    font-weight: 700;
    color      : #1d263a;
    line-height: 1.3;
}

/* Owl Carousel Customization */
.testimonial-slider {
    position: relative;
}

.testimonial-box {
    background   : #fff;
    border-radius: 10px;
    padding      : 40px;
    margin       : 20px;
    box-shadow   : 0 5px 20px rgba(0, 0, 0, 0.05);
    transition   : all 0.3s ease;
    border       : 1px solid #eee;
}

.testimonial-box:hover {
    transform : translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.testimonial-icon {
    font-size    : 36px;
    color        : var(--accent-color);
    margin-bottom: 20px;
}

.testimonial-rating {
    color        : #ffc107;
    margin-bottom: 15px;
}

.testimonial-text h4 {
    font-size    : 20px;
    margin-bottom: 15px;
    color        : #1d263a;
}

.testimonial-text p {
    color        : #555;
   
    margin-bottom: 20px;
}

.client-info {
    display    : flex;
    align-items: center;
    margin-top : 20px;
}

.client-img {
    width        : 70px;
    height       : 70px;
    border-radius: 50%;
    overflow     : hidden;
    margin-right : 15px;
    border       : 3px solid var(--accent-color);
}

.client-img img {
    width     : 100%;
    height    : 100%;
    object-fit: cover;
}

.client-details h5 {
    font-size    : 18px;
    font-weight  : 600;
    margin-bottom: 5px;
    color        : #1d263a;
}

.client-details span {
    color    : var(--accent-color);
    font-size: 14px;
}

/* Navigation Arrows */
.owl-nav {
    position  : absolute;
    top       : -90px;
    right     : 0;
    margin-top: 0;
}

.owl-nav button {
    width        : 40px;
    height       : 40px;
    border-radius: 50% !important;
    background   : var(--accent-color) !important;
    color        : #fff !important;
    margin-left  : 10px;
    transition   : all 0.3s ease;
}

.owl-nav button:hover {
    background: var(--primary-color) !important;
}

/* Dots */
.owl-dots {
    margin-top: 30px;
    text-align: center;
}

.owl-dot span {
    width        : 12px;
    height       : 12px;
    margin       : 5px;
    background   : #ddd !important;
    display      : block;
    transition   : all 0.3s ease;
    border-radius: 50%;
}

.owl-dot.active span {
    background   : var(--accent-color) !important;
    width        : 30px;
    border-radius: 15px;
}



/* testimonial section end here  */

/* marquee start here  */
.marquee-section {
    padding-bottom: 25px;
}

.marquee-container {
    width: 100%;

    overflow: hidden;
    position: relative;
    margin  : 30px 0;
    padding : 20px 0;
}

.marquee {
    display  : flex;
    width    : max-content;
    animation: marquee-scroll 30s linear infinite;
}

.marquee:hover {
    animation-play-state: paused;
}

.service-item {
    display        : flex;
    align-items    : center;
    background     : rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius  : 12px;
    padding        : 15px 25px;
    margin         : 0 15px;
    min-width      : 250px;
    box-shadow     : 0 8px 20px rgba(0, 0, 0, 0.2);
    transition     : all 0.3s ease;
    border         : 1px solid rgba(255, 255, 255, 0.2);
}

.service-item:hover {
    transform : translateY(-5px) scale(1.03);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
}

.service-icon {
    font-size      : 24px;
    margin-right   : 15px;
    width          : 40px;
    height         : 40px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    background     : rgba(255, 255, 255, 0.2);
    border-radius  : 50%;
}

.service-text {
    font-size     : 18px;
    font-weight   : 600;
    letter-spacing: 0.5px;
}

.gradient-border {
    height       : 4px;
    width        : 100%;
    background   : linear-gradient(90deg, #ff8a00, #e52e71, #5a00cc);
    border-radius: 4px;
    margin       : 20px 0;

}

.controls {
    display   : flex;
    gap       : 15px;
    margin-top: 30px;
}

.btn {
    background     : rgba(255, 255, 255, 0.15);
    border         : none;
    padding        : 12px 25px;
    border-radius  : 50px;
    color          : white;
    font-weight    : 600;
    cursor         : pointer;
    transition     : all 0.3s ease;
    backdrop-filter: blur(5px);
    display        : flex;
    align-items    : center;
    gap            : 8px;
}

.btn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform : translateY(-2px);
}

.footer {
    margin-top: 40px;
    text-align: center;
    opacity   : 0.8;
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}



/* marquee end here  */