.row {
    display: flex;
    flex-wrap: wrap;
    margin: -15px -15px -15px 3px
}

.justify-between {
    justify-content: space-between
}

.justify-center {
    justify-content: center
}

.col {
    padding: 15px
}

.text-center {
    text-align: center
}

.container {
    margin: 0 auto;
    max-width: 1260px;
    padding: 0 30px;
    width: 100%
}

.container-fluid {
    overflow: hidden;
    padding: 0 30px;
    width: 100%
}

.tab-btn h2 {
    font-size: 18px
}

@media (min-width:576px) {
    .container {
        max-width: 540px
    }
}

@media (min-width:768px) {
    .container {
        max-width: 720px
    }
}

@media (min-width:992px) {
    .container {
        max-width: 960px
    }
}

@media (min-width:1200px) {
    .container {
        max-width: 1140px
    }
}

@media (min-width:1400px) {
    .container {
        max-width: 1185px
    }
}

@media (min-width:300px) {
    .col-sm-5 {
        flex: 0 0 41.666667%
    }
    .col-sm-6 {
        flex: 0 0 50%
    }
    .col-sm-12 {
        flex: 0 0 100%
    }
}

@media (min-width:576px) {
    .col-sm-5 {
        flex: 0 0 41.666667%
    }
    .col-sm-6 {
        flex: 0 0 50%
    }
    .col-sm-12 {
        flex: 0 0 100%
    }
}

@media (min-width:768px) {
    .col-md-2 {
        flex: 0 0 16.666667%
    }
    .col-md-3 {
        flex: 0 0 25%
    }
    .col-md-4 {
        flex: 0 0 33.333333%
    }
    .col-md-5 {
        flex: 0 0 41.666667%
    }
    .col-md-6 {
        flex: 0 0 50%
    }
    .col-md-7 {
        flex: 0 0 58.333333%
    }
    .col-md-8 {
        flex: 0 0 66.666667%
    }
    .col-md-10 {
        flex: 0 0 83.333333%
    }
    .col-md-12 {
        flex: 0 0 100%
    }
}

@media (min-width:992px) {
    .col-lg-1 {
        flex: 0 0 8.333333%
    }
    .col-lg-2 {
        flex: 0 0 16.666667%
    }
    .col-lg-3 {
        flex: 0 0 25%
    }
    .col-lg-4 {
        flex: 0 0 33.333333%
    }
    .col-lg-5 {
        flex: 0 0 41.666667%
    }
    .col-lg-6 {
        flex: 0 0 50%
    }
    .col-lg-7 {
        flex: 0 0 58.333333%
    }
    .col-lg-10 {
        flex: 0 0 83.333333%
    }
    .col-lg-12 {
        flex: 0 0 100%
    }
}

@media (max-width:991px) {
    .hero-banner .banner-gallery .thumbnail {
        display: none
    }
}

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

:root {
    --dark-blue: #1c136e;
    --gold: #ffb606;
    --light-gray: #eee;
    --white: #fff;
    --dark-gray: #333
}

body {
    height: 100%;
    position: relative
}

html {
    scroll-behavior: smooth
}

img {
    height: auto;
    max-width: 100%
}

li {
    list-style: none
}

a {
    text-decoration: none
}

p {
    color: #181818;
    font-family: Open Sans, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.8;
    margin: 0 0 15px;
    text-transform: none
}

a,
h1,
h2,
h3,
h4,
h5,
h6,
li {
    font-family: League Spartan, sans-serif;
    letter-spacing: 0;
    line-height: 1.2
}

a,
a:active,
a:focus,
a:hover {
    outline: 0;
    text-decoration: none
}

.section_block {
    padding: 100px 0
}

.section_inline {
    padding: 60px 0
}

.pt {
    padding: 0
}

.webcooks_main {
    position: relative
}

.swiper-container {
    height: 300px;
    overflow: hidden;
    position: relative;
    width: 100%
}

.swiper-slide {
    align-items: center;
    border-radius: 8px;
    color: var(--white);
    display: flex !important;
    font-size: 20px;
    justify-content: center;
    overflow: hidden
}

.webcooks_pride .swiper-slide-active img {
    filter: brightness(1);
    transform: scale(1.3);
    z-index: 10
}

.swiper-button-next,
.swiper-button-prev {
    color: var(--white)
}

.swiper-button-next:after,
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
    font-size: 20px !important;
    font-weight: 800
}

.swiper-button-next {
    right: 10px
}

.swiper-button-prev {
    left: 10px
}

.swiper-button-next:after,
.swiper-button-prev:after {
    color: var(--white);
    font-size: 20px
}

.navigation-buttons .swiper-button-next:after,
.navigation-buttons .swiper-button-prev:after {
    content: none
}

.navigation-buttons .swiper-button-prev {
    background: #fff;
    border: 2px solid #d1d5db;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
    height: 30px;
    padding: 3px;
    transition: all .3s ease;
    width: 60px
}

.navigation-buttons .swiper-button-next {
    background: var(--dark-blue);
    border: 2px solid var(--dark-blue);
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    height: 30px;
    padding: 3px;
    transition: all .3s ease;
    width: 60px
}

.navigation-buttons .swiper-button-prev svg path {
    stroke: var(--dark-blue)
}

.navigation-buttons .swiper-button-next svg {
    transform: rotate(180deg);
    width: 20px
}

.navigation-buttons .swiper-button-prev svg {
    width: 20px
}

.navigation-buttons .swiper-button-next svg path {
    stroke: #fff
}

.navigation-buttons .swiper-button-prev:hover {
    border-color: var(--dark-blue);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    transform: scale(1.05)
}

.navigation-buttons .swiper-button-next:hover {
    background-color: #1e3a5f;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
    transform: scale(1.05)
}

.top_bar {
    background: var(--dark-blue);
    color: var(--white);
    padding-block: 25px
}

.top_bar ul,
.top_bar ul li {
    align-items: center;
    -moz-column-gap: 20px;
    column-gap: 20px;
    display: flex;
    height: 34px
}

.top_bar ul li a {
    color: var(--white)
}

.top_bar .webcooks_btn {
    background-color: var(--gold);
    border-radius: 5px;
    color: var(--dark-blue);
    padding: 10px 20px
}

.webcooks_header {
    background: var(--white);
    width: 100%
}

.webcooks_header .navbar-menu {
    align-items: center;
    box-shadow: 0 8px 25px 0 rgba(0, 0, 0, .04);
    display: flex;
    height: 70px;
    justify-content: space-around;
    position: relative;
    z-index: 55
}

.webcooks_header .navbar-menu .navbar-nav {
    -moz-column-gap: 35px;
    column-gap: 35px;
    display: flex
}

.webcooks_header .navbar-menu .logo a {
    display: block;
    width: 200px
}

.webcooks_header .list_items a {
    color: #333;
    display: block;
    font-weight: 600;
    letter-spacing: .06em;
    line-height: 70px;
    text-transform: capitalize
}

.webcooks_header .list_items .dropdown-menu {
    background: var(--white);
    border: 1px solid transparent;
    border-radius: 10px;
    box-shadow: 0 5px 40px 0 rgba(0, 0, 0, .2);
    left: 0;
    margin: 0 auto;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    right: 0;
    transform: translateY(-20px);
    transition: opacity .3s ease, transform .3s ease, visibility 0s .3s;
    visibility: hidden;
    width: 60%;
    z-index: 99
}

.webcooks_header .list_items .dropdown-menu.portfolio-build {
    left: unset;
    right: 120px;
    width: 230px
}

.webcooks_header .list_items:nth-child(2) .dropdown-menu {
    left: 0;
    margin: 0 auto;
    padding: 30px;
    right: 0;
    width: 65%;
    z-index: 99
}

.webcooks_header .list_items .dropdown-menu li {
    border-bottom: 1px solid #f5f5f5;
    border-radius: 4px;
    color: #333;
    font-size: 14px;
    font-weight: 400;
    padding: 7px 15px;
    text-transform: capitalize
}

.webcooks_header .list_items .dropdown-menu li a {
    line-height: unset
}

.webcooks_header .list_items:hover .dropdown-menu {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
    transition: opacity .3s ease, transform .3s ease, visibility 0s 0s;
    visibility: visible
}

.menu i {
    font-size: 25px;
    transition: all .3s linear
}

.menu {
    display: none
}

.mobile_menu {
    background: var(--white);
    height: 100vh;
    left: -100%;
    padding: 30px 0;
    position: absolute;
    transition: left .8s ease;
    width: 100%;
    z-index: 55
}

.mobile_menu.active_menu {
    display: block;
    height: 100%;
    left: 0
}

.mobile_menu .list_items {
    color: #333;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .06em;
    margin-bottom: 15px;
    text-transform: capitalize
}

.mobile_menu .list_items.menu_mb a {
    -moz-column-gap: 15px;
    column-gap: 15px;
    display: flex;
    justify-content: center
}

.mobile_menu .list_items a {
    font-size: 14px
}

.mobile_menu .dropdown-menu-mobile {
    display: none;
    margin-top: 20px
}

.mobile_menu .dropdown-menu-mobile li:not(:last-child) {
    margin-bottom: 20px
}

iframe {
    max-width: 100%
}

input:focus,
input:focus-visible,
input:hover,
textarea:focus-visible {
    border: none;
    border-bottom: 1px solid var(--dark-blue);
    outline: 0
}

.wc-btn {
    background: var(--gold);
    border: 1px solid var(--gold);
    border-radius: 5px;
    color: var(--dark-blue);
    cursor: pointer;
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    height: 50px;
    line-height: 52px;
    overflow: hidden;
    padding: 0 30px;
    position: relative;
    text-align: center;
    text-transform: capitalize;
    transition: .4s;
    width: 180px;
    z-index: 1
}

.wc-btn .wave {
    animation: waves 2s linear infinite;
    background-image: url(../images/wave.svg);
    background-repeat: repeat-x;
    background-size: 50% 100%;
    height: 50%;
    left: 0;
    position: absolute;
    top: 100%;
    width: 200%;
    will-change: transform
}

.wc-btn:hover .wave {
    top: 70%
}

.mx-4 {
    margin-left: 20px;
    margin-right: 20px
}

.my-2 {
    margin-bottom: 10px;
    margin-top: 30px
}

.my-3 {
    margin-bottom: 15px;
    margin-top: 15px
}

.my-5 {
    margin-bottom: 30px
}

.mt-1,
.my-5 {
    margin-top: 30px
}

.mt-2 {
    margin-top: 10px
}

.mt-3 {
    margin-top: 15px
}

.mt-4 {
    margin-top: 20px
}

.mt-5 {
    margin-top: 30px
}

.mb-2 {
    margin-bottom: 10px
}

.mb-3 {
    margin-bottom: 15px
}

.mb-4 {
    margin-bottom: 20px
}

.mb-5 {
    margin-bottom: 30px
}

.mobile_menu .list_items {
    display: flex
}

.hero-banner .banner-content {
    z-index: 999 !important
}

.webcooks_header .list_items .dropdown-menu li a {
    font-size: 13px;
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize
}

.mobile_menu.active_menu {
    padding-inline: 60px
}

.top_bar .row {
    align-items: center;
    justify-items: center;
    max-width: 100%
}

.webcooks_header .dropdown-menu.services-drop {
    left: 25%;
    right: 120px;
    width: 300px
}

.webcooks_header .dropdown-menu.services-drop-two {
    left: 4%;
    right: 120px;
    width: 301px
}

.dropdown-menu-mobile {
    display: none
}

.dropdown-menu-mobile.active-menu {
    display: block
}

.grayish-blue {
    background-color: #ebeff0
}

.element-block {
    display: block;
    margin: 0 auto
}

.mobile_menu .dropdown-menu-mobile.active-menu {
    display: block
}

.hero-banner {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 545px;
    position: relative;
    z-index: 1
}

.hero-banner:before {
    background-image: url(../images/gradientbg.webp);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1
}

.hero-banner .mb-banner {
    display: none;
    margin-top: 20px
}

.hero-banner .banner-gallery .thumbnail {
    position: absolute;
    width: 17%
}

.hero-banner .banner-gallery .thumbnail.thumbnail-1 {
    left: 60px;
    top: 46px
}

.hero-banner .banner-gallery .thumbnail.thumbnail-2 {
    right: 75px;
    top: 68px
}

.hero-banner .banner-gallery .thumbnail.thumbnail-3 {
    bottom: 53px;
    right: 160px;
    z-index: 6
}

.hero-banner .banner-gallery .thumbnail.thumbnail-4 {
    bottom: 76px;
    left: 254px
}

.hero-banner .banner-gallery .thumbnail.circle {
    align-items: center;
    animation: rotate 30s linear infinite;
    border: 25px solid var(--gold);
    border-radius: 50%;
    bottom: 26px;
    display: flex;
    height: 200px;
    justify-content: center;
    left: 70px;
    padding: 10px;
    width: 200px
}

.hero-banner .banner-gallery .sub_circle {
    align-items: center;
    background: var(--dark-blue);
    border-radius: 50%;
    bottom: 15%;
    display: flex;
    height: 100px;
    justify-content: center;
    left: 121px;
    padding: 10px;
    position: absolute;
    width: 100px
}

.pad-0 {
    padding: 0
}

.cnt-right {
    text-align: right
}

.hero-banner .banner-gallery .thumbnail.circle .text span {
    color: var(--dark-blue);
    font-size: 16px;
    font-weight: 500;
    left: 50%;
    position: absolute;
    top: -29px;
    transform: translate(-50%, -50%) rotate(0);
    transform-origin: 0 103px
}

.hero-banner .banner-gallery .thumbnail.thumbnail-1 img,
.hero-banner .banner-gallery .thumbnail.thumbnail-2 img {
    animation: radiusChange 8s linear infinite;
    position: relative;
    z-index: 2
}

.hero-banner .banner-gallery .thumbnail.thumbnail-2 img {
    border: 8px solid var(--white)
}

.hero-banner .banner-gallery .thumbnail.thumbnail-1:after {
    background-image: radial-gradient(var(--gold) 15%, transparent 20%);
    background-position: 0 0;
    background-size: 20px 20px;
    border-radius: 50%;
    content: "";
    height: 120px;
    opacity: 1;
    position: absolute;
    right: -95px;
    top: -30px;
    width: 120px;
    z-index: 1
}

.hero-banner .banner-gallery .thumbnail.thumbnail-2:after {
    background-image: radial-gradient(var(--dark-blue) 15%, transparent 20%);
    background-position: 0 0;
    background-size: 20px 20px;
    content: "";
    height: 200px;
    opacity: 1;
    position: absolute;
    right: -43px;
    top: -50px;
    width: 200px;
    z-index: 1
}

.hero-banner .banner-gallery .thumbnail.thumbnail-1:before {
    background-color: var(--white);
    border-radius: 40px 38px 59px 0;
    content: "";
    height: 120px;
    position: absolute;
    right: -48px;
    top: -22px;
    width: 120px
}

.hero-banner .banner-gallery .thumbnail.thumbnail-2 img {
    animation: radiusChange2 5s linear infinite
}

.hero-banner .banner-gallery .thumbnail.thumbnail-3 img {
    border-radius: 10px 40px
}

.hero-banner .banner-gallery .thumbnail.thumbnail-4 img {
    border-radius: 80px 0 80px 0
}

.hero-banner .banner-content {
    padding-bottom: 30px;
    position: relative;
    text-align: center;
    z-index: 1
}

.hero-banner .banner-content .head-title {
    color: var(--dark-blue);
    font-family: League Spartan, sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 auto 18px;
    max-width: 550px;
    word-spacing: .5px
}

.hero-banner .banner-content p {
    color: #181818;
    font-size: 16px;
    margin: 0 auto 30px;
    width: 70%
}

.hero-banner .rating_box {
    -moz-column-gap: 20px;
    column-gap: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 20px
}

.hero-banner .rating_box .text {
    align-items: baseline;
    color: var(--dark-blue);
    display: initial;
    flex-wrap: wrap;
    gap: 12px
}

.hero-banner .rating_box .text span {
    font-size: 1.17em;
    font-weight: 600
}

.hero-banner .rating_box .text a {
    color: var(--dark-blue)
}

.hero-banner .rating_box .stars {
    color: var(--gold)
}

.hero-banner .banner-content p {
    max-width: 90%;
    word-wrap: break-word;
    line-height: 1.5;
    margin-inline: auto;
    padding: 0 20px
}

@media (min-width:769px) {
    .certification-badge.mobile-only,
    .decorative-stars.mobile-only {
        display: none !important
    }
    .hero-banner .book-now-btn,
    .mobile-team-grid {
        display: none
    }
    .hero-banner .book-demo-btn {
        display: inline-block
    }
}

.animation-move-var {
    animation: move-var 3s linear infinite
}

.img_hover {
    display: inline-block;
    overflow: hidden;
    position: relative;
    vertical-align: middle
}

.img_hover img {
    transition: .5s;
    width: 100%
}

.img_hover:before {
    background: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, .3));
    content: "";
    display: block;
    height: 100%;
    left: -75%;
    opacity: 0;
    position: absolute;
    top: 0;
    transform: skewX(-25deg);
    width: 50%;
    z-index: 99
}

.img_hover:hover:before {
    animation: shine 1s;
    opacity: 1
}

.author-box {
    background-color: var(--white);
    border-radius: 50px 10px 50px 10px;
    box-shadow: 0 40px 70px rgba(15, 11, 44, .2);
    display: flex;
    left: 149px;
    padding: 20px;
    position: absolute;
    text-align: center;
    top: 132px;
    width: 300px
}

.author-box .icon {
    align-items: center;
    background: var(--dark-blue);
    border-radius: 50%;
    color: var(--white);
    display: flex;
    font-size: 22px;
    height: 50px;
    justify-content: center;
    margin-right: 15px;
    width: 50px
}

.author-box .icon img {
    border-radius: unset !important;
    height: 26px;
    width: 26px
}

.author-box .content {
    text-align: left
}

.author-box .content .subtitle {
    color: rgba(20, 20, 23, .72);
    display: block;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 5px;
    text-transform: uppercase
}

.author-box .content a {
    color: #181818;
    font-family: Spartan, sans-serif;
    font-size: 20px;
    font-weight: 500
}

.wc_about-area {
    padding-block: 55px !important
}

.wc_about-area .about-img .video-box {
    bottom: -94px;
    position: absolute;
    right: -39px
}

.wc_about-area .about-img .video-box .inner-box {
    background-color: var(--white);
    border: 1px solid var(--dark-gray);
    border-radius: 10px;
    box-shadow: 0 40px 70px rgba(27, 20, 78, .1);
    content: "";
    display: block;
    padding: 20px
}

.wc_about-area .video-box .inner-box .thumb {
    position: relative;
    text-align: center
}

.wc_about-area .video-box .inner-box .thumb img {
    border: none;
    border-radius: 10px
}

.wc_about-area .video-box .inner-box .thumb .popup-icon {
    background-color: var(--white);
    border-radius: 50%;
    color: var(--dark-blue);
    cursor: pointer;
    font-size: 18px;
    height: 60px;
    left: 0;
    line-height: 62px;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 60px
}

.wc_about-area .about-img .video-box .inner-box .loading-bar {
    margin: -20px 0;
    padding-top: 20px
}

.wc_about-area .about-img .video-box .inner-box .loading-bar span {
    background-color: #eaf0f2;
    border-radius: 10px;
    display: block;
    height: 7px;
    margin: 15px 0
}

.wc_about-area .about-img .video-box .inner-box .loading-bar span:nth-child(2n) {
    width: 65%
}

.wc_about-area .popup-modal {
    align-items: center;
    background-color: rgba(0, 0, 0, .7);
    display: none;
    height: 100%;
    justify-content: center;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 9999
}

.wc_about-area .popup-modal.active {
    display: flex
}

.wc_about-area .popup-modal .popup-content {
    background-color: var(--white);
    border-radius: 8px;
    max-width: 800px;
    padding: 25px;
    position: relative;
    width: 80%
}

.wc_about-area .popup-modal .popup-video video {
    height: 450px;
    width: 100%
}

.wc_about-area .popup-modal .close {
    background: 0 0;
    border: none;
    color: var(--dark-gray);
    cursor: pointer;
    font-size: 18px;
    position: absolute;
    right: 10px;
    top: 2px
}

.wc_about-area .about-img {
    border-radius: 20px;
    display: inline-block;
    position: relative
}

.wc_about-area .about-img img {
    border: 8px solid var(--white);
    border-radius: 20px 80px;
    box-shadow: 0 20px 40px 0 rgba(42, 11, 88, .1);
    width: 100%
}

.wc_about-area .about-img .courses_box {
    align-items: center;
    background: var(--white);
    border: 1px solid var(--dark-gray);
    border-radius: 15px 15px 15px 0;
    bottom: 52px;
    box-shadow: -8px 8px 0 0 rgba(0, 0, 0, .25);
    display: flex;
    gap: 12px;
    left: -24px;
    padding: 15px;
    position: absolute
}

.wc_about-area .about-img:after {
    background-image: radial-gradient(var(--dark-blue) 15%, transparent 20%);
    background-position: 0 0;
    background-size: 20px 20px;
    content: "";
    height: 200px;
    opacity: 1;
    position: absolute;
    right: -33px;
    top: -21px;
    width: 200px;
    z-index: -6
}

.wc_about-area .about-img .courses_box .icon {
    align-items: center;
    background: var(--gold);
    border-radius: 8px;
    color: var(--dark-blue);
    display: flex;
    font-size: 20px;
    height: 50px;
    justify-content: center;
    width: 50px
}

.wc_about-area .about-img .courses_box .title {
    color: #181818;
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0;
    text-align: left
}

.wc_about-area .about-img .courses_box .title span {
    display: block;
    font-size: 18px;
    font-weight: 500
}

.wc_about-area .text_over {
    display: none
}

.wc_about-area .section-title .text_hidden {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    margin-bottom: 20px;
    max-height: 13em;
    text-overflow: ellipsis
}

.wc-top-rated-courses {
    background: #fff;
    padding: 80px 0;
    position: relative;
    width: 100%
}

.wc-top-rated-courses .section-title {
    margin-bottom: 30px;
    text-align: center
}

.wc-top-rated-courses .section-title .title {
    color: #2c3e50;
    font-family: League Spartan, sans-serif;
    font-size: 42px;
    font-weight: 600;
    letter-spacing: -.5px;
    line-height: 1.3;
    margin: 0
}

.wc-top-rated-courses .section-title .title span {
    color: #1e293b;
    font-weight: 700
}

.wc-top-rated-courses .course-tabs {
    margin: 0 auto;
    max-width: 1200px
}

.wc-top-rated-courses .tab-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: left;
    margin-bottom: 20px
}

.wc-top-rated-courses .tab-btn {
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 50px;
    color: #2c3e50;
    cursor: pointer;
    font-family: League Spartan, sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .5px;
    padding: 14px 35px;
    text-transform: capitalize;
    transition: all .3s ease
}

.wc-top-rated-courses .tab-btn:hover {
    border-color: #2c3e50;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
    transform: translateY(-2px)
}

.wc-top-rated-courses .tab-btn.active {
    background: #1e293b;
    border-color: #1e293b;
    box-shadow: 0 4px 15px rgba(30, 41, 59, .3);
    color: #fff
}

.wc-top-rated-courses .tab-content {
    animation: fadeInTab .5s ease-in-out;
    display: none
}

.wc-top-rated-courses .tab-content.active {
    display: block
}

.wc-top-rated-courses .course-description-box {
    background: linear-gradient(135deg, #a8d5ff, #c8e3ff);
    border-radius: 30px;
    box-shadow: 0 10px 40px rgba(168, 213, 255, .3);
    overflow: hidden;
    padding: 20px 37px;
    position: relative
}

.wc-top-rated-courses .course-description-box:before {
    background: hsla(0, 0%, 100%, .15);
    border-radius: 50%;
    content: "";
    height: 400px;
    position: absolute;
    right: -10%;
    top: 35%;
    width: 400px;
    z-index: 0
}

.wc-top-rated-courses .course-description-box p {
    color: #1e3a5f;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.8;
    margin: 0;
    position: relative;
    z-index: 1
}

.wc-top-rated-courses .course-description-box p:last-child {
    margin-bottom: 0
}

@media (max-width:768px) {
    .wc-top-rated-courses {
        margin-bottom: 60px;
        padding: 50px 0
    }
    .grid_courses .course-item .course_text-area .sub_title {
        font-size: 33px !important
    }
    .grid_courses .course-item .course_text-area p {
        color: #000 !important
    }
    .grid_courses .course-item {
        min-height: 266px
    }
    .wc_training-courses .swiper-testimonials {
        margin-top: 60px;
        min-height: 350px !important
    }
    .grid_courses .course-item .course_text-area .roundarrow {
        height: 34px !important;
        width: 34px !important
    }
    .wc_training-courses .navigation-buttons {
        top: 27px !important
    }
    .wc-top-rated-courses .course-description-box:before {
        top: 54%
    }
    .wc-top-rated-courses .tab-buttons {
        justify-content: center !important
    }
    .wc-top-rated-courses .section-title .title {
        font-size: 28px;
        line-height: 1.4
    }
    .wc-top-rated-courses .tab-buttons {
        gap: 12px
    }
    .wc-top-rated-courses .tab-btn {
        font-size: 14px;
        padding: 12px 25px
    }
    .wc-top-rated-courses .course-description-box {
        border-radius: 20px;
        padding: 20px 25px
    }
    .wc-top-rated-courses .course-description-box p {
        font-size: 15px;
        line-height: 1.7;
        margin-bottom: 0
    }
}

@media (min-width:769px) and (max-width:1024px) {
    .wc-top-rated-courses .section-title .title {
        font-size: 36px
    }
    .wc-top-rated-courses .course-description-box {
        padding: 20px 40px
    }
}

.wc_training-section {
    min-height: 700px;
    padding: 60px 0 80px;
    position: relative;
    width: 100%
}

.wc_training-section .training-header-row {
    align-items: center;
    margin-bottom: 30px
}

.wc_training-section .section-title {
    margin-bottom: 0;
    padding: 0;
    text-align: left
}

.wc_training-section .section-title .title {
    animation: fadeInUp .6s ease-out;
    color: var(--dark-blue);
    font-family: League Spartan, sans-serif;
    font-size: 42px;
    font-weight: 600;
    letter-spacing: -.5px;
    line-height: 1.3;
    margin-bottom: 20px;
    text-transform: capitalize
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.wc_training-section .section-title .title span {
    color: #1c136e;
    display: inline-block;
    font-weight: 900;
    position: relative;
    transition: all .3s ease
}

.wc_training-section .section-title .title span:hover {
    text-shadow: 2px 2px 8px rgba(255, 193, 7, .3);
    transform: scale(1.05)
}

.wc_training-section .title-line {
    animation: slideIn .8s ease-out;
    background: var(--gold);
    border-radius: 3px;
    height: 5px;
    margin: 0;
    position: relative;
    transform-origin: left center;
    width: 150px
}

@keyframes slideIn {
    0% {
        opacity: 0;
        transform: scaleX(0)
    }
    to {
        opacity: 1;
        transform: scaleX(1)
    }
}

.wc_training-section .training-description {
    animation: fadeInUp .6s ease-out .2s both;
    padding-left: 40px
}

.wc_training-section .training-description p {
    color: #000;
    font-size: 16px;
    line-height: 1.75;
    margin: 0;
    text-align: justify
}

.wc_training-section .wc_training-courses {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    position: relative
}

.wc_training-section .wc_training-courses-img img {
    left: 35%;
    position: absolute
}

.grid_courses {
    min-height: 450px;
    position: relative
}

.grid_courses .course-item {
    background-color: var(--white);
    border: none;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
    display: flex;
    flex-direction: column;
    height: 350px;
    justify-content: flex-start;
    padding: 40px 35px;
    position: relative;
    transition: all .3s ease
}

.grid_courses .course-item:hover {
    box-shadow: 0 12px 35px rgba(0, 0, 0, .12);
    transform: translateY(-8px)
}

.grid_courses .course-item .course_text-area {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%
}

.grid_courses .course-item .course_text-area .sub_title {
    color: #000;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 8px;
    padding-bottom: 15px;
    position: relative;
    text-transform: capitalize
}

.grid_courses .course-item .course_text-area .sub_title:after {
    background: linear-gradient(90deg, orange, #ffb84d);
    border-radius: 2px;
    bottom: 0;
    content: "";
    height: 4px;
    left: 0;
    position: absolute;
    width: 120px
}

.grid_courses .course-item .course_img {
    display: none
}

.grid_courses .course-item .course_text-area p {
    color: #000;
    display: -webkit-box;
    font-size: 16px;
    -webkit-line-clamp: 6;
    line-height: 1.75;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    flex-grow: 1;
    text-overflow: ellipsis
}

.grid_courses .course-item .course_text-area .roundarrow {
    align-items: center;
    background: linear-gradient(135deg, #ffb84d, orange);
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(255, 165, 0, .3);
    display: flex;
    height: 50px;
    justify-content: center;
    position: absolute;
    right: 30px;
    text-decoration: none;
    top: 30px;
    transition: all .3s ease;
    width: 50px
}

.grid_courses .course-item .course_text-area .roundarrow:hover {
    box-shadow: 0 6px 20px rgba(255, 165, 0, .4);
    transform: scale(1.1)
}

.grid_courses .course-item .course_text-area .roundarrow svg {
    transition: transform .3s ease
}

.grid_courses .course-item .course_text-area .roundarrow:hover svg {
    animation: arrowBounce .6s ease-in-out
}

@keyframes arrowBounce {
    0%,
    to {
        transform: translate(0)
    }
    50% {
        transform: translate(3px, -3px)
    }
}

.wc_training-courses .swiper-testimonials {
    margin-top: 60px;
    min-height: 400px
}

.wc_training-courses .navigation-buttons {
    display: flex;
    gap: 10px;
    position: absolute;
    right: 83px;
    top: 8px
}

.navigation-buttons .swiper-button-lock {
    display: block !important
}

.wc-industry-courses .img_box {
    position: relative
}

.wc-industry-courses .img_box .border-img {
    border-radius: 12px;
    border-top-right-radius: 7.6em;
    -o-object-fit: cover;
    object-fit: cover;
    padding: 10px
}

.wc-industry-courses .img_box:before {
    border-color: var(--dark-blue);
    border-bottom: 12px solid var(--dark-blue);
    border-right: 12px solid var(--dark-blue);
    bottom: 2px;
    content: "";
    height: 70px;
    position: absolute;
    right: 0;
    width: 82px
}

.wc-industry-courses .img_box:after {
    border-color: var(--dark-blue);
    border-left: 12px solid var(--dark-blue);
    border-top: 12px solid var(--dark-blue);
    content: "";
    height: 70px;
    left: 0;
    position: absolute;
    top: 0;
    width: 82px
}

.wc-industry-courses .wc-courses-wrapper .card_body {
    position: relative
}

.wc-industry-courses .wc-courses-wrapper .card_body .card-container {
    background-color: var(--gold);
    border: 1px solid transparent;
    border-radius: 40px 120px 40px 40px;
    padding: 41px 45px 17px
}

.wc-courses-wrapper .card_body .card-container .faq-header .sub_title {
    color: var(--dark-blue);
    font-size: 18px;
    margin-bottom: 20px
}

.wc-courses-wrapper .card_body .card-container .faq-header {
    align-items: baseline;
    color: var(--dark-blue);
    -moz-column-gap: 20px;
    column-gap: 20px;
    justify-content: center;
    margin-top: -21px
}

.wc-courses-wrapper .card_body .card-container .faq-header h5 {
    font-size: 17px
}

.wc-courses-wrapper .card_body .card-container .faq-header h2 {
    font-size: 18px
}

.python-tools {
    background-color: #ebeff0
}

.wc-courses-wrapper .card_body .card-container .faq-content {
    margin-top: 20px
}

.faq-content {
    display: none
}

.faq-content.show {
    display: block
}

.border-section {
    border: 2px solid #ffb606;
    border-radius: 40px;
    box-shadow: -5px 5px #ffb606, -10px 10px #ffc745, -15px 15px #ffd678, -20px 20px #fdda89, -25px 25px rgba(240, 46, 170, .05);
    margin-left: 60px;
    margin-right: 60px;
    padding: 30px 50px
}

.border-stripe {
    background-color: #ffb606;
    margin-left: -17px;
    padding: 30px 0 0;
    text-align: justify
}

.last-stripe {
    background-color: #ffb606;
    margin-top: 50px;
    padding: 20px;
    text-align: center
}

.What-You_Learn.wc-faq-area {
    background: 0 0;
    padding-top: 0
}

.What-You_Learn.wc-faq-area .faq-content li {
    display: list-item;
    list-style: circle;
    padding-block: 10px
}

.wc-industry-courses .wc-courses-wrapper .card_body .item--number {
    align-items: center;
    background-color: var(--white);
    border-radius: 50%;
    display: flex;
    font-size: 22px;
    height: 80px;
    justify-content: center;
    padding: 11px;
    position: absolute;
    right: -11px;
    top: -11px;
    width: 80px;
    z-index: 1
}

.wc-industry-courses .wc-courses-wrapper .card_body:nth-child(2n) .item--number {
    left: 0
}

.wc-industry-courses .wc-courses-wrapper .card_body:nth-child(2n) .item--number:after {
    left: -31px
}

.wc-industry-courses .wc-courses-wrapper .card_body .item--number:before {
    background: 0 0;
    border-top-right-radius: 40.43px;
    box-shadow: .4rem -.2rem 0 .2rem var(--white);
    content: "";
    height: 40.43px;
    left: -39.43px;
    position: absolute;
    top: 11px;
    width: 40.43px
}

.wc-courses-wrapper .card_body .item--number .course-number {
    align-items: center;
    background-color: var(--dark-blue);
    border: 1px solid transparent;
    border-radius: 50%;
    color: var(--white);
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%
}

.wc_choose-us .section-title .title-line {
    margin: 0 auto
}

.wc_choose-us {
    padding-block-end: 100px;
    padding-block-start: 50px
}

.wc_choose-us .wc-choose-us-wrap {
    flex-wrap: nowrap;
    gap: 25px;
    justify-content: center;
    margin-top: 80px
}

.wc_choose-us .wc-choose-us-wrap.why-choose-grid {
    flex-wrap: wrap
}

.wc_choose-us .wc-choose-us-wrap.why-choose-grid .card-body:last-child {
    transform: translate(3%, 15%)
}

.wc_choose-us .wc-choose-us-wrap.why-choose-grid .card-body:nth-child(4):after {
    bottom: 128px;
    left: 100%;
    transform: translate(93%, 51%) rotateX(328deg) rotateY(160deg)
}

.wc_choose-us .wc-choose-us-wrap.why-choose-grid .card-body:nth-child(4) {
    transform: translate(-3%, 15%)
}

.wc_choose-us .wc-choose-us-wrap.Portfolio-Building {
    flex-wrap: wrap
}

.wc_choose-us .wc-choose-us-wrap .card-body {
    background-color: var(--white);
    border-radius: 30px 30px 30px 0;
    box-shadow: 0 20px 40px 0 rgba(42, 11, 88, .1);
    max-height: 100%;
    padding: 30px;
    position: relative
}

.wc-choose-us-wrap .card-body .text-container .title,
.wc-choose-us-wrap .card-body .text-container h3 {
    color: var(--dark-blue);
    font-family: League Spartan, sans-serif;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px
}

.wc-choose-us-wrap .card-body .text-container p {
    line-height: 1.5
}

.wc_choose-us .wc-choose-us-wrap .card-body:after {
    animation: ctamoveobject 3s linear infinite alternate;
    background: url(../images/how-work-box-arrow.svg) no-repeat;
    bottom: -39%;
    content: "";
    display: none;
    height: 137px;
    position: absolute;
    right: 44px;
    transform: translateY(20%);
    width: 137px
}

.wc_choose-us .wc-choose-us-wrap .card-body:nth-child(2n):after {
    bottom: 100%;
    display: none;
    transform: translateY(-5px) rotate(-181deg) scaleX(-1)
}

.wc_choose-us .wc-choose-us-wrap .card-body:nth-child(3n):after {
    display: none;
    transform: translateY(15px) rotate(269deg) scaleX(-1)
}

.contact-main .wc_choose-us .wc-choose-us-wrap .card-body:nth-child(3n):after,
.index-main .wc_choose-us .wc-choose-us-wrap .card-body:nth-child(3n):after {
    transform: translateY(20%)
}

.contact-main .banner-content,
.content_box {
    margin-bottom: 30px;
    margin-top: 50px
}

.wc_choose-us .wc-choose-us-wrap .card-body:last-child:after {
    display: none
}

.wc-choose-us-wrap .card-body .number-item {
    bottom: 260px;
    left: 50%;
    position: absolute;
    transform: translate(-50%, 50%);
    z-index: 1
}

.wc-choose-us-wrap .card-body:nth-child(2n) .number-item {
    bottom: unset;
    top: 0;
    transform: translate(-51%, -50%)
}

.wc-choose-us-wrap .card-body .number-item .container-number {
    background-color: var(--dark-blue);
    border: 7px solid #ebeff0;
    border-radius: 40px 40px 40px 40px;
    color: var(--white);
    display: none;
    padding: 9px
}

.wc-choose-us-wrap .card-body .number-items {
    bottom: 260px;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 1
}

.wc-choose-us-wrap .card-body .number-items .container-number {
    background-color: var(--dark-blue);
    border: 7px solid #ebeff0;
    border-radius: 40px 40px 40px 40px;
    color: var(--white);
    display: none;
    padding: 9px
}

.wc-students-testimonial .students-review {
    overflow: hidden
}

.wc-students-testimonial .students-review .testimonial img {
    border-radius: 8px;
    -o-object-fit: cover;
    object-fit: cover
}

.form-section {
    align-items: center;
    background: url(../images/Webcooks-team.webp);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    height: 75vh;
    justify-content: center;
    overflow: hidden;
    position: relative;
    width: 100%
}

.round-div-container {
    background: linear-gradient(0deg, #000000aa, #00000099);
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

.form-container {
    backdrop-filter: blur(6px);
    background-color: #ffffff11;
    border: 1px solid #828282c2;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 2%;
    position: relative
}

.form-heading {
    color: var(--white);
    display: flex;
    flex: 1;
    flex-direction: column;
    margin-bottom: 10px
}

.form-heading h2 {
    font-size: large
}

.form-heading p {
    color: #c5c5c5;
    font-size: small
}

.form-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 10px
}

.form-info-input {
    display: flex;
    flex: 1;
    margin: 8px 0
}

.form-info-input input {
    border: none;
    border-radius: 8px;
    height: 40px;
    padding: 8px;
    width: 100%
}

.wc-blogs .blog-card-wrapper {
    gap: 22px;
    justify-content: center
}

.wc-blogs .blog-card-wrapper .blog-cards {
    background-color: var(--white);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    overflow: hidden;
    position: relative;
    transition: transform .3s ease, box-shadow .3s ease;
    width: 30%
}

.wc-blogs .blog-card-wrapper .blog-cards .card-body {
    margin-bottom: 70px;
    padding: 18px
}

.wc-blogs .blog-card-wrapper .blog-cards img {
    border-radius: 12px 12px 0 0
}

.wc-blogs .blog-card-wrapper .blog-cards a {
    color: #181818
}

.wc-blogs .blog-card-wrapper .blog-cards h3 {
    font-family: League Spartan, sans-serif;
    font-size: 17px
}

.wc-blogs .blog-card-wrapper .blog-cards .card-body p {
    color: #000;
    font-size: 14px;
    line-height: 1.7;
    margin-block: 10px
}

.wc-blogs .blog-card-wrapper .blog-btn {
    bottom: 0;
    margin-bottom: 20px;
    position: absolute
}

.wc-faq-area {
    background: #ebeff0;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    padding-block: 80px;
    position: relative
}

.wc-faq-area:after,
.wc-faq-area:before {
    border: 1px solid #9ba2a5;
    border-radius: 50%;
    content: "";
    opacity: 0;
    position: absolute
}

.section-title {
    margin-bottom: 30px
}

.section-title .pre-title {
    color: var(--white);
    display: inline-block;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 20px;
    padding: 0 13px 0 20px;
    position: relative;
    text-transform: capitalize;
    z-index: 1
}

.section-title .pre-title>svg {
    color: var(--gold);
    height: 30px;
    left: 0;
    position: absolute;
    top: -5px;
    width: 100%;
    z-index: -1
}

.section-title .title {
    color: var(--dark-blue);
    font-family: League Spartan, sans-serif;
    font-size: 38px;
    font-weight: 500;
    margin-bottom: 10px;
    text-transform: capitalize
}

.section-title .title span {
    color: #1c136e;
    font-weight: 700
}

.section-title .title-line {
    border-radius: 50%;
    border-top: 5px solid var(--gold);
    height: 10px;
    position: relative;
    width: 110px
}

.section-title p {
    line-height: 25px;
    margin: 0
}

.no-margin {
    margin: 0 !important
}

.section-title ul {
    margin-top: 30px
}

.section-title ul li {
    color: #181818;
    -moz-column-gap: 16px;
    column-gap: 16px;
    font-size: 1.1rem;
    line-height: 1.4
}

.course-list {
    line-height: 30px !important;
    list-style-type: disc
}

.section-title ul li .icon {
    color: var(--gold);
    display: none;
    font-size: 30px
}

.wc-faq-area .faq-container .faq-header {
    background: var(--white);
    border-radius: 10px 10px 0 0;
    box-shadow: 0 10px 50px 0 rgba(26, 46, 85, .1);
    display: flex;
    font-family: League Spartan, sans-serif;
    font-size: 19px;
    font-weight: 500;
    justify-content: space-between;
    margin-bottom: 0;
    padding: 10px
}

.wc-faq-area .faq-container .faq-content {
    background: var(--white);
    border-radius: 0 0 10px 10px;
    padding: 20px 30px;
    transition: all .5 linear
}

.wc-faq-area .faq-container .faq-item {
    margin-bottom: 20px
}

.wc-faq-area .faq-container .faq-icon {
    color: grey
}

.wc-faq-area .faq-container .faq-header:hover {
    transform: unset
}

.wc-faq-gallery {
    align-items: center;
    display: flex;
    position: relative;
    z-index: 1
}

.wc-faq-content {
    height: 100%
}

.wc-faq-gallery .slide-down {
    margin-top: 30px
}

.wc-faq-gallery .slide-up {
    align-items: flex-end;
    display: flex
}

.wc-faq-gallery .slide-up .faq-thumbnail {
    margin-bottom: 40px;
    position: relative
}

.wc-faq-gallery .slide-down .faq-thumbnail.thumbnail-1 img {
    border-radius: 0 80px 0 80px;
    position: relative;
    z-index: 2
}

.wc-faq-gallery .slide-down .faq-thumbnail.thumbnail-3 img {
    border-radius: 120px 120px 0 120px
}

.wc-faq-gallery .slide-down .faq-thumbnail.thumbnail-4 img {
    border-radius: 0 50px 120px 120px
}

.wc-faq-gallery .slide-down .faq-thumbnail.thumbnail-1:after {
    background-image: radial-gradient(circle, var(--gold) 2px, transparent 2.5px);
    left: -55px;
    top: 20px
}

.wc-faq-gallery .faq-thumbnail.thumbnail-2:after,
.wc-faq-gallery .slide-down .faq-thumbnail.thumbnail-1:after {
    background-position: 0 0;
    background-size: 20px 20px;
    content: "";
    height: 150px;
    opacity: 1;
    position: absolute;
    width: 150px;
    z-index: 1
}

.wc-faq-gallery .faq-thumbnail.thumbnail-2:after {
    background-image: radial-gradient(circle, var(--dark-blue) 2px, transparent 2.5px);
    border-radius: 50%;
    right: -61px;
    top: -64px
}

.wc-faq-gallery .faq-thumbnail.thumbnail-2 img {
    border-radius: 80px 0 80px 0;
    position: relative;
    z-index: 2
}

.storyBaseContainer {
    background: linear-gradient(0deg, #43caff, #fff);
    height: 60vh;
    overflow-x: hidden;
    position: relative
}

.cityViewImageContainer {
    left: 0;
    transform: translateX(0)
}

.cityViewImage,
.cityViewImageContainer {
    height: 100%;
    position: absolute;
    width: 100%
}

.cityViewImage {
    filter: drop-shadow(0 0 10px #00000033)
}

.birdViewImage {
    opacity: 0
}

.birdViewImage,
.cloudsViewImage {
    height: 50%;
    position: absolute;
    width: 100%
}

.cloudsViewImage {
    filter: drop-shadow(0 0 20px #fff)
}

.sunViewImage {
    background: linear-gradient(to bottom, #ff7b00, var(--gold));
    border-radius: 100px;
    box-shadow: 0 0 15px var(--gold);
    height: 50px;
    left: -5vw;
    position: absolute;
    top: 40%;
    width: 50px
}

.personViewImage {
    bottom: 10%;
    filter: drop-shadow(0 10px 22px #00000055);
    height: 132px;
    left: 4%;
    position: absolute;
    width: 124px
}

.spacer {
    height: 60vh
}

.tabHeadBaseContainer .tabHeadOneContainer,
.tabHeadBaseContainer .tabHeadThreeContainer,
.tabHeadBaseContainer .tabHeadTwoContainer {
    border-bottom: 1.5px solid var(--gold);
    will-change: transform
}

.tabAnimBaseContainer {
    background-color: #fff;
    display: flex;
    height: 100vh;
    position: relative;
    z-index: 9999
}

.tabAnimationImageBaseContainer {
    align-items: center;
    display: flex;
    flex: 1;
    justify-content: center;
    margin: 4vw;
    position: relative
}

.tabAnimationContentBaseContainer {
    backdrop-filter: blur(10px);
    background: linear-gradient(320deg, #1f1f35 -10%, #0754ad 200%), linear-gradient(45deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2));
    background-color: #ffffff11;
    border: .5px solid #ffffff22;
    border-radius: 2vw;
    box-shadow: 0 0 15px #00000044;
    color: #fff;
    display: flex;
    flex: 3;
    flex-direction: column;
    margin: 6vw 4vw;
    padding: 2vw;
    position: relative
}

.tabAnimationContentBaseContainer .heading {
    font-size: 2vmax;
    font-weight: 700;
    line-height: 1.5;
    margin: 0;
    opacity: 1;
    padding: 0
}

.tabHeadBaseContainer {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 2vmax
}

.tabHeadBaseContainer div p {
    color: var(--white);
    font-family: Open Sans, sans-serif;
    font-size: 2vmax;
    font-weight: 700
}

.tabContentBaseContainer {
    display: block;
    flex: 1;
    padding: 0 4vmax 4vmax;
    position: relative
}

.tab-content-panel {
    animation: fadeInTab .4s ease-in-out;
    display: none
}

.tab-content-panel.active {
    display: block
}

@keyframes fadeInTab {
    0% {
        opacity: 0;
        transform: translateY(10px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.tabHeadBaseContainer>div {
    cursor: pointer;
    opacity: .4;
    transition: opacity .3s ease, border-color .3s ease
}

.tabHeadBaseContainer>div.active-tab {
    opacity: 1
}

.tabHeadBaseContainer div:hover {
    cursor: pointer
}

.mainBulbContainer {
    align-items: center;
    background: linear-gradient(180deg, #fff, #fff);
    border: .2px solid #292929;
    border-radius: 20px;
    display: flex;
    filter: drop-shadow(0 0 .5px #ffb606);
    flex-direction: column;
    height: .8vmax;
    justify-content: flex-end;
    width: .8vmax
}

.squareContainer {
    border: .1vmax solid #292929;
    border-radius: 2px;
    filter: drop-shadow(0 0 .5px #29292911);
    height: .4vmax;
    position: absolute;
    top: 65%;
    width: 1vmax
}

.squareContainer1,
.squareContainer2,
.squareContainer3 {
    background-color: #292929;
    border-radius: 5vmax;
    height: .09vw;
    opacity: 1
}

.squareContainer1 {
    margin-top: .01vmax;
    width: .4vmax
}

.squareContainer2 {
    margin-top: .02vmax;
    width: .3vmax
}

.squareContainer3 {
    margin-top: .03vmax;
    width: .2vmax
}

.bulbBottomContainer {
    flex-direction: column;
    height: auto;
    margin-top: .7vmax;
    position: absolute;
    top: 15%
}

.triangleContainerBlueMedium,
.triangleContainerBlueSmall,
.triangleContainerYellowMedium,
.triangleContainerYellowSmall {
    height: 0;
    position: absolute;
    width: 0
}

.triangleContainerBlueSmall,
.triangleContainerYellowSmall {
    border: 5px solid transparent;
    border-bottom: 10px solid var(--gold)
}

.triangleContainerBlueMedium,
.triangleContainerYellowMedium {
    border: 15px solid transparent;
    border-bottom: 20px solid #03173d
}

.glowLightContainer {
    background-color: #292929;
    border-radius: 15px;
    filter: drop-shadow(0 0 .5px var(--gold));
    height: 4px;
    position: absolute;
    width: 10px
}

.courses-main .wc-industry-courses .img-box {
    align-items: center;
    display: flex;
    justify-content: center;
    position: relative
}

.courses-main .wc-industry-courses .img-box img {
    border-radius: 12px
}

.wb-courses-duration>div .row {
    gap: 20px;
    justify-content: center
}

.wb_cta .content_box {
    background: linear-gradient(55deg, var(--dark-blue) 24%, var(--gold) 99%);
    border: 1.3px solid var(--gold);
    color: #fff;
    font-size: 50px;
    margin: 0 auto;
    max-width: 100%;
    padding: 50px 40px;
    text-align: left;
    text-align: center
}

.python-tools .img-gallery {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, 19%)
}

.wb_cta .content_box h2 {
    color: #fff;
    font-size: 35px;
    line-height: 1.5;
    margin-bottom: 20px
}

.wb_cta .content_box p {
    color: #fff
}

.wb_cta .content_box h2 span {
    display: block
}

.why-learn .img-gallery .main-img-1 {
    margin-top: 55px
}

.why-learn .img-gallery .main-img-1 img {
    border-radius: 165px;
    border-bottom-right-radius: 0
}

.why-learn .img-gallery .main-img-2 img {
    border-radius: 100px;
    border-bottom-left-radius: 0;
    box-shadow: 0 10px 50px 0 rgba(26, 46, 85, .1)
}

.section-title .title .modules-wraper,
.webcooks-marketing .section-title .title {
    margin: 0 auto 30px;
    max-width: 70%
}

.webcooks-marketing .wrapper .highlight-box {
    border-radius: 10px;
    display: grid;
    grid-template-columns: 20% 80%;
    padding: 20px;
    position: relative;
    row-gap: 20px;
    transition: transform .3s, box-shadow .3s
}

.webcooks-marketing .wrapper .highlight-box .img {
    align-items: center;
    background-color: var(--dark-blue);
    border-radius: 50%;
    box-shadow: 0 7px 20px 0 hsla(240, 5%, 41%, .2);
    display: flex;
    height: 88px;
    justify-content: center;
    padding: 20px;
    width: 88px
}

.webcooks-marketing .wrapper {
    justify-content: space-between;
    margin-top: 25px
}

.webcooks-marketing .highlight-box .content-block h3 {
    color: var(--dark-blue);
    font-size: 1.2rem;
    margin-bottom: 10px
}

.who-can-take {
    background-color: #ebeff0;
    text-align: left
}

.who-can-take .img-grid .shape-mercue {
    border-radius: 0;
    border-bottom-right-radius: 50px;
    border-top-left-radius: 200px;
    border-top-right-radius: 200px;
    position: relative
}

.who-can-take .img-grid .sub-img {
    bottom: 0;
    left: -166px;
    position: relative;
    z-index: 12
}

.who-can-take .img-gallery {
    text-align: right
}

.who-can-take .img-grid .sub-img img {
    bottom: -12px;
    left: 36%
}

.who-can-take .img-grid .sub-img img,
.who-can-take .img-grid .sub-img:after {
    border-radius: 0;
    border-bottom-left-radius: 50px;
    border-top-left-radius: 120px;
    border-top-right-radius: 120px;
    position: absolute
}

.who-can-take .img-grid .sub-img:after {
    background: #ebeff0;
    bottom: -6px;
    content: "";
    height: 310px;
    left: 40%;
    width: 240px;
    z-index: -1
}

.who-can-take .single-events-wrapper {
    flex-wrap: nowrap;
    gap: 20px;
    margin-top: 50px
}

.who-can-take .single-events-item {
    background-color: #eee4dc;
    border-radius: 6px;
    box-shadow: 0 7px 29px 0 hsla(240, 5%, 41%, .2);
    font-size: 17px;
    line-height: 1.5;
    position: relative;
    z-index: 1
}

.who-can-take .single-events-item:before {
    background-color: #fff;
    border-radius: 6px;
    content: "";
    height: 96%;
    left: 0;
    position: absolute;
    top: 1px;
    width: 100%;
    z-index: -1
}

.who-can-take .single-events-item .single-events-content .title {
    background: var(--gold);
    border-radius: 6px 6px 0 0;
    color: var(--dark-blue);
    font-size: 18px;
    padding: 20px 12px
}

.who-can-take .single-events-item .single-events-content .sub_head {
    border-bottom: 1px dashed #e1e2e3;
    border-top: 1px dashed #e1e2e3;
    margin-bottom: 0;
    margin-top: 20px;
    padding: 25px;
    position: relative;
    z-index: 1
}

.why-choose-area {
    position: relative
}

.why-choose-area:before {
    background-color: #ebeff0;
    clip-path: polygon(0 0, 100% 0, 100% 84%, 0 100%);
    content: "";
    height: 68%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: -1
}

.why-choose-area .why-choose-wrap {
    flex-wrap: nowrap;
    margin-top: 30px
}

.why-choose-area .why-choose-box {
    background: var(--white);
    border-radius: 5px;
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .05);
    padding: 40px 30px;
    position: relative;
    text-align: center
}

.why-choose-area .why-choose-box:not(:last-child) {
    margin-right: 30px
}

.why-choose-area .why-choose-box .icon {
    align-items: center;
    background-color: var(--dark-blue);
    border-radius: 50%;
    display: flex;
    font-size: 44px;
    height: 90px;
    justify-content: center;
    margin: 0 auto 15px;
    width: 90px
}

.why-choose-area .why-choose-box .content .title {
    font-size: 20px;
    margin-bottom: 18px
}

.perks-digital .img-gallery {
    position: relative
}

.perks-digital .img-gallery .thumbnail {
    position: relative;
    z-index: -1
}

.perks-digital .img-gallery .thumbnail img {
    border-bottom-right-radius: 200px;
    border-top-left-radius: 230px;
    border-top-right-radius: 230px
}

.perks-digital .img-gallery .support-box {
    margin-top: -30px
}

.perks-digital .img-gallery .support-box .inner {
    background: var(--gold);
    border-bottom-left-radius: 65px;
    border-bottom-right-radius: 107px;
    border-top-left-radius: 65px;
    border-top-right-radius: 23px;
    bottom: 39px;
    box-shadow: 0 10px 70px 0 rgba(14, 4, 29, .2);
    color: var(--dark-blue);
    display: inline-block;
    font-size: 1.1rem;
    left: -50px;
    padding: 32px 67px;
    position: relative
}

.perks-digital .img-gallery .support-box .inner p {
    color: var(--dark-blue);
    font-size: 1.2rem;
    font-weight: 600
}

.perks-digital .img-gallery .support-box .inner:after {
    background: var(--white);
    border-bottom-left-radius: 65px;
    border-bottom-right-radius: 107px;
    border-top-left-radius: 65px;
    border-top-right-radius: 23px;
    content: "";
    height: 100%;
    position: absolute;
    right: -22px;
    top: -19px;
    width: 100%;
    z-index: -1
}

.modules-wraper {
    backdrop-filter: blur(2px);
    background: url(../images/doodles.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%
}

.baseContainer {
    background: url(../images/doodles.svg);
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 4vmax;
    padding-block: 0;
    width: 100%
}

.row-wrap {
    position: relative
}

.contentColFive,
.contentColFour,
.contentColOne,
.contentColSix,
.contentColThree,
.contentColTwo {
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    padding: .6vmax;
    z-index: 9999
}

.colFiveFirst,
.colThreeSecond {
    border-bottom-left-radius: 10px;
    border-left: 2px dashed var(--dark-blue)
}

.colFourFirst,
.colTwoSecond {
    border-right: 2px dashed var(--dark-blue)
}

.colSixSecond,
.colThreeSecond,
.colTwoSecond {
    border-top: 2px dashed var(--dark-blue)
}

.colThreeSecond,
.colTwoSecond {
    border-top-right-radius: 10px
}

.colFiveFirst,
.colFourFirst {
    border-bottom: 2px dashed var(--dark-blue)
}

.col-box,
.colUnder,
.rowFiveContainer,
.rowFourContainer,
.rowOneContainer,
.rowThreeContainer,
.rowTwoContainer {
    display: flex
}

.col-box,
.colUnder,
.rowFourContainer,
.rowThreeContainer,
.rowTwoContainer {
    flex: 1
}

.rowFiveContainer,
.rowOneContainer {
    flex: .2
}

.col-box {
    flex-direction: column;
    position: relative
}

.colOneFirst {
    border-bottom: 2px dashed #002147;
    border-bottom-left-radius: 0;
    height: 100%;
    position: relative;
    width: 100%
}

.colOneFirst img {
    bottom: 0;
    left: -2.5%;
    position: absolute
}

.colSixSecond {
    border-top-right-radius: 0;
    height: 100%;
    position: relative;
    width: 100%
}

.colSixSecond img {
    bottom: 100%;
    position: absolute;
    right: -6%;
    width: 8%
}

.contentCol {
    border: 2px solid var(--dark-blue);
    cursor: pointer;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: max-height .5s ease;
    width: 70%
}

.contentCol,
.dot {
    position: absolute
}

.dot {
    background-color: var(--dark-blue);
    border-radius: 2.5vmax;
    filter: drop-shadow(0 0 10px var(--gold));
    height: 2.5vh;
    left: -.8%;
    top: 0;
    width: 2.5vh
}

.colTitle {
    -moz-column-gap: 20px;
    column-gap: 20px;
    display: flex;
    font-size: 1.3vmax;
    font-weight: 500;
    justify-content: space-between;
    margin-bottom: 0
}

.colSubtitle {
    display: block;
    font-size: 1vmax;
    margin-top: 0;
    max-height: 0;
    padding-top: 0;
    text-align: left;
    transition: max-height .3s ease
}

.baseContainer ul {
    padding-inline: 20px
}

.colSubtitle li {
    list-style: circle;
    padding-block: 8px
}

.show .colSubtitle {
    max-height: 100vh
}

.learning_web .content_box {
    margin-top: 30px
}

.wb-courses-duration {
    padding-block: 80px
}

.wb-courses-duration .wc-counterup {
    background-color: #e8f8f5;
    border-radius: 10px;
    padding: 38px 30px;
    text-align: center;
    text-transform: capitalize
}

.wb-courses-duration .durationTitle {
    color: #1ab69d;
    font-size: 30px;
    margin-bottom: 10px
}

.wb-courses-duration .wc-counterup:nth-child(2) .durationTitle {
    color: #ee4a62
}

.wb-courses-duration .wc-counterup:nth-child(3) .durationTitle {
    color: #8d56fe
}

.wb-courses-duration .wc-counterup:nth-child(2) {
    background-color: #fee
}

.wb-courses-duration .wc-counterup:nth-child(3) {
    background-color: #f3eeff
}

.who-can-take.gaining_skills {
    background: 0 0
}

.who-can-take.gaining_skills .img-grid .sub-img:after {
    background-color: #fff
}

.students-work .section-title .title-line {
    display: block;
    margin: 0 auto
}

.students-work .work-grid {
    padding: 0 30px 36px;
    position: relative;
    z-index: 1
}

.students-work .work-grid:after {
    background-color: var(--white);
    border-radius: 10px;
    bottom: 0;
    box-shadow: 0 8px 24px hsla(210, 8%, 62%, .2);
    content: "";
    height: 75%;
    left: 0;
    position: absolute;
    right: 0;
    width: 100%;
    z-index: -1
}

.students-work .work-grid .thumbnail-wrap {
    margin-bottom: 25px;
    position: relative
}

.students-work .work-grid .thumbnail-wrap img {
    border-radius: 12px;
    box-shadow: 0 30px 50px 0 rgba(26, 46, 85, .1);
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.students-work .students-work_grid {
    flex-wrap: nowrap;
    gap: 25px;
    margin-bottom: 80px
}

.Webcooks_Impact .img-box .mega-hover {
    border-radius: 50%;
    position: relative
}

.Webcooks_Impact .img-box .mega-hover:after,
.Webcooks_Impact .img-box .mega-hover:before {
    content: "";
    opacity: 1;
    pointer-events: none;
    position: absolute;
    transform: rotate(5deg);
    z-index: 3
}

.Webcooks_Impact .img-box .mega-hover:before {
    background: hsla(0, 0%, 100%, .3);
    bottom: -10%;
    left: 50%;
    right: 51%;
    top: -10%
}

.Webcooks_Impact .img-box .mega-hover:after {
    background: hsla(0, 0%, 100%, .6);
    bottom: 50%;
    left: -10%;
    right: -10%;
    top: 50%
}

.Webcooks_Impact .img-box .mega-hover:hover:before {
    left: 0;
    opacity: 0;
    right: 0;
    transition: all .9s linear
}

.Webcooks_Impact .img-box .mega-hover:hover:after {
    bottom: 0;
    opacity: 0;
    top: 0;
    transition: all .9s linear
}

.Webcooks_Impact .img-box .mega-hover:hover img {
    transform: scale(1.05)
}

.Webcooks_Impact .img-box .mega-hover img {
    border-radius: 50%;
    transition: all 2s ease;
    width: 100%
}

.services-form.wb-modules {
    background-color: #ebeff0
}

.services-form.wc-faq-area .faq-container {
    max-height: 100%
}

.services-form.wb-modules .contact_form form {
    box-shadow: 0 10px 30px #5a515154
}

.contact_wrapper {
    justify-content: center
}

.wb-contact a {
    color: #000
}

.wb-contact .address_list>div {
    margin-bottom: 30px
}

.wb-contact .address_list .icon p {
    align-items: center;
    color: #181818;
    -moz-column-gap: 13px;
    column-gap: 13px;
    display: flex;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 5px;
    text-transform: capitalize
}

.wb-contact .address_list .text {
    margin-left: 30px
}

.wb-contact .address_list .text span {
    font-size: 1.1rem;
    line-height: 1.4
}

.wb-contact .address_list .icon i {
    color: var(--gold);
    font-size: 20px
}

.wb-contact .contact_form form input,
.wb-contact .contact_form form select,
.wb-contact .contact_form form textarea {
    border: none;
    border-bottom: 1px solid var(--dark-blue);
    height: 34px;
    width: 100%
}

.career-main .wb-contact .contact_form form textarea {
    display: block;
    margin: 0 auto;
    width: 93%
}

select:focus,
select:focus-visible,
select:hover {
    border: none;
    border-bottom: 1px solid var(--dark-blue);
    outline: 0
}

.wb-contact .contact_form form select {
    color: #1c136e;
    font-size: 16px;
    font-weight: 700
}

.wb-contact .contact_form form input::-moz-placeholder,
.wb-contact .contact_form form textarea::-moz-placeholder {
    color: #181818
}

.wb-contact .contact_form form input::placeholder,
.wb-contact .contact_form form textarea::placeholder {
    color: #181818
}

.wb-contact .contact_form form input::-moz-placeholder,
.wb-contact .contact_form form textarea::-moz-placeholder {
    color: var(--dark-blue);
    font-size: 18px;
    font-weight: 600
}

.wb-contact .contact_form form input::placeholder,
.wb-contact .contact_form form textarea::placeholder {
    color: var(--dark-blue);
    font-size: 18px;
    font-weight: 600
}

.wb-contact .contact_form form>div {
    row-gap: 20px
}

.wb-contact .contact_form .content_box {
    margin-bottom: 30px
}

.wb-contact .contact_form .content_box span {
    display: inline;
    margin-left: 10px
}

.wb-contact .contact_form .content_box .h1_popins {
    color: var(--dark-blue);
    font-size: 23px;
    margin-bottom: 12px;
    padding-bottom: 0;
    text-transform: capitalize
}

.webservices-hero {
    background: #0c2143;
    padding-top: 10px
}

.webservices-hero .content-left .title {
    color: #fff;
    font-size: 40px;
    font-weight: 600;
    letter-spacing: -2px;
    line-height: 55px;
    margin-top: 10px
}

.webservices-hero .content-left .title span {
    color: var(--gold)
}

.webservices-hero .content-left p {
    color: #fff;
    margin-block: 15px
}

.webservices-hero .shape-btm {
    margin-top: -96px;
    position: absolute;
    z-index: 666
}

.webservices-hero-wrapper {
    padding-top: 80px
}

#Enquery-form {
    position: relative;
    top: 52px
}

.features-wb {
    padding-top: 105px
}

.m-20 {
    margin-top: 30px
}

.grid-form {
    align-items: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background: hsla(0, 0%, 100%, .25);
    border: 1px solid hsla(0, 0%, 100%, .18);
    border-radius: 10px;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, .37);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 20px auto;
    padding: 10px 6px;
    width: 80%
}

.grid-form .grid-col {
    display: flex;
    flex-direction: column;
    row-gap: 14px
}

.grid-form .form-control {
    border: none;
    border-radius: 3px;
    height: 59px;
    padding: 7px;
    width: 100%
}

.grid-form textarea {
    border-radius: 8px;
    height: 57px;
    padding: 7px;
    width: 100%
}

.grid-form textarea::-moz-placeholder {
    color: #888;
    opacity: 1
}

.grid-form textarea::placeholder {
    color: #888;
    opacity: 1
}

.grid-btn {
    margin-top: 10px
}

.webservices-hero .img-grid .wc-btn {
    display: none
}

.services-form {
    background-color: #fff
}

.services-form .contact_form form {
    background-color: #fff;
    border-radius: 16px;
    padding: 20px
}

.services-form .contact_form form .title {
    color: var(--dark-blue);
    font-family: League Spartan, sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center
}

.services-form .contact_form input,
.services-form .contact_form textarea {
    border: 1px solid var(--dark-gray);
    border-radius: 8px;
    height: 50px;
    outline: 0;
    padding-inline: 10px;
    width: 100%
}

.services-form .contact_form textarea {
    height: unset
}

.footer-wb {
    background-color: #fff;
    color: var(--dark-blue);
    padding: 20px
}

.footer-wb .footer-content {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(232px, 0fr))
}

.footer-column {
    padding: 10px
}

.footer-title {
    color: var(--dark-blue);
    font-size: x-small
}

.footer-logo {
    height: auto;
    max-width: 100%
}

.form-container {
    width: 50%
}

.form-info {
    gap: 20px
}

.form-info-input input,
.form-info-input select,
.form-info-input textarea {
    border: none;
    border-radius: 8px;
    height: 40px;
    max-width: 100%;
    padding: 8px;
    width: 100%
}

.form-info-input .form-group,
.form-info-input .form-info-grid {
    width: 100%
}

.footer-wb a {
    color: var(--dark-blue);
    font-size: small;
    text-decoration: none;
    transition: color .3s
}

.footer-wb a:hover {
    color: var(--gold)
}

.footer-wb .title {
    border-bottom: 2px solid var(--gold);
    font-size: medium;
    margin-bottom: 15px;
    padding-bottom: 10px;
    width: 100px
}

.footer-wb ul li {
    margin: 10px 0
}

.footer-bottom {
    border-top: 1px solid #ecf0f1;
    padding-block-start: 20px;
    text-align: center
}

.footer-bottom p {
    font-size: .9rem;
    margin-bottom: 0
}

.footer-social {
    display: flex;
    flex-direction: row;
    margin-top: 20px
}

.footer-social .social-icons {
    align-items: center;
    background-color: #eaeef0;
    border: none;
    border-radius: 50%;
    color: #1c136c;
    cursor: pointer;
    display: flex;
    height: 30px;
    justify-content: center;
    margin-right: 10px;
    padding: 10px;
    transition: color .3s, background-color .3s;
    width: 30px
}

.footer-social .social-icons:hover {
    background-color: #1c136c;
    color: #fff
}

.location-button {
    align-items: center;
    background-color: #eaeef0;
    border: none;
    border-radius: 20px;
    color: #1c136c;
    -moz-column-gap: 12px;
    column-gap: 12px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    line-height: 1;
    padding: 10px;
    transition: color .3s, background-color .3s;
    vertical-align: middle
}

.location-button:hover {
    background-color: #1c136c;
    color: #fff
}

.location-button i {
    padding-right: 6px
}

.journeyContainer {
    align-items: center;
    background: linear-gradient(270deg, #1c136c, #03173d);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 24px;
    width: 100%
}

.journeyHeading {
    color: #fff;
    font-size: 40px;
    text-align: center
}

.journeyContentCard .inner {
    background-color: #ffffff22;
    border: 1px solid #ffffff44;
    border-radius: 10px;
    color: var(--white);
    height: 100%;
    padding: 20px
}

.journeyContentCard .inner ol li {
    list-style: decimal
}

.journeyContentCard img {
    width: 18%
}

.journeyCardTitle,
.journeyContentCard p {
    color: var(--white)
}

.journeyCardTitle {
    font-size: x-large
}

.headerContent {
    display: flex;
    padding: 10px 30px;
    position: relative;
    width: 100%;
    z-index: 9999
}

.headerContent .link {
    display: flex;
    flex: 1;
    flex-direction: column
}

.headerContent .link a {
    font-weight: 400;
    line-height: 1;
    margin: 10px;
    padding: 0;
    transform: scale(1);
    transition: color .3s ease, transform .3s ease
}

.headerContent .link a:hover {
    color: var(--gold);
    transform: scale(1.1)
}

.headerFooter {
    background-color: var(--gold);
    display: flex;
    flex-direction: row;
    margin-bottom: 40px;
    position: relative;
    width: 100%
}

.headerFooter .headerFooterTitle {
    align-items: center;
    display: flex;
    flex: 2;
    justify-content: center;
    padding: 20px 40px
}

.headerFooter .headerFooterTitle p {
    color: #292929;
    display: inline;
    font-size: medium;
    font-weight: 400;
    line-height: 1.4;
    padding: 10px
}

.headerFooter .headerFooterTitle p strong {
    font-size: xx-large
}

.headerFooter .headerFooterContent {
    display: flex;
    flex: 1;
    position: relative
}

.headerFooter .headerFooterContent img {
    bottom: 0;
    position: absolute;
    right: 6%;
    width: 100%
}

.footer-bottom-links-1 {
    bottom: 25px;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 999999
}

.mobile-footer-container {
    justify-content: space-evenly
}

.footer-bottom-links-1 .link-container {
    background: var(--dark-blue);
    border: 4px solid hsla(0, 0%, 100%, 0);
    border-radius: 3px;
    box-shadow: 2px 3px 5px 0 rgba(0, 0, 0, .3);
    padding-block: 7px;
    padding-left: 15px;
    padding-right: 15px;
    text-align: center
}

.footer-bottom-links-1 .link-container a {
    align-items: center;
    color: #fff;
    display: flex;
    font-family: Open Sans, sans-serif;
    font-size: 14px;
    font-weight: 600;
    justify-content: space-around;
    text-decoration: none
}

.footer-bottom-links-1 .link-container:nth-child(2) {
    background-image: url(../images/whatsapp-svgrepo-com.svg);
    background-position: 10px 2px;
    background-repeat: no-repeat;
    background-size: 29px
}

.footer-bottom-links-1 .link-container.call-link {
    background: var(--dark-blue)
}

@media (max-width:1000px) {
    .spacer {
        height: 0
    }
    .tabAnimBaseContainer {
        background-color: #fff;
        display: flex;
        flex-direction: column;
        height: 100vh;
        position: sticky
    }
    .tabAnimationImageBaseContainer {
        align-items: center;
        display: flex;
        flex: 1;
        justify-content: center;
        margin: 4vw;
        position: relative
    }
    .tabAnimationContentBaseContainer {
        backdrop-filter: blur(10px);
        background: linear-gradient(320deg, #1f1f35 -10%, #0754ad 200%), linear-gradient(45deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2));
        background-color: #ffffff11;
        border: .5px solid #ffffff22;
        border-radius: 2vw;
        box-shadow: 0 0 15px #00000044;
        color: #fff;
        display: flex;
        flex: 1;
        flex-direction: column;
        margin: 5vw;
        padding: 2vw
    }
    .bulbBottomContainer {
        align-items: center;
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: flex-start;
        margin-top: .7vmax;
        position: absolute;
        top: 10%;
        width: 100%
    }
    .squareContainer1,
    .squareContainer2 {
        background-color: #292929;
        border-radius: 5vmax;
        height: .02vw
    }
    .squareContainer1 {
        width: .4vmax
    }
    .squareContainer2,
    .squareContainer3 {
        margin-top: .9px;
        width: .5vmax
    }
    .glow2,
    .glow6 {
        transform: rotate(30deg)
    }
    .glow3,
    .glow5 {
        transform: rotate(-30deg)
    }
    .cityViewImageContainer {
        height: 100%;
        left: 0;
        position: absolute;
        transform: translateX(0);
        width: 400%
    }
}

.hero-section-career {
    background-image: url(../images/Webcooks-team.webp);
    background-position: 50%;
    background-size: cover;
    color: #fff;
    padding: 120px 0;
    position: relative;
    text-align: center;
    z-index: 1
}

.hero-section-career .overlay {
    background: rgba(0, 0, 0, .45);
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1
}

.hero-section-career h1 {
    font-size: 3.5rem;
    font-weight: 600
}

.hero-section-career .lead {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 300;
    margin-block: 10px
}

.hero-section-career .btn {
    background-color: var(--gold);
    border-radius: 50px;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 60px;
    padding: 15px 30px;
    transition: background-color .3s ease
}

.hero-section-career .btn:hover {
    background-color: #e6b800
}

.fade-in {
    animation: fadeIn 1.5s forwards;
    opacity: 0
}

.spacer {
    height: 33px
}

.about-hero {
    background-image: url(../images/hero-Frame.png);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 80px 30px;
    position: relative;
    text-align: center
}

.about-hero .elements {
    left: 0;
    position: absolute;
    top: 100px
}

.about-hero .inner-header h1 {
    color: var(--dark-blue);
    font-size: 38px;
    letter-spacing: -.54px;
    margin-bottom: 10px
}

.about-hero .inner-header a {
    color: var(--dark-blue);
    display: inline-block;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    transition: all .4s
}

.our-statics .statics-wrapper .statics-box {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 40px 0 rgba(0, 0, 0, .09);
    padding: 24px;
    position: relative
}

.our-statics .statics-wrapper .statics-box:hover {
    transform: translateY(-5px);
    transition: all .4s
}

.our-statics .statics-wrapper .content-area h3 {
    margin-block: 12px
}

.our-statics .statics-wrapper .content-area p {
    font-size: 14px
}

.our-statics .img-wrapper {
    align-items: flex-end;
    display: flex;
    justify-content: center
}

.our-statics .img-grid img {
    border-radius: 12px
}

.our-statics .img-grid .single-img {
    align-items: center;
    display: flex;
    position: relative
}

.our-statics .img-grid .single-img img {
    position: relative;
    z-index: 20
}

.our-statics .img-grid .single-img:after {
    border: 25px solid var(--dark-blue);
    border-radius: 50%;
    content: "";
    height: 60px;
    left: -16px;
    position: absolute;
    top: 45px;
    width: 60px;
    z-index: 10
}

.our-statics .img-grid .pack-img img {
    padding-bottom: 20px
}

.img-grid .text-box {
    animation: scroll 2s linear infinite;
    animation-direction: alternate;
    background: #fff;
    border-radius: 8px;
    bottom: 74%;
    box-shadow: 0 4px 40px 0 rgba(0, 0, 0, .09);
    display: inline-block;
    margin-bottom: 24px;
    padding: 12px;
    position: absolute;
    right: 22%;
    z-index: 999
}

.img-grid .text-box p {
    color: var(--dark-blue);
    font-size: 20px;
    line-height: 16px
}

.impact-section .card-boxarea {
    cursor: pointer
}

.impact-section .card-boxarea .content-area {
    background: #f2f4ff;
    border-radius: 4px;
    margin: 0 40px 0 0;
    padding: 28px 18px;
    position: relative;
    text-align: center;
    z-index: 1
}

.impact-section .card-boxarea .content-area:after {
    background: var(--dark-blue);
    border-radius: 8px;
    content: "";
    height: 100%;
    left: 50%;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: all .4s;
    visibility: hidden;
    width: 10px;
    z-index: -1
}

.impact-section .card-boxarea:hover .content-area:after {
    left: 0;
    opacity: 1;
    top: 0;
    transition: all .4s;
    visibility: visible;
    width: 100%
}

.impact-section .card-boxarea:hover .content-area h3,
.impact-section .card-boxarea:hover .content-area h4,
.impact-section .card-boxarea:hover .content-area p {
    color: #f1f0fe
}

.impact-section .card-boxarea:hover .sub-title {
    transform: rotateY(1turn);
    transition: all .4s
}

.impact-section .card-boxarea .sub-title {
    background-color: var(--dark-blue);
    border-radius: 50%;
    color: #fff;
    display: inline-block;
    height: 60px;
    letter-spacing: -.24px;
    line-height: 60px;
    position: relative;
    text-align: center;
    transition: all .4s;
    width: 60px
}

.impact-section .imact-wrapper {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 40px 0 rgba(0, 0, 0, .09);
    margin-top: 45px;
    padding: 45px 20px;
    position: relative
}

.impact-section .imact-wrapper:after {
    background-image: radial-gradient(var(--gold) 15%, transparent 20%);
    background-position: 0 0;
    background-size: 20px 20px;
    border-radius: 50%;
    content: "";
    height: 120px;
    left: -70px;
    opacity: 1;
    position: absolute;
    top: -34px;
    width: 120px;
    z-index: -1
}

.impact-section .img-block {
    align-items: center;
    display: flex;
    position: relative
}

.impact-section .card-boxarea.box-1 .text-end-area {
    text-align: right
}

.impact-section .img-block .img-box img {
    align-items: center;
    background: #f1f0fe;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    padding: 16px;
    position: relative;
    z-index: 1
}

.impact-section .img-block .elements12 {
    left: -119px;
    position: absolute;
    top: 39px
}

.impact-section .img-block .elements13 {
    bottom: 31px;
    left: -41px;
    position: absolute
}

.impact-section .img-block .elements14 {
    position: absolute;
    right: -108px;
    top: 20px
}

.impact-section .img-block .elements15 {
    bottom: 31px;
    position: absolute;
    right: -39px
}

.impact-section .card-boxarea.box-1 .sub-title {
    left: -80px;
    margin-bottom: 20px
}

.impact-section .card-boxarea.box-2 .sub-title {
    margin-top: 20px;
    right: -114px;
    top: -4px
}

.impact-section .card-boxarea.box-3 .sub-title {
    right: -94px;
    top: -23px
}

.impact-section .card-boxarea.box-4 .sub-title {
    left: 21px;
    top: 66px
}

.cta-section-area {
    background: linear-gradient(320deg, #0754ad -40%, #1f1f35 34%), linear-gradient(45deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2));
    padding-top: 100px
}

.cta-section-area .inner-content h2 {
    color: #fff;
    font-size: 44px;
    letter-spacing: -.54px
}

.cta-section-area .inner-content p {
    color: #fff;
    margin-block: 20px
}

.cta-section-area .cta-images {
    display: flex;
    justify-content: flex-end;
    position: relative
}

.cta-section-area .cta-images .round-anime {
    animation-direction: alternate;
    animation-duration: 90s;
    animation-iteration-count: infinite;
    animation-name: round-anime;
    animation-timing-function: cubic-bezier(.59, .59, 1, 1)
}

.cta-section-area .cta-images .img-box {
    left: 18px;
    position: absolute
}

.cta-section-area .cta-images .animate-lists {
    animation: scroll 2s infinite;
    animation-direction: alternate;
    left: -53px;
    position: absolute
}

.cta-section-area .cta-images .animate-lists.right-list {
    left: unset;
    right: -110px
}

.cta-section-area .cta-images .animate-lists li a {
    background: var(--white);
    border-radius: 8px;
    color: var(--dark-blue);
    display: inline-block;
    font-size: 16px;
    line-height: 16px;
    margin-bottom: 24px;
    padding: 12px
}

.cta-section-area .cta-images .animate-lists li:nth-child(2) {
    margin-left: -40px
}

.experts {
    background-color: #ebeff0
}

.experts .team-author .img-box {
    align-items: flex-end;
    display: flex;
    justify-content: center;
    position: relative;
    text-align: left
}

.experts .team-author .social-links {
    margin-top: 20px;
    padding: 20px;
    position: absolute;
    right: -80px;
    top: 0;
    transition: right .5s ease-out
}

.experts .team-author:hover .social-links {
    right: 0
}

.experts .team-author .social-links li:not(last-child) {
    margin-bottom: 35px
}

.experts .team-author .social-links li a {
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .1), 0 0 12px rgba(0, 0, 0, .15), 0 0 20px rgba(0, 0, 0, .2);
    color: var(--gold);
    font-size: 20px;
    padding: 12px;
    transition: box-shadow .3s ease-in-out
}

.experts .team-author .img-box img {
    border: 9px solid #ebeff0;
    border-radius: 50%;
    height: 190px;
    -o-object-fit: cover;
    object-fit: cover;
    width: 190px
}

.experts .team-author .content-area {
    border-radius: 16px;
    display: flex;
    justify-content: space-between;
    position: relative;
    width: 100%
}

.experts .team-author .content-area .text {
    color: var(--dark-blue);
    font-size: 20px
}

.experts .team-author p {
    margin: 0;
    padding: 0 10px;
    text-align: justify
}

.experts .team-author {
    border: 1px solid #e2dfeb;
    border-radius: 0 10px 10px 10px;
    height: 100%;
    overflow: hidden;
    position: relative
}

.experts .team-author:hover .social {
    right: 80px;
    transition: all .6s
}

.experts .team-author .hide-box {
    display: none
}

.experts .team-author .hide-box.active-text {
    display: block
}

.experts .text-ellipsis {
    cursor: pointer
}

.our-statics-wrapper {
    justify-content: space-around;
    margin-top: 35px;
    row-gap: 30px
}

.services-hero {
    background: linear-gradient(90deg, #dbdee6, #eef0df, #e9f0e2);
    overflow: hidden;
    padding: 60px 0 120px
}

.services-hero .hero-header {
    position: relative
}

.services-hero .hero-header h1 {
    color: var(--dark-blue);
    font-size: 35px;
    letter-spacing: 1.5px;
    margin-bottom: 16px
}

.services-hero .images-grid {
    position: relative
}

.services-hero .images-grid .header-images {
    position: absolute
}

.services-hero .img-element-1 {
    position: absolute;
    right: 45px
}

.services-hero .images-grid .header-images.img-element-3 {
    bottom: -111px;
    right: 0;
    transform: rotateX(168deg) rotateY(145deg)
}

.services-hero .images-grid .header-images.img-element-2 {
    left: -85px;
    top: 49px
}

.services-hero .author-box {
    left: unset;
    right: 290px;
    top: unset
}

.services-hero .images-grid .text-grid {
    bottom: 216px;
    display: flex;
    flex-direction: column;
    left: -117px;
    position: absolute;
    row-gap: 25px;
    width: 150px
}

.services-hero .images-grid .text-grid span {
    border-radius: 5px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1.5px;
    padding: 7px 10px;
    text-transform: capitalize
}

.services-hero .images-grid .text-grid span:nth-child(3) {
    background: var(--gold);
    box-shadow: 6px 6px 0 0 rgba(0, 0, 0, .25);
    color: var(--dark-blue);
    transform: skewY(-10deg)
}

.services-hero .images-grid .text-grid .experience {
    background: var(--gold);
    box-shadow: -8px 6px 0 0 rgba(0, 0, 0, .25);
    color: var(--dark-blue);
    transform: skewY(9deg);
    width: 188px
}

.services-hero .images-grid .text-grid span:nth-child(2) {
    background: var(--white)
}

.pulse {
    height: 200px;
    position: absolute;
    right: 0;
    top: 0;
    width: 200px
}

.pulse span {
    animation: pulse 6s linear infinite;
    animation-delay: calc(var(--i)*1s);
    background: 0 0;
    border: 1px solid var(--gold);
    border-radius: 50%;
    left: 50%;
    overflow: hidden;
    position: absolute;
    top: 50%;
    transform: translate(-70%, 50%)
}

.pulse img {
    bottom: -174px;
    position: absolute
}

.web-services .banner-content .head-title span {
    color: var(--gold);
    font-size: 32px
}

.shape-btm {
    margin-top: -12px;
    position: absolute;
    z-index: 666
}

.web-services .mobile-img {
    display: none;
    -webkit-mask-image: url(../images/mask-img.png);
    mask-image: url(../images/mask-img.png);
    -webkit-mask-position: center center;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain
}

.features-wrapper {
    margin-top: 25px;
    position: relative
}

.features-wrapper .service-card .inner {
    background: #fff;
    border-radius: 8px;
    height: 100%;
    padding: 40px 35px;
    position: relative;
    text-align: center;
    transition: .4s
}

.features-wrapper .service-card .icon {
    color: var(--gold);
    font-size: 30px
}

.features-wrapper .service-card .content .title {
    color: var(--dark-blue);
    font-size: 20px;
    font-weight: 700;
    line-height: 32px;
    margin-block: 15px
}

.features-wrapper .shape {
    position: absolute;
    right: -55px;
    top: -81px
}

.info-details .feature-thumbnail {
    position: relative;
    z-index: 2
}

.info-details .feature-thumbnail img {
    -webkit-mask-image: url(../images/mask-img.png);
    mask-image: url(../images/mask-img.png);
    -webkit-mask-position: center center;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain
}

.info-details .feature-thumbnail .circle-image {
    height: 100%;
    position: absolute;
    right: 7px;
    top: -11px;
    width: 97%;
    z-index: -1
}

.info-details .feature-thumbnail .circle-image span {
    animation: jelly 13s linear infinite;
    border: 2px solid var(--gold);
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%
}

.info-details .feature-thumbnail .circle-image span:first-child {
    border-radius: 38% 62% 64% 36%/43% 35% 65% 57%
}

.info-details .feature-thumbnail .circle-image span:nth-child(2) {
    animation-direction: reverse;
    border-radius: 41% 59% 40% 60%/65% 66% 34% 35%
}

.pricing-section .features-card-wrapper {
    row-gap: 25px
}

.pricing-section .card-body {
    height: 100%
}

.pricing-section .inner {
    background: var(--white);
    border-radius: 5px;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .06);
    height: 100%;
    position: relative
}

.pricing-section .text-container {
    padding: 20px 30px
}

.pricing-section .inner:after {
    border-color: transparent transparent transparent #fff;
    border-bottom: 0 solid transparent;
    border-bottom-right-radius: 4px;
    border-left: 27px solid var(--white);
    border-right: 0 solid transparent;
    border-top: 33px solid transparent;
    content: "";
    height: 0;
    left: 20px;
    position: absolute;
    top: calc(99% - 1px);
    transform: rotate(90deg);
    width: 0;
    z-index: 2
}

.pricing-section .inner .header {
    background: none 0 0 repeat scroll #002147;
    border-radius: 10px 10px 0 0;
    color: #fff;
    padding: 30px 15px
}

.services-feautres ul li {
    font-size: 17px;
    line-height: 30px;
    text-transform: capitalize
}

.services-feautres ul li:not(last-child) {
    border-bottom: 1px solid #e7e7e7;
    margin-bottom: 10px
}

.our-projects .our-projects-wrapper {
    row-gap: 20px
}

.our-projects .divide-flash {
    border: 2px solid #ebeff0;
    border-radius: 8px;
    box-shadow: 0 7px 29px 0 hsla(240, 5%, 41%, .2);
    height: 369px;
    overflow: hidden;
    position: relative
}

.our-projects .divide-flash img {
    border-radius: 8px
}

.our-projects .divide-flash:before {
    transform: scaleX(1);
    transform-origin: 90%
}

.our-projects .divide-flash:after,
.our-projects .divide-flash:before {
    background: #fff;
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition-duration: .3s;
    transition-property: transform;
    transition-timing-function: ease-out;
    transition: .5s;
    z-index: 1
}

.our-projects .divide-flash:after {
    transform: scaleY(1);
    transform-origin: 90%
}

.our-projects .divide-flash:hover:before {
    opacity: .5;
    transform: scaleX(0)
}

.our-projects .divide-flash:hover:after {
    opacity: .5;
    transform: scaleY(0)
}

.industries-section .inner {
    align-items: center;
    background: #f5f5f5;
    border-radius: 5px;
    display: flex;
    padding: 20px;
    transition: .4s
}

.industries-section .inner .icon {
    align-items: center;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .02);
    display: flex;
    height: 60px;
    justify-content: center;
    margin-right: 20px;
    padding: 10px;
    position: relative;
    transition: .4s;
    width: 60px
}

.industries-section .inner .content .title {
    color: var(--dark-blue);
    font-size: 18px;
    line-height: 32px;
    margin-bottom: 0
}

.industries-section .industries-wrapper {
    position: relative
}

.industries-section .industries-wrapper:before {
    background-color: var(--gold);
    border-radius: 40px 38px 59px 0;
    content: "";
    height: 120px;
    left: -48px;
    position: absolute;
    top: -15px;
    width: 120px;
    z-index: -1
}

.industries-section .industries-wrapper:after {
    background-image: radial-gradient(var(--dark-blue) 15%, transparent 20%);
    background-position: 0 0;
    background-size: 20px 20px;
    border-radius: 50%;
    content: "";
    height: 100px;
    left: -46px;
    opacity: 1;
    position: absolute;
    top: -5px;
    width: 100px;
    z-index: -1
}

.web-services .wc-faq-area {
    background: 0 0
}

.why-us .why-us-wrapper {
    align-items: center
}

.why-us .card-widget .inner {
    background-color: var(--white);
    border-radius: 12px;
    box-shadow: 10px 2px 50px #1c136e26;
    height: 100%;
    padding: 30px
}

.why-us .serve-wrapper .card-widget .inner {
    border: 1px solid var(--gold);
    border-color: var(--gold);
    border-radius: 40px 6px 40px;
    box-shadow: 10px 2px 27px #1c136e26;
    transition: border-color .3s ease-in-out
}

.why-us .card-widget .inner .icon {
    color: var(--gold);
    font-size: 38px
}

.why-us .card-widget .inner .choice-us-title {
    color: var(--dark-blue);
    font-size: 19px;
    line-height: 1.4;
    margin: 15px 0
}

.why-us .card-widget .inner .choice-us-card-desc {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    text-overflow: ellipsis
}

.why-us .section-title .title {
    font-size: 45px
}

.our-services .services-block {
    background-color: var(--white);
    border-radius: 14.976px;
    height: 200px;
    padding: 45px;
    position: relative
}

.services-block .service-card-title {
    color: var(--dark-blue);
    font-size: 22px
}

.service-icon-wrapper {
    background-color: #ebeff0;
    border-top-left-radius: 1.06vw;
    bottom: 0;
    padding-left: .833vw;
    padding-top: .833vw;
    position: absolute;
    right: 0
}

.inner-border-wrapper.service-card-top {
    inset: auto 0 3.6vw auto
}

.inner-border-wrapper {
    background-color: #ebeff0;
    height: 4.16vw;
    left: 0;
    position: absolute;
    top: -4.2vw;
    width: 4.16vw
}

.inner-border-radius {
    background-color: var(--dark-primary);
    border-top-left-radius: 1.4vw;
    height: 100%;
    width: 100%
}

.inner-border-radius.service-card-bottom,
.inner-border-radius.service-card-top {
    background-color: var(--white);
    border-bottom-right-radius: 1.4vw;
    border-top-left-radius: 0
}

.services-block .inner-border-wrapper.service-card-bottom {
    inset: auto 3.6vw 0 auto
}

.our-services .services-block .inner-border-radius.service-card-bottom,
.our-services .services-block .inner-border-radius.service-card-top {
    background-color: var(--white);
    border-bottom-right-radius: 1.4vw;
    border-top-left-radius: 0
}

.our-services .services-block .service-arrow {
    align-items: center;
    background-color: var(--white);
    border-radius: 50%;
    color: var(--gold);
    display: flex;
    height: 2.81vw;
    justify-content: center;
    width: 2.81vw
}

.core-values .core-values-wrapper {
    align-items: center
}

.core-values .img-block {
    position: relative
}

.core-values .img-block img {
    border-radius: 20px;
    -o-object-fit: cover;
    object-fit: cover
}

.core-values .img-block .bg-shape {
    animation: move-bg 4s ease-in-out infinite;
    background-color: var(--gold);
    border-radius: 20px;
    bottom: 0;
    left: 0;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    transform: rotate(-4deg);
    z-index: -1
}

.core-values .block-widgets .title {
    font-size: 22px;
    font-weight: 700;
    line-height: 30px;
    margin-bottom: 10px;
    margin-top: 20px
}

.our-process .process-content-block:nth-child(2) {
    margin-top: 40px
}

.our-process .process-content-block:nth-child(3) {
    margin-top: 80px
}

.our-process .process-content-block .inner {
    background: #fff;
    border-radius: 40px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .24);
    padding: 40px 30px
}

.our-process .process-content-block .subtitle {
    color: var(--gold);
    font-family: League Spartan, sans-serif;
    font-size: 28px;
    font-weight: 400
}

.our-process .process-content-block .process-content-title {
    color: var(--dark-blue);
    font-size: 20px;
    margin: 12px 0
}

.our-solutions .section-title {
    margin-bottom: 50px
}

.graphic-projects-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto auto auto
}

.graphic-projects-grid .grid-col-area {
    grid-area: span 2/span 2/span 2/span 2
}

.graphic-projects-grid .grid-col-area-2 {
    grid-column: span 2/span 2
}

.graphic-projects-grid .grid-col {
    position: relative
}

.graphic-projects-grid .grid-col img {
    border-radius: 10px
}

.graphic-projects-grid .card-overlay {
    background: #706f6f1a;
    border-radius: 10px;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.our-benefits .our-benefits-wrapper {
    margin-top: 30px
}

.our-benefits .our-benefits-wrapper .inner .title {
    color: var(--dark-blue);
    font-size: 30px;
    margin-block: 20px
}

.our-projects .projects-images {
    backdrop-filter: blur(2px);
    background: url(../images/doodles.svg);
    background-position: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    padding: 30px;
    position: relative;
    text-align: end;
    width: 100%
}

.our-projects .projects-images:after {
    background-image: radial-gradient(var(--dark-blue) 15%, transparent 20%);
    background-position: 0 0;
    background-size: 20px 20px;
    content: "";
    height: 200px;
    opacity: 1;
    position: absolute;
    right: -33px;
    top: -21px;
    width: 200px;
    z-index: -6
}

.our-projects .projects-titles .text-box {
    align-items: center;
    background-color: var(--gold);
    border-radius: 10px;
    display: flex;
    padding: 20px 30px
}

.our-projects .projects-titles .content-box h3 {
    color: var(--dark-blue);
    font-size: 22px
}

.our-projects .projects-titles .content-box p {
    color: #fff
}

.our-projects .projects-titles .text-box:not(last-child) {
    margin-bottom: 23px
}

.wc-industry-courses .services-wrapper {
    align-items: center
}

.timeline .timeline-wrapper {
    align-items: center;
    -moz-column-gap: 40px;
    column-gap: 40px;
    padding: 20px;
    row-gap: 20px
}

.timeline .timeline-wrapper:nth-child(odd) {
    flex-direction: row-reverse
}

.timeline .timeline-wrapper .content-area {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 32px -12px rgba(50, 50, 93, .25), 0 9px 17px -18px rgba(0, 0, 0, .3), 0 -12px 36px -8px rgba(0, 0, 0, .025)
}

.timeline .timeline-wrapper .content-area .title {
    color: var(--dark-blue);
    font-size: 18px;
    margin-bottom: 12px
}

.timeline .timeline-wrapper .content-area li {
    font-size: 17px;
    line-height: 1.3;
    list-style: disc;
    margin-left: 15px
}

.timeline .timeline-wrapper .content-area p {
    font-size: 17px
}

.timeline .timeline-wrapper .icon {
    align-items: center;
    background: var(--gold);
    border-radius: 50%;
    color: var(--dark-blue);
    display: flex;
    font-size: 33px;
    height: 100px;
    justify-content: center;
    position: relative;
    width: 100px
}

.timeline .timeline-wrapper .icon img {
    aspect-ratio: 1/.7
}

.timeline .timeline-wrapper .icon:after {
    background: var(--dark-blue);
    content: "";
    height: 2px;
    position: absolute;
    right: -38px;
    top: 49px;
    width: 37px
}

.timeline .timeline-wrapper .icon:before {
    background: var(--dark-blue);
    bottom: -44px;
    content: "";
    height: 44px;
    position: absolute;
    width: 2px
}

.timeline .timeline-wrapper:nth-child(6) .icon:before {
    display: none
}

.timeline .timeline-wrapper:nth-child(2n) .icon:after {
    left: -38px
}

.services-main .services-wrapper .inner {
    background-color: var(--white);
    border-radius: 25px;
    box-shadow: -1px 3px 9px 1px var(--gold);
    height: 100%;
    padding: 30px;
    position: relative
}

.services-main .services-wrapper .inner .title {
    color: var(--dark-blue);
    font-size: 20px;
    letter-spacing: 1px;
    margin-bottom: 20px
}

.services-main .services-wrapper .inner p {
    line-height: 1.7
}

.tools-tech .tool_box {
    background-color: var(--gold);
    border-radius: 8px;
    padding: 16px
}

.tools-tech .tool_box .title {
    color: var(--dark-blue);
    font-size: 16px
}

.services-grid .services-tab .tab-lists li {
    background: #fff;
    background-image: url(../images/arrow-right-orrange.png);
    background-position: 90% 20px;
    background-repeat: no-repeat;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .35);
    cursor: pointer;
    font-size: 17px;
    padding: 15px 19px;
    transition: background-position .3s ease, background-color .3s ease, transform .3s ease;
    will-change: transform, background-position
}

.services-grid .services-tab .tab-lists li:hover {
    background-position: 93% 20px;
    transform: translateY(-6px)
}

.services-grid .services-tab-content {
    display: none
}

.services-grid .services-tab-content .service-title {
    color: var(--dark-blue);
    font-size: 28px
}

.services-grid .services-tab-content .service-subtitle {
    color: var(--dark-blue);
    font-size: 20px
}

.services-grid .services-tab-content p {
    font-size: 18px;
    line-height: 1.4
}

.services-grid .services-tab .services-tab-content .tab-lists li {
    background-image: unset
}

.services-grid .services-tab .services-tab-content .tab-lists li:hover {
    transform: unset
}

.services-grid .services-tab {
    align-items: flex-start
}

.services-grid .services-tab .tab-lists {
    position: sticky;
    top: 20px
}

.business-upscaling .example-content {
    display: none;
    opacity: 0;
    transition: opacity .3s ease-in-out
}

.business-upscaling .example-content.active {
    display: block;
    opacity: 1
}

.business-upscaling .timeline .timeline-wrapper {
    justify-content: space-between
}

.business-upscaling .timeline .timeline-wrapper .icon {
    margin: 0 auto;
    position: relative
}

.business-upscaling .timeline .timeline-wrapper .icon img {
    position: relative;
    z-index: 1
}

.business-upscaling .timeline .timeline-wrapper .icon span {
    animation: ripple 5s linear infinite;
    animation-delay: calc(-.5s*var(--i));
    border: 2px solid var(--dark-blue);
    border-radius: 50%;
    position: absolute;
    z-index: -1
}

@keyframes ripple {
    0% {
        height: 0;
        width: 0
    }
    50% {
        opacity: 1
    }
    to {
        height: 200px;
        opacity: 0;
        width: 200px
    }
}

.business-upscaling .timeline .timeline-wrapper .icon:after,
.business-upscaling .timeline .timeline-wrapper .icon:before {
    display: none
}

.business-upscaling .timeline {
    position: relative
}

.business-upscaling .bar-center {
    border: 2px dotted red;
    border: 2px dotted var(--dark-blue);
    display: block;
    height: 100%;
    inset: 0;
    margin: 0 auto;
    position: absolute;
    width: 0
}

.events-main {
    background-color: #efefef
}
.font38{font-size:38px}
.grid-btns {
    border: 1px solid var(--dark-blue);
    border-radius: 50px;
    cursor: pointer;
    margin-top: 15px;
    /**max-width: 250px;**/
    padding: .625rem 1rem;
    transition: transform .3s ease, box-shadow .3s ease
}

.grid-btns.active-btn,
.grid-btns:hover {
    background-color: var(--dark-blue);
    box-shadow: -2px 6px 0 0 var(--gold);
    color: #fff;
    transform: translateY(-5px)
}

.grid-gallery-wrap {
    -moz-column-gap: 12px;
    column-gap: 12px;
    row-gap: 20px
}

.grid-container {
    gap: 40px;
    margin-bottom: 50px;
    margin-top: 70px
}

.grid-container .grid-box {
    display: none;
    flex: 0 0 30%;
    padding: 5px;
    position: relative;
    transition: all .3s ease
}

.grid-container .grid-box.active-box {
    display: block;
    transform: scale(1.1);
    transition: all .5s linear
}

.grid-container .grid-box img {
    border-radius: 12px;
    -o-object-fit: cover;
    object-fit: cover
}

.grid-container .grid-box .img-box {
    align-items: center;
    display: flex;
    justify-content: center;
    position: relative
}

.grid-container .grid-box .text {
    align-items: center;
    backdrop-filter: blur(8px);
    background-color: #fff6;
    border-radius: 50%;
    color: #151515;
    cursor: pointer;
    display: flex;
    font-size: 20px;
    height: 8rem;
    justify-content: center;
    left: 0;
    margin: 0 auto;
    opacity: 0;
    position: absolute;
    right: 0;
    transition: opacity .5s ease;
    visibility: hidden;
    white-space: nowrap;
    width: 8rem
}

.grid-container .grid-box:hover {
    transform: translateY(-10px);
    transition: all .5s linear
}

.grid-container .grid-box:hover .text {
    opacity: 1;
    transform: scale(1);
    visibility: visible
}

.grid-pop {
    display: none;
    left: 0;
    margin: 0 auto;
    position: fixed;
    right: 0;
    top: 20%;
    width: 50%
}

.grid-pop img {
    border-radius: 12px
}

.grid-pop .close-btn {
    cursor: pointer;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 10px;
    text-align: right
}

.contact-address-bottom {
    position: relative;
    z-index: 1
}

.contact-address-wrap {
    justify-content: space-evenly;
    margin-top: 20px
}

.contact-address-bottom .contact-address-card:not(:last-child) {
    margin-bottom: 12px
}

.contact-address-card {
    border: 1px solid #e2dfeb
}

.contact-address-bottom .contact-address-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 35px rgba(0, 0, 0, .06);
    padding: 30px;
    text-align: center;
    transition: .4s
}

.contact-address-card .inner .icon {
    color: var(--gold);
    font-size: 30px;
    margin-bottom: 15px
}

.contact-address-card .inner .content .title {
    color: var(--dark-blue);
    font-size: 24px;
    font-weight: 700;
    line-height: 36px;
    margin-bottom: 20px
}

.sub-title {
    color: #6f6b80;
    line-height: 26px;
    margin-bottom: 0
}

.hero-banner .content_box {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    position: relative
}

.hero-banner .content_box:before {
    background-color: #fff;
    border-radius: 40px 38px 59px 0;
    content: "";
    height: 120px;
    position: absolute;
    right: -48px;
    top: -50px;
    width: 120px
}

.hero-banner .content_box:after {
    background-image: radial-gradient(var(--gold) 15%, transparent 20%);
    background-position: 0 0;
    background-size: 20px 20px;
    border-radius: 50%;
    content: "";
    height: 120px;
    opacity: 1;
    position: absolute;
    right: -95px;
    top: -64px;
    width: 120px;
    z-index: 1
}

.hero-banner .content_box .form-control,
.hero-banner .content_box textarea {
    border: 2px solid var(--dark-blue);
    border-radius: 6px;
    height: 40px;
    outline: 0;
    padding: 13px;
    width: 100%
}

.hero-banner .content_box .wc-btn {
    margin-top: 13px
}

.hero-banner .content_box textarea {
    height: 90px;
    resize: none
}

.hero-banner .content_box textarea::-moz-placeholder {
    color: var(--dark-blue)
}

.hero-banner .content_box textarea::placeholder {
    color: var(--dark-blue)
}

.hero-banner .content_box .title {
    color: var(--dark-blue);
    font-size: 28px;
    margin-bottom: 12px;
    text-align: center;
    text-transform: capitalize
}

.hero-banner.contact-hero .banner-content {
    text-align: left
}

.hero-banner .banner-content p {
    width: 100%
}

.hero-banner .banner-content ul li {
    -moz-column-gap: 16px;
    column-gap: 16px;
    display: flex
}

.hero-banner .banner-content ul li:not(:last-child) {
    margin: 12px 0
}

.hero-banner .banner-content ul strong {
    color: var(--dark-blue)
}

.hero-banner .banner-content ul li .icon {
    color: var(--gold);
    font-size: 25px
}

.about-our-courses .feature-thumbnail {
    left: -60px;
    position: relative;
    z-index: 2
}

.about-our-courses .feature-thumbnail img {
    -webkit-mask-image: url(../images/mask-img.png);
    mask-image: url(../images/mask-img.png);
    -webkit-mask-position: center center;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain
}

.about-our-courses .feature-thumbnail .circle-image {
    height: 100%;
    position: absolute;
    right: 7px;
    top: -11px;
    width: 97%;
    z-index: -1
}

.about-our-courses .feature-thumbnail .circle-image span {
    animation: jelly 13s linear infinite;
    border: 2px solid var(--gold);
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%
}

.about-our-courses .feature-thumbnail .circle-image span:first-child {
    border-radius: 38% 62% 64% 36%/43% 35% 65% 57%
}

.about-our-courses .feature-thumbnail .circle-image span:nth-child(2) {
    animation-direction: reverse;
    border-radius: 41% 59% 40% 60%/65% 66% 34% 35%
}

.about-our-courses.wc-faq-area {
    background: 0 0
}

.about-our-courses.wc-faq-area .faq-container {
    position: relative
}

.about-our-courses.wc-faq-area .faq-container .shape {
    position: absolute;
    right: -55px;
    top: -81px
}

.address-bar {
    background: #fff;
    border-radius: 0 10px 50px 10px;
    margin-top: 20px;
    padding: 5px 12px;
    text-align: center;
    width: 65%
}

.address-bar .icon {
    align-items: center;
    background: var(--gold);
    border: 5px solid #d2d4e3;
    border-radius: 50%;
    color: #fff;
    display: flex;
    height: 50px;
    justify-content: center;
    left: -14px;
    position: relative;
    top: -26px;
    width: 50px
}

.address-bar .content-box {
    position: relative;
    top: -18px
}

.address-bar .content-box span {
    color: var(--dark-blue);
    font-size: 18px;
    font-weight: 700
}

.popup-form {
    align-items: center;
    background-color: rgba(0, 0, 0, .5);
    display: none;
    height: 100%;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99
}

.popup-form .inner {
    background: var(--dark-blue);
    border-radius: 12px;
    padding: 30px;
    width: 50%
}

#closeFormBtn {
    color: #fff;
    cursor: pointer;
    font-size: 20px;
    margin-bottom: 20px;
    text-align: end
}

.Scroll-to-top {
    align-items: center;
    background-color: var(--dark-blue);
    border-radius: 8px;
    bottom: 20px;
    color: #fff;
    cursor: pointer;
    display: none;
    font-size: 18px;
    height: 40px;
    justify-content: center;
    position: fixed;
    right: 10px;
    width: 40px
}

.kids_img {
    border-radius: 0;
    border-bottom-right-radius: 50px;
    border-top-left-radius: 200px;
    border-top-right-radius: 200px;
    position: relative
}

.creative-graphic .creative-graphic-wrappper .img-box {
    text-align: right
}

.creative-graphic .creative-graphic-wrappper .img-box img {
    animation: iconrotate 90s linear infinite
}

@keyframes iconrotate {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(-1000deg)
    }
}

.wc-choose-us-wrap .card-body.img-block {
    align-items: center;
    background: unset;
    border-radius: 50%;
    box-shadow: unset;
    display: flex;
    justify-content: center;
    padding: 10px;
    position: relative;
    top: 100px
}

.wc-choose-us-wrap .card-body.img-block img {
    border: 8px solid #fff;
    border-radius: 50%
}

.mobile-development-services .service-details-block {
    align-items: center;
    border-top: 1px solid #52525626;
    display: grid;
    gap: 60px;
    grid-template-columns: 75px 1fr;
    grid-template-rows: auto;
    justify-content: flex-start;
    padding-bottom: 45px;
    padding-top: 45px
}

.mobile-development-services .service-details-block .service-content-block h3 {
    color: var(--dark-blue);
    font-size: 22px;
    margin-bottom: 12px
}

.mobile-development-services .service-one-grid {
    grid-column-gap: 45px;
    grid-row-gap: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    position: relative;
    width: 100%
}

.mobile-development-services .service-grid-wrapper {
    margin-top: 80px
}

.mobile-development-services .service-block-line {
    background-color: #52525626;
    height: 700px;
    left: 7.5%;
    position: absolute;
    top: -46px;
    width: 1px
}

.mobile-development-services .service-block-line.two {
    left: 59%
}

.software-services .why-us-wrap {
    overflow: hidden;
    position: relative
}

.software-services .scroll-dev {
    height: 500px;
    overflow: hidden
}

.software-services .scroll-content {
    animation: marquee-up 15s linear infinite;
    display: flex;
    flex-direction: column
}

@keyframes marquee-up {
    0% {
        transform: translateY(0)
    }
    to {
        transform: translateY(-50%)
    }
}

.software-services .scroll-dev .service-card {
    background: var(--dark-blue);
    border-radius: 20px;
    padding: 22px;
    position: relative
}

.software-services .scroll-dev .service-card:not(:last-child) {
    margin-bottom: 20px
}

.software-services .service-card .content-area p {
    color: #fff
}

.software-services .service-card .content-area .title {
    color: #fff;
    font-size: 22px
}

.software-services .scroll-dev .service-card .spacer {
    border: 1px solid var(--gold);
    height: 2px;
    margin-block: 12px
}

.software-services .service-overly {
    background-image: linear-gradient(5deg, #fff, #ffffff4f);
    height: 5.75rem;
    width: 30.5rem
}

.software-services .service-overly-2 {
    bottom: 0;
    position: absolute;
    width: 100%
}

.software-services .software-services-wrapped {
    align-items: center
}

.creative-graphic .box-widget .content-area ul {
    margin-left: 20px
}

.creative-graphic .box-widget .content-area ul li {
    color: #fff;
    list-style: disc
}

.border-container-wrap .border-container {
    background: #fff;
    border: 1px solid #cecece;
    border-radius: 12px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .24);
    height: 100%;
    padding: 15px;
    transition: all .3s ease-in
}

.border-container-wrap .border-container:hover {
    cursor: pointer;
    transform: translateY(-10px)
}

.border-container-wrap .block-holder h3 {
    color: var(--dark-blue);
    display: block;
    font-size: 18px;
    font-weight: 700;
    margin-block: 8px
}

.border-container-wrap .block-holder p {
    font-size: 14px;
    font-weight: 400;
    margin: 0 0 5px
}

.creative-graphic .creative-graphic-wrappper .box-widget {
    background-color: var(--dark-blue);
    border-radius: 12px;
    box-shadow: 8px 8px #dcdcdc;
    margin-bottom: 20px;
    padding: 30px;
    position: sticky;
    top: 30px;
    width: 100%
}

.creative-graphic .creative-graphic-wrappper {
    align-items: flex-start
}

.creative-graphic .content-widget {
    position: sticky;
    top: 100px
}

.creative-graphic-wrappper .box-widget .icon {
    align-items: center;
    background-color: var(--gold);
    border-radius: 50%;
    display: flex;
    height: 50px;
    justify-content: center;
    width: 50px
}

.creative-graphic-wrappper .box-widget .icon span {
    color: #fff;
    font-size: 30px
}

.craft-solutions .craft-solutions-wrapper {
    align-items: flex-start
}

.craft-solutions .craft-solutions-wrapper .craft-image {
    position: sticky;
    top: 20px
}

.craft-solutions .craft-details {
    align-items: start;
    background-color: #fff;
    border: 1px solid #e2e1fb;
    border-radius: 20px;
    box-shadow: none;
    display: grid;
    gap: 36px;
    grid-template-columns: auto 1fr;
    justify-content: flex-start;
    padding: 40px;
    transition: all .3s
}

.craft-solutions .craft-details:hover {
    box-shadow: 0 26px 70px #00000014;
    cursor: pointer
}

.craft-solutions .craft-details-text-wrap {
    display: flex;
    flex-direction: column
}

.craft-solutions .craft-details-text-wrap .title {
    color: var(--dark-blue);
    font-size: 25px;
    margin-bottom: 10px
}

.craft-solutions .craft-details-text-wrap p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    margin-bottom: 20px;
    max-height: 5em;
    text-overflow: ellipsis
}

.craft-solutions .section-title {
    margin-bottom: 70px
}

.Development-Process .img-widget img {
    background-color: #fff;
    border: 1px solid #cecece;
    border-radius: 50%;
    box-shadow: 2px 9px 12px #dcdcdc;
    height: 180px;
    width: 180px
}

.Development-Process .process-wraper {
    gap: 40px;
    margin-top: 60px
}

.Development-Process .process-wraper .process-wraper-child:nth-child(2n) {
    flex-direction: row-reverse
}

.Development-Process .process-wraper .process-text-area .process-title {
    color: var(--dark-blue);
    font-size: 22px;
    margin-bottom: 10px
}

.techs-tab {
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0
}

.techs-tab li span {
    border: 1px solid var(--dark-blue);
    display: inline-block;
    line-height: 1.15;
    padding: 1em 2em
}

.techs-tab .active-tab {
    background-color: #ffb606;
    color: #fff
}

.techs-tab li span:hover {
    cursor: pointer
}

.tech-box {
    display: none
}

.tech-box.active {
    -moz-column-gap: 20px;
    column-gap: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px
}

.tech-box .tool-box {
    border: 1px solid #dedede;
    border-radius: 8px;
    box-shadow: 0 7px 30px -10px hsla(0, 0%, 76%, .5);
    display: block;
    padding: 20px 10px;
    text-align: center;
    width: 21%
}

.tech-box .tool-box span {
    color: var(--dark-blue);
    font-size: 18px;
    font-weight: 600
}

.tools-tech-wrapper {
    flex-direction: column;
    justify-content: center
}

@media (max-width:992px) {
    .top_bar,
    .webcooks_header .navbar-menu .navbar-nav {
        display: none
    }
    .menu {
        display: block
    }
    .grid-container .grid-box {
        flex: 0 0 45%
    }
}

@media (max-width:768px) {
    .journeyContent {
        align-items: center;
        flex-direction: column
    }
    .wc_about-area .section-title .text_hidden {
        display: block;
        max-height: 100%
    }
    .webcooks_main {
        top: 0
    }
    .webcooks_header .list_items a {
        line-height: unset
    }
    .section_block {
        margin-top: 50px;
        padding-block: 0
    }
    .section_inline {
        padding: 10px 0 50px
    }
    .section-title .title {
        font-size: 28px
    }
    .wc_training-section {
        padding: 40px 0
    }
    .wc_training-section .training-header-row {
        margin-bottom: 40px
    }
    .wc_training-section .section-title {
        margin-bottom: 30px;
        text-align: center
    }
    .wc_training-section .section-title .title {
        font-size: 26px;
        letter-spacing: 0;
        line-height: 1.4;
        margin-bottom: 15px
    }
    .wc_training-section .title-line {
        height: 4px;
        margin: 0 auto;
        width: 100px
    }
    .wc_training-section .training-description {
        color: #000;
        padding-left: 0;
        text-align: center
    }
    .wc_training-section .training-description p {
        color: #000 !important;
        font-size: 15px;
        line-height: 1.6
    }
    .grid_courses .course-item {
        border-radius: 16px;
        height: auto;
        min-height: 320px;
        padding: 30px 25px
    }
    .grid_courses .course-item .course_text-area .sub_title {
        font-size: 20px
    }
    .grid_courses .course-item .course_text-area .sub_title:after {
        height: 3px;
        width: 80px
    }
    .grid_courses .course-item .course_text-area p {
        display: block;
        flex-grow: 0;
        font-size: 14px;
        -webkit-line-clamp: none;
        line-height: 1.6;
        overflow: visible;
        -webkit-box-orient: initial;
        text-overflow: clip
    }
    .grid_courses .course-item .course_text-area .roundarrow {
        height: 45px;
        right: 25px;
        top: 25px;
        width: 45px
    }
    .grid_courses .course-item .course_text-area .roundarrow svg {
        height: 18px;
        width: 18px
    }
    .hero-banner:before {
        background-image: none;
        background: linear-gradient(90deg, #dbdee6, #eef0df, #e9f0e2)
    }
    .decorative-stars {
        display: none
    }
    .decorative-stars.mobile-only {
        display: block;
        left: -37px;
        margin-bottom: 15px;
        opacity: .5;
        position: relative
    }
    .decorative-stars .star-icon {
        animation: twinkle 2s ease-in-out infinite;
        font-size: 30px;
        position: absolute
    }
    .decorative-stars .star-1 {
        animation-delay: 0s;
        left: 20px;
        top: -10px
    }
    .decorative-stars .star-2 {
        animation-delay: .5s;
        font-size: 20px;
        left: 55px;
        top: 15px
    }
    @keyframes twinkle {
        0%,
        to {
            opacity: 1;
            transform: scale(1)
        }
        50% {
            opacity: .6;
            transform: scale(.9)
        }
    }
    .certification-badge {
        display: none
    }
    .certification-badge.mobile-only {
        background: linear-gradient(90deg, #ffb800, orange);
        border-radius: 50px;
        box-shadow: 0 4px 12px rgba(255, 184, 0, .3);
        color: #1c136e;
        display: table;
        font-size: 13px;
        font-weight: 600;
        margin: 0 auto 20px;
        padding: 8px 20px
    }
    .hero-banner .banner-content .head-title {
        font-size: 22px;
        line-height: 1.4;
        margin-bottom: 15px
    }
    .hero-banner .banner-content p {
        display: none
    }
    .hero-banner .rating_box {
        flex-direction: inherit;
        gap: 8px;
        margin-bottom: 10px
    }
    .hero-banner .rating_box .stars img {
        height: 22px;
        width: 22px
    }
    .hero-banner .rating_box .text {
        font-size: 15px;
        gap: 6px
    }
    .hero-banner .rating_box .text a {
        color: #1c136e;
        font-size: 1.17em;
        font-weight: 600
    }
    .orange {
        color: #ffa600
    }
    .hero-banner .book-now-btn {
        background: linear-gradient(90deg, #ffb800, orange);
        box-shadow: 0 6px 20px rgba(255, 184, 0, .4);
        color: #1c136e;
        font-size: 16px;
        font-weight: 700
    }
    .hero-banner .book-now-btn i {
        font-size: 16px
    }
    .hero-banner .book-demo-btn {
        display: none
    }
    .mobile-team-grid {
        align-items: center;
        display: flex;
        justify-content: center;
        margin: 5px auto 20px;
        max-width: 400px;
        width: 100%
    }
    .mobile-team-grid img {
        display: block;
        height: auto;
        -o-object-fit: contain;
        object-fit: contain;
        width: 100%
    }
    .info-details .feature-thumbnail {
        overflow: hidden
    }
    .wc-industry-courses .wc-courses-wrapper .card_body .card-container {
        border-radius: 12px;
        margin-bottom: 20px;
        padding: 41px 5px 11px !important
    }
    .wc-courses-wrapper .card_body .card-container .faq-header .sub_title {
        font-size: 16px;
        line-height: 1.5;
        max-width: 261px
    }
    .faq-content p {
        padding: 0 10px !important
    }
    .wc-industry-courses .wc-courses-wrapper .card_body {
        padding: 0;
        width: 95%
    }
    .wc-courses-wrapper .card_body .card-container .faq-header {
        cursor: pointer;
        display: flex;
        font-size: 15px
    }
    .wc-courses-wrapper .card_body .card-container .faq-header h5 {
        cursor: pointer;
        font-size: 13px;
        text-align: center
    }
    .wc_choose-us {
        padding: 80px 0
    }
    .wc_choose-us .wc-choose-us-wrap {
        flex-wrap: wrap;
        margin-top: 40px;
        row-gap: 50px
    }
    .wc_choose-us .wc-choose-us-wrap.why-choose-grid .card-body:last-child,
    .wc_choose-us .wc-choose-us-wrap.why-choose-grid .card-body:nth-child(4) {
        transform: translate(0)
    }
    .wc-choose-us-wrap .card-body:nth-child(2n) {
        margin-top: 40px;
        transform: translate(0)
    }
    .wc_choose-us .wc-choose-us-wrap .card-body {
        background-color: var(--white);
        border-radius: 30px 30px 30px 0;
        box-shadow: 0 20px 40px 0 rgba(42, 11, 88, .1);
        margin-top: 40px;
        max-height: 100%;
        padding: 30px;
        position: relative
    }
    .wc-choose-us-wrap .card-body .number-item {
        bottom: unset;
        top: 0;
        transform: translate(-50%, -50%)
    }
    .wc_training-section .hero-banner .banner-content .head-title {
        font-size: 25px
    }
    .hero-banner,
    .wc-faq-area .faq-container {
        height: auto;
        min-height: auto
    }
    .hero-banner {
        padding-block: 10px
    }
    .wc_about-area {
        padding-block: 20px !important
    }
    .faq-gallery-wrapper {
        justify-content: center
    }
    .wc_about-area .about-img img {
        border-radius: unset;
        margin-bottom: 20px
    }
    .form-container {
        width: 90%
    }
    .popup-form .inner {
        width: 95%
    }
    .webservices-hero {
        background: linear-gradient(90deg, #dbdee6, #eef0df, #e9f0e2);
        padding-bottom: 80px
    }
    .webservices-hero .title {
        color: var(--dark-blue);
        font-size: 40px
    }
    .webservices-hero .title span {
        color: var(--gold)
    }
    .webservices-hero p {
        margin-block: 20px
    }
    .wb_cta .content_box h2 {
        font-size: 25px;
        line-height: 1.2
    }
    .who-can-take .single-events-wrapper {
        flex-wrap: wrap
    }
    .section-title .title .modules-wraper,
    .webcooks-marketing .section-title .title {
        max-width: 100%
    }
    .webcooks-marketing .wrapper .highlight-box {
        grid-template-columns: 1fr
    }
    .why-choose-area .why-choose-wrap {
        flex-wrap: wrap;
        row-gap: 20px
    }
    .why-choose-area .why-choose-box:not(:last-child) {
        margin-right: unset
    }
    .perks-digital .img-gallery .support-box .inner:after {
        right: 9px;
        top: -8px
    }
    .perks-digital .img-gallery .support-box {
        margin-top: 0
    }
    .perks-digital .img-gallery .support-box .inner {
        left: 0;
        padding: 12px 26px
    }
    .faq-gallery-wrapper {
        height: 100%
    }
    .students-work .students-work_grid {
        flex-wrap: wrap;
        gap: 25px
    }
    .learning_web .content_box p {
        max-width: 100%
    }
    .about-our-courses .feature-thumbnail {
        left: unset
    }
    .python-tools .img-gallery {
        grid-template-columns: repeat(1, 1fr)
    }
    .cta-section-area .cta-images .animate-lists.right-list {
        bottom: 0;
        right: 39px
    }
    .grid-form {
        backdrop-filter: unset;
        background: var(--dark-blue);
        box-shadow: unset;
        display: block;
        width: 98%
    }
    .webservices-hero .img-grid .wc-btn {
        display: block;
        margin: 20px auto 0
    }
    .grid-form textarea {
        height: 90px
    }
    .webservices-hero .content-left .title,
    .webservices-hero .content-left p {
        color: var(--dark-blue)
    }
    .services-hero {
        padding: 90px 0
    }
    .graphic-projects-grid {
        grid-template-columns: 1fr 1fr
    }
    .our-services .title-line,
    .why-us-wrapper .section-title .title-line {
        margin: 0 auto
    }
    .webservices-hero .content-left .title {
        font-size: 24px;
        line-height: 30px
    }
    .hero-section-career h1 {
        font-size: 40px;
        font-weight: 600
    }
    .hero-banner .content_box {
        padding-inline: 20px
    }
    .address-bar {
        width: 100%
    }
    .services-grid .services-tab .tab-lists {
        position: relative
    }
    .webcooks_header .navbar-menu {
        justify-content: space-between
    }
    .menu {
        margin-right: 10px
    }
    .tech-box .tool-box {
        width: 40%
    }
    .craft-solutions .craft-solutions-wrapper .craft-image {
        position: static
    }
    .business-upscaling .bar-center,
    .business-upscaling .timeline .timeline-wrapper .icon,
    .impact-section .img-block .angels-side {
        display: none
    }
    .cta-section-area .cta-images .round-anime {
        animation: none
    }
    .impact-section .card-boxarea .sub-title {
        display: block;
        margin: 0 auto;
        position: static
    }
    .impact-section .card-boxarea .content-area {
        margin: unset
    }
    .impact-section .card-boxarea.box-2 {
        display: flex;
        flex-direction: column-reverse
    }
    .impact-section .card-boxarea.box-2 .sub-title {
        margin-bottom: 20px
    }
    .cta-section-area .inner-content h2 {
        font-size: 34px
    }
    .cta-section-area .cta-images .animate-lists {
        left: 60px
    }
    .section-title .pre-title.impact-section-title {
        display: block;
        letter-spacing: unset;
        padding: 0 8px
    }
    .section-title .pre-title.impact-section-title>svg {
        color: var(--gold);
        height: 49px;
        left: 0;
        position: absolute;
        top: -5px;
        width: 100%;
        z-index: -1
    }
    .cta-section-area .cta-images .animate-lists.right-list {
        left: unset;
        right: 0
    }
    .hero-banner .banner-content p,
    .journeyContentCard,
    .wc-blogs .blog-card-wrapper .blog-cards {
        width: 100%
    }
    .timeline .timeline-wrapper,
    .timeline .timeline-wrapper:nth-child(odd),
    .wc-industry-courses .services-wrapper {
        flex-direction: column-reverse
    }
    .core-values-wrapper,
    .info-details,
    .our-services,
    .projects-titles,
    .web-services .wc_choose-us,
    .why-us-wrapper {
        text-align: center
    }
    .services-hero .hero-header h1,
    .why-us .section-title .title {
        font-size: 30px
    }
    #Enquery-form,
    .about-our-courses.wc-faq-area .faq-container .shape,
    .banner-gallery,
    .cta-section-area .cta-images .img-box,
    .form-section,
    .hero-banner .banner-gallery .thumbnail.circle,
    .hero-banner .banner-gallery .thumbnail.thumbnail img,
    .hero-banner .banner-gallery .thumbnail.thumbnail-1 img,
    .hero-banner .content_box:after,
    .hero-banner .content_box:before,
    .hide-faq,
    .pulse,
    .service-icon-wrapper,
    .services-hero .author-box,
    .services-hero .images-grid .header-images.img-element-2,
    .services-hero .images-grid .header-images.img-element-3,
    .services-hero .images-grid .text-grid,
    .services-hero .img-element-1,
    .timeline .timeline-wrapper .icon:after,
    .timeline .timeline-wrapper .icon:before,
    .wc_about-area .about-img,
    .wc_about-area .about-img .courses_box,
    .wc_about-area .about-img:after,
    .wc_choose-us .wc-choose-us-wrap .card-body:after,
    .web-services .desk-img,
    .web-services .faq-gallery-wrapper,
    .who-can-take .img-grid .sub-img img,
    .who-can-take .img-grid .sub-img:after {
        display: none
    }
    .hide-on-mobile,
    .our-projects .projects-images:after {
        display: none !important
    }
    .footer-bottom-links-1 .wc-btn.grid-btn,
    .hero-banner .mb-banner,
    .web-services .mobile-img {
        display: block
    }
    .mobile-development-services .service-one-grid {
        grid-template-columns: 1fr
    }
    .creative-graphic .content-widget {
        position: static;
        top: 0
    }
    .mobile-development-services .service-block-line,
    .mobile-development-services .service-block-line.two {
        display: none
    }
    .Brand-Strategy .card-body:nth-child(2n) {
        top: 0
    }
    .Website-Development.creative-graphic .creative-graphic-wrappper {
        flex-direction: column-reverse
    }
    .border-section {
        border: 2px solid #fff;
        box-shadow: -5px 5px #fff;
        margin-left: 0;
        margin-right: 0;
        padding: 0
    }
    .row {
        display: block
    }
    .footer-bottom-links-1 .row,
    .row {
        flex-wrap: wrap;
        margin: -15px;
        margin-left: 0 !important;
        max-width: 100% !important
    }
    .footer-bottom-links-1 .row {
        display: flex !important
    }
    .creative-graphic .creative-graphic-wrappper .img-box {
        display: none;
        text-align: right
    }
    .rating_boxs {
        color: #1c136e;
        display: inline !important;
        margin-left: 1px !important;
        padding: 20px
    }
    .container-one {
        margin: -50px auto 0;
        max-width: 1260px;
        padding: 60px 30px;
        width: 100%
    }
    .for_h1_hide {
        display: inline !important
    }
    .for_h1,
    .for_h1_hide {
        color: #1c136e;
        font-size: 13px !important
    }
    .for_h1 {
        display: none
    }
    .section-title .title {
        font-size: 22px !important
    }
    .section-title p {
        font-size: 15px;
        margin-top: 10px;
        text-align: justify
    }
    p {
        font-size: 13px !important
    }
    .img_res img {
        height: 276px !important;
        margin-top: 0 !important;
        width: 276px !important
    }
    .yellow-line {
        width: 50%
    }
    .col {
        padding: 0
    }
    .display-box img {
        height: auto !important;
        padding-top: 30px !important;
        width: 70px !important
    }
    .container {
        margin-left: -5px
    }
    .display-box {
        display: inline !important;
        margin-top: 50px !important;
        text-align: center
    }
    .texts {
        margin-left: 0 !important
    }
    .res_padding,
    .res_padding_three,
    .res_padding_two {
        padding-right: 0 !important
    }
    .baseContainer {
        background: url(../images/doodles.svg);
        display: flex;
        flex-direction: column;
        height: 100vh;
        padding: 4vmax;
        padding-block: 0;
        width: 100%
    }
    .section_inline_base {
        padding: 40px 0
    }
    .contentCol {
        border: 2px solid var(--dark-blue);
        cursor: pointer;
        left: 50%;
        margin-top: 25px;
        padding: 11px 10px 14px;
        position: relative !important;
        top: 0;
        transform: translate(-50%, -50%);
        transition: max-height .5s ease;
        width: 100%
    }
    .colFourFirst,
    .colFourSecond,
    .colUnder {
        display: none !important
    }
    .col-box,
    .colUnder,
    .rowFiveContainer,
    .rowFourContainer,
    .rowOneContainer,
    .rowThreeContainer,
    .rowTwoContainer {
        border: none;
        display: block !important
    }
    .colUnder,
    .dot {
        display: none
    }
    .section_inline_webdesign {
        padding: 30px 0 40px
    }
    .colOneFirst img {
        bottom: 0;
        display: none;
        left: -2.5%;
        position: absolute
    }
    .colSixSecond img {
        bottom: 100%;
        display: none;
        position: absolute;
        right: -6%;
        width: 8%
    }
    .banners-section {
        background-image: url(../images/kids-big-banner.webp);
        background-position: top;
        background-position-y: -40px;
        background-repeat: no-repeat;
        background-size: cover;
        display: none;
        height: 100vh;
        width: 100%
    }
    .banners-section-res {
        background-image: url(../images/cloud-resp.webp) !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        display: block !important;
        height: 41vh;
        margin-bottom: 15px;
        width: 100% !important
    }
    .one-card-color {
        background-color: #cf87da
    }
    .one-card-color,
    .two-card-color {
        border: 2px solid #190b72;
        border-radius: 40px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-bottom: 80px;
        margin-left: 0 !important;
        padding: 30px
    }
    .two-card-color {
        background-color: #7a58ed
    }
    .img-box {
        margin-bottom: 20px;
        margin-top: 20px
    }
    .experts .team-author {
        border: 1px solid #e2dfeb;
        border-radius: 0 10px 10px 10px;
        height: 100%;
        margin-top: 35px;
        overflow: hidden;
        padding: 20px;
        position: relative
    }
    .why-us .card-widget .inner {
        margin-bottom: 20px
    }
    .section-title .pre-title {
        margin-top: 30px
    }
    .mobile-development-services .service-details-block {
        display: inline;
        text-align: center
    }
    .service-icon-block {
        height: 80px;
        margin-bottom: 20px;
        max-width: 100%
    }
    .course-list {
        line-height: 30px !important;
        list-style-type: disc;
        margin: 0 25px 20px 26px
    }
    .journeyContentCard .inner {
        background-color: #ffffff22;
        border: 1px solid #ffffff44;
        border-radius: 10px;
        color: var(--white);
        height: 100%;
        margin-top: 20px;
        padding: 20px
    }
    .journeyContainer {
        align-items: center;
        background: linear-gradient(270deg, #1c136c, #03173d);
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 50px 0;
        width: 100%
    }
    .journeyHeading {
        color: #fff;
        font-size: 24px;
        margin-bottom: 50px;
        text-align: center
    }
    .multi-testmonial-img {
        background-image: url(../images/multi-testmonial2.jpg);
        display: none
    }
    .multi-testmonial-img,
    .multi-testmonial-img-res {
        background-color: #f0f0f0;
        background-repeat: no-repeat;
        background-size: cover;
        height: 78vh;
        margin: 20px 0 0;
        width: 100%
    }
    .multi-testmonial-img-res {
        background-image: url(../images/multi-test-mobile.jpg);
        display: block !important
    }
    .service-icon {
        height: 70px
    }
    .syllabus-button {
        display: flex;
        margin-top: 20px
    }
    .syllabus-button a {
        margin-left: 3px
    }
    .wc_choose-us {
        padding-block-start: 50px
    }
    .why-choose-area .why-choose-box {
        margin-top: 20px;
        padding: 20px 15px
    }
    .banner-tools {
        background-image: url(../images/kids-res.png) !important;
        background-position-y: -21px
    }
    .res-img {
        display: block !important
    }
    .faq-imgs {
        display: none
    }
    .section-title {
        margin-bottom: 1px;
        margin-top: 30px
    }
    .wc-faq-content {
        height: 100%;
        padding-bottom: 40px
    }
    .kids_img {
        border-radius: 0;
        border-bottom-right-radius: 50px;
        border-top-left-radius: 200px;
        border-top-right-radius: 200px;
        position: relative
    }
}

@media (max-width:560px) {
    .grid-container .grid-box {
        flex: 0 0 100%;
        padding: 15px
    }
}

@keyframes radiusChange {
    0% {
        border-radius: 0
    }
    40% {
        border-radius: 50px 0 100px 0
    }
    80% {
        border-radius: 0 50px 0 100px
    }
    to {
        border-radius: 0
    }
}

@keyframes radiusChange2 {
    0% {
        border-radius: 0
    }
    25% {
        border-radius: 50px 0
    }
    50% {
        border-radius: 0
    }
    75% {
        border-radius: 0 50px
    }
    to {
        border-radius: 50px 0
    }
}

@keyframes move-var {
    0% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(-20px)
    }
    to {
        transform: translateY(0)
    }
}

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

@keyframes waves {
    0% {
        transform: translateX(0)
    }
    to {
        transform: translateX(-50%)
    }
}

@keyframes ctamoveobject {
    50% {
        right: 30px
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(1turn)
    }
}

@keyframes round-anime {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(-1000deg)
    }
}

@keyframes scroll {
    0% {
        transform: translateY(0)
    }
    to {
        transform: translateY(30px)
    }
}

@keyframes fadeIn {
    to {
        opacity: 1
    }
}

@keyframes jelly {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(1turn)
    }
}

@keyframes move-bg {
    0% {
        transform: rotate(-4deg)
    }
    50% {
        transform: rotate(4deg)
    }
    to {
        transform: rotate(-4deg)
    }
}

@keyframes pulse {
    0% {
        height: 200px;
        opacity: 1;
        width: 200px
    }
    50% {
        opacity: 1
    }
    to {
        height: 300px;
        opacity: 0;
        width: 300px
    }
}

@media (min-width:1024px) {
    .footer-bottom-links-1 {
        display: none !important
    }
}

.marquee {
    background: #feb505;
    font-family: arial;
    font-weight: 400;
    letter-spacing: 1px;
    overflow: hidden;
    padding: 10px;
    position: relative;
    white-space: nowrap;
    width: 100%
}

.marquee-content {
    animation: marquee 25s linear infinite;
    display: inline-block;
    padding-left: 100%
}

.marquee-content:hover {
    animation-play-state: paused;
    cursor: pointer
}

@keyframes marquee {
    0% {
        transform: translateX(0)
    }
    to {
        transform: translateX(-100%)
    }
}

.banner-tools {
    background-image: url(../images/Kids-corner-banner.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 40em
}

.for_h1 {
    color: #1c136e;
    font-size: 25px
}

.rating_boxs {
    color: #1c136e;
    display: flex;
    margin-left: 31em;
    margin-top: -50px;
    padding: 20px
}

.slider-bottom-yellow {
    background-image: url(../images/slider-section-yellow-bottom.png);
    background-size: cover
}

.display-box {
    display: flex;
    padding-top: 30px
}

.display-box img {
    height: 70px;
    width: 260px
}

.texts {
    font-size: 14px;
    line-height: 18px;
    margin-left: 20px;
    text-align: justify
}

.banners-section {
    background-image: url(../images/kids-big-banner.webp);
    background-position: top;
    background-position-y: -40px;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    width: 100%
}

.banners-section-res {
    background-image: url(../images/cloud-resp.webp) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    display: none;
    width: 100% !important
}

.multi-testmonial-img {
    background-image: url(../images/multi-testmonial2.jpg)
}

.multi-testmonial-img,
.multi-testmonial-img-res {
    background-color: #f0f0f0;
    background-repeat: no-repeat;
    background-size: contain;
    height: 78vh;
    margin: 20px 0 0;
    width: 100%
}

.multi-testmonial-img-res {
    background-image: url(../images/multi-test-mobile.jpg);
    display: none
}

.for_h1_hide {
    display: none
}

.res_padding {
    padding-right: 50px
}

.res_padding_two {
    padding-right: 35px
}

.one-card-color {
    background-color: #cf87da
}

.one-card-color,
.two-card-color {
    border: 2px solid #190b72;
    border-radius: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 20px;
    padding: 30px
}

.two-card-color {
    background-color: #7a58ed
}

.one-card-color i,
.two-card-color i {
    color: #fff;
    font-size: 50px;
    padding-bottom: 20px
}

.one-card-color img,
.two-card-color img {
    height: 150px;
    margin-top: -100px;
    width: 150px
}

.card-title {
    color: #fff;
    padding-bottom: 20px;
    padding-top: 20px
}

.card-bodys p {
    color: #fff
}

.mt-5s {
    margin-top: 120px
}

.margin-cont {
    margin-top: 85px
}

.res-img {
    display: none
}

@media (min-width:1400px) and (max-width:1900px) {
    .headerFooter .headerFooterContent img {
        bottom: 0 !important
    }
}

.web-mrg30 {
    margin-top: 30px !important
}

@media (min-width:280px) and (max-width:767px) {
    .hero-banner .banner-content p {
        margin-bottom: 10px;
        max-width: 100%;
        padding: 0
    }
    .hero-banner .banner-content {
        padding-bottom: 0
    }
    .hero-banner .banner-content .wc-btn {
        width: 50%
    }
    .wc-faq-content {
        margin-top: 30px !important;
        padding-bottom: 0
    }
    .webcooks-marketing .wrapper .highlight-box .img {
        margin: auto
    }
    .webcooks-marketing .wrapper .highlight-box {
        text-align: center !important
    }
    .swiper-horizontal {
        margin-bottom: 30px !important;
        margin-top: 30px
    }
    .tabAnimBaseContainer {
        display: none
    }
    .wc-faq-area .faq-container .faq-header {
        font-size: 15px
    }
    .border-stripe {
        margin: 40px 0;
        padding-bottom: 59px
    }
    .border-stripe p {
        text-align: center
    }
    .web-mrg30 {
        margin-top: 30px !important
    }
}

@media (max-width:767px) {
    .baseContainer {
        display: none !important
    }
    .mb50 {
        margin-bottom: 50px
    }
}

@media (min-width:766px) {
    .desktop-only {
        display: none !important
    }
    .desktop-only .card {
        border: none;
        border-radius: 15px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, .1);
        transition: transform .3s ease, box-shadow .3s ease
    }
    .desktop-only .card:hover {
        box-shadow: 0 12px 25px rgba(0, 0, 0, .2);
        transform: translateY(-10px)
    }
    .desktop-only .card-title {
        color: #005477;
        font-size: 1.25rem;
        font-weight: 600
    }
    .desktop-only .card-text {
        color: #333;
        font-size: .95rem
    }
    .desktop-only .card-body {
        padding: 1.2rem
    }
}

@media (max-width:1024px) {
    .desktop-only {
        display: none !important
    }
    .wc_training-section .training-header-row {
        margin-bottom: 50px
    }
    .wc_training-section .section-title .title {
        font-size: 36px;
        line-height: 1.35
    }
    .wc_training-section .title-line {
        width: 120px
    }
    .wc_training-section .training-description {
        padding-left: 30px
    }
    .wc_training-section .training-description p {
        font-size: 15px;
        line-height: 1.7
    }
    .grid_courses .course-item {
        height: auto;
        min-height: 340px;
        padding: 35px 30px
    }
    .grid_courses .course-item .course_text-area .sub_title {
        font-size: 24px
    }
    .grid_courses .course-item .course_text-area .sub_title:after {
        width: 100px
    }
    .grid_courses .course-item .course_text-area p {
        display: block;
        font-size: 15px;
        -webkit-line-clamp: none;
        overflow: visible;
        -webkit-box-orient: initial;
        text-overflow: clip
    }
    .grid_courses .course-item .course_text-area .roundarrow {
        height: 48px;
        width: 48px
    }
    .grid_courses .course-item .course_text-area .roundarrow svg {
        height: 19px;
        width: 19px
    }
}

.card-text li {
    line-height: 1.5;
    margin-bottom: .5rem
}

.desktop-only .card {
    border: none;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .1);
    transition: transform .3s ease, box-shadow .3s ease
}

.desktop-only .card:hover {
    box-shadow: 0 12px 25px rgba(0, 0, 0, .2);
    transform: translateY(-10px)
}

.desktop-only .card-title {
    color: #005477;
    font-size: 1.1rem;
    font-weight: 600
}

.desktop-only .card-text {
    color: #333;
    font-size: .95rem
}

.desktop-only .card-body {
    padding: 1.2rem
}

.newmobile {
    margin-bottom: 55px;
    padding: 10px 20px
}

@media (max-width:768px) {
    .personViewWrapper {
        display: none
    }
}

.quiz-card-section {
    background: linear-gradient(135deg, #f8fbff, #eef3ff);
    padding: 32px 0 40px
}

.quiz-card-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))
}

@media (min-width:992px) {
    .quiz-card-grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

.quiz-card {
    background: #fff;
    border: 1px solid #e5edff;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 38, 94, .08);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
    position: relative;
    transition: transform .25s ease, box-shadow .25s ease
}

.quiz-card:hover {
    box-shadow: 0 16px 40px rgba(0, 38, 94, .12);
    transform: translateY(-6px)
}

.quiz-chip {
    align-items: center;
    background: #eef3ff;
    border-radius: 999px;
    color: #06f;
    display: inline-flex;
    font-size: 12px;
    font-weight: 600;
    gap: 8px;
    letter-spacing: .5px;
    padding: 6px 10px;
    text-transform: uppercase;
    width: -moz-fit-content;
    width: fit-content
}

.quiz-title {
    color: #0b1b3f;
    font-size: 18px;
    font-weight: 700;
    margin: 0
}

.quiz-copy {
    color: #4c5772;
    font-size: 14px;
    line-height: 1.6;
    margin: 0
}

.quiz-cta {
    align-items: center;
    background: linear-gradient(90deg, #24166b, #0844a3);
    border-radius: 12px;
    color: #fff;
    display: inline-flex;
    font-weight: 600;
    gap: 8px;
    justify-content: center;
    margin-top: auto;
    padding: 12px 14px;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease
}

.quiz-cta:hover {
    box-shadow: 0 10px 24px rgba(0, 102, 255, .35);
    transform: translateY(-2px)
}

.text-left {
    align-items: left !important;
    text-align: left !important
}

.features-wrapper .service-card .inner-new {
    background: #ebeff0;
    border-radius: 8px;
    height: 100%;
    padding: 40px 35px;
    position: relative;
    text-align: center;
    transition: .4s
}

.accordion {
    background: #f9fafb;
    border-radius: 5px
}

.accordion input {
    display: none
}

.accordion label {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 10px 10px 0 0;
    cursor: pointer;
    display: block;
    font-weight: 700;
    margin-bottom: 5px;
    margin-top: 0;
    padding: 10px 20px;
    position: relative;
    transition: all .3s ease
}

.accordion label:after {
    content: "▾";
    position: absolute;
    right: 20px;
    transition: transform .3s ease
}

.accordion .content {
    background: #fff;
    border-radius: 0 0 10px 10px;
    border-top: none;
    max-height: 0;
    overflow: hidden;
    padding: 0 20px;
    transition: max-height .4s ease
}

.accordion .content p {
    color: #333;
    margin: 0;
    padding: 15px 0
}

.accordion input:checked+label {
    background: #1c136e;
    border-color: #1c136e;
    color: #fff
}

.accordion input:checked+label:after {
    transform: rotate(180deg)
}

.accordion input:checked+label+.content {
    max-height: 150px;
    padding: 15px 20px
}

.author-box-my {
    background-color: var(--white);
    border-radius: 25px !important;
    box-shadow: -1px 3px 9px 1px var(--gold);
    height: 100%;
    padding: 30px;
    position: relative
}

.exp-color {
    background-color: #fff
}

.correct-p {
    padding: 15px 0 0 !important
}

.correct-p,
.correct-p2 {
    text-align: left !important
}

.correct-p2 {
    padding: 0 !important
}

.read-my {
    background: #ffb606;
    border: 2px solid #ffb606;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px !important;
    padding: 5px
}

.image-my {
    height: auto;
    max-width: 30%
}

.icon-new {
    height: 45px;
    width: 44px
}

@media (max-width:768px) {
    .features-wrapper .service-card .inner-new {
        margin-bottom: 15px;
        padding: 20px 35px
    }
}

.hero-mobile {
    display: none
}

.hero-desktop {
    display: block
}

@media (max-width:768px) {
    .hero-desktop {
        display: none
    }
    .hero-mobile {
        display: block
    }
}

.headerFooterContent.menu-image {
    height: 337px;
    position: relative;
    width: 302px
}

.headerFooterContent.menu-image img {
    height: 100%;
    inset: 0;
    -o-object-fit: contain;
    object-fit: contain;
    position: absolute;
    width: 100%
}

.animation-move-var {
    display: block;
    height: 180px;
    -o-object-fit: contain;
    object-fit: contain;
    width: 180px
}

@media (max-width:767px) {
    .animation-move-var,
    .hero-banner .banner-gallery .thumbnail.circle {
        animation: none !important
    }
    .wc-btn .wave {
        animation-duration: 3s
    }
    .swiper-button-next,
    .swiper-button-prev {
        animation: none !important;
        transition: none !important
    }
    .title-line {
        animation: none !important
    }
    .fa-bars,
    .fa-solid,
    i[class*=fa-] {
        animation: none !important;
        transition: none !important
    }
}

@media (prefers-reduced-motion:reduce) {
    *,
    :after,
    :before {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
    }
}