@import url("https://fonts.googleapis.com/css?family=Lexend:300,500,400,600|Roboto:400|Noto+Sans:400");

:root {
    --blue: rgba(8, 76, 232, 1);
    --dark-blue: rgba(0, 43, 121, 1);
    --red: rgba(255, 38, 0, 1);
    --text-colour-darkgrey: rgba(36, 48, 55, 1);
    --orange: rgba(255, 146, 1, 1);
    --darker-grey: rgba(35, 36, 40, 1);

    --bg-white: #fff;
    --primary-bg-color: #182359;
    --primary-bg-hover: #16277c;

    --orange: #fe6700;
}


body,
.text-wrap,
a,
p {
    font-family: "Lexend", Helvetica !important;
    font-size: 16px !important;
}

.landing-top-header::before {
    background-image: none;
}

.landing-page .main-demo-1 h4,
.landing-page .main-demo-1 h1,
.landing-page .main-demo-1 h6 {
    color: #243037;
}

ul.side-menu li {
    list-style: none;
}

.landing-page ul li,
.landing-page ul.list li {
    list-style-type: disc !important;
    text-align: justify;
}

.landing-page.horizontalmenu .slide {
    list-style: none !important;
}

.demo-screen-headline {
    padding-top: 50px !important;
    padding-bottom: 50px;
}

.demo-screen-headline h1 {
    font-size: 60px;
}

@media (min-width: 992px) {

    .landing-page.horizontalmenu .side-menu>li>a.active,
    .landing-page.horizontalmenu .side-menu>li>a {
        color: #182359;
    }

    .landing-page .top.sticky.sticky-pin .app-sidebar {
        background-color: var(--bg-white) !important;
    }
}

.main-header {
    background-color: var(--bg-white) !important;
}

.btn-primary {
    color: var(--bg-white);
    background-color: var(--primary-bg-color);
    border-color: var(--primary-bg-color);
}

#Contact div.services-statistics div.card {
    border: 1px solid #243037 !important;
}

#Contact div.services-statistics div.card div.card-body {
    min-height: 340px;
}

.landing-page #faqs .card.bg-primary-transparent .card-header {
    border-left: none !important;
}

.landing-page #faqs .card.bg-primary-transparent .card-body {
    border-left: none !important;
    border-radius: 0;
}

.landing-page #faqs .card {
    margin-bottom: 0;
    border-radius: 0;
}

.landing-page .side-menu__item.active .side-menu__label::before,
.landing-page .landing-page .side-menu__item:hover .side-menu__label::before {
    transform: scale(1, 1) !important;
    transform-origin: left center !important;
}

.landing-page .side-menu__item.active .side-menu__label {
    color: var(--primary-bg-color) !important;
}

.landing-page .owl-controls .owl-page {
    width: 15px !important;
    height: 15px !important;
}

.landing-page .owl-controls .owl-page.active {
    border-color: var(--primary-bg-color) !important;
}

.landing-page .slick-prev:before,
.landing-page .slick-next:before {
    background: var(--primary-bg-color);
}

.form-control {
    color: #5c5a60
}

.testimonial-owl-landing::before {
    width: 100%;
    background-size: cover !important;
    background: url('/build/assets/landing/images/bg_slider_3.png') !important;
}

.text-secondary {
    color: var(--orange) !important;
}

.landing-page .landing-top-header ul li {
    list-style: none !important;
}

.landing-page .top-footer h6::before {
    border: 2px solid var(--orange) !important;
}

#main {
    position: relative;
    width: 100%;
    border-radius: 25%;
}

#main img.main-image {
    width: 100%;
    /* height: auto; */
    /* box-shadow: 0 10px 20px #dbdbdb;
    -webkit-filter: blur(1.2px);
    filter: blur(1.2px); */
}

#carouselExampleCaptions {
    position: absolute !important;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    overflow: hidden;
    /* background: rgba(0, 0, 0, 0.4); */
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.carousel-item img {
    height: 100%;
    object-fit: cover;
}

.carousel-item a {
    font-size: 20px !important;
}



.truncate-lines {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}


.counter-container {
    position: relative;
    width: 300px;
    height: 300px;
    overflow: hidden;
}

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


.counter,
.counter2 {
    font-size: 48px;
    font-weight: bold;
}



.stat-container {
    width: 100%;
    border-radius: 1em;
    overflow: hidden;
    box-shadow: 0 10px 20px #dbdbdb;
    padding: 0;
    box-sizing: border-box;
}

#main img.main-image,
.palette {
    height: 375px !important;
}

.palette {
    display: flex;
    /* height: 100%; */
    width: 100%;
    margin: 0;
    min-height: 320px;
    flex-direction: column;
}

.color {
    flex: 2;
    display: flex;
    align-items: center;
    justify-content: start;
    color: white;
    font-weight: 600;
    letter-spacing: 1px;
    transition: flex 0.3s ease, transform 0.3s ease;
    position: relative;
    text-align: center;
    overflow: hidden;
    padding: 10px;
    box-sizing: border-box;
    background: white;
    width: 100%;
}

.palette .color:first-child {
    border-top-left-radius: 1em;
    /* border-bottom-left-radius: 1em; */
}

.palette .color:last-child {
    /* border-top-right-radius: 1em; */
    border-bottom-right-radius: 1em;
}

.color .label {
    display: block;
    font-size: 14px;
    line-height: 1.2;
    /* transform: rotate(-90deg); */
    transform-origin: center;
    white-space: nowrap;
}

.color .description {
    display: none;
    font-size: 12px;
    margin-top: 10px;
    text-align: center;
    opacity: 0.7;
}

.color:nth-child(1) {
    background: var(--primary-bg-color);
}

.color:nth-child(2) {
    background: var(--orange);
}

.color:nth-child(3) {
    background: var(--primary-bg-color);
}

.color.expanded {
    flex: 2;
    transform: scale(1);
    z-index: 10;
    justify-content: center;
    text-align: center;
    background-color: white;
    color: black;
}

.color.expanded .icon {
    display: none;
}

.color.expanded .description {
    display: block;
    opacity: 1;
}

.color.expanded .label {
    display: none;
}

.color.expanded .img-container {
    display: none;
}

.color:hover {
    flex: 2;
    transform: scale(1.1);
    z-index: 10;
}

.color:not(.expanded):not(:hover) {
    flex: 0.8;
}

/* .color:not(.expanded) .label {
    transform: rotate(-90deg);
} */
.palette .color:hover:not(.expanded) {
    flex: 1.1;
    transform: scale(1.1);
}