﻿/* 
Theme : DP Dubai Landing Page,
Version : 1.0,
Author : DigitalPiloto
*//**************************************
                General
**************************************/
:root
{
    --theme-color: #f58220;
    --theme-color-gradient: -webkit-linear-gradient(90deg,#efac0a 0%,#f58220 100%);
    --theme-blue-gradient: -webkit-linear-gradient(-94deg,#128ed9 0%,#0053d9 100%);
    --theme-text-dark: #121212;
    --theme-bg-blue: #091f3f;
    --theme-dec-gray: #121212;
    --theme-light: #fff;
    --shadow-sm: 0px 11px 18px 0px rgba(0,0,0,.13);
    --bg-gray: #f0f0f0;
}
*, *::before, *::after
{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
html
{
    font-size: 100%;
    box-sizing: inherit;
    scroll-behavior: smooth;
    height: -webkit-fill-available;
}
html::-webkit-scrollbar
{
    width: 2px;
    background-color: #7595ff4d;
}
html::-webkit-scrollbar-thumb
{
    background: var(--theme-blue-gradient);
    border-radius: 50rem;
}
html.lenis
{
    height: auto;
}
.lenis.lenis-smooth
{
    scroll-behavior: auto!important;
}
.lenis.lenis-smooth [data-lenis-prevent]
{
    overscroll-behavior: contain;
}
.lenis.lenis-stopped
{
    overflow: hidden;
}
.lenis.lenis-scrolling iframe
{
    pointer-events: none;
}
a, button
{
    cursor: pointer;
    border: none;
    outline: none;
    user-select: none;
    background: none;
    box-shadow: none;
}
ol, ul
{
    padding: 0;
    margin: 0;
    list-style-type: none;
}
body
{
    font-size: 14px;
    font-family: 'Roboto Medium';
    font-weight: 400;
    color: var(--theme-text-dark);
    scroll-padding: 500px;
}
a, a:hover, a:focus
{
    color: currentColor;
    transition: all .4s;
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
    text-decoration: none;
}
h1, h2, h3, h4
{
    transition: all .4s;
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
}
p
{
    margin-top: 0;
    margin-bottom: 1rem;
    font-family: 'Zilla Slab Regular';
}
main
{
    overflow: hidden;
}
img
{
    max-width: 100%;
    height: auto;
}/**************************************
      Menu
**************************************/
.navTrigger
{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1000;
    width: 90px;
    height: 60px;
    background: none;
    border: 0;
    outline: none;
    border: none;
    cursor: pointer;
    -webkit-appearence: none;
    -webkit-tap-highlight-color: transparent;
}
.navTrigger:focus
{
    outline: none;
}
.navTrigger svg
{
    width: 90px;
    height: 60px;
    top: 0;
    left: 0;
    stroke: var(--theme-light);
    stroke-width: 4px;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    display: block;
    position: absolute;
    background-color: var(--theme-color);
}
.navTrigger svg path
{
    transition: stroke-dasharray var(--duration,.85s) var(--easing,ease) var(--delay,0s),stroke-dashoffset var(--duration,.85s) var(--easing,ease) var(--delay,0s);
    stroke-dasharray: var(--array-1,26px) var(--array-2,100px);
    stroke-dashoffset: var(--offset,126px);
    transform: translateZ(0);
}
.navTrigger svg path:nth-child(2)
{
    --duration: .7s;
    --easing: ease-in;
    --offset: 100px;
    --array-2: 74px;
}
.navTrigger svg path:nth-child(3)
{
    --offset: 133px;
    --array-2: 107px;
}
.navTrigger.active svg
{
    stroke: var(--theme-light);
}
.navTrigger.active svg path
{
    --offset: 57px;
}
.navTrigger.active svg path:nth-child(1), .navTrigger.active svg path:nth-child(3)
{
    --delay: .15s;
    --easing: cubic-bezier(.2,.4,.2,1.1);
}
.navTrigger.active svg path:nth-child(2)
{
    --duration: .4s;
    --offset: 2px;
    --array-1: 1px;
}
.navTrigger.active svg path:nth-child(3)
{
    --offset: 58px;
}
.navMenu
{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    text-align: center;
    background: var(--white);
    opacity: 0;
    z-index: -1;
    visibility: hidden;
    transition: all .375s;
    width: 35%;
}
.navMenu.active
{
    opacity: 1;
    z-index: 100;
    visibility: visible;
}
.navMenu.active::before
{
    transform: skew(-14deg) translateX(0);
}
.navMenu.active li
{
    opacity: 1;
    transform: translateY(0);
}
.navMenu::before
{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -15px;
    background: var(--theme-color-gradient);
    transform-origin: 0 0;
    transform: skew(-14deg) translateX(-120%);
    transition: all .275s .1s;
}
.navMenu ul
{
    list-style: none;
    padding: 0;
    display: inline-flex;
    flex-direction: column;
    height: 93%;
    align-items: flex-end;
    justify-content: center;
    transform: translateX(-18%) skew(-16deg);
}
.navMenu ul li
{
    display: block;
    margin: .5rem 0;
    text-align: right;
    opacity: 0;
    transform: translateY(-10px);
}
.navMenu ul li a
{
    position: relative;
    left: 0;
    display: block;
    padding: 12px 0;
    color: var(--theme-light);
    font-size: 30px;
    text-decoration: none;
    transform: skew(16deg);
    transition: .25s;
}
.navMenu ul li a:hover
{
    left: 10px;
}
.navMenu ul li:nth-child(1)
{
    transition: all 275ms 275ms;
}
.navMenu ul li:nth-child(2)
{
    transition: all 275ms 325ms;
}
.navMenu ul li:nth-child(3)
{
    transition: all 275ms 375ms;
}
.navMenu ul li:nth-child(4)
{
    transition: all 275ms 425ms;
}
.navMenu ul li:nth-child(5)
{
    transition: all 275ms 475ms;
}
.header
{
    position: fixed;
    width: 100%;
    height: auto;
    padding: 13px 0;
    padding-left: 3%;
    left: 0;
    right: 0;
    z-index: 200;
    margin: 0 auto;
    background-color: #fff0;
    transition: ease .3s;
    -webkit-transition: ease .3s;
    -moz-transition: ease .3s;
    -ms-transition: ease .3s;
    -o-transition: ease .3s;
}
header
{
    position: relative;
    transition: all .4s;
}
header.sticky
{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: var(--theme-color);
    box-shadow: var(--shadow-sm);
}
.call-btn
{
    position: relative;
    padding-left: 35px;
    display: inline-block;
    position: absolute;
    right: 160px;
    top: 8px;
}
.call-btn span
{
    position: absolute;
    left: 0;
    bottom: 6px;
}
.call-btn p
{
    color: #fff;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 158.9%;
    margin: 0;
}
.call-btn h4
{
    color: #fff;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 158.9%;
}
.call-btn:hover h4
{
    color: #f58220;
}
header.sticky .call-btn:hover h4
{
    color: #0053d9;
}
@media(max-width: 991.98px)
{
    .call-btn span
    {
        position: relative;
        left: 0;
        bottom: 0;
        width: 48px;
        height: 48px;
        background: #f58220;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .call-btn :is(p,h4)
    {
        display: none;
    }
    .navTrigger, .navTrigger svg
    {
        width: 70px;
    }
    .call-btn
    {
        right: 92px;
        top: 13px;
    }
    header.sticky .call-btn span
    {
        background: #0053d9;
    }
}
@media(max-width: 575.98px)
{
    .call-btn span
    {
        width: 35px;
        height: 35px;
        padding: 11px;
    }
}
#cursor
{
    position: fixed;
    top: -5px;
    left: -5px;
    width: 10px;
    height: 10px;
    background-color: var(--theme-color);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
}
#cursor-border
{
    --size: 40px;
    position: fixed;
    top: calc(var(--size) / -2);
    left: calc(var(--size) / -2);
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--theme-color);
    pointer-events: none;
    transition: top .15s ease-out,left .15s ease-out,width .15s ease-out,height .15s ease-out,background-color .15s ease-out;
    z-index: 9999;
}
.menu-overlay.active
{
    position: fixed;
    inset: 0;
}/**************************************
                Helper Class
**************************************/
.section-gap
{
    padding: 60px 0;
}
.primary-btn
{
    border: 0;
    padding: 10px 15px;
    background: var(--theme-color);
    font-size: 20px;
    color: var(--theme-light);
    line-height: 1.4;
    border-radius: 4px;
    transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    display: inline-block;
    mix-blend-mode: difference;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 1;
}
.primary-btn:after, .secondary-btn::after
{
    content: '';
    background: var(--theme-blue-gradient);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    scale: 1 0;
    z-index: -1;
    transition: all .4s;
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
}
.primary-btn:hover:after, .secondary-btn:hover:after
{
    scale: 1 1;
}
.primary-btn:hover
{
    color: var(--theme-light);
}
.container
{
    max-width: 1200px;
}
.btn-group
{
    display: flex;
    align-items: center;
    gap: 10px;
}
.btn-group img
{
    transition: all .5s;
}
.btn-group img:hover
{
    transform: scale(1.1);
}
.fixed-btn
{
    position: fixed;
    top: 45%;
    right: 7px;
    z-index: 99;
    width: 40px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.enq-btn
{
    position: fixed;
    top: 20%;
    right: 5px;
    height: 38px;
    font-weight: 400;
    text-align: center;
    z-index: 9;
    transform: rotate(-90deg);
    transform-origin: bottom right;
    border-radius: 0;
    overflow: clip;
    display: flex;
    border-radius: 0;
    background-image: var(--theme-blue-gradient);
}
.enq-btn::after, .enq-btn::before
{
    content: '';
    content: '';
    position: absolute;
    z-index: -1;
    background-image: var(--theme-color-gradient);
    inset: 0;
    scale: 1 0;
    transition: scale 450ms;
    transform-origin: top;
}
.enq-btn:hover::after, .enq-btn:focus-visible::after
{
    scale: 1 1;
    transform-origin: right;
}
.enq-btn a
{
    font-size: 18px;
    letter-spacing: 0;
    line-height: 37px;
    color: var(--theme-light);
    padding: 0 13px;
    font-weight: 100;
    font-family: 'Roboto Regular';
}
.enq-btn a img
{
    transform: rotate(90deg);
}/*************************************
                Home Page
**************************************/
.hero
{
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}
.hero h1
{
    font-size: 45px;
    color: var(--theme-light);
    font-weight: bold;
    line-height: 1.152;
    margin-bottom: 10px;
}
.hero p
{
    font-size: 18px;
    color: var(--theme-light);
    line-height: 1.278;
}
.banner-content
{
    padding-block: 40%;
    position: relative;
    z-index: 1;
}
.harrow
{
    margin-bottom: -25px;
}/************************************
   Awards
************************************/
.awards
{
    position: relative;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.awards .left
{
    background: var(--theme-color);
    position: relative;
    width: 30%;
    display: flex;
    align-items: center;
    padding-left: 5%;
}
.awards .left:after, .awards .left::before
{
    content: '';
    display: block;
    margin: 30px auto;
    width: 155px;
    height: 155px;
    border-top: 52px solid var(--theme-bg-blue);
    border-left: 52px solid var(--theme-bg-blue);
    position: absolute;
    right: -42px;
    transform: rotate(136deg);
}
.awards .left::before
{
    border-top: 52px solid var(--theme-light);
    border-left: 52px solid var(--theme-light);
    right: -55px;
    z-index: 1;
}
.awards .left h4
{
    font-size: 50px;
    color: var(--theme-light);
    font-weight: bold;
    line-height: 1.146;
    padding-block: 9%;
}
.award-logo
{
    width: 70%;
    position: relative;
    z-index: 2;
    padding-left: 2%;
    display: flex;
    align-items: center;
    gap: 30px;
    padding-right: 4%;
}
.award-logo img
{
    width: auto;
    height: 110px;
}
.about
{
    position: relative;
    padding-block: 80px;
}
.about-content h2
{
    position: relative;
}
.about-content h2::after
{
    content: '';
    background-image: url(../img/header-arrow2.webp);
    width: 214px;
    height: 59px;
    display: block;
    position: absolute;
    top: -48px;
}
h2
{
    font-size: 38px;
    color: #121212;
    font-weight: bold;
    line-height: 1.19;
    margin-bottom: 10px;
}
.about p
{
    font-size: 20px;
    line-height: 1.4;
}
.more-text
{
    transition: all .5s;
}
.show-more .more-text
{
    display: none;
}
.box
{
    border-style: solid;
    border-width: 5px;
    border-color: var(--theme-light);
    background-color: var(--theme-light);
    box-shadow: 0 8px 51px 0 rgba(0,0,0,.17);
    height: 115px;
    position: relative;
    padding: 10px;
    border-radius: 15px;
    transition: all .5s;
}
.box h3
{
    font-size: 50px;
    color: var(--theme-text-dark);
    font-weight: bold;
    line-height: .6;
    margin-bottom: 16px;
    margin-top: 16px;
}
.box p
{
    font-size: 24px;
    font-family: 'Roboto Regular';
    color: var(--theme-text-dark);
    line-height: 1.25;
}
.plus::after
{
    content: '+';
}
.box span
{
    border-radius: 50%;
    background-color: #f2f3f5;
    width: 62px;
    height: 62px;
    position: absolute;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box:hover span
{
    background-image: var(--theme-blue-gradient);
}
.box:hover span img
{
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(249deg) brightness(108%) contrast(108%);
}
.counter
{
    margin-top: 3%;
}
.case-studies-slider .box
{
    border-radius: 9px;
    border: 1px solid #d0d0d0;
    background: #fff;
    box-shadow: 0 4px 24px 0 rgba(0,0,0,.15);
    padding: 0 33px;
    text-align: center;
    padding-bottom: 70px;
    height: auto;
}
.case-studies-slider .box .case-studues-img
{
    margin-bottom: 30px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.case-studies-slider .box img
{
    margin: auto;
}
.case-studies-slider .box h3
{
    background: linear-gradient(90deg,#fff 0%,#ffe4cd 53%,#fff 100%);
    text-align: center;
    color: #171717;
    font-size: 24px;
    padding-block: 4px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.case-studies-slider .item .primary-btn
{
    transform: translateY(-36px);
    mix-blend-mode: normal;
}
.case-studies-slider .item
{
    text-align: center;
}
.case-studies-slider .slick-list
{
    margin: 0 -15px;
}
.case-studies-slider .slick-slide
{
    margin: 0 15px;
}
@media(max-width: 575.98px)
{
    .case-studies-slider .box
    {
        padding: 0 15px;
        padding-bottom: 40px;
    }
    .case-studies-slider .box h3
    {
        font-size: 16px;
    }
    .case-studies-slider .slick-list
    {
        margin: 0 -5px;
    }
    .case-studies-slider .slick-slide
    {
        margin: 0 5px;
    }
    .case-studies-slider .box .case-studues-img
    {
        margin-bottom: 10px;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .case-studies-slider .item .primary-btn
    {
        transform: translateY(-30px);
        mix-blend-mode: normal;
    }
}/* Modal */
.fade
{
    transition: opacity .15s linear;
}
.modal.show .modal-dialog
{
    transform: none;
}
.modal.fade .modal-dialog
{
    transition: transform .3s ease-out;
    transform: translate(0,-50px);
}
.modal-dialog
{
    position: relative;
    width: auto;
    margin: 1.75rem;
    pointer-events: none;
}
.modal-dialog-centered
{
    display: flex;
    align-items: center;
    min-height: calc(100% - 1.75rem * 2);
    height: 100%;
}
.modal-dialog
{
    max-width: 800px;
    margin-right: auto;
    margin-left: auto;
}
.modal-content
{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #000913;
    box-shadow: 0 0 18px 0 #88fee7;
    background-clip: padding-box;
    border-radius: 20px;
    outline: 0;
    overflow: hidden;
}
.modal form
{
    padding: 30px 10px;
}
.enqform .btn-close
{
    position: absolute;
    right: 0;
    top: 0;
    box-shadow: 0 0 3px 0 #00000040;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #ffffff1f;
    opacity: 1;
    font-size: 25px;
    color: #88fee7;
    z-index: 10;
    transition: all .4s;
}
.enqform .btn-close:hover
{
    background: #fff0;
}
.modal .contact
{
    background-color: #000913;
}
.modal .contact img
{
    z-index: 1;
    bottom: 0;
    left: -62px;
    width: 70%;
}
.modal
{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1055;
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}
.modal-backdrop
{
    --bs-backdrop-zindex: 1050;
    --bs-backdrop-bg: #000;
    --bs-backdrop-opacity: .5;
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--bs-backdrop-zindex);
    width: 100vw;
    height: 100vh;
    background-color: var(--bs-backdrop-bg);
}
.modal-backdrop.fade
{
    opacity: 0;
}
.modal-backdrop.show
{
    opacity: var(--bs-backdrop-opacity);
}
.offcanvas
{
    position: fixed;
    bottom: 0;
    z-index: 1045;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    visibility: hidden;
    background-color: #fff;
    background-clip: padding-box;
    outline: 0;
    transition: transform .3s ease-in-out;
    width: 400px;
}
.offcanvas.offcanvas-end
{
    top: 0;
    right: 0;
    border-left: 1px solid #1313132d;
    transform: translateX(100%);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
}
.offcanvas-header, .offcanvas .offcanvas-header.form-box
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem;
    position: relative;
    background: var(--theme-color-gradient);
}
.offcanvas .heading-section h2
{
    position: relative;
    bottom: unset;
    font-size: 40px;
}
.offcanvas .heading-section
{
    margin: 0;
}
.offcanvas-body
{
    flex-grow: 1;
    padding: 1rem 1rem;
    overflow-y: auto;
    background: var(--theme-color-gradient);
}
.form-input
{
    width: 100%;
    font-size: 18px;
    padding: 16px 22px;
    background-color: #fff3;
    border: 0;
    border-radius: 10px;
    outline: none;
    color: #fff;
    margin-bottom: 10px;
}
select option
{
    color: #000;
}
.form-input:focus
{
    outline: 1px solid var(--theme-light);
}
.form-input::placeholder
{
    color: #fff;
}
.form-group.submit-btn
{
    position: relative;
    z-index: 9;
}
.submit-btn .primary-btn
{
    width: 100%;
    background: var(--theme-blue-gradient);
    z-index: 1;
    position: relative;
}
.offcanvas-body::-webkit-scrollbar
{
    width: 0;
}
.offcanvas.hiding, .offcanvas.show, .offcanvas.showing
{
    visibility: visible;
}
.offcanvas.show:not(.hiding), .offcanvas.showing
{
    transform: none;
}
.offcanvas-backdrop
{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: #000;
}
.offcanvas-backdrop.show
{
    opacity: .5;
}
.fade
{
    transition: opacity .15s linear;
}
button.btn-close img
{
    border-bottom: 1px solid #6f5036;
    padding-bottom: 4px;
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7490%) hue-rotate(132deg) brightness(110%) contrast(101%);
}
button.btn-close
{
    width: 50px;
    height: 50px;
    opacity: 1;
    color: #fff;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    border-radius: 50%;
    flex-direction: column;
    gap: 5px;
    background: var(--theme-blue-gradient);
    transition: all .5s;/* position: absolute;
    right: 9px;
    top: 10px; */
}
button.btn-close:hover
{
    background-color: #000;
}
.client-speak
{
    background-image: url(../img/client-speak-bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 60px 0;
    padding-bottom: 100px;
}
.client-speak .heading
{
    text-align: center;
    width: 65%;
    margin: auto;
    margin-bottom: 40px;
}
.client-speak .heading :is(h2,p)
{
    color: var(--theme-light);
}
.client-speak .heading h2
{
    margin-bottom: 10px;
}
.client-video
{
    position: relative;
    border-radius: 10px;
    overflow: clip;
    transition: all .5s;
}
.client-video img
{
    width: 100%;
    transition: all 3s;
}
.client-name
{
    position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
    padding: 10px;/* padding-left: 85px; *//* padding-bottom: 25px; */
    color: #fff;
    background: linear-gradient(45deg,#000,transparent);
    display: flex;
    align-items: center;
    gap: 10px;
}
.client-name img
{
    width: auto;
    height: auto;
}
.client-video:hover .client-name img
{
    transform: scale(1);
}
.client-name h5
{
    font-size: 24px;
    color: var(--theme-light);
    text-transform: capitalize;
}
.client-name p
{
    font-size: 20px;
    margin: 0;
}
.client-speak.case-studies .client-video
{
    height: 569px;
}
.client-speak.case-studies .client-video img
{
    height: 100%;
}
.client-speak-slider .slick-list, .case-studies-slider .slick-list
{
    margin: 0 -15px;
}
.client-speak-slider .slick-slide, .case-studies-slider .slick-slide
{
    margin: 0 15px;
}
.slick-dots li button
{
    border-style: solid;
    border-width: 1px;
    border-color: #dadada;
    border-radius: 50%;
    background-color: var(--theme-bg-blue);
    width: 16px;
    height: 16px;
}
.slick-dots
{
    bottom: -50px;
}
.slick-dots li.slick-active button
{
    background-color: var(--theme-light);
    border-color: var(--theme-color);
}
.about-image
{
    position: relative;
}
.about-image:after
{
    content: '';
    background-color: var(--theme-color);
    position: absolute;
    left: -40px;
    bottom: -30px;
    width: 178px;
    height: 180px;
    z-index: -1;
}
.small-line
{
    width: 100px;
    height: 2px;
    display: block;
    background-color: var(--theme-color);
    margin: auto;
}
.heading
{
    text-align: center;
    margin: auto;
    margin-bottom: 40px;
}
.heading h2
{
    margin-bottom: 10px;
}
.heading p
{
    font-size: 20px;
    line-height: 1.4;
}
.why-choose-items
{
    position: relative;
}
.choose-item
{
    text-align: center;
}
.choose-icon
{
    border-radius: 50%;
    background-image: var(--theme-color-gradient);
    width: 109px;
    height: 109px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    margin-bottom: 10px;
    transition: all .5s;
}
.choose-item h4
{
    font-size: 23px;
    color: #121212;
    line-height: 1.217;
    margin-bottom: 10px;
}
.choose-item p
{
    font-size: 18px;
    color: #121212;
    line-height: 1.222;
}
.choose-item:hover .choose-icon
{
    background-image: var(--theme-blue-gradient);
}
.choose-center
{
    display: inline-block;
    margin: 10px;
    color: #fff;
    text-align: center;
    vertical-align: top;
    font-size: 15px;
    border: 4px solid var(--bg-gray);
    border-top: 0;
}
.choose-center
{
    width: 100%;
    height: 280px;
    margin-top: 14%;
    position: relative;
}
.choose-center
{
    border-radius: 0 0 50% 50%/0 0 100% 100%;
}
.center-logo
{
    border-style: solid;
    border-width: 5px;
    border-color: var(--theme-light);
    border-radius: 50%;
    background-color: var(--theme-light);
    box-shadow: 0 8px 51px 0 rgba(0,0,0,.17);
    width: 129px;
    height: 129px;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: 4px solid var(--bg-gray);
    position: relative;
    margin: auto;
    margin-top: -10px;
}
.center-logo::after
{
    content: '';
    width: 129px;
    height: 129px;
    position: absolute;
    inset: 0;
    border: 4px solid var(--bg-gray);
    border-radius: 50%;
    transform: scale(1.4);
    left: -5px;
    top: -5px;
}
.why-choose-items .col-lg-3
{
    flex: 0 0 auto;
    width: 27%;
}
.why-choose-items .col-lg-6
{
    flex: 0 0 auto;
    width: 46%;
}
.choose-item.item2
{
    transform: translate(30%,10%);
}
.choose-item.item3
{
    transform: translateX(15px);
}
.choose-item.item4
{
    transform: translate(-29%,10%);
}
.choose-item.item5
{
    transform: translateY(-40%);
}
.number
{
    border-radius: 50%;
    background-image: var(--theme-blue-gradient);
    position: absolute;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.choose-center .number:nth-child(2)
{
    left: -16px;
    top: -30px;
}
.choose-center .number:nth-child(3)
{
    left: 20px;
    top: 47%;
}
.choose-center .number:nth-child(4)
{
    left: 46%;
    bottom: -20px;
}
.choose-center .number:nth-child(5)
{
    right: 20px;
    top: 47%;
}
.choose-center .number:nth-child(6)
{
    right: -16px;
    top: -30px;
}
.why-choose .heading p
{
    width: 64%;
    margin: auto;
    margin-bottom: 12px;
}
.why-choose .heading
{
    margin-bottom: 50px;
}
.why-choose
{
    position: relative;
    background-image: url(../img/why-choose-bg.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
}
.why-choose::after
{
    content: '';
    background-color: #f58220;
    position: absolute;
    left: 0;
    top: 30%;
    width: 20px;
    height: 283px;
}
.icon-box
{
    border-style: solid;
    border-width: 5px;
    border-color: var(--theme-light);
    border-radius: 50%;
    background-color: var(--theme-light);
    box-shadow: 0 0 0 12px #ececec;
    width: 132px;
    height: 132px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    text-align: center;
}
.icon-box:hover
{
    background-image: var(--theme-color-gradient);
}
.icon-box:hover h5
{
    color: var(--theme-light);
}
.icon-box h5
{
    font-size: 16px;
    transition: all .5s;
    line-height: 17px;
    width: 73%;
}
.icon-box:hover img
{
    filter: brightness(0) saturate(100%) invert(98%) sepia(100%) saturate(0%) hue-rotate(316deg) brightness(104%) contrast(101%);
}
.proficiency .row .col:nth-child(2n)
{
    transform: translateY(-45px);
}
.proficiency .heading
{
    margin-bottom: 10%;
}
.industry-box
{
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 0 11px 25px 0 rgba(0,0,0,.09);
    overflow: clip;
    text-align: center;
    padding: 10px;
    transition: all .5s;
}
.industry-box:hover
{
    background: var(--theme-color);
}
.industry-box .img-box img
{
    width: 100%;
    border-radius: 20px;
}
.industry-box .img-box
{
    margin-bottom: 15px;
}
.industry-box h4
{
    font-size: 28px;
}
.industry-box p
{
    font-size: 22px;
}
.industry-box .btn-group
{
    justify-content: center;
}
.case-studies .client-video img
{
    width: 100%;
}
.top-client
{
    background-repeat: no-repeat;
    background-size: cover;
}
.client-logo
{
    background: var(--theme-light);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90px;
    padding: 5px;
    transition: all .5s;
}
.client-logo img
{
    width: auto;
    height: 60px;
}
.client-logo:hover
{
    transform: scale(1.1);
}
.reviews
{
    text-align: right;
}
.faq-item
{
    background-color: var(--theme-light);
    border-radius: 10px;
    padding: 15px 20px;
    margin-bottom: 20px;
    position: relative;
    cursor: pointer;
}
.faq h2
{
    color: var(--theme-light);
}
.faq-item:after
{
    content: '';
    box-sizing: border-box;
    height: 14px;
    width: 14px;
    border-style: solid;
    border-color: var(--theme-bg-blue);
    border-width: 0 1px 1px 0;
    transform: rotate(45deg);
    position: absolute;
    right: 16px;
    top: 21px;
    transition: all .5s;
}
.faq-item.open:after
{
    transform: rotate(-133deg);
}
.faq-item h4
{
    font-size: 20px;
    line-height: 1.5;
    height: 58px;
    text-align: left;
    padding-right: 5%;
}
.faq-item.open h4
{
    margin-bottom: 15px;
    color: var(--theme-color);
}
.accordion-content
{
    padding: 10px;
    background: var(--bg-gray);
    margin-bottom: 15px;
}
.accordion-content p
{
    font-size: 20px;
    color: #080808;
    line-height: 1.4;
    margin: 0;
}
.help-inner
{
    text-align: center;
    color: #fff;
    border-radius: 9px;
    background-color: #0f3557;
    box-shadow: 0 8px 29px 0 rgba(0,0,0,.4);
    padding: 60px 80px;
}
.help-inner p
{
    font-size: 20px;
}
.footer-top
{
    padding-bottom: 30px;
    border-bottom: 1px #8ea0b0 solid;
}
.footer-logo
{
    margin-bottom: 40px;
}
footer h6
{
    font-size: 20px;
}
.footer-form input[type=email]
{
    border: 1px #000 solid;
    padding: 10px;
    width: 280px;
    outline: 0;
    margin-right: 10px;
}
.footer-right
{
    text-align: right;
}
.footer-links a
{
    display: inline-block;
    color: #000;
    margin-bottom: 15px;
    margin-left: 50px;
}
.footer-links a:hover
{
    color: #f58220;
    font-weight: 600;
}
.footer-social
{
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}
.footer-social a
{
    filter: brightness(0);
}
.footer-social a:not(:last-child)
{
    margin-right: 12px;
}
.footer-social a:hover
{
    filter: brightness(1);
}
.footer-bottom p
{
    margin-bottom: 0;
    padding: 15px;
    text-align: center;
}
.footer-form .clear
{
    display: inline;
}
.footer-form input[type=submit]
{
    padding: 11px 30px;
    background: #0f3557;
    color: #fff;
    border: 0;
    transition: all .5s;
}
.footer-form input[type=submit]:hover
{
    background: var(--theme-color);
}
.help-inner .primary-btn
{
    background-color: #fcb959;
    color: var(--theme-text-dark);
    border-radius: 10px;
    z-index: 1;
    padding: 16px 30px;
    font-size: 30px;
    display: inline-block;
    z-index: 1;
    position: relative;
}
.help-inner .primary-btn:hover
{
    color: #fff;
    z-index: 1;
    position: relative;
}/************************************
    Footer
************************************/
.case-studies.client-video
{
    height: 170px;
}
.twtr_icon
{
    filter: brightness(1)!important;
}/*******************************
  Responsive
********************************/
@media(max-width: 1440px),(max-width: 1366px)
{
    .awards .left
    {
        padding-left: 3%;
        padding-right: 50px;
    }
    .awards .left h4
    {
        font-size: 28px;
        padding-block: 14%;
    }
    .award-logo img
    {
        width: auto;
        height: 90px;
    }
    .fixed-btn
    {
        top: 60%;
    }
    .primary-btn
    {
        font-size: 16px;
    }
    .banner-content
    {
        padding-block: 28%;
        padding-bottom: 20%;
    }
    .navMenu ul li a
    {
        padding: 6px 0;
        font-size: 24px;
    }
}
@media(max-width: 991.98px)
{
    .navMenu
    {
        width: 60%;
    }
    .banner-content
    {
        padding: 5%;
        padding-block: 18%;
        padding-bottom: 8%;
        position: relative;
        z-index: 1;
    }
    .awards .left
    {
        padding-left: 3%;
        padding-right: 3%;
        width: 100%;
        text-align: center;
        justify-content: center;
    }
    .awards .left h4
    {
        font-size: 18px;
        padding-block: 6%;
    }
    .award-logo
    {
        width: 100%;
        position: relative;
        z-index: 2;
        padding-left: 4%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 25px;
        padding-right: 4%;
    }
    .award-logo img
    {
        width: auto;
        height: 76px;
        margin-block: 3%;
    }
    .awards .left:after, .awards .left::before
    {
        display: none;
    }
    .about-image img
    {
        width: 100%;
    }
    .client-speak .heading
    {
        width: 90%;
    }
    .why-choose-items .col-lg-6
    {
        flex: 0 0 auto;
        width: 38%;
    }
    .choose-center
    {
        width: 100%;
        height: 360px;
        margin-top: 14%;
        position: relative;
    }
    .row-cols-md-3>*
    {
        flex: 0 0 auto;
        width: 33.33%;
    }
    .icon-box
    {
        margin: auto;
    }
    .proficiency .row .col:nth-child(2n)
    {
        transform: translateY(50px);
    }
    .proficiency .row .col:nth-child(5)
    {
        transform: translateY(60px);
    }
    .proficiency .row .col:nth-child(2)
    {
        transform: translateY(12px);
    }
    .footer-right
    {
        text-align: right;
        margin-top: 30px;
    }
}
@media(max-width: 575.98px)
{
    .navMenu
    {
        width: 100%;
    }
    .hero h1
    {
        font-size: 22px;
        line-height: normal;
    }
    .hero p
    {
        font-size: 16px;
    }
    .banner-content
    {
        padding-block: 19%;
        padding-bottom: 10%;
    }
    .awards .left
    {
        padding-left: 50px;
        padding-right: 50px;
        width: 100%;
        text-align: center;
    }
    .awards .left:after, .awards .left::before
    {
        display: none;
    }
    .award-logo img
    {
        width: auto;
        height: 40px;
        margin: 0;
    }
    .award-logo
    {
        width: 100%;
        gap: 11px;
        padding: 12px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .awards .left h4
    {
        font-size: 18px;
        padding-block: 6%;
    }
    h2
    {
        font-size: 20px;
    }
    .choose-item h4
    {
        font-size: 18px;
        margin-bottom: 5px;
    }
    .icon-box
    {
        margin: auto;
        margin-bottom: 12px;
    }
    .about-image
    {
        position: relative;
        margin-bottom: 8%;
    }
    .about p
    {
        font-size: 16px;
        line-height: 1.4;
    }
    .client-speak .heading
    {
        text-align: center;
        width: 100%;
        margin: auto;
        margin-bottom: 40px;
    }
    .heading p
    {
        font-size: 16px;
        line-height: 1.4;
    }
    .client-name h5
    {
        font-size: 18px;
    }
    .client-name p
    {
        font-size: 16px;
        margin: 0;
    }
    .client-name
    {
        bottom: 12px;
    }
    .client-name img
    {
        width: 40px;
        height: auto;
    }
    .why-choose-items .col-lg-3
    {
        flex: 0 0 auto;
        width: 71%;
    }
    .why-choose-items .col-lg-6
    {
        flex: 0 0 auto;
        width: 46%;
        display: none;
    }
    .client-speak.case-studies .client-video
    {
        height: 333px;
    }
    .choose-item.item2
    {
        transform: translate(0%,0%);
    }
    .choose-item.item3
    {
        transform: translateX(0);
    }
    .choose-item.item4
    {
        transform: translate(0%,0%);
    }
    .choose-item.item5
    {
        transform: translateY(0%);
    }
    .header
    {
        padding: 6px;
    }
    .primary-btn
    {
        font-size: 14px;
    }
    .logo img
    {
        width: 190px;
    }
    .enq-btn a
    {
        font-size: 14px;
        letter-spacing: 0;
        line-height: 30px;
        padding: 0 7px;
    }
    .enq-btn
    {
        right: 3px;
        height: 30px;
    }
    .enq-btn a img
    {
        transform: rotate(90deg) translateX(4px);
    }
    .fixed-btn
    {
        top: unset;
        right: 3px;
        bottom: 20%;
    }
    .box
    {
        padding: 5px;
        border-radius: 15px;
        height: 100px;
    }
    .box span
    {
        width: 52px;
        height: 52px;
        padding: 12px;
        right: 5px;
    }
    .box h3
    {
        font-size: 28px;
        margin-bottom: 18px;
        margin-top: 16px;
    }
    .box p
    {
        font-size: 14px;
        margin-top: 18%;
    }
    .about
    {
        padding-bottom: 30px;
    }
    .client-speak
    {
        padding: 30px 0;
        padding-bottom: 45px;
    }
    .why-choose .heading p
    {
        width: 100%;
        margin: auto;
        margin-bottom: 12px;
    }
    .section-gap
    {
        padding: 30px 0;
    }
    .row-cols-md-3>*
    {
        flex: 0 0 auto;
        width: 50%;
    }
    .proficiency .row .col:nth-child(2)
    {
        transform: translateY(0);
    }
    .proficiency .row .col:nth-child(2n)
    {
        transform: translateY(0);
    }
    .proficiency .row .col:nth-child(5)
    {
        transform: translateY(0);
    }
    .industry-box h4
    {
        font-size: 18px;
    }
    .industry-box p
    {
        font-size: 16px;
    }
    .industry-box .img-box
    {
        margin-bottom: 6px;
    }
    .client-logo
    {
        height: 60px;
        overflow: clip;
    }
    .top-client .col:last-child .client-logo img
    {
        height: auto;
        width: 56px;
    }
    .faq-item h4
    {
        font-size: 14px;
        line-height: 18px;
        height: auto;
    }
    .faq-item
    {
        border-radius: 6px;
        padding: 12px 10px;
        margin-bottom: 10px;
    }
    .faq-item:after
    {
        height: 9px;
        width: 9px;
        right: 10px;
        top: 14px;
    }
    .accordion-content p
    {
        font-size: 14px;
    }
    .accordion-content
    {
        margin-bottom: 0;
    }
    .help-inner
    {
        padding: 30px 20px;
    }
    .help-inner p
    {
        font-size: 16px;
    }
    .help-inner .primary-btn
    {
        font-size: 20px;
    }
    .footer-logo
    {
        margin-bottom: 25px;
    }
    .footer-left
    {
        text-align: center;
    }
    .footer-form input[type=email]
    {
        margin-right: 0;
    }
    .footer-form input[type=submit]
    {
        width: 280px;
    }
    .footer-right
    {
        text-align: center;
        margin-top: 20px;
    }
    .footer-links a
    {
        margin-bottom: 7px;
        margin-left: 0;
        padding-inline: 10px;
    }
    .footer-social
    {
        margin-top: 20px;
        display: flex;
        justify-content: center;
    }
    .footer-bottom p
    {
        font-size: 13px;
    }
    .navMenu ul li a
    {
        padding: 2px 0;
        font-size: 18px;
    }
    .client-logo img
    {
        width: auto;
        height: auto;
    }
}
.fixed_whatsapp
{
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    position: fixed;
    bottom: 10px;
    right: 0;
    z-index: 1000;
}
.fixed_whatsapp img
{
    width: 65px;
    height: auto;
}
.zoom
{
    animation: zoom-in-zoom-out 2s ease-out infinite;
}
@keyframes zoom-in-zoom-out
{
    0%
    {
        transform: scale(.9,.9);
    }
    50%
    {
        transform: scale(1.02,1.02);
    }
    100%
    {
        transform: scale(.9,.9);
    }
}
@media(max-width: 767px)
{
    .fixed_whatsapp
    {
        bottom: 10%;
    }
    .fixed_whatsapp img
    {
        width: 50px;
        height: auto;
    }
}