@import url(https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700;800;900&display=swap);

.dropdown .nav-link,
.lead,
.nav-link a {
    font-size: 17px !important
}

.navLink {
    margin-left: 1vw !important;
    margin-right: 1vw !important
}

.flotingButton {
    position: fixed;
    z-index: 999 !important;
    bottom: 40px;
    right: 30px;
    color: #fff;
    padding: 15px 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
    transition: transform .3s ease-in-out;
    background: rgba(255, 255, 255, .8);
    color: var(--redcolor);
    cursor: pointer
}

#preloader:after,
#preloader:before {
    content: "";
    width: 80px;
    height: 80px;
    display: block;
    top: 50%;
    left: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
    animation-name: LoaderCicle;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    position: absolute
}

.featurebg_blue,
.featurebg_blue:hover {
    --maincolor: #00658d;
    --darkcolor: #00081b
}

.DigitalMarketing_services h5,
.chakra-stack .css-dculj6,
.css-0,
.footer_box_ff,
.footer_txt a,
.heading_txt h3,
.learnMore_btn,
.quform,
.text-blue,
.text-maincolor,
a,
h1,
h2,
h3,
h4,
h5,
h6,
li,
p,
span {
    font-family: var(--font)
}

.footer_txt i,
.productTab .nav-item {
    margin-right: 10px
}

.accordion .accordion-button:hover,
.all-demo a,
.buy-theme a,
.item-caption p a:after,
.scroll-to-top,
.scroll-to-top:visited,
a,
a:active,
a:hover {
    text-decoration: none
}

:root {
    --maincolor: #00658d;
    --darkColor: #00081b;
    --text: #03b5be;
    --pinkcolor: #99c2f8;
    --redcolor: #ba0f17;
    --font: "Poppins", sans-serif
}

a {
    color: #08c
}

.productCardFooter {
    position: absolute;
    bottom: 16px
}

.css-1c7wksx {
    display: grid;
    grid-gap: 40px !important;
    grid-template-columns: repeat(auto-fill, minmax(295px, 1fr))
}

.productTab .nav-item .active {
    padding-top: 10px;
    padding-bottom: 10px;
    background-image: linear-gradient(135deg, rgb(0 8 27 / .9) 25%, rgb(0 101 141 / .9) 100%) !important;
    text-align: center;
    color: #fff !important;
    border-radius: 10px 10px 0 0;
    box-shadow: rgb(100 100 111 / .2) 0 7px 29px 0;
    transition: .3s ease-in-out;
    font-weight: 700
}

.productTab .nav-item .nav-link {
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid #e9ecef;
    border-radius: 10px 10px 0 0;
    color: #00658d;
    font-weight: 700;
    cursor: pointer;
    background-image: linear-gradient(135deg, rgb(0 8 27 / .1) 25%, rgb(0 101 141 / .1) 100%)
}

.career_pagecss p {
    margin-bottom: 10px !important
}

.footer_box_ff,
.intro h1,
li,
p,
strong {
    font-weight: 400
}

.dropdown-item,
.lead {
    font-weight: 500 !important
}

.webDev_cards_here .card {
    box-shadow: rgba(99, 99, 99, .2) 0 2px 8px 0;
    background-image: radial-gradient(circle farthest-side, #fff, rgb(0 101 141 / .3)) !important;
    transition: .3s ease-in-out
}

.card-style02:hover .country-img img,
.webDev_cards_here .card:hover {
    transform: scale(1.05)
}

.webDev_cards_here .card .img_column {
    padding: 10px
}

.webDev_cards_here .card img {
    width: 100%;
    border-radius: 13px
}

.webDev_cards_here .card h5 {
    color: #00658d;
    font-weight: 700;
    font-size: 18px
}

.tech_card {
    height: 150px;
    width: 150px;
    border-radius: 50%;
    background: #fff
}

.tech_icon img {
    height: 130px;
    width: 130px;
    border-radius: 50%;
    padding: 10px;
    object-fit: contain;
    box-shadow: rgba(17, 12, 46, .15) 0 48px 100px 0;
    transition: .3s ease-in-out;
    position: relative;
    z-index: 99
}

.tech_icon img:hover {
    transform: scale(1.03);
    border: 4px solid var(--maincolor)
}

.manPowersupply_process {
    background: #e2ebfd
}

@media only screen and (min-width:991px) and (max-width:1200px) {
    .manPower_pageCard .webDev_cards_here .card {
        height: 200px !important
    }

    .webDev_cards_here .card {
        height: 280px
    }
}

@media only screen and (min-width:1200px) and (max-width:2000px) {
    .manPower_pageCard .webDev_cards_here .card {
        height: 180px !important
    }
}

@media only screen and (min-width:768px) and (max-width:1400px) {
    .webDev_cards_here .img_column {
        display: flex;
        align-items: center
    }

    .setCardHeight {
        height: 280px
    }
}

.counter_card .chakra-card:hover {
    box-shadow: none !important
}

.page-title-section .text-warning {
    color: #04deea !important;
    font-weight: 500 !important
}

.onBg_layer ol {
    padding-left: 2.5rem !important
}

.After_title,
.lead,
.text-muted {
    color: #464646
}

.digiTal_cards .chakra-card,
.navbar-toggler {
    border: none !important
}

.digiTal_cards .chakra-card h5 {
    font-weight: 600 !important
}

.dropdown-item {
    color: #001935 !important;
    padding: 10px 12px !important;
    background-image: linear-gradient(to left, transparent, transparent 50%, #001935 50%, #001935);
    background-position: 100% 0;
    background-size: 200% 100% !important;
    transition: .25s ease-in;
    border-radius: 0 15px 15px 0 !important
}

.CartTitle_color,
.dropdown-item:hover,
a:hover {
    color: var(--text) !important
}

.about_bgimghere,
.here_blue_bgimg {
    background-repeat: no-repeat;
    background-position: center
}

.dropdown-item:hover {
    background-position: 0 0 !important
}

.aboutTwoImg {
    height: 220px;
    margin-bottom: 74px
}

.write_here_paratxt p {
    text-align: justify !important
}

.about_bgimghere {
    background-image: url(https://img.freepik.com/free-vector/paper-style-smooth-background_52683-64676.jpg)
}

.form-control {
    border-radius: 7px !important
}

.here_blue_bgimg {
    background-image: url(../img/bgimg.jpg);
    width: 100%;
    background-size: cover
}

.bgimg_layer_here {
    height: 100%;
    width: 100%;
    background: rgb(0 48 85 / .88)
}

.why-choose-area {
    background: rgb(0 48 85 / .88);
    border-radius: 6px;
    box-shadow: rgb(50 50 93 / .25) 0 30px 60px -12px inset, rgb(0 0 0 / .3) 0 18px 36px -18px inset
}

.text_tabHere,
.text_tabHere:hover {
    box-shadow: rgb(100 100 111 / .2) 0 7px 29px 0
}

.why-choose-area img {
    background: var(--pinkcolor);
    padding: 20px;
    border-radius: 50px;
    box-shadow: inset 0 2px 24px rgb(0 0 0 / .6)
}

.why-choose-area h3 {
    color: var(--pinkcolor);
    font-size: 19px
}

.all-demo:hover i,
.attr-nav>ul>li>a.butn,
.buy-theme:hover i,
.coaching-main .coaching-content-box p,
.contact-info-block:hover h3,
.contact-info-block:hover i,
.contact-info-block:hover p,
.flex-container-cards .card .button-shadow .card-button:hover,
.footer-style1 li a:hover,
.list-style1 li a,
.page-title-section .active a,
.page-title-section li.active:last-child a,
.scroll-to-top i,
.scroll-to-top:hover i,
.scroll-to-top:visited,
.slider-fade1 .owl-nav .owl-next:hover i,
.slider-fade1 .owl-nav .owl-prev:hover i,
.whatsapp-button:hover i,
.why-choose-area p {
    color: #fff
}

.bgshape_img {
    background-image: url(../img/aboutbg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover
}

#preloader {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 999999;
    transition: opacity .3s;
    text-align: center;
    width: 100%;
    height: 100%
}

#preloader:before {
    border: 3px solid #99c2f8;
    border-radius: 50%
}

#preloader:after {
    border: 3px solid #99c2f8;
    border-radius: 50%;
    animation-delay: 1s
}

@keyframes LoaderCicle {
    0% {
        width: 0;
        height: 0;
        opacity: 0
    }

    10% {
        width: 10px;
        height: 10px;
        opacity: 1
    }

    80% {
        width: 60px;
        height: 60px;
        opacity: .1
    }

    100% {
        width: 70px;
        height: 70px;
        opacity: 0
    }
}

.preloader_here {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #fbfbfb;
    height: 100vh
}

.preloader_here img {
    height: 500px
}

.Page_overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    z-index: -10
}

.mixed_real_card,
.page_start,
.quform-input,
[data-overlay-dark],
[data-overlay-light] {
    position: relative
}

.page_start {
    transition: .8s
}

@keyframes fadein {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes expand {
    0% {
        transform: translateX(1400px)
    }

    100% {
        transform: translateX(0)
    }
}

@media only screen and (min-width:100px) and (max-width:768px) {
    .Footer_svgCSs {
        padding-top: 0
    }

    .css-8g8ihq {
        margin-top: 20px
    }

    .footer_txt a {
        font-size: 12px
    }
}

@media only screen and (min-width:768px) and (max-width:865px) {
    .Footer_svgCSs {
        padding-top: 380px
    }

    .css-8g8ihq {
        margin-top: 20px !important
    }

    .footer_svg_set {
        margin-top: -16rem
    }
}

@media only screen and (min-width:865px) and (max-width:991px) {
    .Footer_svgCSs {
        padding-top: 420px
    }

    .css-8g8ihq {
        margin-top: 20px !important
    }

    .footer_svg_set {
        margin-top: -18rem
    }
}

@media only screen and (min-width:991px) and (max-width:1150px) {
    .Footer_svgCSs {
        padding-top: 300px
    }

    .footer_svg_set {
        margin-top: -12rem
    }
}

@media only screen and (min-width:1150px) and (max-width:2000px) {
    .Footer_svgCSs {
        padding-top: 380px
    }

    .footer_svg_set {
        margin-top: -13rem
    }

    .product_card_css {
        position: relative;
        z-index: 9 !important
    }
}

.butn.white:hover span,
.contact-info-block i,
.header-style2 .navbar-nav li.current>a,
.header-style2.scrollHeader .navbar-nav li.current>a,
.header-style2.scrollHeader .navbar-nav li.current>a:hover,
.menu_area-light.scrollHeader .navbar-nav li.active>a,
.menu_area-light.scrollHeader .navbar-nav li.current>a,
.menu_area-light.scrollHeader .navbar-nav li.current>a:hover,
.navbar-nav li.active>a,
.navbar-nav li.current>a,
.page-title-section ul li:last-child a,
.search-form_input,
.search-frame .search,
.search-frame .search_list .match,
.search-frame .search_list li:before,
.search-frame h4 a:hover,
.sidebar .widget .category-list li a:hover a,
a:active,
a:hover {
    color: #99c2f8
}

.all-demo:hover,
.primary-overlay[data-overlay-dark]:before,
.social-icon-style3 li a:hover {
    background: #99c2f8
}

.all-demo,
.all-demo:hover,
.buy-theme:hover,
.secondary-overlay[data-overlay-dark]:before {
    background: #003a66
}

.text-primary,
.text-primary-hover:hover {
    color: #99c2f8 !important
}

.bg-primary {
    background-color: #99c2f8 !important
}

.border-primary {
    border-color: #99c2f8 !important
}

.text-secondary,
.text-secondary-hover:hover {
    color: #b6cee0 !important
}

.bg-secondary {
    background-color: #003a66 !important
}

.android_app_develp,
.ios_app_develp {
    background: radial-gradient(circle farthest-side, #fff, rgb(0 101 141 / .3)) !important;
    background-repeat: no-repeat !important
}

.mixedReal_app_develp {
    background: radial-gradient(circle farthest-side, #fff, rgb(0 101 141 / .05)) !important;
    background-repeat: no-repeat !important
}

.mixed_real_overlay,
.text_tabHere,
.text_tabHere:hover {
    background-image: linear-gradient(135deg, rgb(0 8 27 / .9) 25%, rgb(0 101 141 / .9) 100%)
}

.padding-50pxhere {
    padding: 50px
}

.mixed_real_overlay,
.overlay_txt {
    position: absolute;
    width: 100%;
    right: 0
}

.mixed_real_img {
    display: block;
    width: 100%;
    height: auto
}

.mixed_real_overlay {
    bottom: 0;
    left: 0;
    overflow: hidden;
    height: 0;
    transition: .5s
}

.mixed_real_card:hover .mixed_real_overlay {
    height: 100%
}

.overlay_txt {
    color: #fff;
    font-size: 20px;
    top: 50%;
    left: 50%;
    padding: 30px;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center
}

.overlay_txt h5 {
    color: var(--text) !important;
    filter: brightness(1.2) !important
}

.gradientbg_blue,
.onBg_layer h1,
.pageheader {
    filter: brightness(1.2)
}

.overlay_txt p {
    margin-top: 20px;
    color: #fff !important
}

.mixed_rea_app {
    padding-top: 40px
}

.mixed_rea_app .paratxt p {
    text-align: justify;
    font-size: 16 !important;
    font-weight: 400
}

.app_imghere {
    overflow: hidden;
    justify-content: end !important;
    display: flex
}

.heading_txt h3 {
    font-weight: 600;
    color: var(--darkColor)
}

.Product_text_color {
    color: #056894
}

.text-maincolor {
    color: var(--maincolor) !important
}

.text_tabHere {
    padding: 15px 10px 13px 9px;
    text-align: center;
    border-radius: 10px 24px;
    transition: .3s ease-in-out
}

.text_tabHere:hover {
    border: 1px solid var(--maincolor)
}

.add_newcard .container .card .box .content ul li,
.footer-bar p a,
.text_tabHere h6 {
    color: #fff;
    font-family: var(--font)
}

.onBg_layer h1,
.text_container h1 {
    font-family: Rubik, sans-serif !important
}

.slidersection_here {
    position: relative;
    bottom: 116px
}

.pageheader {
    width: 100%;
    height: 116px;
    background-image: linear-gradient(128deg, var(--darkColor) 25%, var(--maincolor) 100%)
}

.featurebg_blue {
    background-image: linear-gradient(180deg, #fff 15%, var(--maincolor) 80%, var(--darkcolor) 100%);
    border-radius: 8px, 20px
}

.featurebg_blue:hover {
    background-image: linear-gradient(360deg, #fff 15%, var(--maincolor) 80%, var(--darkcolor) 100%)
}

.featurebg_blue.chakra-card :hover h5,
.featurebg_blue:hover h5,
.navbar-toggler,
.navbar-toggler span,
.navbar-toggler-icon,
.onsoftwareDevpl_BGlayer li,
.stepProcess_section .chakra-card:hover p,
.text-white-hover:hover {
    color: #fff !important
}

.featurebg_blue.chakra-card:hover p {
    color: #00081b !important
}

.gradientbg_blue {
    background-image: linear-gradient(128deg, var(--darkColor) 25%, var(--maincolor) 100%)
}

.text-dark {
    color: var(--darkColor) !important
}

.gradientbg_blue_product {
    background-image: linear-gradient(128deg, rgb(0 8 27 / .7) 25%, rgb(0 101 141 / .7) 100%)
}

.onBg_layer {
    background-image: linear-gradient(128deg, rgb(0 8 27 / .9) 25%, rgb(0 101 141 / .9) 100%);
    padding: 90px 0
}

.transparent_bg {
    background: #fff0;
    transition: .3s ease-out
}

.redbg {
    background: #fff;
    transition: 1.2s cubic-bezier(.17, .85, .438, .99);
    box-shadow: 0 4px 6px 0 rgb(12 0 46 / .1)
}

.redbg .dropdown a,
.redbg .nav-link a {
    color: #001935 !important
}

.drop_down_toggle:hover,
.dropdown:hover .serviceAnchortxt,
.redbg .drop_down_toggle:hover,
.redbg .dropdown:hover .serviceAnchortxt,
.redbg .nav-link a:hover {
    color: #03b5be !important
}

.text_container {
    padding-top: 120px
}

.all_btn,
.butn,
.learnMore_btn {
    padding: 9px 20px !important;
    box-shadow: rgb(3 181 190 / .2) 0 -25px 18px -14px inset, rgb(3 181 190 / .15) 0 1px 2px, rgb(3 181 190 / .15) 0 2px 4px, rgb(3 181 190 / .15) 0 4px 8px, rgb(3 181 190 / .15) 0 8px 16px, rgb(3 181 190 / .15) 0 16px 32px;
    text-transform: capitalize;
    line-height: normal
}

.onBg_layer h1 {
    color: #04deea;
    font-weight: 500 !important
}

.Titletop_text {
    font-size: 17px
}

.text_container h1 {
    margin-top: 40px;
    color: var(--text)
}

.text_container p {
    font-size: 21px;
    margin-top: 30px;
    font-weight: 400 !important;
    font-family: var(--font) !important
}

.navbar-expand-lg .navbar-nav .nav-link:hover a {
    color: #03b5be
}

.butn,
.learnMore_btn {
    transition-duration: .3s;
    display: inline-block
}

.ripple-1,
.ripple-shape {
    height: 100px;
    width: 100px
}

.learnMore_btn {
    border: none;
    background: var(--text);
    color: #fff !important;
    border-radius: 35px;
    font-size: 16px
}

.butn,
.learnMore_btn:hover {
    border: 1px solid var(--text)
}

.drop_down_toggle {
    background: 0 0 !important;
    border: none !important;
    margin-top: 2px !important;
    font-size: 17px !important
}

.butn,
.ripple-1 {
    background-color: #fff0
}

.all_btn,
.butn {
    font-size: 16px;
    font-family: var(--font)
}

.drop_down_toggle .fa-angle-down,
.drop_down_toggle .fa-angle-up {
    font-size: 13px !important
}

.dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1
}

.redbg .drop_down_toggle {
    color: #000 !important;
    font-size: 18px !important
}

.learnMore_btn:hover {
    color: var(--text);
    background: #fff0
}

.butn {
    color: var(--text) !important;
    border-radius: 35px
}

.butn:hover {
    color: #fff !important;
    background: #03b5be !important
}

.all_btn {
    color: #fff;
    border: 1px solid var(--text);
    border-radius: 35px;
    background-image: linear-gradient(315deg, var(--maincolor) 0, var(--darkColor) 74%);
    transition: .5s ease-in-out
}

.all_btn:hover {
    color: #fff !important;
    background-image: linear-gradient(315deg, var(--darkColor) 0, var(--maincolor) 74%)
}

.navLink .fa {
    font-size: 13px;
    margin-right: 0
}

.circle_cardHere {
    margin-top: 3rem
}

@media only screen and (min-width:100px) and (max-width:768px) {
    .circle_cardHere {
        margin-top: 0
    }

    .mb_3rem {
        margin-bottom: 0
    }
}

.circle_row_one,
.mb_3rem {
    margin-bottom: 3rem
}

@media only screen and (min-width:991px) and (max-width:1200px) {
    .navLink .fa {
        font-size: 11px;
        margin-right: 0
    }

    .deskTop_Dropdown_menu_removecss button {
        font-size: 13px !important;
        margin-top: 5px !important
    }

    .dropdown .nav-link,
    .nav-link a {
        font-size: 13px !important
    }

    .dropdown .nav-link {
        margin-top: 4px
    }

    .navLink {
        margin-left: 1vw;
        margin-right: 2vw
    }
}

.ripple-shape {
    position: relative;
    top: -50px;
    left: -50px;
    z-index: 1
}

.ripple-1 {
    border-color: rgb(20 29 56 / .3);
    position: absolute;
    left: 0;
    bottom: 0;
    border: 1px solid var(--white-color);
    border-radius: 50%;
    -webkit-animation: 8s linear 0 infinite heroripple;
    animation: 8s linear 0 infinite heroripple
}

.add_newcard .container .card .box .icon::after,
.add_newcard .container .card .box .icon::before {
    height: 30px;
    background: #fff0;
    border-top-left-radius: 30px;
    box-shadow: -5px -5px 0 5px var(--clr);
    content: "";
    width: 30px
}

.ripple-2,
.ripple-6 {
    -webkit-animation-delay: 1s;
    animation-delay: 1s
}

.ripple-3 {
    -webkit-animation-delay: 2s;
    animation-delay: 2s
}

.ripple-4 {
    -webkit-animation-delay: 4s;
    animation-delay: 4s
}

.ripple-5 {
    -webkit-animation-delay: 5s;
    animation-delay: 5s
}

.serviceCard_swiper {
    padding-top: 40px !important;
    padding-bottom: 40px !important
}

.serviceCard_swiper .chakra-card {
    height: 390px;
    max-height: 420px
}

.add_newcard .container {
    justify-content: center;
    align-items: center
}

.add_newcard .container .card {
    position: relative;
    height: 430px;
    background: var(--clr);
    border-radius: 70px 20px 20px;
    overflow: hidden
}

.add_newcard .container .card .box {
    position: absolute;
    inset: 10px;
    background: #252525;
    border-radius: 10px
}

.add_newcard .container .card .box .icon {
    position: absolute;
    width: 140px;
    height: 140px;
    background: #fff;
    background: var(--clr);
    border-bottom-right-radius: 50%;
    transition: .5s
}

.add_newcard .container .card .box .icon::before {
    position: absolute;
    bottom: -30px;
    left: 0
}

.add_newcard .container .card .box .icon::after {
    position: absolute;
    top: 0;
    right: -30px
}

.add_newcard .container .card .box .icon .iconbox {
    position: absolute;
    inset: 10px;
    background: #fff;
    border-radius: 50% 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600
}

.add_newcard .container .card .box .icon .iconbox ion-icon {
    font-size: 4rem;
    color: var(--clr);
    --ionicon-stroke-width: 20px
}

.add_newcard .container .card .box .content {
    position: absolute;
    top: 160px;
    padding: 20px;
    text-align: center
}

@media only screen and (max-width:992px) {
    .text_tabHere {
        margin-top: 10px
    }

    .deskTop_Dropdown_menu {
        height: 300px;
        transition: height .3s ease-in-out
    }

    .deskTop_Dropdown_menu .dropdown-menu {
        height: 280px;
        background: #fff !important;
        transition: opacity .3s ease-in-out
    }

    .deskTop_Dropdown_menu .dropdown-menu.show {
        display: block;
        opacity: 1;
        max-height: 280px
    }

    .deskTop_Dropdown_menu_removecss {
        height: 40px
    }

    .add_newcard .container .card .box .heading_of_card {
        position: absolute;
        top: 40px;
        padding: 20px;
        text-align: center;
        justify-content: center;
        align-items: center;
        display: flex;
        right: 20px
    }
}

@media only screen and (min-width:992px) {
    .add_newcard .container .card .box .heading_of_card {
        position: absolute;
        top: 40px;
        padding: 20px;
        text-align: center;
        justify-content: center;
        align-items: center;
        display: flex;
        right: 50px
    }
}

.heading_of_card h3 {
    color: var(--clr);
    font-size: 1.66rem;
    font-weight: 600;
    font-family: var(--font);
    text-transform: capitalize
}

.add_newcard .container .card .box .content h3 {
    color: var(--clr);
    font-size: 1.55rem;
    font-weight: 600;
    font-family: var(--font);
    text-transform: capitalize
}

.add_newcard .container .card .box .content p {
    color: #fafafa;
    font-size: .95rem;
    opacity: .75;
    margin: 0 0 10px;
    font-family: var(--font)
}

@media only screen and (max-width:1080px) {
    .add_newcard .container {
        padding: 2rem 1rem
    }
}

.add_shadow {
    box-shadow: rgb(50 50 93 / .25) 0 30px 60px -12px inset, rgb(0 0 0 / .3) 0 18px 36px -18px inset !important
}

.afterSlider_section {
    margin-top: -70px
}

.top_title h2 {
    font-family: var(--font);
    font-weight: 600;
    background: -webkit-gradient(linear, left top, right top, from(#00081b), to(#00658d));
    background: linear-gradient(to right, #00081b 0, #00658d 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: #fff0
}

.green_title h2 :after,
.top_title h2 :after {
    display: inline-block;
    vertical-align: middle;
    content: "";
    width: 38px;
    height: 2px;
    background: #888;
    margin-left: 15px;
    margin-top: 12px
}

.After_title {
    font-family: var(--font);
    text-align: center;
    margin-top: 10px;
    padding-bottom: 15px;
    font-size: 19px;
    font-weight: 500
}

.chakra-card {
    box-shadow: 0 4px 10px #ede9fe;
    overflow: hidden
}

.chakra-card:hover {
    box-shadow: rgb(100 100 111 / .2) 0 7px 29px 0 !important
}

.afterSlider_section .chakra-card {
    box-shadow: 0 4px 10px #ede9fe;
    overflow: hidden;
    transition: transform .3s ease-in-out
}

.afterSlider_section .chakra-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 90%;
    background: linear-gradient(to bottom, rgb(5 104 148 / .8) 5%, transparent 60%);
    transition: .3s ease-in-out
}

.afterSlider_section .chakra-card:hover::after {
    height: 100%;
    background: linear-gradient(to bottom, rgb(5 104 148 / .8) 5%, transparent 80%)
}

.afterSlider_section .chakra-card:hover {
    transform: translateY(-10px);
    box-shadow: rgb(100 100 111 / .2) 0 7px 29px 0
}

.afterSlider_section .chakra-card__header {
    position: relative;
    z-index: 9
}

.afterSlider_section .chakra-card__header img {
    height: 149px;
    width: 100%;
    padding: 20px;
    border-radius: 50%
}

.list-style2 li:last-child,
.list-style3 li:last-child {
    padding-bottom: 0;
    margin-bottom: 0
}

.afterSlider_section .chakra-card__body {
    position: relative;
    z-index: 9;
    padding-bottom: 0 !important
}

.afterSlider_section .chakra-card__body h5 {
    font-family: var(--font);
    font-size: 17.5px
}

.afterSlider_section .chakra-card__body p {
    font-family: var(--font);
    font-size: 15px
}

.afterSlider_section .chakra-card__footer {
    width: 100%;
    position: relative;
    z-index: 9;
    text-align: left;
    padding-top: 0 !important
}

.afterSlider_section .chakra-card__footer a {
    font-family: var(--font);
    font-size: 15px;
    color: #00081b;
    font-weight: 500;
    display: inline-block;
    transition: transform .5s ease-in-out
}

.afterSlider_section .chakra-card__footer a:hover {
    color: #056894;
    font-weight: 500;
    transform: translateX(10px)
}

.circular_card:hover .card_contain img,
.waveSvg {
    transform: scaleX(-1)
}

.It_solution_section p {
    font-family: var(--font);
    color: #000;
    font-weight: 400;
    font-size: 16px;
    text-align: justify
}

.ItSolution_swiper .chakra-card {
    border-radius: 10px;
    height: 370px;
    box-shadow: rgb(100 100 111 / .2) 0 7px 29px 0
}

.ItSolution_swiper .chakra-card img {
    background: #fff0;
    margin-top: 14px;
    height: 150px
}

.ItSolution_swiper .chakra-card__header,
.counterCard .chakra-card .chakra-card__header {
    padding: 0 !important
}

.ItSolution_swiper .chakra-card__body,
.card_contain {
    text-align: center
}

.ItSolution_swiper .chakra-card__body h5 {
    margin-bottom: 10px;
    font-family: var(--font)
}

.ItSolution_swiper .chakra-card__body p {
    font-family: var(--font);
    font-size: 15px;
    margin-top: 10px
}

.bg_oneimg {
    background-image: url(/assets/bgimg/bg1.avif);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.bg_oneimg .white_layer {
    padding-top: 50px;
    padding-bottom: 80px;
    background: rgb(255 255 255 / .68)
}

.circular_card {
    position: relative;
    overflow: hidden;
    text-align: center;
    justify-content: center;
    display: flex;
    align-items: center;
    height: 220px;
    width: 220px;
    border-left: 5px solid var(--maincolor);
    border-right: 5px solid var(--darkColor);
    outline: #ccdbe8 dashed 2px;
    outline-offset: 10px;
    border-radius: 80px 10px;
    background: linear-gradient(135deg, rgb(3 180 190 / .22), rgb(255 255 255 / .25));
    box-shadow: 12px 12px 16px 0 rgb(0 0 0 / .25), -8px -8px 12px 0 rgb(255 255 255 / .3), #ccdbe8 3px 3px 60px 0 inset, rgb(255 255 255 / .5) -3px -3px 60px 1px inset, rgb(17 12 46 / .15) 0 48px 100px 0;
    transition: .3s
}

.circular_card:hover {
    border-top: 5px solid var(--maincolor);
    border-bottom: 5px solid var(--darkColor);
    box-shadow: #ccdbe8 3px 3px 6px 0 inset, rgb(255 255 255 / .5) -3px -3px 6px 1px inset, #ccdbe8 0 -50px 36px -28px inset
}

.Softwr_Deve_css {
    transition: transform .3s
}

.Softwr_Deve_css:hover img,
.book_Card img:hover,
.flex-container-cards .card:hover,
.whatsapp-button:hover {
    transform: scale(1.1)
}

.inlay-circle::after,
.inlay-circle::before {
    position: absolute;
    width: 15rem;
    height: 15rem;
    transform: rotate(45deg);
    content: ""
}

.circle_row_one {
    padding-right: 80px;
    margin-top: 3rem
}

.circle_row_two {
    margin-top: 60px !important;
    padding-left: 80px
}

.circular_card .card_contain img {
    height: 80px;
    width: 80px;
    transition: transform .5s
}

.circular_card .card_contain p {
    font-weight: 500;
    margin-top: 20px;
    text-transform: capitalize;
    font-family: var(--font);
    font-size: 18px
}

.butn.md,
.chakra-accordion__panel,
.customerCare_card .chakra-card__body p {
    font-size: 15px
}

.move_left,
.next-page .image-next {
    margin-left: 20px
}

.inlay-circle {
    width: 15rem;
    height: 15rem;
    border: 2px solid #a7a9ac;
    border-radius: 50%
}

.inlay-circle::after {
    margin-left: -15px;
    margin-top: -15px;
    border: 10px solid #fff0;
    border-right: 10px solid #658d1b;
    border-radius: 50%
}

.inlay-circle::before {
    margin-left: -30px;
    margin-top: -30px;
    border: 20px solid #fff0;
    border-right: 20px solid #fff;
    border-radius: 50%
}

.customer_careSection p {
    font-family: var(--font);
    font-size: 16px;
    font-weight: 400
}

.customerCare_card {
    padding-right: 30px
}

.customerCare_card .chakra-card__body {
    text-align: center;
    font-family: var(--font);
    padding-bottom: 0 !important
}

.customerCare_card .chakra-card__footer {
    padding-top: 0 !important
}

.customerCare_card .chakra-card__footer a {
    font-family: var(--font);
    font-size: 15px;
    color: #00081b;
    font-weight: 500;
    display: inline-block;
    transition: transform .5s ease-in-out
}

.list-style2 li:before,
.list-style4 li:before {
    content: "\f046";
    font-family: FontAwesome;
    top: -2px
}

.customerCare_card .chakra-card__footer a:hover {
    color: #056894;
    font-weight: 500;
    transform: translateX(10px)
}

.counter_Section {
    margin-bottom: 100px;
    position: relative;
    overflow: hidden
}

.counter_Section p {
    font-size: 16px;
    font-family: var(--font);
    font-weight: 400
}

.testing_imghere {
    border-radius: 20px;
    margin-left: 50px;
    margin-top: 50px
}

.counter_Section::before {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    content: "";
    width: 32%;
    border-radius: 0 30px 0 0;
    background-image: linear-gradient(128deg, var(--darkColor) 25%, var(--maincolor) 100%);
    z-index: -1
}

.counter_Section .shape_one {
    background-image: url(../assets/bgimg/shape_one.png);
    background-repeat: no-repeat;
    position: relative;
    background-position: top left;
    background-size: 200px;
    animation: 3s linear infinite alternate moveBackground;
    z-index: 99;
    padding-top: 80px
}

.counterCard .chakra-card {
    border: none;
    box-shadow: none
}

.set_img {
    padding: 17px !important
}

.counterCard .chakra-card .chakra-card__header img {
    height: 80px;
    width: 80px;
    border-radius: 50%;
    border-left: 3px solid var(--maincolor);
    border-right: 3px solid var(--darkColor);
    border-top: 3px solid var(--maincolor);
    border-bottom: 3px solid var(--darkColor);
    padding: 3px;
    margin-left: 16px;
    text-align: center;
    filter: brightness(1.2)
}

.counterCard .chakra-card .chakra-card__body {
    font-family: var(--font);
    padding-top: 10px !important
}

.counterCard .chakra-card .chakra-card__body h2 {
    font-size: 35px;
    font-weight: 700 !important
}

.counterCard .chakra-card .chakra-card__body p {
    font-weight: 500;
    font-size: 18px
}

.Testimonials_section {
    background-image: url(./back.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed
}

.Testimonials_sectionLayer {
    padding-top: 60px;
    padding-bottom: 60px;
    margin-bottom: 60px;
    background: rgb(0 8 27 / .8)
}

.Testimonials_section .testimonial_txt {
    font-weight: 500;
    font-family: var(--font)
}

.Testimonials_section .swiper_section {
    padding-top: 20px;
    padding-bottom: 40px
}

.Testimonials_section .swiper_section .swiper-slide {
    padding: 20px
}

.Testimonials_section .swiper_section .chakra-card {
    font-family: var(--font);
    box-shadow: rgb(100 100 111 / .2) 0 7px 29px 0;
    border-radius: 20px;
    padding-left: 0 !important
}

.Testimonials_section .swiper_section .chakra-card__body {
    padding: 0;
    box-shadow: 2px 2px 25px #cecece;
    border-radius: 10px
}

.testimonial_user_img {
    display: flex;
    justify-content: center
}

.testimonial_user_img img {
    width: 80px;
    height: 80px;
    border-radius: 50%
}

.testimonial_qmark {
    position: absolute;
    top: 21%;
    left: 21px;
    font-size: 42pt;
    color: var(--darkcolor);
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none
}

.USEr_Name {
    color: var(--maincolor);
    font-weight: 600;
    font-family: var(--font) !important;
    text-transform: capitalize;
    margin-top: -20px
}

.testimonial_pattern {
    flex-basis: 80px;
    background: url(https://raw.githubusercontent.com/taviskaron/t-div-blockquotes/main/img/hexabump.png);
    border-radius: 10px 0 0 10px
}

.testimonialreview_box {
    flex-basis: calc(100% - 80px);
    background: #fff;
    padding: 30px 30px 20px 60px;
    font-size: 11pt;
    border-radius: 0 10px 10px 0;
    height: 400px !important
}

@media only screen and (min-width:1200px) and (max-width:1400px) {
    .webDev_cards_here .card {
        height: 230px
    }

    .testimonialreview_box {
        height: 450px !important
    }
}

@media only screen and (max-width:768px) {
    .preloader_here img {
        height: 350px
    }

    .circle_row_one {
        padding-top: 0;
        padding-right: 0
    }

    .circular_card {
        margin-top: 60px
    }

    .testimonialreview_box {
        height: 448px !important;
        padding: 44px 20px 20px 49px;
        text-align: center
    }

    .add_newcard .container .card .box .heading_of_card {
        position: absolute;
        top: 40px;
        padding: 13px;
        text-align: center;
        justify-content: center;
        align-items: center;
        display: flex;
        right: 0
    }

    .about_useshort_content {
        padding-left: 20px
    }

    .onsoftwareDevpl_BGlayer {
        padding: 5px !important
    }

    .app_dev_img img {
        margin-bottom: 40px
    }

    .about_useshort_content {
        padding-right: 20px
    }

    .page-title-section .mr-10 {
        margin-right: 0 !important
    }

    .dot-pattern .app_developemen_space .mb-5 {
        margin-bottom: 0 !important
    }

    .quform {
        padding-left: 15px
    }

    .circle_row_two {
        margin-top: 0 !important;
        padding-left: 80px !important
    }

    .circle_row_one {
        margin-top: 0
    }
}

.bg_testicard {
    background-image: url(../assets/bgimg/back.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat
}

.Testimonials_section .swiper_section .chakra-card__body .dark_line {
    width: 60%;
    height: 40px;
    background: var(--darkColor)
}

.raiseQuery_section p,
.top_technologies p {
    font-family: var(--font);
    font-size: 16px;
    font-weight: 500
}

.technologies_img {
    box-shadow: rgb(0 0 0 / .35) 0 5px 15px;
    border-radius: 15px
}

.technologies_img:hover {
    border-left: 1px solid var(--maincolor);
    border-right: 1px solid var(--darkColor);
    border-top: 1px solid var(--darkColor);
    border-bottom: 1px solid var(--maincolor);
    box-shadow: rgb(50 50 93 / .25) 0 30px 60px -12px, rgb(0 0 0 / .3) 0 18px 36px -18px
}

::placeholder {
    font-family: var(--font)
}

.form-control {
    border: .1px solid rgba(5, 104, 148, .3) !important
}

.quform-elements input {
    border-radius: 12px !important
}

.send_nowBTN:hover {
    background: #056894 !important;
    color: #fff !important
}

.client_sectionImg {
    border-radius: 6px;
    border: 1px solid #056894;
    box-shadow: rgb(100 100 111 / .2) 0 7px 29px 0
}

.client_sectionImg:hover {
    box-shadow: rgb(0 0 0 / .35) 0 -50px 36px -28px inset
}

.chakra-stack .css-hyb7bs,
.footer_txt i {
    box-shadow: rgb(255 255 255 / .35) 0 5px 10px
}

.for_setSize {
    margin-left: 40px
}

.footer_txt i {
    background: var(--chakra-colors-blackAlpha-100);
    border-radius: var(--chakra-radii-full);
    width: 2rem;
    height: 2rem;
    cursor: pointer;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-transition: background .3s;
    transition: background .3s
}

.chakra-stack .css-dculj6 {
    font-weight: 600 !important;
    color: var(--text) !important
}

.css-0,
.onsoftwareDevpl_BGlayer p {
    font-weight: 300
}

.DigitalMarketing_services {
    background: #fff;
    text-align: center;
    cursor: pointer;
    filter: brightness(1.5);
    border: none !important;
    box-shadow: rgb(99 99 99 / .2) 0 2px 8px 0 !important
}

.about_page,
.addcss_onPara p,
.approch_pages p {
    text-align: justify
}

.primary-shadow,
.widget-content {
    box-shadow: 0 0 70px rgb(0 0 0 / .08)
}

.DigitalMarketing_services:hover {
    box-shadow: rgb(0 0 0 / .35) 0 5px 15px
}

.DigitalMarketing_services h5 {
    font-size: 17px !important;
    font-weight: 600 !important
}

.about_page p,
.approch_pages p,
ul li {
    font-weight: 400 !important;
    color: #000
}

.about_page {
    padding-top: 4
}

.waveSvg {
    position: relative;
    margin-top: -180px
}

@media screen and (min-width:220px) and (max-width:540px) {
    .for_setSize {
        padding-top: 100px;
        margin-left: 20px
    }
}

@media screen and (min-width:100px) and (max-width:768px) {
    .It_solution_section {
        padding-left: 30px !important;
        padding-right: 10px !important
    }

    .css-1kncj1j .mt-5 {
        margin-top: 0 !important
    }

    .ItSolution_swiper .chakra-card {
        border-radius: 10px;
        height: 380px;
        box-shadow: rgb(100 100 111 / .2) 0 7px 29px 0
    }
}

@media screen and (max-width:768px) {

    .client_sectionImg,
    .technologies_img {
        width: 100%
    }

    .man_power_suuply {
        padding-left: 20px
    }

    .testing_imghere {
        border-radius: 20px;
        margin-left: 50px;
        margin-top: 7px
    }
}

@media screen and (min-width:220px) and (max-width:400px) {
    .counter_Section::before {
        position: absolute;
        bottom: 63%;
        left: 0;
        height: 100%;
        content: "";
        width: 75%;
        border-radius: 0 30px 0 0;
        background-image: linear-gradient(128deg, var(--darkColor) 25%, var(--maincolor) 100%);
        z-index: -1
    }
}

@media screen and (min-width:400px) and (max-width:479px) {
    .counter_Section::before {
        position: absolute;
        bottom: 59%;
        left: 0;
        height: 100%;
        content: "";
        width: 75%;
        border-radius: 0 30px 0 0;
        background-image: linear-gradient(128deg, var(--darkColor) 25%, var(--maincolor) 100%);
        z-index: -1
    }
}

@media screen and (min-width:479px) and (max-width:768px) {
    .counter_Section::before {
        position: absolute;
        bottom: 53%;
        left: 0;
        height: 100%;
        content: "";
        width: 75%;
        border-radius: 0 30px 0 0;
        background-image: linear-gradient(128deg, var(--darkColor) 25%, var(--maincolor) 100%);
        z-index: -1
    }

    .for_setSize {
        padding-top: 100px;
        margin-left: 20px
    }
}

@media screen and (min-width:768px) and (max-width:991px) {
    .counter_Section::before {
        position: absolute;
        bottom: 46%;
        left: 0;
        height: 100%;
        content: "";
        width: 68%;
        border-radius: 0 30px 0 0;
        background-image: linear-gradient(128deg, var(--darkColor) 25%, var(--maincolor) 100%);
        z-index: -1
    }

    .for_setSize {
        padding-top: 100px;
        margin-left: 20px
    }

    .circle_row_two {
        margin-top: 0 !important;
        padding-left: 0
    }

    .circle_row_one {
        padding-right: 0
    }

    .circular_card {
        margin-top: 60px
    }
}

.bg-blue,
.bg-nav {
    background-color: #056894 !important
}

.min-vh-100 {
    min-height: 100vh
}

.h-30px {
    height: 30px
}

.w-40px {
    width: 40px !important
}

.scroll-to-top {
    font-size: 20px;
    text-align: center;
    color: #fff;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    background: #99c2f8;
    width: 40px;
    height: 40px;
    line-height: 40px;
    z-index: 9999;
    outline: 0;
    -webkit-transition: .3s
}

.scroll-to-top:hover,
.social-icon-style2 li a:active,
.social-icon-style2 li a:focus,
.social-icon-style2 li a:hover,
.social-icon-style3 li a {
    color: #fff;
    background: #003a66
}

.list-style1 li,
.sidebar .widget .category-list li {
    margin-bottom: 15px
}

.about-style-02 ul li:last-child,
.accordion .card:last-child,
.footer-style1 li:last-child,
.footer-style1 ul,
.list-style1 li:last-child,
.list-style4 li:last-child,
.page-title-section ul,
.sidebar .widget .category-list li:last-child,
.sidebar .widget:last-child,
.top-bar-info ul {
    margin-bottom: 0
}

.card-style01 .team-icon ul li a:hover,
.list-style1 li a:hover,
.menu_area-light .navbar-nav li.active>a,
.menu_area-light .navbar-nav li.current>a,
.owl-nav span,
.testimonial-carousel1.owl-carousel.owl-theme .owl-nav i {
    color: #003a66
}

.list-style2 li {
    position: relative;
    display: block;
    padding-left: 35px;
    margin-bottom: 12px
}

.list-style2 li:before {
    position: absolute;
    left: 0;
    bottom: 0;
    color: #003a66;
    font-size: 20px
}

.list-style3 li {
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 12px;
    margin-bottom: 15px
}

.list-style3 li:last-child {
    border-bottom: 0
}

.list-style4 li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px
}

.list-style4 li:before {
    position: absolute;
    color: #003a66;
    left: 0;
    font-size: 18px
}

.agent-detail-des .agent-social-links li a:hover,
.butn.secondary,
.butn:hover {
    background-color: #003a66
}

.butn.secondary:hover,
.card-style03 .card-button:hover,
.next-page .image-next:after,
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span,
.prev-page .image-prev:after {
    background-color: #99c2f8
}

.butn.white {
    color: #99c2f8 !important;
    background-color: #fff
}

.butn.white:hover {
    background-color: #003a66;
    color: #fff !important
}

.butn.white-hover:active,
.butn.white-hover:focus,
.butn.white-hover:hover {
    background-color: #fff;
    color: #003a66 !important
}

.butn.md {
    padding: 14px 26px !important
}

.butn.sm {
    padding: 10px 18px !important;
    font-size: 14px
}

.top-bar-info {
    display: inline-block;
    vertical-align: middle
}

.top-bar-info li {
    font-weight: 500;
    color: #fff;
    list-style-type: none;
    font-size: 14px;
    padding: 0 5px;
    display: inline-block;
    margin-bottom: 0
}

.top-bar {
    display: block;
    position: relative;
    z-index: 999;
    padding: 7px 0
}

.top-bar-info li i {
    font-size: 16px;
    color: #fff;
    margin-right: 8px;
    margin-top: 0;
    display: inline-block;
    vertical-align: text-bottom
}

.top-social-icon {
    padding: 0;
    float: right;
    margin: 0
}

.top-social-icon li {
    font-size: 14px;
    list-style-type: none;
    float: left;
    text-align: center;
    margin: 0;
    padding: 0 7px
}

.top-social-icon li:last-child,
.top-social-icon li:last-child a {
    padding-right: 0
}

.top-social-icon li a {
    color: #fff;
    line-height: 28px;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    padding: 0 3px
}

.top-social-icon li a:hover {
    color: rgb(255 255 255 / .65)
}

.header-style2 .navbar>ul>li.current>a:after,
.header-style2.scrollHeader .navbar>ul>li.current>a:after,
.menu_area-light.scrollHeader .navbar>ul>li.current>a:after,
.navbar>ul>li.current>a:after {
    border-color: #fff0 #99c2f8 #99c2f8 #fff0
}

.menu_area-light .navbar>ul>li.current>a:after {
    border-color: #fff0 #003a66 #003a66 #fff0
}

.swiper,
body,
html {
    width: 100%;
    height: 100%
}

.serviceCard_css {
    height: 500px !important
}

.swiper-slide {
    background-position: center;
    background-size: cover
}

.swiper-slide .item {
    height: 800px
}

.swiper-slide .card .card-img .serviceImg_here {
    height: 200px !important;
    width: auto;
    object-fit: contain
}

.swiper-button-next,
.swiper-button-prev {
    right: inherit;
    top: 60% !important;
    bottom: 0;
    width: 40px !important;
    height: 40px !important;
    border: 2px solid var(--text);
    background: 0 0 !important;
    border-radius: 60px;
    line-height: 65px;
    transition-duration: .5s;
    left: 0;
    text-align: center;
    margin: auto;
    opacity: .4
}

.page-title-section,
.softwareDevpl_bgImg {
    background-size: cover;
    background-position: center
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    opacity: 1 !important;
    background: var(--text) !important
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-weight: 600;
    color: #fff !important;
    transition-duration: .5s;
    font-size: 18px !important
}

.para_txt_here {
    padding-top: 20px
}

.para_txt_here p {
    text-align: justify;
    font-size: 15px
}

.andriod_head h2 {
    color: var(--darkColor)
}

.app_dev_img {
    overflow: hidden;
    text-align: center;
    display: flex;
    justify-content: center
}

.ios_dev_img,
.main_img_here {
    overflow: hidden
}

@media only screen and (min-width:992px) and (max-width:3000px) {

    .app_dev_img img,
    .ios_dev_img img {
        height: 300px
    }
}

.softwareDevpl_bgImg {
    background-image: url(https://img.freepik.com/free-vector/paper-style-white-monochrome-background_52683-67266.jpg?size=626&ext=jpg&ga=GA1.1.1700460183.1713139200&semt=ais);
    background-repeat: no-repeat
}

.onsoftwareDevpl_BGlayer {
    padding: 20px;
    filter: brightness(1.5);
    background-image: linear-gradient(38deg, rgb(0 8 27 / .95) 25%, rgb(0 101 141 / .95) 100%)
}

.onsoftwareDevpl_BGlayer li,
.para_text {
    font-family: var(--font);
    font-weight: 300 !important
}

.product_card .chakra-card .chakra-card__footer {
    width: 100% !important;
    text-align: left
}

.onsoftwareDevpl_BGlayer .text-color,
.text-color {
    color: var(--text) !important;
    filter: brightness(1.3);
    font-family: var(--font)
}

.flex-container-cards .card,
.flex-container-cards .card .card-img-shadow {
    filter: drop-shadow(#ff0000 0 0 10px)
}

.stepProcess_section .chakra-card {
    background: #fff0;
    border-radius: 8px 40px;
    box-shadow: rgb(100 100 111 / .2) 0 7px 29px 0;
    transition: .5s ease-in-out;
    color: #fff
}

.stepProcess_section .chakra-card:hover {
    background-image: linear-gradient(to top, rgb(0 8 27 / .8) 25%, rgb(0 101 141 / .8) 100%);
    border-radius: 40px 8px
}

.stepProcess_section .chakra-card .chakra-card__header .lottie_bg {
    height: 150px;
    width: 150px;
    border-radius: 50%;
    text-align: center;
    justify-content: center;
    display: flex
}

.stepProcess_section .chakra-card:hover .lottie_bg {
    background: rgb(255 255 255 / .4);
    padding: 30px
}

.slider-fade1 .title {
    margin-bottom: 25px;
    animation-delay: .8s
}

.slider-fade1 p {
    animation-delay: 1.2s
}

.slider-fade1 a {
    animation-delay: 1.6s
}

.slider-fade1 .sm-title {
    animation-delay: .5s;
    display: block;
    position: relative
}

.next-link-page-info .date-details:only-child,
.prev-link-page-info .date-details:only-child,
.slider-fade1.owl-theme .owl-nav {
    margin-top: 0
}

.slider-fade1.owl-carousel.owl-theme .owl-dots {
    position: absolute;
    bottom: 80px;
    width: 100%;
    margin: 0;
    left: 0
}

.slider-fade1.owl-theme .owl-nav [class*=owl-] {
    position: absolute;
    right: inherit;
    top: 0;
    bottom: 0;
    width: 60px;
    height: 60px;
    border: none;
    background: #99c2f8;
    border-radius: 60px;
    line-height: 65px;
    transition-duration: .5s;
    left: 15px;
    text-align: center;
    margin: auto;
    opacity: .2
}

.slider-fade1.owl-theme .owl-nav .owl-next {
    top: 0;
    bottom: 0;
    left: inherit;
    right: 15px
}

.slider-fade1.owl-theme .owl-nav .owl-next:hover,
.slider-fade1.owl-theme .owl-nav .owl-prev:hover {
    opacity: 1;
    background: #99c2f8
}

.slider-fade1 .owl-nav i,
.slider-fade1 .owl-nav span {
    font-weight: 600;
    color: #fff;
    transition-duration: .5s;
    font-size: 20px
}

.page-title-section .title-info {
    width: 100%;
    display: block;
    vertical-align: middle;
    margin-bottom: 10px
}

.page-title-section .breadcrumbs-info {
    text-align: left;
    white-space: nowrap;
    width: 100%;
    display: block;
    vertical-align: middle
}

.page-title-section h1 {
    font-weight: 900;
    letter-spacing: 1px;
    line-height: 1.2;
    margin-bottom: 0;
    color: var(--text)
}

.page-title-section ul li {
    display: inline-block;
    font-weight: 700
}

.page-title-section ul li:after {
    content: "\e649";
    font-weight: 700;
    vertical-align: middle;
    color: #fff;
    font-family: themify;
    padding: 0 6px 0 10px;
    font-size: 10px
}

.footer-style1 h3:after,
.page-title-section ul li:last-child:after,
.process-style3.last:after {
    content: none
}

.page-title-section ul li a {
    font-weight: 700;
    color: #fff
}

@media screen and (max-width:1199px) {
    .onBg_layer {
        padding: 70px 0
    }
}

.card-style01:hover .team-icon {
    transition: .5s ease-in-out;
    opacity: 1;
    transform: translateY(-30px)
}

.card-style01 .team-icon {
    position: absolute;
    bottom: 2%;
    left: 0;
    right: 0;
    opacity: 0;
    transition: .5s ease-in-out;
    background: #fff;
    padding: 8px 0;
    margin: 0 50px;
    text-align: center;
    display: inline-block
}

.card-style01 .team-icon ul li {
    margin: 0 15px
}

.card-style01 .team-icon ul li a {
    color: #99c2f8;
    transition: .3s ease-in-out
}

.card-style02 .flag-img img {
    transition: .3s
}

.card-style02:hover .flag-img img {
    transform: rotate(360deg);
    transition: .6s
}

.card-style02 .country-img img,
.card-style03 .card-img img {
    transition: .5s
}

.card-style03 .card-button {
    position: absolute;
    bottom: -12%;
    width: 40px;
    height: 40px;
    background-color: #003a66;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: .4s
}

.card-style03 .card-img {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.blog-main:hover .blog-image-box .blog-image-01 img,
.card-style03:hover .card-img>img {
    transform: scale(1.05);
    opacity: .5
}

.blog-main .blog-image-box h2,
.card-style03 .card-icon-img {
    position: absolute;
    right: 30px;
    bottom: 40px;
    width: 70px;
    z-index: 1;
    font-size: 30px;
    line-height: 26px;
    color: #fff;
    font-weight: 800;
    text-align: center;
    padding: 12px 0 6px;
    background: #99c2f8
}

.blog-main .blog-image-box h2:before,
.card-style03 .card-icon-img:before {
    position: absolute;
    content: "";
    background: rgb(224 36 84 / .5);
    width: 60px;
    height: 5px;
    left: 5px;
    bottom: -5px
}

.blog-main .blog-image-box h2:after,
.card-style03 .card-icon-img:after {
    position: absolute;
    content: "";
    background: rgb(224 36 84 / .5);
    width: 50px;
    height: 10px;
    left: 10px;
    bottom: -10px
}

.owl-theme .owl-nav.disabled+.owl-dots {
    margin-top: 40px
}

.owl-theme .owl-dots .owl-dot span {
    border-radius: 2px
}

.owl-nav i,
.owl-nav span {
    color: #232323;
    font-size: 28px
}

.owl-carousel .owl-item img {
    width: auto;
    display: inline-block
}

.serviceImg_here {
    height: 250px;
    width: 100%
}

@media screen and (min-width:768px) {

    .accordion .accordion-button,
    .accordion-content {
        font-size: 2px
    }
}

.accordion .card {
    background: #fff0;
    box-shadow: none;
    margin-bottom: 20px;
    border: 0;
    border-radius: 0
}

.accordion .card-header {
    border: 0;
    padding: 0;
    background: 0 0
}

.accordion .accordion-button {
    color: #fff;
    font-size: 18px;
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
    white-space: normal;
    box-shadow: none;
    font-weight: 500;
    padding: 20px 60px 20px 20px;
    text-decoration: none;
    background: #99c2f8;
    border: 1px solid #99c2f8
}

.accordion .accordion-button:after {
    background: #fff;
    border: 1px solid #fff;
    content: "-";
    right: 20px;
    border-radius: 5px;
    left: inherit;
    font-size: 18px;
    transform: none;
    width: 25px;
    height: 25px;
    line-height: 21px;
    top: 18px;
    position: absolute;
    color: #99c2f8;
    text-align: center
}

.accordion .accordion-collapse {
    border: none
}

.accordion .card-body {
    font-size: 16px;
    padding: 20px 25px;
    line-height: 28px;
    text-align: left;
    border-top: 0;
    border-bottom: 1px solid #ededed;
    border-left: 1px solid #ededed;
    border-right: 1px solid #ededed
}

.accordion .accordion-button.collapsed {
    background: #fff;
    color: #282b2d;
    border: 1px solid #ededed
}

.accordion .accordion-button.collapsed:after {
    background: #003a66;
    border: none;
    content: "+";
    right: 20px;
    left: inherit;
    font-size: 18px;
    transform: none;
    width: 25px;
    height: 25px;
    line-height: 24px;
    top: 18px;
    border-radius: 5px;
    text-align: center;
    color: #fff
}

@media screen and (min-width:768px) {
    .accordion .accordion-button {
        font-size: 12px
    }
}

.sidebar .widget {
    position: relative;
    display: block;
    margin-bottom: 1.9rem
}

.blog-tags a,
.footer-logo>a,
.quform-loading-wrap .quform-loading,
.widget-tag-cloud ul li,
.widget-tag-cloud ul li a {
    display: inline-block
}

.footer-style1 .social-icons li a:hover,
.sidebar .widget .category-list li.active a,
.sidebar .widget .category-list li:hover a {
    background: #99c2f8;
    color: #fff
}

.sidebar .widget .category-list li a {
    padding: 12px 15px;
    border: 1px solid;
    transition: .4s;
    font-weight: 600;
    display: block
}

.sidebar .widget .category-list li a a {
    transition: .3s ease-in-out;
    display: inline-block;
    position: relative
}

.sidebar .widget .category-list li a a span {
    z-index: 9;
    position: relative
}

.form-group,
.quform-element,
.widget-title {
    margin-bottom: 1rem
}

.widget-content {
    position: relative;
    padding: 30px;
    border: 1px solid;
    border-radius: .25rem;
    background: #fff
}

.blog-tags a {
    background-color: #fff0;
    padding: 7px 12px;
    font-size: 14px;
    line-height: 20px;
    margin: .6rem 5px 0 0;
    vertical-align: top;
    border: 1px solid #dee2e6
}

.blog-tags a:active,
.blog-tags a:focus,
.blog-tags a:hover {
    background-color: #99c2f8;
    border-color: #99c2f8;
    color: #fff
}

.widget-tag-cloud ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0
}

.widget-tag-cloud ul li a {
    border: 1px solid #ededed;
    border-radius: 3px;
    padding: 8px 12px;
    font-size: 14px !important;
    line-height: 20px;
    margin: .6rem 10px 0 0;
    background-color: #fff
}

.widget-tag-cloud ul li a:hover {
    background-color: #003a66;
    color: #fff
}

.comment-reply-link {
    color: #99c2f8;
    background: rgb(224 36 84 / .1);
    padding: 5px 18px;
    font-weight: 500;
    border-radius: 4px;
    font-size: 14px
}

.comment-reply-link:active,
.comment-reply-link:focus,
.comment-reply-link:hover {
    color: #fff;
    background: #99c2f8
}

.about-style-02,
.blog-main {
    position: relative;
    display: block
}

.blog-main .blog-image-box .blog-image-01 img {
    width: 100%;
    transition: .5s
}

.blog-main .blog-content {
    padding: 35px
}

.blog-main .blog-content .blog-author .author-img {
    position: absolute;
    top: 6px;
    right: 0
}

.blog-main .blog-content .blog-author h6:before {
    position: absolute;
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    left: 0;
    top: 8px;
    background: #003a66
}

.blog-main .blog-content .blog-author h6 a:hover,
.blog-main .blog-content .blog-info li a:hover,
.coaching-main .coaching-content-box h3 a:hover {
    color: #e74860
}

.blog-main .blog-content .blog-link a,
.read-more {
    position: relative;
    display: inline-block;
    font-size: 14px;
    line-height: 24px;
    color: #99c2f8;
    font-weight: 800;
    text-transform: uppercase
}

.blog-main .blog-content .blog-link a span,
.read-more span {
    position: relative;
    padding-right: 21px;
    transition: .5s
}

.blog-main .blog-content .blog-link a:hover span,
.read-more:hover span {
    padding-right: 42px
}

.blog-main .blog-content .blog-link a span:before {
    position: absolute;
    content: "\e649";
    font-family: themify;
    top: -2px;
    right: 0;
    font-size: 18px;
    font-weight: 400
}

.blog-main .blog-content .blog-link a span:after,
.read-more span:after {
    position: absolute;
    content: "\e6e2";
    font-family: themify;
    top: -2px;
    right: 16px;
    font-size: 16px;
    opacity: 0;
    transition: .5s
}

.blog-main .blog-content .blog-link a:hover span:after,
.read-more:hover span:after,
[data-overlay-dark="10"]:before,
[data-overlay-light="10"]:before {
    opacity: 1
}

.blog-main .blog-content .blog-info li {
    position: relative;
    display: inline-block
}

.blog-main .blog-content .blog-info li:last-child {
    margin: 0 !important
}

.blog-main .blog-content .blog-info li i {
    position: absolute;
    left: 0;
    top: 5px
}

@media only screen and (max-width:575px) {
    .blog-main .blog-content {
        padding: 30px
    }
}

.banner-wrapper img {
    margin-top: 0;
    clip-path: polygon(0 0, 100% 0, 102% 87%, 0% 100%)
}

.banner-wrapper .icon-boxs {
    position: absolute;
    top: -60px;
    text-align: center;
    left: 0;
    right: 0;
    margin: auto;
    width: 80px;
    height: 80px;
    border-radius: 50%
}

.banner-wrapper .icon-boxs i {
    line-height: 80px
}

.coaching-main {
    position: relative;
    display: block;
    overflow: hidden
}

.coaching-main .coaching-static-content:before {
    position: absolute;
    content: "";
    background: linear-gradient(360deg, rgb(0 58 102 / .9) 0, #fff0 100%);
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

.about-left .about-img-1 img,
.coaching-main .coaching-image-1 img,
.quform-inner input {
    width: 100%
}

.coaching-main .coaching-content-box {
    position: absolute;
    left: 0;
    bottom: 70px;
    width: 100%;
    padding-left: 50px;
    padding-right: 50px
}

.coaching-main .coaching-content-box .coaching-icon-box {
    position: relative;
    display: block;
    color: #fff;
    margin-bottom: 30px
}

.coaching-main .coaching-content-box h3 {
    display: block;
    font-size: 24px;
    line-height: 34px;
    font-weight: 700;
    margin-bottom: 20px
}

.coaching-main .coaching-content-box h3 a {
    display: inline-block;
    color: #fff
}

.coaching-main .coaching-overlay-content {
    position: absolute;
    left: 0;
    top: 30px;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    transition: .5s
}

.coaching-main:hover .coaching-overlay-content {
    opacity: 1;
    top: 0
}

.coaching-main .coaching-overlay-content:before {
    position: absolute;
    content: "";
    background: linear-gradient(360deg, rgb(0 58 102 / .9) 0, #003a66 100%);
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

@media only screen and (max-width:1199px) {
    .coaching-main .coaching-content-box {
        bottom: 0;
        padding-left: 30px;
        padding-right: 30px
    }
}

.pricing-style01 .price-img {
    display: flex;
    width: 90px;
    height: 90px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    position: absolute;
    bottom: -16%;
    right: 10%;
    border: 5px solid #fff
}

.agent-detail-des {
    position: relative;
    z-index: 0;
    padding: 30px;
    border: 1px solid #e5e8ef;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px
}

.agent-detail-des .agent-social-links {
    padding: 0;
    margin: 0
}

.agent-detail-des .agent-social-links li {
    margin-right: 5px;
    margin-bottom: 5px;
    display: inline-block;
    list-style-type: none
}

.agent-detail-des .agent-social-links li a {
    color: #fff;
    padding: 6px 12px;
    display: inline-block;
    background-color: #99c2f8
}

.why-choose-style01 .why-choose-area {
    padding: 65px 20px 20px;
    transition: .4s
}

.why-choose-style01 .why-choose-area:hover {
    box-shadow: rgb(0 48 85 / .9) 0 -50px 36px -28px inset;
    transform: translateY(-10px)
}

@media screen and (max-width:1399px) {
    .card-style01 .team-icon {
        margin: 0 30px
    }

    .why-choose-style01 .why-choose-area {
        padding: 50px 30px
    }
}

.why-choose-style1 .why-choose-box {
    position: absolute;
    background-color: #99c2f8;
    width: 300px;
    text-align: start;
    padding: 30px;
    bottom: 50px
}

.about-left {
    position: relative;
    display: block;
    margin-left: 130px;
    margin-right: 40px
}

.about-shape-2 {
    position: absolute;
    left: -355px;
    top: 190px;
    z-index: 1
}

.about-left .about-img-1 {
    position: relative;
    display: block;
    z-index: 1
}

.about-left .about-img-1 .about-shape-1 {
    position: absolute;
    bottom: -93px;
    right: 90px;
    z-index: -1
}

.about-left .about-img-2 {
    position: absolute;
    left: -130px;
    bottom: -137px;
    z-index: 1
}

.about-left .about-experience {
    position: absolute;
    bottom: -64px;
    left: 87px;
    background-color: #fff;
    padding: 22px 40px 23px;
    max-width: 239px;
    width: 100%;
    z-index: 1
}

.about-left .about-experience::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 5px;
    background-color: #99c2f8;
    z-index: 1
}

.about-experience::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 5px;
    border-top: 10px solid #fff0;
    border-left: 7px solid #99c2f8;
    border-bottom: 10px solid #fff0;
    z-index: 1;
    transform: translateY(-50%)
}

.about-left .about-icon {
    position: absolute;
    top: 40px;
    left: -205px
}

.about-mission .about-icon-box {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 77px;
    height: 76px;
    box-shadow: 0 0 40px rgb(0 0 0 / .1);
    padding: 20px
}

.about-mission img {
    display: block;
    transition: .6s
}

.about-style-02 ul li {
    position: relative;
    display: block;
    padding-left: 35px;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 5px;
    line-height: 2
}

.social-icon-style2 li a,
.social-icon-style3 li a {
    height: 41px;
    line-height: 41px;
    width: 41px;
    text-align: center
}

.about-style-02 ul li:before {
    position: absolute;
    top: -2px;
    left: 0;
    bottom: 0;
    font-family: FontAwesome;
    content: "\f046";
    color: #99c2f8;
    font-size: 20px
}

.about-style-02 .right .icon {
    position: relative;
    display: block;
    width: 60px;
    height: 60px;
    border: 1px dashed #ababab;
    border-radius: 50%;
    font-size: 30px;
    line-height: 58px;
    text-align: center;
    padding: 14px
}

.about-style-02 .about-img {
    position: absolute;
    right: 0;
    display: inline-block;
    top: 50%;
    transform: translateY(-50%)
}

.about-style-02 .about-img:before {
    position: absolute;
    top: 50%;
    left: -30px;
    transform: translateY(-50%);
    border: 2px solid #99c2f8;
    width: 184px;
    height: 428px;
    z-index: -1;
    content: ""
}

.read-more span:before {
    position: absolute;
    content: "\e649";
    font-family: themify;
    top: -2px;
    right: 0;
    font-size: 15px;
    font-weight: 400
}

.book_Card .card-title,
.footer-bar p,
.footer-logo>a,
.footer_txt,
body {
    font-family: var(--font)
}

.client-area {
    margin-top: -90px
}

.countries-block .countries-inner-box {
    padding: 20px 10px;
    position: relative;
    text-align: center
}

.countries-block .countries-inner-box:before {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url(../img/content/shape-04.jpg);
    border-radius: 10px;
    content: "";
    opacity: 0;
    visibility: hidden;
    transition: .3s
}

.countries-block .countries-inner-box:hover:before {
    opacity: 1;
    visibility: visible
}

.countries-block .countries-inner-box:hover .flag {
    transform: rotate(360deg)
}

.countries-block .flag {
    position: relative;
    display: block;
    height: 80px;
    width: 80px;
    border-radius: 50%;
    overflow: hidden;
    transition: .3s;
    margin: 20px auto;
    z-index: 2
}

.pagination {
    border-radius: 0;
    padding: 0;
    margin-left: auto;
    margin-right: auto
}

.pagination ul {
    display: inline-block;
    margin: 0 auto;
    padding: 0
}

.pagination li {
    display: inline;
    margin-right: 10px
}

.footer-style1 .social-icons li:last-child,
.footer-style1 .social-icons2 li:last-child,
.pagination li:last-child,
.social-icon-style2 li:last-child,
.social-icon-style3 li:last-child {
    margin-right: 0
}

.pagination a {
    background: #fff0;
    font-weight: 700;
    text-align: center;
    padding: 12px 16px;
    color: #42545e;
    border: 1px solid #ddd;
    line-height: 25px
}

.pagination a:active,
.pagination a:focus,
.pagination a:hover {
    background-color: #003a66;
    color: #fff;
    box-shadow: none
}

.pagination .active a {
    background-color: #f7f7f7;
    color: #002147;
    border: 1px solid #dbdbdb;
    cursor: default
}

.process-style-02 .progress-text {
    font-size: 15px;
    margin-bottom: 8px
}

.process-style-02 .custom-progress {
    height: 8px;
    border-radius: 50px;
    box-shadow: none;
    margin-bottom: 2rem
}

.process-style-02 .custom-bar {
    height: 100%;
    background-color: #99c2f8;
    box-shadow: none
}

.process-style3 .process-icon {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto;
    background: #003a66;
    border-radius: 50%/10%;
    color: #fff;
    text-align: center;
    line-height: 130px;
    font-size: 50px
}

.process-style3 .process-icon:before {
    content: "";
    position: absolute;
    top: 10%;
    bottom: 10%;
    right: -5%;
    left: -5%;
    background: inherit;
    border-radius: 5%/50%;
    z-index: 0
}

.process-style3 .process-icon img {
    position: relative;
    z-index: 2;
    width: 70px;
    top: 25px
}

.process-style3 .process-number {
    position: absolute;
    right: -20px;
    font-size: 18px;
    line-height: 45px;
    top: -20px;
    color: #fff;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    font-weight: 700;
    z-index: 9;
    background: #99c2f8
}

.process-style3:after {
    position: absolute;
    content: "";
    width: 55px;
    height: 66px;
    background-image: url(../img/icons/process-arrow.png);
    top: 50px;
    right: -45px;
    color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: .2
}

.testimonial-quote {
    -webkit-text-stroke-width: 1px;
    color: #fff0;
    -webkit-text-stroke-color: #ffffff1a;
    font-size: 810px;
    line-height: 0;
    position: absolute;
    left: 55%;
    top: 19%;
    transform: translate(-50%, -50%)
}

.item-3d,
.wrap-3d {
    transform-style: preserve-3d
}

.ground,
.item-3d,
.item-img img {
    transform-origin: 50% 100%
}

.testimonial-carousel1.owl-carousel.owl-theme .owl-nav button.owl-next {
    top: 50%;
    right: -20%;
    position: absolute;
    background: #fff;
    padding: 10px !important;
    line-height: normal;
    transition: .5s ease-in-out
}

.testimonial-carousel1.owl-carousel.owl-theme .owl-nav button:hover.owl-next {
    background-color: #e74860
}

.testimonial-carousel1.owl-carousel.owl-theme .owl-nav button.owl-prev {
    top: 50%;
    left: -20%;
    position: absolute;
    background: #fff;
    padding: 10px !important;
    line-height: normal;
    transition: .5s ease-in-out
}

.testimonial-carousel1.owl-carousel.owl-theme .owl-nav button:hover.owl-prev {
    background-color: #e74860
}

@media only screen and (max-width:991px) {
    .productTab .nav-item {
        margin-bottom: 10px
    }

    .swiper-button-next,
    .swiper-button-prev {
        right: inherit;
        top: 50% !important;
        bottom: 0;
        width: 40px !important;
        height: 40px !important;
        border: 2px solid var(--text);
        background: 0 0 !important;
        border-radius: 60px;
        line-height: 65px;
        transition-duration: .5s;
        left: 0;
        text-align: center;
        margin: auto;
        opacity: .4
    }

    .text_container p {
        font-size: 18px !important
    }

    .testimonial-carousel1.owl-carousel.owl-theme .owl-nav button.owl-next,
    .testimonial-carousel1.owl-carousel.owl-theme .owl-nav button.owl-prev {
        display: none
    }
}

@media only screen and (max-width:767px) {
    .testimonial-quote {
        left: 59%
    }
}

.form-group label {
    margin-bottom: .5rem
}

.form-control:focus {
    border-color: #99c2f8
}

.form-check-input:checked {
    border-color: #99c2f8;
    background-color: #99c2f8
}

.quform-input .quform-errors-wrap {
    position: absolute;
    right: 8px;
    top: 0;
    line-height: normal;
    z-index: 1
}

.quform-element>label {
    font-weight: 600;
    padding-bottom: 5px;
    margin-bottom: 0;
    color: #6a747b;
    font-size: 15px
}

.quform-element>label .quform-required {
    color: #cc0101;
    font-size: 10px
}

select option:hover {
    background: #99c2f8 !important
}

.quform-elements .quform-element textarea {
    margin-bottom: 0;
    padding: 8px 15px;
    vertical-align: top
}

.quform-elements .quform-element select {
    margin-bottom: 0;
    padding: 8px 19px 8px 15px
}

.quform-errors {
    padding: 0;
    margin: 0;
    line-height: normal
}

.quform-errors>.quform-error,
.quform-outer-no-js .quform-error {
    padding: 0;
    background: 0 0;
    border: none;
    float: none;
    color: #f5543f;
    font-size: 11px;
    line-height: normal;
    letter-spacing: normal
}

.quform-outer-no-js .quform-success-message,
.quform-success-message {
    padding: .75rem 1.25rem .75rem 3rem
}

.quform-has-error .custom-file-label,
.quform-has-error input,
.quform-has-error input[type=file],
.quform-has-error select,
.quform-has-error textarea {
    border-color: #f5543f
}

.quform-loading-wrap,
.quform-submit-inner {
    float: none
}

.ani-top-bottom {
    -webkit-animation-name: top-bottom;
    animation-name: top-bottom;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear
}

@keyframes top-bottom {

    0%,
    100% {
        transform: translateY(-20px)
    }

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

.social-icon-style2 {
    margin-bottom: 0;
    display: inline-block;
    padding-left: 10px;
    list-style: none
}

.social-icon-style2 li {
    vertical-align: middle;
    display: inline-block
}

.social-icon-style2 li a {
    display: inline-block;
    font-size: 14px;
    color: #fff;
    background: #99c2f8
}

.social-icon-style2 li a.small {
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 11px
}

.social-icon-style2.small li a {
    width: 35px;
    height: 35px;
    line-height: 35px
}

@media screen and (max-width:991px) {
    .bg-nav {
        background-color: #056894 !important
    }

    .header-style1 .navbar-toggler {
        background: #99c2f8
    }

    .header-style1 .navbar-toggler:after {
        border-top: 2px solid #fff;
        border-bottom: 2px solid #fff
    }

    .header-style1 .navbar-toggler.menu-opened:after,
    .header-style1 .navbar-toggler.menu-opened:before,
    .header-style1 .navbar-toggler:before {
        background: #fff
    }

    .onBg_layer {
        padding: 50px 0
    }

    .accordion .accordion-button {
        padding: 15px 50px 15px 15px;
        font-size: 16px
    }

    .accordion .accordion-button.collapsed:after,
    .accordion .accordion-button:after {
        right: 15px;
        font-size: 16px;
        height: 22px;
        line-height: 22px;
        width: 22px;
        top: 13px
    }

    .accordion .card-body {
        padding: 20px 15px
    }

    .social-icon-style2.small li a {
        width: 30px;
        height: 30px;
        line-height: 30px
    }
}

.social-icon-style3 {
    margin-bottom: 0;
    display: inline-block;
    padding-left: 0;
    list-style: none
}

.social-icon-style3 li {
    vertical-align: middle;
    display: inline-block;
    margin-right: 5px
}

.social-icon-style3 li a {
    display: inline-block;
    font-size: 14px
}

.footer-style1 .footer-bar,
.footer-style1 li a {
    color: rgb(255 255 255 / .85)
}

.search-frame .search_list li+li {
    border-top: 3px solid #99c2f8
}

.contact-map {
    width: 100%;
    height: 400px;
    vertical-align: top;
    border: 0
}

.contact-info-block {
    position: relative;
    text-align: center
}

.contact-info-block .contact-img {
    width: 100%;
    padding: 50px 30px;
    position: relative;
    background-size: cover;
    background-position: 50%;
    overflow: hidden;
    box-shadow: 0 3px 10px 0 rgb(41 45 194 / .08);
    transition: .3s ease-in-out;
    height: 100%
}

.contact-info-block .bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    transition: background-color .4s
}

.contact-info-block:hover .bg-overlay:before {
    opacity: 0;
    transform: translate(-100%, -100%)
}

.contact-info-block .bg-overlay:before {
    content: "";
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 1;
    transform: translate(0, 0);
    transition: transform .6s, opacity .6s
}

.contact-info-block:hover .bg-overlay:after {
    opacity: 1;
    transform: translate(0, 0)
}

.contact-info-block .bg-overlay:after {
    content: "";
    background-color: rgb(0 0 0 / .8);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    transform: translate(100%, 100%);
    transition: transform .6s .2s, opacity .6s .2s
}

.contact-info-block .content-text {
    position: relative;
    padding: 0 50px
}

.page-navigation {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    box-shadow: 0 10px 60px 0 rgb(0 0 0 / .05);
    border-radius: 8px
}

.next-page,
.prev-page {
    position: relative;
    width: 50%;
    max-width: 350px;
    margin: 10px
}

.next-page:before,
.prev-page:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 8px;
    background-color: #fff0;
    box-shadow: 0 0 0 0 #fff0;
    transform: scale(1.04, 1.12);
    transition: .3s ease-in-out;
    pointer-events: none
}

.all-demo,
.all-demo:hover,
.buy-theme,
.buy-theme:hover {
    transition-timing-function: ease-in-out;
    transition-duration: .2s
}

.next-page .page-info>a,
.prev-page .page-info>a {
    display: flex;
    align-items: center;
    position: relative;
    padding: 16px 20px;
    min-height: 110px;
    transition: .8s
}

.next-page .page-info .image-next,
.next-page .page-info .image-prev,
.prev-page .page-info .image-next,
.prev-page .page-info .image-prev {
    position: relative;
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    vertical-align: middle;
    transition: inherit;
    overflow: hidden
}

.next-page .page-info .next-title,
.next-page .page-info .prev-title,
.prev-page .page-info .next-title,
.prev-page .page-info .prev-title {
    display: inline-block;
    position: relative;
    max-width: 220px;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 700;
    word-wrap: break-word;
    vertical-align: middle;
    transition: .45s
}

.next-page .image-next:before,
.prev-page .image-prev:before {
    z-index: 2;
    font-family: themify;
    font-size: 21px;
    line-height: 70px;
    text-align: center;
    color: #fff;
    right: 0
}

.next-page .image-next:after,
.next-page .image-next:before,
.prev-page .image-prev:after,
.prev-page .image-prev:before {
    visibility: hidden;
    transition: .3s ease-in-out;
    display: block;
    left: 0;
    position: absolute;
    opacity: 0
}

.next-page .page-info .next-title:empty,
.next-page .page-info .prev-title:empty,
.prev-page .page-info .next-title:empty,
.prev-page .page-info .prev-title:empty {
    display: none
}

.next-page:hover:before,
.prev-page:hover:before {
    background-color: #fff;
    transform: scale(1);
    box-shadow: 0 10px 30px 0 rgb(34 35 40 / .1)
}

.prev-page a {
    justify-content: flex-start;
    text-align: left
}

.next-page .next-title,
.next-page a {
    text-align: right
}

.next-page a:hover .image-next:after,
.prev-page a:hover .image-prev:after {
    visibility: visible;
    opacity: 1
}

.prev-page a:hover .image-prev:before {
    visibility: visible;
    opacity: 1;
    margin-left: 0
}

.prev-page .image-prev {
    margin-right: 20px
}

.prev-page .image-prev:before {
    margin-left: 20px;
    content: "\e64a"
}

.prev-page .image-prev:after {
    content: "";
    top: 0;
    width: 100%;
    height: 100%
}

.next-page {
    margin-left: auto
}

.next-page a {
    justify-content: flex-end
}

.next-page a:hover .image-next:before {
    visibility: visible;
    opacity: 1;
    margin-right: 0
}

.next-page .image-next:before {
    margin-right: 20px;
    content: "\e64a";
    transform: scaleX(-1)
}

.next-page .image-next:after {
    content: "";
    top: 0;
    height: 100%;
    width: 100%
}

.item-caption,
.next-link-page-info>span,
.prev-link-page-info>span {
    display: block
}

.next-link-page-info .date-details,
.prev-link-page-info .date-details {
    font-size: 14px;
    letter-spacing: .025em;
    line-height: 20px;
    margin-bottom: -2px
}

.next-link-page-info .date-details>div,
.next-link-page-info .date-details>span,
.prev-link-page-info .date-details>div,
.prev-link-page-info .date-details>span {
    line-height: inherit;
    transition: .45s;
    font-weight: 500
}

@media screen and (max-width:575px) {
    .accordion .accordion-button {
        padding: 15px 50px 15px 15px
    }

    .widget-content {
        padding: 20px
    }

    .about-style-01 .about-left .about-experience {
        bottom: -164px;
        left: 14px
    }

    .pagination li {
        margin-right: 8px
    }

    .next-page .page-info>a,
    .prev-page .page-info>a {
        padding: 10px
    }

    .next-page .page-info .next-title,
    .next-page .page-info .prev-title,
    .prev-page .page-info .next-title,
    .prev-page .page-info .prev-title {
        max-width: 168px
    }
}

.ps-0 {
    padding-left: 0 !important
}

.mb-1-6,
.my-1-6 {
    margin-bottom: 1.6rem
}

.mb-1-7,
.my-1-7 {
    margin-bottom: 1.7rem
}

.mb-1-8,
.my-1-8 {
    margin-bottom: 1.8rem
}

footer {
    word-break: break-word;
    position: relative
}

.work_man_img {
    left: 0;
    margin-top: -114px;
    z-index: 9;
    position: absolute
}

.footer_svg_set {
    background-image: url(../assets/bgimg/wave-desktop.svg);
    background-color: #fff0;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 20px
}

@media only screen and (max-width:768px) {
    .footer_svg_set {
        background-image: url(../assets/bgimg/wave_mobile.svg);
        background-color: #003758;
        background-size: cover;
        background-repeat: no-repeat;
        padding: 20px
    }
}

.bg_ar_img {
    background-image: url(../assets/bgimg/shape-13.png);
    background-position: left;
    background-repeat: repeat;
    background-size: auto;
    z-index: -1;
    animation: 3s linear infinite alternate moveBackground
}

@keyframes moveBackground {
    from {
        background-position: 0 0
    }

    to {
        background-position: 0 20%
    }
}

.footer-logo {
    max-width: 214px;
    width: 100%;
    display: inline-block
}

.footer_txt {
    font-weight: 400;
    font-size: 16px;
    text-align: justify
}

.footer-style1>.container {
    padding-top: 90px;
    padding-bottom: 50px
}

.container {
    z-index: 2
}

.all-demo,
.buy-theme {
    position: fixed;
    box-shadow: 0 0 10px rgb(0 0 0 / .2);
    z-index: 9999
}

.footer-style1 h3 {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 25px;
    line-height: 1;
    position: relative
}

.footer-style1 .footer-bar {
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: 0;
    border-top: 1px solid
}

.footer-style1 .footer-bar p {
    margin-top: 5px;
    margin-bottom: 0;
    color: #000;
    font-family: var(--font)
}

.footer-bar p {
    font-size: 14px;
    color: #fff
}

.intro h1,
.intro p {
    font-family: Poppins, sans-serif
}

.footer-style1 li {
    margin-bottom: 10px;
    list-style: none
}

.footer-style1 .social-icons ul,
.footer-style1 .social-icons2 ul {
    margin: 0;
    padding: 0
}

.footer-style1 .social-icons li {
    display: inline-block;
    margin-right: 1px;
    margin-bottom: 0
}

.footer-style1 .social-icons li a {
    font-size: 14px;
    height: 35px;
    line-height: 36px;
    width: 35px;
    background: #f5f5f5;
    color: rgb(0 0 0 / .65);
    border-radius: 3px;
    display: inline-block;
    text-align: center
}

@media screen and (max-width:1199px) {
    .pricing-style01 .price-img {
        width: 90px;
        height: 90px;
        bottom: -28%
    }

    .why-choose-style1 .why-choose-box {
        padding: 15px 30px;
        bottom: 0
    }

    .contact-info-block .content-text {
        padding: 0
    }

    .footer-style1>.container {
        padding-top: 70px;
        padding-bottom: 70px
    }
}

@media screen and (max-width:767px) {
    .slider-fade1 .bg-img {
        background-position: -50% 0
    }

    .page-title-section .title-info {
        margin-bottom: 10px
    }

    .why-choose-style01 .why-choose-area {
        padding: 30px 10px
    }

    .process-style3:after {
        content: none
    }

    .next-page,
    .prev-page {
        width: calc(100% - 20px);
        max-width: unset
    }

    .prev-page+.next-page {
        margin-top: 0
    }

    .page-navigation {
        flex-direction: column
    }

    .footer-style1>.container {
        padding-top: 50px;
        padding-bottom: 50px
    }

    .footer-style1 h3 {
        margin-bottom: 20px
    }
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-right: auto;
    margin-left: auto
}

@media (min-width:576px) {
    .col-sm {
        flex: 1 0 0%
    }

    .col-sm-auto,
    .row-cols-sm-auto>* {
        flex: 0 0 auto;
        width: auto
    }

    .col-sm-12,
    .row-cols-sm-1>* {
        flex: 0 0 auto;
        width: 100%
    }

    .col-sm-6,
    .row-cols-sm-2>* {
        flex: 0 0 auto;
        width: 50%
    }

    .row-cols-sm-3>* {
        flex: 0 0 auto;
        width: 33.3333333333%
    }

    .col-sm-3,
    .row-cols-sm-4>* {
        flex: 0 0 auto;
        width: 25%
    }

    .row-cols-sm-5>* {
        flex: 0 0 auto;
        width: 20%
    }

    .row-cols-sm-6>* {
        flex: 0 0 auto;
        width: 16.6666666667%
    }

    .col-sm-1 {
        flex: 0 0 auto;
        width: 8.33333333%
    }

    .col-sm-2 {
        flex: 0 0 auto;
        width: 16.66666667%
    }

    .col-sm-4 {
        flex: 0 0 auto;
        width: 33.33333333%
    }

    .col-sm-5 {
        flex: 0 0 auto;
        width: 41.66666667%
    }

    .col-sm-7 {
        flex: 0 0 auto;
        width: 58.33333333%
    }

    .col-sm-8 {
        flex: 0 0 auto;
        width: 66.66666667%
    }

    .col-sm-9 {
        flex: 0 0 auto;
        width: 75%
    }

    .col-sm-10 {
        flex: 0 0 auto;
        width: 83.33333333%
    }

    .col-sm-11 {
        flex: 0 0 auto;
        width: 91.66666667%
    }

    .offset-sm-0 {
        margin-left: 0
    }

    .offset-sm-1 {
        margin-left: 8.33333333%
    }

    .offset-sm-2 {
        margin-left: 16.66666667%
    }

    .offset-sm-3 {
        margin-left: 25%
    }

    .offset-sm-4 {
        margin-left: 33.33333333%
    }

    .offset-sm-5 {
        margin-left: 41.66666667%
    }

    .offset-sm-6 {
        margin-left: 50%
    }

    .offset-sm-7 {
        margin-left: 58.33333333%
    }

    .offset-sm-8 {
        margin-left: 66.66666667%
    }

    .offset-sm-9 {
        margin-left: 75%
    }

    .offset-sm-10 {
        margin-left: 83.33333333%
    }

    .offset-sm-11 {
        margin-left: 91.66666667%
    }

    .g-sm-0,
    .gx-sm-0 {
        --bs-gutter-x: 0
    }

    .g-sm-0,
    .gy-sm-0 {
        --bs-gutter-y: 0
    }

    .g-sm-1,
    .gx-sm-1 {
        --bs-gutter-x: 0.25rem
    }

    .g-sm-1,
    .gy-sm-1 {
        --bs-gutter-y: 0.25rem
    }

    .g-sm-2,
    .gx-sm-2 {
        --bs-gutter-x: 0.5rem
    }

    .g-sm-2,
    .gy-sm-2 {
        --bs-gutter-y: 0.5rem
    }

    .g-sm-3,
    .gx-sm-3 {
        --bs-gutter-x: 1rem
    }

    .g-sm-3,
    .gy-sm-3 {
        --bs-gutter-y: 1rem
    }

    .g-sm-4,
    .gx-sm-4 {
        --bs-gutter-x: 1.5rem
    }

    .g-sm-4,
    .gy-sm-4 {
        --bs-gutter-y: 1.5rem
    }

    .g-sm-5,
    .gx-sm-5 {
        --bs-gutter-x: 3rem
    }

    .g-sm-5,
    .gy-sm-5 {
        --bs-gutter-y: 3rem
    }

    .container,
    .container-sm {
        max-width: 540px
    }
}

@media (min-width:768px) {

    .container,
    .container-md,
    .container-sm {
        max-width: 720px
    }
}

@media (min-width:992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0 !important;
        padding-left: 0 !important
    }

    .container,
    .container-lg,
    .container-md,
    .container-sm {
        max-width: 960px
    }
}

@media (min-width:1200px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 1140px
    }

    .col-xl {
        flex: 1 0 0%
    }

    .col-xl-auto,
    .row-cols-xl-auto>* {
        flex: 0 0 auto;
        width: auto
    }

    .col-xl-12,
    .row-cols-xl-1>* {
        flex: 0 0 auto;
        width: 100%
    }

    .col-xl-6,
    .row-cols-xl-2>* {
        flex: 0 0 auto;
        width: 50%
    }

    .row-cols-xl-3>* {
        flex: 0 0 auto;
        width: 33.3333333333%
    }

    .col-xl-3,
    .row-cols-xl-4>* {
        flex: 0 0 auto;
        width: 25%
    }

    .row-cols-xl-5>* {
        flex: 0 0 auto;
        width: 20%
    }

    .row-cols-xl-6>* {
        flex: 0 0 auto;
        width: 16.6666666667%
    }

    .col-xl-1 {
        flex: 0 0 auto;
        width: 8.33333333%
    }

    .col-xl-2 {
        flex: 0 0 auto;
        width: 16.66666667%
    }

    .col-xl-4 {
        flex: 0 0 auto;
        width: 33.33333333%
    }

    .col-xl-5 {
        flex: 0 0 auto;
        width: 41.66666667%
    }

    .col-xl-7 {
        flex: 0 0 auto;
        width: 58.33333333%
    }

    .col-xl-8 {
        flex: 0 0 auto;
        width: 66.66666667%
    }

    .col-xl-9 {
        flex: 0 0 auto;
        width: 75%
    }

    .col-xl-10 {
        flex: 0 0 auto;
        width: 83.33333333%
    }

    .col-xl-11 {
        flex: 0 0 auto;
        width: 91.66666667%
    }

    .offset-xl-0 {
        margin-left: 0
    }

    .offset-xl-1 {
        margin-left: 8.33333333%
    }

    .offset-xl-2 {
        margin-left: 16.66666667%
    }

    .offset-xl-3 {
        margin-left: 25%
    }

    .offset-xl-4 {
        margin-left: 33.33333333%
    }

    .offset-xl-5 {
        margin-left: 41.66666667%
    }

    .offset-xl-6 {
        margin-left: 50%
    }

    .offset-xl-7 {
        margin-left: 58.33333333%
    }

    .offset-xl-8 {
        margin-left: 66.66666667%
    }

    .offset-xl-9 {
        margin-left: 75%
    }

    .offset-xl-10 {
        margin-left: 83.33333333%
    }

    .offset-xl-11 {
        margin-left: 91.66666667%
    }

    .g-xl-0,
    .gx-xl-0 {
        --bs-gutter-x: 0
    }

    .g-xl-0,
    .gy-xl-0 {
        --bs-gutter-y: 0
    }

    .g-xl-1,
    .gx-xl-1 {
        --bs-gutter-x: 0.25rem
    }

    .g-xl-1,
    .gy-xl-1 {
        --bs-gutter-y: 0.25rem
    }

    .g-xl-2,
    .gx-xl-2 {
        --bs-gutter-x: 0.5rem
    }

    .g-xl-2,
    .gy-xl-2 {
        --bs-gutter-y: 0.5rem
    }

    .g-xl-3,
    .gx-xl-3 {
        --bs-gutter-x: 1rem
    }

    .g-xl-3,
    .gy-xl-3 {
        --bs-gutter-y: 1rem
    }

    .g-xl-4,
    .gx-xl-4 {
        --bs-gutter-x: 1.5rem
    }

    .g-xl-4,
    .gy-xl-4 {
        --bs-gutter-y: 1.5rem
    }

    .g-xl-5,
    .gx-xl-5 {
        --bs-gutter-x: 3rem
    }

    .g-xl-5,
    .gy-xl-5 {
        --bs-gutter-y: 3rem
    }
}

@media (min-width:1400px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1320px
    }
}

.intro,
.item-content {
    max-width: 50rem;
    margin: 0 auto
}

.footer-style1 .social-icons2 li {
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 0
}

.footer-style1 .social-icons2 li a {
    font-size: 14px;
    height: 35px;
    line-height: 36px;
    width: 35px;
    background: rgb(255 255 255 / .1);
    color: #fff;
    border-radius: 50px;
    display: inline-block;
    text-align: center
}

.footer-style1 .social-icons2 li a:hover {
    background: #fff;
    color: #003a66
}

.buy-theme {
    top: 150px;
    right: -89px;
    background: #99c2f8
}

.buy-theme i {
    font-size: 16px;
    vertical-align: middle;
    position: relative;
    top: -1px;
    color: #fff
}

.all-demo i {
    font-size: 15px;
    vertical-align: middle;
    position: relative;
    top: -1px;
    color: #fff
}

.all-demo:hover,
.buy-theme:hover {
    right: 0
}

.all-demo span,
.buy-theme span {
    padding: 0 9px;
    position: relative;
    top: 0;
    opacity: 0
}

.all-demo:hover span,
.buy-theme:hover span {
    opacity: 1;
    color: #fff
}

.footer a:before,
.item-caption p a:before {
    bottom: 3px;
    height: 1px;
    opacity: 0;
    transition: opacity .25s
}

.all-demo a,
.buy-theme a {
    color: #232323;
    font-size: 10px;
    text-transform: uppercase;
    padding: 5px 10px;
    display: block;
    font-weight: 500
}

.all-demo {
    top: 185px;
    right: -105px
}

@media screen and (min-width:991px) and (max-width:1067px) {
    .navbar-nav>li {
        margin-left: 0 !important
    }

    .navbar-nav>li a {
        font-size: 15px
    }
}

@media screen and (min-width:1200px) and (max-width:1300px) {
    .navbar-nav li {
        margin-left: 0 !important;
        float: left;
        text-align: center
    }

    .attr-nav {
        display: none
    }
}

*,
:after,
:before {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

.group:after {
    content: "";
    display: table;
    clear: both
}

body {
    scroll-behavior: smooth !important;
    text-rendering: optimizeLegibility;
    font-family: "Myriad Pro", sans-serif;
    font-size: 100%;
    line-height: 1.5;
    color: #787878;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.footer a,
.intro h1,
strong {
    color: #303030
}

.wrap-3d {
    width: 100%;
    height: 100%;
    max-height: 100%;
    padding-top: 5%;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    background-color: #f0f0f0;
    perspective: 150rem;
    perspective-origin: 50% 110%
}

.item-3d {
    width: 100%;
    margin-bottom: 20%;
    padding-top: 10%;
    padding-bottom: 5%
}

.ground {
    position: absolute;
    top: 0;
    right: -50%;
    bottom: 0;
    left: -50%;
    width: 200%;
    margin: 0 auto;
    background-image: linear-gradient(#d8d8d8, #f2f2f2 60%);
    background-size: 100%;
    transform: rotateX(70deg);
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.ground:after,
.ground:before {
    content: "";
    position: absolute;
    width: 100%
}

.ground:before {
    top: 0;
    left: 50%;
    height: 100%;
    width: 50%;
    max-width: 50rem;
    background-image: radial-gradient(#ccc, #fff0 60%);
    background-size: 50% 80%;
    background-repeat: no-repeat;
    transform: translateX(-50%)
}

.ground:after {
    bottom: -500px;
    left: 0;
    height: 500px;
    background-image: linear-gradient(#d8d8d8, #f2f2f2);
    transform-origin: 50% 0;
    transform: rotateX(-70deg)
}

.item-3d:nth-child(2n) .ground:before {
    background-position: 100% 50%;
    -webkit-animation: 5s -1s infinite floating-shadow-r;
    animation: 5s -1s infinite floating-shadow-r
}

.item-3d:nth-child(odd) .ground:before {
    background-position: 0 50%;
    -webkit-animation: 5s -1s infinite floating-shadow-l;
    animation: 5s -1s infinite floating-shadow-l
}

@-webkit-keyframes floating-shadow-l {

    0%,
    100% {
        background-size: 35% 80%;
        background-position: 10% 80%
    }

    50% {
        background-size: 50% 80%;
        background-position: 0 80%
    }
}

@keyframes floating-shadow-l {

    0%,
    100% {
        background-size: 35% 80%;
        background-position: 10% 80%
    }

    50% {
        background-size: 50% 80%;
        background-position: 0 80%
    }
}

@-webkit-keyframes floating-shadow-r {

    0%,
    100% {
        background-size: 35% 80%;
        background-position: 90% 80%
    }

    50% {
        background-size: 50% 80%;
        background-position: 100% 80%
    }
}

@keyframes floating-shadow-r {

    0%,
    100% {
        background-size: 35% 80%;
        background-position: 90% 80%
    }

    50% {
        background-size: 50% 80%;
        background-position: 100% 80%
    }
}

.item-content {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    transform: translateZ(0)
}

.item-caption,
.item-img {
    float: left;
    width: 50%;
    position: relative
}

.item-img {
    display: block;
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    -webkit-animation: 5s -1s infinite floating;
    animation: 5s -1s infinite floating
}

.item-img img {
    display: block;
    width: 100%;
    height: auto;
    transform: translateZ(-5rem)
}

.footer a,
.item-caption p a {
    display: inline-block;
    position: relative
}

.item-3d:nth-child(2n) .item-img {
    float: right;
    order: 1
}

@-webkit-keyframes floating {

    0%,
    100% {
        transform: translateY(-5%)
    }

    50% {
        transform: translateY(0)
    }
}

@keyframes floating {

    0%,
    100% {
        transform: translateY(-5%)
    }

    50% {
        transform: translateY(0)
    }
}

.item-3d:nth-child(odd) .item-caption {
    padding-left: 10%
}

.item-3d:nth-child(2n) .item-caption {
    text-align: right;
    padding-right: 10%
}

.item-caption p {
    font-size: 87.5%;
    line-height: 1.333;
    margin-bottom: 1.25rem
}

@media (max-width:600px) {
    body {
        font-size: 70%
    }

    .item-3d {
        margin-bottom: 40%
    }

    .item-3d:nth-child(odd) .item-caption {
        padding-left: 5%
    }

    .item-3d:nth-child(2n) .item-caption {
        padding-right: 5%
    }

    .item-caption p {
        margin-bottom: .5rem
    }
}

.item-caption p a {
    margin-bottom: .3rem
}

.item-caption p a:before {
    content: "";
    position: absolute;
    right: 1rem;
    left: 0;
    background-color: #08c
}

.item-caption p a:after {
    content: ">";
    padding-left: .5rem
}

.footer a:active:before,
.footer a:focus:before,
.footer a:hover:before,
.item-caption p a:active:before,
.item-caption p a:focus:before,
.item-caption p a:hover:before,
[data-overlay-dark="5"]:before,
[data-overlay-light="5"]:before {
    opacity: .5
}

.intro {
    position: relative;
    width: 100%;
    padding: 15% 2rem;
    text-align: center
}

.intro:after {
    content: "↓";
    position: absolute;
    bottom: 20%;
    left: 0;
    width: 100%;
    font-size: 150%;
    -webkit-animation: 1s linear -1s infinite scroll-arrw;
    animation: 1s linear -1s infinite scroll-arrw
}

@-webkit-keyframes scroll-arrw {
    0% {
        transform: translateY(0);
        opacity: 0
    }

    50% {
        transform: translateY(80%);
        opacity: 1
    }

    100% {
        transform: translateY(160%);
        opacity: 0
    }
}

@keyframes scroll-arrw {
    0% {
        transform: translateY(0);
        opacity: 0
    }

    50% {
        transform: translateY(80%);
        opacity: 1
    }

    100% {
        transform: translateY(160%);
        opacity: 0
    }
}

.intro h1 {
    font-size: 250%
}

.intro p {
    margin-bottom: 2rem;
    font-size: 175%;
    line-height: 1.4286
}

.footer {
    padding: 0 2rem 20%;
    text-align: center;
    transform: translateZ(0)
}

.footer a:before {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    background-color: #303030
}

.navbar-toggler:focus {
    text-decoration: none !important;
    box-shadow: none !important;
    outline: 0 !important
}

.btn-close {
    margin-left: 0 !important
}

.hrLine {
    margin: 8px;
    width: 75%
}

@media only screen and (min-width:991px) and (max-width:2000px) {

    .bgDropDown,
    .bgDropDown .bText:hover,
    .bgDropDown .bText:hover a {
        color: var(--text) !important
    }

    .dropdownbgcolor {
        background: beige !important
    }

    .bgDropDown {
        background-color: #fff !important;
        padding-bottom: 10px;
        text-align: left !important;
        border-radius: 12px !important
    }

    .bgDropDown .bText {
        color: #001935;
        padding: 12px !important;
        border-radius: 5px !important;
        font-family: var(--font);
        font-weight: 500;
        background-image: linear-gradient(to left, transparent, transparent 50%, #001935 50%, #001935);
        background-position: 100% 0;
        background-size: 200% 100%;
        transition: .25s ease-in
    }

    .bgDropDown .bText:hover {
        background-position: 0 0 !important
    }
}

@media (min-width:992px) {
    .hrLine {
        display: none
    }

    .bgDropDown {
        padding-bottom: 10px;
        text-align: left !important;
        color: var(--text) !important;
        border-radius: 12px !important
    }

    .bgDropDown .bText {
        padding: 10px;
        border-radius: 12px !important;
        font-family: var(--font)
    }
}

.col-lg-4-4 {
    flex: 0 0 auto;
    width: 50.33333333%
}

.col-lg-2 {
    flex: 0 0 auto
}

.mb-1-9,
.my-1-9 {
    margin-bottom: 1.9rem
}

.w-xxl-85px {
    width: 85px
}

.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x))
}

.row>* {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y)
}

.pb-4 {
    padding-bottom: 1.5rem !important
}

.col-lg-6,
.col-md-6 {
    flex: 0 0 auto;
    width: 50%
}

.my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important
}

.my-1 {
    margin-top: .25rem !important;
    margin-bottom: .25rem !important
}

.my-2 {
    margin-top: .5rem !important;
    margin-bottom: .5rem !important
}

.my-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important
}

.my-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important
}

.my-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important
}

.my-auto {
    margin-top: auto !important;
    margin-bottom: auto !important
}

.mt-0 {
    margin-top: 0 !important
}

.mt-1 {
    margin-top: .25rem !important
}

.mt-2 {
    margin-top: .5rem !important
}

.mt-3 {
    margin-top: 1rem !important
}

.mt-4 {
    margin-top: 1.5rem !important
}

.ml-1 {
    margin-left: .5rem !important
}

.ml-2 {
    margin-left: 1rem !important
}

.ml-4 {
    margin-left: 1.5rem !important
}

.mt-5 {
    margin-top: 3rem !important
}

.ml-5 {
    margin-left: 3rem !important
}

.ml-10 {
    margin-left: 8rem !important
}

.mr-10 {
    margin-right: 8rem !important
}

.mt-auto {
    margin-top: auto !important
}

.me-0 {
    margin-right: 0 !important
}

.me-1 {
    margin-right: .25rem !important
}

.me-2 {
    margin-right: .5rem !important
}

.me-3 {
    margin-right: 1rem !important
}

.me-4 {
    margin-right: 1.5rem !important
}

.me-5 {
    margin-right: 3rem !important
}

.me-auto {
    margin-right: auto !important
}

.mb-0,
.mb-lg-0 {
    margin-bottom: 0 !important
}

.mb-1 {
    margin-bottom: .25rem !important
}

.mb-2 {
    margin-bottom: .5rem !important
}

.mb-3 {
    margin-bottom: 1rem !important
}

.mb-5 {
    margin-bottom: 3rem !important
}

.mb-10 {
    margin-bottom: 6rem !important
}

.mb-auto {
    margin-bottom: auto !important
}

.d-flex {
    display: flex !important
}

.flex-shrink-0 {
    flex-shrink: 0 !important
}

.opacity8,
[data-overlay-dark="8"]:before,
[data-overlay-light="8"]:before {
    opacity: .8
}

.col-12,
.col-lg-12 {
    flex: 0 0 auto;
    width: 100%
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}

.mb-4 {
    margin-bottom: 1.5rem !important
}

.border-color-light-white {
    border-color: rgb(255 255 255 / .1) !important
}

.col-lg-auto {
    flex: 0 0 auto;
    width: auto
}

.col-lg-1 {
    flex: 0 0 auto;
    width: 8.33333333%
}

.col-lg-2 {
    flex: 0 0 auto;
    width: 16.66666667%
}

.col-lg-3 {
    flex: 0 0 auto;
    width: 25%
}

.col-lg-4 {
    flex: 0 0 auto;
    width: 33.33333333%
}

.col-lg-5 {
    flex: 0 0 auto;
    width: 41.66666667%
}

.col-lg-7 {
    flex: 0 0 auto;
    width: 58.33333333%
}

.col-lg-8 {
    flex: 0 0 auto;
    width: 66.66666667%
}

.col-lg-9 {
    flex: 0 0 auto;
    width: 75%
}

.col-lg-10 {
    flex: 0 0 auto;
    width: 83.33333333%
}

.col-lg-11 {
    flex: 0 0 auto;
    width: 91.66666667%
}

.flex-container-cards {
    filter: drop-shadow(#ff6400 0 0 1px);
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
    align-items: center
}

.flex-container-cards .card {
    background: linear-gradient(240deg, rgb(0 0 0) 0, rgb(36 36 36) 100%);
    width: 300px;
    -webkit-clip-path: polygon(0 0, 200px 0, 210px 10px, 280px 10px, 290px 0, 100% 0, 100% 150px, 290px 160px, 290px 300px, 100% 310px, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 400px, 10px 390px, 10px 100px, 0 90px);
    clip-path: polygon(0 0, 200px 0, 210px 10px, 280px 10px, 290px 0, 100% 0, 100% 150px, 290px 160px, 290px 300px, 100% 310px, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 400px, 10px 390px, 10px 100px, 0 90px);
    transition: .2s linear
}

.flex-container-cards .card .card-img-shadow img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    margin-bottom: 30px;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 30px 100%, 0 calc(100% - 30px));
    clip-path: polygon(0 0, 100% 0, 100% 100%, 30px 100%, 0 calc(100% - 30px))
}

.flex-container-cards .card .card-content {
    margin: 0 30px
}

.flex-container-cards .card h2 {
    color: #ff8000;
    text-align: center
}

.flex-container-cards .card .button-shadow {
    filter: drop-shadow(#ff4000 0 0 5px);
    transition: .2s ease-in
}

.flex-container-cards .card .button-shadow:hover {
    filter: drop-shadow(#ff4000 0 0 10px)
}

.flex-container-cards .card .button-shadow .card-button {
    text-align: center;
    margin: 20px 0;
    padding: 10px 0;
    background: linear-gradient(45deg, #ff1e00 0, #ff5900 100%);
    -webkit-clip-path: polygon(0 0, 100% 0%, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0%, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
    color: #000;
    font-weight: 600;
    transition: .2s ease-in
}

.mt-n2-6 {
    margin-top: -2.6rem !important
}

[data-overlay-dark] .position-unset,
[data-overlay-light] .position-unset {
    position: unset !important
}

[data-overlay-dark] .container,
[data-overlay-light] .container {
    position: relative;
    z-index: 2
}

[data-overlay-dark]:before,
[data-overlay-light]:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1
}

[data-overlay-dark]:before {
    background: #000
}

[data-overlay-light]:before {
    background: #fff
}

[data-overlay-dark="0"]:before,
[data-overlay-light="0"]:before {
    opacity: 0
}

[data-overlay-dark="1"]:before,
[data-overlay-light="1"]:before {
    opacity: .1
}

[data-overlay-dark="2"]:before,
[data-overlay-light="2"]:before {
    opacity: .2
}

[data-overlay-dark="3"]:before,
[data-overlay-light="3"]:before {
    opacity: .3
}

[data-overlay-dark="4"]:before,
[data-overlay-light="4"]:before {
    opacity: .4
}

[data-overlay-dark="55"]:before,
[data-overlay-light="55"]:before {
    opacity: .55
}

[data-overlay-dark="6"]:before,
[data-overlay-light="6"]:before {
    opacity: .6
}

[data-overlay-dark="65"]:before,
[data-overlay-light="65"]:before {
    opacity: .65
}

[data-overlay-dark="7"]:before,
[data-overlay-light="7"]:before {
    opacity: .7
}

[data-overlay-dark="75"]:before,
[data-overlay-light="75"]:before {
    opacity: .75
}

[data-overlay-dark="85"]:before,
[data-overlay-light="85"]:before {
    opacity: .85
}

[data-overlay-dark="9"]:before,
[data-overlay-light="9"]:before {
    opacity: .9
}

[data-overlay-dark="91"]:before,
[data-overlay-light="91"]:before {
    opacity: .91
}

[data-overlay-dark="92"]:before,
[data-overlay-light="92"]:before {
    opacity: .92
}

[data-overlay-dark="93"]:before,
[data-overlay-light="93"]:before {
    opacity: .93
}

[data-overlay-dark="94"]:before,
[data-overlay-light="94"]:before {
    opacity: .94
}

[data-overlay-dark="95"]:before,
[data-overlay-light="95"]:before {
    opacity: .95
}

[data-overlay-dark="96"]:before,
[data-overlay-light="96"]:before {
    opacity: .96
}

[data-overlay-dark="97"]:before,
[data-overlay-light="97"]:before {
    opacity: .97
}

[data-overlay-dark="98"]:before,
[data-overlay-light="98"]:before {
    opacity: .98
}

[data-overlay-dark="99"]:before,
[data-overlay-light="99"]:before {
    opacity: .99
}

.green_title {
    color: var(--text)
}

.footerback {
    background-size: "cover";
    background-position: "center";
    background-repeat: "no-repeat";
    padding: "20px";
    background-color: "#003758";
    background-image: url(/src/Page/Wave.svg)
}

.about_page_img {
    height: 400px
}

@media screen and (max-width:992px) {
    .about_page_img {
        height: 300px
    }
}

@media screen and (min-width:992px) {

    .menu_area-light .navbar ul ul li.active>a,
    .menu_area-light .navbar-nav li.has-sub a:hover,
    .menu_area-light.scrollHeader .navbar-nav>li.has-sub>a:hover {
        color: #003a66
    }

    .menu_area-light .navbar>ul>li.has-sub>a:hover:after {
        border-color: #003a66
    }

    .header-style2 .navbar ul ul li.active>a,
    .header-style2 .navbar-nav li.active>a,
    .header-style2 .navbar-nav li.current>a,
    .header-style2 .navbar-nav li.has-sub a:active,
    .header-style2 .navbar-nav li.has-sub a:focus,
    .header-style2 .navbar-nav li.has-sub a:hover,
    .header-style2.scrollHeader .navbar-nav li.current>a,
    .header-style2.scrollHeader .navbar-nav li.current>a:hover,
    .header-style2.scrollHeader .navbar-nav>li.has-sub>a:hover {
        color: #99c2f8
    }

    .header-style2 .navbar>ul>li.has-sub.current>a:hover:after,
    .header-style2 .navbar>ul>li.has-sub>a:active:after,
    .header-style2 .navbar>ul>li.has-sub>a:focus:after,
    .header-style2 .navbar>ul>li.has-sub>a:hover:after,
    .header-style2.scrollHeader .navbar-nav>li.has-sub>a:hover:after,
    .header-style2.scrollHeader .navbar>ul>li.current>a:after {
        border-color: #fff0 #99c2f8 #99c2f8 #fff0
    }

    .header-style2 .butn.secondary:before {
        background: #fff
    }

    .header-style2 .butn.secondary:active,
    .header-style2 .butn.secondary:focus,
    .header-style2 .butn.secondary:hover {
        color: #003a66 !important
    }

    .header-style2.scrollHeader .butn.secondary:before {
        background: #99c2f8
    }

    .header-style2.scrollHeader .butn.secondary:active,
    .header-style2.scrollHeader .butn.secondary:focus,
    .header-style2.scrollHeader .butn.secondary:hover {
        color: #fff !important
    }

    .footerback {
        background-size: "cover";
        background-position: "center";
        background-repeat: "no-repeat";
        padding: "20px";
        background-color: "#003758";
        background-image: url(/src/Page/Wave.svg)
    }
}

.book_Card {
    margin-bottom: 30px;
    border-radius: 10px;
    box-shadow: rgba(149, 157, 165, .2) 0 8px 24px;
    height: 360px !important;
    border: 1px solid #034f6d !important
}

.book_Card img {
    height: 280px;
    width: 100%;
    transition: transform .3s
}

.book_Card .card-body {
    background: #054863
}

.book_Card .card-title {
    font-size: 18px;
    padding-bottom: 0 !important;
    text-align: center !important;
    color: #fff !important;
    display: block;
    font-weight: 500 !important;
    justify-content: center
}

@media screen and (min-width:180px) and (max-width:786px) {
    .book_Card .card-title {
        font-size: 17px;
        padding-bottom: 0 !important;
        text-align: center;
        color: #fff;
        font-family: var(--font)
    }
}

.featuresCards .card {
    border: none;
    box-shadow: rgba(100, 100, 111, .2) 0 7px 29px 0
}

.why_choose_obb ul li strong {
    color: #03b5be;
    font-weight: 700;
    font-size: 17px !important
}

.success_story_cards {
    text-align: center;
    background-color: #f6f3fc !important;
    box-shadow: rgba(0, 0, 0, .35) 0 5px 15px !important
}

.success_story_cards h5 {
    font-weight: 700
}

.getstarted_card {
    padding: 30px 10px 0;
    box-shadow: rgba(149, 157, 165, .2) 0 8px 24px !important
}

.getstarted_card img {
    height: 250px
}

.whatsapp-button {
    position: fixed;
    z-index: 999 !important;
    bottom: 5px;
    right: 25px;
    background-color: #25d366;
    color: #fff;
    padding: 15px 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
    transition: transform .3s ease-in-out;
    margin-bottom: 20px
}

.whatsapp-button i {
    color: #fff;
    font-size: 35px
}

.whatsapp-button::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(37, 211, 102, .5);
    animation: 1.5s ease-out infinite wave;
    z-index: 1
}

@keyframes wave {
    0% {
        transform: scale(1);
        opacity: .7
    }

    100% {
        transform: scale(1.8);
        opacity: 0
    }
}