@import "https://fonts.googleapis.com/css2?family=Preahvihear&display=swap";
@import "https://fonts.googleapis.com/css2?family=Qwitcher+Grypen:wght@700&display=swap";
@import "https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap";

:root {
    --menu-color: #dfdfdf;
    --menu_red-color: #ef3100;
    --yellow-color: #faa300;
    --blue-color: #4286f6;
    --green-color: #09aa2f;
    --menu-font: Preahvihear, sans-serif;
    --title-font: "Qwitcher Grypen", cursive;
    --poppins: Poppins, sans-serif;
}

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

.preloader {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: #fff;
    z-index: 30000000000;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 1200px) {
    .preloader .preloader_inner {
        width: 5%;
    }
}

@media (max-width: 992px) {
    .preloader .preloader_inner {
        width: 20%;
    }
}

body {
    font-family: var(--menu-font);
    overflow-x: hidden;
}

section,
.slider_box {
    width: 100%;
}

.form-control:focus {
    box-shadow: none !important;
}

p {
    font-family: var(--menu-font);
}

.p-50 {
    padding: 50px 0;
}

.p-80 {
    padding: 80px 0;
}

.p-100 {
    padding: 100px 0 70px;
}

.pt-150 {
    padding-top: 150px;
}

.pb-180 {
    padding-bottom: 180px;
}

.pb-140 {
    padding-bottom: 140px;
}

.pt-100 {
    padding-top: 100px;
}

.pb-100 {
    padding-bottom: 100px;
}

.m-80 {
    margin: 80px 0;
}

.mt-15per {
    margin-top: 15% !important;
}

h1 {
    font-weight: 700;
}

.height-100 {
    height: 100%;
}

.color-red {
    color: var(--menu_red-color);
}

.fixed_quote {
    position: fixed;
    top: 40%;
    right: -53px;
    transform: rotate(-90deg);
    z-index: 100000;
    font-size: 20px;
    font-weight: 500;
    font-family: var(--poppins);
    padding: 8px 20px;
    background: #faa500;
    cursor: pointer;
    animation: jump 1.5s infinite ease-in-out;
    color: #000;
}

@keyframes jump {
    0% {
        transform: rotate(-90deg) translateY(-5px);
    }

    50% {
        transform: rotate(-90deg) translateY(0px);
    }

    100% {
        transform: rotate(-90deg) translateY(-5px);
    }
}

.floating_whatsapp {
    width: 50px;
    height: 50px;
    background-color: var(--green-color);
    position: fixed;
    bottom: 30px;
    right: 15px;
    border-radius: 50%;
    font-size: 35px;
    color: #000;
    line-height: 48px;
    text-align: center;
    z-index: 1000;
}

.floating_call {
    width: 50px;
    height: 50px;
    background-color: var(--yellow-color);
    position: fixed;
    bottom: 15%;
    right: 15px;
    border-radius: 50%;
    font-size: 25px;
    color: #000;
    line-height: 50px;
    text-align: center;
    z-index: 1000;
    border: 1px solid #fff;
    transform: rotate(90deg);
}

.floating_whatsapp i {
    transition: 0.6s;
}

.floating_whatsapp:hover i {
    transform: rotate(360deg);
}

.form_bg {
    transition: 0.6s;
    transform: scale(0);
    overflow: hidden;
    position: fixed;
}

.form_bg.nothome.visible {
    transform: scale(0);
}

.form_bg.visible,
.form_bg.nothome.visibleall {
    background: rgba(0, 0, 0, 0.2);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 300000000000;
    overflow: hidden;
    transform: scale(1);
    left: 0;
}

.popup_services {
    display: none;
    width: 70%;
    gap: 10px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

.popup_services .close_btn {
    position: absolute;
    right: 15px;
    top: 15px;
    z-index: 10;
    cursor: pointer;
}

.popup_services .connect {
    width: 35px;
    height: 10px;
    background: #c5bebe;
    position: absolute;
    left: 38.6%;
    border-radius: 20px;
}

.popup_services .connect.one {
    top: 12%;
}

.popup_services .connect.two {
    top: 24%;
}

.popup_services .connect.three {
    top: 36%;
}

.popup_services .connect.four {
    top: 48%;
}

.popup_services .connect.five {
    top: 60%;
}

.popup_services .connect.six {
    top: 72%;
}

.popup_services .connect.seven {
    top: 84%;
}

.popup_services .left_side {
    width: 70%;
    background: var(--yellow-color);
    border-radius: 20px;
}

.popup_services .left_side .form_content {
    padding: 40px;
    text-align: center;
    color: #000;
    font-family: var(--menu-font);
    margin-top: 25%;
}

.popup_services .left_side .form_content .question {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-top: 15px;
    justify-content: center;
}

.popup_services .left_side .form_content .question p a {
    color: #000;
}

.popup_services .left_side .form_content .question p {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    line-height: 42px;
    font-size: 20px;
    margin-bottom: 0;
}

.popup_services .left_side .form_content .question .form_whats {
    width: 40px;
    height: 40px;
    background: #fff;
    line-height: 40px;
    border-radius: 50%;
}

.popup_services .left_side .form_content .question .form_whats a {
    color: #09aa2f;
    font-size: 25px;
}

.popup_services .right_side {
    width: 100%;
    border-radius: 20px;
    padding: 30px 0 70px 40px;
    background-color: #fff;
}

.popup_services .right_side .next_btn {
    padding-right: 10%;
    margin: 20px 0;
    text-align: right;
}

.popup_services .right_side .next_btn button {
    padding: 3px 25px;
    outline: none;
    background-color: var(--yellow-color);
    border-radius: 3px;
    border: 1px solid #000;
    font-weight: 500;
    font-family: var(--poppins);
    transition: 0.5s;
}

.popup_services .right_side .next_btn button:hover {
    background-color: #fff;
}

.popup_services .right_side .service_contact .col-lg-6 {
    margin: 7px 0;
}

.popup_services .right_side .service_contact input[type="text"] {
    width: 16px;
    height: 16px;
}

.popup_services .right_side .service_contact h4 {
    text-align: center;
}

.form_bg.visible .popup_form {
    display: block;
}

.popup_services .query_form {
    position: absolute;
    top: 8%;
    z-index: 3;
    background: #fff;
    width: 55%;
    padding: 10px 30px 30px;
    border-radius: 5px;
    right: -60%;
    transition: 0.6s;
    font-family: var(--poppins);
    height: 88%;
}

.popup_services .query_form h2 {
    margin: 10px 0 20px;
}

.popup_services .query_form.come {
    right: 1%;
}

.popup_services .query_form .col-lg-6,
.popup_services .query_form .col-lg-12 {
    padding: 0 5px;
}

.service_column {
    overflow: hidden;
}

.popup_services .query_form .form-control {
    box-shadow: none !important;
    margin-bottom: 10px;
    background: transparent;
    border: 1px solid #b1b1b1;
}

.popup_services .query_form input,
.popup_services .query_form select {
    height: 40px;
}

.popup_services .query_form button {
    font-size: 14px;
}

.popup_services .query_form h5 {
    margin-bottom: 20px;
}

.popup_services .submit_btn {
    display: flex;
    justify-content: space-between;
    margin-top: 18px;
}

.menu_section {
    background-color: var(--menu-color);
    overflow: hidden;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    z-index: 1999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

.menu_section .container-fluid {
    padding: 0 20px;
}

.navbar-brand img {
    width: 100px;
}

.navbar .navbar-nav a {
    font-family: var(--menu-font);
    margin-right: 30px;
    color: #000;
}

.main_menu {
    position: relative;
}

.main_menu::before {
    position: absolute;
    content: "";
    bottom: -26px;
    left: 0;
    width: 100%;
    height: 0;
    background-color: var(--menu_red-color);
    transition: all 0.1s linear;
}

.active.nav-link::before {
    height: 18px;
}

.nav-link:hover::before {
    height: 18px;
}

.menu_button_box {
    display: flex;
    align-items: center;
    height: 100%;
    position: absolute;
    right: 0%;
    top: 0;
    width: 20% !important;
    justify-content: end;
}

.header_call a {
    border: 1px solid #000;
    border-radius: 20px;
    padding: 7px 25px;
    margin-right: 20px;
    font-family: var(--menu-font);
    color: #000;
    text-decoration: none;
}

.header_call a span img {
    width: 22px;
    margin-right: 10px;
    transition: 0.5s;
}

.header_call a:hover img {
    animation: trin 1.5s infinite linear;
}

@keyframes trin {
    from {
        transform: rotate3d(0, 0, 1, 0deg);
    }

    20%,
    32%,
    44%,
    56%,
    68% {
        transform: rotate3d(0, 0, 1, 0deg);
    }

    23%,
    35%,
    47%,
    59%,
    71% {
        transform: rotate3d(0, 0, 1, 15deg);
    }

    26%,
    38%,
    50%,
    62%,
    74% {
        transform: rotate3d(0, 0, 1, 0deg);
    }

    29%,
    41%,
    53%,
    65%,
    77% {
        transform: rotate3d(0, 0, 1, -15deg);
    }

    80% {
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

.header_contact a {
    background: url(../images/home/Button.png);
    background-size: 60% 100%;
    border-radius: 20px;
    padding: 7px 25px;
    margin-right: 20px;
    font-family: var(--menu-font);
    color: #000;
    text-decoration: none;
}

.header_contact a:hover,
.header_call a:hover {
    color: #000;
}

.words {
    padding: 20px 0;
    font-family: var(--poppins);
}

.slider_box .slick-track {
    height: 100vh !important;
}

.slider_section {
    background-image: url(../images/home/background.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

.slick-dots {
    position: absolute;
    bottom: 25px;
    display: flex;
    justify-content: center;
    gap: 15px;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}

.slider_box2 .slick-dots {
    bottom: -15px;
}

.slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    padding: 5px;
    position: relative;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}

.slick-dots li button:before {
    font-family: "slick";
    font-size: 35px;
    line-height: 10px;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    text-align: center;
    -webkit-font-smoothing: antialiased;
}

.slick-dots li.slick-active button:before {
    width: 13px;
    height: 13px;
    margin-top: -2px;
}

.slick-dots li:nth-child(1) button:before {
    background-color: var(--menu_red-color);
}

.slick-dots li:nth-child(2) button:before {
    background-color: var(--yellow-color);
}

.slick-dots li:nth-child(3) button:before {
    background-color: var(--blue-color);
}

.slider_content {
    position: relative;
}

.slider_content h2 {
    font-family: var(--menu-font);
    font-size: 56px;
    line-height: 60px;
}

.dif_font {
    font-family: var(--title-font) !important;
    font-size: 100px !important;
    color: var(--yellow-color);
}

.slider1 .pencil_img,
.slider2 .pencil_img {
    position: absolute;
    right: 16%;
    bottom: 6%;
}

.slider3 .pencil_img {
    position: absolute;
    right: 25%;
    bottom: 4%;
}

.slider_btn_box {
    display: flex;
    gap: 50px;
}

.slider_btn_box button {
    padding: 7px 25px;
    border-radius: 20px;
    font-family: var(--menu-font);
}

.slider_btn_box .button2 {
    background-image: url(../images/home/Button.png);
    background-size: 30% 100%;
    border: none;
}

.slider1 .slider_main_img {
    position: absolute;
    left: 30%;
    top: 40%;
}

.slider_img_box {
    position: relative;
    width: 100%;
    height: 100%;
    top: 50px;
}

.slider_img_box .multi_img {
    position: absolute;
    text-align: center;
}

.slider_img_box .market {
    left: 15%;
    top: 22%;
}

.slider_img_box .share {
    left: 38%;
    top: 22%;
}

.slider_img_box .www {
    left: 44%;
    top: -6%;
}

.slider_img_box .play_btn {
    left: 56%;
    top: 18%;
}

.slider_img_box .search {
    left: 19%;
    top: 50%;
}

.slider_img_box .quote {
    top: 35%;
    right: 10%;
}

.slider_img_box .pie_chart {
    right: 9%;
    bottom: 6%;
}

.slider_img_box .idea {
    top: -2%;
    left: 21%;
}

.slider_img_box .qraph {
    right: 16%;
    top: 2%;
}

.slider2 .slider_main_img {
    position: absolute;
    top: 30%;
    left: 30%;
    width: 70%;
}

.slider2 .multi_img img {
    text-align: center;
    margin: auto;
}

.job_app {
    top: 45%;
    left: 15%;
}

.matrimonial_app {
    left: 25%;
    top: -3%;
}

.ecommerce_app {
    left: 57%;
    top: -11%;
}

.food_app {
    top: 28%;
    right: -10%;
    width: 20%;
}

.slider3 .slider_main_img {
    position: absolute;
    top: 20%;
    left: 25%;
}

.slider3 .multi_img img {
    margin: auto;
}

.dynamic {
    left: 3%;
    top: 4%;
    display: flex;
    gap: 15px;
}

.static {
    left: 84%;
    top: 2%;
    display: flex;
    gap: 15px;
}

.ecommerce {
    left: 45%;
    top: -20%;
}

.who_we_are {
    position: relative;
    background-image: url(../images/home/who_we_are/bg.svg);
    background-position: center;
    background-size: cover;
}

.who_we_are .top_arrow {
    position: absolute;
    top: 0;
    left: 49.5%;
    height: 21%;
}

.who_we_are .top_arrow img {
    height: 75%;
}

.who_we_are h2 {
    font-weight: 600;
    font-family: var(--poppins);
    color: #000;
}

.who_we_are .character {
    width: 60%;
}

.who_we_are .arrow {
    position: absolute;
    bottom: -5px;
    width: 20%;
    left: 50%;
}

.who_we_are .arrow span {
    position: absolute;
    left: 28%;
    top: 20%;
    color: red;
    cursor: pointer;
}

.who_we_are .video_img {
    position: relative;
    box-shadow: 0px 10px 35px -10px rgb(0 0 0 / 30%);
}

.who_we_are .video_img img:first-child.img-fluid {
    border-radius: 10px;
}

.who_we_are .video_img.aos-init.aos-animate::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    z-index: 1;
    border-radius: 10px;
}

.who_we_are .video_img .video_icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.waves {
    position: absolute;
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, 0.3);
    opacity: 0;
    -ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    border-radius: 100%;
    top: 30.5%;
    left: 39%;
    transform: translate(-50%, -50%);
    -webkit-animation: waves 3s ease-in-out infinite;
    animation: waves 5s ease-in-out infinite;
    z-index: 1;
}

.wave-1 {
    -webkit-animation-delay: 0;
    animation-delay: 0;
}

.wave-2 {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

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

@keyframes waves {
    0% {
        -webkit-transform: scale(0.2, 0.2);
        transform: scale(0.2, 0.2);
        opacity: 0;
        -ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    }

    50% {
        opacity: 0.9;
        -ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=90);
    }

    100% {
        -webkit-transform: scale(0.9, 0.9);
        transform: scale(0.9, 0.9);
        opacity: 0;
        -ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    }
}

.work_with_us .custom_arrow_left {
    position: absolute;
    top: 35%;
    left: -3%;
    font-size: 30px;
    cursor: pointer;
}

.work_with_us .custom_arrow_right {
    position: absolute;
    top: 35%;
    right: -3%;
    font-size: 30px;
    cursor: pointer;
}

.work_with_us {
    background-image: url(../images/home/work_with/bg.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.work_with_us h3 {
    font-family: var(--poppins);
    font-weight: 600;
}

.work_with_us .slider_container h4 {
    font-family: var(--menu-font);
}

.work_with_us h1 {
    font-family: var(--poppins);
    font-weight: 600;
    color: #000;
}

.work_with_us .slider_container .box1 {
    display: flex;
    align-items: center;
    gap: 35px;
    position: relative;
}

.work_with_us .slider_container .box1:nth-child(2) {
    margin-top: 28%;
}

.work_with_us .slider_container .box1 .top_arrow {
    position: absolute;
    bottom: -90px;
    right: 0;
}

.work_with_us .slider_container .box1 .bottom_arrow {
    position: absolute;
    bottom: 70px;
    right: 0;
}

.work_with_us .slider_container .box1 .content p {
    font-family: var(--menu-font);
    font-size: 20px;
}

.work_with_us .slider_container .box1 .content p span {
    color: red;
}

.work_with_us .slider_container .box2 {
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
}

.work_with_us .slider_container .box2 .right_arrow {
    position: absolute;
    right: 70px;
}

.work_with_us .slider_container .box2 p {
    font-family: var(--menu-font);
    font-size: 20px;
    margin-bottom: 35px;
}

.work_with_us .slider_container .box2 .color {
    color: var(--green-color);
}

.work_with_us .slider_container .box2 .content {
    position: relative;
}

.work_one .img {
    width: 15%;
}

.work_with_us .slider_container .box2 .content .img {
    position: absolute;
    left: 75%;
    top: -85%;
    width: 50%;
}

.work_with_us .slider_container .slider2_img {
    display: flex;
    justify-content: flex-end;
    width: 40%;
    margin-left: auto;
}

.work_with_us .slider_container .hand_shake {
    position: relative;
}

.workshop_section .feedback {
    margin: 10px 0 40px;
}

.workshop_section .feedback p {
    font-size: 25px;
    font-weight: 700;
    border-bottom: 1px solid #000;
    width: fit-content;
    margin: auto;
    cursor: pointer;
}

.questions textarea {
    width: 90%;
    border: none;
    border-bottom: 1px solid;
    outline: none;
    margin-top: 10px;
    font-family: var(--poppins);
    height: 35px;
}

.questions {
    margin-top: 30px;
}

.questions.rate input {
    width: 20px;
    height: 20px;
    border: 1px solid #000;
    appearance: none;
    -webkit-appearance: none;
    margin-right: 10px;
    border-radius: 50%;
    cursor: pointer;
}

.questions.rate input:checked {
    background-color: var(--green-color);
}

.questions.rate h5 {
    margin-bottom: 30px;
    font-size: 30px;
}

.star-rating {
    border: solid 1px #888;
    display: flex;
    flex-direction: row-reverse;
    font-size: 1.5em;
    justify-content: space-around;
    padding: 0 0.2em;
    text-align: center;
    padding: 10px;
    width: 85%;
}

.star-rating input {
    display: none;
}

.star-rating label {
    color: #ccc;
    cursor: pointer;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid #000;
    font-size: 12px;
    color: #000;
    line-height: 22px;
}

.star-rating :checked ~ label {
    background-color: var(--yellow-color);
}

.star-rating label:hover,
.star-rating label:hover ~ label {
    background-color: var(--yellow-color);
}

.question-box {
    padding-left: 10%;
}

.question-box .center {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    margin: 20px 0;
}

.question-box label {
    float: right;
    font-size: 12px;
    color: #000;
    margin: 5px;
    width: 25px;
    height: 25px;
    border: 1px solid #000;
    border-radius: 50%;
    text-align: center;
    line-height: 22px;
    cursor: pointer;
}

.question-box label:hover,
.question-box label:hover ~ label {
    background-color: #fca311;
    transition: 0.5s;
    font-weight: 600;
}

.question-box .active,
.question-box .active2 {
    background-color: #fca311;
    font-weight: 600;
}

article {
    background-color: #ffe;
    box-shadow: 0 0 1em 1px rgba(0, 0, 0, 0.25);
    color: #006;
    font-family: cursive;
    font-style: italic;
    margin: 4em;
    max-width: 30em;
    padding: 2em;
}

#regForm input.invalid {
    background-color: #fdd;
}

.tab {
    display: none;
}

#regForm button {
    background-color: #04aa6d;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 17px;
    font-family: Raleway;
    cursor: pointer;
}

#regForm button:hover {
    opacity: 0.8;
}

#prevBtn {
    background-color: #bbb;
}

.step {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border: none;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
}

.step.active {
    opacity: 1;
}

.step.finish {
    background-color: #04aa6d;
}

.our_principle {
    background: url(../images/home/what_we_do/bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

.our_principle .first_row {
    margin-bottom: 80px;
    position: relative;
}

.our_principle .content h4 {
    font-family: var(--menu-font);
    font-size: 30px;
    margin-bottom: 20px;
}

.our_principle .content p {
    font-family: var(--menu-font);
    line-height: 20px;
}

.our_principle .content .while {
    border: 1px solid gray;
    padding: 3px;
    font-family: var(--menu-font);
    width: 25%;
    margin: 0 auto 10px;
    color: gray;
}

.our_principle .smile_img {
    display: flex;
    gap: 10px;
    align-items: center;
    position: absolute;
    bottom: -58%;
    left: 40%;
}

.our_principle .smile_img p {
    text-align: center;
    color: red;
    line-height: 20px;
    margin-top: 65px;
}

.our_principle .second_row {
    margin-top: 130px;
}

.our_principle .second_row h2 {
    font-family: var(--poppins);
}

.our_process {
    background-image: url(../images/home/our_process/bg.png);
    background-position: center;
    background-size: 50% 80%;
    background-repeat: no-repeat;
}

.our_process .container-fluid {
    padding: 0 10% 0 5%;
}

.our_process .title {
    position: absolute;
    top: 45%;
    left: -2%;
    text-transform: uppercase;
    font-size: 50px;
    font-family: var(--poppins);
    font-weight: bolder;
    transform: rotate(270deg);
}

.our_process .title span {
    color: #faa300;
}

.our_process .plan_box {
    position: relative;
}

.our_process .meet,
.our_process .plan {
    display: flex;
    gap: 20px;
    align-items: center;
}

.our_process .plan {
    margin-top: 25%;
}

.our_process .plan .content p {
    padding-right: 60px;
}

.our_process .img_group {
    display: flex;
}

.our_process .meet_box .arrow {
    width: fit-content;
    margin-left: auto;
}

.our_process .plan_box .arrow {
    position: absolute;
    right: -14%;
    bottom: -6%;
}

.our_process .behind_work {
    text-align: center;
    margin-top: 50px;
}

.our_process .behind_work p {
    margin: 10px 0 5px;
}

.our_process .behind_work a {
    color: #f53501;
    font-family: var(--menu-font);
    text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 1px solid;
}

.our_process .web_design {
    margin-top: 70px;
    position: relative;
}

.our_process .web_design .arrow {
    position: absolute;
    left: 5%;
    bottom: -30%;
}

.our_process .web_design .content_box {
    display: flex;
    align-items: center;
    margin-left: 25%;
    gap: 20px;
}

.our_process .web_design .content_box .content p {
    padding-right: 0;
}

.our_process .home_launch,
.our_process .testing {
    display: flex;
    align-items: center;
    gap: 20px;
}

.our_process .testing {
    margin-top: 70px;
}

.our_process .home_launch {
    margin-top: 45%;
}

.our_process .content h3 {
    font-family: var(--poppins);
}

.our_process .content p {
    font-size: 14px;
}

.our_client_say > div {
    padding: 40px 80px;
    text-align: center;
    border: 2px dashed;
    margin: 0 10% 5%;
    border-radius: 15px;
}

.our_client_say > div h2 {
    font-family: var(--poppins);
    margin-bottom: 20px;
}

.home_testimonial {
    display: none;
}

.home_testimonial .content_bg {
    padding: 1% 0;
}

.home_testimonial .content h2 {
    font-family: var(--poppins);
    margin-bottom: 20px;
    font-weight: 600;
    position: relative;
    width: fit-content;
}

.home_testimonial .content p {
    font-size: 18px;
    margin: 2% 0;
}

.home_testimonial .content h5 {
    margin-left: auto;
    width: fit-content;
    font-family: var(--menu-font);
    position: relative;
}

.home_testimonial .content h5 .line-img {
    position: absolute;
    bottom: -10px;
}

.home_testimonial .testimonial_slider {
    width: 85%;
    margin: auto;
}

.footer_social {
    padding: 20px 0;
    background: #000;
}

.what_we_do {
    background: url(../images/home/what_we_do/bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    position: relative;
}

.what_we_do .medias {
    display: flex;
    gap: 20px;
    align-items: center;
}

.medias {
    cursor: pointer;
}

.what_we_do .medias img {
    width: 60px;
}

.what_we_do .medias P {
    line-height: 20px;
    margin-bottom: 0;
}

.what_we_do .title {
    width: 20%;
    height: 100%;
    position: absolute;
    top: 0;
    left: -6%;
}

.what_we_do .square {
    background-color: #e32b00;
    position: absolute;
    width: 200px;
    height: 30px;
    top: 0;
    left: 0;
    transform: scaleY(0);
}

.what_we_do .title h2 {
    color: #fff;
    position: absolute;
    right: -100px;
    top: 50%;
    transform: translateY(-50%) rotate(270deg);
    font-size: 50px;
    font-weight: 700;
    font-family: var(--poppins);
}

.what_we_do .title span {
    color: #000;
}

.event_section {
    padding: 50px 0;
    position: relative;
}

.event_section h2 {
    font-family: var(--poppins);
    font-family: var(--poppins);
    text-align: center;
    font-weight: 800;
    font-size: 35px;
    margin-bottom: 30px;
}

.event_section .event_img {
    width: 40%;
    margin: auto;
}

.event_section .social_links {
    position: absolute;
    top: 32%;
    left: 25%;
    width: 20%;
}

.event_section .social_links h3 {
    margin-bottom: 20px;
    font-family: var(--poppins);
}

.event_section .social_links .link_box {
    display: flex;
    justify-content: space-between;
}

.event_section .social_links a {
    text-decoration: none;
}

.event_section .social_links .insta {
    display: flex;
    align-items: center;
}

.event_section .social_links .insta p {
    margin-bottom: 0;
    color: #000;
    margin-left: 10px;
}

.event_section .social_links div i {
    color: var(--media-color);
    font-size: 30px;
}

.pl-40 {
    padding-left: 40px;
}

.pr-40 {
    padding-left: 40px;
}

.service_title {
    background-image: url(../images/services/service_bg.svg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding-bottom: 13%;
}

.service_title h2 {
    font-size: 40px;
    font-weight: 700;
    font-family: var(--poppins);
}

.service_title h5 {
    margin: 20px 0;
    font-family: var(--poppins);
}

.service_title p {
    padding: 0 30px;
    font-family: var(--poppins);
}

.service_title h2:nth-child(3),
.service_title h2 span {
    color: #fff;
}

.service_section {
    padding: 20px;
    font-family: var(--menu-font);
}

.service_section.website_section {
    padding: 50px 5% 0 !important;
}

.service_section .img {
    width: 50%;
    margin: 30px auto 6%;
}

.service_section .service_card.seo_card .img {
    width: 50%;
    margin: 17% auto;
}

.service_section .service_card.digital_market .img {
    width: 40%;
    margin: 0 auto 6%;
}

.service_section .service_card.mob_app .img {
    margin-bottom: 10%;
}

.service_section .service_card.software .img {
    width: 60%;
    margin: 7% auto;
}

.service_section .row .service_card {
    padding: 7% 6%;
    margin: 0 auto;
    height: 100%;
    position: relative;
    background: #f6f6f6;
    transition: 0.5s;
}

.service_section .row .service_card.mob_app {
    background: #f6f6f6;
    transition: 0.5s;
}

.service_section .row .service_card:hover {
    box-shadow: -27px 15px 40px rgba(0, 0, 0, 0.25);
}

.service_section .row .service_card.mob_app:hover {
    box-shadow: -27px 15px 40px rgba(0, 0, 0, 0.25);
}

.service_section .content h2 {
    font-family: var(--poppins);
    font-weight: 600;
    margin-bottom: 20px;
    font-size: 22px;
}

.service_section .content a {
    text-decoration: none;
    color: #000;
    transition: 0.4s;
}

.service_card .content a:hover {
    color: var(--blue-color) !important;
}

.service_section .content h2 span {
    font-size: 20px;
}

.graphic_section {
    margin-top: 3%;
}

.graphic_section .row {
    padding: 50px;
    margin: 0 3%;
    background: #f6f6f6;
    transition: 0.5s;
}

.graphic_section .row:hover {
    box-shadow: -27px 15px 40px rgba(0, 0, 0, 0.25);
}

.graphic_section.service_section .img {
    text-align: center;
    width: 90%;
}

.seo_section.service_section {
    margin: 3% 0 5%;
    padding: 0 5%;
}

.seo_section.service_section .mob_app .img {
    margin: 9% auto;
}

.service_section .service_card .content p {
    margin-bottom: 20%;
}

.service_section .service_card.seo_card,
.service_section .service_card.digital_market {
    margin: 0 5%;
}

.service_section .service_card.seo_card .content p,
.service_section .service_card.digital_market .content p {
    margin-bottom: 15%;
}

.service_section .content p {
    font-size: 14px;
    line-height: 25px;
    text-align: justify;
}

.service_section .service_card .button_group {
    margin-top: 5%;
    display: flex;
    justify-content: center;
    gap: 30px;
    position: absolute;
    bottom: 7%;
    width: 85%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    font-weight: 800;
}

.service_section .button_group {
    display: flex;
    justify-content: center;
    gap: 30px;
    font-size: 14px;
    margin-top: 7%;
}

.button_group > div {
    cursor: pointer;
}

.service_section .button_group a {
    text-decoration: none;
    color: #000;
}

.service_section .button_group .ser_btn {
    border: 1px solid #000;
    padding: 8px 15px;
    border-radius: 30px;
    position: relative;
    overflow: hidden;
    z-index: 1;
    background: url(../images/home/Button.png);
    background-position: center;
    background-size: 50% 100%;
    box-shadow: 0 2px 5px rgba(0 0 0 / 40%);
}

.service_section .button_group .ser_btn:active {
    box-shadow: none;
}

.service_section .button_group .ser_btn::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 20px;
    z-index: -1;
    transition: transform 0.4s;
    transform: scaleX(0);
    transform-origin: right;
}

.service_section .button_group .ser_btn:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

.service_section .button_group .ser_btn i {
    font-size: var(--icon_font-size);
    vertical-align: middle;
}

.service_section .explore {
    margin-top: var(--explore_top);
}

.service_section .explore a {
    text-decoration: none;
    color: #000;
    padding: 5px 35px;
    border: 1px solid #000;
    border-radius: 20px;
    transition: all 0.5s;
}

.service_section .explore a:hover {
    background-color: var(--yellow-color);
}

.evolving_section {
    background: #ef3100;
    padding: 50px;
}

.evolving_section h2,
.evolving_section h5 {
    color: #fff;
    text-align: center;
    margin-bottom: 15px;
    font-family: var(--poppins);
}

.evolving_section .contact_us button {
    border: 1px solid #000;
    border-radius: 25px;
    padding: 10px 30px;
    font-family: var(--menu-font);
    background-color: #fff;
    margin-top: 30px;
    font-size: 20px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.evolving_section .contact_us button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--yellow-color);
    border-radius: 20px;
    transition: transform 0.3s;
    transform: scaleY(0);
    transform-origin: top;
    z-index: -1;
}

.evolving_section .contact_us button:hover::before {
    transform: scaleY(1);
    transform-origin: bottom;
}

.work_banner {
    background: url(../images/work/work_banner.png);
    height: 350px;
    width: 100%;
    margin-top: 80px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    display: flex;
    align-items: center;
    font-family: var(--poppins);
}

.work_banner year {
    color: var(--yellow-color);
}

.work_banner .content {
    color: #fff;
    font-weight: 500;
    font-size: 20px;
    width: 45%;
    text-align: center;
    margin: auto;
}

.work_banner .sub_content {
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    color: #fff;
    font-weight: 100;
    font-size: 25px;
}

.work_section {
    padding: 60px 0 50px;
}

.pl-5per {
    padding-left: 5% !important;
}

.pr-5per {
    padding-right: 5% !important;
}

.work_section .create_products span {
    color: var(--yellow-color);
}

.work_section .create_products h3 {
    font-size: 32px;
    font-weight: 700;
    font-family: var(--poppins);
}

.work_section .list_names {
    margin-top: 3%;
}

.work_section .list_names .option-btn {
    font-size: 18px;
    font-weight: 500;
    font-family: var(--poppins);
    color: #000;
    border-radius: 20px;
    transition: 0.5s ease-in;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: transparent !important;
}

.work_section .list_names .nav-link.active.option-btn {
    background-image: url(../images/work/list_bg.svg);
    color: #000;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.work_section .list_names .custom_list {
    justify-content: space-around;
}

.work_section .create_product_content .content_box {
    display: flex;
    font-family: var(--poppins);
}

.work_section .create_product_content p {
    padding-right: 50px;
}

.work_section .create_product_content {
    margin-top: 20%;
}

.work_section .content_box .content_box_inner {
    padding: 10px 20px;
    background-color: #e4eaf5;
    width: 100%;
}

.work_section .content_box .content_box_inner a {
    color: #ef3100;
    text-decoration: none;
}

.work_section .content_box .two.stay {
    background-color: #6d7a83;
    color: #fff;
}

.work_section .tab-content .row {
    margin-top: 3%;
}

.work_section .work_img {
    position: relative;
}

.work_section .img_content {
    position: absolute;
}

.work_section .img_content h3 {
    font-size: 50px;
    font-weight: 800;
    line-height: 50px;
}

.work_section .img_content h3 span {
    -webkit-text-stroke: 1px #000;
    -moz-text-stroke: 1px #000;
    color: #fff;
}

.work_section .img_content h3:nth-child(2) {
    -webkit-text-stroke: 1px #000;
    -moz-text-stroke: 1px #000;
    color: #fff;
}

.work_section .img_content.first_content {
    top: 5%;
    right: 2%;
}

.work_section .img_content.first_content h1:nth-child(2) {
    margin-left: 35%;
}

.work_section .img_content.second_content {
    top: 0;
    left: -25%;
}

.work_section .img_content.second_content h1:nth-child(2) {
    margin-left: -25%;
}

#mobile_app .img_content.first_content {
    top: 0;
    right: -22%;
}

.work_section #mobile_app .img_content.second_content h1:nth-child(2) {
    margin-left: -60%;
}

.work_section .scroll_down,
.service_title .scroll_down {
    position: relative;
    text-align: center;
    margin-bottom: 3%;
}

.work_section .scroll_down .mouse,
.service_title .scroll_down .mouse {
    width: 40px;
    height: 60px;
    border-radius: 20px;
    border: 3px solid #000;
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 20px);
}

.service_title .scroll_down .mouse {
    top: calc(50% + 0px);
    left: calc(50% - 20px);
}

.mouse:before,
.mouse:after {
    content: "";
    display: block;
    position: absolute;
}

.m-4:before,
.m-4:after {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    top: 10px;
    left: calc(50% - 3px);
    background: #000;
    opacity: 0;
    -webkit-animation: m-4-ball 1.5s ease-in-out infinite;
    animation: m-4-ball 1.5s ease-in-out infinite;
}

.m-4:after {
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
}

@-webkit-keyframes m-4-ball {
    50% {
        opacity: 1;
    }

    47.5%,
    52.5% {
        transform: translateY(10px);
    }

    100% {
        transform: translateY(20px);
    }
}

@keyframes m-4-ball {
    50% {
        opacity: 1;
    }

    47.5%,
    52.5% {
        transform: translateY(10px);
    }

    100% {
        transform: translateY(20px);
    }
}

.leader_ship_one {
    padding: 130px 50px 50px;
    background: #faa300;
    font-family: var(--menu-font);
}

.leader_ship_one .content {
    padding-left: 150px;
}

.leader_ship_one h4 {
    margin-bottom: 5px;
}

.leader_ship_one h6 {
    line-height: 25px;
}

.we_are {
    padding: 50px 0 30px;
}

.we_are .title {
    text-align: center;
    font-family: var(--poppins);
}

.we_are .title h2,
.we_are .title h6 {
    font-weight: 400;
    margin-bottom: 0;
}

.we_are .title_content {
    font-family: var(--menu-color);
    text-align: center;
    margin-top: 40px;
    padding: 0 80px 10px;
}

.leaders {
    padding: 10px 0 50px;
    text-align: center;
}

.leaders h2 {
    font-weight: 400;
}

.leaders p {
    padding: 0 50px;
}

.leader_img {
    width: 65%;
    position: relative;
    cursor: pointer;
    margin: auto;
}

.leaders .col-lg-12 {
    display: flex;
    justify-content: center;
    gap: 10%;
    font-family: var(--poppins);
}

.leaders .name h4 {
    font-size: 20px;
}

.stats {
    padding: 50px;
    background: #efefef;
}

.stats .title h2 {
    text-align: center;
    font-weight: 400;
    margin-bottom: 50px;
    font-family: var(--poppins);
}

.stat_box {
    text-align: center;
}

.stat_box .img {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 75px;
}

.stat_box .numbers h5 {
    font-size: 30px;
    font-weight: 700;
    font-family: var(--poppins);
}

.follow_us {
    font-family: var(--poppins);
    text-align: center;
    padding: 50px;
    background: #dd2a00;
    color: #fff;
}

.follow_us p {
    font-family: var(--poppins);
}

.workshop_section {
    padding: 150px 0 70px;
    background: url(../images/home/work_with/bg.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.workshop_content {
    padding: 40px 30px 40px 75px;
    background-color: #fff;
}

.workshop_form {
    padding: 50px;
    background-color: #f6f6f6;
    box-shadow: -27px 15px 40px rgba(0, 0, 0, 0.3);
    position: relative;
    margin-right: 50px;
}

.workshop_form h3 {
    margin-bottom: 30px;
    font-family: var(--poppins);
    font-weight: 600;
}

.workshop_logo {
    margin-bottom: 30px;
    text-align: center;
}

.workshop_section h4 {
    font-size: 30px;
    font-family: var(--poppins);
    text-align: center;
    margin: 60px 0 30px;
}

.workshop_section .social_links {
    display: flex;
    justify-content: space-around;
    width: 80%;
    margin: auto;
}

.workshop_section .social_links div i {
    font-size: 30px;
    color: var(--media-color);
}

.workshop_logo img {
    width: 130px;
}

.workshop_form input,
select {
    height: 42px;
}

.workshop_form .form-control {
    border: 1px solid #888;
    margin: 10px 0;
    font-family: var(--poppins);
}

.workshop_form .form-control option {
    padding: 20px 0;
}

.workshop_section .submit_btn button,
.modal .submit_btn button {
    background-color: var(--yellow-color);
    border: 1px solid #000;
    outline: none;
    padding: 10px 35px;
    border-radius: 7px;
    font-weight: 700;
    font-family: var(--poppins);
    position: relative;
    transition: 0.5s;
    z-index: 1;
    overflow: hidden;
}

.workshop_section .submit_btn button::before,
.modal .submit_btn button::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: -1;
    transition: transform 0.4s;
    transform: scaleX(0);
    transform-origin: right;
}

.workshop_section .questions h5 {
    font-family: var(--poppins);
    font-size: 18px;
}

.workshop_section .submit_btn button:hover::before,
.modal .submit_btn button:hover:before {
    transform: scaleX(1);
    transform-origin: left;
}

.workshop_section .alert {
    margin: 30px 0 -15px;
    font-weight: 600;
}

.modal input {
    border: 1px solid #888;
    margin-top: 10px;
    height: 45px;
}

.modal .modal-body {
    padding-bottom: 30px;
}

.website_dev {
    padding: 150px 0 30px;
}

.website_dev .content h2 {
    font-family: var(--poppins);
    font-weight: 600;
    margin-bottom: 3%;
}

.website_dev .content p {
    text-align: justify;
}

.website_dev .dev_img {
    width: 100%;
    height: 100%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.website_dev .dev_img img {
    width: 70%;
}

.next_step {
    padding: 50px 0 0;
    font-family: var(--menu-font);
}

.next_step .next_step_inner {
    padding: 50px;
    background: #dfdfdf;
}

.next_step .title {
    margin-bottom: 40px;
    font-family: var(--poppins);
}

.next_step .title h2 {
    font-weight: 600;
}

.next_step .web_cat h4 {
    text-align: center;
    margin-bottom: 20px;
}

.next_step .web_cat .img {
    width: 70%;
    margin: auto;
}

.next_step .web_cat .arrow {
    text-align: center;
    margin-top: 20px;
}

.next_step .web_cat .arrow img {
    width: 15%;
    cursor: pointer;
}

.monitor_img {
    position: relative;
    perspective: 1000px;
}

.monitor_img img {
    width: 100%;
}

.monitor_slider_inner {
    left: 54%;
    position: absolute;
    width: 40.5%;
    height: 42.5%;
    border-radius: 10px;
    top: 45.5%;
    transform: translate(-50%, -50%) rotateX(7deg);
    overflow: hidden;
    transform-style: preserve-3d;
}

.monitor_img .slick-list {
    height: 141%;
}

.monitor_img .slick-track {
    height: 71%;
}

.ht-100 {
    height: 100%;
}

.monitor_slider .slider_sub img {
    width: 100%;
    height: 100%;
}

.monitor_slider h2 {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 700;
}

.mobile_scroll {
    position: absolute;
    top: 36.2%;
    width: 12.4%;
    left: 13.4%;
    height: 39.2%;
    overflow: hidden;
    border-radius: 20px;
    transform: rotate(-0.4deg);
}

.mobile_scroll img {
    animation: scroll_top 25s infinite linear;
}

@keyframes scroll_top {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-100px);
    }

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

.monitor_img .portfolio_btn a {
    padding: 8px 50px;
    background-color: var(--yellow-color);
    box-shadow: 0 4px 17px rgba(0, 0, 0, 0.31);
    border-radius: 5px;
    position: absolute;
    bottom: 8%;
    left: 42%;
    font-size: 22px;
    font-weight: 700;
    color: #000;
    text-decoration: none;
}

.monitor_img .portfolio_btn a:active {
    box-shadow: 0 4px 17px rgba(0, 0, 0, 0.1);
}

.website_list {
    padding: 50px 0;
}

.website_list .title h1 {
    padding: 50px;
    background: linear-gradient(
            rgba(255, 255, 255, 0.1),
            rgba(255, 255, 255, 0.1)
        ),
        url(../images/services/website/title_bg.svg);
    background-position: center;
    background-size: 75%;
    color: #000;
    font-weight: 700;
    text-align: center;
}

.client_arrow_left {
    position: absolute;
    left: -70px;
    top: 35%;
    cursor: pointer;
}

.client_arrow_right {
    position: absolute;
    right: -70px;
    top: 35%;
    cursor: pointer;
    transform: rotate(180deg);
}

.convert {
    padding: 50px;
    background: #ef3100;
    text-align: center;
    color: #fff;
}

.convert h2 {
    font-weight: 700;
    margin-bottom: 20px;
    font-family: var(--poppins);
}

.convert p {
    padding: 0 200px;
    font-size: 20px;
}

.convert .contact_us button {
    border: 1px solid #000;
    border-radius: 25px;
    padding: 10px 30px;
    font-family: var(--menu-font);
    background-color: #fff;
    margin-top: 30px;
    font-size: 20px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.convert .contact_us button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--yellow-color);
    border-radius: 20px;
    transition: transform 0.3s;
    transform: scaleY(0);
    transform-origin: top;
    z-index: -1;
}

.convert .contact_us button:hover::before {
    transform: scaleY(1);
    transform-origin: bottom;
}

.android.app_type {
    background: #dfdfdf;
    padding: 50px 0;
}

.android.app_type .img {
    width: 25%;
    margin: auto;
}

.android.app_type .row {
    justify-content: center;
    text-align: center;
}

.android.app_type .mob_app h4 {
    font-family: var(--poppins);
    margin-bottom: 30px;
}

.monitor_img.android_slide {
    position: relative;
    perspective: 1000px;
    margin: 7% auto;
    text-align: center;
}

.monitor_img.android_slide img {
    width: 20%;
    border-radius: 20px;
}

.monitor_slider .android_slider .slider_sub {
    margin: 0 15px !important;
}

.android_slide .monitor_slider_inner {
    left: 50.5%;
    position: absolute;
    width: 52%;
    height: 88%;
    top: 50.5%;
    transform: translate(-50%, -50%) rotateX(0deg);
    overflow: hidden;
    transform-style: preserve-3d;
    z-index: -1;
}

.monitor_img.android_slide .slick-list {
    height: 141%;
}

.monitor_img.android_slide .slick-track {
    height: 71%;
}

.ht-100 {
    height: 100%;
}

.monitor_slider .monitor_img.android_slide .slider_sub img {
    width: 100%;
    height: 100%;
    border-radius: 15px;
}

.monitor_img.android_slide h2 {
    position: absolute;
    top: -8%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    font-weight: 700;
}

.monitor_img.android_slide .portfolio_btn a,
.cat_graphic_section .portfolio_btn a {
    padding: 8px 50px;
    background-color: var(--yellow-color);
    box-shadow: 0 4px 17px rgba(0, 0, 0, 0.31);
    border-radius: 10px;
    position: absolute;
    bottom: -12%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 22px;
    font-weight: 700;
    color: #000;
    text-decoration: none;
}

.cat_graphic_section .portfolio_btn a {
    bottom: -2%;
}

.cat_graphic_section {
    padding: 80px 0;
    position: relative;
}

.cat_graphic_section .row .col-lg-4 {
    padding: 0;
}

.cat_graphic_section .row .col-lg-4 .img {
    position: relative;
    cursor: pointer;
}

.cat_graphic_section .row .col-lg-4 .img img {
    width: 100%;
}

.cat_graphic_section .img .graphic_details {
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(rgba(244 95 57 / 0.7), rgba(244 95 57/0.7));
    width: 100%;
    height: 100%;
    text-align: center;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease-out;
}

.cat_graphic_section .img .graphic_details .content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    font-family: var(--poppins);
    color: #fff;
}

.cat_graphic_section .img:hover .graphic_details {
    transform: scale(1);
    transform-origin: left;
}

.cat_graphic_section .img .graphic_details .content h2 {
    font-weight: 600;
}

.discovery {
    background: url(../images/case_study/discovery/bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.discovery .img_group {
    text-align: center;
}

.discovery .img_group .bulp {
    position: relative;
    top: 15px;
    left: 15px;
}

.discovery .img_group .blup img {
    margin-left: 25px;
}

.discovery .content h2 {
    font-weight: 600;
    font-family: var(--poppins);
    font-size: 40px;
    margin-bottom: 20px;
    width: fit-content;
    position: relative;
}

.discovery .content h2 .title_img {
    position: absolute;
    right: -15%;
    top: -50%;
}

.discovery .arrow {
    position: absolute;
    bottom: -33%;
    left: 22%;
    width: 45%;
}

.client_info {
    font-family: var(--poppins);
}

.client_info .content {
    padding: 30px 30px 20px;
}

.client_info .content:hover {
    background: #e4eaf5;
}

.client_info p {
    font-family: var(--poppins);
}

.client_info .col-lg-3 {
    display: flex;
    justify-content: center;
}

.client_info .col-lg-3 .content a {
    text-decoration: none;
}

.ux_strategy {
    overflow: hidden;
}

.dot {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #feb100;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ux_strategy .img_group {
    text-align: center;
}

.ux_strategy .img_group .blup img {
    margin-left: 25px;
}

.ux_strategy .content h2 {
    font-weight: 600;
    font-family: var(--poppins);
    font-size: 40px;
    margin-bottom: 20px;
    width: fit-content;
    position: relative;
}

.ux_strategy .content h2 .title_img {
    position: absolute;
    right: -12%;
    top: -50%;
}

.ux_strategy .img_group .stars {
    margin-bottom: 15px;
}

.ux_strategy .img_group .bulp {
    padding-left: 80px;
    position: relative;
}

.ux_strategy .img_group .bulp .img {
    position: absolute;
}

.ux_strategy .img_group .bulp .strategy {
    top: 8%;
    left: 25%;
    transform-origin: bottom right;
}

.ux_strategy .img_group .bulp .goal {
    top: 40%;
    left: 20%;
    transform-origin: bottom right;
}

.ux_strategy .img_group .bulp .idea {
    top: 66%;
    left: 23%;
    transform-origin: bottom right;
}

.ux_strategy .img_group .bulp .search {
    top: 67%;
    right: 22%;
    transform-origin: top left;
}

.ux_strategy .img_group .bulp .plan {
    top: 50%;
    right: 14%;
    transform-origin: top left;
}

.ux_strategy .img_group .bulp .team {
    top: 20%;
    right: 12%;
    transform-origin: bottom left;
}

.ux_strategy .arrow {
    position: absolute;
    bottom: -21%;
    right: 22%;
    width: 50%;
}

.build {
    background: url(../images/case_study/discovery/bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.build .img_group {
    text-align: center;
}

.build .img_group .blup img {
    margin-left: 25px;
}

.build .content h2 {
    font-weight: 600;
    font-family: var(--poppins);
    font-size: 40px;
    margin-bottom: 20px;
    width: fit-content;
    position: relative;
}

.build .content h2 .title_img {
    position: absolute;
    right: -25%;
    top: -65%;
}

.build .monitor {
    position: relative;
    margin-top: 100px;
}

.build .img {
    position: absolute;
}

.build .msg1 {
    top: -7%;
    right: 34%;
}

.build .msg2 {
    top: -48px;
    right: 43%;
}

.build .paper {
    top: -2%;
    right: 18%;
}

.build .pencil {
    top: 50%;
    left: 15%;
}

.build .inside {
    top: 35%;
    left: 44%;
}

.build .arrow {
    position: absolute;
    bottom: -22%;
    left: 22%;
    width: 45%;
}

.launch {
    background: #dfdfdf;
}

.launch .img_group {
    text-align: center;
}

.launch .img_group .blup img {
    margin-left: 25px;
}

.launch .content h2 {
    font-weight: 600;
    font-family: var(--poppins);
    font-size: 40px;
    margin-bottom: 20px;
    width: fit-content;
    position: relative;
}

.launch .content h2 .title_img {
    position: absolute;
    right: -10%;
    top: -65%;
}

.launch .img_group .star {
    position: relative;
}

.launch .img_group .img {
    position: absolute;
}

.launch .monitor {
    top: 39%;
    left: 31%;
}

.launch .rocket {
    top: 26%;
    left: 45%;
    width: 21%;
}

.launch .arrow img {
    width: 80%;
}

.launch .arrow {
    position: absolute;
    right: 15%;
    bottom: -55%;
}

.result h2 {
    font-weight: 600;
    font-family: var(--poppins);
    font-size: 40px;
    width: fit-content;
    position: relative;
    margin: auto;
    margin-bottom: 20px;
}

.result p {
    line-height: 30px;
}

.result h2 .title_img {
    position: absolute;
    right: -22%;
    top: -65%;
}

.result .circle {
    margin-top: 50px;
    position: relative;
}

.result .circle .hand {
    position: absolute;
    left: 46.3%;
    top: 38%;
}

.testimonial {
    background-color: #faa300;
}

.contact_page {
    padding: 0 80px 50px;
}

.contact_page .touch h6 {
    font-weight: 600;
    font-family: var(--poppins);
    font-size: 25px;
    margin-left: 8px;
}

.contact_page .query_form {
    padding: 50px;
    background-color: #f6f6f6;
    margin-top: 50px;
    box-shadow: -27px 15px 40px rgba(0, 0, 0, 0.25);
}

.contact_page .query_form h6 {
    font-weight: 600;
    font-family: var(--poppins);
    font-size: 25px;
    margin-bottom: 30px;
}

.contact_page .touch {
    display: flex;
    justify-content: center;
    font-size: 18px;
    font-family: var(--menu-font);
    padding-top: 9%;
}

.contact_page .touch img {
    width: 20px;
}

.contact_page .touch a {
    text-decoration: none;
    color: #000;
}

.contact_page .touch .d-flex {
    gap: 10px;
    margin: 7% 0 10%;
}

.contact_page .touch .email .icon {
    color: #faa300;
}

.contact_page .form-control {
    font-family: var(--poppins);
    border: 1px solid #888;
    margin: 10px 0;
}

.contact_page input.form-control,
.contact_page select.form-control {
    height: 42px;
}

.contact_page .form-control:focus {
    border-color: var(--blue-color) !important;
}

.contact_page .submit_btn {
    margin-top: 20px;
    text-align: center;
}

.contact_page .submit_btn button,
.expo-enquiry-form .submit_btn button {
    background-color: var(--yellow-color);
    border: 1px solid #000;
    outline: none;
    padding: 10px 35px;
    border-radius: 7px;
    font-weight: 700;
    font-family: var(--poppins);
    position: relative;
    transition: 0.5s;
    z-index: 1;
    overflow: hidden;
}

.contact_page .submit_btn button::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: -1;
    transition: transform 0.4s;
    transform: scaleX(0);
    transform-origin: right;
}

.contact_page .submit_btn button:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

.query_form .row .col-lg-6 {
    margin: 7px 0;
}

.query_form .row .col-lg-6 label {
    font-weight: 500;
}

.service_contact h4,
.service_contact label {
    font-family: var(--poppins);
    font-size: 14px;
}

.service_contact input[type="checkbox"] {
    width: 15px;
    height: 15px;
    vertical-align: middle;
    margin-right: 5px;
    outline: none;
}

footer {
    padding-bottom: 50px;
    width: 100%;
}

.footer_social .row {
    line-height: 35px;
}

.footer_menu {
    padding: 60px 0 0;
}

.footer_menu .footer_logo {
    width: 140px;
    margin-left: 30px;
    margin-top: 20px;
    margin-bottom: 10px;
}

.footer-copy {
    text-align: center;
    padding: 30px 0;
    border-top: 0.5px solid;
    margin: 0px;
}

.footer-rights {
    color: #000;
    text-decoration: none;
}

.footer_menu .footer_logo img {
    width: 100%;
}

.footer_menu .logo p {
    margin-top: 15px;
}

.footer_menu .menu h6 {
    font-family: var(--poppins);
    font-weight: 600;
    margin-bottom: 25px;
}

.footer_social .icon img {
    width: 20%;
}

.footer_menu .menu ul {
    padding-left: 0;
}

.footer_menu .menu ul li {
    list-style-type: none;
    margin: 5px;
}

.footer_menu .menu ul li a {
    font-family: var(--menu-font);
    text-decoration: none;
    color: #000;
}

.footer_menu .touch h6 {
    font-weight: 600;
    font-family: var(--poppins);
    margin-bottom: 25px;
}

.footer_menu .touch {
    font-family: var(--menu-font);
}

.footer_menu .logo,
.footer_menu .menu,
.footer_menu .touch {
    display: flex;
    justify-content: center;
}

.footer_menu .touch a {
    text-decoration: none;
    color: #000;
}

.footer_menu .touch .d-flex {
    gap: 10px;
    margin: 10px 0;
}

.footer_menu .touch .email .icon {
    color: #faa300;
}

.footer_menu .touch .footer_quote button {
    padding: 7px 30px;
    border: 1px solid #000;
    border-radius: 20px;
    background: url(../images/home/Button.png);
    background-position: center;
    background-size: 30% 100%;
    margin-top: 12px;
}

:root {
    --page-count: 11;
    --page-scroll: 25;
    --underline: rgba(64, 64, 64, 0.4);
    --spine: #000;
    --cover: #1a1a1a;
    --bg: #4d4d4d;
    --insert: #d9d9d9;
    --page: #e6e6e6;
}

.book_body {
    width: 100vw;
    height: calc(((var(--page-count) + 2) * var(--page-scroll)) * 1vh);
    overflow-x: hidden;
}

.page {
    height: 100%;
    width: 100%;
    position: relative;
    transform-style: preserve-3d;
}

.page .page__number {
    position: absolute;
    color: gray;
    bottom: 1rem;
    font-size: 1vmin;
}

.page__half--front .page__number {
    right: 1rem;
}

.page__half--back .page__number {
    left: 1rem;
}

.page__half {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transform: rotateY(calc(var(--rotation) * 1deg))
        translate3d(0, 0, calc((0.5 * var(--coefficient)) * 1px));
    -webkit-clip-path: inset(0 0.5% 0 0.5%);
    clip-path: inset(0 0.5% 0 0.5%);
    background: var(--page_bg);
}

.page__half--front {
    --rotation: 0;
    --coefficient: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 0 5% 5% 0;
}

.page__half--back {
    --rotation: 180;
    --coefficient: 2;
    border-radius: 5% 0 0 5%;
}

.book {
    height: 75%;
    position: fixed;
    width: 40%;
    min-width: 150px;
    min-height: 200px;
    top: 20%;
    right: 10%;
    transform-style: preserve-3d;
    perspective: 1200px;
}

.book__insert {
    content: "";
    position: absolute;
    height: 94%;
    width: 94%;
    background: var(--code);
    top: 50%;
    right: -1rem;
    transform: translate(0, -50%);
    border-radius: 5% 0 0 5%;
}

.book__spine {
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    background: var(--spine);
    transform-origin: 0 50%;
    width: 12px;
    transform: translate3d(0, 0, -13px) scaleX(1) rotateY(0deg);
}

.book__page {
    position: absolute;
    left: 2%;
    top: 50%;
    border-radius: 0 5% 5% 0;
    transform: translate(0, -50%);
    height: 94%;
    width: 94%;
    z-index: calc(((var(--page-count) + 2) - var(--page-index)) * 2);
    transform-origin: 0 50%;
}

.book__cover {
    border-radius: 0 5% 5% 0;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    background: var(--cover);
}

.book__cover--front {
    transform-origin: 0 50%;
}

.book__cover--front .page__half--back {
    border-right: 1rem solid var(--spine);
}

.book__cover--back {
    transform-origin: 0 50%;
}

.book__cover--back .page__half--front {
    border-left: 1rem solid var(--spine);
}

.book__cover--back .book__insert {
    left: 0;
    border-radius: 0 5% 5% 0;
}

.book__page:not(.book__cover) .page__half {
    background: var(--page_bg);
}

.sticker {
    height: 15%;
    position: absolute;
    bottom: 5%;
    right: 5%;
    transform: rotate(-25deg);
}

.code {
    line-height: 1.2;
    font-family: monospace;
    white-space: pre-line;
    max-width: 100%;
    max-height: 100%;
    font-weight: 700;
    color: #0f0f0f;
    text-shadow: 2px 2px 0 #1c1c1c;
    border-radius: 5%;
    display: block;
    overflow: hidden;
}

.gsap-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    height: 50%;
}

.book__page img {
    width: 100%;
    height: 100%;
    -o-object-fit: center;
    object-fit: center;
    z-index: 2;
}

.book__page .book_title {
    margin-top: 10px;
    font-size: 25px;
    font-weight: 500;
    font-family: var(--poppins);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    font-size: 30px;
    color: #fff;
}

.book__page .work .title h2 {
    text-align: center;
    font-size: 22px;
    margin-bottom: 20px;
    font-family: var(--poppins);
}

.book__page .work .title {
    width: 40%;
    margin: 0 auto 20px;
}

.book__page .work .content p {
    padding: 0 30px;
    font-size: 14px;
    text-align: justify;
}

.book__page .work .involved {
    padding: 10px 20px 20px 30px;
}

.book__page .work .involved .service_box {
    margin-top: 10px;
}

.book__page .work .involved h4 {
    font-size: 20px;
    font-family: var(--poppins);
}

.book__page .work .involved .involve_text a {
    font-weight: 500;
    color: #000;
    text-decoration: none;
    font-family: var(--poppins);
    font-size: 14px;
}

.book__page .first_page p {
    font-size: 30px;
    font-family: var(--menu_font);
}

.book__page .work .visit_site a {
    color: #000;
    text-decoration: none;
    font-weight: 600;
    padding: 5px 20px;
    background-color: #faa500;
    border-radius: 15px;
}

.info {
    position: fixed;
    top: 50%;
    left: 20%;
}

.info h3 {
    font-weight: 700;
    font-family: var(--poppins);
    line-height: 30px;
}

.info h4 {
    font-family: var(--poppins);
}

.info .button_group {
    margin-top: 5%;
    display: flex;
    gap: 20px;
}

.button_group > div {
    cursor: pointer;
}

.info .button_group a {
    text-decoration: none;
    color: #000;
}

.info .button_group .ser_btn {
    border: 1px solid #000;
    padding: 7px 25px;
    border-radius: 30px;
    position: relative;
    overflow: hidden;
    background: var(--yellow-color);
    z-index: 1;
}

.info .button_group .ser_btn::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 20px;
    z-index: -1;
    transition: transform 0.4s;
    transform: scaleX(0);
    transform-origin: right;
}

.info .button_group .ser_btn:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

.info .button_group .ser_btn:hover {
    background: transparent;
}

.info .button_group .ser_btn i {
    font-size: var(--icon_font-size);
    vertical-align: middle;
}

@media (min-width: 1400px) {
    .container {
        max-width: 1140px !important;
    }
}

#circle {
    border: 3px solid #fa6400;
    border-radius: 50%;
    display: block;
    height: 30px;
    position: absolute;
    transition: all 0.1s ease;
    width: 30px;
    z-index: -1;
    display: none;
}

.optionWrap1,
.optionWrap3,
.optionWrap4 {
    display: grid;
    padding: 0 18px;
}

.optionWrap1 {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
}

.optionWrap1.mobile-view-grid {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    padding: 0;
    gap: 5px;
}

.headerOption.stepV2Orv3 .optionWrap1 {
    height: 42px;
    margin-bottom: 35px;
}

.optionWrap2 {
    padding: 0 20px;
}

.inputWrap input:checked ~ .radioCustom {
    background-color: #faa500;
    border-color: #faa500;
}

.radio-toolbar {
    height: 32px;
    width: 200px;
    margin-top: 16px;
}

.radio-toolbar input[type="radio"] {
    opacity: 0;
    position: fixed;
    width: 0;
}

.radio-toolbar label {
    display: inline-block;
    height: 32px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #faa500;
    border-radius: 6px;
    background-color: #fff;
    color: #000;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 17px;
    text-align: center;
    padding-top: 7px;
    cursor: pointer;
}

@media screen and (max-width: 600px) {
    .radio-toolbar label {
        font-size: 12px;
    }

    .radio-toolbar {
        width: 150px;
    }

    .radio-toolbar label {
        width: 100%;
    }
}

input[type="text"]:focus {
    border-color: #faa500;
    outline: 0 none;
}

.form-select:focus {
    border-color: #faa500 !important;
    outline: 0 none !important;
}

.radio-toolbar label:hover {
    background-color: #faa500;
    color: #fff;
}

.radio-toolbar input[type="radio"]:checked + label {
    background-color: #faa500;
    color: #fff;
    box-shadow: 0 10px 16px -10px rgba(239, 49, 0, 1);
}

#renovate {
    position: absolute;
    left: 15px;
    top: 17px;
}

.checkWrap1 {
    padding: 15px 0;
    height: 20px;
    width: 150px;
    position: relative;
    border: 1px solid #979797;
    border-radius: 50px;
    margin: 10px 0;
    text-align: center;
}

.checkWrap1 label {
    font-size: 12px;
    color: #212121;
    width: 100%;
    height: 20px;
    line-height: 20px;
    pointer-events: auto;
    cursor: pointer;
}

.checkWrap1 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkCustom1 {
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 50px;
    z-index: -1;
}

.checkWrap1:hover input ~ .checkCustom1 {
    background-color: #e0e0e0;
}

.checkWrap1 input:checked ~ .checkCustom1 {
    background-color: #e71c24;
    color: #fff;
}

.textWrap {
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    overflow: visible;
    flex-wrap: wrap;
}

.textWrap label {
    color: #888;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 16px;
    margin-top: 19px;
    padding-bottom: 10px;
}

.textWrap input {
    font-size: 14px;
    border-style: none;
    padding-bottom: 5px;
    color: #9b9b9b;
}

#name0.form-input {
    margin-top: 16px;
}

.textWrap input,
.selectWrap select {
    border-radius: 0;
    border-bottom: 1px solid #ccc !important;
    color: #000;
    font-size: 14px;
    height: 37px;
}

.textWrap input:focus {
    outline: none;
}

.checkWrap2 {
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    position: relative;
}

.checkWrap2 label,
.input-group label {
    color: #868686 !important;
    font-size: 13px;
    float: left;
    cursor: pointer;
    margin: 0;
}

.checkWrap2 input {
    font-size: 14px !important;
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 22px;
    width: 100%;
    left: 0;
}

.checkCustom2 {
    height: 18px;
    width: 18px;
    border: 1px solid #979797;
    margin-right: 0;
    z-index: -1;
    float: right;
    bottom: 25px;
    right: 0;
}

.checkWrap2,
.input-group {
    clear: both;
    display: block;
    float: left;
    width: 100%;
    padding: 13px 0;
    border-bottom: 1px solid #e4e4e4;
}

.optionWrap2 .input-group:last-child {
    margin-bottom: 20px;
}

.checkWrap2:first-child {
    padding-top: 0;
    margin-top: 24px;
}

.checkWrap2 input:checked ~ .checkCustom2 {
    background-color: #e71c24;
    border-color: #faa500;
}

.optionWrap3 > div {
    margin-bottom: 25px;
}

.selectWrap {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.selectWrap select {
    color: #9b9b9b;
    font-size: 12px;
    width: 100%;
    line-height: 0;
    border-style: none;
    background: 0 0;
    cursor: pointer;
    text-align: left;
    line-height: 17px;
    -webkit-appearance: none;
    background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyBmaWxsPSdncmV5JyBoZWlnaHQ9JzI0JyB2aWV3Qm94PScwIDAgMjQgMjQnIHdpZHRoPScyNCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNNyAxMGw1IDUgNS01eicvPjxwYXRoIGQ9J00wIDBoMjR2MjRIMHonIGZpbGw9J25vbmUnLz48L3N2Zz4=);
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-position-y: 5px;
}

.selectWrap select option {
    border-style: none;
    outline: none;
}

.selectWrap select:focus {
    outline: none;
}

.signInWrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.signInText {
    font-size: 13px;
    padding: 15px;
    text-align: center;
    height: 16px;
    color: #4a4a4a;
    font-size: 13px;
    letter-spacing: 0;
    line-height: 16px;
    text-align: center;
}

.signInText a {
    color: #e71c24;
}

.signInFooter {
    line-height: 0;
    margin-top: 8px;
    margin-bottom: 20px;
}

.signInFooter a {
    color: #888;
    font-size: 10px;
    text-decoration: underline;
}

.signInFooter a:first-child {
    border-right: 1px solid #888;
    padding-right: 10px;
    margin-right: 10px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 25px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 4px;
    background-color: #fff;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

input:checked + .slider {
    background-color: #09aa2f;
}

input:focus + .slider {
    box-shadow: 0 0 1px #ef3100;
}

input:checked + .slider:before {
    -webkit-transform: translateX(34px);
    -ms-transform: translateX(26px);
    transform: translateX(34px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

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

.assistancebtn a {
    background-size: 60% 100%;
    border-radius: 50px;
    padding: 7px 25px;
    margin-right: 20px;
    font-family: var(--menu-font);
    color: #000;
    text-decoration: none;
    height: 50px;
    width: 50px;
}

.desktopshow {
    display: block;
}

@media only screen and (max-width: 600px) {
    .desktopshow {
        display: none;
    }

    .radio-toolbar {
        width: 178px !important;
    }

    .nextbtn {
        width: 364px !important;
        margin: 0 auto;
        display: block;
    }

    .slider-container {
        right: -78% !important;
    }
}

.row.mt-4.whatsapp-button {
    position: relative;
}

.slider-container {
    position: absolute;
    right: 0;
}

.privacy_policy {
    margin: 120px 0 50px;
}

.privacy_policy p,
.privacy_policy ul li,
.privacy_policy h4 {
    font-family: "Poppins";
}

.privacy_policy h3 {
    text-align: center;
    margin-bottom: 35px;
    font-weight: 700;
}

/** Blog Page Style **/

.blog_section {
    padding: 120px 0 50px;
}

.blog_col {
    border: 1px solid #e6e6e6;
    padding: 20px;
    border-radius: 10px;
    height: 100%;
}

.blog_img img {
    min-height: 220px;
}

.blog_content_first {
    margin: 15px 0 10px;
    display: flex;
    justify-content: space-between;
}

.blog_date {
    font-weight: 500;
}

.blog_content_second h3 {
    font-size: 18px;
    margin-top: 20px;
}

.viewblog {
    padding: 120px 0 50px;
}

.viewblog .badge {
    font-size: 16px;
}

.viewblog .blog_date {
    font-weight: 700;
}

.viewblog .titles {
    display: flex;
    align-items: center;
    font-family: "Poppins";
    justify-content: center;
}

.viewblog .titles h3 {
    margin-bottom: 5%;
}

.viewblog .big_blog_img img {
    border-radius: 10px;
    box-shadow: 1px 8px 25px -8px rgba(0, 0, 0, 0.4);
}

.blog_section a {
    text-decoration: none;
    color: #000;
}

.blog_section a:hover {
    color: inherit;
}

.mapboxgl-marker {
    background-image: url(/assets/images/loc.gif);
    background-size: cover;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 5;
}

#map svg {
    display: none;
}

#map::after {
    content: "";
    background-color: #fff;
    position: absolute;
    height: 100%;
    width: 100%;
    mix-blend-mode: saturation;
    z-index: 3;
}

.custom_soft {
    padding-bottom: 50px !important;
    padding-top: 175px;
}

.custom_soft .content h2 {
    font-size: 36px;
    font-weight: 600;
    font-family: var(--poppins);
    color: rgba(0, 0, 0, 1);
}

.custom_soft .content span {
    font-size: 36px;
    font-weight: 600;
    font-family: var(--poppins);
    color: rgba(249, 159, 1, 1);
}

.custom_soft .content h2 span {
    font-size: 36px;
}

.custom_soft .button_group .ser_btn {
    border: 1px solid #000;
    padding: 8px 15px;
    border-radius: 30px;
    position: relative;
    overflow: hidden;
    z-index: 1;
    /* background: url(../images/home/Button.png); */
    background-color: rgba(250, 163, 1, 1);
    background-position: center;
    background-size: 50% 100%;
    box-shadow: 0 2px 5px rgba(0 0 0 / 40%);
}

.custom_soft .button_group {
    display: flex;
    justify-content: flex-start;
    gap: 30px;
    font-size: 14px;
    margin-top: 7%;
    flex-wrap: wrap;
}

.custom_soft .content p {
    padding-right: 100px;
}

.howgett p {
    font-size: 14px;
    font-weight: 400;
    font-family: var(--menu-font);
    color: rgba(0, 0, 0, 1);
    text-align: center;
    margin: 0px;
}

.howgett h2 {
    font-size: 36px;
    font-weight: 600;
    font-family: var(--poppins);
    color: rgba(0, 0, 0, 1);
    text-align: center;
    margin-bottom: 20px;
}

.howgett h2 span {
    font-size: 36px;
    font-weight: 300;
    font-family: var(--poppins);
    color: rgba(0, 0, 0, 1);
}

.ocbac {
    text-align: center;
    font-size: 119px;
    font-weight: 700;
    font-family: var(--poppins);
    /* border: 7px solid #FF6200; */
    color: #ef3100;
    position: absolute;
    top: 48%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 0;
    /* padding: 91px; */
    text-shadow: 0px 0px 0 #ff6200, /* Top-left border */ 0px 0px 0 #ff6200,
        /* Top-right border */ 0px 0px 0 #ff6200,
        /* Bottom-left border */ 0px 0px 0 #ff6200;
}

.good_company1 {
    background: #ef3100;
    padding: 50px;
    background-image: url(../images/services/ourcliennt.png);
    background-repeat: no-repeat;
    background-position: center;
}

.good_company {
    position: relative;
    background: rgba(239, 49, 0, 1);
    padding: 81px 0;
}

.good_company1 h2 {
    color: rgba(255, 255, 255, 1);
    text-align: center;
    margin-bottom: 15px;
    font-family: var(--poppins);
    font-size: 50px;
    font-weight: 600;
}

.good_company h2 {
    color: rgba(255, 255, 255, 1);
    text-align: center;
    margin-bottom: 15px;
    font-family: var(--poppins);
    font-size: 50px;
    font-weight: 600;
    z-index: 99999;
    position: absolute;
    padding: -24px;
    /* text-align: center; */
    right: 335px;
    top: 49px;
    padding: 1px;
}

.digital_built {
    background: rgba(250, 163, 1, 1);
    padding: 50px;
}

.digital_built h2 {
    color: rgba(255, 255, 255, 1);
    text-align: center;
    margin-bottom: 15px;
    font-family: var(--poppins);
    font-size: 50px;
    font-weight: 600;
}

.digital_built h5 {
    color: rgba(255, 255, 255, 1);
    text-align: center;
    margin-bottom: 15px;
    font-family: var(--poppins);
    font-size: 30px;
    font-weight: 500;
    padding: 0px 35px 0px 35px;
}

.digital_built .contact_us button {
    border: 1px solid #000;
    border-radius: 25px;
    padding: 10px 30px;
    font-family: var(--menu-font);
    background-color: #fff;
    margin-top: 30px;
    font-size: 20px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.digital_built .contact_us button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ef3100;
    border-radius: 20px;
    transition: transform 0.3s;
    transform: scaleY(0);
    transform-origin: top;
    z-index: -1;
}

.digital_built .contact_us button:hover::before {
    transform: scaleY(1);
    transform-origin: bottom;
}

.blink_eyes {
    padding-top: 65px;
    /* padding-bottom: 50px; */
}

.blink_eyes h2 {
    color: rgba(0, 0, 0, 1);
    text-align: center;
    margin-bottom: 15px;
    font-family: var(--poppins);
    font-size: 31px;
    font-weight: 600;
}

.blinkimg {
    width: 100%;
    margin-bottom: -100px;
    margin-top: -190px;
}

.potfoli_sl1 h2 {
    color: rgba(0, 0, 0, 1);
    text-align: center;
    margin-bottom: 40px;
    font-family: var(--poppins);
    font-size: 40px;
    font-weight: 600;
}

.potfoli_sl {
    /* background-image: url(../images/services/portoback1.png); */
    background-image: url(../images/services/portoback2.png);
    background-repeat: no-repeat;
    background-position: right;
    background-color: rgba(223, 223, 223, 1);
    padding: 50px;
}

.slick-prev,
.slick-next {
    display: none;
}

/* Style and set custom images for the buttons */
.custom-prev {
    position: absolute;
    /* top: 50%; */
    left: 90px;
    /* Adjust the left position as needed */
    transform: translateY(-255%);
    width: 41px;
    /* Adjust the width as needed */
    height: 51px;
    /* Adjust the height as needed */
    background-image: url("../images/services/previbut.png");
    /* Replace with your image path */
    background-size: cover;
    background-repeat: no-repeat;
}

.custom-next {
    position: absolute;
    /* top: 50%; */
    right: 90px;
    /* Adjust the right position as needed */
    transform: translateY(-255%);
    width: 41px;
    /* Adjust the width as needed */
    height: 51px;
    /* Adjust the height as needed */
    background-image: url("../images/services/nextbut.png");
    /* Replace with your image path */
    background-size: cover;
    background-repeat: no-repeat;
}

.custom-prev,
.custom-next {
    box-sizing: content-box;
    /* ... other styles ... */
}

.getst_sec {
    padding-top: 50px;
    padding-bottom: 20px;
    position: relative;
}

.howee {
    padding-bottom: 50px;
    padding-top: 50px;
}

.howgett {
    padding-bottom: 50px;
    background-image: url(../images/services/howgetback.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.tbh3 {
    font-family: var(--poppins);
    font-size: 21px;
    font-weight: 600;
    padding: 10px 30px 0px 25px;
}

.getst_sec .tbp {
    font-family: var(--menu-font);
    font-size: 12px;
    font-weight: 400;
    padding: 0px 15px 5px 10px;
}

.text_bos {
    /* border: 1px solid #000; */
    display: flex;
    width: 330px;
    height: 165px;
    position: absolute;
    left: 16%;
    top: 17%;
    justify-content: space-evenly;
    flex-direction: column;
    background-image: url(../images/services/bbx1.png);
    background-repeat: no-repeat;
}

.boxx1 {
    position: absolute;
    top: 11%;
    left: 54%;
    /* display: flex; */
    width: 34%;
}

.bos_img {
    position: absolute;
    top: -119px;
    left: 40%;
}

.boxx2 {
    position: absolute;
    top: 28%;
    left: 16%;
    /* display: flex; */
    width: 34%;
}

.text_bos1 {
    /* border: 1px solid #000; */
    display: flex;
    width: 330px;
    height: 185px;
    position: absolute;
    left: 16%;
    top: 17%;
    justify-content: space-evenly;
    flex-direction: column;
    background-image: url(../images/services/bbbx2.png);
    background-repeat: no-repeat;
}

.bos_img1 {
    position: absolute;
    top: -119px;
    left: 40%;
}

.tbh31 {
    font-family: var(--poppins);
    font-size: 21px;
    font-weight: 600;
    padding: 10px 30px 0px 25px;
}

.getst_sec .tbp1 {
    font-family: var(--menu-font);
    font-size: 12px;
    font-weight: 400;
    padding: 0px 24px 5px 10px;
}

.boxx3 {
    position: absolute;
    top: 47%;
    left: 54%;
    /* display: flex; */
    width: 34%;
}

.text_bos2 {
    /* border: 1px solid #000; */
    display: flex;
    width: 380px;
    height: 185px;
    position: absolute;
    left: 16%;
    top: 17%;
    justify-content: space-evenly;
    flex-direction: column;
    background-image: url(../images/services/bbbx3.png);
    background-repeat: no-repeat;
}

.bos_img2 {
    position: absolute;
    top: -119px;
    left: 42%;
}

.tbh32 {
    font-family: var(--poppins);
    font-size: 21px;
    font-weight: 600;
    padding: 10px 30px 0px 25px;
}

.getst_sec .tbp2 {
    font-family: var(--menu-font);
    font-size: 12px;
    font-weight: 400;
    padding: 0px 15px 20px 10px;
}

.boxx4 {
    position: absolute;
    top: 67%;
    left: 17%;
    /* display: flex; */
    width: 34%;
}

.text_bos3 {
    /* border: 1px solid #000; */
    display: flex;
    width: 380px;
    height: 185px;
    position: absolute;
    left: 16%;
    top: 17%;
    justify-content: space-evenly;
    flex-direction: column;
    background-image: url(../images/services/bbbx4.png);
    background-repeat: no-repeat;
}

.bos_img3 {
    position: absolute;
    top: -119px;
    left: 36%;
}

.tbh33 {
    font-family: var(--poppins);
    font-size: 21px;
    font-weight: 600;
    padding: 10px 98px 0px 25px;
}

.getst_sec .tbp3 {
    font-family: var(--menu-font);
    font-size: 12px;
    font-weight: 400;
    padding: 0px 98px 33px 10px;
}

.boxx5 {
    position: absolute;
    top: 86%;
    left: 55%;
    /* display: flex; */
    width: 34%;
}

.text_bos4 {
    /* border: 1px solid #000; */
    display: flex;
    width: 380px;
    height: 185px;
    position: absolute;
    left: 16%;
    top: 17%;
    justify-content: space-evenly;
    flex-direction: column;
    background-image: url(../images/services/bbbx5.png);
    background-repeat: no-repeat;
}

.bos_img4 {
    position: absolute;
    top: -119px;
    left: 42%;
}

.tbh34 {
    font-family: var(--poppins);
    font-size: 21px;
    font-weight: 600;
    padding: 10px 30px 0px 25px;
}

.getst_sec .tbp4 {
    font-family: var(--menu-font);
    font-size: 12px;
    font-weight: 400;
    padding: 0px 45px 30px 10px;
}

.wedoit_sec h2 {
    font-size: 36px;
    font-weight: 600;
    font-family: var(--poppins);
    color: rgba(0, 0, 0, 1);
    text-align: center;
    margin-bottom: 20px;
}

.wedoit_sec h2 span {
    font-size: 36px;
    font-weight: 300;
    font-family: var(--poppins);
    color: rgba(0, 0, 0, 1);
}

.wedoit_sec {
    padding-bottom: 50px;
    background-image: url(../images/services/howgetback.png);
    background-repeat: no-repeat;
    background-size: cover;
    /* position: relative; */
}

.wedit {
    padding-bottom: 50px;
    padding-top: 50px;
}

.gerowg {
    row-gap: 25px;
}

.gotexh1 {
    text-align: center;
    padding-top: 15px;
}

.gopp1 {
    text-align: center;
    padding: 0px 1px 0px 0px;
}

.linerou1 {
    border: 3px dashed transparent;
    /* Set the initial border style to dashed and color to transparent */
    border-radius: 45px;
    height: 163px;
    position: relative;
    /* Ensure relative positioning */
    transition: border-color 0.3s ease;
    /* Add a transition for smooth effect */
}

.linerou1:hover {
    border-color: #000;
    /* Change the border color on hover */
}

.rooun1 span {
    font-size: 50px;
    font-weight: 600;
    font-family: var(--poppins);
    color: rgba(0, 0, 0, 1);
}

.rooun1 {
    background-color: rgba(254, 177, 0, 1);
    width: 76px;
    height: 75px;
    position: absolute;
    top: -42px;
    border-radius: 39px;
    right: -12px;
    text-align: center;
    transition: background-color 0.3s ease;
    opacity: 0;
}

.linerou1:hover .rooun1 {
    opacity: 1;
    /* your desired hover color here */
}

.gotexh2 {
    text-align: center;
    padding-top: 24px;
}

.gopp2 {
    text-align: center;
    padding: 0px 6px 0px 6px;
}

.linerou2 {
    border: 3px dashed transparent;
    /* Set the initial border style to dashed and color to transparent */
    border-radius: 45px;
    height: 150px;
    position: relative;
    /* Ensure relative positioning */
    transition: border-color 0.3s ease;
    /* Add a transition for smooth effect */
}

.linerou2:hover {
    border-color: #000;
    /* Change the border color on hover */
}

.rooun2 span {
    font-size: 50px;
    font-weight: 600;
    font-family: var(--poppins);
    color: rgba(0, 0, 0, 1);
}

.rooun2 {
    background-color: rgba(254, 177, 0, 1);
    width: 76px;
    height: 75px;
    position: absolute;
    top: -42px;
    border-radius: 39px;
    /* right: -12px; */
    text-align: center;
    transition: background-color 0.3s ease;
    opacity: 0;
}

.linerou2:hover .rooun2 {
    opacity: 1;
    /* your desired hover color here */
}

.gotexh3 {
    text-align: center;
}

.gopp3 {
    text-align: center;
    padding: 0px 3px 0px 0px;
}

.linerou3 {
    border: 3px dashed transparent;
    /* Set the initial border style to dashed and color to transparent */
    border-radius: 45px;
    height: 163px;
    position: relative;
    /* Ensure relative positioning */
    transition: border-color 0.3s ease;
    /* Add a transition for smooth effect */
}

.linerou3:hover {
    border-color: #000;
    /* Change the border color on hover */
}

.rooun3 span {
    font-size: 50px;
    font-weight: 600;
    font-family: var(--poppins);
    color: rgba(0, 0, 0, 1);
}

.rooun3 {
    background-color: rgba(254, 177, 0, 1);
    width: 76px;
    height: 75px;
    position: absolute;
    top: -42px;
    border-radius: 39px;
    right: -12px;
    text-align: center;
    transition: background-color 0.3s ease;
    opacity: 0;
}

.linerou3:hover .rooun3 {
    opacity: 1;
    /* your desired hover color here */
}

.gotexh4 {
    text-align: center;
}

.gopp4 {
    text-align: center;
    padding: 0px 6px 0px 6px;
}

.linerou4 {
    border: 3px dashed transparent;
    /* Set the initial border style to dashed and color to transparent */
    border-radius: 45px;
    height: 160px;
    position: relative;
    /* Ensure relative positioning */
    transition: border-color 0.3s ease;
    /* Add a transition for smooth effect */
}

.linerou4:hover {
    border-color: #000;
    /* Change the border color on hover */
}

.rooun4 span {
    font-size: 50px;
    font-weight: 600;
    font-family: var(--poppins);
    color: rgba(0, 0, 0, 1);
}

.rooun4 {
    background-color: rgba(254, 177, 0, 1);
    width: 76px;
    height: 75px;
    position: absolute;
    top: -42px;
    border-radius: 39px;
    /* right: -12px; */
    text-align: center;
    transition: background-color 0.3s ease;
    opacity: 0;
}

.linerou4:hover .rooun4 {
    opacity: 1;
    /* your desired hover color here */
}

.gotexh5 {
    text-align: center;
    padding-top: 15px;
}

.gopp5 {
    text-align: center;
    padding: 0px 1px 0px 0px;
}

.linerou5 {
    border: 3px dashed transparent;
    /* Set the initial border style to dashed and color to transparent */
    border-radius: 45px;
    height: 163px;
    position: relative;
    /* Ensure relative positioning */
    transition: border-color 0.3s ease;
    /* Add a transition for smooth effect */
}

.linerou5:hover {
    border-color: #000;
    /* Change the border color on hover */
}

.rooun5 span {
    font-size: 50px;
    font-weight: 600;
    font-family: var(--poppins);
    color: rgba(0, 0, 0, 1);
}

.rooun5 {
    background-color: rgba(254, 177, 0, 1);
    width: 76px;
    height: 75px;
    position: absolute;
    top: -42px;
    border-radius: 39px;
    right: -12px;
    text-align: center;
    transition: background-color 0.3s ease;
    opacity: 0;
}

.linerou5:hover .rooun5 {
    opacity: 1;
    /* your desired hover color here */
}

.box_mm {
    text-align: center;
}

.text_mob {
    background-image: url(../images/services/bbbx1.png);
    background-repeat: no-repeat;
    height: 165px;
}

.tmoh {
    font-size: 18px;
    font-weight: 600;
    font-family: var(--poppins);
    color: rgba(0, 0, 0, 1);
    padding: 10px 30px 0px 0px;
}

.tmpp {
    font-size: 14px;
    font-weight: 400;
    font-family: var(--menu-font);
    color: rgba(0, 0, 0, 1);
    padding: 0px 45px 0px 30px;
}

.mi_mo {
    padding-bottom: 20px;
}

.howgett_mo p {
    font-size: 12px;
    font-weight: 400;
    font-family: var(--menu-font);
    color: rgba(0, 0, 0, 1);
    text-align: center;
    margin: 0px;
}

.howgett_mo h2 {
    font-size: 36px;
    font-weight: 600;
    font-family: var(--poppins);
    color: rgba(0, 0, 0, 1);
    text-align: center;
    margin-bottom: 20px;
}

.howgett_mo h2 span {
    font-size: 36px;
    font-weight: 300;
    font-family: var(--poppins);
    color: rgba(0, 0, 0, 1);
}

.howgett_mo {
    padding-bottom: 50px;
    background-image: url(../images/services/howgetback.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.box_mm1 {
    text-align: center;
}

.text_mob1 {
    background-image: url(../images/services/bbbx2.png);
    background-repeat: no-repeat;
    height: 190px;
}

.tmoh1 {
    font-size: 18px;
    font-weight: 600;
    font-family: var(--poppins);
    color: rgba(0, 0, 0, 1);
    padding: 10px 30px 0px 0px;
}

.tmpp1 {
    font-size: 14px;
    font-weight: 400;
    font-family: var(--menu-font);
    color: rgba(0, 0, 0, 1);
    padding: 0px 65px 0px 25px;
}

.mi_mo1 {
    padding-bottom: 20px;
    padding-top: 20px;
}

.box_mm2 {
    text-align: center;
}

.text_mob2 {
    background-image: url(../images/services/bbbx3.png);
    background-repeat: no-repeat;
    height: 165px;
    width: 375px;
}

.tmoh2 {
    font-size: 18px;
    font-weight: 600;
    font-family: var(--poppins);
    color: rgba(0, 0, 0, 1);
    padding: 10px 30px 0px 0px;
}

.tmpp2 {
    font-size: 14px;
    font-weight: 400;
    font-family: var(--menu-font);
    color: rgba(0, 0, 0, 1);
    padding: 0px 10px 0px 10px;
}

.mi_mo2 {
    padding-bottom: 20px;
    padding-top: 20px;
}

.box_mm3 {
    text-align: center;
    position: relative;
    left: 30px;
}

.text_mob3 {
    background-image: url(../images/services/bbbx4.png);
    background-repeat: no-repeat;
    height: 165px;
}

.tmoh3 {
    font-size: 18px;
    font-weight: 600;
    font-family: var(--poppins);
    color: rgba(0, 0, 0, 1);
    padding: 10px 30px 0px 0px;
}

.tmpp3 {
    font-size: 14px;
    font-weight: 400;
    font-family: var(--menu-font);
    color: rgba(0, 0, 0, 1);
    padding: 0px 70px 0px 10px;
}

.mi_mo3 {
    padding-bottom: 20px;
    padding-top: 20px;
}

.box_mm4 {
    text-align: center;
}

.text_mob4 {
    background-image: url(../images/services/bbbx5.png);
    background-repeat: no-repeat;
    height: 165px;
    width: 350px;
}

.tmoh4 {
    font-size: 18px;
    font-weight: 600;
    font-family: var(--poppins);
    color: rgba(0, 0, 0, 1);
    padding: 10px 30px 0px 0px;
}

.tmpp4 {
    font-size: 14px;
    font-weight: 400;
    font-family: var(--menu-font);
    color: rgba(0, 0, 0, 1);
    padding: 0px 25px 0px 20px;
}

.mi_mo4 {
    padding-bottom: 20px;
    padding-top: 20px;
}

.wedoit_mob h2 {
    font-size: 36px;
    font-weight: 600;
    font-family: var(--poppins);
    color: rgba(0, 0, 0, 1);
    text-align: center;
    margin-bottom: 20px;
}

.wedoit_mob h2 span {
    font-size: 36px;
    font-weight: 300;
    font-family: var(--poppins);
    color: rgba(0, 0, 0, 1);
}

.wedoit_mob {
    padding-bottom: 50px;
    background-image: url(../images/services/howgetback.png);
    background-repeat: no-repeat;
    background-size: cover;
    /* position: relative; */
}

.morogap {
    row-gap: 20px;
}

.docon_bo {
    border: 3px dashed transparent;
    border-radius: 45px;
    height: 150px;
    position: relative;
    transition: border-color 0.3s ease;
    border-color: #000;
}

.mobro {
    background-color: rgba(254, 177, 0, 1);
    width: 50px;
    height: 50px;
    position: absolute;
    top: -22px;
    border-radius: 39px;
    left: -10px;
    /* right: -12px; */
    text-align: center;
    transition: background-color 0.3s ease;
}

.mobro span {
    font-size: 30px;
    font-weight: 600;
    font-family: var(--poppins);
    color: rgba(0, 0, 0, 1);
}

.doone_im {
    padding-bottom: 20px;
}

.doneh {
    font-size: 18px;
    font-weight: 600;
    font-family: var(--poppins);
    color: rgba(0, 0, 0, 1);
    padding: 10px 0px 0px 15px;
}

.donep {
    font-size: 12px;
    font-weight: 400;
    font-family: var(--menu-font);
    color: rgba(0, 0, 0, 1);
    padding: 0px 10px 0px 10px;
}

.docon_bo1 {
    border: 3px dashed transparent;
    border-radius: 45px;
    height: 150px;
    position: relative;
    transition: border-color 0.3s ease;
    border-color: #000;
}

.mobro1 {
    background-color: rgba(254, 177, 0, 1);
    width: 50px;
    height: 50px;
    position: absolute;
    top: -22px;
    border-radius: 39px;
    /* right: -12px; */
    text-align: center;
    transition: background-color 0.3s ease;
}

.mobro1 span {
    font-size: 30px;
    font-weight: 600;
    font-family: var(--poppins);
    color: rgba(0, 0, 0, 1);
}

.doone_im1 {
    padding-bottom: 20px;
    padding-top: 20px;
}

.doneh1 {
    font-size: 18px;
    font-weight: 600;
    font-family: var(--poppins);
    color: rgba(0, 0, 0, 1);
    padding: 10px 0px 0px 0px;
}

.donep1 {
    font-size: 12px;
    font-weight: 400;
    font-family: var(--menu-font);
    color: rgba(0, 0, 0, 1);
    padding: 0px 10px 0px 10px;
}

.docon_bo2 {
    border: 3px dashed transparent;
    border-radius: 45px;
    height: 190px;
    position: relative;
    transition: border-color 0.3s ease;
    border-color: #000;
}

.mobro2 {
    background-color: rgba(254, 177, 0, 1);
    width: 50px;
    height: 50px;
    position: absolute;
    top: -22px;
    border-radius: 39px;
    /* right: -12px; */
    text-align: center;
    transition: background-color 0.3s ease;
}

.mobro2 span {
    font-size: 30px;
    font-weight: 600;
    font-family: var(--poppins);
    color: rgba(0, 0, 0, 1);
}

.doone_im2 {
    padding-bottom: 20px;
    padding-top: 20px;
}

.doneh2 {
    font-size: 18px;
    font-weight: 600;
    font-family: var(--poppins);
    color: rgba(0, 0, 0, 1);
    padding: 10px 0px 0px 0px;
}

.donep2 {
    font-size: 12px;
    font-weight: 400;
    font-family: var(--menu-font);
    color: rgba(0, 0, 0, 1);
    padding: 0px 10px 0px 10px;
}

.docon_bo3 {
    border: 3px dashed transparent;
    border-radius: 45px;
    height: 190px;
    position: relative;
    transition: border-color 0.3s ease;
    border-color: #000;
}

.mobro3 {
    background-color: rgba(254, 177, 0, 1);
    width: 50px;
    height: 50px;
    position: absolute;
    top: -22px;
    border-radius: 39px;
    /* right: -12px; */
    text-align: center;
    transition: background-color 0.3s ease;
}

.mobro3 span {
    font-size: 30px;
    font-weight: 600;
    font-family: var(--poppins);
    color: rgba(0, 0, 0, 1);
}

.doone_im3 {
    padding-bottom: 20px;
    padding-top: 20px;
}

.doneh3 {
    font-size: 18px;
    font-weight: 600;
    font-family: var(--poppins);
    color: rgba(0, 0, 0, 1);
    padding: 10px 0px 0px 0px;
}

.donep3 {
    font-size: 12px;
    font-weight: 400;
    font-family: var(--menu-font);
    color: rgba(0, 0, 0, 1);
    padding: 10px 10px 0px 10px;
}

.docon_bo4 {
    border: 3px dashed transparent;
    border-radius: 45px;
    height: 150px;
    position: relative;
    transition: border-color 0.3s ease;
    border-color: #000;
}

.mobro4 {
    background-color: rgba(254, 177, 0, 1);
    width: 50px;
    height: 50px;
    position: absolute;
    top: -22px;
    border-radius: 39px;
    left: -5px;
    /* right: -12px; */
    text-align: center;
    transition: background-color 0.3s ease;
}

.mobro4 span {
    font-size: 30px;
    font-weight: 600;
    font-family: var(--poppins);
    color: rgba(0, 0, 0, 1);
}

.doone_im4 {
    padding-bottom: 20px;
    padding-top: 20px;
}

.doneh4 {
    font-size: 18px;
    font-weight: 600;
    font-family: var(--poppins);
    color: rgba(0, 0, 0, 1);
    padding: 20px 0px 0px 10px;
}

.donep4 {
    font-size: 12px;
    font-weight: 400;
    font-family: var(--menu-font);
    color: rgba(0, 0, 0, 1);
    padding: 0px 10px 0px 10px;
}

.bcor1 {
    opacity: 1;
}

.yco1 {
    opacity: 0;
}

.boxx1:hover .bcor1 {
    opacity: 0;
}

.boxx1:hover .yco1 {
    opacity: 1;
}

.bcor2 {
    opacity: 0;
}

.yco2 {
    opacity: 1;
}

.boxx2:hover .bcor2 {
    opacity: 1;
}

.boxx2:hover .yco2 {
    opacity: 0;
}

.bcor3 {
    opacity: 0;
}

.yco3 {
    opacity: 1;
}

.boxx3:hover .bcor3 {
    opacity: 1;
}

.boxx3:hover .yco3 {
    opacity: 0;
}

.bcor4 {
    opacity: 0;
}

.yco4 {
    opacity: 1;
}

.boxx4:hover .bcor4 {
    opacity: 1;
}

.boxx4:hover .yco4 {
    opacity: 0;
}

.bcor5 {
    opacity: 0;
}

.yco5 {
    opacity: 1;
}

.boxx5:hover .bcor5 {
    opacity: 1;
}

.boxx5:hover .yco5 {
    opacity: 0;
}

/* footer contact design */

.footer_menu {
    position: relative;
}

.footer_contact_design {
    position: absolute;
    left: 40%;
    bottom: -15px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    text-align: center;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    gap: 30px;
    border-bottom: 2px solid var(--yellow-color);
    border-top: 2px solid var(--green-color);
}

.footer_contact_design img {
    width: 50px;
}

.footer_contact_design .support_content p {
    margin-bottom: 10px;
}

.footer_contact_design a {
    text-decoration: none !important;
    color: black;
}

.footer_contact_design a p {
    margin: 0;
}

.footer_contact_design:hover img {
    animation: trin2 1.5s infinite linear;
}

@keyframes trin2 {
    from {
        transform: rotate3d(0, 0, 1, 0deg);
    }

    20%,
    32%,
    44%,
    56%,
    68% {
        transform: rotate3d(0, 0, 1, 0deg);
    }

    23%,
    35%,
    47%,
    59%,
    71% {
        transform: rotate3d(0, 0, 1, 15deg);
    }

    26%,
    38%,
    50%,
    62%,
    74% {
        transform: rotate3d(0, 0, 1, 0deg);
    }

    29%,
    41%,
    53%,
    65%,
    77% {
        transform: rotate3d(0, 0, 1, -15deg);
    }

    80% {
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

.fsize {
    font-size: 35px !important;
}

.ffsize {
    font-size: 18px !important;
}

.masize {
    font-family: var(--poppins);
    font-size: 30px !important;
    font-weight: 600;
    margin-bottom: 3%;
}

@media (max-width: 550px) {
    .sizess {
        font-size: 20px !important;
    }

    .fsize {
        font-size: 20px !important;
    }

    .ffsize {
        font-size: 13px !important;
    }

    .masize {
        font-family: var(--poppins);
        font-size: 20px !important;
        font-weight: 600;
        margin-bottom: 3%;
        text-align: center;
    }
}

/*============== partners details page styles ==============*/

.partner-margin-top {
    margin-top: 12%;
    margin-bottom: 50px;
}

.partner-service-content,
.partner-why-shoose {
    background: #f6f6f6;
    padding: 20px 50px !important;
    position: relative;
}

.partner-service-content .tie {
    position: absolute;
    content: "";
    width: 13px;
    height: 85px;
    box-shadow: 0 0 10px -4px rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    border: 2px solid #aaaeb1;
    background: #fff;
    background-image: repeating-linear-gradient(
        transparent,
        transparent 2px,
        #c9cbcc 2px,
        #c9cbcc 4px
    );
    z-index: 1;
    bottom: -7.5%;
}

.partner-service-content .tie.left {
    left: 2%;
}

.partner-service-content .tie.right {
    right: 2%;
}

section.partners-details-section::before {
    position: absolute;
    top: -28%;
    left: 0;
    width: 100%;
    height: 124%;
    background: #faa500;
    content: "";
    border-radius: 50%;
    z-index: -1;
}

.partner-margin-top .partners-details-section {
    background-image: linear-gradient(
            rgba(255, 255, 255, 0.7),
            rgba(255, 255, 255, 0.7)
        ),
        url(../images/home/our_process/bg.png);
    background-position-x: 15%;
    background-size: 25%;
    background-repeat: no-repeat;
}

.partners-details-section .partner-left-side {
    /* height: 90vh;
    overflow-y: auto; */
}

/* .partners-details-section p{
    margin: 0;
} */

/* .partners-details-section .address-box {
    margin-top: 12%;
} */

.partners-details-section .partner-left-side h3 {
    font-weight: 700;
    text-transform: uppercase;
    background: #faa500;
    text-align: center;
    padding: 5px 15px;
    font-size: 25px;
    margin-bottom: 4%;
}

.partners-details-section .address-box p {
    line-height: 1.8;
}

.partners-details-section .shift-info-box .title {
    display: flex;
    gap: 7px;
}

.partners-details-section .shift-info-box lottie-player,
.partners-details-section
    .information-box
    .inner-contact-box
    .get-direction
    lottie-player {
    width: 40px;
}

.partners-details-section .shift-info-box .timing {
    font-size: 14px;
}

.partners-details-section .information-box {
    /* background: #F6F6F6; */
    padding: 0 25px;
}

.partners-details-section .information-box .inner-contact-box .get-direction p {
    font-size: 16px;
}

.partners-details-section .information-box .inner-contact-box .get-direction {
    display: flex;
    align-items: center;
    gap: 10px;
}

.partners-details-section .information-box .inner-contact-box::before {
    content: "";
    position: absolute;
    right: 8%;
    top: 0%;
    width: 3px;
    height: 100%;
    background: #faa500;
}

.partners-details-section
    .information-box
    .inner-contact-box
    .contact-number
    .inner,
.partners-details-section
    .information-box
    .inner-contact-box
    .contact-number
    .title {
    display: flex;
    gap: 10px;
    align-items: center;
}

.partners-details-section
    .information-box
    .inner-contact-box
    .contact-number
    .inner
    p {
    font-size: 14px;
}

.partners-details-section .shift-timing-inner p {
    font-size: 16px;
}

.partners-details-section .services-details {
    padding: 30px;
}

.partners-details-section .services-details .medias img {
    width: 50px;
}

.partners-details-section .services-details .medias .content {
    margin-top: 10px;
}

.partners-details-section .services-details .medias .content p {
    font-size: 14px;
}

.partner-location iframe {
    height: 90vh;
}

.partners-details-section .information-box .button_group {
    margin-top: 5%;
    display: flex;
    gap: 10px;
    font-size: 12px;
    font-weight: 800;
    justify-content: start;
}

.partners-details-section .information-box .button_group a {
    text-decoration: none;
    color: #000;
}

.partners-details-section .information-box .button_group .ser_btn {
    border: 1px solid #000;
    padding: 8px 15px;
    border-radius: 30px;
    position: relative;
    overflow: hidden;
    z-index: 1;
    background: url(../images/home/Button.png);
    background-position: center;
    background-size: 50% 100%;
    box-shadow: 0 2px 5px rgba(0 0 0 / 40%);
}

.partners-details-section .information-box .button_group .ser_btn::before {
    position: absolute;
    content: "";
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgb(255, 255, 255);
    z-index: -1;
    transform: scaleX(0);
    transform-origin: right center;
    border-radius: 20px;
    transition: transform 0.4s;
}

.partners-details-section
    .information-box
    .button_group
    .ser_btn:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

/* -------- scroll bar -----------*/

/* width */
.partner-left-side::-webkit-scrollbar {
    width: 8px;
}

/* Track */
.partner-left-side::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}

/* Handle */
.partner-left-side::-webkit-scrollbar-thumb {
    background: var(--yellow-color);
    border-radius: 10px;
}

/* Handle on hover */
.partner-left-side::-webkit-scrollbar-thumb:hover {
    background: #000000a3;
}

/* .navbar-toggler-icon {
    position: relative;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    border-radius: 10px;
    background-color: black;
}

.navbar-toggler-icon::before {
    top: 5px;
    left: 0;
}


.navbar-toggler-icon::after {
    top: 10px;
    right: 0;
} */

.card-para p {
    padding: 15px 20px;
    background: #f1f1f1;
    width: fit-content;
    margin: auto;
    border-radius: 30px;
}

/* -------------------- Partner list page style ----------------------- */

.partners-box .get-direction {
    display: flex;
    align-items: center;
    gap: 10px;
}

.partners-box .get-direction lottie-player {
    width: 50px;
}

.partners-row {
    margin-top: 11% !important;
    padding: 20px;
}

.partners-row .col-lg-12 {
    padding: 30px;
    border: 1px solid #dedede;
    border-radius: 10px;
    margin-bottom: 20px;
}

.partners-box .row a {
    text-decoration: none;
}

.explore {
    padding: 5px 10px;
    background: #faa500;
    width: fit-content;
    border-radius: 5px;
    color: #000;
}

.partners-box .mobile {
    margin: 0;
    color: #000;
    display: flex;
    gap: 5px;
    justify-content: end;
    padding: 5px 12px;
    border: 1px solid #b2b2b2;
    width: fit-content;
    margin-left: auto;
    border-radius: 8px;
    background: #f4f4f4;
}

.partners-box .mobile img {
    width: 22px;
}

.pin-icon {
    position: absolute;
    top: -15px;
    right: -25px;
    width: 10%;
    height: 20%;
}

.partners-section .partner-left-side {
    height: 90vh;
    overflow-y: auto;
}

#partnersmap {
    position: relative;
}

#partnersmap::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: transparent;
    top: 0;
    left: 0;
}

.faq_section {
    background-color: #f6f6f6;
}

.faq_section .faq-content img {
    padding: 3px;
    border-radius: 5px;
    border: 1px solid;
    background-color: #fff;
}

.faq_section .faq-content p {
    text-align: justify;
    font-size: 15px;
}

.job-card {
    padding: 0 15px;
}

.job-card p {
    font-family: "Poppins";
}

/* Expo enquiry form */

.expo-enquiry-form .query_form {
    margin: 10% 50px 30px 15px;
    padding: 20px;
    border: 1px solid;
    border-radius: 15px;
    border-color: #f2f2f2;
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0.15);
    background: #f6f6f6;
}

.expo-enquiry-form .query_form h6 {
    font-size: 24px;
    margin-bottom: 20px;
}

.expo-page-section.partners-section .partner-left-side {
    height: 130vh;
}