/*** Spinner Start ***/

#spinner {

    opacity: 0;

    visibility: hidden;

    transition: opacity .5s ease-out, visibility 0s linear .5s;

    z-index: 99999;

}



#spinner.show {

    transition: opacity .5s ease-out, visibility 0s linear 0s;

    visibility: visible;

    opacity: 1;

}

/*** Spinner End ***/



.back-to-top {

    position: fixed;

    right: 30px;

    bottom: 30px;

    transition: 0.5s;

    z-index: 99;

}





/*** Button Start ***/

.btn {

    font-weight: 600;

    transition: .5s;

}



.btn-square {

    width: 32px;

    height: 32px;

}



.btn-sm-square {

    width: 34px;

    height: 34px;

}



.btn-md-square {

    width: 40px;

    height: 40px;

}



.btn-lg-square {

    width: 46px;

    height: 46px;

}



.btn-xl-square {

    width: 56px;

    height: 56px;

}



.btn-square,

.btn-sm-square,

.btn-md-square,

.btn-lg-square,

.btn-xl-square {

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: normal;

}



.btn.btn-primary {

    color: var(--bs-white);

    border: none;

}



.btn.btn-primary:hover {

    background: var(--bs-dark);

    color: var(--bs-white);

}



.btn.btn-light {

    color: var(--bs-primary);

    border: none;

}



.btn.btn-light:hover {

    color: var(--bs-white);

    background: var(--bs-primary);

}



/*** Navbar Start ***/

.header-top .topbar .dropdown-toggle::after {

    border: none;

    content: "\f107";

    font-family: "Font Awesome 5 Free";

    font-weight: 600;

    vertical-align: middle;

    margin-left: 8px;

    color: var(--bs-primary);

}



.header-top .topbar .dropdown .dropdown-menu {

    transform: rotateX(0deg);

    visibility: visible;

    background: var(--bs-light);

    padding-top: 12px;

    border: 0;

    transition: .5s;

    opacity: 1;

}



.header-top {

    height: 125px;

    position: relative;

}



.header-top::after {

    content: "";

    position: absolute;

    overflow: hidden;

    width: 50%;

    height: 100%;

    top: 0;

    left: 0;

    background-color: #12224e;

    z-index: 1;

}



.header-top .container {

    position: relative;

    z-index: 999;

}



@media (min-width: 992px) {

    .header-top::before {

        content: "";

        position: absolute;

        overflow: hidden;

        width: 100%;

        height: 45px;

        top: 0;

        right: 0;

        background-color: #12224e;

        z-index: -1;

    }



    .navbar-brand-2 {

        display: none;

    }

}



@media (max-width: 991px) {

    .header-top {

        max-height: 80px;

    }



    .navbar {

        justify-content: space-between;

    }



    .header-top .container {

        max-height: 80px;

    }



    .navbar-brand {

        display: none;

    }



    .navbar-brand-2 {

        position: relative;

        overflow: hidden;

        width: 200px;

        height: 100%;

        padding: 0;

        display: flex;

        align-items: center;

        z-index: 99;

    }



    .navbar-brand-2::before {

        content: "";

        position: absolute;

        overflow: hidden;

        width: 100%;

        height: 600px;

        top: -200px;

        right: 18px;

        background-color: #f7f7f7;

        transform: rotate(-18deg);

        z-index: -1;

    }



    .navbar-brand-2::after {

        content: "";

        position: absolute;

        overflow: hidden;

        width: 5px;

        height: 600px;

        top: -200px;

        right: 60px;

        background: #1898ca;

        transform: rotate(-18deg);

        z-index: -1;

    }



    .navbar.navbar-light {

        height: 100%;

        padding: 0;

    }



    .navbar .navbar-collapse {

        margin-top: -20px;

    }



}



.nav-bar .navbar {

    height: 100%;

    background: #f7f7f7;

    position: relative;

    z-index: 9;

}



.navbar-light .navbar-brand img {

    max-height: 60px;

    transition: .5s;

}



.nav-bar .navbar-light .navbar-brand img {

    max-height: 50px;

}



.navbar .navbar-nav .nav-item .nav-link {

    padding: 0;

}
.mb-5
{
    margin-bottom: 1.5rem !important;
    color:#000;
    
}
.mb-11
{
    margin-bottom: 1.5rem !important;
    color:#fff;
    text-align: justify;
}


.navbar .navbar-nav .nav-item {

    display: flex;

    align-items: center;

    padding: 0;

    margin-right: 17px;

}



.navbar-light .navbar-nav .nav-item:hover,

.navbar-light .navbar-nav .nav-item.active,

.navbar-light .navbar-nav .nav-item:hover .nav-link,

.navbar-light .navbar-nav .nav-item.active .nav-link {

    color: var(--bs-primary);

}



@media (max-width: 991px) {

    .navbar {

        padding: 20px 0;

    }



    .navbar .navbar-nav .nav-link {

        padding: 0;

    }



    .navbar .navbar-nav .nav-item {

        display: flex;

        padding: 12px;

        flex-direction: column;

        justify-content: start;

        align-items: start;

    }



    .navbar .navbar-nav .nav-btn {

        display: flex;

        justify-content: start;

    }



    .navbar .navbar-nav {

        width: 100%;

        display: flex;

        margin-top: 20px;

        padding-bottom: 20px;

        margin-left: 50px;

        background: var(--bs-light);

    }



    .navbar .navbar-nav .nav-btn {

        display: flex;

        flex-direction: column;

    }



    .navbar .navbar-nav .nav-btn a.btn {

        margin-right: 15px;

    }



    .navbar.navbar-expand-lg .navbar-toggler {

        padding: 8px 15px;

        border: 1px solid #1898ca;

        color: #1898ca;

    }

}



.navbar .dropdown-toggle::after {

    border: none;

    content: "\f107";

    font-family: "Font Awesome 5 Free";

    font-weight: 600;

    vertical-align: middle;

    margin-left: 8px;

}



.dropdown .dropdown-menu .dropdown-item:hover {

    background: var(--bs-primary);

    color: var(--bs-white);

}



@media (min-width: 992px) {

    .nav-bar .navbar::before {

        position: absolute;

        content: "";

        width: 50px;

        height: 100%;

        top: 0;

        left: -49px;

        background: #f7f7f7;

    }



    .navbar .nav-btn {

        display: flex;

        align-items: center;

        justify-content: end;

    }



    .navbar .navbar-nav {

        width: 98%;

        display: flex;

        justify-content: center;

        align-items: center;

        background: var(--bs-light);

        border-radius: 10px;
        padding:10px;

    }

.text-underline {
    color:#1898ca;
    font-size:20px;
}

    .navbar .navbar-nav .nav-btn {

        width: 100%;

        display: flex;

        margin-left: auto;

    }



    .navbar .nav-item .dropdown-menu {

        display: block;

        visibility: hidden;

        top: 100%;

        transform: rotateX(-75deg);

        transform-origin: 0% 0%;

        border: 0;

        transition: .5s;

        opacity: 0;

    }



    .navbar .nav-item:hover .dropdown-menu {

        transform: rotateX(0deg);

        visibility: visible;

        margin-top: 19px;

        background: var(--bs-white);

        transition: .5s;

        opacity: 1;

    }



    .header-top .navbar-brand {

        position: relative;

        overflow: hidden;

        padding: 40px 50px 40px 0;

        z-index: 99;

    }

    

    .navbar-brand::before {

        content: "";

        position: absolute;

        overflow: hidden;

        width: 300px;

        height: 600px;

        top: -200px;

        right: 18px;

        background-color: #f7f7f7;

        transform: rotate(-18deg);

        z-index: -1;

    }

    

    .navbar-brand::after {

        content: "";

        position: absolute;

        overflow: hidden;

        width: 5px;

        height: 600px;

        top: -200px;

        right: 18px;

        background-color: #1898ca;

        transform: rotate(-18deg);

        z-index: -1;

    }

}

/*** Navbar End ***/





/*** Carousel Hero Header Start ***/

.hero-section {

    background-image: url(../img/carousel-1.jpg);

    background-repeat: no-repeat;

    background-position: center center;

    background-size: cover;

    width: 100%;

    height: 700px;

    display: flex;

    align-items: center;

    position: relative;

}



.hero-bg-half-1 {

    background-image: url(../img/header-2.jpg);

    clip-path: polygon(37% 0%, 100% 0%, 100% 100%, 0% 100%);

    filter: grayscale(10%);

    transform: scale(100% - 50%);

    background-position: center right;

    background-repeat: no-repeat;

    background-size: cover;

    position: absolute;

    width: 58%;

    height: 100%;

    right: 0;

    top: 0;

}



.hero-bg-half-2 {

    background-image: url(../img/header-1.jpg);

    clip-path: polygon(37% 0%, 100% 0%, 100% 100%, 0% 100%);

    filter: grayscale(10%);

    transform: scale(100% - 50%);

    background-position: center right;

    background-repeat: no-repeat;

    background-size: cover;

    position: absolute;

    width: 58%;

    height: 100%;

    right: 0;

    top: 0;

}



.hero-shape-1 {

    background-color: var(--bs-primary);

    width: 150px;

    height: 50%;

    position: absolute;

    left: 54%;

    top: 0;

    transform: translateY(-50%) skew(-26deg, 0deg);

    position: relative;

}



.hero-shape-1:before {

    background-color: var(--bs-dark);

    content: "";

    width: 50%;

    height: 80%;

    position: absolute;

    right: 0;

    top: 0;

}



.hero-shape-2 {

    background-color: var(--bs-dark);

    width: 150px;

    height: 50%;

    position: absolute;

    right: -43%;

    bottom: 0;

    transform: translateY(50%) skew(-25deg, 0deg);

    position: relative;

    z-index: 1;

}



.hero-shape-2::after {

    background-color: var(--bs-primary);

    content: "";

    width: 75px;

    height: 80%;

    position: absolute;

    right: 0;

    bottom: 0;

}



/*** Carousel Hero Header Start ***/

.header-carousel .header-carousel-item {

    height: 700px;

}



.header-carousel .owl-nav .owl-prev,

.header-carousel .owl-nav .owl-next {

    position: absolute;

    width: 60px;

    height: 60px;

    background: var(--bs-white);

    color: var(--bs-primary);

    font-size: 26px;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: 0.5s;

}



.header-carousel .owl-nav .owl-prev {

    bottom: 30px;

    left: 0;

}

.header-carousel .owl-nav .owl-next {

    bottom: 30px;

    right: 0;

}



.header-carousel .owl-nav .owl-prev:hover,

.header-carousel .owl-nav .owl-next:hover {

    box-shadow: inset 0 0 65px 0 var(--bs-primary);

    color: var(--bs-dark);

}



.header-carousel .header-carousel-item .carousel-caption {

    position: absolute;

    width: 100%;

    height: 100%;

    left: 0;

    bottom: 0;

    background: rgba(0, 0, 0, .2);

    display: flex;

    align-items: center;

    z-index: 9;

}



@media (max-width: 991px) {

    .header-carousel .header-carousel-item .carousel-caption {

        padding-top: 45px;

    }



    .header-carousel.owl-carousel,

    .header-carousel .header-carousel-item {

        height: 200px;

    }

}

/*** Carousel Hero Header End ***/





/*** Single Page Hero Header Start ***/

.bg-breadcrumb {

    position: relative;

    overflow: hidden;

    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../img/banner-img.jpg);

    background-position: center center;

    background-repeat: no-repeat;

    background-size: cover;

    padding: 70px 0 60px 0;

    transition: 0.5s;

}



.bg-breadcrumb .breadcrumb {

    position: relative;

}



.bg-breadcrumb .breadcrumb .breadcrumb-item a {

    color: var(--bs-white);

}
.bg-breadcrumb {

    position: relative;

    overflow: hidden;

    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../img/banner-img.jpg);

    background-position: center center;

    background-repeat: no-repeat;

    background-size: cover;

    padding: 70px 0 60px 0;

    transition: 0.5s;

}



.bg-breadcrumb .breadcrumb {

    position: relative;

}



.bg-breadcrumb .breadcrumb .breadcrumb-item a {

    color: var(--bs-white);

}

/*** Single Page Hero Header End ***/

/*** Single Page Hero Header Start ***/


.bg-gallery {

    position: relative;

    overflow: hidden;

    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../img/gallery-img.jpg);

    background-position: center center;

    background-repeat: no-repeat;

    background-size: cover;

    padding: 70px 0 60px 0;

    transition: 0.5s;

}
.bg-branding {

    position: relative;

    overflow: hidden;

    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../img/branding-img.jpg);

    background-position: center center;

    background-repeat: no-repeat;

    background-size: cover;

    padding: 190px 0 60px 0;

    transition: 0.5s;

}
.bg-contact {

    position: relative;

    overflow: hidden;

    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../img/contact-img.jpg);

    background-position: center center;

    background-repeat: no-repeat;

    background-size: cover;

    padding: 190px 0 60px 0;

    transition: 0.5s;

}

.bg-offsat {

    position: relative;

    overflow: hidden;

    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../img/banner-img.jpg);

    background-position: center center;

    background-repeat: no-repeat;

    background-size: cover;

    padding: 70px 0 60px 0;

    transition: 0.5s;

}

.bg-printing {

    position: relative;

    overflow: hidden;

    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../img/printing-img.jpg);

    background-position: center center;

    background-repeat: no-repeat;

    background-size: cover;

    padding: 200px 0 60px 0;

    transition: 0.5s;

}


.bg-breadcrumb .breadcrumb {

    position: relative;

}


.bg-printing {

    position: relative;

    overflow: hidden;

    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../img/printing-img.jpg);

    background-position: center center;

    background-repeat: no-repeat;

    background-size: cover;

    padding: 200px 0 60px 0;

    transition: 0.5s;

}



.bg-breadcrumb .breadcrumb {

    position: relative;

}


.bg-breadcrumb .breadcrumb .breadcrumb-item a {

    color: var(--bs-white);


.bg.contact {

    position: relative;

}



.bg.contact .contact-item a {

    color: var(--bs-white);

}

/*** Single Page Hero Header End ***/

/*** Service Start ***/

.service .nav .nav-item {

    width: 75%;

    border: 1px solid var(--bs-primary);

    background: var(--bs-light);

}

.bg-contact {

    position: relative;

    overflow: hidden;

    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../img/contact-img.jpg);

    background-position: center center;

    background-repeat: no-repeat;

    background-size: cover;

    padding: 70px 0 60px 0;

    transition: 0.5s;

}



.bg.gallery  {

    position: relative;

}



.bg.gallery  .contact-item a {

    color: var(--bs-white);

}

/*** Single Page Hero Header End ***/

/*** Service Start ***/

.service .nav .nav-item {

    width: 75%;

    border: 1px solid var(--bs-primary);

    background: var(--bs-light);

}

.service .nav .nav-item a {

    display: flex;

    justify-content: center;

}





.owl-stage-outer {

    margin-right: -1px;

}

.service .nav-item a.active {

    background: #1898ca;

}



.service .nav-item a span {

    color: var(--bs-dark);

}



.service .nav-item a.active span {

    color: var(--bs-white);

}



.service-carousel .owl-nav .owl-prev,

.service-carousel .owl-nav .owl-next {

    position: absolute;

    padding: 10px 35px;

    border: 1px solid var(--bs-primary);

    color: var(--bs-dark);

    background: var(--bs-light);

    transition: 0.5s;

}



.service-carousel .owl-nav .owl-prev:hover,

.service-carousel .owl-nav .owl-next:hover {

    background: var(--bs-primary);

    color: var(--bs-white);

}



@media (min-width: 992px) {

    .service-carousel .owl-nav .owl-prev {

        top: 0;

        left: -60px;

    }

    

    .service-carousel .owl-nav .owl-next {

        bottom: 0;

        left: -115px;

    }

}



@media (max-width: 991px) {

    .owl-stage-outer {

        margin-bottom: 70px;

    }

    .service-carousel .owl-nav .owl-prev {

        bottom: -70px;

        left: 0;

    }



    .service-carousel .owl-nav .owl-next {

        bottom: -70px;

        right: 0;

    }



    .service .nav {

        display: flex;

        justify-content: center;

    }

}

/*** Service End ***/



/*** Team Start ***/

.team .team-item .team-img {

    position: relative;

    overflow: hidden;

}



.team .team-item .team-img img {

    transition: 0.5s;

}



.team .team-item:hover .team-img img {

    transform: scale(1.1);

}



.team .team-item .team-img .team-icon {

    position: absolute;

    bottom: 20px; right: -100%;

    z-index: 9;

    transition: 0.5s;

}



.team .team-item:hover .team-img .team-icon {

    right: 25px;

}



.team .team-item .team-img::after {

    content: "";

    position: absolute;

    width: 100%;

    height: 0;

    top: 0;

    left: 0;

    background: rgba(246, 138, 10, .2);

    transition: 0.5s;

    z-index: 1;

}



.team .team-item:hover .team-img::after {

    height: 100%;

}



.team .team-item .team-content {

    transition: 0.5s;

}



.team .team-item:hover .team-content {

    box-shadow: 0 0 20px rgba(0, 0, 0, .2);

}

/*** Team End ***/



/*** Testimonial Start ***/

.testimonial-carousel .owl-stage-outer {

    margin-right: -1px;

}



.testimonial .testimonial-item {

    position: relative;

    margin-top: 35px;

}



.testimonial .testimonial-item .customer-text {

    border: 1px solid var(--bs-primary);

    border-top: none;

}



.testimonial .testimonial-item .testimonial-quote {

    position: absolute;

    width: 50px;

    height: 50px;

    top: 0;

    right: 25px;

    transform: translateY(-50%);

    color: var(--bs-dark);

    background: var(--bs-primary);

    display: flex;

    align-items: center;

    justify-content: center;

}



.testimonial .testimonial-item .testimonial-inner {

    display: flex;

    align-items: center;

    background: var(--bs-white);

}



.testimonial .testimonial-item .testimonial-inner img {

    width: 100px; 

    height: 100px;

    border: 2px solid var(--bs-primary);

}



.testimonial-carousel .owl-dots {

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

}



.testimonial-carousel .owl-dots .owl-dot {

    width: 30px;

    height: 30px;

    margin: 30px 10px 0 10px;

    background: var(--bs-white);

    transition: 0.5s;

}



@media (max-width: 991px) {

    .testimonial-carousel .owl-dots .owl-dot {

        margin: 0 10px 0 10px;

    }

}



.testimonial-carousel .owl-dots .owl-dot.active {

    width: 30px;

    height: 30px;

    background: var(--bs-primary);

    transition: 0.5s;

}



.testimonial-carousel .owl-dots .owl-dot span {

    position: relative;

    margin-top: 50%;

    margin-left: 50%;

    transform: translate(-50%, -50%);

    margin-right: -1px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

}



.testimonial-carousel .owl-dots .owl-dot.active span::after {

    background: var(--bs-white);

}



.testimonial-carousel .owl-dots .owl-dot span::after {

    content: "";

    width: 15px;

    height: 15px;

    position: absolute;

    top: 50%;

    left: 0;

    transform: translateY(-50%);

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    background: var(--bs-primary);

    transition: 0.5s;

}

/*** Testimonial End ***/



/*** Footer Start ***/

.footer {

    background: var(--bs-dark);

}



.footer .footer-item a {

    line-height: 35px;

    color: var(--bs-white);

    transition: 0.5s;

}



.footer .footer-item p {

    line-height: 35px;

}



.footer .footer-item a:hover {

    letter-spacing: 0px;

    color: var(--bs-primary);

}



.footer .footer-item .footer-btn a {

    transition: 0.5s;

}



.footer .footer-item .footer-btn a:hover {

    background: var(--bs-white);

}



.footer .footer-item .footer-btn a:hover {

    color: var(--bs-primary);

}

/*** Footer End ***/



/*** copyright Start ***/

.copyright {

    border-top: 1px solid rgba(255, 255, 255, 0.08);

    background: var(--bs-dark);

}

/*** copyright end ***/











       /* ========================================

           STATISTICS SECTION

        ======================================== */



        .stats-section {

            width: 100%;

            padding: 48px 20px;

            background: #ffffff;

        }





        /* ========================================

           CONTAINER

        ======================================== */



        .stats-container {

            width: 100%;

            max-width: 1296px;

            height: 150px;



            margin: 0 auto;



            display: grid;

            grid-template-columns: repeat(3, 1fr);



            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10);

        }





        /* ========================================

           STAT ITEM

        ======================================== */



        .stat-item {

            display: flex;

            align-items: center;



            padding: 0 70px;



            gap: 24px;

        }





        /* BLUE BACKGROUND */



        .stat-item.blue {

            background: #1898ca;

            color: #ffffff;

        }





        /* LIGHT BLUE BACKGROUND */



        .stat-item.light {

            background: #2d667a;

            color: #061b51;

        }





        /* ========================================

           ICON BOX

        ======================================== */



        .stat-icon {

            width: 60px;

            height: 60px;



            min-width: 60px;



            display: flex;

            align-items: center;

            justify-content: center;



            background: #ffffff;



            border-radius: 2px;

        }





        /* Light item icon */



        .stat-item.light .stat-icon {

            background: #1898ca;

        }





        /* ========================================

           SVG ICON

        ======================================== */



        .stat-icon svg {

            width: 22px;

            height: 22px;



            fill: #f68a0a;

        }





        .stat-item.light .stat-icon svg {

            fill: #ffffff;

        }





        /* ========================================

           CONTENT

        ======================================== */



        .stat-content {

            display: flex;

            flex-direction: column;

            justify-content: center;



            white-space: nowrap;

        }





        /* ========================================

           TITLE

        ======================================== */



        .stat-title {

            font-size: 20px;

            line-height: 1.25;



            font-weight: 400;



            margin-bottom: 4px;

        }





        /* ========================================

           NUMBER

        ======================================== */



        .stat-number {

            font-size: 40px;

            line-height: 1;



            font-weight: 700;



            letter-spacing: 0.5px;

        }





        /* Light blue item */



        .stat-item.light .stat-title {

            color: #fff4e3;

        }



        .stat-item.light .stat-number {

            color: #061b51;

        }





        /* ========================================

           TABLET

        ======================================== */



        @media (max-width: 1200px) {



            .stat-item {

                padding: 0 40px;

            }



            .stat-number {

                font-size: 36px;

            }



            .stat-title {

                font-size: 18px;

            }



            .stat-icon {

                width: 55px;

                height: 55px;

                min-width: 55px;

            }

        }





        /* ========================================

           TABLET / SMALL DESKTOP

        ======================================== */



        @media (max-width: 900px) {



            .stats-container {

                height: auto;



                grid-template-columns: 1fr;

            }



            .stat-item {

                min-height: 130px;



                padding: 30px 50px;

            }

        }





        /* ========================================

           MOBILE

        ======================================== */



        @media (max-width: 576px) {



            .stats-section {

                padding: 30px 15px;

            }



            .stat-item {

                min-height: 120px;



                padding: 25px 25px;



                gap: 18px;

            }



            .stat-icon {

                width: 55px;

                height: 55px;



                min-width: 55px;

            }



            .stat-title {

                font-size: 17px;

            }



            .stat-number {

                font-size: 32px;

            }

        }



                /* =========================================

           COLORS

        ========================================= */



        :root {

            --orange: #f68a0a;

            --black: #0b0b0b;

            --white: #ffffff;

            --light-orange: #fff4e3;

            --text-gray: #64748b;

            --border: #e2e8f0;

        }





        /* =========================================

           SERVICES SECTION

        ========================================= */



        .services-section {

            width: 100%;

            padding: 70px 20px;

            background: #ffffff;

        }





        .services-container {

            width: 100%;

            max-width: 1296px;

            margin: 0 auto;

        }





        /* =========================================

           SERVICES GRID

        ========================================= */



        .services-grid {

            display: grid;



            grid-template-columns:

                repeat(4, minmax(0, 1fr));



            gap: 24px;

        }





        /* =========================================

           SERVICE CARD

        ========================================= */



        .service-card {

            position: relative;



            background: var(--white);



            border: 1px solid var(--border);



            border-radius: 16px;



            padding: 16px;



            overflow: hidden;



            transition:

                transform 0.3s ease,

                box-shadow 0.3s ease,

                border-color 0.3s ease;

        }





        .service-card:hover {

            transform: translateY(-7px);



            border-color: var(--orange);



            box-shadow:

                0 15px 35px rgba(11, 11, 11, 0.10);

        }





        /* =========================================

           CARD TOP

        ========================================= */



        .service-top {

            min-height: 72px;



            display: flex;



            align-items: center;



            justify-content: space-between;



            gap: 15px;



            margin-bottom: 16px;

        }





        /* =========================================

           ICON BOX

        ========================================= */



        .service-icon {

            width: 76px;

            height: 76px;



            flex: 0 0 76px;



            display: flex;



            align-items: center;

            justify-content: center;



            background: var(--orange);



            border-radius: 12px;



            transition:

                background 0.3s ease,

                transform 0.3s ease;

        }





        .service-card:hover .service-icon {

            background: var(--black);



            transform: scale(1.04);

        }





        .service-icon svg {

            width: 42px;

            height: 42px;



            fill: none;



            stroke: var(--white);



            stroke-width: 1.8;



            stroke-linecap: round;

            stroke-linejoin: round;

        }





        /* =========================================

           READ MORE BUTTON

        ========================================= */



        .read-more {

            min-height: 48px;



            padding: 0 20px;



            display: inline-flex;



            align-items: center;

            justify-content: center;



            gap: 10px;



            color: var(--black);



            background: var(--light-orange);



            border: 1px solid #fbd7a6;



            border-radius: 30px;



            font-size: 16px;



            font-weight: 500;



            white-space: nowrap;



            transition:

                background 0.3s ease,

                color 0.3s ease,

                border-color 0.3s ease;

        }





        .read-more-icon {

            width: 24px;

            height: 24px;



            display: flex;



            align-items: center;

            justify-content: center;



            border: 2px solid var(--orange);



            border-radius: 50%;



            color: var(--orange);



            font-size: 14px;



            font-weight: bold;



            transition:

                background 0.3s ease,

                color 0.3s ease;

        }





        .service-card:hover .read-more {

            background: var(--orange);



            border-color: var(--orange);



            color: var(--white);

        }





        .service-card:hover .read-more-icon {

            background: var(--white);



            color: var(--orange);



            border-color: var(--white);

        }





        /* =========================================

           IMAGE

        ========================================= */



        .service-image {

            width: 100%;



            height: 171px;



            overflow: hidden;



            border-radius: 12px;



            margin-bottom: 20px;



            background: #f1f5f9;

        }





        .service-image img {

            width: 100%;

            height: 100%;



            object-fit: cover;



            transition:

                transform 0.5s ease;

        }





        .service-card:hover .service-image img {

            transform: scale(1.06);

        }





        /* =========================================

           TITLE

        ========================================= */



        .service-title {

            margin-bottom: 12px;



            font-size: 25px;



            line-height: 1.25;



            font-weight: 700;



            color: var(--black);

        }





        .service-title .highlight {

            color: var(--orange);

        }





        /* =========================================

           DESCRIPTION

        ========================================= */



        .service-description {

            margin: 0;



            font-size: 16px;



            line-height: 1.6;



            color: var(--text-gray);

        }





        /* =========================================

           TABLET

        ========================================= */



        @media (max-width: 1100px) {



            .services-grid {

                grid-template-columns:

                    repeat(2, minmax(0, 1fr));

            }



            .service-image {

                height: 210px;

            }



        }





        /* =========================================

           MOBILE

        ========================================= */



        @media (max-width: 650px) {



            .services-section {

                padding: 45px 15px;

            }



            .services-grid {

                grid-template-columns: 1fr;



                gap: 20px;

            }



            .service-card {

                padding: 14px;

            }



            .service-top {

                min-height: 65px;

            }



            .service-icon {

                width: 65px;

                height: 65px;



                flex-basis: 65px;

            }



            .service-icon svg {

                width: 36px;

                height: 36px;

            }



            .read-more {

                min-height: 44px;



                padding: 0 15px;



                font-size: 14px;

            }



            .service-image {

                height: 220px;

            }



            .service-title {

                font-size: 23px;

            }



        }





        /* =========================================

           SMALL MOBILE

        ========================================= */



        @media (max-width: 400px) {



            .service-top {

                gap: 10px;

            }



            .service-icon {

                width: 60px;

                height: 60px;



                flex-basis: 60px;

            }



            .read-more {

                padding: 0 12px;

            }



            .service-image {

                height: 200px;

            }



        }

        .footer-links {

    width: 100%;

}



.footer-links h4 {

    margin: 0 0 22px 0;



    color: #ffffff;



    font-size: 24px;

    line-height: 1.2;



    font-weight: 600;

}



.footer-links ul {

    list-style: none;



    margin: 0;

    padding: 0;

}



.footer-links ul li {

    margin: 0 0 14px 0;

    padding: 0;

}



.footer-links ul li a {

    position: relative;



    display: inline-flex;

    align-items: center;



    color: #71808a;



    font-size: 16px;

    line-height: 1.4;



    text-decoration: none;



    transition: all 0.3s ease;

}



/* Arrow */

.footer-links ul li a::before {

    content: "›";



    display: inline-block;



    margin-right: 12px;



    color: #71808a;



    font-size: 27px;

    line-height: 14px;



    font-weight: 400;



    transition: all 0.3s ease;

}





/* First link */

.footer-links ul li:first-child a {

    color: #ffffff;

}



.footer-links ul li:first-child a::before {

    color: #ffffff;

}





/* Hover */

.footer-links ul li a:hover {

    color: #f68a0a;



    padding-left: 4px;

}



.footer-links ul li a:hover::before {

    color: #f68a0a;

}



       /* ========================================
           STATISTICS SECTION
        ======================================== */

        .stats-section {
            width: 100%;
            padding: 48px 20px;
            background: #ffffff;
        }


        /* ========================================
           CONTAINER
        ======================================== */

        .stats-container {
            width: 100%;
            max-width: 1296px;
            height: 150px;

            margin: 0 auto;

            display: grid;
            grid-template-columns: repeat(3, 1fr);

            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10);
        }


        /* ========================================
           STAT ITEM
        ======================================== */

        .stat-item {
            display: flex;
            align-items: center;

            padding: 0 70px;

            gap: 24px;
        }


        /* BLUE BACKGROUND */

        .stat-item.blue {
            background: #1898ca;
            color: #ffffff;
        }


        /* LIGHT BLUE BACKGROUND */

        .stat-item.light {
            background: #eaf8fd;
            color: #061b51;
        }


        /* ========================================
           ICON BOX
        ======================================== */

        .stat-icon {
            width: 60px;
            height: 60px;

            min-width: 60px;

            display: flex;
            align-items: center;
            justify-content: center;

            background: #ffffff;

            border-radius: 2px;
        }


        /* Light item icon */

        .stat-item.light .stat-icon {
            background: #1898ca;
        }


        /* ========================================
           SVG ICON
        ======================================== */

        .stat-icon svg {
            width: 22px;
            height: 22px;

            fill: #1898ca;
        }


        .stat-item.light .stat-icon svg {
            fill: #ffffff;
        }


        /* ========================================
           CONTENT
        ======================================== */

        .stat-content {
            display: flex;
            flex-direction: column;
            justify-content: center;

            white-space: nowrap;
        }


        /* ========================================
           TITLE
        ======================================== */

        .stat-title {
            font-size: 20px;
            line-height: 1.25;

            font-weight: 400;

            margin-bottom: 4px;
        }


        /* ========================================
           NUMBER
        ======================================== */

        .stat-number {
            font-size: 40px;
            line-height: 1;

            font-weight: 700;

            letter-spacing: 0.5px;
        }


        /* Light blue item */

        .stat-item.light .stat-title {
            color: #fff4e3;
        }

        .stat-item.light .stat-number {
            color: #061b51;
        }


        /* ========================================
           TABLET
        ======================================== */

        @media (max-width: 1200px) {

            .stat-item {
                padding: 0 40px;
            }

            .stat-number {
                font-size: 36px;
            }

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

            .stat-icon {
                width: 55px;
                height: 55px;
                min-width: 55px;
            }
        }


        /* ========================================
           TABLET / SMALL DESKTOP
        ======================================== */

        @media (max-width: 900px) {

            .stats-container {
                height: auto;

                grid-template-columns: 1fr;
            }

            .stat-item {
                min-height: 130px;

                padding: 30px 50px;
            }
        }


        /* ========================================
           MOBILE
        ======================================== */

        @media (max-width: 576px) {

            .stats-section {
                padding: 30px 15px;
            }

            .stat-item {
                min-height: 120px;

                padding: 25px 25px;

                gap: 18px;
            }

            .stat-icon {
                width: 55px;
                height: 55px;

                min-width: 55px;
            }

            .stat-title {
                font-size: 17px;
            }

            .stat-number {
                font-size: 32px;
            }
        }

                /* =========================================
           COLORS
        ========================================= */

        :root {
            --orange: #1898ca;
            --black: #0b0b0b;
            --white: #ffffff;
            --light-orange: #fff4e3;
            --text-gray: #64748b;
            --border: #e2e8f0;
        }


        /* =========================================
           SERVICES SECTION
        ========================================= */

        .services-section {
            width: 100%;
            padding: 70px 20px;
            background: #ffffff;
        }


        .services-container {
            width: 100%;
            max-width: 1296px;
            margin: 0 auto;
        }


        /* =========================================
           SERVICES GRID
        ========================================= */

        .services-grid {
            display: grid;

            grid-template-columns:
                repeat(4, minmax(0, 1fr));

            gap: 24px;
        }


        /* =========================================
           SERVICE CARD
        ========================================= */

        .service-card {
            position: relative;

            background: var(--white);

            border: 1px solid var(--border);

            border-radius: 16px;

            padding: 16px;

            overflow: hidden;

            transition:
                transform 0.3s ease,
                box-shadow 0.3s ease,
                border-color 0.3s ease;
        }


        .service-card:hover {
            transform: translateY(-7px);

            border-color: var(--orange);

            box-shadow:
                0 15px 35px rgba(11, 11, 11, 0.10);
        }


        /* =========================================
           CARD TOP
        ========================================= */

        .service-top {
            min-height: 72px;

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 15px;

            margin-bottom: 16px;
        }


        /* =========================================
           ICON BOX
        ========================================= */

        .service-icon {
            width: 76px;
            height: 76px;

            flex: 0 0 76px;

            display: flex;

            align-items: center;
            justify-content: center;

            background: var(--orange);

            border-radius: 12px;

            transition:
                background 0.3s ease,
                transform 0.3s ease;
        }


        .service-card:hover .service-icon {
            background: var(--black);

            transform: scale(1.04);
        }


        .service-icon svg {
            width: 42px;
            height: 42px;

            fill: none;

            stroke: var(--white);

            stroke-width: 1.8;

            stroke-linecap: round;
            stroke-linejoin: round;
        }


        /* =========================================
           READ MORE BUTTON
        ========================================= */

        .read-more {
            min-height: 48px;

            padding: 0 20px;

            display: inline-flex;

            align-items: center;
            justify-content: center;

            gap: 10px;

            color: var(--black);

            background: var(--light-orange);

            border: 1px solid #fbd7a6;

            border-radius: 30px;

            font-size: 16px;

            font-weight: 500;

            white-space: nowrap;

            transition:
                background 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease;
        }


        .read-more-icon {
            width: 24px;
            height: 24px;

            display: flex;

            align-items: center;
            justify-content: center;

            border: 2px solid var(--orange);

            border-radius: 50%;

            color: var(--orange);

            font-size: 14px;

            font-weight: bold;

            transition:
                background 0.3s ease,
                color 0.3s ease;
        }


        .service-card:hover .read-more {
            background: var(--orange);

            border-color: var(--orange);

            color: var(--white);
        }


        .service-card:hover .read-more-icon {
            background: var(--white);

            color: var(--orange);

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


        /* =========================================
           IMAGE
        ========================================= */

        .service-image {
            width: 100%;

            height: 171px;

            overflow: hidden;

            border-radius: 12px;

            margin-bottom: 20px;

            background: #f1f5f9;
        }


        .service-image img {
            width: 100%;
            height: 100%;

            object-fit: cover;

            transition:
                transform 0.5s ease;
        }


        .service-card:hover .service-image img {
            transform: scale(1.06);
        }


        /* =========================================
           TITLE
        ========================================= */

        .service-title {
            margin-bottom: 12px;

            font-size: 25px;

            line-height: 1.25;

            font-weight: 700;

            color: var(--black);
        }


        .service-title .highlight {
            color: var(--orange);
        }


        /* =========================================
           DESCRIPTION
        ========================================= */

        .service-description {
            margin: 0;

            font-size: 16px;

            line-height: 1.6;

            color: var(--text-gray);
        }


        /* =========================================
           TABLET
        ========================================= */

        @media (max-width: 1100px) {

            .services-grid {
                grid-template-columns:
                    repeat(2, minmax(0, 1fr));
            }

            .service-image {
                height: 210px;
            }

        }


        /* =========================================
           MOBILE
        ========================================= */

        @media (max-width: 650px) {

            .services-section {
                padding: 45px 15px;
            }

            .services-grid {
                grid-template-columns: 1fr;

                gap: 20px;
            }

            .service-card {
                padding: 14px;
            }

            .service-top {
                min-height: 65px;
            }

            .service-icon {
                width: 65px;
                height: 65px;

                flex-basis: 65px;
            }

            .service-icon svg {
                width: 36px;
                height: 36px;
            }

            .read-more {
                min-height: 44px;

                padding: 0 15px;

                font-size: 14px;
            }

            .service-image {
                height: 220px;
            }

            .service-title {
                font-size: 23px;
            }

        }


        /* =========================================
           SMALL MOBILE
        ========================================= */

        @media (max-width: 400px) {

            .service-top {
                gap: 10px;
            }

            .service-icon {
                width: 60px;
                height: 60px;

                flex-basis: 60px;
            }

            .read-more {
                padding: 0 12px;
            }

            .service-image {
                height: 200px;
            }

        }
        .footer-links {
    width: 100%;
}