/* Place your unminified version of the theme styles here. */

* {
    font-family: "Poppins", sans-serif
}

:root {
    --primary: #F04B22;
    --secondary: #062c46;
    --light: #F04B22;
    --white: #fff;
    --black: #141414
}

.small-heading {
    color: var(--black);
    font-weight: 600;
    text-transform: uppercase;
    width: fit-content
}

#progress-value {
    background: var(--black)
}

.main-heading {
    color: var(--black);
    text-transform: capitalize
}

.primary-btn {
    background: var(--primary);
    color: var(--white);
    transition: all 1s ease-in-out 0s
}

.primary-btn:before {
    background: var(--white);
    content: "";
    height: 125px;
    left: -100%;
    opacity: 0;
    position: absolute;
    top: -50px;
    transform: rotate(55deg);
    transition: all 3s cubic-bezier(.19, 1, .22, 1);
    width: 80px
}

.primary-btn:hover:before {
    left: 200%;
    opacity: .6;
    transform: translateY(-3px)
}

.primary-btn:hover {
    background: var(--light)
}

.hero-btn {
    background: transparent !important;
    border: 2px solid var(--white)
}

.hero-btn svg {
    transform: rotate(320deg);
    fill: var(--white)
}

.hero-btn svg path {
    transition: transform .38s cubic-bezier(.37, .08, .02, .93), opacity .18s ease-out
}

.hero-btn svg path:last-child {
    opacity: 0;
    transform: translateX(-110%)
}

.hero-btn:hover svg path:first-child {
    opacity: 0;
    transform: translateX(110%)
}

.hero-btn:hover svg path:last-child {
    opacity: 1;
    transform: translate(0)
}

.scrolled {
    animation: bounceInDown 1s;
    animation-duration: 1s;
    animation-fill-mode: both;
    background: var(--white);
    box-shadow: 0px 2px 6px 0px rgb(0 0 0 / 12%)
}

@keyframes bounceInDown {
    0% {
        opacity: 0;
        transform: translateY(-2000px)
    }

    60% {
        opacity: 1;
        transform: translateY(0)
    }

    80% {
        transform: translateY(-10px)
    }

    to {
        transform: translateY(0)
    }
}

.dropdown ul {
    left: 0;
    opacity: 0;
    position: absolute;
    top: 100%;
    visibility: hidden
}

.mobile_dropdown>svg {
    transform: rotate(180deg)
}

.dropdown.mobile_dropdown>ul {
    background: #1410105c;
    border: 1px solid #64aa4421;
    border-radius: 5px;
    opacity: 1;
    flex: 100%
}

li.dropdown {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

li.dropdown span {
    flex: 1;
    cursor: pointer
}

nav ul li a {
    flex: 0
}

nav ul li {
	line-height:1.4;
    opacity: 0;
    transform: translateX(100px);
    transition: all .8s cubic-bezier(.23, 1, .32, 1), opacity .8s ease
}

.navmenu nav ul li {
    opacity: 1;
    transform: translateX(0)
}

.navmenu nav ul li:first-child {
    transition-delay: 0s
}

.navmenu nav ul li:nth-child(2) {
    transition-delay: .05s
}

.navmenu nav ul li:nth-child(3) {
    transition-delay: .1s
}

.navmenu nav ul li:nth-child(4) {
    transition-delay: .15s
}

.navmenu nav ul li:nth-child(5) {
    transition-delay: .2s
}

.navmenu nav ul li:nth-child(6) {
    transition-delay: .25s
}

.navmenu nav ul li:nth-child(7) {
    transition-delay: .3s
}

nav ul li:nth-child(8) {
    transition-delay: .3s
}

nav ul li a:hover {
    color: var(--light)
}

.menu {
    background: var(--black);
    transition: all .9s cubic-bezier(.23, 1, .32, 1)
}

.menu_overlay {
    background: #00000040;
    height: 100vh;
    inset: 0;
    position: fixed;
    transform: translateX(-100%);
    transition: all .9s cubic-bezier(.23, 1, .32, 1);
    width: 75%
}

.active_overlay {
    transform: translate(0)
}

.hero-content h1 {
    font-weight: 600
}

.features {
    background: var(--white);
    border-radius: 4px
}

.feature-title {
    color: var(--black)
}

.icons {
    background: var(--secondary);
    outline: 1px solid var(--secondary)
}

.success {
    background: var(--white);
    color: var(--black)
}

.success p span {
    background: var(--light);
    padding: 2px 5px
}

.air-name,
.projects-title {
    color: var(--white)
}

.projects-title:after {
    border-left: 1px solid #ffffff75;
    content: "";
    height: 50px;
    left: 11px;
    position: absolute;
    top: 105%;
    width: 0;
    z-index: 2
}

.project-cards:hover img {
    transform: scale(1.3)
}

:is(.video_slider, .projects_slider, .awards-slider) .slick-active button {
    background: var(--primary) !important;
    width: 30px !important
}

.bg-secondary {
    background: var(--secondary)
}

.bg-lighty {
    background: #f5f5f5
}

.counter-heading .main-heading+div {
    background: var(--light)
}

.testimonial-items:before {
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' fill='none' viewBox='0 0 48 48'%3E%3Cpath fill='%23bfbfbf' fill-rule='evenodd' d='M18.853 9.116Q7.558 16.37 6.303 26.003C5 36 13.94 40.893 18.47 36.497s1.815-9.977-1.465-11.503-5.286-.994-4.936-3.032 5.016-7.69 9.116-10.323a.75.75 0 0 0 .114-1.02L20.285 9.3c-.44-.572-.862-.55-1.432-.185m19.826.001q-11.295 7.254-12.55 16.887C24.825 36 33.765 40.893 38.295 36.497s1.815-9.977-1.466-11.503-5.286-.994-4.936-3.032 5.017-7.69 9.117-10.323a.75.75 0 0 0 .113-1.02L40.11 9.3c-.44-.572-.862-.55-1.431-.185' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat 50%;
    content: "";
    height: 80px;
    left: 50%;
    position: absolute;
    top: 15%;
    transform: translate(-50%, -50%);
    width: 80px
}

.testimonial_slider .slick-active button {
    animation: myAnim .9s ease 0s infinite alternate both
}

@keyframes myAnim {
    0% {
        transform: scale(1.05) translateY(-5px)
    }

    to {
        transform: scale(1.09) translateY(5px)
    }
}

.alternative-bg:before {
    background: #d9e1c3;
    content: "";
    height: 40%;
    inset: 0;
    position: absolute;
    width: 100%;
    z-index: -1
}

.card-img {
    background-color: #edf2f5
}

.calender {
    background: var(--light);
    color: var(--white)
}

.calender span {
    display: block;
    line-height: 1
}

.calender span:last-child {
    font-size: 13px
}

.card-img:before {
    background: linear-gradient(90deg, #fff0 0, hsl(0 0% 100% / .3));
    content: "";
    height: 100%;
    left: -75%;
    position: absolute;
    top: 0;
    transform: skewX(-25deg);
    width: 50%;
    z-index: 2
}

.creative-cards:hover .card-img:before {
    animation: flash 1s
}

@keyframes flash {
    to {
        left: 125%
    }
}

.catg {
    color: var(--light);
    transition: all .3s ease-in-out
}

.catg:hover {
    color: var(--primary);
    letter-spacing: .5px
}

.crd-title,
.flexx-resources-card-content .crd-title {
    color: var(--black);
    transition: all .3s ease-in-out
}

.resources-card-content .down-btn:hover {
    text-decoration: underline
}

.crd-title:hover:not(.flexx-newsletters-card div.crd-title, .flexx-newsletters-card-grid div.crd-title) {
    color: var(--primary)
}

.content-details :is(a, span),
.crd-btn {
    color: #000000a1;
    transition: all .3s ease-out 0s;
    width: fit-content
}

.crd-btn:hover svg {
    transform: translateX(-110px);
    stroke: var(--light)
}

.crd-btn:hover {
    color: var(--light);
    text-decoration: underline;
    transform: translateX(10px)
}

.crd-author:before {
    background: #000000a1;
    border-radius: 50%;
    content: "";
    height: 5px;
    width: 5px
}

.crd-author:hover {
    color: var(--light)
}

.footer {
    background: var(--secondary)
}

.footer-title:before {
    background: var(--light);
    content: "";
    height: 10px;
    width: 10px
}

.footer ul a {
    color: var(--white);
    transition: all .2s ease-out 0s
}

.footer ul a:hover:not(.social ul li a) {
    color: var(--light);
    transform: translateX(10px)
}

.footer-form {
    background: var(--white);
    border-radius: 10px;
    box-shadow: 0 4px 5px #9b85851f
}

.social {
    border-top: 1px solid #aeaeae57
}

.footer-form input {
    border-radius: 5px;
    outline: none
}

.form-title {
    color: var(--black)
}

.footer-btm {
    border-top: 1px solid #cccccc6b
}

.social ul li a {
    border: 1px solid var(--black);
    transition: all .3s ease-out 0s
}

.social ul li a:hover {
    background: var(--light);
    transform: rotate(1turn);
    fill: var(--white);
    border-color: var(--white)
}

.portfolio .tab button.active,
.portfolio .tab button:hover {
    background: var(--light);
    color: var(--white)
}

@keyframes fadeEffect {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.portfolio-card:hover .labeled {
    transform: translateY(30px)
}

.fs-20px {
    font-size: 20px !important
}

.portfolio-title:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px
}

.portfolio-content {
    background: var(--light);
    transform: translateY(100%);
    transition: .4s cubic-bezier(0, 0, .3642, 1)
}

.portfolio-card:hover img {
    transform: scale(1)
}

.portfolio-content :is(.portfolio-title, .primary-btn, p) {
    opacity: 0;
    transition-delay: 0s;
    transition: .4s cubic-bezier(0, 0, .3642, 1)
}

.portfolio-card:hover .portfolio-content :is(.portfolio-title, .primary-btn, p) {
    opacity: 1;
    transition-delay: .2s
}

.portfolio-card:hover .portfolio-content {
    transform: translateY(10%)
}

.locations {
    background: var(--white);
    box-shadow: 0 0 30px 0 rgb(0 33 85 / .1);
    width: 100%
}

.location-content ul :is(li, span, a) {
    color: #565969;
    fill: var(--primary);
    line-height: 1.4
}

.contact-form :is(input, select, textarea) {
    border-bottom: 1px solid var(--black);
    color: var(--black);
    padding: 5px 15px 15px 0;
    transition: .4s cubic-bezier(0, 0, .3642, 1)
}

.contact-form :is(input, textarea)::placeholder {
    color: #0000004d;
    font-size: 15px
}

.flexx-breadcrumbs,
.flexx-breadcrumbs a {
    color: #a39d9d
}

.inner-page-block .flexx-breadcrumbs a {
    color: var(--white)
}

.flexx-breadcrumbs a:hover:not(.inner-page-block .flexx-breadcrumbs a) {
    color: var(--black)
}

.contact-form label sup {
    color: red
}

.cta-btn:hover {
    background: var(--light);
    border-color: #fff0;
    color: var(--white);
    fill: var(--white)
}

.address-items,
.address-items :is(a, li) {
    color: #fff
}

.contact-form :is(input, select, textarea):focus {
    box-shadow: 0 5px 0 0 #b5e99d
}

.address-items:nth-child(2)>div {
    font-size: 22px
}

.address-items:nth-child(3)>div {
    font-size: 18px
}

.address-items ul li a:hover {
    color: var(--light)
}

.service-card {
    border: 1px solid #cccccc42;
    border-radius: 5px;
    box-shadow: 0 4px 30px rgb(1 19 60 / .08)
}

.service-card>img {
    filter: brightness(0) invert(1);
    object-fit: cover;
    transition: all .35s ease
}

.crd-btn,
.crd-btn svg {
    transition: all .3s ease-out 0s;
    stroke: var(--black)
}

.service-card:hover>img {
    filter: brightness(30%) invert(0)
}

.service-card:hover .service-content img {
    transform: translateY(-100px)
}

.service-card:hover .service-content {
    transform: translateY(-70px)
}

.service-title:hover:not(.work-content .service-title) {
    transform: translateX(10px)
}

.service-card:hover :is(.service-title, .crd-btn, .crd-btn svg) {
    color: var(--white);
    stroke: var(--white)
}

.years span {
    font-size: 10vw;
    font-weight: 700;
    line-height: .9
}

.years sub {
    font-size: 32px;
    font-weight: 600;
    line-height: 1.3
}

.post-details span {
    color: #d6d6d6;
    font-size: 14px
}

.breif span {
    color: #fff
}

.lightbox-container.active {
    opacity: 1;
    pointer-events: all
}

.lightbox-container.active .lightbox-image-wrapper {
    transform: scale(1)
}

#close,
.lightbox-btn {
    cursor: pointer;
    position: absolute;
    transition: all .4s ease-in-out
}

.slideleft,
.slideright {
    animation-duration: .5s;
    animation-timing-function: ease
}

.slideleft {
    animation-name: slideleft
}

.slideright {
    animation-name: slideright
}

@keyframes slideright {
    33% {
        opacity: 0;
        transform: translateX(300px)
    }

    66% {
        opacity: 0;
        transform: translateX(-300px)
    }
}

@keyframes slideleft {
    33% {
        opacity: 0;
        transform: translateX(-300px)
    }

    66% {
        opacity: 0;
        transform: translateX(300px)
    }
}

.team-card:hover :is(.img-wrap, .img-wrap img) {
    opacity: .6;
    transition: all .4s cubic-bezier(.18, .55, 1, 1)
}

.team-card {
    border: 1px solid #cccccc59;
    box-shadow: 3px -2px 15px 0 #918d8d40
}

.team-card,
.team-card .team-detl-block {
    transition: all .4s cubic-bezier(.18, .55, 1, 1)
}

.team-card .team-detl-block {
    backdrop-filter: blur(4.5px);
    background: #ffffffe6;
    border-radius: 10px
}

.team-card .team-detl-block:after {
    background: url(../../../bae2aec77f3b4ed69c97.webp) no-repeat;
    bottom: 0;
    content: "";
    filter: brightness(30) invert(8);
    height: 64px;
    position: absolute;
    width: 100%;
    z-index: -2
}

.team-member a:hover {
    color: var(--light)
}

.client-card .logo {
    border: 1px solid #ddd;
    border-radius: 4px
}

.client-card .logo img {
    filter: grayscale(1);
    object-fit: contain
}

.client-card:hover .logo img {
    filter: unset
}

.client-card:hover {
    transform: translateY(-8px);
    transition: all .3s ease
}

.benifit-card {
    background: var(--white);
    transform: scale(1);
    transform-origin: 50% 100%;
    transition: all .3s ease
}

.benifit-card:hover {
    box-shadow: 0 15px 50px -30px hsl(0 0% 9% / .4), 40px 0 30px hsl(0 0% 9% / .1);
    transform: perspective(600px) rotateY(-5deg) scale(1.05) translate(-2%);
    transform-origin: center
}

.accordions summary {
    border-radius: 5px;
    cursor: pointer;
    font-weight: 700
}

.accordions details .content {
    background: #f5f5f5;
    border-left: 3px solid var(--light)
}

.accordions .content strong {
    font-size: 18px;
    font-weight: 700
}

[class*=flexx-newsletters-card] {
    background: var(--white);
    border-left: 4px solid var(--light);
    border-radius: 5px;
    box-shadow: 0 0 4px 0 rgb(0 0 0 / .2)
}

.flexx-resources-card-content .crd-title {
    font-size: 18px;
    line-height: 1.6
}

.modal-content .people-detl .people-name {
    color: var(--balck);
    font-size: 18px;
    font-weight: 700
}

.pagination .page-numbers {
    background: #35ad451c;
    border-radius: 50%;
    color: #3c3c3c;
    line-height: 45px;
    transition: all .5s ease .2s
}

.pagination .page-numbers:before {
    background: var(--light);
    border-radius: 50%;
    content: "";
    height: 12px;
    left: 50%;
    position: absolute;
    top: -15px;
    transform: translateX(-50%);
    transition: all .5s ease 0s;
    width: 12px;
    z-index: -1
}

.pagination .page-numbers.active,
.pagination .page-numbers:focus,
.pagination .page-numbers:hover {
    background: var(--light);
    box-shadow: 0 0 10px -2px rgb(0 0 0 / .3);
    color: var(--white)
}

.pagination .page-numbers.active:before,
.pagination .page-numbers:hover:before {
    opacity: 0;
    top: 50%
}


/* //karan */

.single-blog strong {
    font-weight: 600 !important;
}

.blog-details ul li p {
    margin-top: 15px;
}

/* .blog-details ul li {
    list-style-type: disc
} */

.blog-details ol li {
    list-style: auto
}

#breadcrumbs {
    color: #ffffffbd;
}

#breadcrumbs span span.breadcrumb_last {
    color: #fff !important;
}

@media (width <=600px) {
    #tableofcontent {
        padding: 20px !important;
    }
}


.img-placeholder,
.img-placeholder img {
    border-radius: 8px;
    width: 100%;
}

.img-placeholder {
    background-color: #c7c7c7;
    aspect-ratio: 16 / 9;
}

.sources {
    background: #f04b221c;
    padding: 15px 25px;
    border-radius: 6px;
    border-right: 3px solid var(--primary);
}

.sources:not(:last-child) {
    margin-bottom: 20px;
}

.sources a:hover {
    text-decoration: underline
}


.text-light {
    font-size: 18px;
    font-weight: 600;
}

.blog-details ul{
	list-style:disc !important;
}