:root {
    --primary: #0361A7;
    --bg-primary: #E6F5FF;
    --primary-rgb: 3, 97, 167;
}

html {
    scroll-behavior: smooth;
}

html,
body {
    height: 100%;
}

body {
    line-height: 1.6;
    font-size: 16px;
    font-family: "Sora", sans-serif;
    font-weight: 400;
    color: #0C0C0C;
    position: relative;
    background-color: #fff;
    overflow-x: hidden;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

@font-face {
    font-display: swap;
}

a {
    text-decoration: none;
    color: #0C0C0C;
    -webkit-transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
    -ms-transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.7s ease-in-out;
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    --bs-gutter-x: 2.3rem;
}

h1,
h2,
h3,
h4,
h5 {
    font-weight: 400;
}

p {
    font-size: 16px;
}

.form-control,
.form-select {
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    border-radius: 10px;
    border: 1px solid #e7e7e7;
    background-color: #fff;
    color: #000;
    padding: 15px 20px;
}

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

.form-control:focus,
.form-select:focus {
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    border-color: var(--primary);
    background-color: #fff;
    color: #000;
}

button:focus {
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    outline: none;
    border: none;

}

.py-60 {
    padding-top: 60px;
    padding-bottom: 60px;
}

.py-80 {
    padding-top: 80px;
    padding-bottom: 80px;
}

.pb-60 {
    padding-bottom: 60px;
}

.py-100 {
    padding-top: 250px;
    padding-bottom: 50px;
}

.py-30 {
    padding-top: 30px;
    padding-bottom: 30px;
}

.pt-60 {
    padding-top: 60px;
}

.pt-20 {
    padding-top: 20px;
}

.py-20 {
    padding-top: 20px;
    padding-bottom: 20px;
}
.ps-100 {
    padding-left: 100px;
}
.pe-100 {
    padding-right: 100px;
}
@media screen and (max-width: 768px) {
    .ps-100 {
        padding-left: 0;
    }
    .pe-100 {
        padding-right: 0;
    }
}
.custom-list ul li {
    position: relative;
    padding-left: 30px;
    font-size: 16px;
    margin-bottom: 20px;
}

.custom-list ul li::before {
    position: absolute;
    content: "\f061";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--primary);
    font-size: 16px;
    top: 0;
    left: -0;
}

.primary-btn {
    position: relative;
    color: var(--primary);
    background-color: transparent;
    border: 1px solid var(--primary);
    padding: 10px 20px;
    text-align: center;
    display: inline-block;
    font-weight: 500;
    overflow: hidden;
    border-radius: 10px;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    z-index: 2;
}
.primary-btn::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: var(--primary);
    z-index: -1;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

.primary-btn:hover::before {
    width: 100%;
}

.primary-btn:hover {
    color: #fff;
}

/* Section Title */
.section-title {
    position: relative;
    margin-bottom: 30px;
    z-index: 2;
}

.section-title .sub-title {
    position: relative;
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 10px;
}

.section-title .main-title {
    font-size: 35px;
    font-weight: 600;
    color: #000;
    margin-bottom: 15px;
}

.section-title .main-title.text-md {
    font-size: 28px;
}

.section-title .description p {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 0;
}

@media screen and (max-width: 1024px) {
    .section-title .main-title {
        font-size: 28px;
    }
}

@media screen and (max-width: 768px) {
    .section-title .main-title {
        font-size: 24px;
    }
}

/* Image effect */
.img-shine {
    position: relative;
    overflow: hidden;
}

.img-shine:after {
    position: absolute;
    content: "";
    display: block;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.25)));
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.25) 100%);
    -webkit-transform: skewX(-20deg);
    -ms-transform: skewX(-20deg);
    -o-transform: skewX(-20deg);
    -moz-transform: skew(-20deg);
    transform: skewX(-20deg);
    z-index: 2;
}

.img-shine:hover:after {
    -webkit-animation: imgShine 1.5s;
    animation: imgShine 1.5s;
}

@-webkit-keyframes imgShine {
    100% {
        inset-inline-start: 125%
    }
}

@keyframes imgShine {
    100% {
        inset-inline-start: 125%
    }
}


/*=============================================
   - MAIN HEADER      
=============================================*/

.main-header {
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    right: 0;
	transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
.main-header.fixed-header {
    position: fixed;
    background: #ffffff75;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
.main-header::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 230px;
    height: 80px;
    background-color: #fff;
    z-index: -1;
}
.main-header.fixed-header::before {
	display: none;
}
.main-header .navbar {
    position: relative;
    background: transparent;
    padding: 0;
}
.main-header .navbar .navbar-nav {
    align-items: center;
}
.main-header .navbar .navbar-brand {
    padding: 0;
    margin: 0;
}
.main-header .navbar .navbar-brand:focus-visible {
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    outline: none;
}

.main-header .navbar .nav-link {
    position: relative;
    color: #FFF;
    font-size: 18px;
    font-weight: 500;
    text-transform: capitalize;
    padding: 20px 28px;
    display: block;
    background: -webkit-linear-gradient(left, var(--primary), var(--primary) 50%, #fff 50%);
    background: linear-gradient(to right, var(--primary), var(--primary) 50%, #fff 50%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    background-position: 100%;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -moz-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
}
.main-header.fixed-header .navbar .nav-link {
	color: #000;
	 background: -webkit-linear-gradient(left, var(--primary), var(--primary) 50%, #000 50%);
    background: linear-gradient(to right, var(--primary), var(--primary) 50%, #000 50%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    background-position: 100%;
}
.main-header .navbar .nav-link:focus-visible {
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    outline: none;
}

.main-header .navbar .nav-link:hover {
    background-position: 0 100%;
    border-color: var(--primary);
}

.main-header .navbar .nav-link.active {
    background-position: 0 100%;
    border-color: var(--primary);
}

.main-header .navbar .nav-link .arrow-down-icon {
    margin-left: 8px;
    font-size: 14px;
}

.main-header .navbar .navbar-nav .dropdown-menu {
    border-radius: 0px;
    margin-top: -8px;
    padding: 0;
    background-color: #141414;
    -webkit-box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
    -moz-box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
    box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
}

.main-header .navbar .navbar-nav .dropdown-toggle::after {
    display: none;
}
.main-header .navbar .navbar-nav .dropdown-menu::after {
    position: absolute;
    top: -6px;
    left: 16px;
    content: '';
    width: 13px;
    height: 13px;
    background: #141414;
    border-top: 1px solid #111;
    border-left: 1px solid #111;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.main-header .navbar .navbar-nav .dropdown-menu .dropdown-item {
    color: #fff;
    padding: 10px 10px;
}
.main-header .navbar .navbar-nav .dropdown-menu li {
position: relative;
}

.main-header .navbar .navbar-nav .dropdown-menu li:hover .dropdown-item {
    color: var(--primary);
    padding-left: 15px;
    background-color: rgba(19, 19, 19, 0.4);
}
.main-header .navbar .navbar-nav .dropdown-menu li:hover:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 3px;
    background: var(--primary);
    left: 0px;
    top: 12px;
}
.main-header .navbar .navbar-nav .dropdown-menu .dropdown-item.active,
.main-header .navbar .navbar-nav .dropdown-menu .dropdown-item:hover {
    background-color: #000;
    color: #fff;
}

.main-header .navbar-toggler {
    border: 0.1rem solid var(--primary);
    padding: 0.1rem 0.5rem;
    border-radius: 1px;
}

.main-header .navbar-toggler:focus {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.main-header .navbar-toggler-icon {
    width: 2em;
    height: 2em;
    filter: invert(1);
}

.main-header .offcanvas-header .btn-close {
    opacity: 1;
    width: 2em;
    height: 2em;
}

.main-header .offcanvas-header .btn-close:focus {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.main-header .navbar .offcanvas.show .navbar-nav .nav-link {
    padding: 0.8rem 1rem;
    background: -webkit-linear-gradient(left, var(--primary), var(--primary) 50%, #000 50%);
    background: linear-gradient(to right, var(--primary), var(--primary) 50%, #000 50%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    background-position: 100%;
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

}

.main-header .offcanvas.show .dropdown-toggle::after {
    font-size: 20px;
}

.main-header .navbar .offcanvas.show .navbar-nav .dropdown-menu {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.main-header .navbar .offcanvas.show .navbar-nav .dropdown-menu::after {
    display: none;
}

.main-header .header-btn a {
    position: relative;
    display: inline-block;
    padding: 15px 15px;
    margin-top: 10px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 15px;
    font-weight: 500;
    color: #000;
    z-index: 1;
overflow: hidden;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.main-header.fixed-header .header-btn a {
	border-color: var(--primary);
}
.main-header .header-btn a:hover {
background-color: var(--primary);
}
.main-header .header-btn a:before {
    position: absolute;
    content: '';
    width: 0;
    bottom: 0;
    background: var(--primary);
    height: 120%;
    left: -10%;
    transform: skewX(20deg);
    -webkit-transform: skewX(20deg);
    -moz-transform: skewX(20deg);
    -ms-transform: skewX(20deg);
    -o-transform: skewX(20deg);
    z-index: -1;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.main-header .header-btn a:hover:before {
    width: 120%;
}

@media screen and (max-width: 1024px) {
.main-header::before {
    display: none;
}
.main-header .navbar .navbar-nav {
    align-items: flex-start;
}
}
@media screen and (max-width: 768px) {
    .main-header .navbar {
        padding: 10px;
    }
.main-header .navbar .navbar-brand img {
    width: 100px;
}
    .main-header .navbar .navbar-nav .dropdown-toggle::after {
        display: inline-flex;
        display: -webkit-inline-box;
        display: -moz-inline-box;
        display: -ms-inline-flexbox;
        display: -webkit-inline-flex;
    }

    .main-header .navbar .nav-link .arrow-down-icon {
        display: none;
    }
	
	.main-header .navbar .navbar-nav .nav-link {
    	padding: 0.8rem 1rem;
	}
.main-header .header-btn a {
    border-color: var(--primary)
}
}
/* =======================================
- Banner Section
========================================== */

.banner-section {
    position: relative;
    overflow: hidden;
}

.banner-section .banner-item {
    position: relative;
    padding-top: 120px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100vh;
    height: 100dvh;
}
.banner-section .banner-item::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.banner-section .banner-content {
    position: relative;
    z-index: 2;
}
.banner-section .banner-content .banner-title {
    font-size: 52px;
    font-weight: 400;
    color: #fff;
    margin-bottom: 20px;
}
.banner-section .banner-content .highlight-text h6{
    font-size: 40px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    text-shadow:
        0 3px 0 #0361A7,
        0 3px 0 #0361A7,
        0 12px 15px rgba(0,0,0,0.25);
}
.banner-section .owl-nav button.owl-prev,
.banner-section .owl-nav button.owl-next {
    position: absolute;
    bottom: -4px;
    border-radius: 0;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    cursor: pointer;
    border: 1px solid transparent;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.banner-section .owl-nav button.owl-prev:hover {
    background-color: #000;
    color: #fff;
    border-color: #000;
}
.banner-section .owl-nav button.owl-next:hover {
    background-color: #fff;
    color: #000;
    border-color: #fff;
}

.banner-section .owl-nav button.owl-prev {
    left: 80px;
    background-color: #fff;
    color: #000;
}

.banner-section .owl-nav button.owl-next {
    left: 140px;
    background-color: #000;
    color: #fff;
}
.banner-section .banner-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 2;
}
.banner-section .banner-btn a {
    position: relative;
    padding: 15px 20px;
    background-color: #fff;
    color: var(--primary);
    display: inline-block;
    font-weight: 500;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.banner-section .banner-btn a:hover {
    background-color: var(--primary);
    color: #fff;
}
.banner-section .owl-theme .owl-nav {
    margin: 0;
}
@media screen and (max-width:768px) {
    .banner-section .banner-content .banner-title {
        font-size: 40px;
    }
.banner-section .banner-btn {
    position: relative;
    bottom: auto;
    right: auto;
    margin-top: 20px;
}
.banner-section .owl-nav button.owl-prev,
.banner-section .owl-nav button.owl-next {
    width: 40px;
    height: 40px;
    line-height: 40px;
}
.banner-section .owl-nav button.owl-prev {
    right: 40px;
    left: auto;
}
.banner-section .owl-nav button.owl-next {
    right: -2px;
    left: auto;
}
}
@media screen and (max-width:576px) {
.banner-section .banner-btn {
    text-align: center;
}
}
/* =================================
- About Section
==================================== */
.about-section {
    position: relative;
    background-color: var(--bg-primary);
    border-radius: 0 0 48px 48px;
    overflow: hidden;
}
.about-section .about-content {
    position: relative;
}
.about-section .about-content .description {
    margin-bottom: 20px;
}
.about-section .about-content .counter-item {
    position: relative;
    background-color: #fff;
    padding: 20px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}
.about-section .about-content .counter-item h6 {
    font-size: 30px;
    font-weight: 600;
    color: #000;
    margin-bottom: 10px;
}
.about-section .about-content .counter-item p {
    font-weight: 600;
    font-size: 15px;
    color: #000;
    text-transform: uppercase;
    margin-bottom: 0;
}
.about-section .video-popup-box {
    position: relative;
}
.about-section .video-popup-box .thumbnail-img {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
}
.about-section .video-popup-box .thumbnail-img img {
    width: 100%;
    border-radius: 16px;
    object-fit: cover;
    -o-object-fit: cover;
}
.about-section .video-popup-box .overlay-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    background-color: #00000060;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    border-radius: 16px;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

.about-section .video-popup-box .overlay-icon .play-btn{
    position: relative;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.about-section .video-popup-box .overlay-icon .play-btn img{
    width: 60px;
    position: relative;
    z-index: 3;
}

.about-section .video-popup-box .overlay-icon .play-btn::before{
    content: "";
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: rgba(255,255,255,.35);
    animation: pulseWave 2s ease-out infinite;
    z-index: -1;
}
.about-section .video-popup-box .overlay-icon .play-btn::after{
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
    z-index: -1;
}

@keyframes pulseWave{
    0%{
        transform: scale(0.9);
        opacity: .7;
    }
    70%{
        transform: scale(1.18);
        opacity: .15;
    }
    100%{
        transform: scale(1.3);
        opacity: 0;
    }
}
.about-section .highlight-text {
    position: relative;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: end;
    justify-content: center;
    margin-top: 60px;
}
.about-section .highlight-text h6 {
    font-size: 80px;
    font-weight: 600;
    color: #fff;
    line-height: 60%;
    margin-bottom: 0;
}
.about-section .image-box {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
}
.about-section .image-box .main-img {
    width: 100%;
    height: 500px;
    border-radius: 16px;
    object-fit: cover;
    -o-object-fit: cover;
}
@media screen and (max-width: 1024px) {
.about-section .highlight-text {
    text-align: center;
}
.about-section .highlight-text h6 {
    font-size: 60px;
}
}
@media screen and (max-width: 768px) {
    .about-section .about-content .counter-item {
        padding: 20px 20px;
        text-align: center;
    }
.about-section .about-content .counter-item h6 {
    font-size: 24px;
}
.about-section .about-content .counter-item p {
    font-size: 14px;
}
.about-section .highlight-text h6 {
    font-size: 40px;
    line-height: 100%;
}
.about-section .video-popup-box .overlay-icon .play-btn {
    width: 50px;
    height: 50px;
}
.about-section .video-popup-box .overlay-icon .play-btn img{
    width: 40px;
}
.about-section .image-box .main-img {
    height: 400px;
    border-radius: 30px;
}
}
/* ================================
- Why Choose Section
=================================== */
.why-choose-section {
    position: relative;
}
.why-choose-section .why-choose-item {
    position: relative; 
    padding: 30px 30px;
    border: 1px solid #E4E9F0;
    border-radius: 20px;
    height: 100%;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
.why-choose-section .why-choose-item .icon {
    position: relative;
    width: 60px;
    height: 60px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background-color: var(--bg-primary);
    margin-bottom: 20px;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
.why-choose-section .why-choose-item .icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    -o-object-fit: contain;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.why-choose-section .why-choose-item:hover .icon {
    background-color: var(--primary);
}
.why-choose-section .why-choose-item:hover .icon img {
    filter: brightness(0) invert(1);
}
.why-choose-section .why-choose-item h6 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 0;
}

/* ================================
- Services Section
=================================== */
.service-section {
    position: relative;
    padding-right: 100px;
}
@media (min-width: 1000px) {
    .service-section .container {
        max-width: 100%;
        padding: 0;
    }
}
.service-section .nav-tabs {
    border: none;
}
.service-section .nav-tabs .nav-link {
    position: relative;
    border: none;
    text-align: left;
    display: inline-block;
    padding: 10px 0;
    margin-bottom: 15px;
}
.service-section .nav-tabs .nav-link:focus-visible {
    outline: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}
.service-section .nav-tabs .nav-link h6 {
    color: #00000099;
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 0;
}
.service-section .nav-tabs .nav-link::before {
    position: absolute;
    content: "\f061";
    top: 8px;
    right: -40px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    color: #000;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 25px;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    opacity: 0;
}
.service-section .nav-tabs .nav-link.active::before {
    opacity: 1;
}
.service-section .nav-tabs .nav-link.active h6 {
    color: #000;
}
.service-section .image-box {
    position: relative;
    border-radius: 0 20px 20px 0;
    padding-right: 50px;
    overflow: hidden;
}
.service-section .image-box .arrow-link {
	position: absolute;
	top: 20px;
    right: 70px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: 1px solid #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	color: #000;
	 transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
	z-index: 2;
}
.service-section .image-box .arrow-link i {
	color: #000;
	transform: rotate(-45deg);
	transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
.service-section .image-box .arrow-link:hover {
	background-color: var(--primary);
	color: #fff;
}
.service-section .image-box .arrow-link:hover i {
	color: #fff;
	transform: rotate(0deg);
}
.service-section .image-box img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    -o-object-fit: cover;
    border-radius:0 20px 20px 0;
}
@media screen and (max-width: 1024px) {
    .service-section {
        padding-right: 0;
    }
    .service-section .image-box {
        padding-right: 0;
        border-radius: 20px 20px;
    }
    .service-section .nav-tabs .nav-link h6 {
        font-size: 22px;
    }
    .service-section .nav-tabs .nav-link::before {
        top: 4px;
    }
    .service-section .image-box img {
        height: 350px;
    }
}
@media screen and (max-width: 768px) {
        .service-section .image-box img {
            height: 100%;
        }
}

/* ======================================
- Marquee Section
======================================== */

.marquee-section {
    position: relative;
    padding-bottom: 80px;
}

.marquee-section .marquee {
    position: relative;
    line-height: 1.5em;
    overflow: hidden;
}

.marquee-section .marquee ul {
    visibility: hidden;
    list-style: none;
    margin-left: 0;
    padding-left: 0;
    white-space: nowrap;
    display: inline;
}

.marquee-section .marquee li {
    position: relative;
    padding: 0 60px;
    display: inline;
    font-size: 50px;
    font-weight: 700;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1px #00000033;
    text-stroke: 1px #00000033;
    letter-spacing: 2px;
    line-height: 1;
}

.marquee-section .marquee li::before {
    position: absolute;
    content: '\f061';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 40px;
    top: 50%;
    left: -20px;
    color: var(--primary);
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

@media screen and (max-width: 1024px) {
    .marquee-section .marquee li {
        font-size: 30px;
    }
}
/* =====================================
- Industries Section
======================================== */
.industries-section {
    position: relative;
    background-color: #2A2B36;
    padding-left: 100px;
    overflow: hidden;
}
.industries-section .owl-carousel .owl-stage {
    padding-left: 0 !important;
}
@media (min-width: 1000px) {
    .industries-section .container {
        max-width: 100%;
        padding: 0;
    }
}
.industries-section .industry-item {
    position: relative;
    text-align: center;
}
.industries-section .industry-item .image-box {
    position: relative;
    border-radius: 20px;
    margin-bottom: 20px;
    overflow: hidden;
}
.industries-section .industry-item .image-box img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    -o-object-fit: cover;
    border-radius: 20px;
}
.industries-section .industry-item h6 {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0;
}
@media screen and (max-width: 768px) {
    .industries-section {
        padding-left: 0;
    }
}
/* =====================================
- Project Section
======================================== */
.project-section {
    position: relative;
    overflow: hidden;
}
@media (min-width: 1000px) {
    .project-section .container {
        max-width: 100%;
        padding: 0;
    }
}
.project-section .count-wrap {
    position: relative;
}
.project-section .count-wrap h6 {
    color: #000;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 10px;
}
.project-section .count-wrap p {
    font-size: 40px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0;
}
.project-section .count-wrap p span {
    color: #000;
    margin-left: 5px;
}
.project-section .project-item {
    position: relative;
	margin: 0 30px;
}
.project-section .project-item .top-content {
    position: relative;
    opacity: 0;
    margin-bottom: 20px;
     transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out
}
.project-section .owl-item.center .project-item .top-content {
    opacity: 1;
}   
.project-section .project-item .top-content .category h6 {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid #D9D9D9;
    color: #2A2B36;
    text-transform: uppercase;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0;
}
.project-section .project-item .top-content .date p {
    color: #2A2B36;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0;
}
.project-section .project-item .image-box {
    position: relative;
    border-radius: 20px;
    margin-bottom: 20px;
    border: 1px solid #eee;
    overflow: hidden;
}
.project-section .project-item .image-box img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    -o-object-fit: cover;
    border-radius: 20px;
}
.project-section .project-item .bottom-content {
    position: relative;
    opacity: 0;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
.project-section .owl-item.center .project-item .bottom-content {
    opacity: 1;
} 
.project-section .project-item .bottom-content h5 {
    color: #000;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 0;
}
.project-section .project-item .bottom-content h5 a:hover {
    color: var(--primary);
}
.project-section .owl-nav button.owl-prev,
.project-section .owl-nav button.owl-next {
    position: absolute;
    top: -180px;
    border-radius: 0;
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    cursor: pointer;
    border: 1px solid #D9D9D9;
    border-radius: 50%;
    font-size: 20px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.project-section .owl-nav button.owl-prev:hover,
.project-section .owl-nav button.owl-next:hover  {
    background-color: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.project-section .owl-nav button.owl-prev {
    right: 140px;
}

.project-section .owl-nav button.owl-next {
    right: 80px;
}
@media screen and (max-width: 1024px) {
    .project-section .project-item .image-box img {
        height: 300px;
    }
    .project-section .owl-nav button.owl-prev,
    .project-section .owl-nav button.owl-next {
        position: relative;
    top: 20px;
    right: auto
}
}
@media screen and (max-width: 768px) {
	.project-section .project-item {
		margin: 0;
	}
}
/* =====================================
- Testimonial Section
======================================== */
.testimonial-section {
    position: relative;
    background-color: var(--bg-primary);
    overflow: hidden;
}
.testimonial-section .testimonial-wrapper {
    position: relative;
}
/* .testimonial-section .testimonial-wrapper::after {
    position: absolute;
    content: "";
    bottom: 25px;
    right: 200px;
    width: 42%;
    height: 2px;
    background-color: #D9D9D9;
    z-index: 1;
} */
.testimonial-section .testimonial-wrapper .owl-theme .owl-dots {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    position: absolute;
    right: 75px;
    bottom: 10px;
    padding: 10px 10px;
    border-radius: 20px;
    background-color: #fff;
    margin-top: 0 !important;
    z-index: 2;
}
.testimonial-section .testimonial-wrapper .owl-theme .owl-dots span {
    width: 12px;
    height: 12px;
    margin: 0 5px;
    border-radius: 50%;
    background-color: #D9D9D9;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
.testimonial-section .testimonial-wrapper .owl-theme .owl-dots .owl-dot.active span {
    background-color: #000;
}
.testimonial-section .testimonial-item {
    position: relative;
}
.testimonial-section .testimonial-item h5 {
    font-size: 22px;
    font-weight: 600;
    line-height: 150%;
    margin-bottom: 20px;
}
.testimonial-section .testimonial-item .person-info {
    position: relative;
    /* display: inline-block; */

}
.testimonial-section .testimonial-item .person-info::after {
    position: absolute;
    content: "";
    bottom: 25px;
    right: 170px;
    width: 40%;
    height: 2px;
    background-color: #D9D9D9;
    z-index: 1;
}
.testimonial-section .testimonial-item .person-info h6 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}
.testimonial-section .testimonial-item .person-info p {
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 0;   
}
.testimonial-section .image-box {
    position: relative;
    background-color: #fff;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 10px;
    border-radius: 10px;
    overflow: hidden;
}
.testimonial-section .image-box img {
    width: 200px;
    height: 100px;
    object-fit: contain;
    -o-object-fit: contain;
    filter: grayscale(1);
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
.testimonial-section .image-box:hover img {
    filter: grayscale(0);
    transform: scale(1.02);
}
@media screen and (max-width: 1024px) {
    .testimonial-section .image-box {
        padding: 20px 10px;
    }
    .testimonial-section .image-box img {
        width: 150px;
        height: 100px;
    }
}
@media screen and (max-width: 576px) {
    .testimonial-section .testimonial-item .person-info::after {
        display: none;
    }
    .testimonial-section .testimonial-wrapper .owl-theme .owl-dots {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        right: auto;
        margin-top: 40px !important;
        display: inline-block;
    }
    .testimonial-section .image-box {
        padding: 10px 10px;
    }
}
/* ===================================
- Contact Section
====================================== */
.contact-form-section {
    position: relative;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}
.contact-form-section::before {
    position: absolute;
    content: "";
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
}
.contact-form-section .contact-form {
    position: relative;
    padding: 60px 40px 40px 40px;
    background: #00000033;
    border: 1px solid #FFFFFF33;
    backdrop-filter: blur(50px);
    border-radius: 20px;
    z-index: 2;
}
.contact-form-section .contact-form .title h2 {
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 20px;
}
.contact-form-section .contact-form .form-control {
    position: relative;
    border: none;
    border-bottom: 1px solid #fff;
    border-radius: 0;
    background: transparent;
    padding: 20px 10px;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 0;
}
.contact-form-section .contact-form .form-control::placeholder {
    color: #fff;
}
.contact-form-section .contact-form .form-control:focus {
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    border-color: var(--primary);
}
.contact-form-section .contact-form .submit-btn {
    position: relative;
    border: none;
    border-radius: 5px;
    background: #fff;
    padding: 10px 20px;
    color: var(--primary);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 20px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.contact-form-section .contact-form .submit-btn:hover {
    background: var(--primary);
    color: #fff;
}
.contact-form-section .section-title .main-title {
    font-size: 50px;
}
.contact-form-section .content-box {
    position: relative;
    padding-top: 60px;
    z-index: 2;
}
.contact-form-section .content-box h6 {
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 15px;
}
.contact-form-section .content-box p {
    font-size: 16px;
    color: #fff;
    font-weight: 400;
    margin-bottom: 30px;
}
.contact-form-section .content-box .action-btn {
    position: relative;
    border: none;
    border-radius: 5px;
    background: #3CAF41;
    padding: 10px 20px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 20px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.contact-form-section .content-box .action-btn:hover {
    background: #fff;
    color: #3CAF41;
}
@media screen and (max-width: 1024px) {
    .contact-form-section .contact-form {
        padding: 30px 30px;
    }
    .contact-form-section .section-title .main-title {
        font-size: 40px;
    }
.contact-form-section .content-box {
    padding-top: 40px;
    margin-bottom: 30px;
}
}
/* ==============================
- Footer Section
================================== */
.footer-section {
    position: relative;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 80px;
    overflow: hidden;
}
.footer-section::before {
    position: absolute;
    content: "";
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(42, 43, 54, 0.95);
    z-index: 1;
}
.footer-section .cta-content {
    position: relative;
    padding-bottom: 30px;
    border-bottom: 2px solid #FFF;
    z-index: 2;
}
.footer-section .cta-content .action-btn a {
    color: #178CC8;
}
.footer-section .footer-container {
    position: relative;
    padding-top: 60px;
    padding-bottom: 30px;
    z-index: 2;
}
.footer-section .footer-container .footer-content .logo {
    position: relative;
    margin-bottom: 30px;
    z-index: 2;
}
.footer-section .footer-container .footer-content .logo img {
    width: 200px;
    object-fit: contain;
    -o-object-fit: contain;
}
.footer-section .footer-container .footer-content .year-text {
    color: #fff;
    font-size: 25px;
    font-weight: 400;
    margin-bottom: 40px;
}
.footer-section .footer-container .footer-content .year-text span {
    font-size: 40px;
    font-weight: 600;
    color: var(--primary);
}
.footer-section .footer-container .footer-content .social-media {
    position: relative;
}
.footer-section .footer-container .footer-content .social-media .title {
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.footer-section .footer-container .footer-content .social-media ul {
    position: relative;
    display: inline-block;
    border: 1px solid var(--primary);
    padding: 10px 15px;
    border-radius: 30px;
}
.footer-section .footer-container .footer-content .social-media ul li {
    display: inline-block;
    margin: 0 8px;
    font-size: 22px;
}
.footer-section .footer-container .footer-content .social-media ul li a {
    color: #fff;
}
.footer-section .footer-container .footer-content .social-media ul li a:hover {
    color: var(--primary)
}
.footer-section .footer-container .footer-content .contact-info {
    position: relative;
    margin-bottom: 30px;
}
.footer-section .footer-container .footer-content .contact-info .title {
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.footer-section .footer-container .footer-content .contact-info .title img {
    width: 20px;
    margin-right: 15px;
    object-fit: contain;
    -o-object-fit: contain;
}
.footer-section .footer-container .footer-content .contact-info p {
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    margin-bottom: 10px;
}
.footer-section .footer-container .footer-content .contact-info p a {
    color: #fff;
}
.footer-section .footer-container .footer-content .contact-info p a:hover {
    color: var(--primary);
}
.footer-section .footer-container .footer-content .footer-title {
    font-size: 18px;
    color: #fff;
    margin-bottom: 20px;
}
.footer-section .footer-container .footer-content .links ul li {
	position: relative;
	padding-left: 20px;
    color: #fff;
    margin-bottom: 10px;
}
.footer-section .footer-container .footer-content .links ul li::before {
	 position: absolute;
    content: "\f105";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    top: 0;
    left: 0;
    color: #fff;
	-webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.footer-section .footer-container .footer-content .links ul li a {
    color: #fff;
}
.footer-section .footer-container .footer-content .links ul li:hover::before {
	color: var(--primary);
}
.footer-section .footer-container .footer-content .links ul li:hover a {
    color: var(--primary);
}
.footer-section .copyright-wrap {
    position: relative;
    border-top: 2px solid rgba(255, 255, 255, 0.2);
    padding: 20px 0;
    text-align: center;
    z-index: 2;
}
.footer-section .copyright-wrap p {
    color: #fff;
    margin-bottom: 0;
}
/* ==========================
- Breadcrumb Section
============================= */
/*=============================================
   - BREADCRUMBS SECTION      
=============================================*/
.breadcrumbs-section {
    position: relative;
    overflow: hidden;
}
.breadcrumbs-section .breadcrumbs {
    position: relative;
    padding-top: 200px;
    padding-bottom: 100px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 1;
}

.breadcrumbs-section .breadcrumbs:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000;
    opacity: 0.7;
    z-index: -1;
}

.breadcrumbs-section .breadcrumbs .breadcrumb-content .breadcrumb-title {
    font-size: 42px;
    color: #fff;
    margin-bottom: 25px;
    text-transform: capitalize;
}

.breadcrumbs-section .breadcrumbs .breadcrumb-content ul {
    padding-left: 0;
    margin-top: 12px;
    margin-bottom: 0;
}

.breadcrumbs-section .breadcrumbs .breadcrumb-content ul li {
    display: inline-block;
    color: #fff;
    position: relative;
}

.breadcrumbs-section .breadcrumbs .breadcrumb-content ul li a {
    color: rgba(255, 255, 255, 0.7);
}
.breadcrumbs-section .breadcrumbs .breadcrumb-content ul li a:hover {
    color: var(--primary);
}
.breadcrumbs-section .breadcrumbs .breadcrumb-content ul li+li::before {
    float: left;
    padding: 0 0.8rem;
    color: #fff;
    content: "/";
}
@media screen and (max-width: 768px) {
    .breadcrumbs-section .breadcrumbs .breadcrumb-content .breadcrumb-title {
        font-size: 38px;
    }
    .breadcrumbs-section.detail-page .breadcrumbs .breadcrumb-content ul li:last-child {
        display: none;
    }
}
/* ================= About Page ========================= */
/* =================================
- History Section
==================================== */

.history-section {
    position: relative;
}

.history-section .content-wrap {
    position: relative;
}

.history-section .content-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background-color: var(--primary);
}

.history-section .item {
    position: relative;
    padding: 20px;
    color: #000;
    border: 1px solid var(--primary);
    border-radius: 10px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.history-section .col-md-12:nth-child(odd) .item {
    margin-right: 30px;
}

.history-section .col-md-12:nth-child(even) .item {
    margin-left: 30px;
    text-align: right;
}

.history-section .item::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    border: 2px solid var(--primary);
    border-radius: 50%;
    top: 50%;
    right: -58px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: #FFF;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.history-section .col-md-12:nth-child(even) .item::after {
    right: auto;
    left: -58px;
}

.history-section .item:hover {
    border: 1px solid rgba(var(--primary-rgb), 0.5);
    -webkit-box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.5);
    -moz-box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.5);
    box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.5);
}

.history-section .item:hover::after {
    border-color: var(--bg-primary);
    background-color: var(--primary);
}

.history-section .item .number h6 {
    font-size: 60px;
    color: transparent;
    margin-bottom: 10px;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: rgba(var(--primary-rgb), 0.3);
    background: -webkit-linear-gradient(0.76deg, rgba(0, 255, 102, 0) -20%, rgba(var(--primary-rgb), 0.3) 80%);
    background: linear-gradient(0.76deg, rgba(0, 255, 102, 0) -20%, rgba(var(--primary-rgb), 0.3) 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.history-section .item:hover .number h6 {
    background: none;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1.5px;
    -webkit-text-stroke-color: var(--primary);
}

.history-section .item .title-box {
    position: relative;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.history-section .item .title-box h5 {
    font-size: 20px;
    color: var(--primary);
    font-weight: 600;
    margin-bottom: 0;
}

.history-section .col-md-12:nth-child(even) .item .title-box {
    justify-content: end;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

@media screen and (max-width: 768px) {
    .history-section .item {
        flex-direction: column;
        align-items: start;
    }

    .history-section .content-wrap::before {
        left: 18px;
    }

    .history-section .item::after {
        left: -58px;
        right: auto;
    }

    .history-section .col-md-12:nth-child(odd) .item {
        margin-left: 60px;
        flex-direction: column;
        text-align: left;
        margin-right: 0;
    }

    .history-section .col-md-12:nth-child(even) .item {
        margin-left: 60px;
        flex-direction: column;
        text-align: left;
    }

    .history-section .col-md-12:nth-child(even) .item .title-box {
        justify-content: start;
        -ms-flex-direction: row;
        flex-direction: row;
    }
    .history-section .item .title-box .text-end {
        text-align: left !important;
    }
.history-section .item .number h6 {
    font-size: 40px;
}
}

/* ===================================
- Vision Mission Section
====================================== */
.vision-mission-section {
    position: relative;
    padding: 80px 0 50px 0;
    background: linear-gradient(180deg, var(--primary) 60%, #fff 40%);
}

.vision-mission-section .vision-mission-wrapper {
    position: relative;
    background-color: var(--bg-primary);
    padding: 40px 60px;
    overflow: hidden;
}

.vision-mission-section .vision-mission-wrapper::after {
    content: '';
    position: absolute;
    height: calc(100% - 100px);
    width: 1px;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary);
    z-index: 1;
}

.vision-mission-section .vision-mission-wrapper .vision-mission-item {
    position: relative;
    padding: 20px 20px 20px 40px;
}

.vision-mission-section .vision-mission-wrapper .vision-mission-item .icon {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    background: rgba(var(--primary-rgb), 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

.vision-mission-section .vision-mission-wrapper .vision-mission-item:hover .icon {
    background-color: var(--primary);
}

.vision-mission-section .vision-mission-wrapper .vision-mission-item .icon img {
    position: relative;
    width: 40px;
    height: 40px;
    object-fit: contain;
    -o-object-fit: contain;
    z-index: 1;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

.vision-mission-section .vision-mission-wrapper .vision-mission-item:hover .icon img {
    filter: brightness(0) invert(1);
}

.vision-mission-section .vision-mission-wrapper .vision-mission-item .content {
    padding: 20px 70px 20px 0;
}

.vision-mission-section .vision-mission-wrapper .vision-mission-item .content h3 {
    color: var(--primary);
    font-size: 24px;
    margin-bottom: 20px;
}

.vision-mission-section .vision-mission-wrapper .vision-mission-item .content p {
    font-size: 18px;
    text-align: justify;
}

@media screen and (max-width: 768px) {
    .vision-mission-section .vision-mission-wrapper {
        padding: 40px 20px;
    }

    .vision-mission-section .vision-mission-wrapper::after {
        display: none;
    }

    .vision-mission-section .vision-mission-wrapper .vision-mission-item {
        padding: 0;
        text-align: center;
    }

    .vision-mission-section .vision-mission-wrapper .vision-mission-item .content {
        padding: 20px 0;
    }

    .vision-mission-section .vision-mission-wrapper .vision-mission-item .icon {
        margin: 0 auto;
    }
}
/* ==================================
- Certificate Section
===================================== */
.certificates-section {
    position: relative;
}
.certificates-section .cert-item {
    position: relative;
    padding: 20px 20px;
    background-color: #fff;
    border: 1px solid var(--primary);
    border-radius: 16px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scale(0.75);
    -webkit-transform: scale(0.75);
    -moz-transform: scale(0.75);
    -ms-transform: scale(0.75);
    -o-transform: scale(0.75);
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    overflow: hidden;
}
.certificates-section .owl-item.center .cert-item {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
}
.certificates-section .cert-item img {
    width: 100%;
    border-radius: 16px;
    object-fit: cover;
    -o-object-fit: cover;
}
.certificates-section .owl-nav button.owl-prev,
.certificates-section .owl-nav button.owl-next {
    position: absolute;
    top: 120px;
    border-radius: 0;
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    cursor: pointer;
    border: 1px solid var(--primary);
    border-radius: 50%;
    font-size: 20px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.certificates-section .owl-nav button.owl-prev:hover,
.certificates-section .owl-nav button.owl-next:hover  {
    background-color: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.certificates-section .owl-nav button.owl-prev {
    left: -20px;
}

.certificates-section .owl-nav button.owl-next {
    right: -20px;
}
@media screen and (max-width: 768px) {
    .certificates-section .owl-nav button.owl-prev,
    .certificates-section .owl-nav button.owl-next {
        display: none;
    }
}
/* ==================================
- Team Section
===================================== */
.team-section {
    position: relative;
}
.team-section .team-item {
    position: relative;
    padding: 5px 5px;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    height: 100%;
    overflow: hidden;
}
.team-section .team-item .image-box {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
}
.team-section .team-item .image-box img {
    width: 100%;
    height: 350px;
    border-radius: 16px;
    object-fit: cover;
    -o-object-fit: cover;
    object-position: top;
    -o-object-position: top;
}
.team-section .team-item .image-box .social-links {
    position: absolute;
    bottom: 10px;
    right: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(40px);
    transition: all 0.4s ease;
}

.team-section .team-item:hover .image-box .social-links {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}
.team-section .team-item .image-box .social-links ul li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #fff;
    border: 3px solid var(--primary);
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    margin-bottom: 10px;
}
.team-section .team-item .image-box .social-links ul li a span {
    font-size: 18px;
    color: var(--primary);
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
.team-section .team-item .image-box .social-links ul li:hover {
    background-color: var(--primary);
}
.team-section .team-item .image-box .social-links ul li:hover a span {
    color: #fff;
}
.team-section .team-item .content {
    position: relative;
    padding: 20px 20px 10px 20px;
}
.team-section .team-item .content h6 {
    color: var(--primary);
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 10px;
}
.team-section .team-item .content p {
    color: #4d4d4d;
    margin-bottom: 0;
}
/* ===================================
- Contact Main Section
====================================== */
.contact-main-section {
    position: relative;
    overflow: hidden;
}
.contact-main-section .inner-title {
    font-size: 30px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 20px;
}
.contact-main-section .contact-item {
    position: relative;
    padding: 30px 30px;
    background-color: rgba(var(--primary-rgb), 0.1);
    border: 1px solid #eee;
    border-radius: 16px;
    height: 100%;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
.contact-main-section .contact-item .contact-icon {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
.contact-main-section .contact-item .contact-icon i {
    color: var(--primary);
    font-size: 24px;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
.contact-main-section .contact-item .contact-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 10px;
}
.contact-main-section .contact-item p {
    margin-bottom: 0;
}
.contact-main-section .contact-item p a:hover {
    color: var(--primary);
}
.contact-main-section .contact-item:hover .contact-icon {
    background-color: var(--primary);
}
.contact-main-section .contact-item:hover .contact-icon i {
    color: #fff;
}
/*=============================================
   - Map Section
=============================================*/
.map-container {
    position: relative;
    overflow: hidden;
}
.map-container .full-width-map {
    position: relative;
    height: 400px;
}
.map-container .full-width-map iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}
/*=============================================
   - Form Section
=============================================*/
.form-section {
    position: relative;
}
.form-section .contact-form {
    position: relative;
    z-index: 2;
}
.form-section .contact-form .submit-btn {
    position: relative;
    border: 1px solid var(--primary);
    border-radius: 5px;
    background-color: var(--primary);
    padding: 10px 20px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
.form-section .contact-form .submit-btn:hover {
    background-color: #fff;
    color: var(--primary);
    border-color: var(--primary);
}
/* =========================================
- Contact Form Section
============================================ */
.contact-cta-section {
    position: relative;
    background-color: var(--bg-primary);
    overflow: hidden;
}
.contact-cta-section .button-wrap {
    position: relative;
    margin-top: 30px;
}
.contact-cta-section .button-wrap .action-btn {
    position: relative;
    border: none;
    border-radius: 5px;
    background-color: var(--primary);
    padding: 10px 20px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
.contact-cta-section .button-wrap .action-btn:hover {
    background-color: #fff;
    color: var(--primary);
    border-color: var(--primary);
}
.contact-cta-section .button-wrap .action-btn.outline {
    background-color: #fff;
    color: var(--primary);
    border-color: var(--primary);
}
.contact-cta-section .button-wrap .action-btn.outline:hover {
    background-color: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
/* =========================================
- Project Filter Section
============================================ */
.project-list-section {
    position: relative;
}
.project-list-section .project-filter-container {
    position: relative;
}
.project-list-section .project-filter-container .input-group-text {
    border-radius: 8px 0 0 8px;
}
.project-list-section .project-filter-container .form-control {
    border-radius: 0 8px 8px 0;
    box-shadow: none;
}
.project-list-section .project-filter-container .form-control:focus,
.project-list-section .project-filter-container .form-select:focus {
    box-shadow: none;
    border-color: #e7e7e7 !important;
}
.project-list-section .project-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}
.project-list-section .project-item .project-img {
    position: relative;
    border-radius: 15px;
    margin-bottom: 20px;
    border: 1px solid var(--primary);
    overflow: hidden;
}
.project-list-section .project-item .project-img img {
    width: 100%;
    height: 300px;
    border-radius: 15px;
    object-fit: cover;
    -o-object-fit: cover;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
.project-list-section .project-item:hover .project-img img {
    transform: scale(1.02);
    -webkit-transform: scale(1.02);
    -moz-transform: scale(1.02);
    -ms-transform: scale(1.02);
    -o-transform: scale(1.02);
}
.project-list-section .project-item .project-img .category {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
}
.project-list-section .project-item .project-img .category h6 {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid #D9D9D9;
    background-color: #fff;
    color: #2A2B36;
    text-transform: uppercase;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0;
}
.project-list-section .project-item .project-img .date {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #fff;
    border-radius: 10px 0 0 0;
    padding: 10px 10px;
    z-index: 1;
}
.project-list-section .project-item .project-img .date h6 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 0;
}
.project-list-section .project-item .project-content {
    position: relative;
}
.project-list-section .project-item .project-content .title h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.project-list-section .project-item:hover .project-content .title h3 a {
    color: var(--primary);
}
.project-list-section .project-item .project-content .location h6 {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0;
}
.project-list-section .project-item .project-content .location h6 i {
    color: var(--primary);
    margin-right: 5px;
}
.project-list-section .project-item .project-content .short-content p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0;
}
/* =========================================
- Project Detail Section
============================================ */
.project-detail-section {
    position: relative;
    overflow: hidden;
}
.project-detail-section .location {
    position: relative;
}
.project-detail-section .location h6 {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 0;
}
.project-detail-section .location h6 i {
    color: var(--primary);
    margin-right: 3px;
}
.project-detail-section .statement-wrap p {
    text-align: justify;
    margin-bottom: 0;
}
.project-detail-section .statement-wrap p + p {
    margin-top: 20px;
}
/* =========================================
- Project Solution Section
============================================ */
.project-solution-section {
    position: relative;
    padding-right: 100px;
    overflow: hidden;
}
@media (min-width: 1000px) {
    .project-solution-section .container {
        max-width: 100%;
        padding: 0;
    }
}
.project-solution-section .image-box {
    position: relative;
    border-radius: 0 20px 20px 0;
    overflow: hidden;
}

.project-solution-section .image-box img {
    width: 100%;
    height: 600px;
    border-radius: 0 20px 20px 0;
    object-fit: cover;
    -o-object-fit: cover;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
.project-solution-section .content-box {
    position: relative;
}
.project-solution-section .content-box p {
    margin-bottom: 10px;
}
@media screen and (max-width: 991px) {
    .project-solution-section {
        padding-right: 0;
    }
.project-solution-section .image-box {
        border-radius: 20px 20px;
    }
    .project-solution-section .image-box img {
        height: 400px;
        border-radius: 20px 20px;
    }
    
}
/* ====================================
- Material Section
======================================= */

.project-material-section {
    position: relative;
    overflow: hidden;
}
.project-material-section .material-table {
    border: 1px solid var(--primary);
    border-radius: 12px;
    overflow: hidden;
    margin-top: 30px;
}

.project-material-section .material-table table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: collapse;
}

.project-material-section .material-table thead th {
    background: #E6F5FF;
    color: #0361A7;
    font-size: 16px;
    font-weight: 700;
    padding: 16px 20px;
    border: none;
    border-bottom: 1px solid var(--primary);
    white-space: nowrap;
}

.project-material-section .material-table tbody td {
    padding: 16px 20px;
    font-size: 15px;
    color: #555;
    border: none;
    vertical-align: middle;
    border-top: 1px solid #edf2f7;
}

.project-material-section .material-table tbody tr:nth-child(even) {
    background: #fafafa;
}

.project-material-section .material-table tbody tr:hover {
    background: #f5fbff;
    transition: all .3s ease;
}

.project-material-section .material-table tbody td:first-child {
    font-weight: 600;
    color: #222;
}

.project-material-section .material-table tbody td:last-child {
    color: var(--primary);
    font-weight: 500;
}

@media (max-width: 768px) {
    .project-material-section .material-table {
        overflow-x: scroll;
    }
    .project-material-section .material-table thead th,
    .project-material-section .material-table tbody td {
        padding: 12px 15px;
        font-size: 14px;
    }

}
/* ==========================
- Image Comparison Section
============================== */
.image-comparison-section {
    position: relative;
    overflow: hidden;
}
.image-comparison-section .image-comparison-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  --slider-position: 50%;
  width: 100%;
  margin: 0 auto;
}

.image-comparison-section .image-comparison-wrapper .image-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
}

.image-comparison-section .image-comparison-wrapper .main-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left;
}

.image-comparison-section .image-comparison-wrapper .before-img {
  position: absolute;
  inset: 0;
  width: var(--slider-position);
  filter: grayscale(100%);
}

.image-comparison-section .image-comparison-wrapper .image-comparison-slider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
}

.image-comparison-section .image-comparison-wrapper .image-comparison-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--slider-position);
  width: 3px;
  background-color: #fff;
  transform: translateX(-50%);
  pointer-events: none;
}

.image-comparison-section .image-comparison-wrapper .image-comparison-handle {
  position: absolute;
  top: 50%;
  left: var(--slider-position);
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: #fff;
  color: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.image-comparison-section .image-comparison-wrapper .image-comparison-slider:focus-visible
  ~ .image-comparison-handle {
  outline: 4px solid #000;
  outline-offset: 3px;
}

.image-comparison-section .image-comparison-wrapper .image-comparison-handle svg {
  width: 30px;
  height: 30px;
}
.image-comparison-section .image-comparison-wrapper .image-comparison-label {
    position: absolute;
    top: 20px;
    z-index: 5;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 30px;
    pointer-events: none;
}

.image-comparison-section .image-comparison-wrapper .image-comparison-label--before {
    left: 20px;
}

.image-comparison-section .image-comparison-wrapper .image-comparison-label--after {
    right: 20px;
}
/* =====================================
- Solution Section 
========================================*/
.solution-list-section {
    position: relative;
}
.solution-list-section .solution-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    height: 100%;
    overflow: hidden;
}
.solution-list-section .solution-item::after {
    position: absolute;
    content: '';
    bottom: 0;
    left: 0;
    width: 0;
    height: 6px;
    background-color: var(--primary);
    z-index: 1;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
.solution-list-section .solution-item:hover::after {
    width: 100%;
}
.solution-list-section .solution-item .solution-img {
    position: relative;
    border-radius: 10px 10px 0 0;
    overflow: hidden
}
.solution-list-section .solution-item .solution-img::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
    opacity: 0;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}       
.solution-list-section .solution-item:hover .solution-img::before {
    opacity: 1;
    height: 100%;
}
.solution-list-section .solution-item .solution-img img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    -o-object-fit: cover;
    border-radius: 10px 10px 0 0;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
.solution-list-section .solution-item:hover .solution-img img {
    transform: scale(1.02);
    -webkit-transform: scale(1.02);
    -moz-transform: scale(1.02);
    -ms-transform: scale(1.02);
    -o-transform: scale(1.02);
}
.solution-list-section .solution-item .solution-img .action-btn {
    position: absolute;
    top: 0; 
    right: 15px;
    width: 60px;
    height: 60px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: transparent;
    border: 2px solid #fff;
    font-size: 20px;
    z-index: 2;
    opacity: 0;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
.solution-list-section .solution-item:hover .solution-img .action-btn {
    top: 15px;  
    opacity: 1;
}
.solution-list-section .solution-item .solution-img .action-btn i {
    transform: rotate(-45deg);
    color: #fff;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
.solution-list-section .solution-item .solution-img .action-btn:hover {
    background-color: var(--primary);
    color: #fff;
}
.solution-list-section .solution-item .solution-img .action-btn:hover i {
    transform: rotate(0deg);
    color: #fff;
}
.solution-list-section .solution-item .solution-content {
    position: relative;
    padding: 20px 20px;
}
.solution-list-section .solution-item .solution-content .title h3 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 15px;
}
.solution-list-section .solution-item:hover .solution-content .title h3 a {
    color: var(--primary);
}
.solution-list-section .solution-item .solution-content .short-content p {
    font-weight: 400;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0;
}
/* ================================
- Solution Use Case Section
=================================== */
.solution-usecase-section {
    position: relative;
    overflow: hidden;
}
.solution-usecase-section .place-content {
    position: relative;
    text-align: center;
    overflow: hidden;
}

.solution-usecase-section .place-content img {
    width: 100%;
    height: 300px;
    border-radius: 20px 20px;
    object-fit: cover;
    -o-object-fit: cover;
    margin-bottom: 20px;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
.solution-usecase-section .place-content h6 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 0;
}
/* ================================
- Solution Benefits Section
=================================== */
.solution-benefits-section {
    position: relative;
}
.solution-benefits-section .benefit-item {
    position: relative; 
    padding: 30px 30px;
    border: 1px solid #E4E9F0;
    border-radius: 20px;
    height: 100%
}
.solution-benefits-section .benefit-item .icon {
    position: relative;
    width: 60px;
    height: 60px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background-color: var(--bg-primary);
    margin-bottom: 20px;
    font-size: 25px;
    color: var(--primary);
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
.solution-benefits-section .benefit-item:hover .icon {
    background-color: var(--primary);
    color: #fff;
}

.solution-benefits-section .benefit-item h6 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}
/* =====================================
- Project Reference Section 
========================================*/
.solution-reference-section {
    position: relative;
    overflow: hidden;
}
.solution-reference-section .reference-details {
    position: relative;
    padding: 30px 30px;
    border: 1px solid #E4E9F0;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 30px;
}
.solution-reference-section .reference-details .title {
    font-size: 20px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 15px;
}
.solution-reference-section .reference-details .project-category {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
}
.solution-reference-section .reference-details .location {
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--bg-primary);
    color: var(--primary);
    padding: 5px 10px;
    border-radius: 0 0 0 10px;
    margin-bottom: 0;
}
.solution-reference-section .reference-details .location p {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 0;
}
@media screen and (max-width: 1024px) {
    .solution-reference-section .reference-details {
        padding: 20px 20px;
    }
    .solution-reference-section .reference-details .title {
        font-size: 18px;
    }
    .solution-reference-section .reference-details .project-category {
        font-size: 14px;
    }
    .solution-reference-section .reference-details .location {
        top: auto;
        bottom: 0;
        border-radius: 10px 0 0 0;
    }
    .solution-reference-section .reference-details .location p {
        font-size: 14px;
    }
}

/* ==================================
- Solution Type Section
===================================== */
.solution-type-section {
    position: relative;
}
.solution-type-section .cover-img {
    position: relative;
    border-radius: 10px;
    margin-bottom: 30px;
    overflow: hidden;
}
.solution-type-section .cover-img img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    -o-object-fit: cover;
    border-radius: 10px;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
.solution-type-section .statement-wrap {
    position: relative;
}
.solution-type-section .statement-wrap p {
    margin-bottom: 0;
}
.solution-type-section .statement-wrap p + p {
    margin-top: 10px;
}
.solution-type-section .statement-wrap h4 {
    margin-top: 20px;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
}