/*-----------------------------------------------------------------------------------
document.addEventListener("DOMContentLoaded", function () {
    const fixedSidebar = document.querySelector(".fixed-sidebar");
    const fixedSidebarContent = document.querySelector(".fixed-sidebar-content");

    const pageHeight = document.body.scrollHeight - window.innerHeight; // Total page height
    const scrollTriggerStart = pageHeight * 0.2; // 20% of the total page height
    const scrollTriggerEnd = pageHeight * 0.8; // 80% of the total page height

    window.addEventListener("scroll", function () {
        const scrollY = window.scrollY;

        if (scrollY >= scrollTriggerStart && scrollY <= scrollTriggerEnd) {
            fixedSidebar.classList.add("show");
        } else {
            fixedSidebar.classList.remove("show");
        }
    });
});

    Theme Name: Collax - Creative Agency, And Portfolio HTML5 Template
    Author: Theme_Pure
    Support: help.themepure.net/support
    Version: 1.1

-----------------------------------------------------------------------------------

/************ TABLE OF CONTENTS ***************

    01. theme defult css start
	02. header css start
	03. hero css start
	04. creative css start
	05. cta css start
	06. brand css start
	07. service css start
	08. feature css start
	09. business css start
	10. project css start
	11. price css start
	12. about css start
	13. testimonial css start
	14. team css start
	15. mission css start
	16. job css start
	17. chose css start
	18. case css start
	19. product css start
	20. industri css start
	21. home-corporate css start
	22. home-blog css start
	23. blog css start
	24. news css start
	25. newsletter css start
	26. contact css start
	27. footer css start

/**********************************************/
/*----------------------------------------*/
/*  01. theme defult css start
/*----------------------------------------*/
/* @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet'); */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');


:root {
    /**
  @font family declaration
  */

    --tp-ff-body: "Poppins", sans-serif;
    --tp-ff-heading: "Poppins", sans-serif;
    --tp-ff-p: "Poppins", sans-serif;

    --tp-dm-sans: "Poppins", sans-serif;
    --tp-ff-fontawesome: Font Awesome 5 Pro;
    /**
  @color declaration
  */
    --tp-common-white: #ffffff;
    --tp-common-black: #292930;
    --tp-text-body: black;
    --tp-text-p: black;
    --tp-theme-1: #26927b;
    --tp-theme-2: #423EF3;
    --tp-theme-primary: #FDC463;
    --tp-theme-secondary: #26927B;
    --tp-theme-background: #141C3A;
    --tp-border-1: #E8ECF2;
    --tp-border-2: #4E4E59;
}

/* #127c50 */
/* 1E425C */
/* YELLOW - F9D687 */
/* YELLOW2 - FFAE55 */
/* BABY GREEN - 7FC984 */
/* GREEN - 368775 */

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

/*---------------------------------
	typography css start
---------------------------------*/
body {
    font-family: var(--tp-ff-body);
    font-size: 14px;
    font-weight: 400;
    color: var(--tp-text-body);
    line-height: 26px;
    overflow-x: hidden;
    background-color: #F7F8FD;
}

a {
    text-decoration: none;
    transition: 0.3s;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--tp-ff-heading);
    color: var(--tp-header-1);
    margin-top: 0px;
    font-weight: var(--tp-fw-sbold);
    line-height: 1.2;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}

h1 {
    font-size: 40px;
}

h2 {
    font-size: 32px;
}

h3 {
    font-size: 28px;
}

h4 {
    font-size: 24px;
}

h5 {
    font-size: 20px;
}

h6 {
    font-size: 16px;
}

ul {
    margin: 0px;
    padding: 0px;
}

p {
    font-family: var(--tp-ff-p);
    font-size: 17px;
    font-weight: 400;
    color: var(--tp-text-body);
    margin-bottom: 15px;
    line-height: 30px;
}

.z-index {
    position: relative;
    z-index: 3;
}

a,
.btn,
button,
input,
select,
textarea,
li,
img,
.transition-3,
h1,
h2,
h3,
h4,
h5,
h6 {
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}

li {
    list-style: none;
}

a:focus,
.button:focus {
    text-decoration: none;
    outline: none;
}

a:focus,
a:hover {
    color: inherit;
    text-decoration: none;
}

a,
button {
    color: inherit;
    outline: none;
    border: none;
    background: transparent;
}

button:hover {
    cursor: pointer;
}

button:focus {
    outline: 0;
}

.uppercase {
    text-transform: uppercase;
}

.capitalize {
    text-transform: capitalize;
}

input {
    outline: none;
}

input[type=color] {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    cursor: pointer;
    height: 100%;
    width: 100%;
    padding: 0;
    border-radius: 50%;
}

*::-moz-selection {
    background: var(--tp-common-black);
    color: var(--tp-common-white);
    text-shadow: none;
}

::-moz-selection {
    background: var(--tp-common-black);
    color: var(--tp-common-white);
    text-shadow: none;
}

::selection {
    background: var(--tp-common-black);
    color: var(--tp-common-white);
    text-shadow: none;
}

*::-moz-placeholder {
    color: var(--tp-common-black);
    font-size: var(--tp-fz-body);
    opacity: 1;
}

*::placeholder {
    color: var(--tp-common-black);
    font-size: var(--tp-fz-body);
    opacity: 1;
}

/*---------------------------------
    common classes css start
---------------------------------*/
.w-img img {
    width: 100%;
}

.m-img img {
    max-width: 100%;
}

.fix {
    overflow: hidden;
}

.clear {
    clear: both;
}

.f-left {
    float: left;
}

.f-right {
    float: right;
}

.z-index-1 {
    position: relative;
    z-index: 2;
}

.z-index {
    position: relative;
    z-index: 1;
}

.overflow-y-visible {
    overflow-x: hidden;
    overflow-y: visible;
}

.p-relative {
    position: relative;
}

.p-absolute {
    position: absolute;
}

.include-bg {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.gx-45 {
    --bs-gutter-x: 45px;
}

@media (max-width: 767px) {
    .gx-45 {
        --bs-gutter-x: 15px;
    }
}

.gx-12 {
    --bs-gutter-x: 12px;
    --bs-gutter-y: 12px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .gx-12 {
        --bs-gutter-x: 30px;
    }
}

.gx-40 {
    --bs-gutter-x: 40px;
}

@media (max-width: 767px) {
    .gx-40 {
        --bs-gutter-x: 0px;
    }
}

.gx-120 {
    --bs-gutter-x: 120px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .gx-120 {
        --bs-gutter-x: 50px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .gx-120 {
        --bs-gutter-x: 40px;
    }
}

@media (max-width: 767px) {
    .gx-120 {
        --bs-gutter-x: 0px;
    }
}

.gx-1 {
    --bs-gutter-x: 20px;
    --bs-gutter-y: 20px;
}

.tp-gx-20 {
    --bs-gutter-x: 20px;
}

.tp-gx-15 {
    --bs-gutter-x: 15px;
}

.gx-6 {
    --bs-gutter-x: 60px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .gx-6 {
        --bs-gutter-x: 40px;
    }
}

@media (max-width: 767px) {
    .gx-6 {
        --bs-gutter-x: 15px;
    }
}

.gx-7 {
    --bs-gutter-x: 70px;
}

@media (max-width: 767px) {
    .gx-7 {
        --bs-gutter-x: 0px;
    }
}

.gx-17 {
    --bs-gutter-x: 17px;
    --bs-gutter-y: 17px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .gx-17 {
        --bs-gutter-x: 30px;
        --bs-gutter-y: 30px;
    }
}

.gx-50 {
    --bs-gutter-x: 50px;
}

@media (max-width: 767px) {
    .gx-50 {
        --bs-gutter-x: 0px;
    }
}

.radius-20 {
    border-radius: 20px;
}

/*--
    - Spacing
-----------------------------------------*/
.tp-btn {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    color: var(--tp-common-white);
    background: var(--tp-theme-1);
    height: 70px;
    line-height: 70px;
    text-align: center;
    padding: 0 40px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: var(--border-radius);
    text-transform: capitalize;
}

.tp-btn i {
    padding-left: 17px;
}

.tp-btn:hover {
    color: var(--tp-common-black);
    background-color: var(--tp-theme-primary);
}

.tp-btn:hover i {
    animation: tfLeftToRight 0.5s forwards;
}

.tp-btn::before, .tp-btn::after {
    content: "";
    background: var(--tp-theme-primary);
    height: 50%;
    width: 0;
    position: absolute;
    transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -webkit-transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    z-index: -1;
}

.tp-btn::before {
    top: 0;
    left: 0;
    height: 51%;
    right: auto;
}

.tp-btn::after {
    bottom: 0;
    right: 0;
    height: 51%;
    left: auto;
}

.tp-btn:hover::before {
    width: 100%;
    right: 0;
    left: auto;
}

.tp-btn:hover::after {
    width: 100%;
    left: 0;
    right: auto;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-btn {
        height: 60px;
        line-height: 60px;
    }
}

@media (max-width: 767px) {
    .tp-btn {
        height: 56px;
        line-height: 56px;
    }
}

.tp-btn-sky-similar {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    color: var(--tp-common-black);
    background: var(--tp-common-blue);
    height: 70px;
    line-height: 70px;
    text-align: center;
    padding: 0 50px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: var(--border-radius);
    text-transform: capitalize;
}

.tp-btn-sky-similar i {
    padding-left: 17px;
}

.tp-btn-sky-similar:hover {
    color: var(--tp-common-black);
    background-color: var(--tp-theme-primary);
}

.tp-btn-sky-similar:hover i {
    animation: tfLeftToRight 0.5s forwards;
}

.tp-btn-sky-similar::before, .tp-btn-sky-similar::after {
    content: "";
    background: #fff;
    height: 50%;
    width: 0;
    position: absolute;
    transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -webkit-transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    z-index: -1;
}

.tp-btn-sky-similar::before {
    top: 0;
    left: 0;
    height: 51%;
    right: auto;
}

.tp-btn-sky-similar::after {
    bottom: 0;
    right: 0;
    height: 51%;
    left: auto;
}

.tp-btn-sky-similar:hover::before {
    width: 100%;
    right: 0;
    left: auto;
}

.tp-btn-sky-similar:hover::after {
    width: 100%;
    left: 0;
    right: auto;
}

.tp-btn-sm-sky {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    color: var(--tp-common-black);
    background: var(--tp-common-blue);
    height: 60px;
    line-height: 60px;
    text-align: center;
    padding: 0 50px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 10px;
    text-transform: capitalize;
}

.tp-btn-sm-sky i {
    padding-left: 17px;
}

.tp-btn-sm-sky:hover {
    color: var(--tp-common-black);
    background-color: var(--tp-theme-primary);
}

.tp-btn-sm-sky:hover i {
    animation: tfLeftToRight 0.5s forwards;
}

.tp-btn-sm-sky::before, .tp-btn-sm-sky::after {
    content: "";
    background: #FFDC60;
    height: 50%;
    width: 0;
    position: absolute;
    transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -webkit-transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    z-index: -1;
}

.tp-btn-sm-sky::before {
    top: 0;
    left: 0;
    height: 51%;
    right: auto;
}

.tp-btn-sm-sky::after {
    bottom: 0;
    right: 0;
    height: 51%;
    left: auto;
}

.tp-btn-sm-sky:hover::before {
    width: 100%;
    right: 0;
    left: auto;
}

.tp-btn-sm-sky:hover::after {
    width: 100%;
    left: 0;
    right: auto;
}

.tp-btn-sky {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    color: var(--tp-common-white);
    background: var(--tp-theme-1);
    height: 70px;
    line-height: 70px;
    text-align: center;
    padding: 0 40px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: var(--border-radius);
    text-transform: capitalize;
}

@media (max-width: 767px) {
    .tp-btn-sky {
        height: 56px;
        line-height: 56px;
    }
}

.tp-btn-sky i {
    padding-left: 17px;
}

.tp-btn-sky:hover {
    color: var(--tp-common-black);
    background-color: var(--tp-theme-primary);
}

.tp-btn-sky:hover i {
    animation: tfLeftToRight 0.5s forwards;
}

.tp-btn-sky::before, .tp-btn-sky::after {
    content: "";
    background: var(--tp-theme-primary);
    height: 50%;
    width: 0;
    position: absolute;
    transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -webkit-transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    z-index: -1;
}

.tp-btn-sky::before {
    top: 0;
    left: 0;
    height: 51%;
    right: auto;
}

.tp-btn-sky::after {
    bottom: 0;
    right: 0;
    height: 51%;
    left: auto;
}

.tp-btn-sky:hover::before {
    width: 100%;
    right: 0;
    left: auto;
}

.tp-btn-sky:hover::after {
    width: 100%;
    left: 0;
    right: auto;
}

.tp-btn-black {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    color: var(--tp-common-white);
    background: var(--tp-theme-1);
    height: 70px;
    line-height: 70px;
    text-align: center;
    padding: 0 50px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 10px;
    text-transform: capitalize;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-btn-black {
        height: 60px;
        line-height: 60px;
    }
}

.tp-btn-black i {
    padding-left: 17px;
}

.tp-btn-black:hover {
    color: var(--tp-common-white);
}

.tp-btn-black:hover i {
    animation: tfLeftToRight 0.5s forwards;
}

.tp-btn-black::before, .tp-btn-black::after {
    content: "";
    background: var(--tp-common-black);
    height: 50%;
    width: 0;
    position: absolute;
    transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -webkit-transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    z-index: -1;
}

.tp-btn-black::before {
    top: 0;
    left: 0;
    height: 51%;
    right: auto;
}

.tp-btn-black::after {
    bottom: 0;
    right: 0;
    height: 51%;
    left: auto;
}

.tp-btn-black:hover::before {
    width: 100%;
    right: 0;
    left: auto;
}

.tp-btn-black:hover::after {
    width: 100%;
    left: 0;
    right: auto;
}

@media (max-width: 767px) {
    .tp-btn-black {
        height: 56px;
        line-height: 56px;
    }
}

.tp-btn-sm {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    color: var(--tp-common-black);
    background: var(--tp-common-white);
    height: 60px;
    line-height: 60px;
    text-align: center;
    padding: 0 50px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 10px;
    text-transform: capitalize;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-btn-sm {
        margin-right: 30px;
    }
}

.tp-btn-sm i {
    padding-left: 17px;
}

.tp-btn-sm:hover {
    color: var(--tp-common-white);
}

.tp-btn-sm:hover i {
    animation: tfLeftToRight 0.5s forwards;
}

.tp-btn-sm::before, .tp-btn-sm::after {
    content: "";
    background: var(--tp-theme-1);
    height: 50%;
    width: 0;
    position: absolute;
    transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -webkit-transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    z-index: -1;
}

.tp-btn-sm::before {
    top: 0;
    left: 0;
    height: 51%;
    right: auto;
}

.tp-btn-sm::after {
    bottom: 0;
    right: 0;
    height: 51%;
    left: auto;
}

.tp-btn-sm:hover::before {
    width: 100%;
    right: 0;
    left: auto;
}

.tp-btn-sm:hover::after {
    width: 100%;
    left: 0;
    right: auto;
}

.tp-btn-grey {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    color: var(--tp-theme-1);
    background: #EBEBF9;
    height: 70px;
    line-height: 70px;
    text-align: center;
    padding: 0 50px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: var(--border-radius);
    text-transform: capitalize;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-btn-grey {
        height: 60px;
        line-height: 60px;
    }
}

.tp-btn-grey i {
    padding-left: 17px;
}

.tp-btn-grey:hover {
    color: var(--tp-common-white);
}

.tp-btn-grey:hover i {
    animation: tfLeftToRight 0.5s forwards;
}

.tp-btn-grey::before, .tp-btn-grey::after {
    content: "";
    background: var(--tp-theme-1);
    height: 50%;
    width: 0;
    position: absolute;
    transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -webkit-transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    z-index: -1;
}

.tp-btn-grey::before {
    top: 0;
    left: 0;
    height: 51%;
    right: auto;
}

.tp-btn-grey::after {
    bottom: 0;
    right: 0;
    height: 51%;
    left: auto;
}

.tp-btn-grey:hover::before {
    width: 100%;
    right: 0;
    left: auto;
}

.tp-btn-grey:hover::after {
    width: 100%;
    left: 0;
    right: auto;
}

@media (max-width: 767px) {
    .tp-btn-grey {
        height: 56px;
        line-height: 56px;
    }
}

.tp-btn-grey-sm {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    color: var(--tp-theme-1);
    background: rgba(89, 86, 233, 0.1);
    height: 45px;
    line-height: 45px;
    text-align: center;
    padding: 0 35px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 10px;
    text-transform: uppercase;
}

.tp-btn-grey-sm i {
    padding-left: 17px;
}

.tp-btn-grey-sm:hover {
    color: var(--tp-common-black);
    background-color: var(--tp-theme-primary);
}

.tp-btn-grey-sm:hover i {
    animation: tfLeftToRight 0.5s forwards;
}

.tp-btn-lg-yellow {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    color: var(--tp-common-black);
    background: var(--tp-theme-primary);
    height: 70px;
    line-height: 70px;
    text-align: center;
    padding: 0 50px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 10px;
    text-transform: capitalize;
    outline: none;
    border: 0;
}

.user-submenu {
    border-radius: 10px !important;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-btn-lg-yellow {
        padding: 0 35px;
    }
}

.tp-btn-lg-yellow i {
    padding-left: 17px;
}

.tp-btn-lg-yellow:hover {
    color: white;
    background-color: var(--tp-theme-1);
}

.tp-btn-lg-yellow:hover i {
    animation: tfLeftToRight 0.5s forwards;
}

.tp-btn-lg-yellow::before, .tp-btn-lg-yellow::after {
    content: "";
    background: var(--tp-theme-1);
    color: white;
    height: 50%;
    width: 0;
    position: absolute;
    transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -webkit-transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    z-index: -1;
}

.tp-btn-lg-yellow::before {
    top: 0;
    left: 0;
    height: 51%;
    right: auto;
}

.tp-btn-lg-yellow::after {
    bottom: 0;
    right: 0;
    height: 51%;
    left: auto;
}

.tp-btn-lg-yellow:hover::before {
    width: 100%;
    right: 0;
    left: auto;
}

.tp-btn-lg-yellow:hover::after {
    width: 100%;
    left: 0;
    right: auto;
}

@media (max-width: 767px) {
    .tp-btn-lg-yellow {
        height: 56px;
        line-height: 56px;
    }
}

.tp-btn-yellow {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    color: var(--tp-common-black);
    background: var(--tp-theme-primary);
    height: 60px;
    line-height: 60px;
    text-align: center;
    padding: 0 40px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: var(--border-radius);
    text-transform: capitalize;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-btn-yellow {
        padding: 0 30px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-btn-yellow {
        padding: 0 35px;
    }
}

@media (max-width: 767px) {
    .tp-btn-yellow {
        height: 56px;
        line-height: 56px;
        left: 0;
        right: auto;
    }
}

.tp-btn-yellow i {
    padding-left: 17px;
}

.tp-btn-yellow:hover {
    color: var(--tp-common-white);
    background-color: var(--tp-theme-secondary);
}

.tp-btn-yellow:hover i {
    animation: tfLeftToRight 0.5s forwards;
}

.tp-btn-yellow::before, .tp-btn-yellow::after {
    content: "";
    background: var(--tp-theme-1);
    height: 50%;
    width: 0;
    position: absolute;
    transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -webkit-transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    z-index: -1;
}

.tp-btn-yellow::before {
    top: 0;
    left: 0;
    height: 51%;
    right: auto;
}

.tp-btn-yellow::after {
    bottom: 0;
    right: 0;
    height: 51%;
    left: auto;
}

.tp-btn-yellow:hover::before {
    width: 100%;
    right: 0;
    left: auto;
}

.tp-btn-yellow:hover::after {
    width: 100%;
    left: 0;
    right: auto;
}

.carousel-buttons-new {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 5%;
    margin-top: 15%;
}

.tp-btn-border-sm {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    color: var(--tp-common-black);
    height: 50px;
    line-height: 50px;
    text-align: center;
    padding: 0 50px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 10px;
    text-transform: capitalize;
    border: 1px solid #F6F6F6;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-btn-border-sm {
        padding: 0 35px;
    }
}

.tp-btn-border-sm i {
    padding-left: 17px;
}

.tp-btn-border-sm:hover {
    color: var(--tp-common-black);
    background-color: var(--tp-theme-primary);
}

.tp-btn-border-sm:hover i {
    animation: tfLeftToRight 0.5s forwards;
}

@media (max-width: 767px) {
    .tp-btn-border-sm {
        height: 56px;
        line-height: 56px;
    }
}

.tp-btn-yellow-sm {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    color: var(--tp-common-black);
    background: var(--tp-theme-primary);
    height: 50px;
    line-height: 50px;
    text-align: center;
    padding: 0 50px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 10px;
    text-transform: capitalize;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-btn-yellow-sm {
        padding: 0 35px;
    }
}

.tp-btn-yellow-sm i {
    padding-left: 17px;
}

.tp-btn-yellow-sm:hover {
    color: var(--tp-common-white);
    background-color: var(--tp-theme-secondary);
}

.tp-btn-yellow-sm:hover i {
    animation: tfLeftToRight 0.5s forwards;
}

.tp-btn-yellow-sm::before, .tp-btn-yellow-sm::after {
    content: "";
    background: var(--tp-theme-1);
    height: 50%;
    width: 0;
    position: absolute;
    transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -webkit-transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    z-index: -1;
}

.tp-btn-yellow-sm::before {
    top: 0;
    left: 0;
    height: 51%;
    right: auto;
}

.tp-btn-yellow-sm::after {
    bottom: 0;
    right: 0;
    height: 51%;
    left: auto;
}

.tp-btn-yellow-sm:hover::before {
    width: 100%;
    right: 0;
    left: auto;
}

.tp-btn-yellow-sm:hover::after {
    width: 100%;
    left: 0;
    right: auto;
}

@media (max-width: 767px) {
    .tp-btn-yellow-sm {
        height: 56px;
        line-height: 56px;
    }
}

.tp-btn-yellow-semilar {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    color: var(--tp-common-black);
    background: var(--tp-theme-primary);
    height: 60px;
    line-height: 60px;
    text-align: center;
    padding: 0 50px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 10px;
    text-transform: capitalize;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-btn-yellow-semilar {
        padding: 0 30px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-btn-yellow-semilar {
        padding: 0 35px;
    }
}

@media (max-width: 767px) {
    .tp-btn-yellow-semilar {
        height: 56px;
        line-height: 56px;
        left: 0;
        right: auto;
    }
}

.tp-btn-yellow-semilar i {
    padding-left: 17px;
}

.tp-btn-yellow-semilar:hover {
    color: var(--tp-common-black);
    background-color: var(--tp-common-white);
}

.tp-btn-yellow-semilar:hover i {
    animation: tfLeftToRight 0.5s forwards;
}

.tp-btn-yellow-semilar::before, .tp-btn-yellow-semilar::after {
    content: "";
    background: var(--tp-theme-secondary);
    height: 50%;
    width: 0;
    position: absolute;
    transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -webkit-transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    z-index: -1;
}

.tp-btn-yellow-semilar::before {
    top: 0;
    left: 0;
    height: 51%;
    right: auto;
}

.tp-btn-yellow-semilar::after {
    bottom: 0;
    right: 0;
    height: 51%;
    left: auto;
}

.tp-btn-yellow-semilar:hover::before {
    width: 100%;
    right: 0;
    left: auto;
}

.tp-btn-yellow-semilar:hover::after {
    width: 100%;
    left: 0;
    right: auto;
}

@media (max-width: 767px) {
    .tp-btn-yellow-semilar {
        height: 56px;
        line-height: 56px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-news-button .tp-btn-yellow-semilar {
        padding: 0 50px;
        height: 60px;
        line-height: 60px;
    }
}

.tp-btn-white-border {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    color: var(--tp-common-black);
    background: var(--tp-common-white);
    height: 70px;
    line-height: 70px;
    text-align: center;
    padding: 0 50px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 10px;
    text-transform: capitalize;
    border-bottom: 3px solid var(--tp-theme-1);
    box-shadow: 0px 2px 55px rgba(168, 182, 218, 0.32);
}

@media (max-width: 767px) {
    .tp-btn-white-border {
        height: 50px;
        line-height: 50px;
        padding: 0 20px;
    }
}

.tp-btn-white-border i {
    padding-left: 17px;
}

.tp-btn-white-border:hover {
    color: var(--tp-common-white);
}

.tp-btn-white-border:hover i {
    animation: tfLeftToRight 0.5s forwards;
}

.tp-btn-white-border::before, .tp-btn-white-border::after {
    content: "";
    background: var(--tp-theme-1);
    height: 50%;
    width: 0;
    position: absolute;
    transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -webkit-transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    z-index: -1;
}

.tp-btn-white-border::before {
    top: 0;
    left: 0;
    height: 51%;
    right: auto;
}

.tp-btn-white-border::after {
    bottom: 0;
    right: 0;
    height: 51%;
    left: auto;
}

.tp-btn-white-border:hover::before {
    width: 100%;
    right: 0;
    left: auto;
}

.tp-btn-white-border:hover::after {
    width: 100%;
    left: 0;
    right: auto;
}

.tp-btn-white {
    display: block;
    font-size: 16px;
    font-weight: 700;
    width: max-content;
    color: var(--tp-common-black);
    background: var(--tp-common-white);
    height: 70px;
    line-height: 70px;
    text-align: center;
    padding: 0 50px;
    /*padding: 0 16px;*/
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 10px;
    text-transform: capitalize;
    box-shadow: 0px 2px 55px rgba(168, 182, 218, 0.32);
}

.tp-btn-white i {
    padding-left: 17px;
}

.tp-btn-white:hover {
    color: var(--tp-common-white);
}

.tp-btn-white:hover i {
    animation: tfLeftToRight 0.5s forwards;
}

.tp-btn-white::before, .tp-btn-white::after {
    content: "";
    background: var(--tp-theme-1);
    height: 50%;
    width: 0;
    position: absolute;
    transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -webkit-transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    z-index: -1;
}

.tp-btn-white::before {
    top: 0;
    left: 0;
    height: 51%;
    right: auto;
}

.tp-btn-white::after {
    bottom: 0;
    right: 0;
    height: 51%;
    left: auto;
}

.tp-btn-white:hover::before {
    width: 100%;
    right: 0;
    left: auto;
}

.tp-btn-white:hover::after {
    width: 100%;
    left: 0;
    right: auto;
}

/* @media (max-width: 767px) {
  .tp-btn-white {
    height: 56px;
    line-height: 56px;
  }
} */

.tp-btn-white-md {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    color: var(--tp-common-black);
    background: var(--tp-common-white);
    height: 60px;
    line-height: 60px;
    text-align: center;
    padding: 0 20px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 10px;
    text-transform: capitalize;
    box-shadow: 0px 11px 12px #EBE9F3;
}

.tp-btn-white-md i {
    padding-left: 40px;
}

.tp-btn-white-md:hover {
    color: var(--tp-common-white);
    background-color: var(--tp-theme-1);
}

.tp-btn-white-md:hover i {
    animation: tfLeftToRight 0.5s forwards;
}

.tp-btn-white-md::before, .tp-btn-white-md::after {
    content: "";
    background: var(--tp-theme-1);
    height: 50%;
    width: 0;
    position: absolute;
    transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -webkit-transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    z-index: -1;
}

.tp-btn-white-md::before {
    top: 0;
    left: 0;
    height: 51%;
    right: auto;
}

.tp-btn-white-md::after {
    bottom: 0;
    right: 0;
    height: 51%;
    left: auto;
}

.tp-btn-white-md:hover::before {
    width: 100%;
    right: 0;
    left: auto;
}

.tp-btn-white-md:hover::after {
    width: 100%;
    left: 0;
    right: auto;
}

.tp-btn-white-brand {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    color: var(--tp-common-black);
    background: var(--tp-common-white);
    height: 60px;
    line-height: 60px;
    text-align: center;
    padding: 0 50px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 10px;
    text-transform: capitalize;
    box-shadow: 0px 11px 12px #EBE9F3;
}

.tp-btn-white-brand i {
    padding-left: 15px;
}

.tp-btn-white-brand:hover {
    color: var(--tp-theme-1);
}

.tp-btn-white-brand:hover i {
    animation: tfLeftToRight 0.5s forwards;
}

.tp-btn-white-sm {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    color: var(--tp-common-black);
    background: var(--tp-common-white);
    height: 60px;
    line-height: 60px;
    text-align: center;
    padding: 0 50px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 10px;
    text-transform: capitalize;
    box-shadow: 0px 11px 12px #EBE9F3;
}

.tp-btn-white-sm i {
    padding-left: 15px;
}

.tp-btn-white-sm:hover {
    color: var(--tp-common-white);
    background-color: var(--tp-theme-1);
}

.tp-btn-white-sm:hover i {
    animation: tfLeftToRight 0.5s forwards;
}

.tp-btn-white-sm::before, .tp-btn-white-sm::after {
    content: "";
    background: var(--tp-theme-1);
    height: 50%;
    width: 0;
    position: absolute;
    transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -webkit-transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    z-index: -1;
}

.tp-btn-white-sm::before {
    top: 0;
    left: 0;
    right: auto;
}

.tp-btn-white-sm::after {
    bottom: 0;
    right: 0;
    height: 51%;
    left: auto;
}

.tp-btn-white-sm:hover::before {
    width: 100%;
    right: 0;
    height: 51%;
    left: auto;
}

.tp-btn-white-sm:hover::after {
    width: 100%;
    left: 0;
    height: 51%;
    right: auto;
}

.tp-btn-white-lg {
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
    color: var(--tp-common-black);
    background: var(--tp-common-white);
    height: 90px;
    line-height: 90px;
    text-align: center;
    padding-left: 30px;
    padding-right: 50px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 10px;
    text-transform: capitalize;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-btn-white-lg {
        height: 80px;
        line-height: 80px;
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-btn-white-lg {
        width: 100%;
        margin-bottom: 15px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-btn-white-lg {
        height: 75px;
        line-height: 75px;
        margin-bottom: 15px;
    }
}

@media (max-width: 767px) {
    .tp-btn-white-lg {
        height: 70px;
        line-height: 70px;
        padding-right: 10px;
        padding-left: 10px;
        margin-bottom: 15px;
        display: block;
    }
}

.tp-btn-white-lg i {
    padding-left: 40px;
}

.tp-btn-white-lg:hover {
    color: var(--tp-common-white);
    background-color: var(--tp-theme-1);
}

.tp-btn-white-lg:hover i {
    animation: tfLeftToRight 0.5s forwards;
}

.tp-btn-white-lg::before, .tp-btn-white-lg::after {
    content: "";
    background: var(--tp-theme-1);
    height: 50%;
    width: 0;
    position: absolute;
    transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -webkit-transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    z-index: -1;
}

.tp-btn-white-lg::before {
    top: 0;
    left: 0;
    height: 51%;
    right: auto;
}

.tp-btn-white-lg::after {
    bottom: 0;
    right: 0;
    height: 51%;
    left: auto;
}

.tp-btn-white-lg:hover::before {
    width: 100%;
    right: 0;
    left: auto;
}

.tp-btn-white-lg:hover::after {
    width: 100%;
    left: 0;
    right: auto;
}

.tp-btn-border {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    border: 1px solid #3F3F47;
    height: 70px;
    line-height: 70px;
    text-align: center;
    padding: 0 50px;
    position: relative;
    color: var(--tp-theme-primary);
    z-index: 1;
    overflow: hidden;
    border-radius: 10px;
    text-transform: capitalize;
}

.tp-btn-border i {
    padding-left: 18px;
}

.tp-btn-border:hover {
    color: var(--tp-common-white);
    border-color: var(--tp-theme-1);
}

.tp-btn-border::before, .tp-btn-border::after {
    content: "";
    background: var(--tp-theme-1);
    height: 50%;
    width: 0;
    position: absolute;
    transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -webkit-transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    z-index: -1;
}

.tp-btn-border::before {
    top: 0;
    left: 0;
    height: 51%;
    right: auto;
}

.tp-btn-border::after {
    bottom: 0;
    right: 0;
    height: 51%;
    left: auto;
}

.tp-btn-border:hover::before {
    width: 100%;
    right: 0;
    left: auto;
}

.tp-btn-border:hover::after {
    width: 100%;
    left: 0;
    right: auto;
}

@media (max-width: 767px) {
    .tp-btn-border {
        height: 56px;
        line-height: 56px;
    }
}

.tp-btn-border-2 {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    border: 1px solid #F6F6F6;
    height: 55px;
    line-height: 55px;
    text-align: center;
    padding: 0 70px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 10px;
    text-transform: capitalize;
}

.tp-btn-border-2 i {
    padding-left: 18px;
}

.tp-btn-border-2:hover {
    color: var(--tp-common-black);
    border-color: var(--tp-theme-1);
}

.tp-btn-border-2::before, .tp-btn-border-2::after {
    content: "";
    background: var(--tp-theme-1);
    height: 50%;
    width: 0;
    position: absolute;
    transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -webkit-transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    z-index: -1;
}

.tp-btn-border-2::before {
    top: 0;
    left: 0;
    height: 51%;
    right: auto;
}

.tp-btn-border-2::after {
    bottom: 0;
    right: 0;
    height: 51%;
    left: auto;
}

.tp-btn-border-2:hover::before {
    width: 100%;
    right: 0;
    left: auto;
}

.tp-btn-border-2:hover::after {
    width: 100%;
    left: 0;
    right: auto;
}

@media (max-width: 767px) {
    .tp-btn-border-2 {
        height: 56px;
        line-height: 56px;
    }
}

.corporate-btn {
    display: inline-block;
    font-weight: 700;
    font-size: 18px;
    border: 1px solid rgba(84, 84, 91, 0.19);
    border-radius: 5px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    padding: 0 50px;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    text-transform: capitalize;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

@media (max-width: 767px) {
    .corporate-btn {
        padding: 0px 20px;
    }
}

.corporate-btn::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    content: "";
    height: 2px;
    width: 60%;
    background-color: var(--tp-common-pink);
    transition: 0.3s;
}

.corporate-btn span {
    position: relative;
    z-index: 99;
    transition: color 600ms cubic-bezier(0.48, 0, 0.12, 1);
    color: var(--tp-common-black);
}

.corporate-btn:before {
    content: "";
    position: absolute;
    bottom: -50%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--tp-common-pink);
    transform-origin: bottom center;
    transition: transform 600ms cubic-bezier(0.48, 0, 0.12, 1);
    transform: skewY(9.3deg) scaleY(0);
    z-index: 50;
}

.corporate-btn:hover:before {
    transform-origin: bottom center;
    transform: skewY(9.3deg) scaleY(2);
    background-color: var(--tp-common-pink);
}

.corporate-btn i {
    padding-left: 17px;
}

.corporate-btn:hover {
    border-color: var(--tp-common-pink);
}

.corporate-btn:hover span {
    position: relative;
    z-index: 999;
    color: var(--tp-common-black);
}

.corporate-btn:hover::after {
    width: 100%;
}

.corporate-btn:hover i {
    animation: tfLeftToRight 0.5s forwards;
}

.corporate-btn-2 {
    display: inline-block;
    font-weight: 700;
    font-size: 18px;
    border: 1px solid rgba(84, 84, 91, 0.19);
    border-radius: 5px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    padding: 0 50px;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    text-transform: capitalize;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

@media (max-width: 767px) {
    .corporate-btn-2 {
        padding: 0px 20px;
    }
}

.corporate-btn-2::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    content: "";
    height: 2px;
    width: 60%;
    background-color: #A8ABFF;
    transition: 0.3s;
}

.corporate-btn-2 span {
    position: relative;
    z-index: 99;
    transition: color 600ms cubic-bezier(0.48, 0, 0.12, 1);
    color: var(--tp-common-black);
}

.corporate-btn-2:before {
    content: "";
    position: absolute;
    bottom: -50%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #A8ABFF;
    transition: transform 600ms cubic-bezier(0.48, 0, 0.12, 1);
    transform-origin: bottom center;
    transform: skewY(9.3deg) scaleY(0);
    z-index: 50;
}

.corporate-btn-2:hover:before {
    transform-origin: bottom center;
    transform: skewY(9.3deg) scaleY(2);
    background-color: #A8ABFF;
}

.corporate-btn-2 i {
    padding-left: 17px;
}

.corporate-btn-2:hover {
    border-color: #A8ABFF;
}

.corporate-btn-2:hover span {
    position: relative;
    z-index: 999;
    color: var(--tp-common-black);
}

.corporate-btn-2:hover::after {
    width: 100%;
}

.corporate-btn-2:hover i {
    animation: tfLeftToRight 0.5s forwards;
}

.corporate-btn-sv {
    display: inline-block;
    font-weight: 700;
    font-size: 18px;
    border: 1px solid rgba(84, 84, 91, 0.19);
    border-radius: 5px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    padding: 0 40px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 10px;
    text-transform: capitalize;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px) {
    .corporate-btn-sv {
        font-size: 16px;
        padding: 0px 20px;
    }
}

.corporate-btn-sv::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    content: "";
    height: 2px;
    width: 60%;
    background-color: var(--tp-common-pink);
    transition: 0.3s;
}

.corporate-btn-sv span {
    position: relative;
    z-index: 99;
    transition: color 600ms cubic-bezier(0.48, 0, 0.12, 1);
    color: var(--tp-common-white);
}

.corporate-btn-sv:before {
    content: "";
    position: absolute;
    bottom: -50%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--tp-common-pink);
    transform-origin: bottom center;
    transition: transform 600ms cubic-bezier(0.48, 0, 0.12, 1);
    transform: skewY(9.3deg) scaleY(0);
    z-index: 50;
}

.corporate-btn-sv:hover:before {
    transform-origin: bottom center;
    transform: skewY(9.3deg) scaleY(2);
    background-color: var(--tp-common-pink);
}

.corporate-btn-sv i {
    padding-left: 17px;
}

.corporate-btn-sv:hover {
    border-color: transparent;
}

.corporate-btn-sv:hover span {
    position: relative;
    z-index: 999;
    color: var(--tp-common-black);
}

.corporate-btn-sv:hover::after {
    width: 100%;
}

.corporate-btn-sv:hover i {
    animation: tfLeftToRight 0.5s forwards;
}

.corporate-pink-btn {
    display: inline-block;
    font-weight: 700;
    font-size: 18px;
    color: var(--tp-common-black);
    background-color: var(--tp-common-pink);
    border: 1px solid rgba(84, 84, 91, 0.19);
    border-radius: 5px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    padding: 0 40px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 10px;
    text-transform: capitalize;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
    .corporate-pink-btn {
        padding: 0 20px;
    }
}

.corporate-pink-btn i {
    padding-left: 17px;
}

.corporate-pink-btn:hover i {
    animation: tfLeftToRight 0.5s forwards;
}

/* pulse effect animation */
@-webkit-keyframes pulse {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    }
    70% {
        -webkit-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

@keyframes pulse {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    }
    70% {
        -moz-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

@keyframes tptranslateX2 {
    0% {
        -webkit-transform: translateX(-30px);
        -moz-transform: translateX(-30px);
        -ms-transform: translateX(-30px);
        -o-transform: translateX(-30px);
        transform: translateX(-30px);
    }
    100% {
        -webkit-transform: translatXY(20px);
        -moz-transform: translateX(20px);
        -ms-transform: translateX(20px);
        -o-transform: translateX(20px);
        transform: translateX(20px);
    }
}

@keyframes tpupdown-2 {
    0% {
        -webkit-transform: translateY(20);
        -moz-transform: translateY(20);
        -ms-transform: translateY(20);
        -o-transform: translateY(20);
        transform: translateY(20);
    }
    100% {
        -webkit-transform: translateY(-20px);
        -moz-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        -o-transform: translateY(-20px);
        transform: translateY(-20px);
    }
}

@keyframes animationglob {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes tpupdown {
    0% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(-5px);
        -moz-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
        -o-transform: translateY(-5px);
        transform: translateY(-5px);
    }
}

@keyframes tfLeftToRight {
    49% {
        transform: translateX(30%);
    }
    50% {
        opacity: 0;
        transform: translateX(-30%);
    }
    51% {
        opacity: 1;
    }
}

@keyframes rotate2 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes moving {
    0% {
        transform: translatey(0px);
    }
    20% {
        transform: translateX(-50px);
    }
    50% {
        transform: translatey(-40px);
    }
    100% {
        transform: translatey(0px);
    }
}

@keyframes leftright {
    0% {
        transform: translatex(0);
    }
    50% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes movinglight {
    0% {
        transform: translatey(0px);
    }
    20% {
        transform: translateX(-70px);
    }
    50% {
        transform: translatey(-70px);
    }
    100% {
        transform: translatey(0px);
    }
}

@keyframes movinglight2 {
    0% {
        transform: translatey(0px);
    }
    20% {
        transform: translateX(70px);
    }
    50% {
        transform: translatey(70px);
    }
    100% {
        transform: translatey(0px);
    }
}

@keyframes movingtop {
    0% {
        transform: translatey(0px);
    }
    20% {
        transform: translatey(70px);
    }
    50% {
        transform: translatey(-70px);
    }
    100% {
        transform: translatey(0px);
    }
}

@keyframes circle-animation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes circle-animation2 {
    0% {
        transform: scale(-1, 1) rotate(360deg);
    }
    100% {
        transform: scale(-1, 1) rotate(0deg);
    }
}

@keyframes zoom {
    0% {
        transform: scale(0.5);
    }
    50% {
        transform: scale(1);
    }
    100% {
        transform: scale(0.5);
    }
}

@keyframes zoom2 {
    0% {
        transform: scale(0.9);
    }
    50% {
        transform: scale(1);
    }
    100% {
        transform: scale(0.9);
    }
}

@keyframes wobble-vertical {
    10% {
        transform: translateY(-10px);
    }
    50% {
        transform: skew(15deg);
    }
    80% {
        transform: rotate(10deg);
    }
    100% {
        transform: translate(0);
    }
}

@-webkit-keyframes section-highlight {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

@-moz-keyframes section-highlight {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

@-ms-keyframes section-highlight {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

@keyframes section-highlight {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

@keyframes widthcalc {
    0% {
        width: 20%;
    }
    50% {
        width: 50%;
    }
    75% {
        width: 90%;
    }
    90% {
        opacity: 75%;
    }
    90% {
        opacity: 100%;
    }
}

/* right bounce */
@-webkit-keyframes bounceRight {
    0%, 20%, 50%, 80%, 100% {
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
    40% {
        -ms-transform: translateX(-90px);
        transform: translateX(-90px);
    }
    60% {
        -ms-transform: translateX(-15px);
        transform: translateX(-15px);
    }
}

@-moz-keyframes bounceRight {
    0%, 20%, 50%, 80%, 100% {
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
    40% {
        -ms-transform: translateX(-90px);
        transform: translateX(-90px);
    }
    60% {
        -ms-transform: translateX(-15px);
        transform: translateX(-15px);
    }
}

@keyframes bounceRight {
    0%, 20%, 50%, 80%, 100% {
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
    40% {
        -ms-transform: translateX(-90px);
        transform: translateX(-90px);
    }
    60% {
        -ms-transform: translateX(-15px);
        transform: translateX(-15px);
    }
}

/* /right bounce */
@keyframes icon-bounce {
    0%, 100%, 20%, 50%, 80% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
    40% {
        -webkit-transform: translateY(-10px);
        -moz-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        -o-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    60% {
        -webkit-transform: translateY(-5px);
        -moz-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
        -o-transform: translateY(-5px);
        transform: translateY(-5px);
    }
}

/*--
    - Background color
-----------------------------------------*/
.grey-bg {
    background: var(--tp-grey-1);
}

.white-bg {
    background: var(--tp-common-white);
}

.blue-bg {
    background: #141C3A;
}

.black-bg-2 {
    background: var(--tp-common-black-2);
}

.theme-bg {
    background: var(--tp-theme-2);
}

.theme-bg-2 {
    background: var(--tp-theme-1);
}

.sky-bg {
    background: var(--tp-common-blue);
}

.yellow-bg {
    background: var(--tp-theme-primary);
    /*border-radius: 20px;*/
}

.bg-radius-none {
    border-radius: inherit;
}

.body-overlay.apply {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 999;
    transition: 0.3s;
}

.breadcrumb__pt-310 {
    padding-top: 300px;
    padding-bottom: 40px;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .breadcrumb__pt-310 {
        padding-top: 120px;
    }
}

.breadcrumb__title {
    font-size: 50px;
    color: var(--tp-common-black);
    font-weight: 700;
    margin-bottom: 40px;
}

@media (max-width: 767px) {
    .breadcrumb__title {
        font-size: 40px;
    }
}

.ac-about-shape-img {
    position: absolute;
    bottom: -70px;
    left: 36px;
    z-index: 100;
}

.ac-testimonial-space {
    padding-top: 115px;
    padding-bottom: 130px;
}

@media (max-width: 767px) {
    .ac-testimonial-space {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .breadcrumb__area {
        background-size: cover;
        background-position: right;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .breadcrumb__area {
        background-size: cover;
        background-position: left;
    }
}

.tp-custom-accordio .accordion-items {
    margin-bottom: 20px;
}

.tp-custom-accordio .accordion-buttons {
    position: relative;
    width: 100%;
    text-align: left;
    font-size: 18px;
    font-weight: 700;
    padding: 35px 45px;
    background-color: var(--tp-common-white);
    color: #212121;
    border-radius: 10px 10px 0 0;
}

@media (max-width: 767px) {
    .tp-custom-accordio .accordion-buttons {
        font-size: 17px;
        padding: 28px 20px;
    }
}

.tp-custom-accordio .accordion-buttons::after {
    position: absolute;
    content: "\f063";
    background-image: none;
    top: 45px;
    right: 45px;
    color: #B8BCC8;
    width: auto;
    height: auto;
    font-weight: 500;
    font-size: 14px;
}

@media (max-width: 767px) {
    .tp-custom-accordio .accordion-buttons::after {
        top: 33px;
        right: 18px;
    }
}

.tp-custom-accordio .accordion-buttons.collapsed::after {
    content: "\f062";
}

.tp-custom-accordio .collapsed {
    border-radius: 10px 10px 10px 10px;
}

.tp-custom-accordio .accordion-body {
    background-color: var(--tp-common-white);
    padding: 20px 45px;
    box-shadow: 0px 25px 32px 0px rgba(0, 0, 0, 0.06);
    position: relative;
    z-index: 1;
    border-radius: 0 0px 10px 10px;
    font-size: 16px;
}

@media (max-width: 767px) {
    .tp-custom-accordio .accordion-body {
        padding: 20px 25px;
    }
}

.tp-custom-accordio .accordion-body::before {
    position: absolute;
    content: "";
    height: 2px;
    background-color: var(--tp-grey-1);
    top: 0;
    left: 45px;
    right: 45px;
}

.faq-accordio-border .accordion-items {
    background-color: var(--tp-common-white);
    border: 1px solid #F5F5F5;
    border-radius: 10px;
}

.tp-subtitle {
    font-size: 18px;
    font-weight: 500;
    color: black;
    margin-bottom: 20px;
}

.tp-subtitle::before {
    height: 12px;
    width: 12px;
    background-color: var(--tp-theme-primary);
    content: "";
    display: inline-block;
    border-radius: 50%;
    margin-right: 10px;
}

.tp-subtitle.pink-circle::before {
    height: 12px;
    width: 12px;
    background-color: var(--tp-common-pink);
    content: "";
    display: inline-block;
    border-radius: 50%;
    margin-right: 10px;
}

.tp-subtitle-before-color {
    color: rgba(52, 52, 54, 0.6);
}

.tp-subtitle-before-color::before {
    background-color: rgba(52, 52, 54, 0.6);
}

.tp-title {
    font-size: 60px;
    font-weight: 700;
    color: var(--tp-common-black);
    /*margin-bottom: 40px;*/
    line-height: 1.1;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .tp-title {
        font-size: 55px;
    }

    .tp-title br {
        display: none;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-title {
        font-size: 45px;
        margin-bottom: 20px !important;
    }

    .tp-title br {
        display: none;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-title {
        font-size: 42px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-title {
        font-size: 35px;
    }
}

@media (max-width: 767px) {
    .tp-title {
        font-size: 35px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .tp-title {
        font-size: 35px;
    }
}

.tp-title-sm {
    font-size: 50px;
    letter-spacing: 0;
    color: var(--tp-common-black);
    font-weight: 700;
    letter-spacing: -2px;
    padding-bottom: 10px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-title-sm {
        font-size: 45px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-title-sm {
        font-size: 38px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-title-sm {
        font-size: 38px;
    }
}

@media (max-width: 767px) {
    .tp-title-sm {
        font-size: 35px;
    }
}

.tp-white-text {
    color: var(--tp-common-white);
}

.subtitle-secondary-color {
    color: #d2d2d2;
}

.tp-section-highlight {
    position: relative;
    z-index: 1;
    display: inline-block;
}

.tp-section-highlight svg {
    position: absolute;
    bottom: 11px;
    left: 2px;
    z-index: -1;
    width: 0%;
    -moz-animation: section-highlight 1s ease-in-out 0.3s forwards;
    -webkit-animation: section-highlight 1s ease-in-out 0.3s forwards;
    animation: section-highlight 1s ease-in-out 0.3s forwards;
}

/*----------------------------------------*/
/*  17. MEANMENU css start
/*----------------------------------------*/
.mobile-menu.mean-container {
    overflow: hidden;
}

@media (max-width: 767px) {
    .mobile-menu.mean-container {
        margin-bottom: 30px;
    }
}

.mobile-menu .sidebar-list {
    clear: both;
}

.mobile-menu .sidebar-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 5px;
    color: var(--tp-common-white);
}

.mobile-menu .sidebar-list li::after {
    top: 10px;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 1px solid #888888;
    background-color: transparent;
    content: "";
    display: inline-block;
    position: absolute;
}

.mobile-menu .tp-sidebar-social {
    margin-top: 20px;
}

.mobile-menu .tp-sidebar-social a {
    margin-right: 5px;
    background-color: var(--tp-theme-primary);
    color: #fff;
    display: inline-block;
    width: 35px;
    height: 35px;
    text-align: center;
    font-size: 14px;
    line-height: 34px;
}

.sidebar-title h3 {
    color: var(--tp-common-white);
}

/* mean menu customize */
.mean-container a.meanmenu-reveal {
    display: none;
}

.mean-container .mean-nav {
    background: none;
    margin-top: 0;
}

.mean-container .mean-bar {
    padding: 0;
    min-height: auto;
    background: none;
}

.mean-container .mean-nav > ul {
    padding: 0;
    margin: 0;
    width: 100%;
    list-style-type: none;
    display: block !important;
}

.mean-container a.meanmenu-reveal {
    display: none !important;
}

.mean-container .mean-nav ul li a {
    width: 100%;
    padding: 15px 0;
    color: #fff;
    border-top: 1px solid #353535;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 700;
}

.mean-container .mean-nav ul li a:hover {
    color: var(--tp-theme-primary);
}

.mean-container .mean-nav ul li a.mean-expand {
    margin-top: 10px;
    padding: 0 !important;
    line-height: 14px;
    border: 1px solid #888888 !important;
    height: 30px;
    width: 30px;
    line-height: 30px;
    color: #fff;
    line-height: 30px;
    top: 0;
    font-weight: 400;
}

.mean-container .mean-nav ul li a.mean-expand:hover {
    background: var(--clr-theme-1);
    color: var(--clr-common-white);
    border-color: #888888;
}

.mean-container .mean-nav ul li > a > i {
    display: none;
}

.mean-container .mean-nav ul li > a.mean-expand i {
    display: inline-block;
}

.mean-container .mean-nav > ul > li:first-child > a {
    border-top: 0;
}

.mean-container .mean-nav ul li a.mean-expand.mean-clicked {
    color: var(--clr-common-black);
}

.mean-container .mean-nav ul li a.mean-expand.mean-clicked i {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    color: var(--tp-common-white);
}

/*----------------------------------------*/
/*  02. header css start
/*----------------------------------------*/
.tp-main-menu ul li {
    display: inline-block;
    margin-right: 60px;
    position: relative;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .tp-main-menu ul li {
        margin-right: 40px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-main-menu ul li {
        margin-right: 32px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-main-menu ul li {
        margin-right: 25px;
    }
}

.tp-main-menu ul li a {
    font-size: 18px;
    font-weight: 500;
    color: black;
    text-transform: capitalize;
    position: relative;
    padding: 37px 0;
    display: inline-block;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-main-menu ul li a {
        font-size: 15px;
    }
}

.tp-main-menu ul li a i {
    margin-left: 5px;
    transform: translateY(2px);
    transition: 0.4s;
}

/* .tp-main-menu ul li a::after {
  position: absolute;
  content: "";
  bottom: 25px;
  left: 0;
  width: 0;
  height: 4px;
  background-color: var(--tp-theme-1);
  border-radius: 33px;
  opacity: 1;
  visibility: visible;
  transition: 0.3s;
}
.tp-main-menu ul li a::before {
  position: absolute;
  content: "";
  bottom: 25px;
  right: 0;
  width: 0;
  height: 4px;
  background-color: var(--tp-theme-primary);
  border-radius: 33px;
  z-index: 9;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
} */
.tp-main-menu ul li:hover a {
    color: var(--tp-common-black);
}

.tp-main-menu ul li:hover a::after {
    visibility: visible;
    opacity: 1;
    width: 90%;
}

.tp-main-menu ul li:hover a::before {
    visibility: visible;
    opacity: 1;
    width: 50%;
}

.tp-main-menu ul li:hover a i {
    transform: rotate(-180deg);
}

.tp-main-menu ul li:hover ul.submenu {
    opacity: 1;
    visibility: visible;
    top: 100%;
}

.tp-main-menu ul li ul.submenu {
    position: absolute;
    background-color: var(--tp-common-black);
    padding: 40px;
    width: 270px;
    transition: 0.3s;
    top: 110%;
    opacity: 0;
    visibility: hidden;
}

.tp-main-menu ul li ul.submenu li {
    margin: 0;
    margin-bottom: 10px;
    display: block;
}

.tp-main-menu ul li ul.submenu li:last-child {
    margin-bottom: 0;
}

.tp-main-menu ul li ul.submenu li a {
    font-size: 18px;
    font-weight: 500;
    color: var(--tp-common-white);
    display: block;
    padding: 0;
}

.tp-main-menu ul li ul.submenu li a::after, .tp-main-menu ul li ul.submenu li a::before {
    display: none;
}

.tp-main-menu ul li ul.submenu li a:hover {
    color: var(--tp-theme-primary);
}

.tp-main-menu ul li:hover::after {
    color: var(--tp-common-black);
    transform: rotate(-180deg);
}

.hasdropdown-white {
    padding-top: 35px;
    padding-bottom: 35px;
}

.hasdropdown-white .hasdropdown::after {
    color: var(--tp-common-white);
}

.hasdropdown-white .hasdropdown:hover::after {
    color: var(--tp-theme-primary);
}

.header-space-three {
    padding-right: 115px;
    padding-left: 115px;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .header-space-three {
        padding-right: 100px;
        padding-left: 100px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .header-space-three {
        padding-right: 50px;
        padding-left: 50px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .header-space-three {
        padding-right: 0px;
        padding-left: 0px;
    }
}

.tp-header-bs-area {
    padding-right: 115px;
    padding-left: 115px;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .tp-header-bs-area {
        padding-right: 40px;
        padding-left: 40px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-header-bs-area {
        padding-right: 0px;
        padding-left: 0px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-header-bs-area {
        padding-right: 0px;
        padding-left: 0px;
    }
}

.tp-header-right button {
    font-size: 25px;
    color: #222;
    margin-left: 30px;
    height: 57px;
    width: 57px;
    line-height: 57px;
    text-align: center;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px -2px 12px #EBE9F3;
}

.tp-shadow-transparent button {
    box-shadow: none;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .tp-shadow-transparent button {
        box-shadow: 0px -2px 12px #EBE9F3;
    }
}

.header-space-two {
    padding-top: 35px;
}

.tp-header-button {
    line-height: 0;
}

.bar button {
    font-size: 25px;
    color: #222;
    margin-left: 30px;
    height: 57px;
    width: 57px;
    line-height: 57px;
    text-align: center;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px -2px 12px #EBE9F3;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .bar button {
        box-shadow: none;
    }
}

.tp-header-bg {
    background-color: var(--tp-common-white);
    margin-left: 80px;
    margin-right: 80px;
    padding: 0px 35px;
    margin-top: 40px;
    border-radius: 10px;
    /* border-color: var(--border-ash); */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-header-bg {
        margin-left: 0;
        margin-right: 0;
    }
}

.tp-menu-bar button {
    font-size: 30px;
    color: var(--tp-common-black);
    font-weight: 400;
    height: 70px;
    width: 70px;
    background-color: var(--tp-common-white);
    text-align: center;
    line-height: 70px;
    display: inline-block;
    border-radius: 10px;
    position: relative;
    z-index: 2;
}

.tp-menu-bar button:hover {
    background-color: var(--tp-theme-primary);
    color: var(--tp-common-black);
}

.header-transparent {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 999;
}

@media only screen and (min-width: 1601px) and (max-width: 1800px) {
    .header-transparent {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .header-transparent {
        padding-left: 50px;
        padding-right: 50px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .header-transparent {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .header-transparent {
        padding-left: 0px;
        padding-right: 0px;
    }
}

@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px) {
    .header-transparent-two {
        margin-left: 30px;
        margin-right: 30px;
        padding-left: 5px;
        padding-right: 5px;
    }
}

.header-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--tp-common-white);
    width: 100%;
    padding-top: 0px;
    animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
    box-shadow: 0px 2px 55px rgba(168, 182, 218, 0.32);
    z-index: 9999;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .header-sticky {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

.header-sticky .tp-menu-bar button {
    box-shadow: 0px 2px 55px rgba(168, 182, 218, 0.32);
}

.header-sticky .header-space-two {
    padding: 0;
}

.header-sticky.tp-header-bg {
    position: fixed;
    width: 100%;
    top: 0;
    margin: 0;
    border-radius: 0;
    transition: top 0.5s ease;
}

.header-sticky .tp-main-menu ul li a {
    padding: 0;
}

.hasdropdown-white.header-sticky {
    background-color: var(--tp-theme-1);
    padding-bottom: 0px;
    padding-top: 0;
    box-shadow: none;
}

.hasdropdown-white.header-sticky .tp-main-menu nav > ul > li > a {
    padding-top: 35px;
    padding-bottom: 35px;
}

.tp-md-header-area.header-sticky .bar .tp-menu-bar button {
    box-shadow: 0px 2px 55px rgba(168, 182, 218, 0.32);
}

.tp-green-bg.header-sticky {
    background: var(--tp-theme-1);
}

.tp-green-bg button {
    box-shadow: none;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-menu-white ul li {
        margin-right: 32px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-menu-white ul li {
        margin-right: 26px;
    }
}

.tp-menu-white ul li a {
    color: var(--tp-common-white);
    padding: 30px 0;
}

.tp-menu-white ul li a::after {
    display: none;
}

.tp-menu-white ul li a::before {
    display: none;
}

.tp-menu-white ul li:hover a {
    color: var(--tp-theme-primary);
}

.tp-menu-white ul li:hover ul.submenu {
    top: 100%;
}

.tp-menu-white ul li ul.submenu {
    top: 110%;
}

.tp-menu-black ul li {
    margin-right: 55px;
}

.tp-menu-black ul li a {
    font-size: 16px;
    padding: 0px;
    width: max-content;
}

@media only screen and (min-width: 1601px) and (max-width: 1800px) {
    .tp-menu-black ul li {
        margin-right: 40px;
    }
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .tp-menu-black ul li {
        margin-right: 30px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-menu-black ul li {
        margin-right: 40px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-menu-black ul li {
        margin-right: 22px;
    }
}

.login-color-black a {
    color: var(--tp-common-black);
    transition: 0.3s;
}

.login-color-black a:hover {
    color: var(--tp-theme-1);
}

@media only screen and (min-width: 1601px) and (max-width: 1800px) {
    .tp-bs-menu ul li {
        margin-right: 43px;
    }
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .tp-bs-menu ul li {
        margin-right: 32px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-bs-menu ul li {
        margin-right: 40px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-bs-menu ul li {
        margin-right: 22px;
    }
}

.tp-yellow-space {
    margin-left: 200px;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .tp-yellow-space {
        margin-left: 110px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-yellow-space {
        margin-left: 0;
    }
}

.tp-header-yellow-button {
    line-height: 0;
    padding-right: 3px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-header-yellow-button {
        margin-left: 30px;
    }
}

.tp-header-login {
    font-size: 18px;
    color: var(--tp-common-white);
    font-weight: 500;
}

.tp-header-login:hover {
    color: var(--tp-theme-primary);
}

.tp-login-primary a {
    color: var(--tp-common-white);
}

.tp-login-primary a:hover {
    color: var(--tp-theme-primary);
}


.login-icon {
    display: block;
}


@media (max-width: 1120px) {
    .login-icon {
        display: none;
    }
}

.login-icon {
    display: block;
}


@media (max-width: 1120px) {
    .login-icon {
        display: none;
    }
}

.tp-menu-space {
    padding-top: 50px;
}

.tp-menu-bar span {
    cursor: pointer;
}

.tp-menu-color ul li a {
    color: black;
    line-height: 0;
}

.tp-menu-color ul li:hover a {
    color: var(--tp-common-black);
}

.header-login-color {
    padding-bottom: 0;
}

.header-login-color a {
    color: black;
}

.header-login-color a:hover {
    color: var(--tp-common-black);
}

.tp-header-login-space a {
    padding-right: 60px;
    position: relative;
}

@media only screen and (min-width: 1601px) and (max-width: 1800px) {
    .tp-header-login-space a {
        padding-right: 50px;
    }
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .tp-header-login-space a {
        padding-right: 40px;
    }
}

.tp-header-login-space a span {
    color: var(--tp-theme-1);
    font-size: 14px;
    font-weight: 400;
    display: inline-block;
}

.tp-header-login-space a ul {
    position: absolute;
}

.tp-logo img {
    width: 220px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-bp-menu ul li {
        margin-right: 35px;
    }
}

.tp-header-left ul {
    margin-right: auto;

}

@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1601px) and (max-width: 1800px) {
    .tp-header-left ul {
        margin-right: 50px;
    }
}

.tp-header-left ul li {
    display: inline-block;
    /* margin-left: 60px; */
    position: relative;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1601px) and (max-width: 1800px) {
    .tp-header-left ul li {
        margin-left: 20px;
    }
}

.tp-header-left ul li a {
    font-size: 18px;
    font-weight: 500;
    color: var(--tp-common-black);
}

.tp-header-left ul li a .arrow-down {
    color: var(--tp-theme-1);
    font-size: 16px;
    margin-left: 5px;
}

.tp-header-left ul li a .fa-user {
    color: var(--tp-common-black);
    font-size: 16px;
    margin-right: 10px;
}

.tp-header-left ul li:hover > a {
    color: var(--tp-theme-1);
}

.tp-header-left ul li:hover > a i {
    color: var(--tp-theme-1);
}

.tp-header-left ul li:hover > ul {
    opacity: 1;
    visibility: visible;
    top: 232%;

}

.tp-header-left ul li ul {
    position: absolute;
    background-color: #26927B;
    right: -45%;
    margin-right: 0;
    padding: 0px 25px 7px 23px;
    top: 240%;
    opacity: 0;
    visibility: hidden;
    transition: 0.4s;
    z-index: 5;
}

.tp-header-left ul li ul li {
    margin: 0;
    padding: 7px;
}

.tp-header-left ul li ul li a {
    color: var(--tp-common-white);
    font-size: 15px;
    padding: 10px;
}

.tp-header-left ul li ul li:hover a {
    color: var(--tp-theme-primary);

}

.tpoffcanvas {
    position: fixed;
    top: 0;
    right: -100%;
    width: 690px;
    height: 100vh;
    box-shadow: 0 16px -32px 0 rgba(0, 0, 0, 0.8);
    background-color: black;
    z-index: 9999;
    transition: 1s;
    padding-right: 120px;
    padding-left: 100px;
    padding-top: 100px;
    padding-bottom: 50px;
    overflow-y: scroll;
    opacity: 0;
    visibility: hidden;
}

@media (max-width: 767px) {
    .tpoffcanvas {
        width: 330px;
        padding: 30px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .tpoffcanvas {
        width: 400px;
        padding: 40px;
    }
}

.tpoffcanvas.opened {
    right: 0;
    opacity: 1;
    visibility: visible;
}

.tpoffcanvas__logo {
    margin-bottom: 60px;
}

.tpoffcanvas__logo img {
    width: 180px;
    height: 100%;
}

.tpoffcanvas__close-btn {
    font-size: 40px;
    color: white;
    position: absolute;
    right: 50px;
    top: 110px;
    transition: 0.3s;
}

@media (max-width: 767px) {
    .tpoffcanvas__close-btn {
        font-size: 28px;
        right: 20px;
        top: 44px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .tpoffcanvas__close-btn {
        right: 36px;
        top: 52px;
    }
}

.tpoffcanvas__close-btn:hover {
    color: red;
    transform: rotate(10deg);
}

.tpoffcanvas__content p {
    font-size: 26px;
    color: var(--tp-common-white);
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 0;
    padding-bottom: 55px;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .tpoffcanvas__content p br {
        display: none;
    }
}

.tpoffcanvas__contact {
    clear: both;
}

@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
    .tpoffcanvas__contact {
        margin-top: 60px;
    }
}

.tpoffcanvas__contact span {
    font-size: 14px;
    color: #888888;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 30px;
    display: inline-block;
}

.tpoffcanvas__contact ul {
    margin-bottom: 60px;
}

.tpoffcanvas__contact ul li {
    font-size: 20px;
    font-weight: 500;
    color: var(--tp-common-white);
    margin-bottom: 27px;
    position: relative;
    padding-left: 40px;
}

@media (max-width: 767px) {
    .tpoffcanvas__contact ul li {
        font-size: 16px;
        padding-left: 30px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .tpoffcanvas__contact ul li {
        font-size: 18px;
    }
}

.tpoffcanvas__contact ul li:last-child {
    margin-bottom: 0;
}

.tpoffcanvas__contact ul li i {
    color: var(--tp-theme-primary);
    font-size: 22px;
    position: absolute;
    left: 0;
    top: 4px;
}

@media (max-width: 767px) {
    .tpoffcanvas__contact ul li i {
        font-size: 16px;
    }
}

.tpoffcanvas__contact ul li:hover {
    color: var(--tp-theme-primary);
}

.tpoffcanvas__input {
    margin-bottom: 65px;
}

.tpoffcanvas__input p {
    color: #888888;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.tpoffcanvas__input input {
    background: rgba(118, 118, 130, 0.3);
    border: transparent;
    height: 60px;
    width: 100%;
    padding-left: 20px;
    padding-right: 80px;
    border-radius: 10px;
    color: var(--tp-common-white);
}

.tpoffcanvas__input input::placeholder {
    font-size: 14px;
    color: var(--tp-common-white);
    font-weight: 400;
}

.tpoffcanvas__input button {
    height: 60px;
    width: 60px;
    background-color: var(--tp-theme-1);
    color: var(--tp-common-white);
    font-size: 16px;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 10px;
}

.tpoffcanvas__instagram img {
    border-radius: 10px;
    max-width: 100%;
}

.tpoffcanvas__instagram P {
    font-size: 14px;
    color: #888888;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 25px;
}

.tpoffcanvas__instagram a {
    margin-right: 10px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-header-yellow-button {
        margin-left: 0;
    }
}

.tp-main-menu {
    position: relative;
}

.tp-main-menu ul li.has-mega-menu {
    position: static;
}

.tp-main-menu ul li.has-mega-menu ul.submenu {
    width: 800px;
    right: 0;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-main-menu ul li.has-mega-menu ul.submenu {
        left: -170px;
    }
}

.tp-main-menu ul li.has-mega-menu ul.submenu li {
    width: 33.33%;
    float: left;
}

/*----------------------------------------*/
/*  03. hero css start
/*----------------------------------------*/
.tp-hero-space {
    padding-top: 280px;
    /*padding-bottom: 65px;*/
}

.shape-circle-yellow {
    height: 433px;
    width: 433px;
    background-color: var(--tp-theme-primary);
    border-radius: 100%;
    position: absolute;
    top: -180px;
    left: -112px;
    z-index: -1;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
    .shape-circle-yellow {
        top: -220px;
        left: -200px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .shape-circle-yellow {
        height: 370px;
        width: 370px;
    }
}

.shape-circle-blue {
    overflow: hidden;
    height: 990px;
    width: 990px;
    background-color: var(--tp-theme-1);
    border-radius: 100%;
    position: absolute;
    right: -330px;
    top: -130px;
    z-index: -1;
}

.shape-yellow-circle {
    background-color: var(--tp-theme-primary) !important;
    overflow: hidden;
    height: 940px;
    width: 1000px;
    border-radius: 100%;
    position: absolute;
    right: -577px;
    top: -89px;
    z-index: -1;
}

}


@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .shape-circle-blue {
        right: -500px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .shape-circle-blue {
        right: -370px;
        top: 30px;
        height: 880px;
        width: 880px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .shape-circle-blue {
        right: -408px;
        height: 770px;
        width: 770px;
        top: 30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .shape-circle-blue {
        display: none;
    }

    .tp-hero-big-img,
    .tp-hero-right-img-four,
    .tp-hero-right-side-five {
        display: none;
    }

    .tp-hero-space {
        padding-top: 100px;
    }

}

/*@media only screen and (min-width: 576px) and (max-width: 767px) {*/
/*  .shape-circle-blue {*/
/*    height: 500px;*/
/*    width: 500px;*/
/*  }*/
/*}*/
@media (max-width: 767px) {
    .shape-circle-blue {
        display: none;
    }
}

.tp-highlight {
    position: relative;
    display: inline-block;
}


.tp-highlight svg {
    position: absolute;
    bottom: 9px;
    left: 5px;
    -moz-animation: section-highlight 1s ease-in-out 0.3s forwards;
    -webkit-animation: section-highlight 1s ease-in-out 0.3s forwards;
    animation: section-highlight 1s ease-in-out 0.3s forwards;
}

.tp-highlight svg.highlight-space {
    bottom: 20px;
}

.tp-highlight svg path {
    -webkit-transform: translateX(-4px);
    -moz-transform: translateX(-4px);
    -ms-transform: translateX(-4px);
    -o-transform: translateX(-4px);
    transform: translateX(-4px);
}

.tp-highlight i {
    position: relative;
    z-index: 2;
    font-style: normal;
}

.bs-hero-social {
    position: absolute;
    left: -8%;
    transform: rotate(90deg);
    top: 60%;
    display: none;
}


@media only screen and (min-width: 1601px) and (max-width: 1800px) {
    .bs-hero-social {
        left: -12%;
        display: block !important;
    }
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .bs-hero-social {
        left: -16%;
        display: block !important;
    }
}

.shape-one {
    position: absolute;
    top: 50%;
    left: 90px;
    animation: moving 9s linear infinite;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
    .shape-one {
        top: 78%;
    }
}

.tp-bp-hero-space {
    padding-top: 180px;
    padding-bottom: 130px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-bp-hero-space {
        padding-bottom: 70px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-bp-hero-space {
        padding-top: 20px;
    }

    .tp-hero-bs-title {
        line-height: auto
    }
}

@media (max-width: 767px) {
    .tp-bp-hero-space {
        padding-top: 30px;
        padding-bottom: 0px;
    }

    .tp-hero-right-side-five {
        display: none
    }

}

.tp-bp-hero__img {
    max-width: inherit;
    /* margin-left: 67px; */
    top: -70px;
    position: relative;
    z-index: 2;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .tp-bp-hero__img {
        margin-left: 0;
        margin-top: 30px;

    }

    .tp-bp-hero__img img {
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .tp-bp-hero__img {
        margin-left: 0;
        margin-top: 50px;
        display: none;
    }

    .tp-bp-hero__img img {
        max-width: 100%;
    }
}

.tp-hero-title {
    color: var(--tp-common-black);
    font-size: 60px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 35px;
    letter-spacing: -2px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-hero-title {
        font-size: 70px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-hero-title {
        font-size: 60px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-hero-title {
        font-size: 50px;
    }
}

@media (max-width: 767px) {
    .tp-hero-title {
        font-size: 38px;
        margin-bottom: 18px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .tp-hero-title {
        font-size: 56px;
    }
}

@media (max-width: 767px) {
    .tp-hero-xs-title {
        font-size: 43px;
    }
}

.tp-hero-text p {
    line-height: 30px;
    font-size: 17px;
    font-weight: 400;
    padding-bottom: 40px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .tp-hero-text p br {
        display: none;
    }
}

@media (max-width: 767px) {
    .tp-hero-text p {
        font-size: 16px;
        padding-bottom: 0;
        line-height: 28px;
        margin-bottom: 25px;
    }
}

.tp-hero-social a {
    font-size: 14px;
    color: var(--tp-common-black);
    font-weight: 700;
    text-transform: uppercase;
    padding-right: 50px;
    letter-spacing: 2px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-hero-social a {
        padding-right: 43px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-hero-social a {
        padding-right: 15px;
    }
}

@media (max-width: 767px) {
    .tp-hero-social a {
        padding-right: 25px;
    }
}

.tp-hero-social a i {
    font-size: 14px;
    padding-right: 15px;
}

@media (max-width: 767px) {
    .tp-hero-social a i {
        padding-right: 0px;
    }
}

.tp-hero-social-bg-color {
    background-color: var(--tp-common-white);
    display: inline-block;
    padding-left: 90px;
    padding-right: 100px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-hero-social-bg-color {
        padding-left: 0px;
    }
}

@media (max-width: 767px) {
    .tp-hero-social-bg-color {
        padding-left: 0px;
        padding-right: 0;
        background-color: transparent;
    }
}

@media (max-width: 767px) {
    .bp-hero-social span {
        display: none;
    }
}

@media (max-width: 767px) {
    .bp-hero-social a {
        padding-right: 0;
        height: 40px;
        width: 40px;
        background-color: var(--tp-common-white);
        color: var(--tp-common-white);
        display: inline-block;
        text-align: center;
        line-height: 40px;
        margin-right: 10px;
        box-shadow: 0px 2px 55px rgba(168, 182, 218, 0.32);
        border-radius: 4px;
        transition: 0.5s;
    }

    .bp-hero-social a:hover {
        border-radius: 50%;
        transform: rotate(360deg);
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-hero-button {
        margin-bottom: 60px;
    }
}

@media (max-width: 767px) {
    .tp-hero-button {
        margin-bottom: 0px;
    }
}

@media (max-width: 767px) {
    .tp-hero-button .tp-btn, .tp-hero-button .tp-btn-grey {
        height: 56px;
        line-height: 56px;
        margin-bottom: 20px;
    }
}

.tp-hero-big-img {
    position: relative;
    right: 150px;
    z-index: 2;
}

@media (max-width: 767px) {
    .tp-hero-big-img {
        margin-top: 50px;
        margin-bottom: 50px;
        display: none !important;
    }
}

.tp-hero-big-img img {
    transform: translateX(45px);
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .tp-hero-big-img img {
        transform: translateX(-70px);
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-hero-big-img img {
        transform: translateX(-40px);
        max-width: 120%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-hero-big-img img {
        transform: translateX(-15px);
        max-width: 115%;
        margin-top: -80px;
    }
}

@media (max-width: 767px) {
    .tp-hero-big-img img {
        transform: translateX(0);
        max-width: 100%;
    }
}

.social-icon-1 {
    color: #0A66C2;
}

@media (max-width: 767px) {
    .social-icon-1 {
        margin-bottom: 20px;
    }
}

.social-icon-1:hover {
    color: #0A66C2;
}

.social-icon-2 {
    color: #1DA1F2;
}

@media (max-width: 767px) {
    .social-icon-2 {
        margin-bottom: 20px;
    }
}

.social-icon-2:hover {
    color: #1DA1F2;
}

.social-icon-3 {
    color: red;
}

@media (max-width: 767px) {
    .social-icon-3 {
        margin-bottom: 20px;
    }
}

.social-icon-3:hover {
    color: red;
}

.social-icon-4 {
    color: #1DA1F2;
}

.social-icon-4:hover {
    color: #1DA1F2;
}

.tp-hero-content-box {
    position: relative;
    z-index: 2;
    padding-top: 208px;
    padding-bottom: 86px;
}

.tp-hero-content-box .tp-hero-title {
    font-size: 62px;
    font-weight: 700;
    color: var(--tp-common-black);
    margin-bottom: 48px;
    letter-spacing: -4px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-hero-content-box .tp-hero-title {
        font-size: 53px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-hero-content-box .tp-hero-title {
        font-size: 52px;
        letter-spacing: -1.5px;
    }
}

@media (max-width: 767px) {
    .tp-hero-content-box .tp-hero-title {
        font-size: 30px;
        letter-spacing: -1.5px;
    }
}

.tp-hero-content-box .tp-hero-title span {
    color: var(--tp-theme-1);
}

.ct-hero-title {
    font-size: 75px;
    font-weight: 700;
    color: var(--tp-common-white);
    margin-bottom: 48px;
    letter-spacing: -3px;
    line-height: 1.1;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .ct-hero-title {
        font-size: 65px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .ct-hero-title {
        font-size: 60px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .ct-hero-title {
        font-size: 67px;
    }
}

@media (max-width: 767px) {
    .ct-hero-title {
        font-size: 40px;
        margin-bottom: 30px;
    }
}

.ce-hero-shape {
    position: absolute;
    top: 270px;
    left: 45px;
    animation: rotate2 15s linear infinite;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
    .ce-hero-shape {
        top: 173px;
        left: 16px;
    }
}

.ce-hero-shape-two {
    position: absolute;
    bottom: 100px;
    left: 45px;
    animation: moving 9s linear infinite;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
    .ce-hero-shape-two {
        bottom: 165px;
        left: 20px;
    }
}

.bp-hero-shape-1 {
    position: absolute;
    top: 265px;
    left: 60px;
    animation: moving 9s linear infinite;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .bp-hero-shape-1 {
        top: 38px;
        left: 20px;
    }
}

.bp-hero-shape-2 {
    position: absolute;
    bottom: 140px;
    left: 40px;
    animation: rotate2 15s linear infinite;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .bp-hero-shape-2 {
        bottom: 0px;
        left: 5px;
    }
}

.bp-hero-shape-3 {
    position: absolute;
    top: 20%;
    right: 37%;
    animation: rotate2 15s linear infinite;
}

.bp-hero-shape-4 {
    position: absolute;
    right: 119px;
    bottom: 110px;
    z-index: 5;
    animation: moving 9s linear infinite;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .bp-hero-shape-4 {
        right: 119px;
        bottom: -50px;
    }
}

.tp-hero-bg-circle {
    position: relative;
    z-index: 1;
}

.tp-hero-bg-circle::after {
    position: absolute;
    content: "";
    top: -160px;
    left: 0;
    right: 0;
    margin: auto;
    width: 1374px;
    height: 1374px;
    border-radius: 50%;
    background-color: #F4F3F9;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .tp-hero-bg-circle::after {
        top: -73px;
        width: 1200px;
        height: 1200px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-hero-bg-circle::after {
        top: -70px;
        width: 1100px;
        height: 1100px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-hero-bg-circle::after {
        top: 0;
        left: 0;
        width: 900px;
        height: 900px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-hero-bg-circle::after {
        top: 123px;
        left: 0;
        width: 700px;
        height: 700px;
    }
}

@media (max-width: 767px) {
    .tp-hero-bg-circle::after {
        top: 123px;
        left: 0;
        width: 300px;
        height: 300px;
    }
}

.tp-hero-light-shape-one {
    position: absolute;
    right: 11%;
    top: 45%;
    z-index: 2;
    animation: jumpTwo 4s infinite linear;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .tp-hero-light-shape-one {
        right: 4%;
    }
}

.tp-hero-light-shape-two {
    position: absolute;
    top: 47%;
    left: 12.5%;
    z-index: 2;
    animation: movinglight 10s linear infinite;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .tp-hero-light-shape-two {
        left: 5.5%;
    }
}

.tp-hero-light-shape-three {
    position: absolute;
    left: 130px;
    bottom: 120px;
    animation: jumpTwo 4s infinite linear;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-hero-light-shape-three {
        left: 10px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-hero-light-shape-three {
        left: 40px;
        bottom: 50px;
    }
}

@media (max-width: 767px) {
    .tp-hero-light-shape-three {
        left: 7px;
        bottom: 35px;
    }
}

.tp-hero-light-shape-four {
    position: absolute;
    right: 130px;
    bottom: 120px;
    animation: movinglight 10s linear infinite;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-hero-light-shape-four {
        right: 24px;
        bottom: 90px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-hero-light-shape-four {
        right: 10px;
        bottom: 50px;
    }
}

@media (max-width: 767px) {
    .tp-hero-light-shape-four {
        right: 7px;
        bottom: 10px;
    }
}

@media (max-width: 767px) {
    .tp-hero-img img {
        max-width: 100%;
    }
}

.tp-hero-shape-three {
    position: absolute;
    left: 0;
    bottom: 0;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .tp-hero-shape-three {
        bottom: -25px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-hero-shape-three {
        left: -35px;
    }
}

@media (max-width: 767px) {
    .tp-hero-shape-three {
        display: none;
    }
}

.tp-hero-social-link a {
    margin: 0 10px 30px 10px;
}

.tp-hero-social-link .tp-btn-white-brand {
    transition: 0.4s;
}

.tp-hero-social-link .tp-btn-white-brand:hover {
    transform: translateY(-10px);
}

.tp-hero-bd-title {
    font-size: 60px;
    font-weight: 700;
    color: var(--tp-common-white);
    letter-spacing: -1.5px;
    padding-bottom: 30px;
    line-height: 1.1;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-hero-bd-title {
        font-size: 65px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-hero-bd-title {
        font-size: 55px;
    }
}

@media (max-width: 767px) {
    .tp-hero-bd-title {
        font-size: 40px;
        margin-bottom: 0;
    }
}

.tp-hero-section-box {
    min-height: 600px;
    padding-top: 280px;
    padding-bottom: 100px;
}


@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-hero-section-box {
        padding-bottom: 0px;
        padding-top: 70px;
    }
}

@media (max-width: 767px) {
    .tp-hero-section-box {
        padding-bottom: 0px;
        padding-top: 50px;
    }
}

.tp-hero-section-box p {
    font-size: 17px;
    font-weight: 400;
    color: var(--tp-common-white);
    line-height: 30px;
    padding-bottom: 35px;
    position: relative;
    z-index: 2;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-hero-section-box p {
        padding-right: 100px;
    }
}

@media (max-width: 767px) {
    .tp-hero-section-box p {
        font-size: 17px;
        margin-bottom: 0;
    }
}

.xs-bottom-space {
    line-height: 1px;
}

@media (max-width: 767px) {
    .xs-bottom-space {
        margin-bottom: 30px;
    }
}

.tp-bp-hero-section-box .tp-hero-title {
    font-size: 60px;
    letter-spacing: -2px;
}

.tp-bp-hero-section-box p {
    color: black;
    padding-bottom: 35px;

}

@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 767px) {
    .tp-bp-hero-section-box p br {
        display: none;
    }
}

.tp-hero-three-button-box {
    line-height: 1;
}

@media (max-width: 767px) {
    .tp-hero-three-button-box {
        flex-wrap: wrap;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-hero-three-button-box {
        margin-bottom: 60px;
    }
}

.tp-hero-paly-button a {
    height: 70px;
    width: 70px;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    line-height: 70px;
    background-color: #26927b;
    margin-right: 20px;
    color: var(--tp-common-black);
}

.tp-hero-paly-button a i {
    font-size: 17px;
}

.tp-hero-paly-button a:hover {
    background-color: var(--tp-theme-primary);
    color: var(--tp-common-black);
    border-color: var(--tp-theme-primary);
}

.tp-hero-paly-button span {
    font-size: 18px;
    color: #fff;
}

.tp-bp-hero-paly-button a {
    background-color: var(--tp-theme-primary);
}

.tp-bp-hero-paly-button a:hover {
    background-color: var(--tp-theme-1);
    color: var(--tp-common-white);
    transition: 0.3s;
}

.tp-bp-hero-paly-button span {
    color: var(--tp-common-black);
}

.tp-hero-right-img {
    max-width: inherit;
    margin-left: 250px;
    position: relative;
    z-index: 2;
    padding-top: 90px;
}

@media only screen and (min-width: 1601px) and (max-width: 1800px) {
    .tp-hero-right-img {
        margin-left: 220px;
    }
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .tp-hero-right-img {
        margin-left: 110px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-hero-right-img {
        margin-left: 0px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-hero-right-img {
        margin-left: 0px;
        bottom: -100px;
    }
}

@media (max-width: 767px) {
    .tp-hero-right-img {
        margin-left: 0px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 767px) {
    .tp-hero-right-img img {
        max-width: 100%;
    }
}

.tp-hero-circle-three {
    position: absolute;
    height: 690px;
    width: 690px;
    background-color: var(--tp-theme-primary);
    border-radius: 50%;
    bottom: -150px;
    right: -100px;
    z-index: 1;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-hero-circle-three {
        right: -300px;
    }
}

@media (max-width: 767px) {
    .tp-hero-circle-three {
        height: 300px;
        width: 300px;
    }
}

.tp-hero-section-box-four p {
    color: black;
    padding-right: 40px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-hero-section-box-four p {
        padding-right: 30px;
    }
}

@media (max-width: 767px) {
    .tp-hero-section-box-four p {
        padding-right: 0px;
        margin-bottom: 0;
    }
}

@media (max-width: 767px) {
    .tp-hero-paly-button-four {
        margin-top: 30px;
        margin-bottom: 30px;
    }
}

.tp-hero-paly-button-four a {
    color: var(--tp-common-black);
    font-size: 18px;
    font-weight: 500;
}

.tp-hero-paly-button-four a i {
    padding-right: 15px;
}

.tp-hero-paly-button-four a:hover {
    color: var(--tp-theme-1);
}

.tp-hero-yellow-shape {
    position: absolute;
    height: 100%;
    width: 25rem;
    background-color: var(--tp-theme-primary);
    right: 0;
    top: 0;
    z-index: -1;
}

.tp-hero-right-img-four {
    max-width: inherit;
    margin-left: 144px;
    position: relative;
    z-index: 2;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-hero-right-img-four {
        padding-top: 0;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-hero-right-img-four img {
        max-width: 133%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .tp-hero-right-img-four img {
        max-width: 100%;
        width: 700;
        height: 530;
    }
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .tp-hero-right-img-four {
        margin-left: -130px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-hero-right-img-four {
        margin-left: -7px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-hero-right-img-four {
        margin-left: 11px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .tp-hero-right-img-four {
        margin-left: 0px;
        padding-top: 50px;
    }
}

@media (max-width: 767px) {
    .tp-hero-social {
        padding-bottom: 0px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-hero-section-box-four .tp-hero-title {
        font-size: 40px;
    }
}

.tp-hero-section-box-five {
    padding-top: 120px;
}

@media (max-width: 767px) {
    .tp-hero-section-box-five {
        padding-top: 90px;
    }
}

@media (max-width: 767px) {
    .tp-hero-section-box-five__title {
        padding-bottom: 25px;
    }
}

.tp-hero-section-box-five__subtitle-wrapper {
    border: 1px solid #F1F3FA;
    padding: 15px 30px;
    border-radius: 10px;
    margin-left: -30px;
    margin-right: 260px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-hero-section-box-five__subtitle-wrapper {
        margin-right: 180px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-hero-section-box-five__subtitle-wrapper {
        margin-left: 0px;
        margin-right: 0px;
    }
}

@media (max-width: 767px) {
    .tp-hero-section-box-five__subtitle-wrapper {
        margin-left: 0px;
        margin-right: 0px;
        padding: 15px 10px;
        flex-wrap: wrap;
        margin-bottom: 25px;
    }
}

.tp-hero-section-box-five__subtitle h5 {
    font-size: 18px;
    font-weight: 400;
    color: var(--tp-common-black);
    display: inline-block;
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .tp-hero-section-box-five__subtitle h5 {
        font-size: 14px;
        margin-bottom: 10px;
    }
}

.tp-hero-section-box-five__subtitle h5 b {
    color: #FD346E;
    font-size: 18px;
    font-weight: 500;
}

@media (max-width: 767px) {
    .tp-hero-section-box-five__subtitle h5 b {
        font-size: 14px;
    }
}

.tp-hero-section-box-five__subtitle h5 span {
    color: black;
    font-size: 12px;
    font-weight: 400;
}

.tp-hero-section-box-five__subtitle-link a {
    color: var(--tp-common-black);
    background-color: rgba(255, 220, 96, 0.2);
    border-radius: 90px;
    padding: 9px 20px;
    line-height: 0;
    display: inline-block;
}

.tp-hero-section-box-five__subtitle-link a:hover {
    background-color: rgba(137, 206, 251, 0.2);
}

.tp-hero-section-box-five__title p {
    font-size: 17px;
    font-weight: 400;
    line-height: 30px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-hero-section-box-five__title p {
        margin-bottom: 0;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-hero-section-box-five__title p {
        margin-bottom: 0;
    }

    .tp-hero-section-box-five__title p br {
        display: none;
    }
}

@media (max-width: 767px) {
    .tp-hero-section-box-five__title p {
        font-size: 17px;
    }

    .tp-hero-section-box-five__title p br {
        display: none;
    }
}

.tp-hero-section-box-five__input {
    position: relative;
    margin-right: 130px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 767px) {
    .tp-hero-section-box-five__input {
        margin-right: 0;
    }
}

.tp-hero-section-box-five__input input {
    width: 100%;
    border: 2px solid var(--tp-common-black);
    border-radius: 10px;
    height: 80px;
    padding-left: 25px;
    padding-right: 255px;
    font-size: 18px;
    color: var(--tp-common-black);
    font-weight: 400;
}

@media (max-width: 767px) {
    .tp-hero-section-box-five__input input {
        padding-left: 15px;
        padding-right: 0px;
        padding-right: 15px;
        margin-bottom: 20px;
        height: 60px;
        font-size: 16px;
    }
}

.tp-hero-section-box-five__input button {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
}

@media (max-width: 767px) {
    .tp-hero-section-box-five__input button {
        position: static;
        top: 0;
        transform: translateY(0);
    }
}

.tp-bp-hero-section-box .tp-hero-section-box p {
    color: black;
}

.tp-hero-bs-title {
    font-size: 52px;
    font-weight: 700;
    color: var(--tp-common-black);
    letter-spacing: -3px;
    padding-bottom: 30px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-hero-bs-title {
        font-size: 45px;
        padding-bottom: 20px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-hero-bs-title {
        font-size: 42px;
    }
}

@media (max-width: 767px) {
    .tp-hero-bs-title {
        font-size: 28px;
        letter-spacing: 1px;
        padding-bottom: 15px;
    }
}

.tp-hero-right-side-five .tp-yellow-circle-five {
    height: 730px;
    width: 730px;
    background-color: var(--tp-theme-primary);
    border-radius: 50%;
    position: absolute;
    z-index: -1;
    margin-left: -33px;
    display: flex;
    justify-content: center;
    align-items: center
}

@media only screen and (min-width: 1601px) and (max-width: 1800px) {
    .tp-hero-right-side-five .tp-yellow-circle-five {
        margin-left: -15px
    }
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .tp-hero-right-side-five .tp-yellow-circle-five {
        height: 580px;
        width: 580px;
        margin-left: -10px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-hero-right-side-five .tp-yellow-circle-five {
        height: 500px;
        width: 500px;
        margin-left: -20px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-hero-right-side-five .tp-yellow-circle-five {
        height: 400px;
        width: 400px;
        margin-left: -20px;
        margin-top: 90px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-hero-right-side-five .tp-yellow-circle-five {
        margin-left: -16px;
    }
}

@media (max-width: 767px) {
    .tp-hero-right-side-five .tp-yellow-circle-five {
        margin-left: 0px;
        height: 300px;
        width: 300px;
    }
}

.tp-hero-right-side-five__img {
    margin-left: 10px;
    margin-top: 25px;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .tp-hero-right-side-five__img {
        margin-left: 0px;
        margin-top: 70px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-hero-right-side-five__img {
        margin-top: 50px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-hero-right-side-five__img {
        margin-top: 150px;
    }
}

@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 767px) {
    .tp-hero-right-side-five__img img {
        max-width: 100%;
    }
}

.tp-hero-border {
    border-bottom: 1px solid #EEEEEE;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .tp-hero-border {
        border: none;
    }
}

.tp-hero-icon-five {
    position: absolute;
    bottom: -13px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-hero-icon-five {
        bottom: -67px;
    }
}

.tp-bp-hero-shape {
    position: absolute;
    top: 0;
    right: 0;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-bp-hero-shape {
        top: -31px;
        right: -185px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-bp-hero-shape {
        top: -29px;
        right: -345px;
    }
}

.tp-bp-hero-shape-404 {
    position: absolute;
    top: 185px;
    right: 100px;

    @media #{$xl} {
        padding-top: 40px;
        top: -31px;
        right: -185px;
    }
    @media #{$lg} {
        padding-top: 40px;
        top: -29px;
        right: -345px;
    }
}

.tp-bp-hero-shape-500 {
    position: absolute;
    top: 185px;
    right: 100px;
    @media #{$xl} {
        padding-top: 40px;
        top: -31px;
        right: -185px;
    }
    @media #{$lg} {
        padding-top: 40px;
        top: -29px;
        right: -345px;
    }
}


.bp-blur-shape {
    position: absolute;
    bottom: 0px;
    left: 110px;
    transition: 0.4s;
}

.tp-hero-area:hover .bp-blur-shape {
    bottom: -70px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-bp-hero-section-box .tp-bs-hero-title {
        font-size: 47px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-bp-hero-section-box .tp-bs-hero-title {
        font-size: 33px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-bp-hero-section-box .tp-bs-hero-title {
        font-size: 35px;
    }
}

@media (max-width: 767px) {
    .tp-bp-hero-section-box .tp-bs-hero-title {
        font-size: 25px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .tp-bp-hero-section-box .tp-bs-hero-title {
        font-size: 40px;
    }
}

.bs-xl-hero-social {
    margin-top: 25px;
}

@media (max-width: 767px) {
    .bs-xl-hero-social {
        margin-top: 20px;
    }
}

/*----------------------------------------*/
/*  04. creative css start
/*----------------------------------------*/
.tp-creative-content .tp-creative-title {
    color: var(--tp-common-white);
    font-weight: 500;
    font-size: 2.5rem;
    line-height: 1.3;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-creative-content .tp-creative-title {
        font-size: 40px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-creative-content .tp-creative-title {
        font-size: 32px;
    }
}

@media (max-width: 767px) {
    .tp-creative-content .tp-creative-title {
        font-size: 26px;
    }
}

.tp-creative-content .tp-creative-title b {
    color: var(--tp-theme-primary);
    text-decoration: underline;
    font-weight: 700;
}

.tp-play-button a {
    height: 90px;
    width: 90px;
    border-radius: 50%;
    border: 2px solid #fff;
    display: inline-block;
    text-align: center;
    line-height: 90px;
    margin-right: 20px;
    color: var(--tp-common-white);
}

@media (max-width: 767px) {
    .tp-play-button a {
        margin-bottom: 20px;
    }
}

.tp-play-button a i {
    font-size: 22px;
}

.tp-play-button a:hover {
    background-color: var(--tp-theme-primary);
    color: var(--tp-common-black);
    border-color: var(--tp-theme-primary);
}

.tp-play-button span {
    font-size: 18px;
    color: #fff;
}

@media (max-width: 767px) {
    .tp-play-button span {
        display: block;
    }
}

.tp-creative-item {
    background-color: var(--tp-theme-primary);
    padding: 40px 50px;
    border-radius: 20px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-creative-item {
        padding: 40px 40px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-creative-item {
        padding: 20px 15px;
    }
}

@media (max-width: 767px) {
    .tp-creative-item {
        padding: 40px 30px;
    }
}

.tp-creative-item:hover .tp-creative-icon {
    -webkit-transform: translate3d(0, -10px, 0);
    -moz-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
}

.tp-creative-item:hover .tp-creative-icon i {
    color: rgba(41, 41, 48, 0.8);
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .creative-box {
        padding-left: 0;
        padding-right: 0;
    }
}

.counter-text span {
    font-size: 45px;
    font-weight: 700;
    color: var(--tp-common-black);
    line-height: 1;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .counter-text span {
        font-size: 40px;
    }
}

.counter-text p {
    font-size: 17px;
    color: var(--tp-common-black);
    font-weight: 500;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .counter-text p {
        font-size: 15px;
    }
}

@media (max-width: 767px) {
    .counter-text p {
        font-size: 16px;
    }
}

.tp-creative-blue {
    background-color: var(--tp-theme-secondary);
}

.tp-creative-pink {
    background-color: #FFADAD;
}
.tp-creative-white {
    background-color: #ffffff;
}

.creative-shape-img {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .creative-shape-img {
        top: 31%;
        left: -74px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .creative-shape-img {
        top: 29%;
        left: -100px;
    }
}

@media (max-width: 767px) {
    .creative-shape-img {
        top: 29%;
        left: -102px;
        transform: translateY(-50%) rotate(17deg);
        transform-origin: left bottom;
    }
}

.creative-shape-img-2 {
    position: absolute;
    top: 50%;
    right: -200px;
    animation: zoom 5s infinite;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .creative-shape-img-2 {
        top: 30%;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .creative-shape-img-2 {
        top: 41%;
        right: -267px;
    }
}

.tp-creative-icon {
    backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18);
    -moz-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18);
    transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-creative-icon {
        margin-right: 15px;
    }
}

@media (max-width: 767px) {
    .tp-creative-icon {
        margin-right: 20px;
    }
}

.tp-creative-icon i {
    transition: 0.4s;
    font-size: 77px;
    color: rgba(41, 41, 48, 0.3);
}

.shape-two {
    position: absolute;
    top: -100px;
    left: 0;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .creative-box {
        padding: 0;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-creative-icon {
        margin-right: 20px;
    }
}

.creative-z-index {
    position: relative;
    z-index: 2;
}

.circle-animation.testimonial {
    top: 50%;
    left: 50%;
    border: 1px solid #3F3F47;
    width: 700px;
    height: 700px;
    position: absolute;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .circle-animation.testimonial {
        top: 28%;
        width: 700px;
        height: 700px;
    }
}

@media (max-width: 767px) {
    .circle-animation.testimonial {
        top: 32%;
        width: 330px;
        height: 330px;
    }
}

.circle-animation span.tp-circle-1 {
    display: block;
    position: absolute;
    content: "";
    top: calc(50% - 1px);
    left: 50%;
    width: 50%;
    height: 1px;
    background: transparent;
    transform-origin: left;
    -webkit-animation: circle-animation 13s linear infinite;
    -moz-animation: circle-animation 13s linear infinite;
    -o-animation: circle-animation 13s linear infinite;
    animation: circle-animation 13s linear infinite;
}

.circle-animation span.tp-circle-2 {
    display: block;
    position: absolute;
    content: "";
    top: calc(50% - 1px);
    left: 50%;
    width: 50%;
    height: 1px;
    background: transparent;
    transform-origin: left;
    transform: scale(-1, 1);
    -webkit-animation: circle-animation2 13s linear infinite;
    -moz-animation: circle-animation2 13s linear infinite;
    -o-animation: circle-animation2 13s linear infinite;
    animation: circle-animation2 13s linear infinite;
}

.circle-animation span.tp-circle-1::before {
    position: absolute;
    content: "";
    width: 22px;
    height: 22px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    top: -25px;
    right: -12px;
    background-color: #FFADAD;
}

.circle-animation span.tp-circle-2::after {
    position: absolute;
    content: "";
    width: 14px;
    height: 14px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    bottom: -25px;
    right: -7px;
    background-color: var(--tp-theme-1);
}

.tp-country-img img {
    max-width: 100%;
}

/*----------------------------------------*/
/*  05. cta css start
/*----------------------------------------*/
.tp-cta-bottom-wrapper {
    background-color: #F9FAFB;
    padding-top: 40px;
    padding-left: 60px;
    padding-right: 60px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin-top: -115px;
    position: relative;
    z-index: 9;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-cta-bottom-wrapper {
        margin-top: -25px;
    }
}

@media (max-width: 767px) {
    .tp-cta-bottom-wrapper {
        margin-top: 0px;
        padding-left: 0px;
        padding-right: 0px;
    }
}

.tp-btn-white-lg {
    transition: 0.4s;
}

.tp-btn-white-lg:hover {
    transform: translateY(-10px);
}

@media (max-width: 767px) {
    .tp-cta-img-item {
        padding-top: 50px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-cta-img-item img {
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .tp-cta-img-item img {
        max-width: 100%;
        transform: rotateY(180deg);
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-cta-section-title-box {
        padding-left: 0;
    }
}

@media (max-width: 767px) {
    .tp-cta-section-title-box {
        padding-left: 0;
    }
}

/*----------------------------------------*/
/*  06. brand css start
/*----------------------------------------*/
.tp-brands-item {
    text-align: center;
}

.tp-brands-item img {
    max-width: 100%;
}

.tp-brand-title {
    font-weight: 700;
    font-size: 35px;
    color: black !important;

}

.tp-brand-area-background {
    background: #141C3A !important;
}

@media (max-width: 767px) {
    .tp-brand-title {
        font-size: 2rem !important;
    }
}

.tp-brands-title-two h3 {
    font-size: 22px;
    font-weight: 500;
    color: var(--tp-common-white);
}

.tp-brands-title-two span {
    color: var(--tp-theme-primary);
}

.tp-brand-title-four h1,
.tp-brand-title-four h4 {
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 600;
    color: var(--black);
}

.tp-brand-title-four b {
    font-weight: 700;
    color: var(--tp-common-black);
}

.tp-brand-build-title {
    color: var(--tp-common-black);
    font-weight: 700;
    font-size: 20px;
}

@media (max-width: 767px) {
    .tp-brand-build-title {
        font-size: 18px;
    }

    .tp-brand-title-four h1,
    .tp-brand-title-four h4 {
        font-size: 2rem;
    }
}

.bp-blog-shape-1 {
    position: absolute;
    bottom: 72px;
    right: 42px;
    animation: rotate2 15s linear infinite;
}

.bp-blog-shape-2 {
    position: absolute;
    right: 62px;
    top: 53px;
    animation: moving 10s linear infinite;
}

.bp-blog-shape-3 {
    position: absolute;
    bottom: -60px;
    left: -100px;
    animation: rotate2 15s linear infinite;
}

/*----------------------------------------*/
/*  07. service css start
/*----------------------------------------*/
.tp-service-item {
    background-color: var(--tp-common-white);
    padding: 70px 60px;
    border-radius: 20px;
    position: relative;
    z-index: 2;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-service-item {
        padding: 50px 30px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-service-item {
        padding: 30px 25px;
    }
}

@media (max-width: 767px) {
    .tp-service-item {
        flex-wrap: wrap;
        padding: 35px 20px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .tp-service-item {
        padding: 49px 30px;
    }
}

@media (max-width: 767px) {
    .tp-service-item .tp-sv-img {
        margin-bottom: 20px;
    }
}

.tp-service-item:hover .tp-sv-img {
    -webkit-transform: translate3d(0, -10px, 0);
    -moz-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
}

.tp-sv-box {
    position: relative;
}

.tp-sv-box:before {
    content: "";
    background-image: linear-gradient(-90deg, #31957b 0%, #f9c464 100%);
    opacity: 0.5;
    height: 27px;
    width: 84%;
    bottom: 0px;
    position: absolute;
    left: 0;
    border-radius: 30px;
    right: 0;
    margin: auto;
    z-index: 1;
    transition: 0.4s;
}

.tp-sv-box:hover:before {
    bottom: -20px;
}

.tp-sv-img {
    backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18);
    -moz-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18);
    transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18);
}

.tp-sv-img img {
    min-width: 85px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-sv-content {
        padding-left: 30px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-sv-content {
        padding-left: 15px;
    }
}

@media (max-width: 767px) {
    .tp-sv-content {
        padding-left: 0px;
    }
}

.tp-sv-content .tp-sv-title {
    color: var(--tp-common-black);
    font-size: 30px;
    font-weight: 500;
}

.tp-sv-content .tp-sv-title:hover {
    color: var(--tp-theme-1);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-sv-content .tp-sv-title {
        font-size: 25px;
    }
}

@media (max-width: 767px) {
    .tp-sv-content .tp-sv-title {
        font-size: 25px;
    }
}

.tp-sv-content p {
    line-height: 26px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-sv-content p {
        font-size: 15px;
    }
}

.tp-service-section-box {
    position: relative;
    z-index: 2;
}

.tp-sv-link a {
    font-size: 18px;
    color: var(--tp-common-black);
    font-weight: 600;
}

.tp-sv-link a:hover {
    color: var(--tp-theme-1);
}

.tp-sv-link a:hover i {
    animation: tfLeftToRight 0.4s forwards;
}

.tp-sv-link a i {
    font-weight: 400;
    padding-right: 10px;
}

.tp-sv-shape-img {
    position: absolute;
    bottom: 0;
    left: 10px;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .tp-sv-shape-img {
        bottom: -75px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-sv-shape-img {
        bottom: -70px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-sv-shape-img {
        bottom: -74px;
    }
}

@media (max-width: 767px) {
    .tp-sv-shape-img {
        bottom: -80px;
    }
}

.tp-sv-shape-img-2 {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin: 0 auto;
}

.tp-sv-item-two {
    border: 1px solid #3F3F47;
    border-radius: 20px;
    padding-top: 90px;
    padding-bottom: 90px;
    padding-left: 50px;
    position: relative;
    padding-right: 44px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-sv-item-two {
        padding-top: 30px;
        padding-bottom: 30px;
        padding-left: 42px;
        position: relative;
        padding-right: px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-sv-item-two {
        padding-top: 30px;
        padding-bottom: 30px;
        padding-left: 39px;
        padding-right: 26px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-sv-item-two {
        padding-top: 60px;
        padding-bottom: 60px;
        padding-left: 50px;
        padding-right: 25px;
    }
}

@media (max-width: 767px) {
    .tp-sv-item-two {
        padding-top: 50px;
        padding-bottom: 50px;
        padding-left: 33px;
        padding-right: 11px;
    }
}

.tp-sv-item-two:hover {
    border-color: #3F3F47;
}

.tp-sv-item-two:hover::after {
    height: 100%;
}

.tp-sv-item-two:hover .tp-sv-icon-two {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.tp-sv-icon-two {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 101%;
    width: 100%;
    background-color: #3F3F47;
    border-radius: 20px;
    opacity: 0;
    transition: 0.3s;
    visibility: hidden;
    transform: scale(0.9);
}

.tp-sv-icon-two i {
    font-size: 165px;
    -webkit-text-stroke: 1px #8D8D9C;
    color: transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}

.tp-sv-icon-two a {
    height: 100%;
    width: 100%;
    display: block;
}

.tp-sv-content-tow .tp-sv-product-design {
    font-size: 32px;
    font-weight: 500;
    color: var(--tp-common-white);
    margin-bottom: 40px;
}

.tp-sv-content-tow p {
    font-size: 17px;
    font-weight: 400;
    line-height: 30px;
    color: #B5B8C1;
    margin-bottom: 0;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-sv-content-tow p {
        font-size: 16px;
    }
}

.tp-sv-blue-color {
    border-bottom: 3px solid #5956E9;
}

.tp-sv-sky-color {
    border-bottom: 3px solid #57c9da;
}

.tp-sv-pink-color {
    border-bottom: 3px solid #FFADAD;
}

.service-color-1 {
    background-color: rgba(255, 220, 96, 0.1);
}

.service-color-2 {
    background-color: rgba(130, 132, 253, 0.1);
}

.service-color-3 {
    background-color: rgba(255, 173, 173, 0.1);
}

.tp-services-item {
    padding: 80px 45px;
    border-radius: 20px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-services-item {
        padding: 45px 40px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-services-item {
        padding: 40px 45px;
    }
}

@media (max-width: 767px) {
    .tp-services-item {
        padding: 35px 30px;
    }
}

.tp-services-item__icon img {
    min-height: 123px;
}

.tp-services-item__content p {
    font-size: 17px;
    font-weight: 400;
    line-height: 30px;
    color: #8A879F;
    margin-bottom: 0;
}

.tp-services-item:hover .tp-services-item__icon {
    animation: icon-bounce 0.8s 1;
}

.tp-sv-title {
    font-size: 32px;
    color: var(--tp-common-black);
    font-weight: 500;
    margin-bottom: 45px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-sv-title {
        margin-bottom: 25px;
    }
}

.tp-sv-title:hover {
    color: var(--tp-theme-1);
}

.tp-service-item-four {
    background-color: #f8f8f8;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: 8px;
    box-shadow: 0px 4px 4px rgba(100, 109, 152, 0.06);
    padding: 2rem;
    transition: 0.3s;
    position: relative;
    z-index: 2;
    height: 100%;
}

.tp-service-item-four::before {
    content: "";
    position: absolute;
    border-top-right-radius: 8px;
    background-image: url("../svg/shape-curved.svg");
    background-size: contain;
    background-repeat: no-repeat;
    width: 7.75rem;
    height: 7.75rem;
    top: 0;
    right: 0;
    z-index: 0
}

.tp-service-item-four__img {
    height: 60px;
    width: 60px;
    background-color: rgba(139, 64, 229, 0.15);
    line-height: 60px;
    text-align: center;
    border-radius: 6px;
    transition: 0.6s;
}

.tp-sv-sm-title {
    font-size: 1.5rem;
    line-height: 1.35;
    font-weight: 600;

    color: var(--tp-common-black);

}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-sv-sm-title {
        font-size: 20px;
    }
}

.tp-sv-border-effect {
    position: relative;
    height: 100%;
}

.tp-sv-border-effect::after {
    position: absolute;
    content: "";
    bottom: 3px;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #00d5b9;
    border-radius: 8px;
    transition: 0.4s;
}

.tpfadeUp {
    margin-bottom: 40px;
}

.semi-title-test {
    font-size: 50px;
    font-weight: normal;
}

.process-para-1 {
    font-size: 1.5rem !important;
    line-height: 1.33 !important;
    font-weight: 400 !important;
}

.title-keySteps-main {
    margin-bottom: 0px !important;
}

.key-process-heading {
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 600;
    text-transform: capitalize;
    color: black;
}

.tp-footer-img-text {
    display: flex !important;
    justify-content: space-between;
    /*align-items: center;*/
    gap: 20px;
}

.question-mark-icon {
    width: 50px;
' height: auto;
}

.footer-border-container {
    /*border: 1px solid lightgrey;*/
    /*background: #f7f8fa;*/
    padding-top: 20px;
    border-radius: 30px;
}

.footer-icon-media {
    width: 20px;
    height: auto;
    padding-top: 5px;
}

.inner-process-colored-span {
    color: green !important;
}

.footer-icon-main {
    margin-top: 15px;
}



.team-heading {
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 600;
    text-transform: capitalize;
}

.footer-logo-img {
    width: 130px !important;
    height: auto !important;
    margin-bottom: 20px;
}

/*.link-writting-main {*/
/*    display: flex;*/
/*    justify-content: start;*/
/*    align-items: center;*/
/*    column-gap: 15px; !* Add horizontal gap between items *!*/
/*    row-gap: 10px;*/
/*}*/
.link-writting-main {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start; /* Top-align icons with the first line of text */
  gap: 12px; /* Combines column-gap and row-gap */
  margin-bottom: 12px; /* spacing between stacked items */
}

/* Optional: refine icon size if needed */
.link-writting-main img {
  width: 25px;
  height: 25px;
  object-fit: contain;
      margin-top: 3px;         /* vertically nudge for better alignment */
  padding: 0;              /* ensure no default padding */
  margin-left: 0;          /* eliminate unintended indentation */
  flex-shrink: 0;          /* don’t allow icon to scale */
  vertical-align: top;     /* force baseline alignment */
}

@media only screen and (max-width: 970px) and (min-width: 700px) {
    .tp-hide-md {
        display: block;
    }
}

@media only screen and (max-width: 699px) {
    .tp-hide-md {
        display: none;
    }
}


.link-writting {
    font-size: 13px;
    font-weight: 400;
    margin: 0px !important;
    /*max-width: 250px;*/
}

.link-writing-padding {
    padding-bottom: 5px !important;
}

.link-icon {
    margin: 0px !important;
}

.tp_outer {
    width: 70%; /* Adjust the width as needed */
    padding-top: 70%; /* Adjust the padding-top to reduce the size */
    /*background-color: #141C3A;*/
    /*border-radius: 100%;*/
    position: relative;
    margin: auto; /* Center align if needed */
}

.tp_inner {
    position: absolute;
    top: 5%; /* Adjust these percentages to control the inner circle size */
    /*left: 5%;*/
    /*right: 5%;*/
    /*bottom: 5%;*/
    /*border-radius: 100%;*/
    /*overflow: hidden;*/
    /*background: #fec665;*/
}

.tp_inner_img {
    width: 90%; /* Ensure image fills the inner circle */
    height: 90%;
    object-fit: cover;
    border-radius: 100%;
}

.emp_designation {
    font-size: larger;
    font-weight: 500;
    margin-top: 0px !important;
    padding-top: 0px !important;
}

.emp_name {
    font-size: 25px;
    font-weight: bold;
    padding-top: 20px;
}

.tp_writting {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
}

.services-caption {
    font-size: 1.2rem;
    line-height: 1.33;
    color: black;
    padding-top: 25px;
}

.service-icon-container {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 20px;
}

.service-icon {
    width: 70px;
}

.service-container-main {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 50px;
}

.service-icon-title {
    font-size: 1.0rem;
    line-height: 1.0rem;
    font-weight: 600;
}

.tp-sv-border-effect:hover .tp-service-item-four__img {
    transform: rotateY(180deg);
}

.tp-sv-border-effect:hover::after {
    bottom: -3px;
}

.sv-border-effect-1::after {
    background-color: #b7559e;
}

.sv-border-effect-2::after {
    background-color: #FBBA49;
}

.sv-border-effect-3::after {
    background-color: #b7579e;
}

.sv-border-effect-4::after {
    background-color: #FBBE53;
}

.sv-border-effect-5::after {
    background-color: #04e3c6;
}

.sv-border-effect-6::after {
    background-color: #FBB946;
}

.sv-border-effect-7::after {
    background-color: #F96734;
}

.sv-border-effect-orange::after {
    background-color: #F96734;
}

.sv-border-effect-purple::after {
    background-color: #B7559E;
}

.sv-border-effect-yellow::after {
    background-color: #FBB946;
}

.sv-border-effect-brown::after {
    background-color: #b26f4e;
}

.sv-border-effect-green::after {
    background-color: #05E3C6;
}

.sv-color-1 .tp-service-item-four__img {
    background-color: rgba(30, 226, 207, 0.15);
}

.sv-color-1 .tp-service-item-four__title:hover h3 {
    color: #00d5b9;
}

.sv-color-1 .tp-service-item-four__title:hover .tp-service-item-four__img {
    background-color: rgba(30, 226, 207, 0.15);
}

.sv-color-2 .tp-service-item-four__img {
    background-color: rgba(139, 64, 229, 0.15);
}

.sv-color-2 .tp-service-item-four__title:hover h3 {
    color: #b7559e;
}

.sv-color-3 .tp-service-item-four__img {
    background-color: rgba(255, 136, 90, 0.15);
}

.sv-color-3 .tp-service-item-four__title:hover h3 {
    color: #FBBA49;
}

.sv-color-4 .tp-service-item-four__img {
    background-color: rgba(253, 52, 110, 0.15);
}

.sv-color-4 .tp-service-item-four__title:hover h3 {
    color: #b7579e;
}

.sv-color-5 .tp-service-item-four__img {
    background-color: #F5F4E8;
}

.sv-color-5 .tp-service-item-four__title:hover h3 {
    color: #FBBE53;
}

.sv-color-6 .tp-service-item-four__img {
    background-color: rgba(12, 214, 138, 0.15);
}

.sv-color-6 .tp-service-item-four__title:hover h3 {
    color: #04e3c6;
}

.sv-color-7 .tp-service-item-four__img {
    background-color: rgba(252, 220, 2, 0.15);
}

.sv-color-7 .tp-service-item-four__title:hover h3 {
    color: #FBB946;
}

.sv-color-8 .tp-service-item-four__img {
    background-color: rgba(252, 220, 2, 0.15);
}

.sv-color-8 .tp-service-item-four__title:hover h3 {
    color: #F96734;
}

.sv-color-orange .tp-service-item-four__img {
    background-color: #F9F4D3;
    justify-content: center;
    display: flex;
    align-items: center;
}

.sv-color-orange .tp-service-item-four__title:hover h3 {
    color: #F96734;
}

.sv-color-orange .tp-service-item-four__title:hover .tp-service-item-four__img {
    background-color: #F96734;
}

.sv-color-purple .tp-service-item-four__img {
    background-color: #E8DDF5;
    justify-content: center;
    display: flex;
    align-items: center;
}

.sv-color-purple .tp-service-item-four__title:hover h3 {
    color: #B7559E;
}

.sv-color-purple .tp-service-item-four__title:hover .tp-service-item-four__img {
    background-color: #B7559E;
}

.sv-color-yellow .tp-service-item-four__img {
    background-color: #F8F3D2;
    justify-content: center;
    display: flex;
    align-items: center;

}

.sv-color-yellow .tp-service-item-four__title:hover h3 {
    color: #FBB946;
}

.sv-color-yellow .tp-service-item-four__title:hover .tp-service-item-four__img {
    background-color: #F9F4D3;
}

.sv-color-brown .tp-service-item-four__img {
    background-color: #b26f4e;
}

.sv-color-brown .tp-service-item-four__title:hover h3 {
    color: #b26f4e;
}

.sv-color-brown .tp-service-item-four__title:hover .tp-service-item-four__img {
    background-color: #b26f4e;
}

.sv-color-green .tp-service-item-four__img {

    background-color: #D5F3E8;
    justify-content: center;
    display: flex;
    align-items: center;
}

.sv-color-green .tp-service-item-four__title:hover h3 {
    color: #05E3C6;
}

.sv-color-green .tp-service-item-four__title:hover .tp-service-item-four__img {
    background-color: #05E3C6;
}

.sv-color-eight {
    background-color: rgba(130, 206, 253, 0.15);
    padding-top: 55px;
    padding-bottom: 55px;
    border-radius: 8px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sv-color-eight__title h3 {
    color: var(--tp-common-black);
    font-size: 18px;
    font-weight: 500;
    padding-bottom: 10px;
}

.sv-color-eight__title h3:hover {
    color: var(--tp-theme-1);
}

.sv-color-eight__title i {
    color: var(--tp-theme-1);
    font-weight: 900;
    font-size: 110px;
    transform: rotate(45deg);
    transition: 0.3s;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .sv-color-eight__title i {
        font-size: 100px;
    }
}

.sv-color-eight__title i:hover {
    color: var(--tp-theme-secondary);
}

.tp-best-services-title-box {
    margin-bottom: 180px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
    .tp-best-services-title-box {
        margin-bottom: 50px;
    }
}

.tp-sv-button img {
    animation: rotate2 15s linear infinite;
}

@media (max-width: 767px) {
    .tp-sv-button {
        margin-bottom: 70px;
    }
}

.tpservices {
    padding-left: 50px;
}

@media (max-width: 767px) {
    .tpservices {
        padding-left: 25px;
    }
}

.tpservices__icon i {
    font-size: 66px;
    color: rgba(0, 0, 0, 0.3);
}

.tpservices__icon .angle-right-svg {
    color: var(--tp-common-black);
    font-weight: 300;
}

.tpservices__content .tp-sv-bs-title {
    color: var(--tp-common-black);
    font-weight: 500;
    font-size: 30px;
    line-height: 1.3;
}

@media (max-width: 767px) {
    .tpservices__content .tp-sv-bs-title {
        font-size: 20px;
    }

    .tpservices__content .tp-sv-bs-title br {
        display: none;
    }
}

.tpservices__content .tp-sv-bs-title:hover {
    color: var(--tp-theme-1);
}

.sv-border-top {
    border-top: 2px solid var(--tp-common-black);
}

.sv-border-bottom {
    border-bottom: 2px solid var(--tp-common-black);
}

.tp-sv-space-wrapper {
    margin-left: 110px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-sv-space-wrapper {
        margin-left: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
    .tp-sv-space-wrapper {
        margin-left: 0;
    }
}

@media (max-width: 767px) {
    .tp-sv-space-wrapper {
        margin-left: 0;
    }
}

.service-space {
    padding: 40px 60px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .service-space {
        margin-left: 0;
        padding: 20px 20px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
    .service-space {
        margin-left: 0;
    }
}

@media (max-width: 767px) {
    .service-space {
        margin-left: 0;
        padding: 20px 5px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-sv-button {
        margin-bottom: 50px;
    }
}

.bg-white-wrapper {
    transition: 0.3s;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.bg-white-wrapper:before {
    content: "";
    background: #fff;
    height: 100%;
    width: 0%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: 0.5s;
}

.bg-white-wrapper:hover:before {
    animation: bounceRight 2s;
    width: 100%;
}

.bg-white-wrapper:hover .tpservices__icon a {
    color: black;
}

.circle-animation.service {
    top: 5%;
    left: 8%;
    border: 1px solid #E8ECF2;
    width: 757px;
    height: 757px;
    position: absolute;
    border-radius: 50%;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .circle-animation.service {
        top: 9%;
        left: 0%;
    }
}

@media (max-width: 767px) {
    .circle-animation.service {
        top: 5%;
        left: 5%;
        height: 300px;
        width: 300px;
    }
}

.circle-animation span.tp-circle-1 {
    display: block;
    position: absolute;
    content: "";
    top: calc(50% - 1px);
    left: 50%;
    width: 50%;
    height: 1px;
    background: transparent;
    transform-origin: left;
    -webkit-animation: circle-animation 13s linear infinite;
    -moz-animation: circle-animation 13s linear infinite;
    -o-animation: circle-animation 13s linear infinite;
    animation: circle-animation 13s linear infinite;
}

.circle-animation span.tp-circle-2 {
    display: block;
    position: absolute;
    content: "";
    top: calc(50% - 1px);
    left: 50%;
    width: 50%;
    height: 1px;
    background: transparent;
    transform-origin: left;
    transform: scale(-1, 1);
    -webkit-animation: circle-animation2 13s linear infinite;
    -moz-animation: circle-animation2 13s linear infinite;
    -o-animation: circle-animation2 13s linear infinite;
    animation: circle-animation2 13s linear infinite;
}

.circle-animation span.tp-circle-1::before {
    position: absolute;
    content: "";
    width: 22px;
    height: 22px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    top: -25px;
    right: -12px;
    background-color: #FFADAD;
}

.circle-animation span.tp-circle-2::after {
    position: absolute;
    content: "";
    width: 14px;
    height: 14px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    bottom: -25px;
    right: -7px;
    background-color: var(--tp-theme-1);
}

.circle-animation.service-two {
    bottom: -3%;
    right: 9%;
    border: 1px solid #E8ECF2;
    width: 488px;
    height: 488px;
    position: absolute;
    border-radius: 50%;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .circle-animation.service-two {
        bottom: 0%;
        right: 0%;
    }
}

@media (max-width: 767px) {
    .circle-animation.service-two {
        bottom: 12px;
        right: 3%;
        height: 200px;
        width: 200px;
    }
}

.circle-animation span.tp-circle-skye {
    display: block;
    position: absolute;
    content: "";
    top: calc(50% - 1px);
    left: 50%;
    width: 50%;
    height: 1px;
    background: transparent;
    transform-origin: left;
    -webkit-animation: circle-animation 13s linear infinite;
    -moz-animation: circle-animation 13s linear infinite;
    -o-animation: circle-animation 13s linear infinite;
    animation: circle-animation 13s linear infinite;
}

.circle-animation span.tp-circle-skye::before {
    position: absolute;
    content: "";
    width: 22px;
    height: 22px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    top: -25px;
    right: -12px;
    background-color: #82CEFD;
}

.tp-service-bs-space {
    margin-left: 130px;
    margin-right: 130px;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .tp-service-bs-space {
        margin-left: 0px;
        margin-right: 0px;
    }
}

.bp-sv-shape-1 {
    position: absolute;
    bottom: 18px;
    right: -26px;
    animation: moving 9s linear infinite;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .bp-sv-shape-1 {
        right: 0;
    }
}

.bp-sv-shape-2 {
    position: absolute;
    left: -100px;
    bottom: -90px;
    animation: rotate2 15s linear infinite;
}

.bs-shape-1 {
    position: absolute;
    left: 115px;
    top: 70px;
    animation: rotate2 15s linear infinite;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
    .bs-shape-1 {
        top: -50px;
    }
}

.bs-shape-2 {
    position: absolute;
    top: 70px;
    right: 90px;
    animation: moving 15s linear infinite;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
    .bs-shape-2 {
        top: 134px;
    }
}

.bpservice {
    background-color: transparent;
    border-radius: 10px;
    padding: 20px;
    transition: 0.3s;
}

.bpservice__item {
    padding: 55px 35px;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: 0.3s;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .bpservice__item {
        padding: 35px 15px;
    }
}

@media (max-width: 767px) {
    .bpservice__item {
        padding: 38px 15px;
    }
}

.bpservice__icon a {
    height: 84px;
    width: 84px;
    background-color: var(--tp-common-dpink);
    display: inline-block;
    text-align: center;
    line-height: 84px;
    border-radius: 50%;
    margin-bottom: 42px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .bpservice__icon a {
        margin-bottom: 25px;
    }
}

.bpservice__content .bp-sv-sm-title {
    font-size: 32px;
    color: var(--tp-common-black);
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 32px;
    display: inline-block;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .bpservice__content .bp-sv-sm-title {
        font-size: 25px;
        margin-bottom: 25px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .bpservice__content .bp-sv-sm-title {
        font-size: 25px;
        margin-bottom: 25px;
    }
}

@media (max-width: 767px) {
    .bpservice__content .bp-sv-sm-title {
        font-size: 25px;
        margin-bottom: 25px;
    }
}

.bpservice__content P {
    font-size: 16px;
    margin-bottom: 0;
}

.bpservice:hover, .bpservice.active {
    box-shadow: 0px 26px 50px rgba(206, 210, 225, 0.24);
    background-color: var(--tp-common-white);
}

.bpservice:hover .bpservice__item, .bpservice.active .bpservice__item {
    border: 1px solid #F0F0F7;
}

.bpservice:hover .bpservice__icon a, .bpservice.active .bpservice__icon a {
    animation: icon-bounce 0.8s 1;
}

.bp-sv-color-1:hover {
    color: var(--tp-common-dpink);
}

.bp-sv-color-2 .bpservice__icon a {
    background-color: var(--tp-common-blue);
}

.bp-sv-color-2:hover {
    color: var(--tp-common-blue);
}

.bp-sv-color-3 .bpservice__icon a {
    background-color: var(--tp-theme-1);
}

.bp-sv-color-3:hover {
    color: var(--tp-theme-1);
}

.sv-1-border {
    border: 1px solid #F3F3F3;
}

.svcase__img {
    margin-bottom: 30px;
    border-radius: 20px;
}

.svcase__img img {
    border-radius: 20px;
    max-width: 100%;
    transform: scale(1);
    transition: 1s;
}

.svcase:hover .svcase__img img {
    transform: scale(1.1);
}

.svcase__content p {
    font-size: 16px;
    line-height: 27px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 767px) {
    .svcase__content p br {
        display: none;
    }
}

.sv-case-sm-title {
    font-size: 24px;
    font-weight: 500;
    color: var(--tp-common-black);
    padding-bottom: 5px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 767px) {
    .sv-case-sm-title {
        font-size: 21px;
    }
}

.sv-case-sm-title:hover {
    color: var(--tp-theme-1);
}

.sv-2-border {
    border: 1px solid #F3F3F3;
}

.service-details-space {
    margin-bottom: 200px;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .service-details-space {
        margin-bottom: 80px;
    }
}

.service-pt-pb {
    padding-top: 125px;
    padding-bottom: 100px;
}

.sd-service-details-paragraph {
    padding-left: 60px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .sd-service-details-paragraph {
        padding-left: 45px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .sd-service-details-paragraph {
        padding-left: 0px;
    }
}

.sd-service-details a {
    font-weight: 500;
    font-size: 18px;
    align-items: center;
    text-decoration-line: underline;
    color: var(--tp-common-black);
    display: inline-block;
    transition: 0.3s;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .sd-service-details a {
        margin-bottom: 50px;
    }
}

@media (max-width: 767px) {
    .sd-service-details a {
        margin-bottom: 50px;
        font-size: 16px;
    }
}

.sd-service-details a:hover {
    color: var(--tp-common-blue);
}

.sd-service-details a::before {
    content: "";
    height: 19px;
    width: 19px;
    border-radius: 50%;
    background-color: var(--tp-common-blue);
    display: inline-block;
    transform: translateY(4px);
    margin-right: 10px;
}

.sd-service-details a i {
    font-size: 14px;
    padding-left: 10px;
}

.sd-big-img {
    margin-bottom: 100px;
}

.sd-big-img img {
    border-radius: 20px;
    max-width: 100%;
}

.sv-four-color {
    background-color: rgba(130, 206, 253, 0.1);
}

.sv-five-color {
    background-color: rgba(30, 226, 207, 0.1);
}

.sv-six-color {
    background-color: rgba(253, 52, 110, 0.1);
}

/*----------------------------------------*/
/*  08. feature css start
/*----------------------------------------*/
.tp-feature-list {
    padding-bottom: 15px;
}

.tp-feature-list__icon-img {
    height: 60px;
    width: 60px;
    background-color: var(--tp-theme-1);
    text-align: center;
    line-height: 60px;
    border-radius: 50%;
    flex: 0 0 auto;
}

@media (max-width: 767px) {
    .tp-feature-list__icon-img {
        margin-bottom: 20px;
    }
}

.tp-feature-list__content h4 {
    color: var(--tp-common-black);
    font-size: 24px;
    font-weight: 500;
}

.tp-feature-list__content p {
    color: black;
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
}

@media (max-width: 767px) {
    .tp-feature-list__content p {
        font-size: 17px;
    }

    .tp-feature-list__content p br {
        display: none;
    }
}

.tp-feature-list:hover .fea-color-1 {
    box-shadow: inset 0 0 0 40px rgba(30, 226, 207, 0.9);
}

.tp-feature-list:hover .fea-color-1 svg {
    color: var(--tp-common-white);
    position: relative;
    z-index: 3;
}

.tp-feature-list:hover .fea-color-2 {
    box-shadow: inset 0 0 0 40px rgba(66, 62, 243, 0.9);
}

.tp-feature-list:hover .fea-color-2 svg {
    color: var(--tp-common-white);
    position: relative;
    z-index: 3;
}

.tp-feature-list:hover .fea-color-3 {
    box-shadow: inset 0 0 0 40px rgba(253, 52, 110, 0.9);
}

.tp-feature-list:hover .fea-color-3 svg {
    color: var(--tp-common-white);
    position: relative;
    z-index: 3;
}

@media (max-width: 767px) {
    .tp-fea-img {
        margin-bottom: 60px;
    }
}

.fea-color-1 {
    background-color: rgba(30, 226, 207, 0.15);
    transition: 0.5s;
}

.fea-color-1 svg {
    color: var(--tp-common-paste);
    transition: 0.5s;
}

.fea-color-2 {
    background-color: rgba(66, 62, 243, 0.15);
    transition: 0.5s;
}

.fea-color-2 svg {
    color: var(--tp-theme-1);
    transition: 0.5s;
}

.fea-color-3 {
    background-color: rgba(253, 52, 110, 0.15);
    transition: 0.5s;
}

.fea-color-3 svg {
    color: #fd346e;
    transition: 0.5s;
}

.tpchosebox {
    background-color: var(--tp-common-white);
    border-radius: var(--border-radius);
    box-shadow: 0px 26px 50px rgba(203, 206, 225, 0.24);
    padding: 40px 30px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tpchosebox {
        padding: 50px 34px;
    }
}

.tpchosebox:hover .tpchosebox__icon a {
    transform: rotateY(-180deg);
}

.tpchosebox__icon a {
    color: var(--tp-common-dpink);
    height: 60px;
    width: 60px;
    background-color: rgba(253, 52, 110, 0.15);
    display: inline-block;
    text-align: center;
    line-height: 64px;
    font-size: 26px;
    border-radius: 50%;
}

.tpchosebox__content h4 {
    color: var(--tp-common-black);
    font-size: 22px;
    font-weight: 600;
    padding-bottom: 5px;
}

.tpchosebox__content h4 a {
    background-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
    display: inline;
    background-size: 0% 1px, 0 1px;
    background-position: 100% 100%, 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.4s linear;
}

.tpchosebox__content h4 a:hover {
    background-size: 0% 1px, 100% 1px;
}

.tpchosebox__content p {
    color: black;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 0;
}

.fea-color-4 a {
    background-color: rgba(30, 226, 207, 0.15);
    color: var(--tp-common-paste);
}

.fea-color-5 a {
    background-color: rgba(252, 220, 2, 0.15);
    color: var(--tp-theme-primary);
}

.fea-wrapper-main:last-child {
    margin-bottom: 0;
}

.tp-chose-bg {
    position: absolute;
    z-index: -1;
    left: 0;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-chose-bg {
        right: 50px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-chose-bg {
        right: 70px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-chose-bg {
        left: 0;
        right: 0;
        margin: 0 auto;
        text-align: center;
    }
}

@media (max-width: 767px) {
    .tp-chose-bg {
        position: static;
        margin-bottom: 70px;
        display: none;
    }
}

@media (max-width: 767px) {
    .tp-chose-bg img {
        max-width: 100%;
    }
}

.ce-chose-shape {
    position: absolute;
    bottom: 130px;
    right: 100px;
    animation: moving 9s linear infinite;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
    .ce-chose-shape {
        bottom: 70px;
    }
}

@media (max-width: 767px) {
    .tp-chose-area {
        padding-top: 0px !important;
    }
}

@media (max-width: 767px) {
    .tpchosebox-main {
        margin-bottom: 70px;
    }
}

.tp-chose-space {
    transform: translateX(-75px);
}

@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-chose-space {
        transform: translateX(-23px);
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-chose-space {
        transform: translateX(0);
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-chose-space {
        transform: translateX(-12px);
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .tp-chose-space {
        transform: translateX(0);
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-feature-section-title-box .tp-title-sm {
        font-size: 29px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-feature-section-title-box {
        margin-top: 60px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-feature-section-title-box {
        padding-left: 40px;
    }
}

@media (max-width: 767px) {
    .tp-feature-section-title-box p {
        font-size: 15px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-fea-img {
        margin-bottom: 70px;
    }
}

.tp-fea-img img {
    max-width: 100%;
}

@media (max-width: 767px) {
    .tp-feature-list {
        flex-wrap: wrap;
        margin-bottom: 30px;
    }
}

.ac-feature-title {
    font-size: 50px;
    color: var(--tp-common-black);
    font-weight: 700;
    line-height: 1.2;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .ac-feature-title {
        font-size: 42px;
        margin-bottom: 30px;
    }
}

@media (max-width: 767px) {
    .ac-feature-title {
        font-size: 35px;
        margin-bottom: 30px;
    }
}

.ac-feature-right {
    padding-left: 55px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .ac-feature-right {
        padding-left: 35px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .ac-feature-right {
        padding-left: 0px;
    }
}

.acfeature {
    text-align: center;
    margin-top: -17px;
}

.acfeature__item p {
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
}

.ac-feature-sm-title {
    font-size: 24px;
    color: var(--tp-common-black);
    font-weight: 700;
    transition: 0.3s;
}

.ac-feature-sm-title:hover {
    color: var(--tp-common-dpink);
}

.ac-circle {
    height: 30px;
    width: 30px;
    background-color: var(--tp-common-white);
    box-shadow: 0px 1px 40px #D4DAE8;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    margin-bottom: 20px;
}

.ac-circle::after {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 15px;
    width: 15px;
    background-color: var(--tp-common-dpink);
    box-shadow: 0px 1px 40px #D4DAE8;
    border-radius: 50%;
    display: inline-block;
    content: "";
    transform: translate(-50%, -50%);
}

.ac-feature-space {
    padding-bottom: 80px;
}

.ac-feature-border-top {
    border-top: 1px solid rgba(41, 41, 48, 0.08);
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .ac-feature-border-top {
        border-top: transparent;
    }
}

.ac-cirle-color-2 {
    transition: 0.3s;
}

.ac-cirle-color-2:hover {
    color: var(--tp-common-paste);
}

.ac-cirle-color-2::after {
    background-color: var(--tp-common-paste);
}

.ac-cirle-color-3 {
    transition: 0.3s;
}

.ac-cirle-color-3:hover {
    color: var(--tp-theme-primary);
}

.ac-cirle-color-3::after {
    background-color: var(--tp-theme-primary);
}

.ac-cirle-color-4 {
    transition: 0.3s;
}

.ac-cirle-color-4:hover {
    color: var(--tp-theme-1);
}

.ac-cirle-color-4::after {
    background-color: var(--tp-theme-1);
}

/*----------------------------------------*/
/*  09. business css start
/*----------------------------------------*/
.tp-business-tab button {
    font-size: 18px;
    color: var(--tp-common-black);
    font-weight: 500;
}

/*----------------------------------------*/
/*  10. project css start
/*----------------------------------------*/
.tp-service-tab button {
    margin-left: 45px;
    font-size: 18px;
    font-weight: 500;
    color: black;
    position: relative;
    padding-bottom: 15px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-service-tab button {
        margin-left: 25px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-service-tab button {
        margin-left: 0px;
        margin-right: 40px;
        font-size: 16px;
    }
}

@media (max-width: 767px) {
    .tp-service-tab button {
        margin-left: 0px;
        margin-bottom: 10px;
        margin-right: 20px;
    }
}

.tp-service-tab button::after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    width: 0;
    height: 4px;
    background-color: var(--tp-theme-1);
    border-radius: 33px;
    opacity: 0;
    visibility: hidden;
    transition: 0.4s;
}

.tp-service-tab button::before {
    position: absolute;
    content: "";
    bottom: 0;
    right: 0;
    width: 0;
    height: 4px;
    background-color: var(--tp-theme-primary);
    border-radius: 33px;
    z-index: 9;
    opacity: 0;
    visibility: hidden;
    transition: 0.4s;
}

.tp-project-box {
    background-color: #F7F8FD;
    padding: 40px;
    border-radius: 20px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-project-box {
        padding: 40px 36px;
    }
}

@media (max-width: 767px) {
    .tp-project-box {
        padding: 20px;
    }
}

.tp-project-img {
    border-radius: 20px;
}

.tp-project-img img {
    border-radius: 20px;
    transform: scale(1);
    transition: 1s;
    /* width: 330px; */
}

.tp-project-box:hover .tp-project-img img {
    transform: scale(1.1);
}

.tp-project-item-two .project-one {
    border-radius: 20px;
    box-shadow: 2px 10px 20px rgba(0, 0, 0, 0.5);
}

.tp-project-item-two .project-one img {
    border-radius: 20px;
    transform: scale(1);
    transition: 1s;
}

.tp-project-item-two:hover img {
    transform: scale(1.1);
}

@media (max-width: 767px) {
    .tp-project-content {
        margin-left: 0px;
    }
}

@media (max-width: 767px) {
    .tp-project-content .tp-btn-sm {
        padding: 0px 21px;
    }
}

.tp-project-content .pro-lg-title {
    font-size: 35px;
    font-weight: 500;
    color: var(--tp-common-black);
    margin-bottom: 25px;
}

.tp-project-content .pro-lg-title:hover {
    color: var(--tp-theme-1);
}

@media (max-width: 767px) {
    .tp-project-content .pro-lg-title {
        font-size: 21px;
    }
}

.tp-project-content p {
    margin-bottom: 40px;
}

.tp-project-sm-content p {
    line-height: 30px;
    margin-bottom: 35px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-project-sm-content p {
        font-size: 15px;
    }
}

@media (max-width: 767px) {
    .tp-project-sm-content p {
        font-size: 16px;
    }
}

.pro-sm-title {
    font-size: 26px;
    font-weight: 500;
    color: var(--tp-common-black);
    margin-bottom: 30px;
    letter-spacing: -1px;
}

.pro-sm-title:hover {
    color: var(--tp-theme-1);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .pro-sm-title {
        font-size: 22px;
    }
}

@media (max-width: 767px) {
    .pro-sm-title {
        font-size: 20px;
        margin-bottom: 10px;
    }
}

.bp-project-shape-1 {
    position: absolute;
    top: -91px;
    left: -70px;
    animation: rotate2 15s linear infinite;
}

.bp-project-shape-2 {
    position: absolute;
    bottom: 28px;
    right: 33px;
    animation: rotate2 15s linear infinite;
}

.tp-project-box-sm {
    background-color: #F7F8FD;
    padding: 43px 0;
    border-radius: 20px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-project-box-sm {
        padding: 32px 0;
    }
}

@media (max-width: 767px) {
    .tp-project-box-sm {
        flex-wrap: wrap;
        padding: 20px;
    }
}

.tp-project-box-sm:hover .tp-project-sm-img img {
    transform: scale(1.1);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-service-tab-button {
        margin-bottom: 30px;
    }
}

.tp-project-sm-img {
    width: 230px;
    flex: 0 0 auto;
    border-radius: 20px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-project-sm-img {
        margin-right: 25px;
    }
}

@media (max-width: 767px) {
    .tp-project-sm-img {
        margin: 0;
        margin-bottom: 20px;
        width: 100%;
    }
}

.tp-project-sm-img img {
    border-radius: 20px;
    width: 100%;
    transform: scale(1);
    transition: 1s;
}

.tp-service-tab button:hover::after, .tp-service-tab button.active::after {
    visibility: visible;
    opacity: 1;
    width: 98%;
}

.tp-service-tab button:hover::before, .tp-service-tab button.active::before {
    visibility: visible;
    opacity: 1;
    width: 50%;
}

.tp-project-shape {
    position: absolute;
    right: 0;
    bottom: -25px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-project-shape {
        bottom: -51px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-project-shape {
        bottom: -60px;
    }
}

@media (max-width: 767px) {
    .tp-project-shape {
        bottom: -46px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-project-section-box {
        text-align: center;
    }
}

.tp-project-tab-button {
    background-color: #F9FAFB;
    padding: 10px 15px;
    display: inline-block;
}

.tp-project-tab-button button {
    font-size: 15px;
    font-weight: 500;
    padding: 15px 35px;
    position: relative;
    margin-left: -4px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-project-tab-button button {
        font-size: 14px;
        padding: 15px 15px;
    }
}

@media (max-width: 767px) {
    .tp-project-tab-button button {
        font-size: 14px;
        padding: 6px 13px;
        margin: 3px 0px;
    }
}

.tp-project-tab-button button:last-child:after {
    display: none;
}

.tp-project-tab-button button span {
    position: relative;
    z-index: 3;
}

.tp-project-tab-button button.active {
    box-shadow: 0px 15px 30px rgba(57, 81, 105, 0.05);
    background-color: var(--tp-common-white);
    color: var(--tp-common-black);
}

.tp-project-tab-button button.active:before {
    opacity: 1;
    visibility: visible;
}

.tp-project-tab-button button:hover {
    color: #222;
}

.tp-project-tab-button button:before {
    content: "";
    height: 100%;
    width: 101%;
    top: 0;
    left: -1px;
    background: #fff;
    position: absolute;
    z-index: 3;
    opacity: 0;
    visibility: hidden;
}

.tp-project-tab-button button:after {
    content: "";
    height: 40px;
    width: 1px;
    top: 50%;
    right: 0;
    background: #E4E6EA;
    transform: translateY(-50%);
    position: absolute;
    z-index: 1;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-project-tab-button button:after {
        height: 20px;
    }
}

@media (max-width: 767px) {
    .tp-project-tab-button button:after {
        display: none;
    }
}

.project-shape-img {
    position: absolute;
    top: 200px;
    left: -85px;
    animation: zoom 5s infinite;
}

.tp-project-shape-one {
    position: absolute;
    left: 3%;
    top: 12%;
    animation: jumpTwo 4s infinite linear;
}

@media (max-width: 767px) {
    .tp-project-shape-one {
        top: 0;
        left: 0;
    }
}

.tp-project-shape-two {
    position: absolute;
    right: 3%;
    top: 50%;
    transform: translate(-50%);
    animation: jumpTwo 3s infinite linear;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-project-shape-two {
        top: 85%;
    }
}

@media (max-width: 767px) {
    .tp-project-shape-two {
        top: 92%;
    }
}

.tp-project-icon-two {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

.tp-project-icon-two a {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    background-color: var(--tp-theme-primary);
    color: transparent;
    display: inline-block;
    text-align: center;
    line-height: 105px;
    font-size: 36px;
    -webkit-text-stroke: 2px #292930;
    transition: 0.3s;
    transform: rotate(45deg) scale(0.7);
    opacity: 0;
    visibility: hidden;
}

.tp-project-icon-two a:hover {
    background-color: var(--tp-theme-1);
    -webkit-text-stroke: 2px #fff;
}

.tp-project-item-two:hover .tp-project-icon-two a {
    transform: rotate(45deg) scale(1);
    opacity: 1;
    visibility: visible;
}

.tp-project-item-three__img img {
    max-width: 100%;
    border-radius: 20px;
}

.tp-project-item-three__bg {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    visibility: hidden;
    transition: 0.3s;
    opacity: 0;
    bottom: 25px;
    transition-delay: 0.5s;
    width: inherit;
    height: inherit;
}

.tp-project-item-three__bg-info {
    background-color: var(--tp-theme-primary);
    border-radius: 10px;
    display: inline-block;
    padding: 45px 75px;
}

@media (max-width: 767px) {
    .tp-project-item-three__bg-info {
        padding: 21px 20px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-project-item-three__bg-info {
        padding: 25px 25px;
    }
}

.tp-project-item-three:hover .tp-project-title {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
    transition-delay: 0.2s;
}

.tp-project-item-three:hover .tp-project-subtitle {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
    transition-delay: 0.4s;
}

.tp-project-item-three:hover .tp-project-item-three__bg {
    opacity: 1;
    visibility: visible;
    bottom: 40px;
    transition-delay: 0s;
}

.tp-project-title {
    color: var(--tp-common-black);
    -webkit-transform: translateY(5px);
    -moz-transform: translateY(5px);
    -ms-transform: translateY(5px);
    -o-transform: translateY(5px);
    transform: translateY(5px);
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    transition-delay: 0s;
    transition-delay: 0.2s;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-project-title {
        font-size: 18px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-project-title {
        font-size: 20px;
    }
}

@media (max-width: 767px) {
    .tp-project-title {
        font-size: 15px;
    }
}

.tp-project-title:hover {
    color: var(--tp-theme-1);
}

.tp-project-subtitle {
    color: var(--tp-common-black);
    -webkit-transform: translateY(5px);
    -moz-transform: translateY(5px);
    -ms-transform: translateY(5px);
    -o-transform: translateY(5px);
    transform: translateY(5px);
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    transition-delay: 0s;
    visibility: hidden;
    opacity: 0;
    transition-delay: 0s;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-project-subtitle {
        font-size: 14px;
    }
}

@media (max-width: 767px) {
    .tp-project-subtitle {
        font-size: 14px;
    }
}

.tp-project-subtitle:hover {
    color: var(--tp-theme-1);
}

.project-slider-dots {
    padding-top: 60px;
}

.project-slider-dots .swiper-pagination-bullet {
    width: 11px;
    height: 11px;
    display: inline-block;
    border-radius: 50%;
    background-color: var(--tp-theme-1);
    margin: 0px 3px;
    opacity: 0.5;
    transition: 0.3s;
}

.project-slider-dots .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: var(--tp-theme-1);
    width: 30px;
    border-radius: 30px;
    opacity: 1;
}

.tp-project-item-four {
    position: relative;
}

.tp-project-item-four::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(41, 41, 48, 0.32);
    opacity: 0;
    border-radius: 20px;
    transition: 0.3s;
    pointer-events: none;
}

.tp-project-item-four__img {
    border-radius: 15px;
}

.tp-project-item-four__img img {
    border-radius: 15px;
    transform: scale(1);
    transition: 1s;
}

.tp-project-item-four__info-four {
    background-color: var(--tp-theme-primary);
    padding: 45px 70px;
    border-radius: 10px;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    z-index: 5;
}

@media (max-width: 767px) {
    .tp-project-item-four__info-four {
        padding: 10px 25px;
    }
}

.tp-project-item-four__info-four h4 {
    font-size: 26px;
    font-weight: 500;
    color: var(--tp-common-black);
}

@media (max-width: 767px) {
    .tp-project-item-four__info-four h4 {
        font-size: 16px;
    }
}

.tp-project-item-four__info-four h4:hover {
    color: var(--tp-theme-1);
}

.tp-project-item-four__info-four span {
    color: var(--tp-common-black);
    font-size: 16px;
    font-weight: 500;
}

@media (max-width: 767px) {
    .tp-project-item-four__info-four span {
        font-size: 14px;
    }
}

.tp-project-item-four__info-four span:hover {
    color: var(--tp-theme-1);
}

.tp-project-item-four__info-sm {
    background-color: var(--tp-theme-primary);
    padding: 20px 30px;
    border-radius: 10px;
    display: inline-block;
    text-align: center;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    z-index: 5;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-project-item-four__info-sm {
        padding: 19px 23px;
    }
}

@media (max-width: 767px) {
    .tp-project-item-four__info-sm {
        padding: 15px 20px;
    }
}

.tp-project-item-four__info-sm span {
    color: var(--tp-common-black);
    font-size: 16px;
    font-weight: 500;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-project-item-four__info-sm span {
        font-size: 14px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .tp-project-item-four__info-sm span {
        font-size: 14px;
    }
}

.tp-project-item-four__info-sm span:hover {
    color: var(--tp-theme-1);
}

.tp-project-item-four:hover .tp-project-item-four__info-four {
    opacity: 1;
    visibility: visible;
    top: 50%;
}

.tp-project-item-four:hover::after {
    opacity: 1;
}

.tp-project-item-four:hover .tp-project-item-four__img img {
    transform: scale(1.1);
}

.tp-project-item-four:hover .tp-project-item-four__info-sm {
    opacity: 1;
    visibility: visible;
    top: 50%;
}

.tp-project-item-four:hover::after {
    opacity: 1;
}

.tp-testi-cm-sm-title {
    font-size: 23px;
    font-weight: 500;
    color: var(--tp-common-black);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-testi-cm-sm-title {
        font-size: 18px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-testi-cm-sm-title {
        font-size: 16px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .tp-testi-cm-sm-title {
        font-size: 16px;
    }
}

.tp-testi-cm-sm-title:hover {
    color: var(--tp-theme-1);
}

.tp-radius-button {
    background-color: transparent;
}

.tp-radius-button button {
    padding: 20px 40px;
    font-size: 18px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-radius-button button {
        padding: 20px 40px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-radius-button button {
        padding: 20px 25px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-radius-button button {
        padding: 20px 40px;
    }
}

.tp-radius-button button.active {
    box-shadow: 0px 15px 30px rgba(57, 81, 105, 0.05);
    background-color: var(--tp-common-white);
    color: var(--tp-common-black);
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .tp-cc-project button {
        padding: 10px 18px;
        font-size: 14px;
    }
}

.tp-pj-subtitle {
    font-size: 16px;
    color: var(--tp-common-black);
    font-weight: 500;
    padding-bottom: 5px;
    transition: 0.3s;
}

.tp-pj-subtitle:hover {
    color: var(--tp-theme-1);
}

.tp-pj-title {
    font-size: 30px;
    font-weight: 500;
    color: var(--tp-common-black);
    padding-bottom: 25px;
    transition: 0.3s;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-pj-title {
        font-size: 25px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-pj-title {
        font-size: 21px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-pj-title {
        font-size: 21px;
    }
}

@media (max-width: 767px) {
    .tp-pj-title {
        font-size: 20px;
    }
}

.tp-pj-title:hover {
    color: var(--tp-theme-1);
}

.tp-pj-title:hover svg line {
    stroke: var(--tp-theme-1);
}

.tp-pj-title svg {
    margin-left: 40px;
    transition: 0.3s;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-pj-title svg {
        width: 4%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .tp-pj-title svg {
        width: 3%;
    }
}

.tpproject__thumb {
    position: relative;
}

.tpproject__thumb img {
    transform: scale(1);
    transition: 0.9s;
    border-radius: 20px;
    filter: grayscale(100%);
}

.tpproject__thumb-icon a {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.7);
    height: 80px;
    width: 80px;
    background-color: var(--tp-common-white);
    border-radius: 50%;
    text-align: center;
    line-height: 80px;
    opacity: 0;
    visibility: hidden;
    display: inline-block;
    transition: 0.3s;
}

.tpproject__thumb-icon a:hover {
    background-color: var(--tp-theme-primary);
    color: var(--tp-common-black);
}

.tpproject__thumb:hover .tpproject__thumb-icon a {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.tpproject:hover .tpproject__thumb img {
    transform: scale(1.1);
    filter: grayscale(0);
}

.my-dots {
    margin-top: 50px;
}

.my-dots .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 50%;
    background-color: var(--tp-common-black);
    margin: 0px 3px;
    opacity: 0.5;
}

.my-dots .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: var(--tp-common-black);
    width: 30px;
    border-radius: 30px;
    opacity: 1;
}

.tp-project-bs-space {
    margin-left: 130px;
    margin-right: 130px;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .tp-project-bs-space {
        margin-left: 0px;
        margin-right: 0px;
    }
}

.bp-project-item .bp-project-img {
    position: relative;
}

.bp-project-item .bp-project-img img {
    transform: scale(1);
    transition: 0.9s;
}

.bp-project-item .bp-project-img::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(41, 41, 48, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease-in-out;
}

.bp-project-item span {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease-in-out;
    text-align: center;
}

.bp-project-item span svg {
    color: var(--tp-common-white);
    transition: all 0.4s ease-in-out;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .bp-project-item span svg {
        width: 60%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .bp-project-item span svg {
        width: 50%;
    }
}

.bp-project-item span:hover svg {
    color: var(--tp-theme-primary);
}

.bp-project-item:hover .bp-project-img img {
    transform: scale(1.02);
}

.bp-project-item:hover .bp-project-img::after {
    visibility: visible;
    opacity: 1;
}

.bp-project-item:hover span {
    top: 50%;
    opacity: 1;
    visibility: visible;
}

.tp-project-item-four .tp-hover-wrapper {
    background-color: var(--tp-theme-primary);
    border-radius: 10px;
    display: inline-block;
    padding: 45px 75px;
}

.tp-project-item-four .tp-img-reveal-wrapper {
    width: auto;
    height: auto;
}

.tp-project-item-four .tp-hover-title {
    color: var(--tp-common-black);
}

.tp-project-item-four .tp-hover-subtitle {
    color: var(--tp-common-black);
    transition: inherit;
}

.tp-project-item-four p, .tp-project-item-three .tp-hover-meta {
    display: none;
}

.tp-img-reveal-item {
    text-align: center;
}

.port-space {
    margin-bottom: 70px;
}

.portfolio-four {
    position: relative;
}

.portfolio-four img {
    border-radius: 20px;
}

.portfolio-four::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--tp-theme-1);
    border-radius: 20px;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
    transform: scale(0.8);
}

.portfolio-four:hover::after {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.portfolio-four:hover .portfolio-icon a {
    opacity: 1;
    visibility: visible;
}

.portfolio-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.portfolio-icon a {
    color: var(--tp-common-white);
    line-height: 0;
    font-size: 36px;
    transform: rotateX(45deg);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

.portfolio-icon a:hover {
    color: var(--tp-common-black);
}

.tp-portfolio-content-box {
    position: absolute;
    top: 65px;
    left: -100%;
    background-color: var(--tp-common-black);
    padding: 30px 70px 30px 40px;
    border-radius: 0px 10px 10px 0px;
    transition: 0.8s;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-portfolio-content-box {
        top: 30px;
        padding: 20px 30px 20px 30px;
    }
}

.tp-portfolio-content-box span {
    color: var(--tp-theme-primary);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
}

.portfolio-animation-icon {
    position: absolute;
    bottom: 10px;
    right: 50px;
    opacity: 0;
    visibility: hidden;
    transition: 0.4s;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .portfolio-animation-icon {
        right: 20px;
    }
}

.portfolio-animation-icon svg {
    color: var(--tp-common-white);
    transition: 0.3s;
}

.portfolio-animation-icon svg:hover {
    color: var(--tp-theme-1);
}

.tp-project-item-two:hover .tp-portfolio-content-box {
    left: 0;
}

.tp-project-item-two:hover .portfolio-animation-icon {
    bottom: 50px;
    opacity: 1;
    visibility: visible;
}

.portfolio-animation-title {
    font-size: 24px;
    font-weight: 500;
    color: var(--tp-common-white);
    letter-spacing: -1px;
}

.portfolio-animation-title:hover {
    color: var(--tp-theme-primary);
}

.portfolio-thumb {
    border-radius: 20px;
}

.portfolio-thumb img {
    transform: scale(1);
    transition: 1s;
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); */
}

.portfolio-thumb:hover img {
    transform: scale(1.1);
}

/*----------------------------------------*/
/*  11. price css start
/*----------------------------------------*/
.cpprice {
    border: 1px solid #F0F1F6;
    border-radius: 20px;
    padding: 47px 47px 55px 47px;
}

.cpprice__meta {
    margin-bottom: 30px;
}

.cpprice__meta span {
    font-size: 20px;
    color: var(--tp-common-black);
    font-weight: 400;
}

.cpprice__meta span b {
    font-size: 50px;
    font-weight: 500;
    color: var(--tp-common-black);
}

.cpprice__list ul li {
    font-size: 18px;
    font-weight: 400;
    line-height: 25px;
    color: black;
    margin-bottom: 17px;
}

.cpprice__button {
    padding-top: 80px;
}

.cp-price-title {
    font-size: 35px;
    font-weight: 400;
    color: var(--tp-common-black);
    border-bottom: 1px solid #F0F1F6;
    padding-bottom: 40px;
    margin-bottom: 60px;
}

.cp-price-sm-title {
    font-size: 16px;
    color: var(--tp-common-black);
    font-weight: 400;
    line-height: 1.5;
    padding-bottom: 40px;
}

.cpprice.active {
    background-color: var(--tp-common-blue);
}

.cpprice.active .cpprice__list ul li {
    color: var(--tp-common-black);
}

.cpprice.active .cpprice__button .tp-btn-yellow {
    background-color: var(--tp-common-white);
}

.jobitem {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    border: 1px solid #eae4e4;
    padding: 50px 38px;
    border-radius: 20px;
    transition: 0.3s;
    height: 300px;
}

.jobitem__brand {
    margin-bottom: 30px;
}

.jobitem__details p {
    font-weight: 400;
    font-size: 16px;
    text-transform: capitalize;
    color: black;
    padding-bottom: 10px;
}


.jobitem__details p i {
    padding-right: 15px;
}

.jobitem__details p:last-child {
    padding-bottom: 20px;
}

.jobitem:hover {
    /* box-shadow: 0px 16px 11px rgba(224, 224, 224, 0.25); */
    box-shadow: 2px 2px 8px rgba(0, 0, 0, .2);
}

.job-title-sm {
    font-size: 25px;
    color: var(--tp-common-black);
    line-height: 32px;
    font-weight: 550;
    /*padding-bottom: 25px;*/
}

.job-title-sm a {
    background-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
    display: inline;
    background-size: 0% 1px, 0 1px;
    background-position: 100% 100%, 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.4s linear;
}

.job-title-sm a:hover {
    background-size: 0% 1px, 100% 1px;
}

/*----------------------------------------*/
/*  12. about css start
/*----------------------------------------*/
.bp-about-img {
    max-width: inherit;
    margin-left: -210px;
    position: relative;
    z-index: 2;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
    .bp-about-img {
        margin-left: 0;
    }

    .bp-about-img img {
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .bp-about-img {
        margin-left: 0;
        margin-bottom: 50px;
    }

    .bp-about-img img {
        max-width: 100%;
    }
}

.bp-about-shape {
    position: absolute;
    top: -25px;
    left: -8px;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .bp-about-shape {
        top: -75px;
        left: -235px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .bp-about-shape {
        top: -80px;
        left: -327px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .bp-about-shape {
        top: -80px;
        left: -417px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .bp-about-shape {
        top: -68px;
        left: -502px;
    }
}

.bs-section-title-space {
    padding-left: 80px;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .bs-section-title-space {
        padding-left: 0px;
    }
}

.bs-about-sm-1 {
    position: absolute;
    right: 110px;
    top: 103px;
    animation: moving 5s linear infinite;
}

.bs-about-sm-2 {
    position: absolute;
    right: 110px;
    bottom: 103px;
    animation: rotate2 5s linear infinite;
}

.ac-ab-title {
    color: var(--tp-common-black);
    font-size: 50px;
    font-weight: 700;
    letter-spacing: -2px;
    line-height: 1.3;
    margin-bottom: 45px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .ac-ab-title {
        font-size: 42px;
    }
}

@media (max-width: 767px) {
    .ac-ab-title {
        font-size: 36px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .ac-play-button {
        margin-bottom: 40px;
    }
}

.ac-play-button a {
    height: 66px;
    width: 66px;
    background-color: var(--tp-common-blue);
    display: inline-block;
    border-radius: 50%;
    text-align: center;
    line-height: 66px;
    color: var(--tp-common-black);
    font-size: 16px;
    margin-right: 20px;
}

.ac-play-button a:hover {
    background-color: var(--tp-theme-primary);
}

.ac-play-button span {
    color: var(--tp-common-black);
    font-size: 18px;
    font-weight: 500;
}

.ac-about-right {
    padding-left: 65px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .ac-about-right {
        padding-left: 35px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .ac-about-right {
        padding-left: 0px;
    }
}

.ac-border-bottom {
    border-bottom: 1px solid rgba(41, 41, 48, 0.08);
}

.ac-bottom-space {
    padding-bottom: 100px;
}

@media (max-width: 767px) {
    .ac-bottom-space {
        padding-bottom: 50px;
    }
}

.am-fea-space {
    padding-left: 40px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .am-fea-space {
        padding-left: 0px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
    .am-fea-space {
        padding-left: 0px;
    }
}

.am-fea-space-2 {
    padding-left: 75px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .am-fea-space-2 {
        padding-left: 15px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
    .am-fea-space-2 {
        padding-left: 0px;
    }
}

.actestimonial {
    padding-right: 45px;
}

.actestimonial__row {
    display: flex;
    align-items: center;
}

.actestimonial__icon img {
    border-radius: 50%; /* Makes the image round */
    width: 100px; /* Adjust size as needed */
    height: 100px; /* Adjust size as needed */
    object-fit: cover; /* Ensures the image covers the area */
}

.actestimonial__position {
    margin-left: 20px; /* Adjust spacing between image and text as needed */
}

.actestimonial__icon {
    margin-bottom: 40px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 767px) {
    .actestimonial__icon {
        margin-bottom: 20px;
    }
}

.actestimonial__position {
    margin-bottom: 35px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 767px) {
    .actestimonial__position {
        margin-bottom: 20px;
    }
}

.actestimonial__position span {
    font-size: 19px;
    font-weight: 500;
    text-transform: uppercase;
}

.actestimonial__paragraph p {
    font-weight: 400;
    font-size: 22px;
    color: var(--tp-common-black);
    line-height: 1.6;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .actestimonial__paragraph p {
        font-size: 19px;
    }
}

@media (max-width: 767px) {
    .actestimonial__paragraph p {
        font-size: 16px;
        margin-bottom: 50px;
    }
}

.actestimonial__paragraph p span {
    color: var(--tp-common-blue);
    font-size: 23px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .actestimonial__paragraph p span {
        font-size: 20px;
    }
}

.ac-client-name {
    font-size: 30px;
    color: var(--tp-common-black);
    font-weight: 700;
}

.am-p-space-1 {
    padding-bottom: 25px;
    padding-right: 80px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .am-p-space-1 {
        padding-right: 20px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .am-p-space-1 {
        padding-right: 0px;
    }
}

.am-p-space-2 {
    padding-bottom: 25px;
    padding-right: 40px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .am-p-space-2 {
        padding-right: 20px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .am-p-space-2 {
        padding-right: 0px;
    }
}

.am-p-space-3 {
    padding-bottom: 25px;
    padding-right: 10px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .am-p-space-3 {
        padding-right: 10px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .am-p-space-3 {
        padding-right: 0px;
    }
}

.ac-ab-img {
    width: 100%;
    border-radius: 15px;
}

.ac-ab-img img {
    border-radius: 15px;
    max-width: 100%;
    transform: scale(1);
    transition: 1s;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .ac-ab-img img {
        width: 100%;
        margin-bottom: 40px;
    }
}

.ac-ab-img:hover img {
    transform: scale(1.1);
}

.amaboutinfo {
    padding-left: 60px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .amaboutinfo {
        padding-left: 30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .amaboutinfo {
        padding-left: 0px;
    }
}

.amaboutinfo__client-info h4 {
    font-size: 30px;
    color: var(--tp-common-black);
    font-weight: 500;
}

.amaboutinfo__client-info span {
    font-size: 12px;
    color: var(--tp-theme-1);
    text-transform: uppercase;
    padding-bottom: 25px;
    display: inline-block;
}

.amaboutinfo__client-info p {
    color: black;
    font-size: 15px;
    font-weight: 400;
    padding-bottom: 25px;
    padding-right: 20px;
    line-height: 25px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .amaboutinfo__client-info p {
        padding-right: 0px;
    }
}

.amaboutinfo__experience p {
    font-size: 18px;
    font-weight: 400;
    color: black;
}

.amaboutinfo__experience p:hover a {
    color: var(--tp-theme-1);
}

.amaboutinfo__experience p b {
    color: var(--tp-common-black);
}

.amaboutsocial__icon {
    overflow: hidden;
}

@media (max-width: 767px) {
    .amaboutsocial__icon {
        display: inline-block;
        margin-bottom: 0;
    }
}

.amaboutsocial__icon > a {
    display: inline-block;
}

.amaboutsocial__icon .tp-si.tp-si-color-2 {
    background-color: var(--tp-common-blue);
}

.amaboutsocial__icon .tp-si__text {
    background-color: #4267B2;
    height: 42px;
    padding-left: 16px;
    padding-right: 28px;
    display: inline-block;
    color: var(--tp-common-white);
    font-size: 16px;
    font-weight: 500;
    line-height: 42px;
    border-radius: 3px 0 0 3px;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    margin-right: -112px;
    z-index: -1;
    position: relative;
}

@media (max-width: 767px) {
    .amaboutsocial__icon .tp-si__text {
        display: none;
    }
}

.amaboutsocial__icon .tp-si__text.tp-si-color-1 {
    background-color: #E40028;
}

.amaboutsocial__icon .tp-si__text.tp-si-color-2 {
    background-color: var(--tp-theme-1);
}

.amaboutsocial__icon .tp-si__text.tp-si-color-3 {
    background-color: var(--tp-common-blue);
}

.amaboutsocial__icon .tp-si__text.tp-si-color-4 {
    background-color: #E40028;
}

.amaboutsocial__icon .tp-si__text::after {
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    content: "";
    height: 1px;
    width: 14px;
    background-color: rgba(255, 255, 255, 0.15);
    display: inline-block;
    z-index: 9;
}

.amaboutsocial__icon .tp-si__icon {
    background-color: #4267B2;
    height: 42px;
    width: 42px;
    text-align: center;
    display: inline-block;
    color: var(--tp-common-white);
    line-height: 42px;
    border-radius: 3px;
}

@media (max-width: 767px) {
    .amaboutsocial__icon .tp-si__icon {
        margin-right: 10px;
        margin-top: 20px;
    }
}

.amaboutsocial__icon .tp-si__icon.tp-si-color-1 {
    background-color: #E40028;
}

.amaboutsocial__icon .tp-si__icon.tp-si-color-2 {
    background-color: var(--tp-theme-1);
}

.amaboutsocial__icon .tp-si__icon.tp-si-color-3 {
    background-color: var(--tp-common-blue);
}

.amaboutsocial__icon .tp-si__icon.tp-si-color-4 {
    background-color: #E40028;
}

.si-btn-link:hover .tp-si__text {
    opacity: 1;
    visibility: visible;
    margin-right: 0px;
}

.si-btn-link:hover .tp-si__icon {
    border-radius: 0 3px 3px 0;
}

.feature-bottom-space {
    padding-bottom: 220px;
}

@media (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
    .feature-bottom-space {
        padding-bottom: 90px;
    }
}

.amfeature {
    padding-top: 50px;
}

@media (max-width: 767px) {
    .amfeature {
        padding-left: 0px;
    }
}

.amfeature__item p {
    font-size: 15px;
    line-height: 26px;
}

.amfeature__title p {
    font-size: 16px;
}

.amfeature__list ul li {
    color: var(--tp-common-black);
    font-size: 15px;
    font-weight: 500;
    position: relative;
    padding-left: 30px;
    padding-bottom: 5px;
}

.amfeature__list ul li i {
    color: #726FFC;
    font-weight: 500;
    position: absolute;
    left: 0;
    top: 6px;
}

.amskill__title p {
    font-size: 16px;
    line-height: 26px;
}

.am-skill-title {
    font-size: 30px;
    color: var(--tp-common-black);
    font-weight: 500;
    padding-bottom: 25px;
}

.am-skill-sm-title {
    font-size: 24px;
    font-weight: 500;
    color: var(--tp-common-black);
    padding-bottom: 20px;
}

.am-contact-title {
    font-size: 24px;
    color: var(--tp-common-black);
    font-weight: 500;
    position: relative;
    overflow: hidden;
    background-color: var(--tp-common-white);
    padding-right: 90px;
    display: inline-block;
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .am-contact-title {
        font-size: 23px;
    }
}

.am-border-shape {
    position: absolute;
    height: 1px;
    background-color: #F4F6FB;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    z-index: -1;
}

.contact-form {
    background-color: var(--tp-grey-1);
    border-radius: 20px;
    padding: 80px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .contact-form {
        padding: 30px;
    }
}

@media (max-width: 767px) {
    .contact-form {
        padding: 10px;
    }
}

.contact-form .input input {
    width: 100%;
    height: 65px;
    border-radius: 5px;
    border: none;
    padding: 0px 20px;
    border-radius: 5px;
    margin-bottom: 30px;
}

.contact-form .input input::placeholder {
    color: black;
    font-size: 15px;
    font-weight: 400;
}


.contact-form .textarea textarea {
    width: 100%;
    height: 180px;
    padding: 30px 20px;
    border: 0;
    outline: 0;
    resize: none;
    border-radius: 5px;
    margin-bottom: 30px;
}

.contact-form .textarea textarea::placeholder {
    color: black;
    font-size: 15px;
    font-weight: 400;
}

.form-row {
    display: flex;
    align-items: center; /* Align items vertically in the center */
    justify-content: space-between; /* Space out the children */
}

.file-upload-wrapper {
    display: flex;
    align-items: center;
}

/* Adjust margins and padding as needed */
.file-upload-wrapper svg {
    margin-right: 10px; /* Adjust as needed */
}

.am-contact-info {
    margin-bottom: 35px;
}

/*----------------------------------------*/
/*  13. testimonial css start
/*----------------------------------------*/
.tp-testimonial-item {
    background-color: #3A3A42;
    padding: 60px 45px;
    border-radius: 20px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-testimonial-item {
        padding: 60px 35px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-testimonial-item {
        padding: 20px 40px;
    }
}

@media (max-width: 767px) {
    .tp-testimonial-item {
        padding: 25px 20px;
    }
}

@media (max-width: 767px) {
    .tp-testimonial-item .tp-testi-meta {
        flex-direction: column;
        margin-bottom: 20px;
    }
}

.tp-testi-icon-box {
    flex: 0 0 auto;
}

.tp-testi-client-position h3 {
    color: var(--tp-common-white);
    font-size: 18px;
    font-weight: 700;
}

.tp-testi-client-position h6 {
    color: var(--tp-common-white);
    margin-bottom: 0;
    font-size: 12px;
    font-weight: 500;
}

@media (max-width: 767px) {
    .tp-testi-ratting {
        margin-top: 15px;
    }
}

.tp-testi-ratting i {
    color: var(--tp-theme-primary);
}

.tp-testi-p-text p {
    color: var(--tp-common-white);
    line-height: 30px;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 0;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-testi-p-text p {
        font-size: 16px;
        margin-bottom: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-testi-p-text p {
        font-size: 16px;
        margin-bottom: 0;
    }
}

.testimonial-slider-active {
    margin-left: -55px;
    margin-right: -55px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .testimonial-slider-active {
        margin-left: -390px;
        margin-right: -390px;
    }
}

@media (max-width: 767px) {
    .testimonial-slider-active {
        margin-left: 0;
        margin-right: 0;
    }
}

.testimonial-slider-active-2 {
    margin-left: -390px;
    margin-right: -390px;
}

@media (max-width: 767px) {
    .testimonial-slider-active-2 {
        margin-left: 0;
        margin-right: 0;
    }
}

.tp-testi-img img {
    border-radius: 10px;
}

.tp-testimonial-slider-section .swiper-slide.swiper-slide-active {
    border: 1px solid #FFDC60;
    border-radius: 20px;
}

.tp-testimonial-info img {
    border-radius: 10px;
    width: 69px;
    height: 69px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 25px;
}

.tp-testimonial-info h4 {
    font-size: 18px;
    color: var(--tp-common-black);
    font-weight: 700;
}

.tp-testimonial-info span {
    font-size: 12px;
    font-weight: 500;
    color: black;
    margin-bottom: 30px;
    display: inline-block;
}

.tp-testimonial-info span i {
    color: var(--tp-theme-primary);
}

.tp-testimonial-info span .fa-stars-1 {
    padding-left: 8px;
}

.tp-testimonial-info p {
    color: var(--tp-common-black);
    font-size: 24px;
    line-height: 1.6;
    font-weight: 400;
    max-width: 750px;
    margin: 0 auto;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-testimonial-info p {
        font-size: 20px;
    }
}

@media (max-width: 767px) {
    .tp-testimonial-info p {
        font-size: 18px;
    }
}

.testimonial-slider-dots .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 50%;
    background-color: var(--tp-theme-1);
    margin: 0px 3px;
    opacity: 0.5;
    transition: 0.3s;
}

.testimonial-slider-dots .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: var(--tp-theme-1);
    width: 30px;
    border-radius: 30px;
    opacity: 1;
}

.testimonial-shape-1 {
    position: absolute;
    top: 210px;
    left: 120px;
    animation: moving 6s linear infinite;
}

.testimonial-shape-2 {
    position: absolute;
    top: 309px;
    left: 325px;
    animation: rotate 8s linear infinite;
}

.testimonial-shape-3 {
    position: absolute;
    top: 50%;
    left: 70px;
    animation: rotate 8s linear infinite;
}

.testimonial-shape-4 {
    position: absolute;
    bottom: 160px;
    left: 280px;
    animation: rotate 8s linear infinite;
}

.testimonial-shape-5 {
    position: absolute;
    bottom: 100px;
    left: 90px;
    animation: rotate 8s linear infinite;
}

.testimonial-shape-6 {
    position: absolute;
    top: 160px;
    right: 300px;
    animation: rotate 8s linear infinite;
}

.testimonial-shape-7 {
    position: absolute;
    top: 150px;
    right: 80px;
    animation: rotate 8s linear infinite;
}

.testimonial-shape-8 {
    position: absolute;
    top: 50%;
    right: 315px;
    animation: rotate 8s linear infinite;
}

.testimonial-shape-9 {
    position: absolute;
    top: 50%;
    right: 80px;
    animation: rotate 8s linear infinite;
}

.testimonial-shape-10 {
    position: absolute;
    bottom: 160px;
    right: 210px;
    animation: rotate 8s linear infinite;
}

.tp-testimonial-box {
    background-color: var(--tp-common-white);
    padding: 75px 63px;
    border-radius: 20px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-testimonial-box {
        padding: 54px 63px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-testimonial-box {
        padding: 40px 35px;
    }
}

@media (max-width: 767px) {
    .tp-testimonial-box {
        padding: 40px 20px;
    }
}

.tp-testimonial-box__rating span {
    color: var(--tp-theme-primary);
    font-size: 26px;
    padding-right: 5px;
    margin-bottom: 55px;
    display: inline-block;
}

@media (max-width: 767px) {
    .tp-testimonial-box__rating span {
        margin-bottom: 35px;
        font-size: 20px;
    }
}

.tp-testimonial-box__rating p {
    font-size: 24px;
    font-weight: 400;
    color: var(--tp-common-black);
    line-height: 1.7;
    margin-bottom: 75px;
    padding-right: 5px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-testimonial-box__rating p {
        font-size: 23px;
    }
}

@media (max-width: 767px) {
    .tp-testimonial-box__rating p {
        font-size: 15px;
        margin-bottom: 30px;
    }
}

.tp-testimonial-box__testi-title .testi-heading {
    font-size: 24px;
    font-weight: 700;
    color: var(--tp-common-black);
    margin-bottom: 4px;
}

@media (max-width: 767px) {
    .tp-testimonial-box__testi-title .testi-heading {
        font-size: 17px;
    }
}

.tp-testimonial-box__testi-title span {
    display: block;
    color: black;
    font-size: 14px;
    font-weight: 500;
}

.testi-slider-active-four {
    margin-left: -320px;
    margin-right: -320px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .testi-slider-active-four {
        margin-left: 0px;
        margin-right: 0px;
    }
}

@media (max-width: 767px) {
    .testi-slider-active-four {
        margin-left: 0px;
        margin-right: 0px;
    }
}

.testi-slider-opacity {
    opacity: 0.3;
}

.testi-slider-opacity.swiper-slide.swiper-slide-active {
    opacity: 1;
}

.testimonial-slider-dots-four .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 50%;
    background-color: var(--tp-theme-1);
    margin: 0px 3px;
    opacity: 0.5;
    transition: 0.3s;
}

.testimonial-slider-dots-four .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: var(--tp-theme-1);
    width: 30px;
    border-radius: 30px;
    opacity: 1;
}

.tp-testimonial-item-four {
    border: 2px solid #e4e7f3;
    padding: 0px 46px;
    padding-top: 50px;
    padding-bottom: 60px;
    border-radius: 20px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-testimonial-item-four {
        padding: 0px 35px;
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-testimonial-item-four {
        padding: 0px 15px;
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

@media (max-width: 767px) {
    .tp-testimonial-item-four {
        padding: 0px 20px;
        padding-top: 30px;
        padding-bottom: 30px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-testimonial-item-four__meta {
        margin-bottom: 35px;
    }
}

@media (max-width: 767px) {
    .tp-testimonial-item-four__meta {
        margin-bottom: 25px;
    }
}

.tp-testimonial-item-four__rating span {
    color: var(--tp-theme-primary);
    line-height: 1;
}

@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 767px) {
    .tp-testimonial-item-four .tp-testi-paragraph {
        margin-bottom: 0;
        padding-bottom: 10px;
    }
}

.tp-testimonial-item-four .tp-testi-paragraph p {
    font-size: 18px;
    font-weight: 400;
    color: var(--tp-common-black);
    line-height: 32px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-testimonial-item-four .tp-testi-paragraph p {
        font-size: 16px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-testimonial-item-four .tp-testi-paragraph p {
        font-size: 15px;
    }
}

@media (max-width: 767px) {
    .tp-testimonial-item-four .tp-testi-paragraph p {
        font-size: 15px;
    }
}

.tp-testimonial-item-four__position h4,
.tp-testimonial-item-four__position h5 {
    font-size: 18px;
    font-weight: 700;
    color: var(--tp-common-black);
}

.tp-testimonial-item-four__position span {
    color: black;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
}

@media (max-width: 767px) {
    .tp-testi-wrapper {
        flex-wrap: wrap;
    }
}

@media (max-width: 767px) {
    .tp-testimonial-title-box {
        margin-bottom: 40px;
    }
}

.ce-testi-shape {
    position: absolute;
    bottom: 150px;
    left: 45px;
    animation: rotate2 15s linear infinite;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .ce-testi-shape {
        bottom: 20px;
    }
}

.tp-testimonial-thumb img {
    max-width: 100%;
}

.tptestimonial__rating-5 span {
    color: var(--tp-theme-primary);
    padding-right: 2px;
    margin-bottom: 55px;
    display: inline-block;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tptestimonial__rating-5 span {
        margin-bottom: 35px;
    }
}

@media (max-width: 767px) {
    .tptestimonial__rating-5 span {
        margin-bottom: 25px;
    }
}

.tptestimonial__rating-5 p {
    font-size: 30px;
    font-weight: 400;
    color: var(--tp-common-black);
    line-height: 1.4;
    padding-bottom: 55px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tptestimonial__rating-5 p {
        font-size: 28px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tptestimonial__rating-5 p {
        font-size: 25px;
        margin-bottom: 25px;
    }
}

@media (max-width: 767px) {
    .tptestimonial__rating-5 p {
        font-size: 18px;
        padding-bottom: 20px;
    }
}

.tptestimonial__meta-5 span {
    font-size: 14px;
    font-weight: 500;
    color: black;
    text-transform: uppercase;
}

@media (max-width: 767px) {
    .testimonial-pd-slider-section {
        padding-left: 0px;
    }
}

.tp-pd-testi-title {
    color: var(--tp-common-black);
    font-weight: 700;
    font-size: 24px;
}

.project-blue-dots {
    padding-top: 0px;
    position: absolute;
}

.project-blue-dots .swiper-pagination-bullet {
    background-color: #89cefb;
}

@media (max-width: 767px) {
    .project-blue-dots {
        padding-top: 20px;
        position: static;
    }
}

.project-blue-dots .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: var(--tp-common-blue);
    box-shadow: 0px 2px 2px rgba(89, 86, 233, 0.25);
}

.bp-testi-shape-1 {
    position: absolute;
    top: 150px;
    left: 330px;
    animation: moving 9s linear infinite;
}

.bp-testi-shape-2 {
    position: absolute;
    top: 130px;
    right: 120px;
    animation: rotate2 15s linear infinite;
}

.bs-testi-shape-1 {
    position: absolute;
    bottom: 70px;
    left: 40px;
    animation: rotate2 15s linear infinite;
}

.ac-testimonial-right img {
    max-width: 100%;
}

@media (max-width: 767px) {
    .ac-testimonial-right {
        display: none;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .ac-testimonial-info {
        margin-bottom: 70px;
    }
}

.testimonial-html-space {
    padding-left: 45px;
    padding-right: 120px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .testimonial-html-space {
        padding-right: 45px;
    }
}

@media (max-width: 767px) {
    .testimonial-html-space {
        padding-right: 20px;
        padding-left: 20px;
    }
}
.tp-pagination-wrapper {
  margin-bottom: 100px;
  text-align: center;
}

.tp-pagination-list {
  display: inline-flex;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.tp-page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  font-size: 15px;
  font-weight: 500;
  color: #333;
  border: 1px solid #dcdcdc;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s ease;
  background-color: #fff;
}

.tp-page-link:hover {
  border-color: #26927B;
  color: #26927B;
  background-color: #f9f9f9;
}

.tp-page-link.current {
  background-color: #26927B;
  color: #fff;
  border-color: #26927B;
  cursor: default;
}

.tp-page-link.dots {
  pointer-events: none;
  background: none;
  border: none;
  color: #aaa;
}


/*----------------------------------------*/
/*  14. team css start
/*----------------------------------------*/
.tp-team-item {
    position: relative;
    overflow: hidden;
}

.tp-team-item__img img {
    border-radius: 10px;
}

.tp-team-item__info {
    background-color: var(--tp-theme-primary);
    position: absolute;
    left: 0;
    bottom: -20px;
    width: 100%;
    padding: 25px 50px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-team-item__info {
        padding: 25px 25px;
    }
}

.tp-team-item__icon i {
    font-size: 36px;
    -webkit-text-stroke: 1px #292930;
    color: transparent;
    transform: rotate(45deg);
    font-weight: 700;
    -webkit-transform: translateY(5px);
    -moz-transform: translateY(5px);
    -ms-transform: translateY(5px);
    -o-transform: translateY(5px);
    transform: translateY(5px);
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    transition-delay: 0s;
    transition-delay: 0.2s;
}

.tp-team-item:hover .tp-team-item__icon i {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
    transition-delay: 0.2s;
    transform: rotate(45deg);
}

.tp-team-item:hover .tp-team-title {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
    transition-delay: 0.2s;
}

.tp-team-item:hover .tp-team-subtitle {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
    transition-delay: 0.4s;
}

.tp-team-item:hover .tp-team-item__info {
    opacity: 1;
    visibility: visible;
    bottom: 0;
}

.tp-team-title {
    font-size: 20px;
    font-weight: 500;
    color: var(--tp-common-black);
    -webkit-transform: translateY(5px);
    -moz-transform: translateY(5px);
    -ms-transform: translateY(5px);
    -o-transform: translateY(5px);
    transform: translateY(5px);
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    transition-delay: 0s;
    transition-delay: 0.2s;
}

.tp-team-title:hover {
    color: var(--tp-theme-1);
}

.tp-team-subtitle {
    font-size: 12px;
    font-weight: 500;
    color: var(--tp-common-black);
    -webkit-transform: translateY(5px);
    -moz-transform: translateY(5px);
    -ms-transform: translateY(5px);
    -o-transform: translateY(5px);
    transform: translateY(5px);
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    transition-delay: 0s;
    transition-delay: 0.2s;
}

.tp-team-overlay {
    position: relative;
}

.tp-team-overlay__img img {
    border-radius: 10px;
}

.tp-team-overlay::after {
    background-color: var(--tp-theme-secondary);
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    content: "";
    position: absolute;
    border-radius: 10px;
}

.tp-team-overlay__info {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    width: 100%;
}

.tp-team-overlay__info .team-title {
    font-size: 26px;
    font-weight: 500;
    color: var(--tp-common-black);
}

.tp-team-overlay__info .team-title:hover {
    color: var(--tp-theme-1);
    transition: 0.3s;
}

.tp-team-overlay__info i {
    font-size: 85px;
    -webkit-text-stroke: 2px #292930;
    color: transparent;
    transform: rotate(45deg);
    font-weight: 700;
    transition: 0.3s;
}

.tp-team-overlay__info i:hover {
    -webkit-text-stroke: 2px var(--tp-theme-1);
}

.tpteam {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.tpteam::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--tp-theme-secondary);
    border-radius: 10px;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

.tpteam__shape-1 {
    position: absolute;
    top: -70px;
    left: -60px;
    z-index: 2;
    transition: 0.6s;
}

.tpteam__shape-2 {
    position: absolute;
    bottom: -70px;
    right: -60px;
    z-index: 2;
    transition: 0.6s;
}

.tpteam__thumb img {
    border-radius: 10px;
    max-width: 100%;
}

.tpteam__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    opacity: 0;
    visibility: hidden;
    z-index: 9;
    transition: 0.3s;
    width: 100%;
}

.tpteam__content i {
    font-size: 15px;
    color: var(--tp-common-black);
    padding: 0px 15px;
    transition: 0.3s;
}

.tpteam__content i:hover {
    color: var(--tp-common-white);
}

.tpteam:hover::after {
    opacity: 1;
    visibility: visible;
}

.tpteam:hover .tpteam__content {
    opacity: 1;
    visibility: visible;
}

.tpteam:hover .tpteam__shape-1 {
    left: 0;
    top: 0;
}

.tpteam:hover .tpteam__shape-2 {
    right: 0;
    bottom: 0;
}

.tp-team-sm-title {
    color: var(--tp-common-black);
    font-size: 22px;
    font-weight: 500;
    transition: 0.3s;
}

.tp-team-sm-title:hover {
    color: var(--tp-common-white);
}

.tp-team-sm-subtitle {
    color: var(--tp-common-black);
    font-size: 12px;
    font-weight: 500;
    transition: 0.3s;
    padding-bottom: 5px;
}

.tp-team-sm-subtitle:hover {
    color: var(--tp-common-white);
}

.bp-team-shape-1 {
    position: absolute;
    top: 160px;
    left: 145px;
    animation: rotate2 15s linear infinite;
}

.ac-team-title {
    font-size: 50px;
    font-weight: 700;
    color: var(--tp-common-black);
    letter-spacing: -2px;
}

/*----------------------------------------*/
/*  15. mission css start
/*----------------------------------------*/
.tp-mission-tab {
    display: inline-block;
    border: 2px solid var(--tp-common-black);
    border-radius: 10px;
    padding: 0px 15px;
    margin-bottom: 55px;
}

.tp-mission-tab button {
    color: var(--tp-common-black);
    font-size: 18px;
    font-weight: 500;
    text-transform: capitalize;
    padding: 20px 45px;
    position: relative;
    margin: 7px 0;
    margin-left: -5px;
    margin-right: -2px;
    border-radius: 10px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-mission-tab button {
        padding: 20px 40px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-mission-tab button {
        padding: 15px 20px;
    }
}

@media (max-width: 767px) {
    .tp-mission-tab button {
        padding: 19px 21px;
    }
}

.tp-mission-tab button::after {
    position: absolute;
    content: "";
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    width: 1px;
    height: 40px;
    background-color: #B5B5B5;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-mission-tab button::after {
        height: 20px;
    }
}

.tp-mission-tab button::before {
    content: "";
    height: 100%;
    width: 102%;
    top: 0;
    left: -2px;
    background: var(--tp-common-blue);
    position: absolute;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    border-radius: 10px;
}

.tp-mission-tab button:last-child::after {
    display: none;
}

.tp-mission-tab button span {
    position: relative;
    z-index: 9;
}

.tp-mission-tab button.active {
    background-color: var(--tp-common-blue);
}

.tp-mission-tab button.active::before {
    opacity: 1;
    visibility: visible;
}

.tp-mission-title {
    font-size: 50px;
    font-weight: 700;
    color: var(--tp-common-black);
    margin-bottom: 40px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-mission-title {
        font-size: 42px;
    }
}

@media (max-width: 767px) {
    .tp-mission-title {
        font-size: 28px;
    }
}

.tpmission__content p {
    font-size: 18px;
    font-weight: 400;
    color: black;
    padding-right: 62px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tpmission__content p br {
        display: none;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tpmission__content p {
        font-size: 15px;
    }

    .tpmission__content p br {
        display: none;
    }
}

@media (max-width: 767px) {
    .tpmission__content p {
        padding-right: 0;
        font-size: 15px;
    }

    .tpmission__content p br {
        display: none;
    }
}

.tp-mission-img {
    margin-left: 110px;
}

.tp-mission-img img {
    max-width: 100%;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-mission-img {
        margin-left: 0px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-mission-img {
        margin-left: 0px;
        margin-top: 50px;
    }
}

@media (max-width: 767px) {
    .tp-mission-img {
        margin-left: 0px;
        margin-top: 50px;
    }
}

.bp-mission-shape-1 {
    position: absolute;
    top: 140px;
    left: 44px;
    animation: rotate2 15s linear infinite;
}

.bp-mission-shape-2 {
    position: absolute;
    bottom: 50px;
    left: 44px;
    animation: moving 9s linear infinite;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .bp-mission-shape-2 {
        bottom: -50px;
    }
}

.bp-mission-shape-3 {
    position: absolute;
    bottom: 0;
    right: 13%;
    animation: rotate2 15s linear infinite;
}

/*----------------------------------------*/
/*  16. job css start
/*----------------------------------------*/
.jobdetails__subtitle {
    padding-bottom: 20px;
    margin-bottom: 50px;
    border-bottom: 1px solid #ECEFF4;
}

.jobdetails__title span {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    /*padding-bottom: 45px;*/
    display: inline-block;
}

.jobdetails__paragraph p {
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
}

.jobdetails__paragraph p b {
    color: var(--tp-common-black);
}

.jobdetails__img {
    padding-top: 30px;
    padding-bottom: 60px;
}

.jobdetails__img img {
    max-width: 100%;
    border-radius: 20px;
}

.jobdetails__feature ul li {
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    position: relative;
    padding-left: 30px;
    margin-bottom: 25px;
}

.jobdetails__feature ul li span {
    font-size: 16px;
    font-weight: 500;
    color: var(--tp-common-black);
}

.jobdetails__feature ul li i {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: var(--tp-theme-primary);
    text-align: center;
    line-height: 20px;
    font-size: 10px;
    color: var(--tp-common-black);
    position: absolute;
    top: 3px;
    left: 0;
    margin-right: 20px;
}

.jobdetails__feature-2 ul li {
    margin-bottom: 45px;
}

.jb-subtitle {
    color: #00B500;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
}

.job-title {
    color: var(--tp-common-black);
    font-size: 26px;
    font-weight: 500;
}

/*----------------------------------------*/
/*  17. chose css start
/*----------------------------------------*/
.bp-chose-1 {
    position: absolute;
    bottom: 104px;
    left: 144px;
    animation: rotate2 15s linear infinite;
}

.bp-chose-2 {
    position: absolute;
    bottom: 87px;
    right: 132px;
    animation: rotate2 15s linear infinite;
}

.bp-chose-3 {
    position: absolute;
    top: 135px;
    right: 132px;
    animation: moving 9s linear infinite;
}

.ac-chose-bg {
    background-color: var(--tp-grey-1);
    border-radius: 20px;
    padding: 80px 80px 50px 80px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .ac-chose-bg {
        padding: 40px 40px 0px 40px;
    }
}

@media (max-width: 767px) {
    .ac-chose-bg {
        padding: 30px 30px 0px 30px;
    }
}

/*----------------------------------------*/
/*  18. case css start
/*----------------------------------------*/
.cd-banner-img img {
    border-radius: 20px;
    max-width: 100%;
    box-shadow: 8px 8px 25px rgba(0, 0, 0, 0.2);
}

.cd-case-title {
    font-size: 20px;
    font-weight: 500;
    color: var(--tp-common-black);
    padding-bottom: 15px;
}

.cd-project-info-box {
    padding-right: 80px;
    padding-left: 80px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .cd-project-info-box {
        padding-right: 60px;
        padding-left: 40px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .cd-project-info-box {
        padding-right: 20px;
        padding-left: 40px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .cd-project-info-box {
        padding-right: 0px;
        padding-left: 20px;
    }
}

@media (max-width: 767px) {
    .cd-project-info-box {
        padding-right: 10px;
        padding-left: 10px;
        margin-bottom: 30px;
    }
}

.cd-project-info-box p {
    font-size: 15px;
    font-weight: 400;
    line-height: 25px;
    margin-bottom: 0;
}

.cd-client-details {
    padding-left: 40px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .cd-client-details {
        padding-left: 0;
    }
}

@media (max-width: 767px) {
    .cd-client-details {
        padding-left: 10px;
        margin-bottom: 20px;
    }
}

.cd-client-details p {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 0;
    padding-bottom: 20px;
}

.cd-client-details p span {
    color: var(--tp-common-black);
}

.cd-project-wrapper {
    border: 1px solid #EBEBEB;
    padding: 70px 0;
    border-radius: 20px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .cd-project-wrapper {
        padding: 23px 0;
    }
}

@media (max-width: 767px) {
    .cd-project-wrapper {
        padding: 10px 0;
    }
}

.cd-social-icon {
    padding-left: 70px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .cd-social-icon {
        padding-left: 40px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .cd-social-icon {
        padding-left: 30px;
    }
}

@media (max-width: 767px) {
    .cd-social-icon {
        padding-left: 10px;
    }
}

.cd-social-icon a {
    display: block;
    width: 45px;
    height: 45px;
    border: 1px solid #EBEBEB;
    border-radius: 50%;
    text-align: center;
    line-height: 45px;
    margin-bottom: 10px;
}

@media (max-width: 767px) {
    .cd-social-icon a {
        display: inline-block;
        margin-right: 20px;
    }
}

.cd-si-color-1 {
    color: #4267B2;
}

.cd-si-color-1:hover {
    background-color: #4267B2;
    color: var(--tp-common-white);
    border-color: #4267B2;
}

.cd-si-color-2 {
    color: #E40028;
}

.cd-si-color-2:hover {
    background-color: #E40028;
    color: var(--tp-common-white);
    border-color: #E40028;
}

.cd-si-color-3 {
    color: #1DA1F2;
}

.cd-si-color-3:hover {
    background-color: #1DA1F2;
    color: var(--tp-common-white);
    border-color: #1DA1F2;
}

.cd-info-box {
    padding-left: 80px;
    padding-right: 110px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .cd-info-box {
        padding-left: 35px;
        padding-right: 100px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .cd-info-box {
        padding-left: 0px;
        padding-right: 0px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .cd-info-box {
        padding-left: 45px;
    }
}

/*----------------------------------------*/
/*  19. product css start
/*----------------------------------------*/
.tp-product-title {
    font-size: 18px;
    color: var(--tp-common-black);
    font-weight: 500;
}

.tp-product-title:hover {
    color: var(--tp-theme-1);
}

.tpproduct__img {
    margin-bottom: 45px;
    position: relative;
}

.tpproduct__img::after {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(41, 41, 48, 0.6);
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

.tpproduct__meta span {
    color: #777B83;
    font-size: 18px;
    font-weight: 500;
}

.tpproduct__meta .product-rating {
    color: #F7931E;
    margin-bottom: 5px;
}

.tpproduct:hover .tpproduct__img::after {
    opacity: 1;
    visibility: visible;
}

.tpproduct:hover .tpproduct__img .tp-product-icon {
    opacity: 1;
    visibility: visible;
    bottom: 40%;
}

.tp-product-icon {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0px 10px;
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
}

.tp-product-icon a {
    height: 50px;
    width: 50px;
    background-color: var(--tp-theme-primary);
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
    display: inline-block;
    font-weight: 300;
    color: var(--tp-common-black);
    margin: 0px 6px;
}

.tp-product-icon a:hover {
    background-color: var(--tp-theme-1);
    color: var(--tp-common-white);
}

.productdetails {
    padding-left: 35px;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .productdetails {
        padding-left: 0;
    }
}

.productdetails__content p {
    font-size: 16px;
    font-weight: 400;
    color: #777B83;
    line-height: 26px;
    padding-bottom: 10px;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .productdetails__content p br {
        display: none;
    }
}

.productdetails__ratting i {
    color: var(--tp-theme-primary);
    font-size: 14px;
}

.productdetails__ratting span {
    font-size: 14px;
    color: var(--tp-common-black);
    font-weight: 500;
    padding-bottom: 30px;
    display: inline-block;
}

.productdetails__ratting h4 {
    font-weight: 700;
    font-size: 30px;
    color: var(--tp-common-black);
    padding-bottom: 25px;
}

.productdetails__ratting h4 del {
    font-size: 20px;
    font-weight: 500;
    color: #B9B9B9;
}

.productdetails__model {
    padding-bottom: 45px;
}

.productdetails__model h5 {
    font-size: 16px;
    color: var(--tp-common-black);
    font-weight: 500;
    padding-bottom: 10px;
}

.productdetails__model a {
    font-size: 12px;
    color: #777B83;
    font-weight: 600;
    text-transform: uppercase;
    background-color: #F7F8FD;
    height: 25px;
    display: inline-block;
    padding: 0px 20px;
    border-radius: 5px;
    margin-right: 10px;
    margin-bottom: 10px;
}

.productdetails__model a:hover {
    background-color: var(--tp-theme-primary);
    color: var(--tp-common-black);
}

.pd-title {
    font-size: 30px;
    font-weight: 500;
    color: var(--tp-common-black);
    padding-bottom: 10px;
}

/*----------------------------------------*/
/*  19. SHOP css start
/*----------------------------------------*/
.productdetails-tabs {
    padding-top: 90px;
    padding-bottom: 90px;
}

.tpshopitem:hover .tpshopitem__thumb img {
    transform: scale(1.2);
}

.tpshopitem:hover .tpshopitem__thumb-icon {
    bottom: 14px;
    opacity: 1;
    visibility: visible;
}

.tpshopitem__thumb {
    border: 1px solid #ECEFF4;
    border-radius: 5px;
}

.tpshopitem__thumb img {
    width: 100%;
    -webkit-transition: all 1s ease-out 0s;
    -moz-transition: all 1s ease-out 0s;
    -ms-transition: all 1s ease-out 0s;
    -o-transition: all 1s ease-out 0s;
    transition: all 1s ease-out 0s;
}

.tpshopitem__thumb-icon {
    position: absolute;
    bottom: -50px;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}

.tpshopitem__thumb-icon a {
    margin: 0 5px;
    height: 45px;
    width: 45px;
    line-height: 45px;
    border: 1px solid var(--tp-theme-blue);
    border-radius: 50%;
    display: inline-block;
    background-color: #0E63FF;
    color: var(--tp-common-white);
}

.tpshopitem__thumb-icon a:hover {
    background-color: var(--tp-theme-pink);
    border: 1px solid var(--tp-theme-pink);
}

.tpshopitem__content p {
    font-size: 18px;
    font-weight: 500;
    color: #777B83;
    margin-bottom: 6px;
}

.tpshopitem__title {
    font-size: 18px;
    font-weight: 500;
    display: block;
}

.tpshopitem__title a {
    background-image: linear-gradient(#0E63FF, #0E63FF), linear-gradient(#0E63FF, #0E63FF);
    background-repeat: no-repeat;
    background-position: 100% 100%, 0% 100%;
    background-size: 0% 1px, 0 1px;
    display: inline;
}

.tpshopitem__title a:hover {
    background-size: 0% 1px, 100% 1px;
    color: var(--tp-theme-blue);
}

.tpshopitem__review i {
    color: #F7931E;
}

.tpshopitem__product-base {
    position: absolute;
    top: 20px;
    left: 30px;
    font-weight: 700;
    font-size: 12px;
    color: var(--tp-common-white);
    padding: 6px 13px;
    background: #FD4766;
    border-radius: 5px;
    line-height: 1;
}

.tpproduct span {
    font-weight: 500;
    font-size: 15px;
}

.tpfilter {
    justify-content: end;
}

@media (max-width: 767px) {
    .tpfilter {
        justify-content: start;
    }
}

.tpfilter span {
    font-weight: 500;
    font-size: 15px;
}

.tpfilter .nice-select {
    padding-left: 5px;
    border: none;
    color: var(--tp-theme-primary);
}

.productthumb img {
    border-radius: 25px;
}

@media (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
    .productthumb img {
        max-width: 100%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .product {
        margin-left: 0;
    }
}

.product__details-content p {
    font-weight: 400;
    font-size: 16px;
    color: #777B83;
}

@media (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
    .product__details-content p br {
        display: none;
    }
}

.product-dtitle {
    font-weight: 400;
    font-size: 30px;
    line-height: 1.3;
}

@media (max-width: 767px) {
    .product-dtitle {
        font-size: 24px;
    }
}

.product-dinfo span {
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: #141515;
}

.product-rating a {
    color: #FFDC60;
}

.product-dprice {
    font-weight: 400;
    font-size: 30px;
    line-height: 38px;
    letter-spacing: 0.02em;
}

.product-model-title {
    font-weight: 600;
    font-size: 14px;
    line-height: 15px;
    color: #0B0B0B;
}

.product-quantity-title {
    font-weight: 600;
    font-size: 14px;
    line-height: 15px;
    letter-spacing: 0.02em;
    color: #0B0B0B;
}

.product-quantity input {
    color: var(--tp-theme-primary);
    border: none;
    width: 40px;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
}

.product-model-list a {
    font-size: 12px;
    font-weight: 600;
    color: #777B83;
    background: #F7F8FD;
    display: inline-block;
    padding: 0 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-right: 15px;
    border-radius: 2px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .product-model-list a {
        margin-right: 8px;
    }
}

@media (max-width: 767px) {
    .product-model-list a {
        margin-right: 5px;
        padding: 0 6px;
    }
}

.product-model-list a:last-child {
    margin-right: 0;
}

.product-model-list a:hover {
    background: var(--tp-theme-blue);
    color: var(--tp-common-white);
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .tp-product-img {
        margin-bottom: 50px;
    }
}

@media (max-width: 767px) {
    .tp-product-img img {
        max-width: 100%;
    }
}

.tp-product-quantity .cart-minus, .tp-product-quantity .cart-plus {
    cursor: pointer;
    color: #8D8884;
}

.tp-product-quantity .cart-minus:hover, .tp-product-quantity .cart-plus:hover {
    color: var(--tp-theme-primary);
}

.tp-product-quantity input {
    height: 30px;
    width: 32px;
    font-size: 14px;
    border: none;
    font-weight: 700;
    text-align: center;
}

.product-rating {
    margin-right: 20px;
}

.product-rating a {
    font-size: 16px;
    color: #FFDC60;
}

.product-dinfo {
    display: flex;
}

.product-dprice del {
    font-size: 20px;
    color: #B9B9B9;
}

.pro-details-nav {
    background: #F9FAFB;
    display: inline-block;
    padding: 7px 7px;
}

.pro-details-nav-btn {
    border: none;
}

.pro-details-nav-btn li {
    font-weight: 500;
    font-size: 18px;
    color: var(--tp-text-body);
    position: relative;
}

.pro-details-nav-btn li button span {
    position: relative;
    z-index: 9;
}

.pro-details-nav-btn li button::before {
    content: "";
    height: 100%;
    width: 102%;
    top: 0;
    left: -1px;
    background: #fff;
    position: absolute;
    z-index: 3;
    opacity: 0;
    visibility: hidden;
}

.pro-details-nav-btn li button.active::before {
    opacity: 1;
    visibility: visible;
}

.pro-details-nav-btn li::after {
    position: absolute;
    content: "";
    height: 40px;
    width: 1px;
    background: #DFE3E9;
    top: 50%;
    transform: translateY(-50%);
}

@media (max-width: 767px) {
    .pro-details-nav-btn li::after {
        display: none;
    }
}

.pro-details-nav-btn li:last-child::after {
    display: none;
}

@media (max-width: 767px) {
    .pro-details-nav-btn li {
        font-size: 16px;
    }
}

.pro-details-nav-btn li .nav-links {
    padding: 20px 45px;
    border-radius: 5px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .pro-details-nav-btn li .nav-links {
        padding: 10px 20px;
    }
}

@media (max-width: 767px) {
    .pro-details-nav-btn li .nav-links {
        padding: 5px 15px;
    }
}

.pro-details-nav-btn li .nav-links.active {
    background: var(--tp-common-white);
    color: var(--tp-theme-1);
}

.tab-para p {
    font-size: 16px;
    line-height: 30px;
}

.comments-box {
    margin-bottom: 50px;
}

.user-rating ul li {
    display: inline-block;
    color: #FFDC60;
}

.comments-text span, .comments-text p {
    font-size: 14px;
    color: #777777;
    line-height: 26px;
}

.comment-title p {
    color: #777777;
    font-size: 16px;
}

.comment-rating span {
    font-weight: 500;
    margin-right: 5px;
}

.comment-rating ul li {
    display: inline-block;
    color: #FFDC60;
}

.comment-input textarea {
    width: 100%;
    height: 120px;
    margin-bottom: 20px;
    border: 1px solid #e7e7e7;
    padding: 20px;
}

.comment-input textarea:focus {
    outline: 0;
    border: 1px solid var(--tp-theme-primary);
}

.comment-input input {
    width: 100%;
    height: 50px;
    resize: none;
    outline: 0;
    border: 1px solid #e7e7e7;
    padding: 8px 20px;
    margin-bottom: 30px;
}

.comment-input input:focus {
    border: 1px solid var(--tp-theme-primary);
}

.comments-avatar {
    flex: 0 0 auto;
}

.table .add-info {
    font-size: 18px;
    font-weight: 500;
}

.table td {
    padding: 18px;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .shop-left-right {
        margin-left: 0;
        margin-right: 0;
    }
}

.tp-comments-title {
    font-size: 24px;
    color: var(--tp-common-black);
    font-weight: 700;
    text-transform: capitalize;
}

@media (max-width: 767px) {
    .tp-comments-title {
        font-size: 18px;
    }
}

.avatar-name b {
    color: var(--tp-common-black);
    font-weight: 700;
    text-transform: uppercase;
}

.shop-faq .accordion-header button {
    font-size: 18px;
    padding: 20px 55px 20px 30px;
}

@media (max-width: 767px) {
    .shop-faq .accordion-header button {
        font-size: 14px;
    }
}

.shop-faq .accordion-content p br {
    display: none;
}

.shop-faq .accordion-content p {
    padding: 0 75px 20px 30px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .product-button a {
        margin-bottom: 10px;
    }
}

.comment-title {
    font-size: 24px;
    color: var(--tp-common-black);
    font-weight: 700;
    text-transform: capitalize;
}

.tp-product-slider-title {
    color: var(--tp-common-black);
    font-size: 30px;
    font-weight: 500;
}

/*----------------------------------------*/
/*  20. industri css start
/*----------------------------------------*/
.tpindustri {
    padding: 25px 35px;
    background-color: var(--tp-common-white);
    border-radius: 10px;
    display: inline-block;
    margin: 0px 10px;
    border-radius: 10px;
    box-shadow: 0px 13px 12px rgba(181, 184, 200, 0.03);
    margin-bottom: 20px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tpindustri {
        padding: 20px 25px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tpindustri {
        padding: 18px 20px;
        margin: 0px 5px;
        margin-bottom: 15px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .tpindustri {
        padding: 20px 20px;
    }
}

.tp-industri-bg {
    background-color: var(--tp-grey-1);
    padding-top: 110px;
    padding-bottom: 120px;
    border-radius: 20px;
}

.tp-industri-space {
    padding-left: 90px;
    padding-right: 90px;
    text-align: center;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-industri-space {
        padding-left: 50px;
        padding-right: 50px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-industri-space {
        padding-left: 0px;
        padding-right: 0px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-industri-space {
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media (max-width: 767px) {
    .tp-industri-space {
        padding-left: 0px;
        padding-right: 0px;
    }
}

.tp-industri-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--tp-common-black);
    margin-bottom: 0;
    display: flex;
    align-items: center;
}

@media (max-width: 767px) {
    .tp-industri-title {
        font-size: 15px;
    }
}

.tp-industri-title::before {
    content: "";
    height: 20px;
    width: 20px;
    background-color: var(--tp-common-blue);
    display: inline-block;
    border-radius: 50%;
    margin-right: 12px;
    flex: 0 0 auto;
}

.tp-ind-color-one::before {
    background-color: var(--tp-theme-primary);
}

.tp-ind-color-two::before {
    background-color: var(--tp-common-dpink);
}

.tp-ind-color-three::before {
    background-color: var(--tp-theme-1);
}

.tp-ind-color-four::before {
    background-color: var(--tp-theme-1);
}

.tp-ind-color-five::before {
    background-color: var(--tp-common-dpink);
}

.tp-ind-color-six::before {
    background-color: var(--tp-common-blue);
}

.tp-ind-color-seven::before {
    background-color: var(--tp-theme-primary);
}

.bs-industri-1 {
    position: absolute;
    left: 40px;
    top: 50px;
    animation: rotate2 5s linear infinite;
}

/*----------------------------------------*/
/*  21. home-corporate css start
/*----------------------------------------*/
.corporate-layout-right {
    width: calc(100% - 330px);
    margin-left: auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .corporate-layout-right {
        width: calc(100% - 280px);
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .corporate-layout-right {
        width: calc(100% - 0px);
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
    .corporate__offcanvas {
        width: 500px;
        padding-left: 60px;
        padding-right: 60px;
        padding-top: 50px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .corporate__offcanvas .mean-container .mean-bar {
        margin-bottom: 40px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
    .corporate__offcanvas .tpoffcanvas__content p {
        font-size: 25px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
    .tpoffcanvas__close-btn {
        top: 60px;
    }
}

.corporate-plr {
    padding-left: 40px;
    padding-right: 40px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .corporate-plr {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 767px) {
    .corporate-plr {
        padding-left: 0;
        padding-right: 0;
        padding-top: 20px;
    }
}

@media (max-width: 767px) {
    .corporate-social__space {
        padding-top: 70px;
    }
}

.corporate-header__left-menu > .tp-main-menu ul li.has-mega-menu ul.submenu {
    width: 800px;
    right: 0;
}

.corporate-header__bg {
    width: 330px;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99;
    padding: 45px 55px;
    padding-right: 0;
    border-right: 1px solid #3A3A42;
    background-color: var(--tp-common-black);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .corporate-header__bg {
        width: 280px;
        padding: 45px 35px;
        padding-right: 0;
    }
}

.corporate-header__logo {
    padding-bottom: 150px;
}

.corporate-header__logo img {
    width: 240px;
    height: 70px;
}

.corporate-header__left-menu {
    margin-bottom: 100px;
    border-left: 1px solid #3A3A42;
}

.corporate-header__left-menu > nav > ul > li {
    margin-right: 0;
    display: block;
    margin-bottom: 35px;
    padding-left: 50px;
}

.corporate-header__left-menu > nav > ul > li.left-menu-effect a {
    position: relative;
}

.corporate-header__left-menu > nav > ul > li.left-menu-effect a::after {
    content: "";
    left: -52px;
    top: 0;
    bottom: 0;
    width: 2px;
    height: 0%;
    background-color: var(--tp-common-pink);
    position: absolute;
    transition: 0.3s;
}

.corporate-header__left-menu > nav > ul > li.left-menu-effect a::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    left: auto;
    height: 1px;
    width: 0;
    background-color: var(--tp-common-white);
    transition: 0.7s;
    display: inline-block;
    box-shadow: 0px 4px 12px rgba(1, 16, 61, 0.14);
    border-radius: 6px;
}

.corporate-header__left-menu > nav > ul > li ul.submenu {
    left: 110%;
    top: 0;
    transition: 0.3s;
}

.corporate-header__left-menu > nav > ul > li ul.submenu li a {
    margin-bottom: 15px;
    display: inline-block;
}

.corporate-header__left-menu > nav > ul > li > a {
    padding: 0;
    font-weight: 700;
    font-size: 16px;
    display: inline-block;
}

.corporate-header__left-menu > nav > ul > li > a::after {
    background-color: transparent;
}

.corporate-header__left-menu > nav > ul > li > a::before {
    background-color: transparent;
}

.corporate-header__left-menu > nav > ul > li:hover > a {
    color: var(--tp-common-white);
}

.corporate-header__left-menu > nav > ul > li:hover.left-menu-effect a::after {
    height: 100%;
}

.corporate-header__left-menu > nav > ul > li:hover.left-menu-effect a::before {
    width: 100%;
    right: auto;
    left: 0;
}

.corporate-header__left-menu > nav > ul > li:hover ul.submenu {
    left: 100%;
    top: 0;
}

.corporate-header__email {
    font-weight: 700;
    font-size: 28px;
    line-height: 64px;
    letter-spacing: -0.02em;
    color: var(--tp-common-white);
}

.corporate-header__bar button {
    height: 70px;
    width: 70px;
    background-color: var(--tp-common-black);
    border-radius: 50%;
    text-align: center;
    line-height: 70px;
    font-size: 25px;
    color: var(--tp-common-white);
    display: inline-block;
}

.corporate-header__shape-img-1 {
    position: absolute;
    top: 0;
    left: 0;
}

.corporate-hero-title {
    font-weight: 700;
    font-size: 125px;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--tp-common-black);
    padding-bottom: 20px;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .corporate-hero-title {
        font-size: 100px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .corporate-hero-title {
        font-size: 70px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .corporate-hero-title {
        font-size: 95px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .corporate-hero-title {
        font-size: 80px;
    }
}

@media (max-width: 767px) {
    .corporate-hero-title {
        font-size: 56px;
    }
}

.corporate-hero__main-img {
    animation: tptranslateX2 4s infinite alternate;
}

.corporate-hero__main-img img {
    max-width: 100%;
}

@media (max-width: 767px) {
    .corporate-hero__main-img img {
        margin-top: 30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .corporate-hero__tablet-space {
        margin-bottom: 30px;
    }
}

.corporate-hero__section-box p {
    font-weight: 400;
    font-size: 22px;
    line-height: 32px;
    color: black;
    padding-bottom: 30px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .corporate-hero__section-box p {
        font-size: 19px;
    }
}

@media (max-width: 767px) {
    .corporate-hero__section-box p {
        font-size: 20px;
        line-height: 25px;
    }

    .corporate-hero__section-box p br {
        display: none;
    }
}

.corporate-hero__play-btn a {
    height: 70px;
    width: 70px;
    color: var(--tp-common-black);
    font-size: 20px;
    border-radius: 50%;
    text-align: center;
    line-height: 70px;
    display: inline-block;
    position: relative;
    border: 1px solid rgba(84, 84, 91, 0.19);
    transition: 0.3s;
}

.corporate-hero__play-btn a i {
    margin-left: 4px;
}

.corporate-hero__play-btn a:hover {
    background-color: #A8ABFF;
    color: var(--tp-common-black);
    border-color: #A8ABFF;
}

.corporate-hero__play-btn a:hover::after {
    border-color: #A8ABFF;
}

.corporate-hero__play-btn a::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    display: inline-block;
    border-radius: 200px;
    border: 2px solid #A8ABFF;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    border-left: 2px solid white;
    transform: rotate(-180deg);
    transition: 0.3s;
}

.corporate-hero__sub-img {
    position: absolute;
    bottom: 1%;
    right: 18%;
}

.corporate-hero__sub-img img {
    animation: tpupdown-2 0.9s infinite alternate;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .corporate-social__wrapper {
        margin-bottom: 60px;
    }
}

.corporate-social__wrapper ul li {
    display: inline-block;
    margin-right: 55px;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .corporate-social__wrapper ul li {
        margin-right: 35px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .corporate-social__wrapper ul li {
        margin-right: 25px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .corporate-social__wrapper ul li {
        margin-right: 40px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .corporate-social__wrapper ul li {
        margin-right: 20px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .corporate-social__wrapper ul li {
        margin-right: 25px;
    }
}

.corporate-social__wrapper ul li:last-child {
    margin-right: 0;
}

.corporate-social__wrapper ul li a {
    font-weight: 400;
    font-size: 16px;
    color: #4064AC;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .corporate-social__wrapper ul li a {
        font-size: 13px;
    }
}

.corporate-social__wrapper ul li a i {
    transition: 0.3s;
}

.corporate-social__wrapper ul li a span {
    color: var(--tp-common-black);
    margin-left: 12px;
    text-transform: uppercase;
    transition: 0.3s;
    font-weight: 500;
}

.corporate-social__wrapper ul li a:hover i {
    transform: translateY(-5px);
}

.corporate-social__wrapper ul li a.color-2 {
    color: #FF0000;
}

.corporate-social__wrapper ul li a.color-2:hover span {
    color: #FF0000;
}

.corporate-social__wrapper ul li a.color-3 {
    color: #1DA1F2;
}

.corporate-social__wrapper ul li a.color-3:hover span {
    color: #1DA1F2;
}

.corporate-social__wrapper ul li a.color-4 {
    color: #1DA1F2;
}

.corporate-social__wrapper ul li a.color-4:hover span {
    color: #1DA1F2;
}

.corporate-social__wrapper ul li a:hover span {
    color: #4064AC;
}

.corporate-social__scroll a {
    font-weight: 500;
    font-size: 16px;
    text-transform: uppercase;
    color: var(--tp-common-black);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .corporate-social__scroll a {
        font-size: 13px;
    }
}

.corporate-social__scroll a i {
    color: var(--tp-common-pink);
    margin-right: 15px;
    animation: tpupdown 0.6s infinite alternate;
}

.corporate-about__main-img img {
    max-width: 100%;
    animation: tptranslateX2 4s infinite alternate;
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .corporate-about__left-wrapper {
        margin-bottom: 70px;
    }
}

.corporate-about__sub-img {
    position: absolute;
    bottom: 4%;
    left: 2%;
    animation: tpupdown-2 0.9s infinite alternate;
}

.corporate-about__content p {
    padding-bottom: 35px;
    padding-right: 105px;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .corporate-about__content p {
        padding-right: 0;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .corporate-about__content p {
        padding-right: 0;
        font-size: 16px;
        line-height: 28px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .corporate-about__content p {
        padding-right: 0;
        font-size: 17px;
    }
}

@media (max-width: 767px) {
    .corporate-about__content p {
        padding-right: 0;
        font-size: 17px;
    }
}

.corporate-service__section-wrapper {
    margin-bottom: 60px;
}

@media (max-width: 767px) {
    .corporate-service__section-box {
        margin-bottom: 30px;
    }
}

.corporate-service__section-box .tp-title {
    margin-bottom: 0;
}

.corporate-service__item {
    border: 1px solid #3A3A42;
    border-radius: 10px;
    padding: 40px;
    transition: 0.3s;
}

.corporate-service__item:hover {
    background-color: #3A3A42;
}

.corporate-service__item:hover .corporate-service__icon span {
    box-shadow: inset 0 0 0 60px #222;
}

.corporate-service__icon {
    margin-bottom: 30px;
}

.corporate-service__icon span {
    height: 120px;
    width: 120px;
    line-height: 120px;
    border-radius: 50%;
    text-align: center;
    background: #3A3A42;
    border: 1px dashed #54545B;
    display: inline-block;
    transition: 0.5s;
}

.corporate-service__title {
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    letter-spacing: -0.01em;
    color: var(--tp-common-white);
    padding-bottom: 30px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .corporate-service__title br {
        display: none;
    }
}

.corporate-service__title a {
    background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
    display: inline;
    background-size: 0% 1px, 0 1px;
    background-position: 100% 100%, 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.3s linear;
}

.corporate-service__title a:hover {
    background-size: 0% 1px, 100% 1px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .corporate-chose__section-box .tp-title {
        font-size: 50px;
        margin-bottom: 20px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .corporate-chose__wrapper {
        margin-bottom: 70px;
    }
}

.corporate-chose__sub-img {
    position: absolute;
    top: 8%;
    left: 0%;
    animation: tpupdown-2 0.9s infinite alternate;
}

.corporate-chose__main-img img {
    max-width: 100%;
    animation: tptranslateX2 4s infinite alternate;
}

.corporate-chose__content p {
    padding-right: 60px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 992px) and (max-width: 1199px) {
    .corporate-chose__content p {
        padding-right: 0;
    }
}

@media (max-width: 767px) {
    .corporate-chose__content p {
        padding-right: 0;
        font-size: 15px;
    }
}

.corporate-project__section-box .tp-title {
    margin-bottom: 20px;
}

.corporate-project__img-box {
    border-radius: 20px;
}

.corporate-project__img-box img {
    border-radius: 20px;
    transition: 0.4s;
}

.corporate-project__img-box img:hover {
    transform: scale(1.1);
}

.corporate-project__img-box:hover .corporate-project__inner-content {
    left: 0;
    opacity: 1;
    visibility: visible;
}

.corporate-project__inner-content {
    padding: 40px 45px;
    position: absolute;
    bottom: 0;
    left: -200px;
    opacity: 0;
    visibility: hidden;
    background-color: var(--tp-common-white);
    border-radius: 10px;
    transition: 0.4s;
}

@media (max-width: 767px) {
    .corporate-project__inner-content {
        padding: 20px 20px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .corporate-project__inner-content {
        padding: 40px 50px;
    }
}

.corporate-project__inner-content span {
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: black;
    padding-bottom: 10px;
    display: inline-block;
}

@media (max-width: 767px) {
    .corporate-project__inner-content span {
        font-size: 13px;
        padding-bottom: 0;
    }
}

.corporate-project__title {
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -0.02em;
    color: #292930;
}

.corporate-project__title:hover {
    color: var(--tp-common-pink);
}

@media (max-width: 767px) {
    .corporate-project__title {
        font-size: 17px;
    }
}

.corporate-project__shape-bottom {
    position: absolute;
    left: 0;
    bottom: -17px;
    z-index: 99;
}

.corporate-brand__brand-item {
    text-align: center;
}

.button button {
    border: 1px solid;
    padding: 20px;
    margin: 0px 20px;
}

.corporate-testi__slider-bg {
    background-color: #3A3A42;
    padding: 70px;
    border-radius: 20px;
}

@media (max-width: 767px) {
    .corporate-testi__slider-bg {
        padding: 30px;
    }
}

.corporate-testi__slider-active {
    padding: 0px 100px;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .corporate-testi__slider-active {
        padding: 0px 30px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .corporate-testi__slider-active {
        padding: 0px 50px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .corporate-testi__slider-active {
        padding: 0px 0px;
    }
}

.corporate-testi__rating {
    padding-bottom: 20px;
}

.corporate-testi__rating h4 {
    font-weight: 700;
    font-size: 18px;
    color: #FFFFFF;
    margin-bottom: 0;
}

.corporate-testi__rating span {
    font-weight: 900;
    font-size: 12px;
    color: #FFDC60;
}

.corporate-testi__rating span.author-position {
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: black;
}

.corporate-testi__content p {
    font-weight: 500;
    font-size: 26px;
    line-height: 45px;
    letter-spacing: -0.03em;
    color: #FFFFFF;
    margin-bottom: 0;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .corporate-testi__content p {
        font-size: 25px;
        line-height: 41px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .corporate-testi__content p {
        font-size: 24px;
        line-height: 37px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .corporate-testi__content p {
        font-size: 21px;
        line-height: 36px;
    }
}

@media (max-width: 767px) {
    .corporate-testi__content p {
        font-size: 17px;
        line-height: 29px;
    }
}

.corporate-testi__slider-avata-active {
    padding: 0px 150px;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .corporate-testi__slider-avata-active {
        padding: 0px 70px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), (max-width: 767px) {
    .corporate-testi__slider-avata-active {
        padding: 0px 0px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .corporate-testi__slider-avata-active {
        padding: 0px 90px;
    }
}

.corporate-testi__slider-avata-active .slick-slide img {
    display: inline-block;
    transform: scale(0.6);
    transition: 0.4s;
    opacity: 0.5;
}

.corporate-testi__slider-avata-active .slick-center img {
    transform: scale(1);
    opacity: 1;
}

.corporate-testi__slider-avata {
    text-align: center;
}

.corporate-testi__slider-avata img {
    height: 80px;
    width: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.corporate-testi__shape-1 {
    position: absolute;
    top: 8%;
    right: 2%;
    animation: animationglob 10s cubic-bezier(1, 0.99, 0.03, 0.01) infinite;
}

.corporate-testi__shape-2 {
    position: absolute;
    bottom: 8%;
    left: 2%;
    animation: moving 9s linear infinite;
}

.corporate-testi__shape-3 {
    position: absolute;
    bottom: -2%;
    right: 0%;
}

.corporate-testi__shape-4 {
    position: absolute;
    top: 11%;
    left: 9%;
}

.corporate-blog__section-box .tp-title {
    margin-bottom: 0;
}

.corporate-blog__item:hover .corporate-blog__img img {
    transform: scale(1.2);
}

.corporate-blog__img {
    margin-bottom: 30px;
    border-radius: 20px;
}

.corporate-blog__img img {
    border-radius: 20px;
    transition: 0.4s;
    width: 100%;
}

.corporate-blog__category {
    margin-bottom: 20px;
}

.corporate-blog__category a {
    color: var(--tp-theme-1);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    background-color: rgba(88, 86, 233, 0.1);
    border-radius: 10px;
    padding: 0px 20px;
    height: 35px;
    line-height: 35px;
    display: inline-block;
    transition: 0.3s;
}

.corporate-blog__category a:hover {
    background-color: var(--tp-theme-1);
    color: var(--tp-common-white);
}

.corporate-blog__category a:hover.corporate-blog__date {
    color: white;
}

.corporate-blog__category a.corporate-blog__date {
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    color: black;
    margin-left: 10px;
    transition: 0.3s;
}

.corporate-blog__title {
    font-weight: 500;
    font-size: 24px;
    line-height: 31px;
    letter-spacing: -0.03em;
    color: #292930;
    transition: 0.3s;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .corporate-blog__title {
        font-size: 20px;
        line-height: 31px;
    }
}

.corporate-blog__title:hover {
    color: var(--tp-theme-1);
}

@media (max-width: 767px) {
    .corporate-news__left-item {
        margin-bottom: 20px;
    }
}

.corporate-news__title {
    font-weight: 700;
    font-size: 50px;
    line-height: 50px;
    letter-spacing: -0.03em;
    color: #FFFFFF;
    margin-bottom: 0;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .corporate-news__title {
        font-size: 40px;
    }
}

@media (max-width: 767px) {
    .corporate-news__title {
        font-size: 30px;
    }
}

.corporate-news__input input {
    width: 100%;
    height: 80px;
    padding: 30px;
    padding-right: 240px;
    border-radius: 5px;
    border: none;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .corporate-news__input input {
        padding-right: 175px;
    }
}

@media (max-width: 767px) {
    .corporate-news__input input {
        padding-right: 30px;
    }
}

.corporate-news__input input::-webkit-input-placeholder {
    font-weight: 400;
    font-size: 18px;
    color: #292930;
}

.corporate-news__input input:-moz-placeholder {
    font-weight: 400;
    font-size: 18px;
    color: #292930;
}

.corporate-news__input input::-moz-placeholder {
    font-weight: 400;
    font-size: 18px;
    color: #292930;
}

.corporate-news__input input:-ms-input-placeholder {
    font-weight: 400;
    font-size: 18px;
    color: #292930;
}

.corporate-news__input button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
}

@media (max-width: 767px) {
    .corporate-news__input button {
        position: static;
        transform: translateY(0%);
        left: 0;
        margin-top: 20px;
    }
}

.corporate-footer__space {
    margin-bottom: 70px;
}

.corporate-footer__title {
    font-weight: 500;
    font-size: 35px;
    line-height: 46px;
    letter-spacing: -2px;
    color: #FFFFFF;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .corporate-footer__title {
        font-size: 28px;
        line-height: 35px;
    }
}

@media (max-width: 767px) {
    .corporate-footer__title {
        font-weight: 500;
        font-size: 30px;
        line-height: 38px;
        padding-bottom: 15px;
    }
}

.corporate-footer__social a {
    height: 66px;
    width: 66px;
    border-radius: 50%;
    text-align: center;
    line-height: 66px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: inline-block;
    font-size: 18px;
    color: var(--tp-common-white);
    margin-left: 20px;
    font-weight: 700;
    transition: 0.3s;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .corporate-footer__social a {
        margin-left: 5px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
    .corporate-footer__social a {
        margin-left: 0;
        margin-right: 7px;
        margin-top: 30px;
    }
}

@media (max-width: 767px) {
    .corporate-footer__social a {
        margin-left: 0;
        margin-right: 5px;
        margin-top: 30px;
    }
}

.corporate-footer__social a:hover {
    background-color: var(--tp-common-pink);
    border-color: var(--tp-common-pink);
    color: var(--tp-common-black);
}

.corporate-footer__shape-left {
    position: absolute;
    bottom: 0%;
    left: -4%;
    z-index: -1;
    animation: tpupdown-2 0.9s infinite alternate;
}

.corporate-footer__shape-right {
    position: absolute;
    bottom: 0%;
    right: 0%;
    z-index: -1;
}

.corporate-footer__copyright .tp-copyright-text p {
    font-size: 16px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .corporate-footer__copyright .tp-copyright-text p {
        padding-bottom: 20px;
    }
}

@media (max-width: 767px) {
    .corporate-footer__copyright .tp-copyright-text p {
        font-size: 15px;
        padding-bottom: 20px;
    }
}

.corporate-footer__copyright .tp-copyright-right a {
    margin-left: 30px;
}

/*----------------------------------------*/
/*  22. home-blog css start
/*----------------------------------------*/
.bl-header-top__social a {
    font-size: 22px;
    color: #A9A9A9;
    margin-right: 40px;
    transition: 0.3s;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .bl-header-top__social a {
        font-size: 18px;
        margin-right: 30px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .bl-header-top__social a {
        font-size: 15px;
        margin-right: 20px;
    }
}

.bl-header-top__social a:hover {
    color: var(--tp-common-black);
}

.bl-header-top__logo {
    padding-top: 35px;
    padding-bottom: 35px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .bl-header-top__logo {
        padding-top: 25px;
        padding-bottom: 25px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .bl-header-top__logo {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

.bl-header-top__right a {
    font-size: 22px;
    color: #A9A9A9;
    transition: 0.3s;
    margin-left: 30px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .bl-header-top__right a {
        font-size: 18px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .bl-header-top__right a {
        font-size: 18px;
        margin-left: 15px;
    }
}

.bl-header-top__right a:hover {
    color: var(--tp-common-black);
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .bl-header-bottom__mobile-space {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

.bl-header-bottom__main-menu ul li {
    display: inline-block;
    margin: 0px 30px;
    position: relative;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .bl-header-bottom__main-menu ul li {
        margin: 0 25px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .bl-header-bottom__main-menu ul li {
        margin: 0 18px;
    }
}

.bl-header-bottom__main-menu ul li ul.submenu {
    position: absolute;
    background-color: var(--tp-common-black);
    padding: 40px;
    width: 270px;
    transition: 0.3s;
    top: 110%;
    opacity: 0;
    visibility: hidden;
    z-index: 999;
}

.bl-header-bottom__main-menu ul li ul.submenu li {
    margin: 0;
    margin-bottom: 10px;
    display: block;
}

.bl-header-bottom__main-menu ul li ul.submenu li:last-child {
    margin-bottom: 0;
}

.bl-header-bottom__main-menu ul li ul.submenu li a {
    font-size: 18px;
    font-weight: 500;
    color: var(--tp-common-white);
    display: block;
    padding: 0;
}

.bl-header-bottom__main-menu ul li ul.submenu li a:hover {
    color: var(--tp-theme-primary);
}

.bl-header-bottom__main-menu ul li a {
    font-weight: 500;
    font-size: 18px;
    line-height: 23px;
    letter-spacing: -0.01em;
    color: #FFFFFF;
    padding: 30px 0;
    display: inline-block;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .bl-header-bottom__main-menu ul li a {
        font-size: 16px;
    }
}

.bl-header-bottom__main-menu ul li:hover a {
    color: var(--tp-theme-primary);
}

.bl-header-bottom__main-menu ul li:hover ul.submenu {
    opacity: 1;
    visibility: visible;
    top: 100%;
}

.bl-header-bottom__bar button {
    font-size: 24px;
    font-weight: 700;
    color: var(--tp-common-white);
}

.bl-header-bottom__bar button:hover {
    color: var(--tp-theme-primary);
}

.bl-header-bottom__search button {
    font-size: 20px;
    font-weight: 700;
    color: var(--tp-common-white);
}

.bl-hero__slider-wrapper {
    margin-top: 30px;
    margin-left: -480px;
    margin-right: -480px;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .bl-hero__slider-wrapper {
        margin-left: 0px;
        margin-right: 0px;
    }
}

.bl-hero__slider-arrow button {
    height: 70px;
    width: 70px;
    border-radius: 50%;
    line-height: 75px;
    text-align: center;
    background-color: var(--tp-common-white);
    color: var(--tp-common-black);
    font-size: 22px;
    box-shadow: 0px 7px 13px rgba(44, 65, 97, 0.13);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
    .bl-hero__slider-arrow button {
        height: 50px;
        width: 50px;
        line-height: 55px;
    }
}

.bl-hero__slider-arrow .next-arrow {
    position: absolute;
    top: 50%;
    left: 22.9%;
    z-index: 9;
    transform: translateY(-50%);
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .bl-hero__slider-arrow .next-arrow {
        left: 19%;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .bl-hero__slider-arrow .next-arrow {
        left: 17.9%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .bl-hero__slider-arrow .next-arrow {
        left: 14%;
    }
}

.bl-hero__slider-arrow .prev-arrow {
    position: absolute;
    top: 50%;
    right: 22.9%;
    z-index: 9;
    transform: translateY(-50%);
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .bl-hero__slider-arrow .prev-arrow {
        right: 19%;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .bl-hero__slider-arrow .prev-arrow {
        right: 17.9%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .bl-hero__slider-arrow .prev-arrow {
        right: 14%;
    }
}

.bl-hero__slider-item {
    position: relative;
}

.bl-hero__slider-item::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(171.59deg, rgba(41, 41, 48, 0) 15.03%, #15151A 93.27%);
}

.bl-hero__slider-item:hover .bl-hero__slider-img img {
    transform: scale(1.2);
}

.bl-hero__slider-img img {
    transform: 0.6s;
}

.bl-hero__content {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 50px;
}

@media (max-width: 767px) {
    .bl-hero__content {
        padding: 20px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .bl-hero__content {
        padding: 60px;
    }
}

.bl-hero__content p {
    margin-bottom: 0;
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    color: #C7CBD7;
}

@media (max-width: 767px) {
    .bl-hero__content p {
        font-size: 14px;
        line-height: 22px;
    }
}

.bl-hero__category {
    padding: 8px 20px;
    text-transform: uppercase;
    background-color: var(--tp-common-black);
    color: var(--tp-common-white);
    font-weight: 700;
    font-size: 14px;
    line-height: 30px;
    margin-bottom: 15px;
    display: inline-block;
}

@media (max-width: 767px) {
    .bl-hero__category {
        padding: 3px 12px;
        font-size: 12px;
    }
}

.bl-hero__title {
    font-weight: 500;
    font-size: 32px;
    line-height: 42px;
    display: flex;
    align-items: center;
    letter-spacing: -0.03em;
    color: #FFFFFF;
    margin-bottom: 10px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .bl-hero__title {
        font-size: 28px;
    }
}

@media (max-width: 767px) {
    .bl-hero__title {
        font-size: 20px;
        line-height: 25px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .bl-blog__item-box {
        margin-bottom: 100px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .bl-blog__item-box {
        margin-bottom: 60px;
    }
}

@media (max-width: 767px) {
    .bl-blog__item-box {
        margin-bottom: 40px;
    }
}

.bl-blog__height {
    height: 745px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
    .bl-blog__height {
        height: 700px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .bl-blog__height {
        height: 600px;
    }
}

@media (max-width: 767px) {
    .bl-blog__height {
        height: 400px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .bl-blog__height {
        height: 600px;
    }
}

.bl-blog__slider-bg {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}

.bl-blog__slider-bg::after {
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(171.59deg, rgba(41, 41, 48, 0) 15.03%, #15151A 93.27%);
    position: absolute;
}

.bl-blog__slider-title {
    font-weight: 500;
    font-size: 70px;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #FFFFFF;
    padding-bottom: 10px;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .bl-blog__slider-title {
        font-size: 65px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .bl-blog__slider-title {
        font-size: 55px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .bl-blog__slider-title {
        font-size: 45px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .bl-blog__slider-title {
        font-size: 40px;
    }

    .bl-blog__slider-title br {
        display: none;
    }
}

@media (max-width: 767px) {
    .bl-blog__slider-title {
        font-size: 30px;
    }

    .bl-blog__slider-title br {
        display: none;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .bl-blog__slider-title {
        font-size: 40px;
    }

    .bl-blog__slider-title br {
        display: none;
    }
}

.bl-blog__slider-meta a {
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    color: #FFFFFF;
    margin: 0px 25px;
}

@media (max-width: 767px) {
    .bl-blog__slider-meta a {
        margin: 0 8px;
    }
}

.bl-blog__slider-content {
    padding: 80px;
}

@media (max-width: 767px) {
    .bl-blog__slider-content {
        padding: 30px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .bl-blog__slider-content {
        padding: 30px;
    }
}

.bl-blog__slider-content span {
    height: 48px;
    line-height: 48px;
    padding: 0px 30px;
    background-color: var(--tp-common-white);
    color: var(--tp-common-black);
    display: inline-block;
    font-weight: 700;
    font-size: 18px;
    color: #292930;
    text-transform: uppercase;
    margin-bottom: 25px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .bl-blog__slider-content span {
        height: 40px;
        line-height: 40px;
        font-size: 14px;
    }
}

.bl-blog__section-title {
    font-weight: 500;
    font-size: 40px;
    letter-spacing: -0.03em;
    color: #292930;
    line-height: 1.1;
}

@media (max-width: 767px) {
    .bl-blog__section-title {
        font-size: 35px;
    }
}

.bl-blog__category {
    padding-bottom: 10px;
}

.bl-blog__category a {
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.085em;
    text-decoration-line: underline;
    color: #292930;
    margin-right: 20px;
}

.bl-blog__category a.last-child {
    color: black;
}

.bl-blog__video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.bl-blog__video-play-btn a {
    height: 90px;
    width: 90px;
    background-color: var(--tp-common-white);
    border-radius: 50%;
    text-align: center;
    line-height: 90px;
    display: inline-block;
    font-size: 24px;
    color: var(--tp-common-black);
    font-weight: 400;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .bl-blog__video-play-btn a {
        height: 70px;
        width: 70px;
        line-height: 70px;
        font-size: 17px;
    }
}

@media (max-width: 767px) {
    .bl-blog__video-play-btn a {
        height: 70px;
        width: 70px;
        line-height: 75px;
        font-size: 16px;
    }
}

.bl-blog__item:hover .bl-blog__img img {
    transform: scale(1.1) rotate(-3deg);
}

.bl-blog__img {
    margin-bottom: 20px;
}

.bl-blog__img img {
    transition: 0.3s;
}

.bl-blog__title-sm {
    font-weight: 500;
    font-size: 26px;
    letter-spacing: -0.03em;
    color: #292930;
    padding-bottom: 5px;
    line-height: 1.3;
}

.bl-blog__title-sm:hover {
    color: var(--tp-theme-1);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .bl-blog__title-sm {
        font-size: 20px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .bl-blog__title-sm {
        font-size: 18px;
    }
}

@media (max-width: 767px) {
    .bl-blog__title-sm {
        font-size: 20px;
    }

    .bl-blog__title-sm br {
        display: none;
    }
}

.bl-blog__meta span {
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    color: black;
    margin-right: 30px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .bl-blog__meta span {
        margin-right: 15px;
    }
}

@media (max-width: 767px) {
    .bl-blog__meta span {
        margin-right: 15px;
    }
}

.bl-blog__meta span i {
    font-style: normal;
    color: var(--tp-common-black);
}

.bl-blog__meta a {
    font-weight: 500;
    font-size: 12px;
    color: black;
    margin-right: 30px;
    text-transform: uppercase;
    transition: 0.3s;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .bl-blog__meta a {
        margin-right: 15px;
    }
}

@media (max-width: 767px) {
    .bl-blog__meta a {
        margin-right: 15px;
    }
}

.bl-blog__meta a:hover {
    color: var(--tp-common-black);
}

.bl-cta__slider-item {
    padding: 0px 100px;
    position: relative;
}

.bl-cta__slider-item::after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 3px solid #62626B;
}

.bl-cta__slider-item p {
    margin-bottom: 0;
    font-weight: 500;
    font-size: 18px;
    line-height: 23px;
    letter-spacing: -0.01em;
    text-transform: lowercase;
    color: #FFFFFF;
}

@media (max-width: 767px) {
    .bl-video-post__xs-space {
        padding-left: 0;
        padding-right: 0;
    }
}

.bl-sidebar__left-item {
    margin-bottom: 20px;
}

@media (max-width: 767px) {
    .bl-sidebar__left-item {
        flex-wrap: wrap;
        margin-bottom: 40px;
    }
}

.bl-sidebar__left-item .bl-blog__img {
    margin-right: 50px;
    margin-bottom: 0;
    flex: 0 0 auto;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .bl-sidebar__left-item .bl-blog__img {
        margin-right: 30px;
    }
}

@media (max-width: 767px) {
    .bl-sidebar__left-item .bl-blog__img {
        margin-right: 0;
    }

    .bl-sidebar__left-item .bl-blog__img img {
        margin-bottom: 20px;
        max-width: 100%;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .bl-sidebar__left-item .bl-blog__img {
        width: 100%;
    }

    .bl-sidebar__left-item .bl-blog__img img {
        width: 100%;
    }
}

.bl-sidebar__widget-title {
    font-weight: 500;
    font-size: 18px;
    line-height: 18px;
    letter-spacing: -0.02em;
    color: #000000;
    padding-bottom: 20px;
    margin-bottom: 30px;
    border-bottom: 1px solid #F0F0F0;
}

.bl-sidebar__social-icon i {
    font-size: 27px;
    color: var(--tp-common-white);
    font-weight: 700;
    margin-right: 20px;
}

.bl-sidebar__social-icon p {
    margin-bottom: 0;
    font-weight: 500;
    font-size: 16px;
    line-height: 14px;
    color: var(--tp-common-white);
}

.bl-sidebar__social-icon p span {
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    color: rgba(255, 255, 255, 0.5);
}

.bl-sidebar__social-item {
    background-color: #0A66C2;
    padding: 20px 30px;
}

.bl-sidebar__social-item.social-color-2 {
    background-color: #CD201F;
}

.bl-sidebar__social-item.social-color-3 {
    background-color: #1DA1F2;
}

.bl-sidebar__arrow-icon i {
    color: var(--tp-common-white);
    font-size: 20px;
    font-weight: 300;
    transform: translateY(4px);
}

.bl-sidebar__widget ul li {
    margin-bottom: 10px;
}

.bl-sidebar__recent-thumb {
    margin-right: 20px;
    flex: 0 0 auto;
}

.bl-sidebar__recent-meta span {
    font-weight: 300;
    font-size: 12px;
    line-height: 12px;
    color: #777777;
}

.bl-sidebar__recent-meta span i {
    margin-right: 6px;
}

.bl-sidebar__recent-title {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.02em;
    color: #292930;
}

.bl-sidebar__widget-wrapper {
    padding-left: 110px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .bl-sidebar__widget-wrapper {
        padding-left: 85px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .bl-sidebar__widget-wrapper {
        padding-left: 0px;
    }
}

.bl-sidebar__recent-postbox:hover .bl-sidebar__recent-thumb img {
    transform: scale(1.1) rotate(-3deg);
}

.bl-testimonial__thumb {
    position: relative;
}

.bl-testimonial__thumb span {
    height: 430px;
    width: 430px;
    border: 1px solid red;
    display: inline-block;
    position: absolute;
    top: 15px;
    left: 5px;
    z-index: -1;
    border: 1px dashed #DCD1D1;
    border-radius: 217.445px 206.337px 0px 217.445px;
    transform: matrix(-1, 0, 0, -1, 0, 0);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .bl-testimonial__thumb span {
        height: 383px;
        width: 370px;
        top: 5px;
        left: 7px;
    }
}

.bl-testimonial__thumb img {
    border-radius: 0 215px 215px 0;
    max-width: 100%;
}

.bl-testimonial__rating {
    margin-bottom: 25px;
}

.bl-testimonial__rating span {
    color: #FFB11B;
}

.bl-testimonial__text p {
    font-weight: 500;
    font-size: 28px;
    line-height: 50px;
    letter-spacing: -0.02em;
    color: #292930;
    padding-bottom: 10px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .bl-testimonial__text p {
        font-size: 25px;
        line-height: 42px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .bl-testimonial__text p {
        font-size: 20px;
        line-height: 37px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .bl-testimonial__text p {
        font-size: 25px;
        line-height: 40px;
    }
}

@media (max-width: 767px) {
    .bl-testimonial__text p {
        font-size: 18px;
        line-height: 28px;
    }
}

.bl-testimonial__text p span {
    color: #F2236E;
}

.bl-testimonial__slide-sm-avata {
    position: absolute;
    bottom: -125px;
    left: 50px;
}

@media (max-width: 767px) {
    .bl-testimonial__slide-sm-avata {
        bottom: -120px;
        left: -15px;
    }
}

.bl-testimonial__author-wrapper {
    margin-top: 20px;
}

.bl-testimonial__author-img {
    margin-right: 15px;
}

.bl-testimonial__author-info h4 {
    font-weight: 700;
    font-size: 18px;
    line-height: 23px;
    color: #000000;
    margin-bottom: 0;
    padding-right: 10px;
}

.bl-testimonial__author-info span {
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #445658;
}

.bl-testimonial__active {
    margin-left: 60px;
    padding-top: 60px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .bl-testimonial__active {
        margin-left: 40px;
        padding-top: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .bl-testimonial__active {
        margin-left: 0;
    }
}

.bl-testimonial__slider-wrapper {
    position: relative;
}

.bl-testimonial__slider-wrapper .testimonial-slider-dots {
    position: absolute;
    right: 14%;
    bottom: -2%;
    z-index: 99;
}

@media (max-width: 767px) {
    .bl-testimonial__slider-wrapper .testimonial-slider-dots {
        left: 0;
        bottom: -15%;
    }
}

.bl-testimonial__slider-wrapper .testimonial-slider-dots .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: var(--tp-common-black);
    width: 30px;
    border-radius: 30px;
    opacity: 1;
}

.bl-testimonial__slider-wrapper .testimonial-slider-dots .swiper-pagination-bullet {
    width: 30px;
    height: 8px;
    display: inline-block;
    border-radius: 30px;
    background-color: var(--tp-theme-1);
    margin: 0px 3px;
    opacity: 0.5;
    transition: 0.3s;
}

.bl-testimonial__border-bottom {
    border-bottom: 1px solid #E1E1E1;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .bl-testimonial__border-bottom {
        border: none;
    }
}

.bl-testimonial__wrapper {
    background-color: #fff;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .bl-newsletter__left-side {
        margin-bottom: 50px;
    }
}

@media (max-width: 767px) {
    .bl-newsletter__left-side {
        margin-bottom: 30px;
    }
}

.bl-newsletter__title-box i {
    height: 80px;
    width: 80px;
    background-color: var(--tp-common-black);
    color: var(--tp-common-white);
    border-radius: 50%;
    text-align: center;
    line-height: 80px;
    font-size: 30px;
    flex: 0 0 auto;
    margin-right: 30px;
}

@media (max-width: 767px) {
    .bl-newsletter__title-box i {
        margin-right: 20px;
    }
}

.bl-newsletter__title-sm {
    font-weight: 500;
    font-size: 40px;
    line-height: 50px;
    letter-spacing: -0.03em;
    color: #000000;
    padding-right: 80px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .bl-newsletter__title-sm {
        font-size: 34px;
        line-height: 40px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .bl-newsletter__title-sm {
        font-size: 30px;
        line-height: 37px;
        padding-right: 20px;
    }
}

@media (max-width: 767px) {
    .bl-newsletter__title-sm {
        font-size: 19px;
        line-height: 29px;
        padding-right: 0px;
    }
}

.bl-newsletter__input input {
    width: 100%;
    height: 60px;
    border-radius: 90px;
    border: 0;
    background: #F1F1F1;
    padding: 0 55px;
}

.bl-newsletter__input input::-webkit-input-placeholder {
    font-weight: 400;
    font-size: 14px;
    color: #999999;
}

.bl-newsletter__input input:-moz-placeholder {
    font-weight: 400;
    font-size: 14px;
    color: #999999;
}

.bl-newsletter__input input::-moz-placeholder {
    font-weight: 400;
    font-size: 14px;
    color: #999999;
}

.bl-newsletter__input input:-ms-input-placeholder {
    font-weight: 400;
    font-size: 14px;
    color: #999999;
}

.bl-newsletter__input button {
    background: #292930;
    border-radius: 0px 90px 90px 0px;
    height: 60px;
    padding: 0px 45px;
    position: absolute;
    top: 0;
    right: 0;
    font-weight: 700;
    font-size: 14px;
    line-height: 26px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #FFFFFF;
}

@media (max-width: 767px) {
    .bl-newsletter__input button {
        position: static;
        margin-top: 20px;
        border-radius: 90px;
    }
}

.bl-newsletter__input i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 30px;
    color: var(--tp-common-black);
    font-size: 16px;
}

.bl-newsletter__check-wrapper {
    padding-left: 30px;
}

@media (max-width: 767px) {
    .bl-newsletter__check-wrapper {
        padding-left: 0;
    }
}

.bl-newsletter__check-wrapper .form-check-label {
    font-size: 14px;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #999999;
}

.bl-newsletter__check-wrapper .form-check-input:checked {
    background-color: #1AEFA2;
    border-color: transparent;
}

.bl-newsletter__check-wrapper .form-check-input:focus {
    box-shadow: none;
}

.bl-newsletter__check-wrapper .form-check-input.form-check-input[type=checkbox] {
    border-radius: 2px;
    margin-top: 6px;
}

.bl-story__item .bl-blog__title-sm {
    font-weight: 500;
    font-size: 22px;
    line-height: 29px;
    letter-spacing: -0.03em;
    color: #292930;
}

.bl-instagram__slider-active {
    margin: 0px -230px;
}

@media (max-width: 767px) {
    .bl-instagram__slider-active {
        margin: 0px;
    }
}

.bl-instagram__slider-tag {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99;
}

@media (max-width: 767px) {
    .bl-instagram__slider-tag {
        width: 100%;
        right: 0;
        text-align: center;
    }
}

.bl-instagram__slider-tag span {
    font-weight: 700;
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #292930;
    background: #FFFFFF;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 70px;
    padding: 20px 70px;
}

@media (max-width: 767px) {
    .bl-instagram__slider-tag span {
        padding: 15px 30px;
    }
}

.bl-footer__widget-title {
    font-weight: 500;
    font-size: 30px;
    line-height: 39px;
    display: flex;
    align-items: center;
    letter-spacing: -2px;
    color: #FFFFFF;
    padding-bottom: 25px;
}

.bl-footer__social a {
    height: 45px;
    width: 45px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: inline-block;
    text-align: center;
    line-height: 45px;
    color: var(--tp-common-white);
    margin-right: 20px;
}

.bl-footer__social a:hover {
    background-color: var(--tp-theme-1);
    border-color: var(--tp-theme-1);
}

.bl-footer__text p {
    font-weight: 400;
    font-size: 18px;
    line-height: 29px;
    color: #D4D4D6;
    mix-blend-mode: normal;
    opacity: 0.8;
    padding-bottom: 30px;
    padding-right: 100px;
}

.bl-footer__address span {
    font-weight: 500;
    font-size: 18px;
    line-height: 29px;
    color: #FFFFFF;
    mix-blend-mode: normal;
    margin-right: 10px;
}

.bl-footer__address a {
    font-weight: 400;
    font-size: 18px;
    line-height: 29px;
    color: #B2B2B5;
}

.bl-footer__contact-info span {
    font-weight: 500;
    font-size: 18px;
    line-height: 29px;
    color: #FFFFFF;
    mix-blend-mode: normal;
    margin-right: 10px;
}

.bl-footer__contact-info a {
    font-weight: 400;
    font-size: 18px;
    line-height: 29px;
    color: #B2B2B5;
}

.bl-footer__contact {
    padding-bottom: 40px;
}

.bl-footer__company-info ul {
    margin-bottom: 30px;
}

.bl-footer__company-info ul li {
    margin-bottom: 20px;
}

.bl-footer__company-info ul li:last-child {
    margin-bottom: 0;
}

.bl-footer__company-info ul li a {
    font-weight: 400;
    font-size: 14px;
    position: relative;
    padding-left: 40px;
    font-size: 14px;
    color: #C6C6C6;
}

.bl-footer__company-info ul li a i {
    position: absolute;
    top: -1px;
    left: 0;
    font-size: 20px;
    color: var(--tp-common-white);
}

.bl-footer__widget-title-sm {
    font-weight: 500;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: -0.01em;
    color: #FFFFFF;
    padding-bottom: 30px;
}

.bl-footer__map iframe {
    height: 160px;
    width: 260px;
}

@media (max-width: 767px) {
    .bl-footer__map iframe {
        width: 100%;
    }
}

.bl-footer__recent-content .bl-sidebar__recent-title {
    color: var(--tp-common-white);
}

.bl-footer-2 {
    padding-left: 80px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .bl-footer-2 {
        padding-left: 60px;
    }
}

@media (max-width: 767px) {
    .bl-footer-2 {
        padding-left: 0px;
    }
}

.bl-footer-3 {
    padding-left: 80px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .bl-footer-3 {
        padding-left: 60px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .bl-footer-3 {
        padding-left: 0px;
    }
}

.bl-vedio__img video {
    object-fit: cover;
    height: 740px;
    width: 100%;
    display: block;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
    .bl-vedio__img video {
        height: 650px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .bl-vedio__img video {
        height: 500px;
    }
}

@media (max-width: 767px) {
    .bl-vedio__img video {
        height: 400px;
    }
}

.bl-vedio__play-btn button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    height: 140px;
    width: 140px;
    line-height: 140px;
    text-align: center;
    border-radius: 50%;
    background-color: var(--tp-common-white);
    display: inline-block;
    font-size: 30px;
    color: var(--tp-common-black);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
    .bl-vedio__play-btn button {
        height: 100px;
        width: 100px;
        line-height: 100px;
        font-size: 25px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .bl-vedio__play-btn button {
        height: 80px;
        width: 80px;
        line-height: 80px;
        font-size: 20px;
    }
}

.vid-play-btn .play {
    transform: scale(1) translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
}

.vid-play-btn .pause {
    transform: scale(0) translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
}

.vid-play-btn.open .play {
    transform: scale(0) translate(-50%, -50%);
}

.vid-play-btn.open .pause {
    transform: scale(1) translate(-50%, -50%);
}

.post-style .tp-blog-item {
    border: 0;
}

/*----------------------------------------*/
/*  23. blog css start
/*----------------------------------------*/
@media (max-width: 767px) {
    .tp-blog-section-box .tp-title {
        font-size: 30px;
    }
}

.tp-blog-item {
    padding: 40px;
    border: 1px solid #F1F3F6;
    border-radius: 20px;
    position: relative;
    z-index: 2;
    background-color: var(--tp-common-white);
}

@media (max-width: 767px) {
    .tp-blog-item {
        padding: 20px;
    }
}

.tp-blog-item:hover .tp-blog-img img {
    transform: scale(1.1);
}

.tp-blog-img {
    border-radius: 20px;
}

.tp-blog-img img {
    transition: 1s;
    border-radius: 20px;
    transform: scale(1);
}

.tp-blog-meta a {
    color: var(--tp-theme-1);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0px 30px;
    height: 40px;
    background-color: rgba(89, 86, 233, 0.1);
    border-radius: 10px;
    line-height: 40px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-blog-meta a {
        padding: 0 15px;
        font-size: 12px;
    }
}

@media (max-width: 767px) {
    .tp-blog-meta a {
        padding: 0 17px;
        font-size: 12px;
    }
}

.tp-blog-meta a:hover {
    background-color: var(--tp-theme-1);
    color: #fff;
}

.tp-blog-meta .tp-blog-meta-color {
    background-color: #F1F2FF;
    color: black;
}

.tp-blog-meta .tp-blog-meta-color:hover {
    background-color: rgba(89, 86, 233, 0.1);
    color: var(--tp-theme-1);
}

.tp-blog-info .tp-blog-title {
    color: var(--tp-common-black);
    font-size: 32px;
    font-weight: 500;
    margin-bottom: 15px;
}

.tp-blog-info .tp-blog-title:hover {
    color: var(--tp-theme-1);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-blog-info .tp-blog-title {
        font-size: 28px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-blog-info .tp-blog-title {
        font-size: 25px;
    }
}

@media (max-width: 767px) {
    .tp-blog-info .tp-blog-title {
        font-size: 28px;
    }
}

.tp-blog-info P {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.7;
    margin-bottom: 0;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-blog-info P {
        font-size: 17px;
    }
}

@media (max-width: 767px) {
    .tp-blog-info P {
        font-size: 17px;
    }
}

.tp-blog-border {
    border-right: 1px solid #E2E7EC;
}

@media (max-width: 767px) {
    .tp-blog-border {
        border-right: 0;
    }
}

.tp-blog-space {
    margin-left: 40px;
    margin-right: 40px;
}

@media (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-blog-space {
        margin-left: 0px;
        margin-right: 0px;
    }
}

.tp-blog-space .tp-blog-box::before {
    display: none;
}

.tp-blog-space .tp-blog-box .tp-blog-item {
    padding: 0;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-blog-area {
        padding-bottom: 40px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-blog-area {
        padding-bottom: 130px;
    }
}

.blog-grey-color {
    background-color: #F7F8FD;
    border: 0;
}

.blog-border-shape {
    position: relative;
}

.blog-border-shape::after {
    position: absolute;
    content: "";
    top: 50px;
    left: 0;
    width: 1px;
    background-color: #E2E7EC;
    height: 530px;
    margin-left: -15px;
}

.tp-blog-box {
    position: relative;
}

.tp-blog-box:before {
    content: "";
    bottom: 0;
    position: absolute;
    height: 90px;
    width: 85%;
    right: 0;
    left: 0;
    z-index: 1;
    display: inline-block;
    margin: 0 auto;
    border-radius: 30px;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    background: rgba(231, 235, 242, 0.85);
    filter: blur(45px);
}

.tp-blog-box:hover:before {
    opacity: 1;
    visibility: visible;
    bottom: -20px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .tp-blog-item-three {
        margin-bottom: 60px;
    }
}

.tp-blog-item-three__img {
    border-radius: 20px;
}

.tp-blog-item-three__img img {
    transform: scale(1);
    transition: 1s;
}

.tp-blog-item-three:hover img {
    transform: scale(1.1);
}

.tp-blog-item-three__button {
    line-height: 1;
}

.tp-blog-item-three__meta {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tp-blog-item-three__meta a {
    color: var(--tp-theme-1);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
}

.tp-blog-item-three__meta a:hover {
    color: var(--tp-common-black);
}

.tp-blog-item-three__meta .tp-meta-text {
    color: black;
    font-size: 14px;
    font-weight: 500;
    text-transform: capitalize;
    padding-left: 25px;
    margin-left: 25px;
    position: relative;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-blog-item-three__meta .tp-meta-text {
        padding-left: 14px;
        margin-left: 10px;
    }
}

.tp-blog-item-three__meta .tp-meta-text i {
    padding-right: 5px;
}

.tp-blog-item-three__meta .tp-meta-text::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 2px;
    height: 17px;
    background-color: #E8ECF2;
}

.tp-blog-item-three__meta .tp-meta-text span {
    font-style: normal;
    color: var(--tp-common-black);
}

.tp-blog-item-three__meta .tp-meta-text span:hover {
    color: var(--tp-theme-1);
}

.tp-blog-item-three__title p {
    font-size: 16px;
    font-weight: 400;
    color: black;
    line-height: 27px;
    padding-bottom: 5px;
    padding-right: 23px;
}

.tp-bp-title {
    color: var(--tp-common-black);
    font-size: 24px;
    font-weight: 500;
    padding-bottom: 10px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-bp-title {
        font-size: 22px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-bp-title {
        font-size: 20px;
    }
}

@media (max-width: 767px) {
    .tp-bp-title {
        font-size: 20px;
    }
}

.tp-bp-title:hover {
    color: var(--tp-theme-1);
}

.tp-blog-border {
    border-right: 1px solid #E2E5EA;
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .tp-blog-border {
        border: transparent;
    }
}

.tp-blog-item-four__img {
    border-radius: 20px;
}

.tp-blog-item-four__img img {
    border-radius: 20px;
    transform: scale(1);
    transition: 1s;
}

.tp-blog-item-four:hover .tp-blog-item-four__img img {
    transform: scale(1.1);
}

.tp-blog-item-four__meta a {
    color: var(--tp-theme-1);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 16px;
}



.tp-blog-item-four__meta a:hover {
    color: var(--tp-common-black);
}

.tp-blog-item-four__meta .tp-meta-text {
    color: black;
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
    padding-left: 45px;
    margin-left: 45px;
    position: relative;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-blog-item-four__meta .tp-meta-text {
        padding-left: 25px;
        margin-left: 25px;
    }
}

@media (max-width: 767px) {
    .tp-blog-item-four__meta .tp-meta-text {
        padding-left: 20px;
        margin-left: 20px;
    }
}

.tp-blog-item-four__meta .tp-meta-text i {
    padding-right: 5px;
}

.tp-blog-item-four__meta .tp-meta-text::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 2px;
    height: 17px;
    background-color: #E8ECF2;
}

.tp-blog-item-four__meta .tp-meta-text span {
    font-style: normal;
    color: var(--tp-common-black);
}

.tp-blog-item-four__meta .tp-meta-text span:hover {
    color: var(--tp-theme-1);
}

.tp-blog-item-four__title p {
    font-size: 16px;
    font-weight: 400;
    color: black;
    line-height: 27px;
    padding-bottom: 5px;
    padding-right: 23px;
}

.tp-blog-user-title {
    color: var(--tp-common-black);
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 30px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-blog-user-title {
        font-size: 35px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-blog-user-title {
        font-size: 30px;
    }
}

.tp-blog-user-title:hover {
    color: var(--tp-theme-1);
}

@media (max-width: 767px) {
    .tp-blog-right-side-sm {
        padding-right: 0;
        flex-wrap: wrap;
    }
}

.tp-blog-right-side-sm:hover .tp-blog-right-side-sm__img img {
    transform: scale(1.2);
}

.tp-blog-right-side-sm__img {
    border-radius: 20px;
    flex: 0 0 auto;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-blog-right-side-sm__img {
        marign-right: 20px;
    }
}

@media (max-width: 767px) {
    .tp-blog-right-side-sm__img {
        margin-bottom: 20px;
    }
}

@media (max-width: 767px) {
    .tp-blog-right-side-sm__img {
        width: 100%;
    }
}

.tp-blog-right-side-sm__img img {
    transform: scale(1);
    transition: 0.9s;
}

@media (max-width: 767px) {
    .tp-blog-right-side-sm__img img {
        width: 100%;
        margin-right: 20px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-blog-right-side-sm__meta {
        margin-right: 10px;
        margin-bottom: 10px;
    }
}

.tp-blog-right-side-sm__meta a {
    color: var(--tp-theme-1);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 16px;
    padding-right: 40px;
    font-size: 13px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-blog-right-side-sm__meta a {
        padding-right: 20px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-blog-right-side-sm__meta a {
        padding-right: 5px;
    }
}

.tp-blog-right-side-sm__meta a:hover {
    color: var(--tp-common-black);
}

.tp-blog-right-side-sm__meta .tp-meta-text {
    color: black;
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
    position: relative;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-blog-right-side-sm__meta .tp-meta-text {
        font-size: 13px;
    }
}

.tp-blog-right-side-sm__meta .tp-meta-text i {
    padding-right: 5px;
}

.tp-blog-right-side-sm__meta .tp-meta-text span {
    font-style: normal;
    color: var(--tp-common-black);
}

.tp-blog-right-side-sm__meta .tp-meta-text span:hover {
    color: var(--tp-theme-1);
}

.tp-blog-user-sm-title {
    color: var(--tp-common-black);
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -1px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-blog-user-sm-title {
        font-size: 23px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-blog-user-sm-title {
        font-size: 18px;
    }
}

@media (max-width: 767px) {
    .tp-blog-user-sm-title {
        font-size: 22px;
    }
}

.tp-blog-user-sm-title:hover {
    color: var(--tp-theme-1);
}

.circle-animation.blog-animation {
    bottom: -18%;
    left: 21%;
    border: 1px solid #E8ECF2;
    width: 537px;
    height: 537px;
    position: absolute;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .circle-animation.blog-animation {
        bottom: -11%;
        left: 9%;
        height: 400px;
        width: 400px;
    }
}

@media (max-width: 767px) {
    .circle-animation.blog-animation {
        bottom: -10%;
        left: 50%;
        height: 300px;
        width: 300px;
    }
}

.circle-animation span.tp-circle-3 {
    display: block;
    position: absolute;
    content: "";
    top: calc(50% - 1px);
    left: 50%;
    width: 50%;
    height: 1px;
    background: transparent;
    transform-origin: left;
    transform: scale(-1, 1);
    -webkit-animation: circle-animation2 13s linear infinite;
    -moz-animation: circle-animation2 13s linear infinite;
    -o-animation: circle-animation2 13s linear infinite;
    animation: circle-animation2 13s linear infinite;
}

.circle-animation span.tp-circle-3::after {
    position: absolute;
    content: "";
    width: 16px;
    height: 16px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    bottom: -25px;
    right: -7px;
    background-color: #FFADAD;
}

.tp-blg-sm-title {
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--black);
    /* padding-right: 40px; */
    transition: 0.3s;
}

.tpblog__info {
    width: 100%;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-blg-sm-title {
        padding-right: 20px;
    }
}

@media (max-width: 767px) {
    .tp-blg-sm-title {
        padding-right: 25px;
    }
}

.tp-blg-sm-title:hover {
    color: var(--tp-theme-1);
}

.tp-blg-lg-title {
    font-size: 24px;
    color: var(--tp-common-black);
    font-weight: 700;
    transition: 0.3s;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-blg-lg-title br {
        display: none;
    }
}

@media (max-width: 767px) {
    .tp-blg-lg-title {
        font-size: 22px;
    }
}

.tp-blg-lg-title a {
    background-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
    display: inline;
    background-size: 0% 1px, 0 1px;
    background-position: 100% 100%, 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.4s linear;
}

.tp-blg-lg-title a:hover {
    background-size: 0% 1px, 100% 1px;
}

.tpblog__item {
    padding-right: 35px;
    position: relative;
    z-index: 5;
}

@media (max-width: 767px) {
    .tpblog__item {
        flex-wrap: wrap;
        padding-right: 0;
    }
}

.tpblog:hover .tpblog__thumb img {
    transform: scale(1.1);
    transition: 0.9s;
}

.tpblog__thumb {
    margin-right: 35px;
    flex: 0 0 auto;
    border-radius: 20px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tpblog__thumb {
        padding-right: 20px;
    }
}

@media (max-width: 767px) {
    .tpblog__thumb {
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px;
    }
}

.tpblog__thumb img {
    transform: scale(1);
    width: 230px;
}

@media (max-width: 767px) {
    .tpblog__thumb img {
        width: 100%;
    }
}

.tpblog__meta {
    margin-bottom: 15px;
    justify-content: space-between;
}

@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 767px) {
    .tpblog__meta {
        margin-bottom: 15px;
    }
}

.tpblog__meta span {
    font-size: 12px;
    color: rgba(41, 41, 48, 0.6);
    font-weight: 700;
    line-height: 1;
    transition: 0.3s;
}

.tpblog__meta span:hover {
    color: var(--tp-theme-1);
}

.tp-blog-bs-space {
    margin-left: 130px;
    margin-right: 130px;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .tp-blog-bs-space {
        margin-left: 0px;
        margin-right: 0px;
    }
}

.bpblog__img img {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    transform: scale(1);
    transition: 0.9s;
}

.bpblog:hover .bpblog__img img {
    transform: scale(1.1);
}

.bpblog__content {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    background-color: var(--tp-common-white);
    padding: 35px 20px;
}

.bpblog__content span {
    font-size: 12px;
    font-weight: 500;
    color: var(--tp-common-black);
    background-color: rgba(137, 206, 251, 0.2);
    height: 24px;
    padding: 0px 15px;
    text-transform: uppercase;
    display: inline-block;
    transition: 0.3s;
    margin-bottom: 20px;
    border-radius: 3px;
}

.bpblog__content span:hover {
    color: var(--tp-common-black);
    background-color: var(--tp-theme-primary);
}

.bpblog__content p {
    color: #68666E;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
}

@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 767px) {
    .bpblog__content p {
        font-size: 14px;
    }

    .bpblog__content p br {
        display: none;
    }
}

.ce-blog-shape {
    position: absolute;
    right: 40px;
    top: 161px;
    animation: rotate2 15s linear infinite;
}

.bp-blog-title {
    font-size: 22px;
    font-weight: 500;
    color: var(--tp-common-black);
    line-height: 1.4;
    display: inline-block;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .bp-blog-title {
        font-size: 20px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .bp-blog-title {
        font-size: 16px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .bp-blog-title {
        font-size: 18px;
    }
}

@media (max-width: 767px) {
    .bp-blog-title {
        font-size: 20px;
    }
}

.bp-blog-title:hover {
    color: var(--tp-theme-1);
}

.bs-blog-shape-1 {
    position: absolute;
    left: 75px;
    bottom: 190px;
    animation: moving 5s linear infinite;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px) {
    .bs-blog-shape-1 {
        left: 75px;
        bottom: 50px;
    }
}

.bs-blog-shape-2 {
    position: absolute;
    right: 130px;
    top: 136px;
    animation: rotate2 5s linear infinite;
}

@media (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
    .postbox__wrapper {
        padding-right: 0px;
    }
}

.postbox__thumb {
    margin-bottom: -2px;
}

.postbox__thumb .play-btn {
    position: absolute;
    top: calc(50% - 20px);
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 1;
    height: 90px;
    width: 90px;
    background-color: var(--tp-common-white);
    text-align: center;
    line-height: 90px;
    color: var(--tp-theme-1);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.postbox__thumb .play-btn:hover {
    background-color: var(--tp-theme-primary);
    color: var(--tp-common-black);
}

.postbox__thumb img {
    border-radius: 20px;
    margin-bottom: 40px;
}

.postbox__audio {
    height: 100%;
    width: 100%;
}

.postbox__audio iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.postbox__item-single:hover {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
}

.postbox__content p img {
    margin-bottom: 30px;
    max-width: 100%;
}

.postbox__content a {
    color: #0A66C2;
}

.postbox__content-single {
    padding-left: 0;
    padding-right: 0;
    border: none;
}

.postbox__title {
    font-size: 36px;
    font-weight: 700;
    color: var(--tp-common-black);
    margin-bottom: 20px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .postbox__title {
        font-size: 33px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .postbox__title {
        font-size: 28px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .postbox__title {
        font-size: 33px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .postbox__title {
        font-size: 30px;
    }
}

@media (max-width: 767px) {
    .postbox__title {
        font-size: 25px;
    }
}

.postbox__title a:hover {
    color: var(--tp-theme-1);
}

.postbox__meta {
    margin-bottom: 10px;
}

.postbox__meta span {
    font-size: 14px;
    font-weight: 700;
    color: black;
    text-transform: uppercase;
    display: inline-block;
    margin-right: 30px;
}

.postbox__meta span:last-child {
    margin-right: 0;
}

.postbox__meta span i {
    color: var(--tp-common-black);
    margin-right: 3px;
    font-weight: 500;
}

.postbox__meta span:hover {
    color: var(--tp-theme-1);
}

.postbox__meta span:hover i {
    color: var(--tp-theme-1);
}

.postbox__text img {
    max-width: 100%;
}

.postbox__text p {
    margin-bottom: 28px;
    font-size: 17px;
    color: #0b0b0b;
}

.postbox__text li {
    list-style-type: circle;
    color: #0b0b0b;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .postbox__text p {
        font-size: 16px;
    }
}

.postbox__text-single p {
    margin-bottom: 15px;
}

.postbox__slider button {
    position: absolute;
    left: 50px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 1;
    font-size: 30px;
    color: var(--tp-common-white);
}

.postbox__slider button.slick-next {
    left: auto;
    right: 50px;
}

@media (max-width: 767px) {
    .postbox__slider button.slick-next {
        right: 10px;
    }
}

@media (max-width: 767px) {
    .postbox__slider button {
        left: 10px;
    }
}

.postbox__comment ul li {
    margin-bottom: 30px;
    list-style: none;
}

.postbox__comment ul li.children {
    margin-left: 100px;
}

@media (max-width: 767px) {
    .postbox__comment ul li.children {
        margin-left: 15px;
    }
}

.postbox__comment-form {
    margin-bottom: 20px;
    padding: 40px 30px;
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.09);
    background: var(--tp-common-white);
}

.postbox__comment-form-title {
    font-size: 20px;
    font-weight: 500;
    color: var(--tp-common-black);
    margin-bottom: 40px;
}

.postbox__comment-input {
    position: relative;
    margin-bottom: 20px;
}

.postbox__comment-input span {
    font-weight: 600;
    color: var(--tp-common-black);
    margin-bottom: 12px;
    display: block;
}

.postbox__comment-input input, .postbox__comment-input textarea {
    height: 55px;
    padding: 0 20px;
    width: 100%;
    font-size: 14px;
    color: var(--tp-common-black);
    outline: none;
    border: 1px solid #f7f7f7;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -o-border-radius: 7px;
    -ms-border-radius: 7px;
    border-radius: 7px;
}

.postbox__comment-input textarea {
    height: 175px;
    resize: none;
    padding-top: 20px;
    padding-bottom: 20px;
}

.postbox__comment-title {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 35px;
    color: var(--tp-common-black);
}

.postbox__comment-avater img {
    width: 50px;
    height: 50px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
}

.postbox__comment-name {
    margin-bottom: 5px;
}

.postbox__comment-name h5 {
    font-size: 16px;
    line-height: 1;
    font-weight: 500;
    color: var(--tp-common-black);
}

.postbox__comment-name span {
    font-size: 14px;
    color: #8A879F;
    text-transform: uppercase;
    letter-spacing: 1px;
}

@media (max-width: 767px) {
    .postbox__comment-text {
        margin-left: 0;
        margin-top: 15px;
    }
}

.postbox__comment-text p {
    font-size: 16px;
    color: var(--tp-text-11);
    margin-bottom: 15px;
}

@media (max-width: 767px) {
    .postbox__comment-text p br {
        display: none;
    }
}

.postbox__comment-reply {
    margin-top: 10px;
}

.postbox__comment-reply a {
    display: inline-block;
    color: var(--tp-theme-1);
    background: rgba(61, 108, 231, 0.1);
    height: 22px;
    line-height: 22px;
    padding: 0 10px;
    font-weight: 500;
    font-size: 14px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
}

.postbox__comment-reply a:hover {
    color: var(--tp-common-white);
    background: var(--tp-theme-1);
}

.postbox__comment-agree {
    padding-left: 5px;
}

.postbox__comment-agree input {
    margin: 0;
    appearance: none;
    -moz-appearance: none;
    display: block;
    width: 14px;
    height: 14px;
    background: var(--tp-common-white);
    border: 1px solid #b9bac1;
    outline: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    flex: 0 0 auto;
    -webkit-transform: translateY(-1px);
    -moz-transform: translateY(-1px);
    -ms-transform: translateY(-1px);
    -o-transform: translateY(-1px);
    transform: translateY(-1px);
}

.postbox__comment-agree input:checked {
    position: relative;
    background-color: var(--tp-theme-1);
    border-color: transparent;
}

.postbox__comment-agree input:checked::after {
    box-sizing: border-box;
    content: "\f00c";
    position: absolute;
    font-size: 10px;
    color: var(--tp-common-white);
    top: 46%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.postbox__comment-agree input:hover {
    cursor: pointer;
}

.postbox__comment-agree label {
    padding-left: 8px;
    color: var(--tp-text-1);
    line-height: 1;
}

.postbox__comment-agree label a {
    color: var(--tp-common-black);
    font-weight: 600;
    padding-left: 4px;
}

.postbox__comment-agree label a:hover {
    color: var(--tp-theme-1);
}

.postbox__comment-agree label:hover {
    cursor: pointer;
}

.postbox__tag span {
    font-size: 20px;
    margin-bottom: 17px;
    color: var(--tp-common-black);
    margin-right: 30px;
    font-weight: 500;
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .postbox__social {
        margin-top: 40px;
    }
}

.postbox__social span {
    font-size: 20px;
    color: var(--tp-common-black);
    font-weight: 500;
}

.postbox__social a {
    font-size: 15px;
    padding-left: 30px;
}

.postbox__social a .tp-linkedin {
    color: #0E6BA1;
}

.postbox__social a .tp-pinterest {
    color: #D70220;
}

.postbox__social a .tp-facebook {
    color: #0E6BA1;
}

.postbox__social a .tp-twitter {
    color: #36B6ED;
}

.postbox__social-wrapper {
    border-bottom: 1px solid #ECEEF3;
    padding-bottom: 40px;
    margin-bottom: 40px;
}

.postbox__comment-info {
    flex: 0 0 auto;
}

.rc__post ul li:not(:last-child) {
    margin-bottom: 15px;
}

.rc__post-thumb {
    flex: 0 0 auto;
}

.textFile {
    color: #0B0B0B;
}

.rc__post-thumb img {
    height: 80px;
    flex: 0 0 auto;
    border-radius: 10px;
}

.rc__post-title {
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 500;
    color: var(--tp-common-black);
    line-height: 22px;
}

.rc__post-title a:hover {
    color: var(--tp-theme-1);
}

.rc__meta span {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 500;
    color: #8A879F;
}

.sidebar__wrapper {
    padding-left: 40px;

}

@media (max-width: 767px) {
    .sidebar__wrapper {
        display: none;
    }
}

@media (max-width: 992px) {
    .sidebar__wrapper {
        display: none;
    }
}

/* @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .sidebar__wrapper {
    padding-left: 0;
    padding-top: 50px;
  }
} */
.sidebar__widget {
    padding: 40px;
    border: 1px solid #F6F6F6;
}

.sidebar__widget-title {
    font-size: 22px;
    margin-bottom: 30px;
    color: var(--tp-common-black);
    font-weight: 500;
}

.sidebar__widget:last-child-title {
    border-bottom: 0;
}

.sidebar__widget ul li {
    list-style: none;
}

.sidebar__widget ul li:last-child {
    padding-bottom: 0;
}

.sidebar__widget ul li:last-child a {
    margin-bottom: 0;
}

.sidebar__widget ul li:first-child {
    padding-top: 0;
}

.sidebar__widget ul li a {
    color: #777777;
    display: block;
    font-weight: 500;
    text-transform: capitalize;
    font-size: 14px;
    border: 1px solid #F2F5FA;
    margin-bottom: 10px;
    padding: 7px 15px;
}

.sidebar__widget ul li span {
    float: right;
    color: var(--tp-common-black);
    font-size: 16px;
    font-weight: 600;
}

.sidebar__widget ul li:hover a {
    color: var(--tp-theme-1);
}

.sidebar__widget ul li:hover span {
    color: var(--tp-theme-1);
}

.sidebar__search {
    position: relative;
}

.sidebar__search input {
    width: 100%;
    height: 60px;
    line-height: 60px;
    background: var(--tp-grey-1);
    padding: 0 25px;
    text-transform: capitalize;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -o-border-radius: 7px;
    -ms-border-radius: 7px;
    border-radius: 7px;
    border: 2px solid var(--tp-grey-1);
    outline: none;
    padding-top: 3px;
    padding-right: 80px;
}

.sidebar__search input::placeholder {
    color: #777777;
}

.sidebar__search button {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    padding: 0 24px;
    color: #fff;
    line-height: 60px;
    -webkit-border-radius: 0 7px 7px 0;
    -moz-border-radius: 0 7px 7px 0;
    -o-border-radius: 0 7px 7px 0;
    -ms-border-radius: 0 7px 7px 0;
    border-radius: 0 7px 7px 0;
    color: var(--tp-common-black);
}

.sidebar__banner-content {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
    background: var(--tp-theme-1);
}

.sidebar__banner-content h4 {
    padding: 15px 20px;
    font-size: 24px;
    color: var(--tp-common-white);
    text-transform: uppercase;
    margin-bottom: 0;
}

.tagcloud a {
    border: 1px solid #F2F4F6;
    color: #C1C1C1;
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    padding: 10px 25px;
    margin-bottom: 8px;
    margin-right: 10px;
    text-transform: uppercase;
    border-radius: 5px;
}

.tagcloud a:hover {
    background: var(--tp-theme-primary);
    color: var(--tp-common-black);
}

blockquote {
    background: var(--tp-grey-1);
    padding: 35px 50px;
    margin-bottom: 35px;
}

@media (max-width: 767px) {
    blockquote {
        padding-left: 15px;
        padding-right: 15px;
    }
}

blockquote p {
    line-height: 1.5;
    font-size: 20px;
    color: #57565e;
    font-weight: 400;
}

blockquote cite {
    font-size: 18px;
    display: block;
    margin-top: 10px;
    color: #070337;
    font-style: inherit;
    font-weight: 600;
    position: relative;
}

blockquote cite::before {
    content: "";
    font-size: 28px;
    color: var(--tp-theme-1);
    padding-bottom: 0px;
    display: inline-block;
    background: var(--tp-theme-1);
    height: 2px;
    width: 40px;
    font-weight: 400;
    text-align: center;
    top: -4px;
    margin-right: 10px;
    position: relative;
}

.blog-post-slider-active {
    position: relative;
    margin-bottom: 40px;
}

.blog-post-slider-active .swiper-slide img {
    border-radius: 20px;
    width: 100%;
}

.blog-nav-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    z-index: 5;
}

.blog-nav-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    z-index: 5;
}

.blog-post-slider-nav .nav-button {
    height: 60px;
    width: 60px;
    background-color: var(--tp-common-white);
    text-align: center;
    line-height: 60px;
    font-size: 24px;
    color: var(--tp-common-black);
}

/*----------------------------------------*/
/*  24. news css start
/*----------------------------------------*/
.tp-news-letter-box {
    background-color: var(--tp-theme-1);
    padding-top: 82px;
    padding-bottom: 82px;
    border-radius: 20px;
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
}

@media (max-width: 767px) {
    .tp-news-letter-box {
        background-size: cover;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-news-button .tp-btn-yellow {
        padding: 0 30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-news-button .tp-btn-yellow {
        height: 50px;
        line-height: 50px;
        padding: 0 25px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-news-wrapper {
        padding-left: 35px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-news-wrapper {
        padding-left: 25px;
    }
}

@media (max-width: 767px) {
    .tp-news-wrapper {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (max-width: 767px) {
    .tp-news-sub-wrapper {
        padding-right: 0px;
    }
}

.tp-news-shape-img {
    position: absolute;
    bottom: -22px;
    left: -60px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-news-shape-img {
        left: -35px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-news-shape-img {
        left: -25px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-news-shape-img {
        bottom: -55px;
        left: -33px;
    }
}

@media (max-width: 767px) {
    .tp-news-shape-img {
        left: -16px;
    }
}

@media (max-width: 767px) {
    .tp-news-letter-img {
        padding-top: 30px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-news-letter-img img {
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .tp-news-letter-img img {
        max-width: 100%;
        padding-top: 25px;
    }
}

.tp-newsletter-left-img {
    max-width: inherit;
    margin-left: -100px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-newsletter-left-img {
        margin-left: -30px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-newsletter-left-img {
        margin-left: -30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-newsletter-left-img {
        margin-left: -30px;
    }
}

@media (max-width: 767px) {
    .tp-newsletter-left-img {
        margin-left: 0px;
        padding-top: 0;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-newsletter-left-img img {
        max-width: 100%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-newsletter-left-img img {
        max-width: 100%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-newsletter-left-img img {
        max-width: 110%;
    }
}

@media (max-width: 767px) {
    .tp-newsletter-left-img img {
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .tp-news-letter-section-box-two {
        padding-bottom: 100px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-news-letter-section-box .tp-title {
        font-size: 45px;
    }
}

@media (max-width: 767px) {
    .tp-news-letter-section-box .tp-title {
        font-size: 30px;
    }
}

.news-shape-img {
    position: absolute;
    top: -50px;
    left: 57px;
    animation: zoom2 5s infinite;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .news-shape-img {
        left: 0px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .news-shape-img {
        left: -33px;
    }
}

@media (max-width: 767px) {
    .news-shape-img {
        left: -61px;
    }
}

@media (max-width: 767px) {
    .tp-news-button .tp-btn-lg-yellow {
        margin-bottom: 20px;
    }
}

/*----------------------------------------*/
/*  25. newsletter css start
/*----------------------------------------*/
.tp-suscribe-newslatter {
    background-repeat: no-repeat;
}

.tp-news-letter-bg {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.tp-news-title {
    font-size: 45px;
    font-weight: 700;
    color: var(--tp-common-white);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-news-title {
        font-size: 40px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-news-title {
        margin-bottom: 30px;
    }
}

@media (max-width: 767px) {
    .tp-news-title {
        font-size: 29px;
        margin-bottom: 20px;
    }
}

.tp-submit-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
}

@media (max-width: 767px) {
    .tp-submit-button {
        position: relative;
        top: 0;
        transform: inherit;
    }
}

.tp-news-button input {
    height: 80px;
    width: 100%;
    border: 0;
    background-color: #6461FF;
    box-shadow: 0px, 14px rgba(35, 33, 142, 0.04);
    border-radius: 5px;
    font-weight: 400;
    font-size: 14px;
    color: var(--tp-common-white);
    padding-left: 30px;
    padding-right: 240px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-news-button input {
        padding-right: 200px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-news-button input {
        height: 60px;
    }
}

@media (max-width: 767px) {
    .tp-news-button input {
        padding-left: 20px;
        padding-right: 10px;
        height: 60px;
        margin-bottom: 20px;
    }
}

.tp-news-button input::placeholder {
    color: var(--tp-common-white);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-news-sub-wrapper {
        margin-bottom: 70px;
    }
}

/*----------------------------------------*/
/*  26. contact css start
/*----------------------------------------*/
.tp-contact-title {
    margin-bottom: 50px;
    color: var(--tp-common-black);
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -1px;
    display: flex;
    align-items: center;
}

.tp-contact-title svg {
    margin-right: 10px;
    flex: 0 0 auto;
}

.tp-contact-top{
    
    display: flex ;
    padding: 0 80px;
    gap: 30px;
}

.tp-contact-top div{
    width: 50%;
}

.tp-contact-top div:first-child{
    font-size: 60px;
    line-height: 60px;
    font-weight: 700;
}


.tp-contact-top div:last-child p{
    color: white;
    font-size: 17px;
}

.tp-contact-top div:last-child p a {
text-decoration: underline;
}






.tpcontact__form input {
    width: 100%;

    padding: 13px 25px 11px 25px;
    border: none;
    border-radius: 10px;
    color: black;
    margin-bottom: 20px;
}

.tpcontact__form select {
    width: 100%;
    height: 60px;
    padding-left: 20px;
    border: none;
    border-radius: 10px;
    color: black;
    margin-bottom: 20px;
    background-color: #FFFFFF;
}

.tpcontact__form input::placeholder {
    font-size: 15px;
    color: black;
}

.tpcontact__form  #services{
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
    font-size: 14px;
text-align: center;
line-height: 20px;
}

.tpcontact__form #services .single-service{
    background-color: var(--tp-theme-1);
    padding: 9px 16px 7px ;
    letter-spacing: 1.3px;
    font-weight: 600;
cursor: pointer;
transition: all 0.3s;
    border-radius: 20px;
}   

.tpcontact__form #services .single-service:hover{
    background-color: hsl(167, 59%, 20%)

}

.tpcontact__form textarea {
    width: 100%;
    resize: none;
    border: none;
    height: 170px;
    display: inline-block;
    margin-bottom: 20px;
    border-radius: 16px;
    padding  : 16px 28px 28px 28px;
    color: black;
}

.tpcontact__form textarea:focus {
    outline: none;
}

.tpcontact__form textarea::placeholder {
    font-size: 15px;
    color: black;
}

.tpcontact__form-2 {
    padding-left: 80px;
}



.our-values-heading{
    font-size: 52px;
    font-weight: 900;
    line-height: 48px;
}




@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tpcontact__form-2 {
        padding-left: 40px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .tpcontact__form-2 {
        padding-left: 0px;
        margin-top: 40px;
    }
}

.tpcontact__form-2 input {
    background-color: #e2f1ed;
    height: 65px;
    padding-right: 20px;
}

.tpcontact__form-2 textarea {
    background-color: #e2f1ed;
}

.tpcontact__form-3 {
    background-color: transparent;
}

.tpcontact__form-3 input {
    border: 1px solid #000000;
}

.tpcontact__form-3 textarea {
    border: 1px solid #000000;
}

.tpcontact__form-3 select {
    border: 1px solid #000000;
}

.tp-border-left {
    border-left: 1px solid rgba(41, 41, 48, 0.1);
    padding-left: 100px;
    margin-left: 20px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-border-left {
        border-left: transparent;
        padding-left: 0px;
        margin-left: 0px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .tp-border-left {
        border-left: transparent;
        padding-left: 0px;
        margin-left: 0px;
        margin-top: 60px;
    }
}

.tp-contact-thumb img {
    max-width: 100%;
}

.tp-contact-info span {
    color: black;
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    padding-right: 33px;
}

.tp-contact-info span:hover {
    color: var(--tp-theme-1);
}

.contact-space-40 {
    margin-left: 40px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .contact-space-40 {
        margin-left: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .contact-space-40 {
        margin-bottom: 70px;
        display: none;
    }
}

@media (max-width: 767px) {
    .contact-space-40 {
        margin-left: 0;
        margin-bottom: 70px;
        display: none;
    }
}

.contact-title {
    font-weight: 700;
    color: var(--tp-common-black);
    font-size: 22px;
}

.tp-contact-big-title {
    font-size: 65px;
    font-weight: 700;
    color: var(--tp-common-black);
    margin-bottom: 60px;
}

.login-space {
    padding-top: 130px;
    padding-bottom: 130px;

}

@media (max-width: 768px) {
    .login-svg {
        display: none !important;
    }
}

.table-of-contents-item {
    color: black !important; /* Change the color to your desired color */
    /* Add more styles as needed */
}

/* .toc-container {
  position: absolute;
  top: 0;
  right: 0;
  width: 250px; /* Adjust the width as needed */
/* Add more styles as needed
} */
.tp-login-title {
    font-size: 35px;
    font-weight: 700;
    color: var(--tp-common-black);
    padding-bottom: 30px;
}

@media (max-width: 767px) {
    .tp-login-title {
        font-size: 30px;
    }
}

.tp-login-thumb img {
    max-width: 100%;
}

.tplogin {
    width: 420px;
}

.tplogin__form .tp-mail {
    margin-bottom: 15px;
}

.tplogin__form .tp-mail label {
    color: var(--tp-common-black);
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}

.tplogin__form .tp-mail input {
    height: 60px;
    width: 100%;
    background-color: var(--tp-grey-1);
    border: 0;
    border-radius: 5px;
    padding: 0px 20px;
    color: #B2B0C1;
}

.tplogin__form .tp-mail input::placeholder {
    font-size: 14px;
    font-weight: 400;
    color: #B2B0C1;
}

.tplogin__form .tp-password {
    padding-bottom: 30px;
}

.tplogin__form .tp-password label {
    color: var(--tp-common-black);
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}

.tplogin__form .tp-password input {
    width: 100%;
    height: 60px;
    background-color: var(--tp-grey-1);
    border: 0;
    border-radius: 5px;
    padding: 0px 20px;
    color: #B2B0C1;
}

.tplogin__form .tp-password input::placeholder {
    font-size: 14px;
    font-weight: 400;
    color: #B2B0C1;
}

.tplogin__form .tp-number {
    padding-bottom: 10px;
}

.tplogin__form .tp-number label {
    color: var(--tp-common-black);
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}

.tplogin__form .tp-number input {
    width: 100%;
    height: 60px;
    background-color: var(--tp-grey-1);
    border: 0;
    border-radius: 5px;
    padding: 0px 20px;
    color: #B2B0C1;
}

.tplogin__form .tp-number input::placeholder {
    font-size: 14px;
    font-weight: 400;
    color: #B2B0C1;
}

.tplogin__form .tp-forgot-password {
    margin-bottom: 40px;
}

.tplogin__form .tp-forgot-password .checkbox label {
    color: var(--tp-common-black);
    font-size: 14px;
    font-weight: 500;
}

.tplogin__form .tp-forgot-password .forgot a {
    color: #007AFF;
    font-size: 14px;
    font-weight: 500;
}

.tplogin__form .tp-signup {
    margin-top: 20px;
}

.tplogin__form .tp-signup .account a {
    color: var(--tp-common-black);
    font-size: 14px;
    font-weight: 500;
}

.tplogin__form .tp-signup .signin a {
    color: #007AFF;
    font-size: 14px;
    font-weight: 500;
}

@media (max-width: 767px) {
    .tp-login-wrapper {
        padding-left: 20px;
        padding-right: 20px;
    }
}

.tp-404-thumb img {
    max-width: 100%;
}

.tp-404-circle {
    position: relative;
}

.tp-404-circle::after {
    top: -170px;
    left: 0;
    right: 0;
    margin: 0 auto;
    border-radius: 50%;
    position: absolute;
    content: "";
    width: 1200px;
    height: 1200px;
    background-color: var(--tp-common-white);
    display: inline-block;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-404-circle::after {
        width: 750px;
        height: 750px;
        top: 55px;
    }
}

@media (max-width: 767px) {
    .tp-404-circle::after {
        width: 320px;
        height: 320px;
        top: 155px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .tp-404-circle::after {
        width: 550px;
        height: 550px;
        top: 96px;
    }
}

/*----------------------------------------*/
/*  27. footer css start
/*----------------------------------------*/
.tp-footer-space {
    padding-top: 230px;
}

@media (max-width: 767px) {
    .tp-footer-space {
        padding-top: 110px;
    }
}

.tp-footer-title {
    font-size: 35px;
    color: var(--tp-common-white);
    font-weight: 500;
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
    .tp-footer-title br {
        display: none;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-footer-title {
        font-size: 25px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-footer-title {
        font-size: 24px;
    }
}

@media (max-width: 767px) {
    .tp-footer-title {
        font-size: 28px;
        margin-bottom: 30px;
    }
}

.tp-copyright-bottom {
    padding-top: 40px;
}

@media (max-width: 767px) {
    .tp-copyright-text {
        margin-bottom: 10px;
    }
}

.tp-copyright-text p {
    color: var(--tp-common-white);
    font-weight: 400;
}

@media (max-width: 767px) {
    .tp-copyright-text p {
        font-size: 15px;
    }
}

.tp-copyright-right span {
    color: var(--tp-common-white);
    font-weight: 400;
    font-size: 400;
    padding-left: 45px;
}

.tp-copyright-right span:hover {
    color: var(--tp-theme-primary);
}

.tp-copyright-box {
    border-top: 1px solid #383841;
    border-bottom: 1px solid #383841;
    padding-top: 30px;
    padding-bottom: 30px;
}

.tp-copyright-social a {
    color: var(--tp-common-white);
    font-size: 18px;
    font-weight: 400;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    border: 1px solid #383841;
    display: inline-block;
    text-align: center;
    line-height: 60px;
    margin-left: 20px;
}

.tp-copyright-social a:hover {
    background-color: var(--tp-theme-1);
    border-color: var(--tp-theme-1);
    color: var(--tp-common-white);
}

@media (max-width: 767px) {
    .tp-copyright-social a {
        margin-left: 0;
        margin-right: 10px;
    }
}

.footer-widget-info {
    border-bottom: 1px solid #EBECEF;
}

.footer-widget-info .tp-footer-title {
    font-size: 50px;
    font-weight: 700;
    color: var(--tp-common-black);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .footer-widget-info .tp-footer-title {
        font-size: 44px;
    }
}

@media (max-width: 767px) {
    .footer-widget-info .tp-footer-title {
        font-size: 29px;
    }
}

.footer-widget-info p {
    font-size: 18px;
    font-weight: 400;
    line-height: 29px;
    max-width: 625px;
    margin: 0 auto;
    padding-bottom: 35px;
}

@media (max-width: 767px) {
    .footer-widget-info p {
        font-size: 14px;
    }
}

.footer-widget-info .right-receved {
    font-size: 16px;
    font-weight: 400;
    color: var(--tp-common-black);
}

.tp-copyright-social-two a {
    color: var(--tp-common-black);
    border-color: #EDEEF1;
    font-size: 18px;
    font-weight: 400;
    height: 45px;
    width: 45px;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    line-height: 45px;
    margin-left: 20px;
}

@media (max-width: 767px) {
    .tp-copyright-social-two a {
        margin-left: 0;
        margin-top: 20px;
    }
}

.tp-cpoyright-menu a {
    font-size: 16px;
    font-weight: 400;
    color: var(--tp-common-black);
    padding: 0px 20px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-cpoyright-menu a {
        padding-left: 0;
    }
}

@media (max-width: 767px) {
    .tp-cpoyright-menu a {
        padding: 0px 10px;
    }
}

.tp-cpoyright-menu a:hover {
    color: var(--tp-theme-1);
}

.tp-footer-widget {
    /*margin-bottom: 30px;*/
    position: relative;
    z-index: 2;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-footer-widget {
        margin-bottom: 70px;
        padding-left: 0;
    }
}

@media (max-width: 767px) {
    .tp-footer-widget {
        padding-left: 0px;
        margin-bottom: 45px;
    }
}

@media (max-width: 767px) {
    .tp-company {
        padding-left: 22px;
        /* margin-bottom: 45px; */
    }
}

.tp-footer-widget__logo img {
    width: 180px;
}

@media (max-width: 767px) {
    .tp-footer-widget__logo img {
        width: 80px;
    }
}

@media (max-width: 767px) {
    .footer {
        padding-top: 0px !important;
    }
}

.tp-footer-widget__text p {
    font-size: 15px;
    font-weight: 400;
    color: black;
    line-height: 26px;
    margin-top: 5px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-footer-widget__text p {
        font-size: 14px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-footer-widget__text p {
        margin-right: 30px;
    }
}

.tp-footer-widget__social-link a {
    height: 44px;
    width: 44px;
    border-radius: 50%;
    line-height: 44px;
    text-align: center;
    display: inline-block;
    color: #9E9EA2;
    font-size: 12px;
    margin-right: 10px;
}

/*.tp-footer-widget__social-link a:hover {*/
/*  background-color: var(--tp-theme-1);*/
/*  color: var(--tp-common-white);*/
/*}*/
/*.tp-footer-widget__social-link-2 a {*/
/*  background-color: var(--tp-grey-1);*/
/*}*/
.tp-footer-widget .footer-title {
    font-size: 20px;
    font-weight: 500;
    color: var(--tp-common-white);
}

.tp-footer-widget__list ul li {
    margin-bottom: 8px;
}

.tp-footer-widget__list ul li a {
    font-size: 15px;
    font-weight: 400;
    color: black;
}

.tp-footer-widget__list ul li:hover a {
    color: var(--tp-theme-1);
    font-weight: 500;
}

.tp-footer-widget__input {
    position: relative;
}

.tp-footer-widget__input input {
    width: 100%;
    background-color: #313138;
    border: 0;
    border-radius: 10px;
    height: 60px;
    color: #96A1B6;
    padding-left: 20px;
    padding-right: 75px;
}

.tp-footer-widget__input input::placeholder {
    color: #96A1B6;
}

.tp-footer-widget__input button {
    height: 60px;
    width: 60px;
    background-color: var(--tp-theme-1);
    border-radius: 10px;
    line-height: 60px;
    color: var(--tp-common-white);
    position: absolute;
    top: 0;
    right: 0;
}

.tp-footer-widget__tp-insta-img {
    position: relative;
}

.tp-footer-widget__tp-insta-img img {
    border-radius: 10px;
}

.tp-footer-widget__tp-insta-img::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(66, 62, 243, 0.8);
    border-radius: 10px;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

.tp-footer-widget__tp-insta-img-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--tp-common-white);
    z-index: 2;
    font-size: 25px;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

.tp-footer-widget__tp-insta-img:hover::after {
    opacity: 1;
    visibility: visible;
}

.tp-footer-widget__tp-insta-img:hover .tp-footer-widget__tp-insta-img-icon {
    opacity: 1;
    visibility: visible;
}

.tp-input-white input {
    background-color: var(--tp-grey-1);
}

.tp-input-white button {
    background-color: var(--tp-common-blue);
    color: var(--tp-common-black);
}

.tp-copyright-left p {
    color: var(--tp-common-white);
    font-size: 15px;
    font-weight: 400;
    margin: 0px
}

.tp-copyright-logo img {
    width: 180px;
}

.tp-copyright-right a {
    color: var(--tp-common-white);
    font-size: 15px;
    font-weight: 400;
    margin-left: 60px;
}

.tp-copyright-right a:hover {
    color: var(--tp-theme-primary);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-copyright-right a {
        margin-left: 30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-copyright-right a {
        margin-left: 15px;
    }
}

@media (max-width: 767px) {
    .tp-copyright-right a {
        margin-left: 0px;
        margin-right: 10px;
        margin-bottom: 10px;
    }
}

.tp-copyright-color a {
    color: var(--tp-common-black);
}

.copyright-border {
    border-top: 1px solid #3E3E45;
}

.circle-animation.footer-animation {
    top: 23%;
    left: 4%;
    border: 1px solid #383841;
    width: 124px;
    height: 124px;
    position: absolute;
    border-radius: 50%;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .circle-animation.footer-animation {
        top: 7%;
        left: 0%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .circle-animation.footer-animation {
        top: 7%;
        left: 0%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .circle-animation.footer-animation {
        top: 7%;
        left: 0%;
    }
}

.circle-animation span.tp-circle-3 {
    display: block;
    position: absolute;
    content: "";
    top: calc(50% - 1px);
    left: 50%;
    width: 50%;
    height: 1px;
    background: transparent;
    transform-origin: left;
    transform: scale(-1, 1);
    -webkit-animation: circle-animation2 10s linear infinite;
    -moz-animation: circle-animation2 10s linear infinite;
    -o-animation: circle-animation2 10s linear infinite;
    animation: circle-animation2 10s linear infinite;
}

.circle-animation span.tp-circle-3::after {
    position: absolute;
    content: "";
    width: 16px;
    height: 16px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    bottom: -25px;
    right: -7px;
    background-color: #FFADAD;
}

.tp-footer-border-shape {
    width: 700px;
    height: 700px;
    border: 2px solid #383841;
    position: absolute;
    top: -228px;
    left: -483px;
    transform: rotate(30deg);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-footer-border-shape {
        width: 500px;
        height: 500px;
        top: -228px;
        left: -353px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-footer-border-shape {
        width: 500px;
        height: 500px;
        top: -228px;
        left: -353px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-footer-border-shape {
        width: 500px;
        height: 500px;
        top: -228px;
        left: -353px;
    }
}

.tp-footer-shape-one {
    position: absolute;
    left: 0;
    bottom: 70px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-footer-shape-one {
        left: -60px;
        bottom: 90px;
    }
}

@media (max-width: 767px) {
    .tp-footer-shape-one {
        display: none;
    }
}

.tp-footer-shape-two {
    position: absolute;
    right: 40px;
    bottom: 140px;
    animation: jumpTwo 3s infinite linear;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tp-footer-shape-two {
        bottom: 200px;
    }
}

@media (max-width: 767px) {
    .tp-footer-shape-two {
        display: none;
    }
}

.footer-clip-shape {
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    z-index: 2;
}

.footer-clip-shape svg {
    width: 100%;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .footer-clip-shape {
        line-height: 1;
        top: -17px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .footer-clip-shape {
        line-height: 1;
        top: -22px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .footer-clip-shape {
        line-height: 1;
        top: -25px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .footer-clip-shape {
        line-height: 1;
        top: -30px;
    }
}

@media (max-width: 767px) {
    .footer-clip-shape {
        line-height: 1;
        top: -42px;
    }
}

.bp-footer-widget-color {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.bp-footer-widget-color .right-receved {
    color: rgba(255, 255, 255, 0.8);
}

.bp-footer-widget-color p {
    color: rgba(255, 255, 255, 0.8);
}

.bp-cpoyright-menu a {
    color: rgba(255, 255, 255, 0.8);
}

.bp-copyright-social a {
    color: rgba(255, 255, 255, 0.5);
    border: 1px solid #36363C;
}

.bp-foooter-shape-1 {
    position: absolute;
    top: 100px;
    right: 140px;
    animation: moving 12s linear infinite;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
    .bp-foooter-shape-1 {
        top: 47px;
        right: 72px;
    }
}

.bp-foooter-shape-2 {
    position: absolute;
    bottom: 106px;
    left: 50px;
}

.bs-footer-shape-1 {
    position: absolute;
    top: 40%;
    left: 120px;
    animation: rotate2 8s linear infinite;
}

.bs-footer-shape-2 {
    position: absolute;
    right: 120px;
    top: 40%;
    animation: moving 10s linear infinite;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .tp-cpoyright-menu {
        margin-bottom: 0;
    }
}

.tp-backto-top {
    height: 142px;
    width: 142px;
    border-radius: 50%;
    border: 1px solid #EFF2F6;
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.tp-backto-top::after {
    height: 100%;
    width: 100%;
    background-color: var(--tp-theme-primary);
    content: "";
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    left: 0;
    position: absolute;
    top: 0;
    transform: scale(0.8);
}

.tp-backto-top svg {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 9;
    top: -25px;
}

.tp-clip-height-one {
    height: 95px;
    background: #292930;
}

.tp-clip-height-two {
    height: 130px;
    background: #292930;
    overflow: hidden;
    position: relative;
    z-index: 222;
}

@media (max-width: 767px) {
    .tp-clip-height-two {
        height: 0px;
    }
}

.scroll-top {
    width: 50px;
    height: 50px;
    line-height: 50px;
    position: fixed;
    bottom: -10%;
    right: 50px;
    font-size: 16px;
    border-radius: 6px;
    z-index: 99;
    color: var(--tp-common-white);
    text-align: center;
    cursor: pointer;
    background: var(--tp-theme-1);
    transition: 1s ease;
    border: none;
}

@media (max-width: 767px) {
    .scroll-top {
        right: 30px;
    }
}

.scroll-top.open {
    bottom: 30px;
}

.scroll-top::after {
    position: absolute;
    z-index: -1;
    content: "";
    top: 100%;
    left: 5%;
    height: 10px;
    width: 90%;
    opacity: 1;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 80%);
}

/*# sourceMappingURL=style.css.map */
.icon-size {
    width: 110px;
}

.tp-brand-slider-section {
    max-height: 7rem;
    margin: auto;
}

.carousel-border {
    position: relative;
    padding-bottom: 5px; /* Adjust the padding to control the thickness of the border-bottom effect */
}

.carousel-border::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%; /* Position the pseudo-element at the center of its container */
    transform: translateX(-50%); /* Center the pseudo-element horizontally */
    width: 80%; /* Stretch the pseudo-element across 80% of the container's width */
    height: 2px; /* Adjust the height to control the thickness of the border-bottom effect */
    background-color: darkgray; /* Change the color as needed */
}

.review-card {
    position: relative;
    border-top: 5px solid yellow;
    padding-top: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background: white;
    color: black !important;
}

.reviewer-img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    z-index: 1;
    border: 2px solid green;
}

.review-text {
    padding: 20px;
    color: black !important;
    /*max-height: 190px;*/
    /*overflow: auto;*/
}

/* Hide scrollbar for Firefox */
.review-text {
    scrollbar-width: none; /* Firefox */
}

/* Hide scrollbar for WebKit (Chrome, Safari) */
.review-text::-webkit-scrollbar {
    display: none; /* WebKit */
}


.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.review-text h3 {
    margin-top: 0;
    color: black !important;

}

.review-text p {
    margin-bottom: 0;
    color: black !important;


}


.gradient-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 30%;
    height: 150px;
    z-index: 100;
}

.gradient-overlay-parent {
    position: relative;
}

.left {
    left: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); /* Gradient from transparent to white, from left to right */
}

.right {
    right: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); /* Gradient from transparent to white, from right to left */
}


.not-found-items {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 1024px) {
    .login-icon {
        display: none;
    }
}

/* Styles for mobile devices */
@media (max-width: 767px) {
    .login-icon {
        display: none;
    }
}

@media (max-width: 767px) {
    .solution-mini {
        margin-left: 0px !important;
        margin-right: 0px !important;
    }
}


@media (min-width: 1024px) {
    .clutch-review {
        margin-left: 10%;
    }
}

/*@media (min-width: 768px) {*/
/* .clutch-review {*/
/*  margin-left: 0%;*/
/*}*/
/*}*/

.form-row .mce-tinymce {
    margin-left: 0px !important;
}

.toc-container {
    display: block;
    margin-bottom: 20px;
    height: 400px;
    border-radius: 15px;
    background-color: #F7F8FD;
    padding: 10px;
    padding-top: 11px;
    position: relative;
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);  */
}

.toc-container li {
    list-style-type: circle;
}

.table-of-contents-item li {
    list-style-type: disclosure-closed;
}

.table-of-contents-item ul {
    display: block;
    border-radius: 5px;
    /* background-color: #FEC563; */
    padding: 10px;
    padding-top: 0px;

}

.left-container {
    padding: 25px;
    overflow: scroll;
    height: 80%;
    padding-top: 0px;

}

.toc-container h2 {

    color: black;
    font-weight: bold;
    font-size: 28px;
    padding-top: 17px;
    text-align: center;
    padding-bottom: 10px;
}

.toc-container .active {
    color: red;
    font-weight: bold;
}

.hidden-sidebar {
    position: fixed;
    top: 120px;
    width: 300px;
    right: -320px; /* Move the sidebar out of the viewport */
    transition: right 0.3s ease-in-out;
}

.fixed-sidebar {
    position: fixed;
    top: 150px; /* Adjust this value as needed */
    width: 350px; /* Adjust the width of the fixed sidebar */
    right: -350px; /* Hide sidebar initially */
    transition: right 0.3s ease-in-out;
}

.fixed-sidebar.show {
    right: 60px; /* Show sidebar */


}

/* @media (min-width: 1200px){
.col-xl-6 {
  flex: 0 0 auto;
  width: 45% !important;
}
} */
pre {
    background: #403f3f;
    color: whitesmoke;
    padding: 18px;
    border-radius: 10px;
}

code {
    position: relative;
    /* background-color: #1e1e1e;
  color: white;
  padding: 20px; */
    border-radius: 5px;
    margin: 20px 0;
}

@media (min-width: 1200px) {
    .col-xl-6 {
        flex: 0 0 auto;
        /* width: 45% !important; */
    }
}



.ssa-main {
    border-radius: 16px;
    padding-top: 3.75rem;
    padding-bottom: 3.75rem;
    background-color: #141C3A;
    color: var(--white);
}

.ssa-main h3 {
    font-weight: 600;
    text-transform: capitalize;
}

.ssa-main p {

    color: var(--white);
}

.oddo-solutions-w .nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 23px 24px;
    color: var(--tp-common-black);
    font-size: 24px;
    line-height: 32px;
    text-transform: capitalize;
    border-bottom: 1px solid #e6e6e6;
    position: relative;
    border-radius: 0 !important;
    text-align: left
}

.oddo-solutions-w .nav-link:hover {
    color: var(--tp-theme-primary)
}

.oddo-solutions-w .nav-link.active {
    color: var(--tp-theme-primary);
    font-weight: 600;
    border-bottom: 2px solid var(--tp-theme-primary);
    background-color: transparent
}

.oddo-solutions-w .nav-link.active svg path {
    fill: var(--tp-theme-primary);
    width: 32px;
    height: 32px
}

.oddo-solutions-w .nav-link svg path {
    fill: var(--tp-common-black);
}

.oddo-solutions-tabs-wrapper {
    padding: 1.5rem
}

.oddo-solutions-tabs-wrapper h4 {
    font-weight: bold;
    color: var(--tp-common-black);
    margin-bottom: 1rem;
}

.oddo-solutions-tabs-wrapper img {
    width: 48px;
}

.oddo-solutions-tabs-wrapper p {
    color: var(--color-gray);
}

@media screen and (max-width: 991px) {
    .oddo-solutions-w .nav {
        flex-direction: row !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden
    }

    .oddo-solutions-w .nav-link {
        font-weight: 500;
        font-size: 25px;
        line-height: 22px;
        position: relative;
        padding: 8px 16px;
        white-space: nowrap;
        border-bottom: none
    }

    .oddo-solutions-w .nav::-webkit-scrollbar {
        height: 0 !important
    }

    .oddo-solutions-w .nav-link::after {
        display: none
    }

    .oddo-solutions-w .nav-link.active {
        color: var(--tp-theme-primary);
        background-color: unset;
        border-bottom: 2px solid var(--tp-theme-primary) !important
    }

    .oddo-solutions-w .nav-link.active::after {
        display: none
    }
}

@media screen and (max-width: 1200px) {
    .oddo-solutions-w .nav-link {
        padding: 14px 16px;
        font-size: 18px
    }

    .oddo-solutions-w .nav-link::after {
        top: 30px
    }

    .oddo-solutions-w .nav-link.active::after {
        top: 23px
    }

    .oddo-solutions-tabs-wrapper h4 {
        font-size: 18px
    }

    .oddo-solutions-tabs-wrapper p {
        font-size: 14px
    }

    .pl-5 {
        padding: 0 !important
    }
}

@media screen and (min-width: 768px) {
    .oddo-solutions-w-mt-80 {
        margin-top: 80px !important;
    }
}


/* software-development-process-area-end */

/* digital-acceleration-area-start */
.daa h2 {
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--black);
    padding-bottom: 0.5rem
}

.daa h2 span {

    color: #FEC563;
!important
}

.daa .caption {
    color: var(--black);
    padding-bottom: 1rem
}

.daa .card {
    background-color: var(--color-ash);
    border-color: var(--border-white);
    border-radius: var(--border-radius);
    height: 100%;
    overflow: hidden
}


.daa .card-icon img {
    height: 48px;
    width: 48px
}

.daa .with-shape:before {
    content: "";
    position: absolute;
    background-image: url("../svg/shape-curved.svg");
    background-size: contain;
    background-repeat: no-repeat;
    width: 7.75rem;
    height: 7.75rem;
    top: 0;
    right: 0;
    z-index: -1
}

.daa .card h4 {
    font-size: 1.5rem;
    line-height: 1.35;
    font-weight: 600;
    color: var(--black)
}

.daa .card p {

    color: var(--black)
}


@media (max-width: 991px) {
    .daa h2 {
        font-size: 2rem;

    }
}

/* digital-acceleraton-area-end */


.tp-btn-border-3 {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    border: 1px solid #F6F6F6;
    height: 55px;
    line-height: 55px;
    text-align: center;
    padding: 0 40px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: var(--border-radius);
    text-transform: capitalize;
}


.tp-btn-border-3 i {
    padding-left: 18px;
}

.tp-btn-border-3:hover {
    color: var(--tp-common-black);
    height: auto;
    border-color: var(--tp-common-black);
}

.tp-btn-border-3::before,
.tp-btn-border-3::after {
    content: "";
    background: var(--tp-common-white);
    height: 50%;
    width: 0;
    position: absolute;
    transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -webkit-transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    z-index: -1;
}

.tp-btn-border-3::before {
    top: 0;
    left: 0;
    right: auto;
}

.tp-btn-border-3::after {
    bottom: 0;
    right: 0;
    left: auto;
}

.tp-btn-border-3:hover::before {
    width: 100%;
    height: 51%;
    right: 0;
    left: auto;
}

.tp-btn-border-3:hover::after {
    width: 100%;
    height: 51%;
    left: 0;
    right: auto;
}

@media (max-width: 767px) {
    .tp-btn-border-3 {
        height: 56px;
        line-height: 56px;
    }
}

.vav-section {
    color: var(--tp-common-white);
    background-color: #141C3A;
    /* background-color:var(--tp-common-black-2);
  color:var(--tp-theme-white) */
}

.vav-section-title {
    color: var(--tp-common-white);
    margin-bottom: 1.5rem;
}

.vav-section p {
    color: var(--tp-common-white);
}

.vav-section-round {
    border: 1px solid var(--tp-common-white);
    border-radius: 8px;
}

.vav-section-round h3,
.vav-section-round h4 {
    font-weight: bold;
    margin-bottom: 1rem;
    color: white
}

tp-btn-border-3 {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    border: 1px solid #F6F6F6;
    height: 55px;
    line-height: 55px;
    text-align: center;
    padding: 0 70px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 10px;
    text-transform: capitalize;
}

.tp-btn-border-3 i {
    padding-left: 18px;
}

.tp-btn-border-3:hover {
    color: var(--tp-common-black);
    border-color: var(--tp-common-black);
}

.tp-btn-border-3::before,
.tp-btn-border-3::after {
    content: "";
    background: var(--tp-common-white);

    height: 50%;
    width: 0;
    position: absolute;
    transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -webkit-transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    z-index: -1;
}

.tp-btn-border-3::before {
    top: 0;
    left: 0;
    right: auto;
}

.tp-btn-border-3::after {
    bottom: 0;
    right: 0;
    left: auto;
}

.tp-btn-border-3:hover::before {
    width: 100%;
    right: 0;
    left: auto;
}

.tp-btn-border-3:hover::after {
    width: 100%;
    left: 0;
    right: auto;
}

@media (max-width: 767px) {
    .tp-btn-border-3 {
        height: 56px;
        line-height: 56px;
    }
}


.vav-section {
    color: var(--tp-common-white);
    background-image: url("../svg/news-bg.svg");
    /* background-color:var(--tp-common-black-2);
  color:var(--tp-theme-white) */
}

.vav-section-title {
    color: var(--tp-common-white);
}

.vav-section p {
    color: var(--tp-common-white);
}

.vav-section-round {
    border: 1px solid var(--tp-common-white);
    border-radius: 8px;
}

.vav-section-round h3,
.vav-section-round h4 {
    font-weight: bold;
}

.nav {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none
}

.nav-link {
    display: block;
    padding: .5rem 1rem;
    color: var(--tp-theme-1);
    text-decoration: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out
}

.nav-link:focus,
.nav-link:hover {
    color: var(--tp-theme-1)
}

.nav-link.disabled {
    color: #6c757d;
    pointer-events: none;
    cursor: default
}

.navbar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding-top: .5rem;
    padding-bottom: .5rem
}

.navbar > .container {
    display: flex;
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between
}

.navbar-nav {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none
}

.navbar-nav .nav-link {
    padding-right: 0;
    padding-left: 0
}

.navbar-nav .dropdown-menu {
    position: static
}

.d-block {
    display: block !important
}

.d-flex {
    display: flex !important
}

.d-none {
    display: none !important
}

.position-relative {
    position: relative !important
}

.border {
    border: 1px solid #dee2e6 !important
}

.border-top {
    border-top: 1px solid #dee2e6 !important
}

.border-bottom-0 {
    border-bottom: 0 !important
}

.w-100 {
    width: 100% !important
}

.h-100 {
    height: 100% !important
}

.flex-column {
    flex-direction: column !important
}

.flex-column-reverse {
    flex-direction: column-reverse !important
}

.justify-content-end {
    justify-content: flex-end !important
}

.justify-content-center {
    justify-content: center !important
}

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

.align-items-start {
    align-items: flex-start !important
}

.align-items-end {
    align-items: flex-end !important
}

.align-items-center {
    align-items: center !important;

}

.technology-logo-slider {
    width: 70px !important;
}

.logo-slide {
    width: 200px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 20px; /* equal horizontal spacing */
    flex-shrink: 0;
}

.logo-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.business-logo-swiper {
    gap: 40px
}


.align-content-center {
    align-content: center !important
}

.align-self-center {
    align-self: center !important
}

.text-center {
    text-align: center !important
}

.text-capitalize {
    text-transform: capitalize !important
}

.text-nowrap {
    white-space: nowrap !important
}

.visible {
    visibility: visible !important
}

.invisible {
    visibility: hidden !important
}


@media (min-width: 768px) {
    .d-md-block {
        display: block !important
    }
}

@media (min-width: 992px) {
    .d-lg-block {
        display: block !important
    }

    .d-lg-none {
        display: none !important
    }

    .flex-lg-row {
        flex-direction: row !important
    }

    .justify-content-lg-center {
        justify-content: center !important
    }

    .justify-content-lg-between {
        justify-content: space-between !important
    }

    .mb-lg-0 {
        margin-bottom: 0 !important
    }

    .mb-lg-4 {
        margin-bottom: 2.5rem !important
    }

    .py-lg-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important
    }

    .ps-lg-5 {
        padding-left: 3rem !important
    }

    .text-lg-start {
        text-align: left !important
    }

    .text-lg-end {
        text-align: right !important
    }

    .text-lg-center {
        text-align: center !important
    }
}

@media (min-width: 1200px) {
    .mb-xl-0 {
        margin-bottom: 0 !important
    }
}

.card-icon,
.icon-wrapper img {
    width: 48px;
    height: 48px;
}

.oddo-solutions-tabs-wrapper .card-icon {
    width: 100px;
    height: auto;
}


:root {
    --primary: #2569e6;
    --primary-dark: #04338c;
    --primary-hover: #002875;
    --secondry: #ee4200;
    --black: #1b1b1b;
    --black-light: #696969;
    --white: #fff;
    --color-ash: #f8f8f8;
    --color-gray: #757575;
    --border-ash: #efefef;
    --border-white: #e6e6e6;
    --border-dark: #333333;
    --dark-background: #1b1b1b;
    --border-radius: 8px;
    --border-radius-lg: 16px;
    --transition: 0.5s ease;
    --transition-fast: 0.35s ease;
    --filter-primary: invert(19%) sepia(100%) saturate(2878%) hue-rotate(217deg) brightness(96%) contrast(97%);
    --filter-tp-theme-1: invert(19%) sepia(30%) saturate(150%) hue-rotate(90deg) brightness(150%) contrast(150%);
    --image-border-radius: 8px 8px 0 0;
}


.header-wrapper-alt {
    transition: 0.5s ease;
    position: relative
}

.header-wrapper-alt.sticky {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, .88);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    animation: .5s slide-down;
    box-shadow: 0 4px 28px rgba(0, 0, 0, .06)
}

.header-menu ul {
    display: flex;
    /* gap: 2.5rem; */
    margin-bottom: 0
}

.header-menu ul.menu > li {
    height: 76px;
    line-height: 76px
}

.header-menu ul.menu > li a:hover {
    color: var(--tp-theme-1) !important;
}

.header-wrapper-alt.sticky .header-menu a:hover {
    color: var(--tp-theme-1) !important !important
}

.header-wrapper-alt.sticky .header-menu .menu-link-dark a {
    color: #fff !important
}

.header-wrapper-alt.sticky .header-menu a:hover svg path {
    fill: var(--tp-theme-1) !important
}

.phoneNum:hover a {
    color: var(--tp-theme-1) !important
}

.phoneNum:hover svg path {
    fill: var(--tp-theme-1) !important
}

.menu-link-dark a {
    background-color: var(--tp-theme-1) !important;
    color: var(--white) !important;
    padding: .5rem .75rem;
    border-radius: var(--border-radius);
    transition: var(--transition)
}

.menu-link-dark a:hover {
    background-color: var(--primary-hover);
    transition: var(--transition)
}

.menu-link-icon {
    position: relative
}

.menu-item-has-children > a {
    position: relative;
    white-space: nowrap
}

.nav-menu {
    -webkit-transition: width .4s, height .5s;
    -moz-transition: width .4s, height .5s;
    -o-transition: width .4s, height .5s;
    transition: width .4s ease, height .5s ease;
    height: 0;
    overflow: hidden
}

.nav-menu.open {
    position: fixed;
    background: var(--white);
    border-top: 1px solid var(--border-white);
    backdrop-filter: blur(25px);
    width: 100%;
    height: 100vh;
    top: 60px;
    right: 0;
    z-index: 999;
    overflow-y: auto
}

.mobile-navigation {
    margin-bottom: 0
}

.mobile-navigation > li:not(:last-child) {
    border-bottom: 1px solid var(--border-white)
}

.mobile-navigation li a {
    font-weight: 600;
    padding: 1rem 0;
    display: block;
    font-size: .875rem
}

.mobile-submenu {
    display: none
}

.has-children > a:after {
    content: "";
    position: absolute;
    background-image: url("../svg/arrow.svg");
    background-repeat: no-repeat;
    background-size: contain;
    transform: rotate(90deg);
    width: 12px;
    height: 18px;
    right: 0;
    top: 20px;
    transition: var(--transition)
}

.has-children.active-link > a:after {
    transform: rotate(-90deg)
}

.mobile-menu-btn {
    text-align: center;
    margin-top: 1.5rem
}

.mobile-navigation .mobile-submenu li a {
    font-weight: 400;
    border: none;
    padding: .5rem 0
}

.mobile-navigation .has-children.active-link > a:after {
    filter: var(--filter-tp-theme-1)
}

.mobile-navigation .active-link > a {
    color: var(--tp-theme-1) !important
}

.mobile-navigation .active-link .mobile-submenu {
    padding-bottom: 8px
}

.mobile-menu-btn a {
    display: inline-block;
    border-color: transparent;
    background-color: var(--tp-theme-1) !important;
    border-radius: 8px;
    padding: 0 24px;
    color: #fff;
    margin-top: 24px
}

.gap-32 {
    gap: 2rem
}

.header-wrapper-alt .menu-item-has-children .sub-menu {
    position: fixed;
    top: 48px;
    z-index: 999;
    visibility: hidden;
    opacity: 0;
    height: 0;
    transition: var(--transition);
    overflow: hidden;
    box-shadow: 0 20px 30px 2px rgba(0, 0, 0, .03)
}

.header-wrapper-alt .menu-item-has-children .sub-menu {
    width: 176px;
    flex-wrap: wrap;
    gap: 0;
    border-radius: 0 0 8px 8px
}

.header-wrapper-alt .menu-item-has-children.less-menu .sub-menu {
    background-color: #fff
}

.header-wrapper-alt .menu-item-has-children.less-menu .sub-menu li {
    width: 100%;
    border-bottom: 1px solid var(--border-white);
    display: flex;
    align-items: center;
    padding: 24px
}

.header-wrapper-alt .menu-item-has-children.less-menu .sub-menu li a {
    font-size: .875rem;
    font-weight: 500;
    color: var(--black);
    line-height: 1;
    display: flex;
    align-items: center
}

.header-wrapper-alt .menu-item-has-children.less-menu .sub-menu li a span {
    display: block
}

.header-wrapper-alt .menu-item-has-children.less-menu .sub-menu li a img {
    margin-right: 1rem
}

.header-wrapper-alt .menu-item-has-children.less-menu .sub-menu li a:hover img {
    filter: var(--filter-tp-theme-1)
}

.header-wrapper-alt .has-megamenu .sub-menu {
    width: 100%;
    left: 0;
    right: 0
}

.header-wrapper-alt .menu-item-has-children:hover .sub-menu {
    visibility: visible;
    opacity: 1;
    height: auto;
    top: 76px;
    padding: 0
}

.menu-item-has-children > a svg path {
    fill: #000
}

.menu-item-has-children > a svg {
    rotate: 90deg;
    margin-left: .125rem;
    width: 12px;
    height: 12px;
    transition: .5s all
}

.menu-item-has-children:hover > a svg {
    rotate: 270deg
}

.menu-item-has-children:focus > a svg path,
.menu-item-has-children:hover > a svg path {
    fill: var(--tp-theme-1) !important
}

.menu-item-has-children:hover > a {
    color: var(--tp-theme-1) !important
}

.megamenu {
    background-color: var(--white);
    border-radius: 0 0 8px 8px;
    width: 100%;
    margin-top: 10px
}

.vertical-tabs {
    width: calc(30% - 1rem);
    background-color: var(--color-ash);
    padding-block: 12px;
    border-radius: 8px
}

.vertical-tabs-content {
    width: calc(70% - 1rem)
}

.by-role {
    width: calc(100% - 30% - 53px)
}

.by-role {
    padding: 1.5rem 0;
    line-height: 22px
}

.by-role-head {
    padding-right: 1.25rem;
    position: relative
}

.by-role-head:after {
    content: "";
    position: absolute;
    background-image: url("../svg/arrow.svg");
    background-size: contain;
    background-repeat: no-repeat;
    width: 6px;
    height: 9px;
    right: 0;
    top: calc(50% - 4.5px)
}

.by-role-items a {
    color: var(--black) !important;
    background-color: var(--color-ash);
    padding: .5rem 1rem;
    border-radius: 30px;
    font-size: .875rem;
    font-weight: 400;
    line-height: 18px;
    transition: var(--transition)
}

.by-role-items a:hover {
    color: var(--white) !important;
    background-color: var(--tp-theme-1) !important
}

.hamburger-icon {
    position: absolute;
    top: -16px;
    right: -14px;
    overflow: hidden;
    cursor: pointer;
    width: 56px;
    height: 60px;
    -webkit-transition: .3s;
    transition: all .3s;
    z-index: 999999
}

.hamburger-icon span {
    display: block;
    position: absolute;
    top: 30px;
    left: 16px;
    right: 16px;
    height: 3px;
    background: var(--tp-theme-1) !important;
    -webkit-transition: background .3s .3s;
    transition: background .3s .3s;
    -o-transition: background;
    -webkit-transition-delay: 0.4s, 0s;
    transition-delay: 0.4s, 0s
}

.open .hamburger-icon span {
    background: 0 0;
    transform: rotate(90deg);
    -webkit-transition: .3s ease-in;
    transition: all .3s ease-in;
    -o-transition: none;
    -webkit-transition-delay: 0s, 0s;
    transition-delay: 0s, 0s
}

.hamburger-icon span::after,
.hamburger-icon span::before {
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: var(--tp-theme-1) !important;
    content: "";
    -webkit-transition-duration: .3s, .3s;
    transition-duration: .3s, .3s;
    -webkit-transition-delay: 0.4s, 0s;
    transition-delay: 0.4s, 0s
}

.hamburger-icon span::before {
    top: -8px;
    -webkit-transition-property: top, -webkit-transform;
    transition-property: top, transform
}

.hamburger-icon span::after {
    bottom: -8px;
    -webkit-transition-property: bottom, -webkit-transform;
    transition-property: bottom, transform
}

.open .hamburger-icon span::after,
.open .hamburger-icon span::before {
    -webkit-transition-delay: 0s, 0.4s;
    transition-delay: 0s, 0.4s
}

.open .hamburger-icon span::before {
    top: 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.open .hamburger-icon span::after {
    bottom: 1px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg)
}


.mega-menu-wrp {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap
}

.mega-menu-wrp .menu-left {
    width: 22%;
    border-right: 1px solid;
    border-color: #d8d8d8;
    position: relative
}

.menu-left::before {
    content: "";
    background: url("../img/hero/header-gradient.svg"), 0 0/100% 100% no-repeat #d3d3d3;
    height: 100%;
    width: 200%;
    position: absolute;
    top: 0;
    left: -100%;
    z-index: 0
}

.mega-menu-wrp .menu-right {
    width: 78%;
    padding: 0rem 1.5rem 1.5rem 1.5rem;
}

.menu-links-wrp {
    padding-top: 48px;
    text-align: left;
    position: relative
}

.menu-links-wrp .menu-heading {
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px;
    margin-bottom: 24px
}

.menu-links-wrp .menu-links {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 16px
}

.menu-links-wrp .menu-links > li > a {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px
}

.menu-links-wrp .menu-links li {
    line-height: initial
}

.mega-menu-wrp .menu-right .menu-links-wrp-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 32px
}

.mega-menu-wrp .menu-right .menu-links-wrp-row .menu-links-wrp {
    width: 22.5%
}

.mega-menu-wrp .menu-left .menu-links-wrp .menu-heading {
    position: relative
}

.mega-menu-wrp .menu-left .menu-links-wrp .menu-heading::after {
    content: "New";
    position: absolute;
    padding: 0 8px;
    background: #fbd4c5;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    color: Orange;
    color: #ee4200;
    text-transform: uppercase;
    top: -2px;
    right: 70px
}

.header-wrapper-alt .container {
    width: 100%;
    padding: 0 30px;
    margin: 0 auto;
    max-width: 1200px
}

@media (min-width: 1200px) {

    .header-wrapper-alt .container {
        width: 1400px !important;
        max-width: 1400px !important
    }
}

.border-top {
    border-top: 1px solid #d8d8d8
}

.mobile-menu-wrp.container {
    opacity: 0;
    height: 0;
    overflow: hidden
}

.mobile-menu-wrp.container.open {
    position: relative;
    width: 100%;
    height: 100vh;
    background: var(--color-ash);
    border-top: 2px solid var(--border-ash);
    display: block;
    opacity: 1;
    top: 15px;
    padding: 0
}

.nav-title {
    padding: 0 24px
}

.mobile-menu-wrp ul {
    color: var(--tp-common-black);
    font-size: 16px;
    margin: 0;
    padding: 0;
    background: var(--color-ash)
}

.mobile-menu-wrp a {
    text-decoration: none;
    display: block;
    padding: 1em 1em 1em 0;
    outline: 0;
    border-bottom: 1px solid var(--border-white);
    position: relative
}

.mobile-menu-wrp a:hover {
    color: var(--tp-theme-1)
}

.mobile-menu-wrp ul li {
    color: #333;
    list-style: none;
    margin: 0;
    padding: 0
}

.mobile-menu-wrp li span {
    font-size: 1.5em;
    line-height: .25em
}

.mobile-menu-wrp .hide {
    margin-left: -200%;
    transition: all .8s ease
}

.mobile-menu-wrp .side-menu {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100vh;
    background: 0 0;
    background-color: #edf0f3
}

.mobile-menu-wrp .side-menu ul li a {
    background-color: #edf0f3;
    padding-left: 24px
}

.mobile-menu-wrp .side-menu ul li a:after {
    right: 24px
}

.mobile-menu-wrp .side-menu ul li a:hover {
    color: var(--tp-theme-1)
}

.mobile-menu-wrp .side-menu:last-child ul li a {
    background-color: #edf0f3
}

.mobile-menu-wrp .show-menu {
    margin-left: 0 !important
}

.has-children::after {
    content: "";
    position: absolute;
    background-image: url("../svg/arrow.svg");
    background-repeat: no-repeat;
    background-size: contain;
    transform: rotate(0);
    width: 30px;
    height: 30px;
    right: 10px;
    top: 15px;
    transition: var(--transition)
}


.header-wrapper-alt {
    position: absolute;
    z-index: 999;
    left: 0;
    right: 0
}

.header-wrapper-alt:hover {
    /* background-color: rgba(255, 255, 255, .88); */
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px)
}

.header-wrapper-alt:hover .header-menu li a svg path {
    fill: var(--black)
}

.header-wrapper-alt:not(.sticky) .header-menu a {
    color: var(--black)
}

.header-wrapper-alt .header-menu a svg path {
    fill: black
}

.header-wrapper-alt:not(.sticky) .header-menu a svg path {
    fill: black
}

.header-wrapper-alt:not(.sticky) .header-menu a:hover svg path {
    color: var(--tp-theme-1);
}

.header-wrapper-alt:not(.sticky) .header-menu a:hover {
    color: var(--tp-theme-1);
}

.header-wrapper-alt:not(.sticky) .menu-item-has-children a:after {
    filter: brightness(100)
}

body .header-wrapper-alt:hover .header-menu li a {
    color: var(--black)
}

@keyframes slide-down {
    0% {
        opacity: 0;
        transform: translateY(-100%)
    }

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

@keyframes slide-down-short {
    0% {
        opacity: 0;
        transform: translateY(-10%)
    }

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

@media (max-width: 991px) {


    .header-wrapper-alt {
        padding: 1rem 0;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background-color: rgba(255, 255, 255, .88);
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
        z-index: 99
    }

    .header-logo img {
        height: 28px
    }


}

/* process-flow-start */
.pf-section {
    color: var(--black);
}

.pf-section h2 {
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--black);
}

.pf-section .caption {
    font-size: 1.5rem;
    line-height: 1.33;
    color: var(--black);
}

.pf-section .step-title {
    font-weight: 400;
}


@media (max-width: 991px) {
    .pf-section h2 {
        font-size: 2rem;

    }
}


.page-title {
    margin-bottom: .5rem;
    padding-bottom: .5rem;
    position: relative;
    text-transform: capitalize;
    font-size: 1.4rem;
    font-weight: 500;
}

.page-title:after {
    content: "";
    position: absolute;
    height: 4px;
    background-color: var(--tp-theme-primary);
    width: 40px;
    bottom: 0;
    left: 0;
    transition: all .5s cubic-bezier(.22, .61, .36, 1);
    border-radius: 30px
}

.page-title:hover::after,
.pbisa .page-title-secondary:hover::after,
.das .page-title:hover::after {
    width: 50px
}

.gy-4 {
    --bs-gutter-y: 2.5rem
}

.tech-stack-carousel .swiper-wrapper {
    margin: 0
}

@media screen and (min-width: 1400px) {
    .bpo-process-content .pt-lg-4 {
        font-size: 16px !important
    }
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
    .bpo-process-content .pt-lg-4 {
        font-size: 12px
    }
}

@media screen and (min-width: 1200px) {
    .bpo-process-content .pt-lg-4 {
        font-size: 14px
    }
}

@media screen and (max-width: 991px) {
    .hc-logo-sm-bg {
        background-color: var(--color-ash)
    }

    .bpo-process-icon img {
        height: 45px
    }
}

@media screen and (max-width: 767px) {
    .page-title {
        font-size: 1rem
    }

    .bullets-toggle {
        display: none
    }
}

@media screen and (min-width: 576px) and (max-width: 991px) {
    .bpo-process-wrapper {
        display: none
    }

    .ds-process-mid-content {
        display: flex;
        align-items: baseline
    }

    .bpo-process-icon {
        margin-right: 8px
    }

    .bpo-min-bullets {
        border-right: 1px solid var(--black);
        margin-bottom: -60px;
        position: relative
    }

    .bpo-min-bullets::after {
        content: "";
        position: absolute;
        background-image: url("../svg/yellow-dot-sm.svg");
        top: 10%;
        right: -15px;
        width: 30px;
        height: 30px;
        z-index: 1
    }

    .bpo-spacing {
        margin-bottom: 60px
    }

    .ds-process-icon {
        margin-right: 8px
    }

    .ds-process-icon img {
        height: 48px;
        width: 48px
    }
}

@media screen and (min-width: 576px) {
    .d-sm-block {
        display: block !important;
    }
}

@media screen and (min-width: 992px) {
    .d-lg-none {
        display: none !important;
    }
}

@media screen and (min-width: 1400px) {
    .bpo-process-content .pt-lg-4 {
        font-size: 16px !important
    }
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
    .bpo-process-content .pt-lg-4 {
        font-size: 12px
    }
}

@media screen and (min-width: 1200px) {
    .bpo-process-content .pt-lg-4 {
        font-size: 14px
    }
}


@media screen and (min-width: 576px) and (max-width: 991px) {
    .bpo-process-wrapper {
        display: none
    }

    .ds-process-mid-content {
        display: flex;
        align-items: baseline
    }

    .bpo-process-icon {
        margin-right: 8px
    }

    .bpo-min-bullets {
        border-right: 1px solid var(--black);
        margin-bottom: -60px;
        position: relative
    }

    .bpo-min-bullets::after {
        content: "";
        position: absolute;
        background-image: url("../svg/yellow-dot-sm.svg");
        top: 10%;
        right: -15px;
        width: 30px;
        height: 30px;
        z-index: 1
    }

    .bpo-spacing {
        margin-bottom: 60px
    }

    .ds-process-icon {
        margin-right: 8px
    }

    .ds-process-icon img {
        height: 48px;
        width: 48px
    }
}

@media screen and (max-width: 575px) {
    .link-arrow-sm {
        position: relative
    }

    .link-arrow-sm:not(:last-child)::before {
        content: "";
        position: absolute;
        background-image: url("../svg/link-arrow.svg");
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 35px;
        height: 30px;
        background-size: cover;
    }

    .ds-process-icon img {
        height: 32px
    }

    .bpo-process-content {
        margin-bottom: 40px
    }

    .bpo-process-icon {
        margin-bottom: 8px
    }
}

.bpo-process-icon img {
    height: 45px
}

.tech-stack-carousel .swiper-wrapper {
    margin: 0
}

@media screen and (min-width: 1400px) {
    .bpo-process-content .pt-lg-4 {
        font-size: 16px !important
    }
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
    .bpo-process-content .pt-lg-4 {
        font-size: 12px
    }
}

@media screen and (min-width: 1200px) {
    .bpo-process-content .pt-lg-4 {
        font-size: 14px
    }
}

@media screen and (min-width: 992px) {
    .bpo-process-icon {
        border-bottom: 1.5px solid var(--black);
        margin-right: -12px;
        margin-left: -12px;
        position: relative
    }

    .bpo-process-icon::before {
        content: "";
        position: absolute;
        background-image: url("../svg/yellow-dot-sm.svg");
        left: 50%;
        bottom: -15px;
        transform: translateX(-50%);
        width: 30px;
        height: 28px;
        z-index: 1
    }

    .bpo-process-icon::after {
        content: "";
        position: absolute;
        background-image: url(../svg/arrow.svg);
        bottom: -15px;
        right: 0;
        height: 30px;
        z-index: 1;
        width: 20px;
        background-size: cover;
    }

    .after-d-none::after {
        display: none
    }

    .header-wrapper-alt:not(.sticky) .menu-link-icon:before {
        filter: brightness(100)
    }

    .bpo-process-icon::after:last-child {
        background-image: none;

    }

}


@media (min-width: 576px) {
    .col-sm-6 {
        flex: 0 0 auto;
        width: 50%
    }
}

/* process-flow-end */

/* footer-start */
.attachment-small {
    width: 140px;
    height: auto;
}


@media (max-width: 576px) {
    .attachment-small {
        width: 130px;
    }

    .elementor-image {
        text-align: center;
    }
}

.size-small {
    font-size: 14px;
    color: #333;
}

.elementor-image.ali img {
    padding: 10px;
}

/* footer-end */

/* which-solution-start */
.wss {
    background-color: #141C3A;
    color: var(--white);
}

.wss h2 {
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--white);
}

.wss .card-text h4 {
    font-size: 1.5rem;
    line-height: 1.35;
    font-weight: 600;
    color: var(--white);
}

.wss .card-text p {
    color: var(--white);
}

/* which-solution-end */

.nsa {
    color: var(--black);
    background: var(--color-ash);
}

.nsa .page-sub-title {
    font-size: 3.75rem;
    font-weight: 700;
    line-height: 1.13;
    text-transform: capitalize;
}

.bb-white {
    border-bottom: 1px solid var(--border-white)
}

.caption {
    font-size: 1.5rem;
    line-height: 1.33;
    color: var(--black);
}

.newsletter-wrapper p {
    color: var(--black-light) !important;
}

.sib_signup_form {
    display: block !important
}

.newsletter-form .sib-wrapper {
    display: flex;
    width: 100%
}

.newsletter-form input[type=email] {
    height: 54px;
    line-height: 54px;
    border: 1px solid var(--black);
    margin-right: 12px
}

.newsletter-form .btn-primary {
    min-width: 161px;
    padding-right: 1.5rem
}

@media (max-width: 767px) {
    .sib-wrapper {
        margin-top: 20px;
        gap: 10px;
        align-items: flex-start;
        flex-direction: column;
    }

    .cta-link {
        width: 100%
    }
}


@media (max-width: 767px) {
    .caption {
        font-size: 1.25rem;
    }
}


@media (max-width: 991px) {
    .nsa .page-sub-title {
        font-size: 2.5rem;
    }
}

/*price-project-area-start */

.project-section {
    background-repeat: no-repeat;
    background-size: cover;

}

.dark-project-wrap {
    color: #141C3A;
    background-color: #FEC563;
    border-radius: 8px;
    padding: 80px 40px;
    margin: -40px 0
}

.dark-project-wrap h2,
.blue-project-wrap h2 {
    line-height: 1.2;
    font-weight: 600;
    text-transform: capitalize;
}

.dark-project-wrap p {
    color: #141C3A;
}

.blue-project-wrap p {
    color: var(--white);
}

.project-single h5 {
    font-weight: 600;
}

.blue-project-wrap {
    padding: 64px 40px
}

.blue-project-wrap * {
    color: var(--white)
}

.arrow-wrap p {
    flex: 1 0 80%;
    max-width: 80%
}

.project-single {
    padding-left: 64px
}

.project-single::before {
    content: "";
    position: absolute;
    background-image: url("../svg/green-dot-sm.svg");
    background-size: contain;
    width: 36px;
    height: 36px;
    left: 0;
    top: 3px
}

.blue-project-wrap .project-single::before {
    background-image: url("../svg/yellow-dot-sm.svg")
}


.os-bullets-connector:not(:last-child) ::after {
    content: "";
    background-color: #fff3f3;
    width: 1px;
    height: 100%;
    left: 17px;
    position: absolute;
    top: 1rem;
    bottom: 0;
    z-index: 0;
    opacity: .25
}

.fixed-price-cta {
    padding: 1rem;
    background-color: #fee0ad;
    border-radius: var(--border-radius)
}

.dedicated-team-cta {
    padding: 1rem;
    background-color: #354379;
    border-radius: var(--border-radius)
}

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

    .blue-project-wrap,
    .dark-project-wrap {
        padding: 50px 20px;
        margin: 0 -12px;
        border-radius: 0
    }

    .project-section {
        background-size: 0
    }

    .blue-project-wrap {
        background-color: #141C3A
    }

    .dark-project-wrap::before {
        content: "";
        position: absolute;
        background-size: contain;
        width: 198px;
        height: 384px;
        left: 0;
        bottom: 55px
    }

    .blue-project-wrap::after {
        content: "";
        position: absolute;
        background-size: contain;
        width: 228px;
        height: 221px;
        right: 0;
        bottom: 66px
    }

    .project-single {
        padding-left: 48px
    }

    .arrow-wrap p {
        max-width: 100%
    }

    .page-title {
        font-size: 1rem
    }

    .bullets-toggle {
        display: none
    }
}

/* price-project-area-end */

/* customer-centric-approach-area-start */
.dt1-section .dt1-wrap {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
    padding-inline: 70px
}

.dt-title {
    margin-bottom: 40px
}

.dt1-section .dt1-wrap:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url(../svg/dotted-process.svg) center no-repeat;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

.dt1-section .dt1-wrap .dt1-img.dt-bf1 {
    background: #fff;
    padding: 18px 32px;
    text-align: center;
    position: relative;
    border: 1px solid #e6e6e6;
    border-radius: 8px
}

.dt1-section .dt1-wrap .dt1-img.dt-bf2 {
    background: #fff;
    padding: 18px 37px;
    text-align: center;
    position: relative;
    border: 1px solid #e6e6e6;
    border-radius: 8px
}

.dt1-section .dt1-wrap .dt1-img h4 {
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    line-height: 32px;
    color: #14212d;
    margin-top: 4px
}

.dt1-section .dt1-wrap .dt1-cards .card {
    width: 100%;
    max-width: 570px;
    margin: 0 auto;
    background: #f8f8f8;
    border-radius: 16px;
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    flex-direction: row
}

.dt1-section .dt1-wrap .dt1-cards .card:last-child {
    margin-bottom: 0
}

.dt1-section .dt1-wrap .dt1-cards .card .dt1-text {
    text-align: start
}

.dt1-section .dt1-wrap .dt1-cards .card .dt1-text h3 {
    font-size: 18px;
    line-height: 22px;
    color: rgba(20, 33, 45, .9);
    font-weight: 600;
    margin-bottom: 5px
}

.dt1-section .dt1-wrap .dt1-cards .card .dt1-text p {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 0;
    color: rgba(20, 33, 45, .7);
    padding-right: 51px
}

.dt1-section .dt1-wrap .dt1-cards .card .dt1-card-img {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    gap: 12px
}

.dt1-card-img img {
    height: 40px;
    width: 40px;
    line-height: 0;
}

@media screen and (max-width: 1200px) {
    .dt1-section .dt1-wrap:before {
        background-size: 760px
    }
}

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

    .dt1-section .dt1-wrap:before {
        display: none
    }

    .dt1-section .dt1-wrap {
        flex-direction: column
    }

    .dt1-section .dt1-wrap .dt1-img.dt-bf1 {
        margin: 0 auto 45px;
        position: relative
    }

    .dt1-section .dt1-wrap .dt1-img.dt-bf2 {
        margin: 45px auto 0;
        position: relative
    }

    .dt1-section .dt1-wrap .dt1-cards .card .dt1-card-img {
        flex-direction: row;
        justify-content: center
    }

    .dt1-section .dt1-wrap .dt1-cards .card {
        flex-direction: column
    }

    .dt1-section .dt1-wrap .dt1-cards .card .dt1-text {
        text-align: center;
        margin-bottom: 8px
    }

    .dt1-section .dt1-wrap .dt1-cards .card .dt1-text p {
        padding: 0
    }

    .dt1-section .dt1-wrap .dt1-img.dt-bf1:before {
        content: "";
        width: 42px;
        height: 15px;
        transform: rotate(90deg);
        right: 28px;
        position: absolute;
        top: 105px
    }

    .dt1-section .dt1-wrap .dt1-img.dt-bf2:before {
        content: "";
        width: 42px;
        height: 15px;
        transform: rotate(90deg);
        position: absolute;
        top: -28px;
        left: 30px
    }
}

.home-heading-one {
    color: var(--black);
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 600;
    text-transform: capitalize;
}

.home-heading-two {
    color: var(--tp-theme-primary);
}

@media (min-width: 992px) {
    .dt1-section .dt1-wrap {
        padding-inline: 0px;
    }
}

@media (min-width: 1400px) {
    .dt1-section .dt1-wrap {
        padding-inline: 70px;
    }
}

/* customer-centric-approach-area-end */


/* How-dedicated-team-works-area-start  */

.dtw {
    background-color: #141C3A;
    position: relative;
    color: var(--white);
}

.shape-semi-circle:after {
    content: "";
    position: absolute;
    background-size: contain;
    width: 752px;
    height: 658px;
    bottom: 0;
    right: 0;
    z-index: 0
}

.relative-index {
    position: relative;
    z-index: 9
}

.dtw .caption {
    font-size: 1.5rem;
    line-height: 1.33;
    color: var(--white);
}

.dtw h2 {
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 600;
    text-transform: capitalize;
    margin-bottom: 20px;
}

.dtw p {
    margin-bottom: 20px;
}

.dtw-caption {
    color: var(--white);
}

.card-transparent {
    padding: 1.5rem;
    border-radius: var(--border-radius);
    height: 100%;
}

.dtw-color-button {
    background-color: #FEC563;
    border: 1.5px;
}

.dtw-noncolor-button {
    border: 1.5px solid white;
}

.dtw-color-button p {
    color: var(--black);
}

.dtw-color-button h3, h4 {
    color: var(--black);
}

/*.yellow-bg h3, h4 {*/
/*    color: #141C3A;*/
/*}*/

.dtw-noncolor-button p {
    color: var(--white);
}

.dtw-noncolor-button h4 {
    color: white;
}

.card-transparent h4 {
    font-size: 1.5rem;
    line-height: 1.35;
    font-weight: 600;
}


/* How-dedicated-team-works-area-end */

/* expertise-area-start  */

.ea .section-title h2 {
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--black);
}

.ea li {
    font-size: 15px;
}


.ea .section-title h2 span {
    color: var(--tp-theme-primary)
}

.eaConnector {
    margin: 0 auto;
}

.fancy-bullets li:hover > a > p {
    color: #266ae6
}

.fancy-bullets {
    padding: 0;
    margin: 0
}

.fancy-bullets > li {
    position: relative;
    padding-left: 2.625rem
}

.fancy-bullets > li:not(:last-child) {
    padding-bottom: 2.5rem
}

.fancy-bullets.space-sm > li:not(:last-child) {
    padding-bottom: 1rem
}

.fancy-bullets > li:before {
    content: "";
    position: absolute;
    background-image: url("../svg/yellow-dot-sm.svg");
    background-size: contain;
    background-repeat: no-repeat;
    width: 2.5rem;
    height: 2.5rem;
    left: -13.5px;
    top: -8px;
    z-index: 1
}

.with-connectors li:not(:last-child):after {
    content: "";
    background-color: var(--border-white);
    width: 1px;
    height: 100%;
    left: 6px;
    position: absolute;
    top: 1rem;
    bottom: 0;
    z-index: 0
}

.bullets-toggle-btn {
    margin-top: -62px;
}

.bullets-toggle-btn a {
    color: var(--tp-theme-1) !important;
    font-weight: 500;
    padding-right: 0.75rem;
    position: relative;
}

.link-simple:after {
    content: "";
    position: absolute;
    background-image: url(../svg/arrow.svg);
    background-size: contain;
    width: 6px;
    height: 9px;
    top: calc(50% - 4.5px);
    right: 0;
}

/* expertise-area-end */


/* discovery-area-start */
.da {
    background-color: var(--color-ash);
    color: var(--black);
}

.da h2 {
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 600;
    text-transform: capitalize;

}

.da .caption {
    font-size: 1.5rem;
    line-height: 1.33;
    color: var(--black);
}

.discoveryCard h4 {
    font-size: 1.5rem;
    line-height: 1.35;
    font-weight: 600;
}

.discoveryCard p {
    color: var(--black);
}

/* discovery-area-end */


/* vision-area-start */
.visonArea {
    background-color: var(--color-ash);
    color: var(--black);
}

.visonArea h2 {
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 600;
    text-transform: capitalize;
}

.visonArea .caption {
    font-size: 1.5rem;
    line-height: 1.33;
    color: var(--black);
}

.vison-card-1 {
    background-color: #FEC563;
    color: var(--white);
}

.vison-card-1 h4,
.vison-card-2 h4 {
    font-size: 1.5rem;
    line-height: 1.35;
    font-weight: 600;
}

.vison-card-1 p,
.vison-card-2 p {
    color: var(--white);
}

.vison-card-2 {
    background-color: #26927B;
    color: var(--white);
}

.home-vision-card {
    border-radius: var(--border-radius);
    height: 100%;
    transition: transform .3s
}

.home-vision-card .home-vision-card-header {
    overflow: hidden;
    transition: transform .3s;
    height: 302px
}

.home-vision-card-header > img {
    height: 100%;
    width: 100%
}

.home-vision-card:hover .home-vision-card-header > img {
    transform: scale(1.1);
    transition: transform .3s
}

.home-vision-card-body {
    padding: 20px
}

.home-vision-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32px 20px
}

.home-vision-btn > h6 {
    transition: border .2s ease;
    position: relative;
    border-bottom: 1px solid transparent
}

.home-vision-btn:hover > h6 {
    border-bottom-color: #fff
}

.home-vision-card-body h4 {
    margin-bottom: 12px;
    color: #FFFFFF;
}

.home-vision-card-body p {
    max-width: 95%
}

.home-vision-card-footer img {
    cursor: pointer
}

@media screen and (min-width: 1200px) {
    .red-svg {
        position: relative
    }

    .red-svg::before {
        content: " ";
        clip-path: circle(48.7% at 100% 2%);
        position: absolute;
        right: 100%;
        top: 0;
        height: 300px;
        width: 300px;
        background-color: #26927B;
        display: block
    }

    .red-svg::after {
        content: " ";
        clip-path: circle(45% at 51% 50%);
        position: absolute;
        left: -155px;
        top: 45px;
        height: 45px;
        width: 45px;
        background-color: #141C3A;
        display: block
    }
}

/* vison-area-end */

/* software-development-area-start */

.softwareDevArea {
    background-color: var(--white)
}


.softwareDevArea h2 {
    font-size: 3rem;
    line-height: 1.2;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--black);
    margin-bottom: 1rem;
}

.softwareDevArea h2 span {
    color: var(--tp-theme-primary)
}

.softwareDevArea .caption {
    color: var(--black);
}

.icon-container {
    margin-right: 1rem !important;
    min-width: 32px;
    min-height: 32px
}

.services-cards {
    border: 1px solid #e6e6e6;
    padding: 1.5rem 1rem;
    border-radius: var(--border-radius);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    transition: .5s all
}

.services-cards:hover {
    translate: 0px -10px;
    color: var(--tp-theme-primary) !important;
    border: 1px solid var(--tp-theme-primary) !important
}

.services-cards:hover p {
    color: var(--tp-theme-primary) !important
}

.services-cards:hover svg path {
    fill: var(--tp-theme-primary) !important
}

.allServices {
    position: sticky;
    top: 90px;
    z-index: 888;
    display: block
}

.we-do-section h2 {
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--black);
}

.allServices .ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: transform .25s ease-in-out, background-color .2s ease-in-out, box-shadow .2s ease-in-out;
    flex-wrap: wrap;
    margin: 0
}

.hide-header {
    transform: translateY(-100%)
}

.ul li {
    position: relative
}

.ul li a {
    text-transform: capitalize;
    color: #606060;
    transition: color .3s ease;
    font-size: clamp(.75rem, .5739rem + .7512vw, 1.25rem);
    line-height: 1;
    width: 100%;
    display: block;
    padding: 8px
}

.tab-row li {
    list-style: none;
    margin: 0;
    border-bottom: 1px solid #e6e6e6;
    font-weight: 600
}

.tab-row a.active, .tab-row a:hover {
    color: var(--tp-theme-primary);
    border-bottom: 1px solid var(--tp-theme-primary);
    font-weight: 600;
    padding-bottom: 8px
}

.tab-row::-webkit-scrollbar {
    display: none
}

.tab-row {
    -ms-overflow-style: none;
    scrollbar-width: none;
    display: flex;
    justify-content: space-between;
    padding: 24px;
    border-radius: 0 0 8px 8px
}

.tab-row h4 {
    color: #636363;
    margin-bottom: 0
}

.tab-row.sticky {
    background-color: #fff;
    box-shadow: 0 -17px 138px 102px rgba(0, 0, 0, .03);
    transition: transform .25s ease-in-out, background-color .2s ease-in-out, box-shadow .2s ease-in-out
}

.serviceContainer {
    position: relative
}

.isVisible {
    display: block !important;
    z-index: 999 !important
}

#dropDown {
    position: relative;
    display: none;
    width: 100%;
    border: 1px solid var(--tp-theme-1) !important;
    padding: 12px;
    border-radius: 8px;
    color: var(--black);

}

#dropDown.dropdownActive {
    border: 1px solid var(--tp-theme-primary) !important;
    font-weight: 600;
    cursor: pointer
}

.dropDownArrow {
    position: absolute;
    right: 30px;
    top: 40%;
    z-index: 9999;
    display: none;
    transform: translate(-64%, 70%)
}

.dropDownArrow svg {
    rotate: 90deg;
    transition: .3s all
}

.ulContainer {
    width: 100%
}

.dropDownArrow.isRotated {
    top: 23px
}

.isRotated svg {
    rotate: 270deg;
    right: 30px;
    top: 54%
}

.serviceWrapSmall {
    display: none !important
}

.ar-vr-nitro-slider-bg {
    background-image: url("");
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 8px
}

.ash-background {
    background-color: var(--color-ash);
}

@media (max-width: 767px) {
    .allServices .ul {
        width: 100%;
        gap: 40px;
        white-space: nowrap;
        flex-direction: column;
        user-select: none;
        border: 1px solid var(--tp-theme-primary) !important;
        border: 1px solid var(--tp-theme-primary) !important;
        display: none;
        border-radius: 8px
    }

    #dropDown {
        display: block;
        user-select: none
    }

    .tab-row li {
        border: none;
        padding: 12px
    }

    .ulContainer {
        padding: 24px;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        max-height: 70vh;
        overflow-y: auto;
        background: #fff;
        border-radius: 8px;
        z-index: -1
    }

    .tab-row a.active {
        border-bottom: none;
        background: #f0f8ff;
        padding: 12px;
        max-width: 300px
    }

    .dropDownArrow {
        display: block
    }

    .serviceWrapSmall {
        display: block !important
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 2rem
    }

    h2 {
        font-size: 1.5rem
    }

    .caption, h4 {
        font-size: 1rem
    }

    .dropDownArrow {
        top: 35%
    }
}

/* software-development-area-end */

/* emerging-technologies-area-start */
.eta h2 {
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--black);
}

.eta h2 span {
    color: var(--tp-theme-primary);
}

.card {
    background-color: var(--color-ash);
    border-color: var(--border-white);
    border-radius: var(--border-radius);
    height: 100%;
    overflow: hidden
}

.service-card {
    background-color: #f8f8f8;
    border-radius: var(--border-radius);
    cursor: pointer;
    border: 0;
    transition: .3s all
}

.cardImg {
    width: 220px
}

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

.service-card .link-simple {
    width: fit-content
}

.service-card:hover {
    background-color: #141C3A;
}

.service-card:hover .link-simple,
.service-card:hover .link-simple::after {
    color: #fff !important;
    filter: brightness(100)
}

.cardContent {
    width: calc(100% - 220px)
}

.service-card:hover h4 {
    color: #fff
}

.service-card:hover p {
    color: #fff
}

.cardContent h4 {
    font-size: 1.5rem;
    line-height: 1.35;
    font-weight: 600;
    color: var(--black);
}

.cardContent p {
    color: var(--black);
}

@media (max-width: 767px) {
    .cardContent {
        width: 100%
    }

    .cardImg {
        width: 100%;
        height: 200px
    }

    .cardImg img {
        width: 100%;
        object-fit: cover;
        object-position: top
    }

    .linked-card {
        width: 100% !important
    }

}

.link-simple {
    padding-right: .75rem;
    color: var(--tp-theme-1) !important;
    font-weight: 500;
    position: relative;
}

.link-simple:after {
    content: "";
    position: absolute;
    background-image: url("../svg/arrow.svg");
    background-size: contain;
    width: 6px;
    height: 9px;
    top: calc(50% - 4.5px);
    right: 0
}

.link-simple-light:after {
    filter: invert(1) brightness(100);
    -webkit-filter: invert(1) brightness(100)
}

.link-underline {
    text-decoration: underline;
}

/* emerging-technologies-area-end */

/* software-developmenr-process-area-start */

.sdpa h2 {
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--black);
}

.sdpa h2 span {
    color: var(--tp-theme-primary);
}

.sdpa .caption {
    font-size: 1.5rem;
    line-height: 1.33;
    color: var(--black);
}

@media (max-width: 991px) {
    .sdpa h2 {
        font-size: 2rem;
    }
}

.ideasCards-mbl {
    display: none
}

.ideasCards-large {
    display: block
}

.carousel-benefts,
.carousel-casestudy,
.carousel-ideas,
.featuredTwoSlides {
    padding-bottom: 10px
}

.swiper-initialized {
    overflow: hidden
}

.swiper-initialized {
    margin-top: -60px;
}

.swiper-initialized {
    margin-top: -60px
}

.tech-stack-carousel.swiper-initialized {
    margin-top: 0
}

.swiper-container:not(.swiper-container-initialized) > .swiper-wrapper,
.swiper:not(.swiper-initialized) > .swiper-wrapper {
    gap: var(--e-n-carousel-swiper-slides-gap);
    overflow: hidden
}

.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: 10px;
    left: 0;
    width: 100%
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px)
}

.swiper-horizontal > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
    position: absolute;
    left: 1%;
    bottom: 3px;
    z-index: 50;
    height: 5px;
    width: 98%
}


.elementor-element .swiper .swiper-horizontal > .swiper-pagination-bullets,
.elementor-element .swiper .swiper-pagination-bullets.swiper-pagination-horizontal,
.elementor-element .swiper-container .swiper-horizontal > .swiper-pagination-bullets,
.elementor-element .swiper-container .swiper-pagination-bullets.swiper-pagination-horizontal,
.elementor-element .swiper-container ~ .swiper-pagination-bullets.swiper-pagination-horizontal,
.elementor-element .swiper ~ .swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: 5px
}

.swiper-backface-hidden .swiper-slide {
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.carousel-benefts .swiper-wrapper {
    align-items: normal
}

.carousel-benefts .swiper-wrapper .swiper-slide {
    height: unset
}

/*.swiper-wrapper {*/
/*  align-items: unset !important;*/
/*  padding-top: 60px;*/
/*  min-height: 330px;*/
/*}*/

.tech-stack-carousel .swiper-wrapper {
    padding-top: 0
}

.tech-stack-carousel .swiper-wrapper {
    margin: 0
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    /*align-items: center !important;*/
    align-items: stretch !important;
    transition-property: transform;
    box-sizing: content-box
}

.swiper-wrapper {
    transform: translateZ(0);
    transition-timing-function: linear;

}

.swiper-container:not(.swiper-container-initialized) > .swiper-wrapper,
.swiper:not(.swiper-initialized) > .swiper-wrapper {
    gap: var(--e-n-carousel-swiper-slides-gap);
    overflow: hidden
}

.swiper-android .swiper-slide,
.swiper-wrapper {
    transform: translate3d(0, 0, 0)
}



.ideasWrapper {
    align-items: stretch
}
.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
}

.swiper-grow {
    flex: 1 !important;
    margin: 0 10px;
    
}

.swiper-slide-review {
    flex-shrink: 0;
    width: 33.33%;
    position: relative;
    transition-property: transform;
}

.swiper-slide-review-functionality {
    will-change: transform;
    border-style: solid;
    border-width: 0;
    transition-duration: .5s;
    transition-property: border, background, transform;
    overflow: hidden
}

/* Styles for the carousel */
.carousel-wrapper {
    position: relative;
}

.swiper-slide-review {
    width: 33.33%; /* Each slide occupies one-third of the container width */
    flex: 0 0 33.33%; /* Ensures each slide occupies the same width */
    box-sizing: border-box; /* Include padding and border in the width calculation */
}

.review-card {
    border-top: 5px solid yellow; /* Yellow border top */
    padding-top: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.reviewer-img {
    position: absolute;
    top: -20%;
    left: 20%;
    transform: translateX(-50%);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid green;
    z-index: 1;
}

.review-text {
    margin-top: 50px;
    padding: 20px;
    color: gray;
}

.review-text h3 {
    margin-top: 0;
}

.review-text p {
    margin-bottom: 0;
}

.swiper-slide-invisible-blank {
    visibility: hidden
}

.swiper-backface-hidden .swiper-slide {
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper-slide-zoomed {
    cursor: move
}

.swiper-slide {
    will-change: transform;
    border-style: solid;
    border-width: 0;
    transition-duration: .5s;
    transition-property: border, background, transform;
    /*overflow: hidden*/
}

.swiper-slide a {
    display: inline
}

.swiper-slide a.elementor-button {
    display: inline-block
}

.carousel-benefts .swiper-wrapper .swiper-slide {
    height: unset
}

.carousel-casestudy .swiper-slide {
    overflow: hidden
}

@media screen and (max-width: 991px) {
    .trusted-companies-wrapper {
        position: relative;
        top: -16px
    }
}

.carousel-logo .swiper-slide {
    padding: 0 40px
}

.tech-stack-carousel .swiper-wrapper {
    margin: 0
}

@media screen and (max-width: 480px) {
    .contact-person-image {
        margin-right: 0;
        margin-bottom: 1rem
    }

    .innovative-lawyers .casestudy-v1--mockup {
        display: none
    }

    .carousel-logo .swiper-slide {
        padding: 0 20px
    }
}

.blue-box {
    background-image: url("../svg/discovery-bg.svg");
    background-repeat: no-repeat;
    background-size: cover;
    border-bottom-left-radius: 8px
}

.orange-box {
    background-image: url("../svg/execution-bg.svg");
    background-repeat: no-repeat;
    background-size: cover;
}

.black-box {
    border-radius: 8px;
    background-image: url("../svg/support-bg.svg");
    border-bottom-right-radius: 8px
}

.blue-box-mbl {
    background-image: url("../svg/discovery-bg.svg");
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 8px
}

.orange-box-mbl {
    background-image: url("../svg/execution-bg.svg");
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 8px
}

.black-box-mbl {
    border-radius: 8px;
    background-image: url("../svg/support-bg.svg");
    background-repeat: no-repeat;
    background-size: cover
}


.process-image img {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    width: 100%
}

.process-content h4 {
    font-size: 1.5rem;
    line-height: 1.35;
    font-weight: 600;
    color: var(--black);
}

.swiper-pagination {
    width: 100%;
    bottom: 0 !important;
    height: 3.875rem;
    line-height: 3.875rem
}

.swiper-pagination-bullet {
    background: var(--border-white);
    opacity: 1;
    width: 10px;
    height: 10px;
    margin: 0 .5rem
}

.swiper-pagination-bullet-active {
    background: var(--tp-theme-1) !important
}

.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    top: 50%;
    width: calc(var(44px) / 44 * 27);
    height: var(44px);
    margin-top: calc(0px - (var(44px) / 2));
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color, var(--swiper-theme-color))
}

.swiper-button-next.swiper-button-hidden,
.swiper-button-prev.swiper-button-hidden {
    opacity: 0;
    cursor: auto;
    pointer-events: none
}

.swiper-navigation-disabled .swiper-button-next,
.swiper-navigation-disabled .swiper-button-prev {
    display: none !important
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: var(44px);
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1
}

.swiper-button-prev {
    left: 10px;
    right: auto
}

.swiper-button-prev:after {
    content: 'prev'
}

.swiper-button-next {
    right: 10px;
    left: auto
}

.swiper-button-next:after {
    content: 'next'
}

.swiper-button-next,
.swiper-button-prev {
    padding: 30px;
    display: inline-flex !important;
    bottom: 0 !important;
    top: unset !important;
    border: 1px solid rgba(27, 27, 27, .3)
}

.swiper-button-next {
    right: 0 !important
}

.swiper-button-prev {
    left: 0 !important
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 1.25rem !important;
    opacity: 1;
    color: var(--black)
}

@media (max-width: 540px) {

    body .swiper-button-next,
    body .swiper-button-prev {
        display: none !important;
        background-color: transparent;
        border: 1px solid var(--border-white);
        width: 2rem;
        height: 2rem;
        border-radius: 8px;
        line-height: 2rem;
        transition: var(--transition);
        bottom: 0;
        top: unset
    }

    .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal {
        bottom: -15px !important;
    }

    .swiper-horizontal-new > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal {
        bottom: 58px !important;
    }


    body .swiper-button-next {
        right: 0
    }

    body .swiper-button-prev {
        left: unset;
        right: 48px
    }

    body .swiper-button-next:after,
    body .swiper-button-prev:after {
        font-size: 1rem;
        color: var(--black)
    }

    .swiper-button-next:hover,
    .swiper-button-prev:hover {
        border-color: var(--tp-theme-1) !important
    }

    .swiper-button-next:hover:after,
    .swiper-button-prev:hover:after {
        color: var(--tp-theme-1) !important
    }
}

.swiper-wrapper {
    /*align-items: unset!important;*/
    padding-top: 60px;
    padding-bottom: 60px;
}

.pagination {
    justify-content: center;
    gap: .75rem;
    flex-wrap: wrap;
    padding: 0
}

.pagination .current, .pagination a {
    width: 54px;
    height: 38px;
    line-height: 38px;
    border: 1px solid var(--border-white);
    text-align: center;
    border-radius: var(--border-radius);
    transition: var(--transition)
}

.pagination a:hover {
    border-color: var(--primary)
}

body .pagination .current {
    color: var(--white);
    background-color: var(--primary);
    border-color: var(--primary)
}

body .swiper-button-next, body .swiper-button-prev {
    background-color: rgba(114, 116, 120, .77);
    backdrop-filter: blur(15px);
    width: 40px;
    height: 40px;
    background-color: transparent;
    border: 1px solid var(--border-white);
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    line-height: 40px;
    transition: 1s;
    line-height: 2rem;
    transition: var(--transition);
    top: 22px;
    background-image: unset
}

body .swiper-button-next {
    right: 0
}

body .swiper-button-prev {
    left: unset;
    right: 48px
}

body .swiper-button-next:after, body .swiper-button-prev:after {
    color: var(--white);
    font-size: 1rem !important;
    color: var(--black)
}


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

    .ideasCards-mbl {
        display: block
    }

    .ideasCards-large {
        display: none
    }
}

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

    .swiper-button-next,
    .swiper-button-prev {
        margin-top: 10px;
        top: 0px !important;
        padding: 0px !important;
    }

    .swiper-button-prev {
        left: auto !important;
    }

    .swiper-pagination {
        display: none;
    }
}

.fancy-bullets.bullet-orange li:before {
    background-image: url("../svg/green-dot-sm.svg")
}

.fancy-bullets.bullet-black li:before {
    background-image: url("../svg/green-dot-sm.svg")
}

.with-connectors li:not(:last-child):after {
    content: "";
    background-color: var(--border-white);
    width: 1px;
    height: 100%;
    left: 6px;
    position: absolute;
    top: 1rem;
    bottom: 0;
    z-index: 0
}

.with-connectors.bullet-blue li:after {
    background-color: #89a4de
}

.with-connectors.bullet-orange li:after {
    background-color: #cf8669
}

.with-connectors.bullet-black li:after {
    background-color: #898989
}

/* software-development-process-area-end */

software-development-process-area-end *

/

/* digital-acceleration-area-start */
.daa h2 {
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--black)
}


.daa .caption {
    color: var(--black);
}

.daa .card {
    background-color: var(--color-ash);
    border-color: var(--border-white);
    border-radius: var(--border-radius);
    height: 100%;
    overflow: hidden
}


.daa .card-icon img {
    height: 48px;
    width: 48px
}

.daa .with-shape:before {
    content: "";
    position: absolute;
    background-image: url("../svg/shape-curved.svg");
    background-size: contain;
    background-repeat: no-repeat;
    width: 7.75rem;
    height: 7.75rem;
    top: 0;
    right: 0;
    z-index: -1
}

.daa .card h4 {
    font-size: 1.5rem;
    line-height: 1.35;
    font-weight: 600;
    color: var(--black)
}

.daa .card p {

    color: var(--black)
}


@media (max-width: 991px) {
    .daa h2 {
        font-size: 2rem;

    }
}

/* digital-acceleraton-area-end */

/* power-bi-services-card-start */
.pbisc h2 {
    font-size: 1.8rem;
    line-height: 1.2;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--black);
    margin-bottom: 50px !important;
}

.pbisc h2 span {
    color: #FEC563;
}

.pbisc .card {
    z-index: -1;
}

.pbisc .with-shape:before {
    content: "";
    position: absolute;
    background-image: url("../svg/shape-curved.svg");
    background-size: contain;
    background-repeat: no-repeat;
    width: 7.75rem;
    height: 7.75rem;
    top: 0;
    right: 0;
    z-index: -1
}

.pbisc .card h4 {
    font-size: 1.5rem;
    line-height: 1.35;
    font-weight: 600;
    color: var(--black);
}

.pbisc .card p {
    color: var(--black);
}

@media (max-width: 991px) {
    .pbisc h2 {
        font-size: 2rem;

    }
}

/* power-bi-services-card-end */


/* power-bi-services-area-start */
.pbisa {
    background-color: #141C3A;
    color: var(--white);
}

.pbisa h2 {
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 600;
    text-transform: capitalize;
}

.pbisa .page-title-secondary:after {
    content: "";
    position: absolute;
    height: 4px;
    background-color: #FDC565;
    width: 40px;
    bottom: 0;
    left: 0;
    transition: all .5s cubic-bezier(.22, .61, .36, 1);
    border-radius: 30px;
}

pbisa .page-title-secondary:hover::after
.page-title:hover::after {
    width: 50px
}

.pbisa .card {
    border: 1px solid var(--tp-common-white);
    border-radius: 8px;
    min-height: 310px;
    padding: 1.75rem;
}

.pbisa .card h4 {
    font-size: 1.5rem;
    line-height: 1.35;
    font-weight: 600;
    color: var(--white);
}

.pbisa .card p {

    color: var(--white)
}

.getStartedCard {
    z-index: 0 !important;
}

.pbisa .swiper-button-next::after,
.pbisa .swiper-button-prev::after {
    color: var(--white) !important;
}

@media screen and (max-width: 767px) {
    .pbisa .swiper-pagination-bullet-active {
        background: var(--tp-theme-primary);
    }

}

/* power-bi-services-area-end */

/* data-analysis-simple-start */
/*.das {*/
/*    background-color: var(--color-ash);*/
/*}*/

.das .page-title {
    color: black;
}

.das .page-title:after {
    content: "";
    position: absolute;
    height: 4px;
    background-color: var(--tp-theme-primary);
    width: 40px;
    bottom: 0;
    left: 0;
    transition: all .5s cubic-bezier(.22, .61, .36, 1);
    border-radius: 30px;
}

.das h2 {
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--black);
}

.das .caption {
    font-size: 1.5rem;
    line-height: 1.33;
    color: var(--black);
}

@media (max-width: 991px) {
    .das h2 {
        font-size: 2rem;

    }
}

.bpo-process-content .pt-lg-4 span {
    color: #1b1b1b;
}

.bpo-process-content .pt-lg-4 p {
    color: var(--tp-common-black);
    font-size: .75rem;
    line-height: 18px;
    text-align: center;
}

@media screen and (min-width: 1400px) {
    .bpo-process-content .pt-lg-4 {
        font-size: 16px !important
    }
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
    .bpo-process-content .pt-lg-4 {
        font-size: 12px
    }
}

@media screen and (min-width: 1200px) {
    .bpo-process-content .pt-lg-4 {
        font-size: 14px
    }
}

@media screen and (min-width: 576px) and (max-width: 991px) {
    .ds-process-mid-content {
        display: flex;
        align-items: baseline;
    }

    .ds-process-mid-content span {
        font-size: 16px;
        color: var(--black);
    }

    .ds-process-mid-content p {
        font-size: .75rem;
        line-height: 18px;
    }
}

/* data-analysis-simple-end */

.grecaptcha-badge {
    z-index: 1000;
}

/* off-shore-software-development-area-started */
.osd h2 {
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--black);
}

@media (max-width: 991px) {
    .osd h2 {
        font-size: 2rem;
    }
}

.osd .caption {
    font-size: 1.5rem;
    line-height: 1.33;
    color: var(--black)
}

.sds-card {
    padding: 40px 26px;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    border-radius: 8px;
    background-color: var(--color-ash);
}

.sds-card-content {
    max-width: 274px
}

.sds-card-content h4 {
    font-size: 1.5rem;
    line-height: 1.35;
    font-weight: 600;
    color: var(--black);
}

.sds-card-content p {
    color: var(--black);
}

.sds-blue-card-contnt h4 {
    font-size: 1.5rem;
    line-height: 1.35;
    font-weight: 600;
    color: var(--white)
}

.sds-blue-card-contnt p {
    color: var(--white);
}

/* off-shore-software-development-area-end */


.tsa h2 {
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--black);
    margin-bottom: 3.5rem;
}

.tech-stack-carousel img {
    max-width: 120px;
    max-height: 75px;
    height: 100%;
    width: 100%;
}

.tech-stack-carousel .swiper-wrapper {
    margin: 0;
}


@media (min-width: 768px) {

    .tech-stack-carousel .swiper-slide {
        width: 16.6666% !important
    }
}

@media (min-width: 768px) {
    .tsa .d-md-block {
        display: block !important
    }

    .tsa .flex-md-wrap {
        flex-wrap: wrap !important
    }

    .tsa .justify-content-md-center {
        justify-content: center !important
    }

    .tsa .mb-md-5 {
        margin-bottom: 3rem !important
    }

    .tsa .pb-md-3 {
        padding-bottom: 2rem !important
    }

    .tsa .text-md-center {
        text-align: center !important
    }
}

@media (max-width: 991px) {
    .tsa h2 {
        font-size: 2rem;
    }
}


/* how-can-we-help-you-area-start */
.helpArea {
    background-color: var(--color-ash);
    color: var(--black)
}

.helpArea h2 {
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--black)
}

.helpArea .caption {
    font-size: 1.5rem;
    line-height: 1.33;
    color: var(--black);
}

.helpArea h4 {

    font-size: 1.5rem;
    line-height: 1.35;
    font-weight: 600;
    color: var(--black)
}

.helpArea p {
    color: var(--black);
}

.bullet li {
    list-style-type: disc
}

.helpArea .iot-solution-list li:not(:last-child) {
    margin-bottom: 16px
}

.helpArea .ps-3 {
    padding-left: 2rem !important;
}

@media (max-width: 991px) {
    .helpArea .section-title h2 {
        font-size: 2rem;
    }
}

/* how-can-we-help-you-area-end */

.hovercolor:hover {
    fill: green !important;
}


/* Project Details Page Start */
:root {
    --inline-padding: calc(50% - 613px);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--tp-theme-primary);
    --bs-btn-active-border-color: #86b7fe
}

.case-study-section.case_study-hero {
    padding-top: 96px;
    padding-bottom: 48px;
    padding-left: var(--inline-padding);
    padding-right: var(--inline-padding);
    position: relative;
    background-color: #fff;
    z-index: 1
}

.case-study-section.case_study-hero .hero-content-wrapper {
    color: #f30000
}

.case-study-section.case_study-hero .hero-title {
    font-style: normal;
    font-weight: 400;
    font-size: 56px;
    line-height: 90%;
    /* text-transform: uppercase */
}

.case-study-section.case_study-hero .hero-subtitle {
    margin-top: 24px;
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 120%
}

.case-study-section.case_study-hero .hero-image-wrapper {
    margin-top: 66px;
    position: relative;
    width: 100%;
    height: 700px
}

.case-study-section.case_study-hero .hero-image,.case-study-section.case_study-hero .hero-video {
    max-width: 100%;
    max-height: 100%;
    /*width: 100%;*/
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain
    border: 4px solid #26927B; /* or any color like #000, #fff, etc. */
  border-radius: 12px;       /* optional: softens corners */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* optional: subtle depth */
}

.case-study-section.case_study-hero .case-study-about {
    margin-top: 96px;
    display: flex;
    justify-content: space-between
}

.case-study-section.case_study-hero .description--block {
    padding: 0;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-width: 600px
}

.case-study-section.case_study-hero .description--item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px
}

.case-study-section.case_study-hero .description--title {
    min-width: 140px;
    font-style: normal;
    font-size: 16px;
    line-height: 120%;
    font-weight: 700;
    opacity: .9
}

.case-study-section.case_study-hero .description--value {
    font-style: normal;
    font-size: 16px;
    line-height: 120%;
    margin-bottom:0px;
    font-weight: 500;
}

.case-study-section.case_study-hero .more-info {
    display: flex;
    gap: 8px;
    align-items: center;
    color: inherit
}

.case-study-section.case_study-hero .more-info:hover {
    color: inherit
}

.case-study-section.case_study-hero .more-info-icon {
    width: 24px;
    height: 24px
}

.case-study-section.case_study-hero .more-info:hover .more-info-icon-black {
    display: none
}

.case-study-section.case_study-hero .more-info-icon-green {
    display: none
}

.case-study-section.case_study-hero .more-info:hover .more-info-icon-green {
    display: block
}

.case-study-section.case_study-hero .location {
    /*padding: 4px 16px 4px 8px;*/
    display: flex;
    gap: 8px;
    align-items: center;
}

.case-study-section.case_study-hero .location-flag {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    /*margin-bottom:15px*/
}

@media screen and (min-width: 575px) {
    .case-study-section.case_study-hero:after {
        content:"";
        height: 550px;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        background-color: #141C3A;
        z-index: -1
    }
}

@media screen and (min-width: 991px) {
    .case-study-section.case_study-hero .hero-image,.case-study-section.case_study-hero .hero-video {
        position:absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%)
    }
}

@media screen and (max-width: 992px) {
    .case-study-section.case_study-hero {
        padding-left:16px;
        padding-right: 16px
    }

    .case-study-section.case_study-hero .hero-image-wrapper {
        height: auto
    }

    .case-study-section.case_study-hero .case-study-about {
        margin-top: 48px;
        padding-left: 16px;
        padding-right: 16px
    }

    .case-study-section.case_study-hero .about-block {
        padding-right: 16px
    }
}

@media screen and (max-width: 768px) {
    .case-study-section.case_study-hero .case-study-about {
        padding-left:16px;
        padding-right: 16px;
        display: block
    }
}

@media screen and (max-width: 576px) {
    .case-study-section.case_study-hero {
        padding:0 0 48px
    }

    .case-study-section.case_study-hero .hero-content-wrapper {
        padding: 48px 16px 80px;
        background-color: #f40000
    }

    .case-study-section.case_study-hero .hero-title {
        font-size: 40px
    }

    .case-study-section.case_study-hero .hero-subtitle {
        font-size: 18px
    }

    .case-study-section.case_study-hero .about-block {
        padding-right: 0
    }
}

.technologies-services-section.technology_services-block {
    border-left: 1px solid rgba(0,0,0,.10196078431372549);
    padding: 29px 48px;
    width: 704px
}

.technologies-services-section .technologies-block {
    margin-top: 48px
}

.technologies-services-section .technologies {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 28px
}

.technologies-services-section .technology {
    height: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4px 16px 4px 8px;
    gap: 8px;
    background: #ddd;
    border-radius: 200px
}

.technologies-services-section .technology.no-icon {
    padding: 4px 16px
}

.technologies-services-section .technology.services {
    padding: 4px 16px;
    background: hsla(0,0%,86.7%,.866667)
}

.technologies-services-section .technology-image-cover {
    width: 24px;
    height: 24px;
    position: relative
}

.technologies-services-section .technology-image {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 24px;
    max-height: 24px
}

.technologies-services-section .technology:hover .technology-image {
    -webkit-filter: grayscale(0);
    filter: grayscale(0)
}

.technologies-services-section a {
    color: inherit;
    
}

.technologies-services-section a p:hover {
    color: var(--tp-theme-primary);
}

.technologies-services-section .description--value {
    font-size: 14px;
    line-height: 20px
}

@media screen and (max-width: 768px) {
    .technologies-services-section {
        padding-inline:0;
        padding: 0 0 40px;
        display: block;
        gap: 0;
        flex-direction: column
    }

    .technologies-services-section.technology_services-block {
        border-left: none;
        padding: 48px 0 0;
        width: 100%
    }

    .technologies-services-section .technology-image {
        -webkit-filter: grayscale(0);
        filter: grayscale(0)
    }

    .technologies-services-section .case-study--header {
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 120%;
        text-transform: none;
        margin: 0;
        min-width: 108px
    }
}

@media screen and (max-width: 576px) {
    .technologies-services-section {
        gap:24px
    }

    .technologies-services-section .services-block,.technologies-services-section .technologies-block {
        color: #151915
    }
}


.black-background {
    background: linear-gradient(297.02deg,#000 23.43%,#323232 88.6%);
    color: #fff
}

.white-background {
    background: #fff;
    color: #151915
}

.silver-background {
    background: #f9f9f9;
    color: #151915
}

.case-study-section {
    padding-block:80px;padding-bottom: 80px;
    padding-top: 80px;
    padding-inline:var(--inline-padding);padding-right: var(--inline-padding);
    padding-left: var(--inline-padding)
}

.full-width-image-section {
    padding: 0;
    margin: 0;
    overflow-y: clip
}

.full-width-image {
    width: 100%;
    display: flex;
    align-items: center
}

.case-study-section .container {
    padding-inline:0;padding-right: 0;
    padding-left: 0
}

.case-study--header {
    font-style: normal;
    font-weight: 500;
    font-size: 40px;
    line-height: 100%;
    margin-bottom: 32px;
}

.case-study--text {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    opacity: .9;
}

.main-button {
    box-sizing: border-box;
    background: none;
    max-height: 39px;
    border-width: 2px;
    border-style: solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(130.27deg,#97cf00 -14.98%,#24b400 109.44%)
}

.main-button:hover {
    background: rgba(87,177,45,.22)
}

.black-background .case-study-button,.black-background .case-study-button:hover {
    color: #fff
}

.silver-background .case-study-button,.silver-background .case-study-button:hover,.white-background .case-study-button,.white-background .case-study-button:hover {
    color: #151915
}

.list {
    margin-bottom: 0;
    padding-left: 0
}

.list-item {
    display: flex;
    gap: 8px
}

.list-item:not(:last-of-type) {
    margin-bottom: 24px
}

.list-mark-cover {
    flex: 0 0 27px;
    /*padding-top: 6.43px;*/
    text-align: center
}

.list-mark-cover--small {
    flex: 0 0 24px;
    /*padding-top: 5px;*/
    text-align: center
}

.list-mark {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 auto;
    background: var(--tp-theme-primary);
    transform: rotate(45deg)
}

.list-item-text {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    opacity: .9
}

.customer-business-challenge-section.case-study-section .container {
    display: flex;
    flex-direction: column;
    gap: 56px
}

@media screen and (max-width: 992px) {
    .case-study-section {
        padding-inline:16px;
        padding-right: 16px;
        padding-left: 16px
    }

    .case-study-section.customer-business-challenge-section {
        -webkit-padding-before: 40px;
        padding-block-start:40px}

    .full-width-image-section {
        max-height: 150px
    }
}

@media screen and (max-width: 576px) {
    .case-study-section {
        padding-inline:16px;
        padding-right: 16px;
        padding-left: 16px
    }

    .case-study--header {
        line-height: 80%;
        margin-bottom: 24px
    }

    .case-study--text {
        font-size: 16px
    }

    .list-item {
        gap: 4px
    }

    .list-item:not(:last-of-type) {
        margin-bottom: 16px
    }

    .list-mark-cover {
        flex: 0 0 24px;
        /*padding-top: 5px;*/
        text-align: center
    }

    .list-item-text {
        font-size: 14px
    }
}

.about-project-section.case-study-section {
    padding-left: var(--inline-padding);
    padding-right: var(--inline-padding);
    padding-top: 48px;
    padding-bottom: 120px;
    display: flex;
    gap: 72px;
    position: relative
}

.about-project-section.case-study-section.white-background {
    background: #f9f9f9
}

.about-project-section.case-study-section.black-background {
    background: #252525
}

.about-project-section.case-study-section .quote-block {
    flex: 0 0 704px
}

.about-project-section .download-button {
    margin-top: 48px
}

.about-project-section .case-study--text {
    font-size: 16px;
    line-height: 24px
}

.about-project-section .quote {
    margin-block:auto;margin: auto 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 48px;
    gap: 40px;
    position: relative;
    box-shadow: 0 8px 40px rgba(0,0,0,.08)
}

.about-project-section.silver-background .quote,.about-project-section.white-background .quote {
    background: #fff
}

.about-project-section.black-background .quote {
    background: #000
}

.about-project-section .quote-mark {
    position: absolute;
    left: 48px;
    top: -24px;
    width: 65px;
}

.about-project-section.black-background .quote-mark.quote-mark-black,.about-project-section.silver-background .quote-mark.quote-mark-gradient,.about-project-section.white-background .quote-mark.quote-mark-gradient {
    display: none
}

.about-project-section.black-background.quote-mark.quote-mark-gradient,.about-project-section.silver-background .quote-mark.quote-mark-black,.about-project-section.white-background .quote-mark.quote-mark-black {
    display: block
}

.about-project-section .quote-text {
    font-style: italic;
    font-weight: 400;
    font-size: 16px;
    line-height: 30px
}

.about-project-section .quote-author {
    display: flex;
    align-items: center;
    gap: 16px
}

.about-project-section .author-photo--cover {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: clip
}

.about-project-section .client-photo-default {
    background-repeat: no-repeat;
    background-position: 50%;
    width: 48px;
    height: 48px
}

.about-project-section .author-photo {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    max-width: 48px;
    max-height: 48px
}

.about-project-section .quote:hover .author-photo {
    -webkit-filter: grayscale(0);
    filter: grayscale(0)
}

.about-project-section .author-info {
    display: flex;
    flex-direction: column;
    gap: 0
}

.about-project-section .author-name {
    font-weight: 700
}

.about-project-section .author-name,.about-project-section .author-position {
    font-style: normal;
    font-size: 16px;
    line-height: 21px
}

.about-project-section .author-position {
    font-weight: 300
}

@media screen and (max-width: 992px) {
    .about-project-section.case-study-section {
        flex-direction:column;
        gap: 48px
    }

    .about-project-section.case-study-section.white-background {
        background: #fff
    }

    .about-project-section.black-background .about-block,.about-project-section.white-background .about-block {
        padding-inline:16px;padding-right: 16px;
        padding-left: 16px;
        width: 100%
    }

    .about-project-section.black-background .quote-block {
        padding-block:80px;padding-inline:16px;padding: 0 16px 80px
    }

    .about-project-section.case-study-section .quote-block {
        flex: 0 0 auto
    }
}

@media screen and (max-width: 576px) {
    .about-project-section {
        padding-block:80px;
        padding-inline:16px;padding: 80px 16px;
        display: block
    }

    .about-project-section .download-button {
        text-align: center
    }

    .about-project-section .download-button,.about-project-section .download-button .case-study-button {
        margin-inline:auto;margin-right: auto;
        margin-left: auto
    }

    .about-project-section.white-background .quote-block {
        position: relative
    }

    .about-project-section.black-background .quote-block {
        background: transparent;
        height: auto;
        width: 100%;
        position: relative;
        left: 0
    }

    .about-project-section.black-background .about-content {
        max-width: 100%;
        padding-right: 0
    }

    .about-project-section .quote-cover {
        position: relative;
        left: 0;
        top: auto;
        transform: translateY(0);
        padding-block:0;padding-bottom: 0;
        padding-top: 0
    }

    .about-project-section .quote {
        padding: 24px;
        gap: 48px
    }

    .about-project-section .quote-mark {
        position: absolute;
        left: 24px;
        top: -21px;

    }
}



.project-in-detail-section {
    padding: 80px 0
}

.project-in-detail-section .case-study--text {
    margin-bottom: 40px
}

.project-in-detail-section .case-study--text h2 {
    font-size: 32px;
    line-height: .8;
    margin-bottom: 24px;
    text-transform: uppercase
}

.project-in-detail-section .case-study--text h2 strong {
    background-color: #97cf00;
    background-image: linear-gradient(130deg,#97cf00 -15%,#24b400 109%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.case-study--footer{
    margin-top: 24px;
}

.project-in-detail-open-section {
    background-color: #fff
}

.project-in-detail-open-section .container {
    display: grid;
    padding-top: 40px;
    padding-bottom: 40px
}

@media screen and (min-width: 992px) {
    .project-in-detail-open-section .container {
        gap:80px;
        padding-top: 80px;
        padding-bottom: 80px
    }
}

@media screen and (min-width: 1200px) {
    .project-in-detail-open-section .row.flex-lg-row-reverse .text-block__inner {
        padding-left:87px
    }
}

@media screen and (min-width: 992px) {
    .project-in-detail-open-section .row.flex-lg-row-reverse .image-block__inner {
        margin-right:-21px
    }
}

@media screen and (min-width: 1200px) {
    .project-in-detail-open-section .row:not(.flex-lg-row-reverse) .text-block__inner {
        padding-right:87px
    }
}

@media screen and (min-width: 992px) {
    .project-in-detail-open-section .row:not(.flex-lg-row-reverse) .image-block__inner {
        margin-left:-21px
    }
}

@media screen and (max-width: 991px) {
    .project-in-detail-open-section .image-block__inner,.project-in-detail-open-section .text-block__inner {
        margin-top:20px;
        margin-bottom: 20px
    }
}

.project-in-detail-open-section .project-in-detail-list {
    background: #191919;
    margin-top: 80px
}

.project-in-detail-open-section .project-in-detail-list .text-title {
    color: #fff;
    padding-bottom: 32px
}

.project-in-detail-open-section .project-in-detail-list ul li p {
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    letter-spacing: 0;
    text-align: left;
    opacity: .9
}

.project-in-detail-open-section .project-in-detail-list ul li.list-item:not(:last-of-type) {
    margin-bottom: 12px
}

@media screen and (max-width: 576px) {
    .project-in-detail-open-section .project-in-detail-list ul:last-child {
        padding-bottom:80px
    }
}

.project-in-detail-open-section .text-title {
    color: #000;
    font-size: 32px;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: 0;
    text-align: left;
    /*text-transform: uppercase;*/
    padding-bottom: 32px;
    margin-bottom: 0
}



.project-in-detail-open-section p {
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: 0;
    text-align: left
}

.project-in-detail-open-section .image-block img {
    height: 100%;
    width: 100%;
    -o-object-fit: contain;
    object-fit: contain;
filter: drop-shadow(0px 10px 15px rgba(0, 0, 0, 0.25));
    max-width: 80%;
    max-height: 530px;
    display: block;
    margin: 0 auto;
}


.project-in-detail-section .case-study--footer__text h3,.project-in-detail-section .case-study--footer__title {
    font-style: normal;
    font-weight: 500;
    font-size: 22px;
    line-height: 120%;
    margin-bottom: 6px
}

.project-in-detail-section .case-study--footer__list .list-item {
    margin-bottom: 8px
}

.project-in-detail-section .accordion-item.item-active .accordion-button svg {
    fill: #24b400;
    transform: rotate(0deg)
}

.project-in-detail-section .accordion-item.item-active .accordion-button svg path {
    fill: #24b400;
    stroke: #24b400
}


.start-reviews{
    background-color: #7b39fd;
    height: 600px;
    width: 15%;
    position: absolute;
    z-index: 1000000;
}

.project-in-detail-section .accordion-button svg {
    min-width: 16px;
    min-height: 16px;
    max-width: 16px;
    max-height: 16px
}
 .close-button {
        width: 30px;
        height: 30px;
        cursor: pointer;
        background: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.3s ease;
    }
    .close-button:hover {
        background-color: #f1f1f1;
    }
.newsletter{
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 50px;
}
.project-in-detail-section.white-background .accordion-button svg {
    fill: #151915;
    transform: rotate(90deg)
}

.project-in-detail-section.white-background .accordion-button svg path {
    fill: #151915;
    stroke: #151915
}

.project-in-detail-section.black-background {
    color: #fff
}

.project-in-detail-section.black-background .wysiwygBox>ul>li {
    color: #fff
}

.project-in-detail-section.black-background .accordion-button svg {
    fill: #fff;
    transform: rotate(90deg)
}

.project-in-detail-section.black-background .accordion-button svg path {
    fill: #fff;
    stroke: #fff
}

@media screen and (max-width: 991px) {
    .project-in-detail-section .container {
        width:100%;
        max-width: 100%;
        padding: 0 16px
    }

    .project-in-detail-section .desktop {
        display: none
    }

    .project-in-detail-section .mobile {
        display: block
    }

    .project-in-detail-section .image-block img {
        width: -webkit-fill-available;
        width: 100%;
        height: auto
    }

    .project-in-detail-section .image-block {
        max-width: 100%;
        width: 720px;
        margin: 0 auto 38px
    }

    .project-in-detail-section .wysiwygBox>ul>li {
        font-size: 16px
    }

    .project-in-detail-section .wysiwygBox>ul>li:before {
        top: 7px
    }
}

@media screen and (min-width: 992px) {
    .project-in-detail-section {
        padding-bottom:40px
    }

    .project-in-detail-section .container {
        width: 1440px;
        max-width: 96%;
        margin: 0 auto;
        padding: 0;
        display: flex
    }

    .project-in-detail-section .container>div {
        flex: 0 1 50%
    }

    .project-in-detail-section .in-detail-content {
        padding-left: 56px;
        max-width: 556px
    }

    .project-in-detail-section .image-cover {
        /*position: sticky;*/
        top: 80px;
        padding: 5rem;
    }

    .project-in-detail-section .image-cover img {
        /*min-height: 100%;*/
        /*min-width: 100%;*/
        width: -webkit-fill-available;
        max-width: 100%;
        filter: drop-shadow(0px 10px 15px rgba(0, 0, 0, 0.15));
    }


    .project-in-detail-section .mobile {
        display: none
    }
}

@media screen and (min-width: 992px) {
    #main {
        overflow-x:unset!important
    }
}

.wysiwygBox.accordion-body>*,.wysiwygBox.case-study--footer__text>*,.wysiwygBox.case-study--text>* {
    margin-bottom: 24px
}








/* Project Details Page End */

/* About Start */
.our-strength {
    background-color: #fff;
    padding-bottom: 20px
}

.our-strength-flex {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(3,1fr);
    grid-column-gap: 24px;
    grid-row-gap: 24px
}

.our-strength-naming {
    grid-column-start: 1;
    grid-column-end: 3
}

.our-strength-naming .section-header {
    max-width: 550px
}

.our-strength-card {
    background: var(--tp-theme-background);
    box-shadow: 0 8px 40px rgba(0,0,0,.08);
    height: 100%;
    width: 392px;
    display: flex;
    padding: 30px;
    align-items: flex-start;
    gap: 24px;
    border-radius: var(--border-radius);
}

.our-strength-card p {
    color: #fff;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 120%
}



.our-strength-icon {
    min-width: 70px
}

.our-strength-icon.icon-bg {
    background-size: contain;
    background-repeat: no-repeat;
    height: auto;
    aspect-ratio: 1
}

.our-strength-we-are {
    background: linear-gradient(130.27deg,#97cf00 -14.98%,#24b400 109.44%);
    box-shadow: 0 8px 40px rgba(0,0,0,.08);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 40px;
    grid-row-start: 2;
    grid-column-start: 3;
    grid-row-end: 4;
    text-transform: uppercase;
    max-height: 392px
}

.our-strength-we-are p {
    font-style: normal;
    font-weight: 700;
    font-size: 40px;
    margin-bottom: 10px;
    line-height: 120%
}

.our-strength-we-are span {
    font-style: normal;
    font-weight: 600;
    font-size: 35px;
    line-height: 80%
}

.our-strength-we-are-scofe {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    font-size: 16px;
    font-weight: 500;
}

.our-strength-card div:not(:first-child) {
    flex: 1 1
}

.our-strength-card p {
    width: 100%
}

.our-strength-icon {
    flex: 0 0 70px;
    width: 70px;
    position: relative
}
.section-about {
    padding-top: 120px;
    padding-inline: var(--inline-padding);
    padding-right: var(--inline-padding);
    padding-left: var(--inline-padding);
    padding-bottom: 120px;
}

@media screen and (max-width: 992px) {
    .our-strength {
        overflow:hidden
    }

    .our-strength .section-header {
        font-size: 8vw;
        line-height: 80%;
        max-width: 70vw!important;
        margin-bottom: 48px
    }

    .our-strength-flex-mobile {
        display: flex;
        flex-direction: row;
        gap: 0
    }

    .our-strength-flex-mobile .our-strength-card {
        height: 246px;
        max-width: 85vw;
        aspect-ratio: 6.1;
        background: #191919 !important;
        padding: 37px 24px;
        display: flex;
        flex-direction: column;
        gap: 0
    }

    .our-strength-flex-mobile .our-strength-card path,.our-strength-flex-mobile .our-strength-card svg {
        fill: #24b400
    }

    .our-strength-flex-mobile .our-strength-icon.icon-bg {
        background-size: 80%;
        height: auto;
        aspect-ratio: 1;
        background-position: 50%
    }

    .our-strength-flex-mobile .our-strength-card img {
        margin-left: 11px;
        margin-bottom: 30px;
        height: 50px;
        -webkit-filter: invert(42%) sepia(87%) saturate(898%) hue-rotate(72deg) brightness(100%) contrast(103%);
        filter: invert(42%) sepia(87%) saturate(898%) hue-rotate(72deg) brightness(100%) contrast(103%)
    }

    .our-strength-card.our-strength-we-are {
        background: linear-gradient(130.27deg,#97cf00 -14.98%,#24b400 109.44%)
    }

    .our-strength-card.our-strength-we-are p {
        font-size: 14px;
        line-height: 120%
    }

    .our-strength-card.our-strength-we-are .our-strength-we-are-scofe {
        gap: 8px  !important
    }

    .our-strength-card.our-strength-we-are .our-strength-we-are-scofe span {
        font-size: 24px !important;
        line-height: 120% !important;
    }

    .our-strength-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        margin-top: 24px;
        height: 10px
    }

    .our-strength-pagination .strength-car-bullet {
        height: 5px;
        width: 5px;
        background: #d9d9d9;
        transition: .5s
    }

    .our-strength-pagination .strength-car-bullet-active {
        height: 8px;
        width: 8px;
        background: linear-gradient(130.27deg,#97cf00 -14.98%,#24b400 109.44%);
        transform: rotate(45deg)
    }
}
@media screen and (min-width: 991px) and (max-width:1400px) {
    .footer-desktop,.section {
        padding-right:74px!important;
        padding-left: 74px!important
    }
}

@media screen and (min-width: 993px) {
    footer .footer-contact-us .footer-text {
        padding-top:48px
    }
}

@media screen and (max-width: 992px) {
    a.col2 {
        grid-column:unset
    }

    body .section.not-mobile {
        display: none
    }

    div.not-mobile {
        display: none!important
    }

    body,main {
        overflow-x: clip
    }

    /*main {
        margin-top: 56px
    }*/

    footer {
        overflow-x: clip
    }

    .section .section-name {
        font-size: 16px;
        line-height: 120%
    }

    body section .section {
        padding-inline:16px;padding: 65px 16px 64px
    }

    .section__collaboration-models-mobile .section {
        padding-inline:0;padding-right: 0;
        padding-left: 0
    }

    .tech-stack,.top-zone {
        flex-direction: column
    }

    .top-zone {
        display: flex;
        height: 777px
    }

    .top-zone h1 {
        font-size: 40px!important;
        line-height: 90%!important;
        max-width: 320px
    }

    .top-zone p {
        font-size: 18px!important;
        line-height: 120%!important;
        max-width: 320px
    }

    .top-zone .button {
        padding: 14px 24px!important;
        font-size: 14px;
        line-height: 80%!important;
        white-space: nowrap
    }

    div.top-zone .bg-img {
        bottom: 50px;
        height: 60%
    }

    div.top-zone .bg-img .section.approach h3 {
        font-size: 8vw;
        line-height: 80%;
        margin-bottom: 40px
    }

    div.top-zone .bg-img .section.approach .approach-weird-stuff {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 80vw
    }

    div.top-zone .bg-img .section.approach .approach-weird-stuff img {
        max-width: 66vw
    }

    div.top-zone .bg-img .section.approach .scene {
        scale: .8;
        margin-bottom: 50px
    }

    div.top-zone .bg-img #approach-p1,div.top-zone .bg-img #approach-p2,div.top-zone .bg-img #approach-p3 {
        display: none
    }

    div.top-zone .bg-img .tech-stack-mobile h3 {
        font-style: normal;
        font-weight: 400;
        font-size: 8vw;
        line-height: 80%;
        text-transform: uppercase;
        color: #151915;
        max-width: 60vw
    }

    div.top-zone .bg-img .tech-stack-mobile .tech-stack-picker {
        z-index: 1;
        top: 56px;
        height: -moz-fit-content;
        height: fit-content;
        margin-top: unset;
        margin-bottom: unset;
        padding-top: 50px;
        padding-bottom: 10px;
        background: #f9f9f9
    }

    div.top-zone .bg-img .tech-stack-mobile .tech-stack-cat-text {
        margin-bottom: 48px;
        display: flex;
        flex-direction: column;
        gap: 16px
    }

    div.top-zone .bg-img .tech-stack-mobile .tech-stack-cat-text h3 {
        font-style: normal;
        font-weight: 400;
        font-size: 20px;
        line-height: 90%;
        text-transform: capitalize;
        color: #151915;
        margin-top: 40px
    }

    div.top-zone .bg-img .tech-stack-mobile .tech-stack-cat-text p {
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 150%;
        color: #151915
    }

    div.top-zone .bg-img .tech-stack-mobile.section .tech-stack-cards-wrapper {
        grid-gap: 16px;
        grid-template-columns: repeat(2,1fr)
    }

    div.top-zone .bg-img .tech-stack-mobile.section .tech-stack-card {
        width: calc(50vw - 24px);
        height: auto;
        aspect-ratio: 1;
        position: relative
    }

    div.top-zone .bg-img .tech-stack-mobile.section .tech-stack-card:hover .content__images .hover {
        opacity: 1;
        visibility: visible
    }

    div.top-zone .bg-img .tech-stack-mobile.section .tech-stack-card .tech-stack-card-content {
        margin: 0 auto;
        width: unset;
        height: unset;
        display: flex;
        flex-direction: column;
        justify-content: flex-end
    }

    div.top-zone .bg-img .tech-stack-mobile.section .tech-stack-card .tech-stack-card-content .content__images {
        margin-bottom: 24px
    }

    div.top-zone .bg-img .tech-stack-mobile.section .tech-stack-card .tech-stack-card-content span {
        font-style: normal;
        font-weight: 400;
        font-size: 20px;
        line-height: 90%
    }

    div.top-zone .bg-img .section__collaboration-models-mobile .section__column {
        min-width: 100%
    }
}


.our-strength {
    background-color: #fff;
    padding-bottom: 20px
}

.our-strength-flex {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(3,1fr);
    grid-column-gap: 24px;
    grid-row-gap: 24px
}

.our-strength-naming {
    grid-column-start: 1;
    grid-column-end: 3
}

.our-strength-naming .section-header {
    max-width: 550px
}




.our-strength-icon {
    min-width: 70px
}

.our-strength-icon.icon-bg {
    background-size: contain;
    background-repeat: no-repeat;
    height: auto;
    aspect-ratio: 1
}

.our-strength-we-are {
    background: var(--tp-theme-primary);
    box-shadow: 0 8px 40px rgba(0,0,0,.08);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 40px;
    grid-row-start: 2;
    grid-column-start: 3;
    grid-row-end: 4;
    text-transform: uppercase;
    max-height: 392px;
    border-radius: var(--border-radius);
}

.our-strength-we-are p {
    font-style: normal;
    font-weight: 700;
    font-size: 40px;
    margin-bottom: 10px;
    line-height: 120%
}

.our-strength-we-are span {
    font-style: normal;
    font-weight: 400;
    font-size: 48px;
    line-height: 80%
}


.our-strength-card div:not(:first-child) {
    flex: 1 1;
    
}

.our-strength-we-are-scofe{
    gap: 6px;
    margin-top: 16px;
    font-size: 14px;
}

.our-strength-we-are-scofe span{
    font-size: 30px ;
    font-weight: 500 ;
}

.our-strength-card p {
    width: 100%
}

.our-strength-icon {
    flex: 0 0 70px;
    width: 70px;
    position: relative
}

@media screen and (max-width: 992px) {
    .our-strength {
        overflow:hidden
    }

    .our-strength .section-header {
        font-size: 8vw;
        line-height: 120%;
        max-width: 70vw !important;
        margin-bottom: 48px
    }

    .our-strength-flex-mobile {
        display: flex;
        flex-direction: row;
        gap: 0
    }

    
    .our-strength-flex-mobile .our-strength-card {
        height: 246px;
        max-width: 85vw;
        aspect-ratio: 6.1;
        background: #191919 !important;
        padding: 37px 24px;
        display: flex;
        flex-direction: column;
        gap: 0
    }

    .our-strength-flex-mobile .our-strength-card path,.our-strength-flex-mobile .our-strength-card svg {
        fill: #24b400
    }

    .our-strength-flex-mobile .our-strength-icon.icon-bg {
        background-size: 80%;
        height: auto;
        aspect-ratio: 1;
        background-position: 50%
    }

    .our-strength-flex-mobile .our-strength-card img {
        margin-left: 11px;
        margin-bottom: 30px;
        height: 50px;
        -webkit-filter: invert(42%) sepia(87%) saturate(898%) hue-rotate(72deg) brightness(100%) contrast(103%);
        filter: invert(42%) sepia(87%) saturate(898%) hue-rotate(72deg) brightness(100%) contrast(103%)
    }

    .our-strength-card.our-strength-we-are {
        background:var(--tp-theme-1)
    }

    .our-strength-card.our-strength-we-are p {
        font-size: 14px;
        line-height: 120%
    }
    
    .our-strength-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        margin-top: 24px;
        height: 10px
    }

    .our-strength-pagination .strength-car-bullet {
        height: 5px;
        width: 5px;
        background: #d9d9d9;
        transition: .5s
    }

    .our-strength-pagination .strength-car-bullet-active {
        height: 8px;
        width: 8px;
        background: linear-gradient(130.27deg,#97cf00 -14.98%,#24b400 109.44%);
        transform: rotate(45deg)
    }
}

/* About End */


/* Recognition Start  */

.about-global-recognition .achievements-section {
    background: #191919;
    color: #fff
}

.about-global-recognition .achievements-section.black-background {
    background: linear-gradient(297.02deg,#000 23.43%,#323232 88.6%);
    color: #fff
}

.about-global-recognition .achievements-section.silver-background {
    background: #f9f9f9;
    color: #151915
}

.about-global-recognition .achievements-section .section-name,.about-global-recognition .achievements-section.black-background .section-name {
    color: #fff
}

.about-global-recognition .achievements-section.silver-background .section-name {
    color: var(--text-black,#151915)
}

.about-global-recognition .achievements-section .section-header {
    margin-bottom: 72px
}

.about-global-recognition .achievements-filter .button-rounded,.about-global-recognition .black-background .achievements-filter .button-rounded {
    color: #fff;
    background: #303030
}

.about-global-recognition .silver-background .achievements-filter .button-rounded {
    color: var(--text-black,#151915);
    background: rgba(0,0,0,.1)
}

.about-global-recognition .achievements-filter .button-click {
    color: #fff;
    background: linear-gradient(130.27deg,#97cf00 -14.98%,#24b400 109.44%)
}

.about-global-recognition .achievements-filter .button-rounded.active,.about-global-recognition .achievements-filter .button-rounded:active,.about-global-recognition .achievements-filter .button-rounded:hover {
    color: #fff;
    background: var(--tp-theme-1)
}

.about-global-recognition .achievements-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 12px
}

.about-global-recognition .achievements-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    height: 140px;
    padding: 20px;
    background: #202020;
    box-shadow: 0 8px 40px rgba(0,0,0,.08)
}

.about-global-recognition .achivement {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 22px
}

.about-global-recognition .achivement-from {
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 20px;
    text-transform: capitalize;
    align-self: center
}

.about-global-recognition .achivement-from--container {
    width: 90%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px
}

.about-global-recognition .achivement-logo {
    max-height: 100px;
    max-width: 100%
}

.about-global-recognition .achievements-card--2 .achivement-from {
    font-size: 12px;
    line-height: 20px
}

.about-global-recognition .achievements-card--5 .achivement-from {
    font-size: 14px;
    line-height: 20px
}

.about-global-recognition .achievements-card--8 .achivement-from {
    font-style: normal;
    font-weight: 800;
    font-size: 36px;
    line-height: 80%
}

.about-global-recognition .achievements-card--10 .achivement-from {
    text-transform: uppercase
}

.about-global-recognition .achievements-card--3 .achivement,.about-global-recognition .achievements-card--7 .achivement {
    font-size: 16px;
    line-height: 16px
}

.about-global-recognition .achievements-card--4 .achivement {
    font-size: 16px;
    line-height: 19px
}

.about-global-recognition .achievements-card--10 .achivement,.about-global-recognition .achievements-card--5 .achivement,.about-global-recognition .achievements-card--6 .achivement,.about-global-recognition .achievements-card--9 .achivement {
    font-size: 16px;
    line-height: 18px
}

.about-global-recognition .achievements-card--8 .achivement {
    font-size: 16px;
    line-height: 16px;
    padding-left: 60px;
    width: 110%
}

.about-global-recognition .achievements-card--4.achievements-card {
    gap: 26px
}

.about-global-recognition .achievements-card--10.achievements-card,.about-global-recognition .achievements-card--5.achievements-card,.about-global-recognition .achievements-card--9.achievements-card {
    gap: 20px
}

.about-global-recognition .achievements-card--6.achievements-card {
    gap: 27px
}

.about-global-recognition .achievements-card--7.achievements-card {
    gap: 10px
}

.about-global-recognition .achievements-card--8.achievements-card {
    gap: 1px
}

.about-global-recognition .achievements-card--7 .achivement-from--container {
    width: 110%
}

.about-global-recognition .achivement-from--container--2 {
    margin-left: auto;
    align-self: center;
    display: flex;
    flex-direction: row;
    gap: 10px
}

.about-global-recognition .achievements-card--3 .achivement-from--container--2 {
    gap: 3px
}

.about-global-recognition .achivement-from--1 {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    margin-right: 2px
}

.about-global-recognition .achievements-card--6 .achivement-from--1 {
    font-size: 12px;
    line-height: 15px;
    text-transform: uppercase;
    margin: 0
}

.about-global-recognition .achievements-link:hover {
    cursor: pointer
}

.about-global-recognition .achievements-link p.achivement {
    color: #fff;
    text-decoration: inherit
}

.about-global-recognition .achievements-section .mobile {
    gap: 16px;
    justify-content: center
}

@media screen and (min-width: 576px) {
    .about-global-recognition .achievements-section .mobile {
        display:none
    }
}

.about-global-recognition .achievements-section .mobile.new img.achivement-logo {
    -o-object-fit: contain;
    object-fit: contain;
    width: 100%;
    height: 100%
}

.about-global-recognition .achievements-section .mobile .recog-card-container {
    min-width: 164px;
    max-width: 40%;
    min-height: 164px;
    padding: 0;
    border-radius: var(--border-radius);
}

.about-global-recognition .achievements-section .mobile .recog-card-container .achievements-card {
    gap: unset;
    height: 100%;
    padding: 16px;
    border-radius: var(--border-radius);

}

.about-global-recognition .achievements-section .mobile .recog-card-container .achievements-card .achivement-from--container {
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
    border-radius: var(--border-radius);

}
.recog-card-container{
    border-radius: var(--border-radius);
}
#certificatiosn {
    border-radius: var(--border-radius);
}
.about-global-recognition .achievements-section .mobile .recog-card-container .achievements-card .achivement {
    font-size: 14px;
    line-height: normal
}

.about-global-recognition .achievements-section.new .row.desktop {
    gap: 24px
}

.about-global-recognition .achievements-section.new div.recog-card-container {
    width: -moz-fit-content;
    width: fit-content;
    padding: 0;
    min-width: 184px;
    border-radius: var(--border-radius);
}

.about-global-recognition .achievements-section.new div.achievements-card {
    aspect-ratio: 1;
    width: 184px;
    height: auto;
    align-items: center;
    gap: 16px;
    position: relative;
    padding-inline:16px;padding-right: 16px;
    padding-left: 16px;
    border-radius: var(--border-radius);
}

.about-global-recognition .achievements-section.new div.achievements-card div.star {
    position: absolute;
    right: 0;
    top: 0;
    width: 23px;
    height: 23px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #57b12d
}

.about-global-recognition .achievements-section.new div.achievements-card .achivement-from--container {
    display: flex;
    width: 144px;
    height: 96px;
    justify-content: center;
    align-items: center;
    position: relative
}

.about-global-recognition .achievements-section.new div.achievements-card .achivement-from--container img {
    -o-object-fit: contain;
    object-fit: contain;
    height: 100%;
    width: 100%
}

.about-global-recognition .achievements-section.new div.achievements-card p.achivement {
    font-size: 16px;
    line-height: 100%;
    text-align: center;
    color: #fff;
    white-space: nowrap
}

.section {
    padding-top: 120px;
    padding-inline:var(--inline-padding);padding-right: var(--inline-padding);
    padding-left: var(--inline-padding);
    padding-bottom: 120px
}

.section.no-padding {
    padding: unset
}


.section h2.section-header.color-white {
    color: #fff
}
.color-white{
    color:#fff;
}
.section-header {
    font-size: 42px;
    line-height: 48px;
}

.section-name {
    font-size: 20px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: 0;
    text-align: left;
    margin-bottom: 16px
}


.button-rounded {
    font-style: normal;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: center;
    text-align: center;
    text-transform: uppercase;
    background: rgba(25,25,25,.1);
    color: #151915;
    padding: 6px 16px;
    border-radius: 200px
}

.button-click {
    color: #fff;
    background: linear-gradient(130.27deg,#97cf00 -14.98%,#24b400 109.44%)
}

.button-rounded:active,.button-rounded:hover {
    color: #fff;
    background: linear-gradient(130.27deg,#97cf00 -14.98%,#24b400 109.44%)
}



.mr-btn-24 {
    margin-bottom: 24px
}


.mr-btn-24 {
    margin-bottom: 24px
}

.block {
    background-color: #fff;
    padding: 32px;
    height: 100%
}

.block img {
    max-width: 100%;
    max-height: 150px;
    -o-object-fit: cover;
    object-fit: cover
}

.block-header {
    font-size: 20px;
    line-height: 120%;
    text-transform: capitalize;
    color: #151915;
    margin-bottom: 16px
}

.block-header,.block-text {
    font-style: normal;
    font-weight: 400
}

.block-text {
    font-size: 16px;
    line-height: 150%;
    opacity: .9
}

.col-2-row-2 {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-column-gap: 24px;
    grid-row-gap: 24px
}


.inline-pading {
    padding-inline:var(--inline-padding);padding-right: var(--inline-padding);
    padding-left: var(--inline-padding)
}

.centered-element {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%)
}

.text-black {
    color: #151915
}

.button-rounded {
    font-style: normal;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: center;
    text-align: center;
    text-transform: uppercase;
    background: rgba(25,25,25,.1);
    color: #151915;
    padding: 6px 16px;
    border-radius: 200px
}

.button-click {
    color: #fff;
    background: linear-gradient(130.27deg,#97cf00 -14.98%,#24b400 109.44%)
}

.button-rounded:active,.button-rounded:hover {
    color: #fff;
    background: linear-gradient(130.27deg,#97cf00 -14.98%,#24b400 109.44%)
}

.mr-btn-24 {
    margin-bottom: 24px
}

.mr-btn-16 {
    margin-bottom: 16px
}

.mr-btn-32 {
    margin-bottom: 32px
}

.ssp-400 {
    font-weight: 400
}

.image-btn,.image-btn:link,.image-btn:visited {
    display: inline-block;
    padding: 8px 11px;
    width: 39px;
    height: 39px;
    position: relative;
    color: #151915;
    cursor: pointer
}

.futura-bold {
    font-style: normal;
    font-weight: 700
}


.section-description {
    margin-top: 48px;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 150%
}


.our-strength-flex {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 24px;
    grid-row-gap: 24px;
}


/* Recognition End */



/*  Our Team Styles start */

.our-team {
    padding-top: 120px
}

.our-team-header {
    display: flex;
    justify-content: space-between
}

.our-team-naming {
    text-align: right
}

.our-team-naming h2 {
    max-width: 500px
}

.our-team-naming h3 {
    text-align: right
}

.our-team-picker {
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding-top: 112px
}

.our-team-picker .button {
    text-align: center;
    line-height: 20px;
    border-radius: 200px;
    padding: 8px 16px 4px;
    max-height: 32px;
    background: rgba(25,25,25,.1);
    color: #151915;
    white-space: nowrap
}

.our-team-picker .button.active {
    background: linear-gradient(130.27deg,#97cf00 -14.98%,#24b400 109.44%);
    color: #fff
}

.our-team-team {
    padding-top: 64px;
    display: grid;
    grid-template-columns: repeat(6,1fr);
    grid-gap: 24px;
    grid-row-gap: 40px;
    direction: rtl;
    overflow: hidden
}

.our-team-team-nav {
    margin-top: 64px;
    display: flex;
    gap: 24px;
    justify-content: center;
    align-items: center
}

.our-team-team-nav button {
    background-color: #fff
}

.our-team-team-nav button.swiper-button-disabled {
    background-image: none;
    background-origin: unset;
    background-clip: unset;
    box-shadow: unset;
    border-color: #d9d9d9
}

.our-team-team-nav button.swiper-button-disabled path,.our-team-team-nav button.swiper-button-disabled svg,.our-team-team-nav svg {
    fill: #d9d9d9
}

.our-team-team-nav .swiper-button-lock {
    display: none
}

.our-team-person {
    display: flex;
    flex-direction: column;
    text-align: left;
    max-width: 184px;
    position: relative
}

.our-team-person img {
    margin-bottom: 12px;
    height: 206px
}

@media screen and (max-width: 400px) {
    .our-team-person img {
        height:190px
    }
}

@media screen and (max-width: 380px) {
    .our-team-person img {
        height:180px
    }
}

@media screen and (max-width: 360px) {
    .our-team-person img {
        height:170px
    }
}

@media screen and (max-width: 340px) {
    .our-team-person img {
        height:160px
    }
}

@media screen and (max-width: 320px) {
    .our-team-person img {
        height:152px
    }
}

.our-team-person span {
    margin-bottom: 4px
}

.our-team-person-name {
    font-size: 18px;
    line-height: 100%;
    text-transform: capitalize
}

.our-team-person-position {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    text-transform: capitalize
}

.our-team-person.skip-person-block {
    height: 259px
}

.our-team-team.tab-filter-fun.hide-tab,.our-team-team.tab-filter-office.hide-tab {
    display: none!important
}

.our-team-team.tab-filter-fun.tab-content,.our-team-team.tab-filter-office.tab-content {
    display: block;
    overflow: hidden;
    direction: ltr;
    position: relative
}

.our-team-team.tab-filter-fun .office-pictures-wrapper,.our-team-team.tab-filter-office .office-pictures-wrapper {
    display: flex;
    flex-direction: row;
    direction: ltr
}

.our-team-tabs {
    overflow: hidden
}

.our-team-swiper {
    padding-top: 64px;
    display: flex
}

.our-team-swiper .our-team-team-nav {
    display: flex;
    margin-top: 64px;
    gap: 24px;
    justify-content: center;
    align-items: center
}

.our-team-swiper .our-team-team-nav button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 39px;
    height: 39px;
    border: 2px solid #d9d9d9
}

.our-team-swiper .our-team-team-nav svg {
    stroke: #d9d9d9;
    fill: #d9d9d9
}

.our-team-swiper-frame {
    display: grid;
    grid-row-gap: 32px
}

.team-slide img {
    -o-object-fit: cover;
    object-fit: cover
}

.team-slide.office-custom-layout {
    direction: ltr;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(3,1fr);
    grid-gap: 24px
}

.team-slide.office-custom-layout .row2span.col2 {
    grid-row-start: 1;
    grid-row-end: 3;
    grid-column: 2
}

.team-slide.office-custom-layout img.col1.row2 {
    grid-column: 1;
    grid-row: 2
}

.team-slide.office-custom-layout img:last-of-type {
    grid-row: 3;
    grid-column: 1/span 2;
    width: 100%
}

.team-slide.office-custom-layout img:first-child,.team-slide.office-custom-layout img:nth-child(2) {
    width: 288px;
    height: 230px
}

.team-slide.office-custom-layout img:nth-child(3) {
    width: 288px;
    height: 484px
}

.team-slide.office-custom-layout img:nth-child(4) {
    width: 600px;
    height: 232px
}

.team-slide.layout_1 img {
    max-height: 540px
}

.team-slide.layout_2,.team-slide.layout_4-wide,.team-slide.layout_6 {
    display: grid;
    grid-template-rows: repeat(2,254px);
    row-gap: 32px;
    -moz-column-gap: 24px;
    column-gap: 24px
}

.team-slide.layout_2 img,.team-slide.layout_4-wide img,.team-slide.layout_6 img {
    width: auto;
    height: 100%
}

.team-slide.layout_2 img {
    width: 184px
}

.team-slide.layout_4-wide .row-1-col-1-3 {
    grid-column-start: 1;
    grid-column-end: 4;
    width: 1016px
}

.team-slide.layout_4-wide .row-2-col-1,.team-slide.layout_4-wide .row-2-col-2 {
    width: 392px
}

.team-slide.layout_4-wide .row-2-col-3 {
    width: 184px
}

.team-slide.layout_6 .row-1-col-3-4 {
    grid-column-start: 3;
    grid-column-end: 5
}

.team-slide.layout_6 .row-2-col-1-2 {
    grid-column-start: 1;
    grid-column-end: 3
}

.team-slide.layout_6 .row-1-col-1,.team-slide.layout_6 .row-1-col-2,.team-slide.layout_6 .row-2-col-3,.team-slide.layout_6 .row-2-col-4 {
    width: 184px
}

.team-slide.layout_6 .row-1-col-3-4,.team-slide.layout_6 .row-2-col-1-2 {
    width: 392px
}

.team-slide.office-1-vert img {
    width: 600px;
    height: 740px
}

.team-slide.office-1-vert-2-hor {
    display: flex
}

.team-slide.office-2-vert {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.team-slide.office-2-vert img {
    width: 288px;
    height: 358px
}

@media screen and (max-width: 992px) {
    section .our-team {
        margin:unset
    }

    .our-team .our-team-picker {
        position: sticky;
        position: -webkit-sticky;
        top: 56px;
        background: #f9f9f9;
        z-index: 910;
        padding-bottom: 20px
    }

    .our-team .our-team-header {
        display: flex;
        flex-direction: column-reverse
    }

    .our-team .our-team-header .our-team-naming,.our-team .our-team-header .our-team-naming h2,.our-team .our-team-header .our-team-naming h3 {
        text-align: unset
    }

    .our-team .our-team-picker {
        padding-top: 32px;
        gap: 9.5px
    }

    .our-team .our-team-picker button {
        white-space: nowrap
    }

    .our-team .our-team-team {
        grid-template-columns: repeat(2,1fr);
        direction: revert;
        grid-gap: 16px;
        justify-items: center;
        padding-top: 40px
    }

    .our-team .our-team-team .our-team-person {
        width: calc(50vw - 24px)
    }

    .our-team .our-team-naming h2 {
        font-size: 8vw;
        line-height: 80%;
        max-width: 70vw
    }

    .office-mobile-pictures {
        display: grid;
        grid-template-rows: auto;
        grid-template-columns: repeat(2,1fr);
        grid-column-gap: 16px;
        grid-row-gap: 24px
    }

    .office-mobile-pictures img {
        width: 100%
    }
}


/*  Our Team Styles end */

.policy-wrapper {
    margin-top: 20px;
    margin-bottom: 30px;
}

.section-parent{
    margin-top: 40px;
    margin-bottom: 35px;
}

.pp-plain-para p {
        font-size: 16px;
    line-height: 22.4px;
    margin-bottom: 10px;
    font-weight: 400;
}


.section-parent:not(:first-of-type) {
    /*padding-bottom:56px;*/
}

.section-parent:nth-of-type(2) {
    /*padding-top: 40px;*/
    /*padding-bottom: 40px;*/
}

.spacing-top{
    margin-top: 20px;
}

.section-parent h3.pp-content-header {
    font-size: 22px;
    margin-bottom: 26px;
    line-height: 19.6px;
    /*margin-bottom: 14px;*/
    /*text-transform: uppercase;*/
    font-weight: 700;
}

.section-parent h3.pp-content-header span.color-gradient {
    padding-bottom: 0px;
    display: inline-block; 
}


.section-parent.pp-hero {
    background-color: var(--tp-theme-background);
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0px;
    margin-bottom: 80px;
}

.section-parent.pp-hero h2 {
    
    font-size: 50px;
    line-height: 70px;
    height: fit-content;
    display: block;
    margin-top: 100px;
}

.section-parent.pp-first-para p {
    
    font-size: 16px;
    line-height: 22.4px;
    margin-top:30px;
    margin-bottom: 10px
}

.section-parent.pp-first-para p a {
    background-color: #97cf00;
    background-image: linear-gradient(130deg,#97cf00 -15%,#24b400 109%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    text-decoration: underline!important;
    border-bottom: 1px solid #97cf00
}

.section-parent.pp-first-para p strong {
    font-weight: 700
}

.section-parent.pp-first-para p:last-of-type {
    margin-bottom: 0
}

@media (max-width: 992px) {

    
    .section-parent.pp-hero {
        height: 160px
    }

    .section-parent.pp-hero h2 {
        font-size: 40px;
        line-height: 40px;
        text-transform: uppercase;
        white-space: break-spaces
    }
}

.color-gradient{
color: white;
}

.pp-contact-info-wrapper{
    margin-bottom: 100px;
}



.pp-contact-info-wrapper .pp-contact-info-row {
    display: flex;
    gap: 8px
}

.pp-contact-info-wrapper .pp-contact-info-row .pp-contact-info-item {
    display: flex;
    padding: 6px 16px;
    background: rgba(38,146,123,10%);
    border-radius: 200px;
    gap: 4px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700
}

.pp-contact-info-wrapper .pp-contact-info-row .pp-contact-info-item a {
    text-decoration: underline!important;
    color: rgba(25,25,25,.9)
}

.pp-contact-info-wrapper .pp-contact-info-row .pp-contact-info-item .pp-contact-info-label {
    color: #afafaf
}

@media (max-width: 992px) {
    .pp-contact-info-row {
        flex-direction:column
    }

    .pp-contact-info-row .pp-contact-info-item {
        width: -moz-fit-content;
        width: fit-content
    }
}

.pp-list-highlighted-bullet-wrapper .pp-list-highlighted-bullet-para {
    font-size: 16px;
    line-height: 22.4px;
    margin-top: 10px;
    margin-bottom: 10px
}

.pp-list-highlighted-bullet-wrapper .pp-list-highlighted-bullet-list-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 0;
    margin-bottom: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400
}

.pp-list-highlighted-bullet-wrapper .pp-list-highlighted-bullet-list-wrapper .pp-list-highlighted-bullet-point {
    font-weight: 600
}

.pp-list-highlighted-bullet-wrapper .pp-list-highlighted-bullet-list-wrapper li {
    position: relative;
    padding-left: 28px
}

.pp-list-highlighted-bullet-wrapper .pp-list-highlighted-bullet-list-wrapper li:before {
    width: 10px;
    height: 10px;
    content: "";
    position: absolute;
    top: 7px;
    left: 5px;
    /* background: linear-gradient(130deg,#97cf00 -15%,#24b400 109%); */
    background-color: var(--tp-theme-1);
    transform: rotate(45deg)
}

.pp-list-paragraphs-highlighted-wrapper .pp-list-highlighted-bullet-para {
    font-size: 16px;
    line-height: 22.4px;
    margin-bottom: 10px;
    margin-top: 10px;
    font-weight: 400
}

.pp-list-paragraphs-highlighted-bolder {
    font-size: 18px;
    line-height: 27px;
    /*margin-bottom: 5px;*/
    font-weight: 600
}

.pp-list-paragraphs-highlighted-wrapper .pp-list-paragraphs-highlighted-bullet-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 0;
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;

}

.pp-list-paragraphs-highlighted-wrapper .pp-list-paragraphs-highlighted-bullet-list li {
    position: relative;
    padding-left: 28px
}

.pp-list-paragraphs-highlighted-wrapper .pp-list-paragraphs-highlighted-bullet-list li:before {
    width: 10px;
    height: 10px;
    content: "";
    position: absolute;
    top: 7px;
    left: 5px;
    background-color: var(--tp-theme-1);
    transform: rotate(45deg)
}

.pp-plain-para-wrapper .pp-plain-para-content {
    font-size: 16px;
    line-height: 22.4px;
    margin-top: 5px;
    font-weight: 400
    
}

.pp-plain-para-wrapper .pp-plain-para-content:last-of-type {
    margin-top: 10px;

    margin-bottom: 0
}

/* === Cookie Table Styling === *//* === Polished Cookie Table Styling === *//* === CodeSuite-Themed Cookie Table Styling === */
.pp-cookie-table-wrapper {
    overflow-x: auto;
    margin-top: 22px;
    /*box-shadow: 0 8px 28px rgba(25, 25, 25, 0.08);*/
}

.cookie-border {
    border-radius: 8px;
}

.pp-cookie-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 15px;
    line-height: 22px;
    color: #191919;
    overflow: hidden;
    /*box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);*/
}

.pp-cookie-table thead {
    border-radius: 16px 16px 0 0;
}

.pp-cookie-table th {
    background: #26927B; /* CodeSuite primary color */
    color: #fff;
    font-weight: 600;
    text-align: left;
    padding: 16px 20px;
    font-size: 15px;
    border: none;
    white-space: nowrap;
    letter-spacing: 0.3px;
}

.pp-cookie-table td {
    padding: 16px 20px;
    border-top: 1px solid #f0f0f0;
    background-color: #fff;
    vertical-align: top;
    transition: background-color 0.25s ease;
}

.pp-cookie-table tbody tr:nth-child(even) td {
    background-color: #f9f9f9;
}

.pp-cookie-table tbody tr:hover td {
    background-color: #eefaf6;
}

.pp-cookie-table td a {
    color: #26927B;
    text-decoration: underline;
    font-weight: 500;
    word-break: break-word;
    transition: color 0.2s;
}

.pp-cookie-table td a:hover {
    color: #FEC563; /* highlight brand color on hover */
}



.pp-cookie-table td:last-child,
.pp-cookie-table th:last-child {
    min-width: 160px;
}

@media (max-width: 768px) {
    .pp-cookie-table th,
    .pp-cookie-table td {
        padding: 12px 14px;
        font-size: 14px;
    }

    .pp-cookie-table td:first-child,
    .pp-cookie-table th:first-child {
        min-width: 150px;
    }
}









:root {
    --inline-padding: calc(50% - 613px)
}

:root {
    --mobile-padding: 16px
}

h1,h2,p,ul {
    margin-bottom: unset
}

ul {
    padding-left: unset
}

.noClick {
    pointer-events: none
}

.hero-blog-section__head {
    padding-inline:var(--inline-padding);padding-right: var(--inline-padding);
    padding-left: var(--inline-padding);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 32px
}

.hero-blog-section__head h1.head__title {
    font-size: 80px;
    font-weight: 700;
    line-height: 70px;
    /*text-transform: uppercase*/
}

.hero-blog-section__head p.head__subtitle {
    color:#ffffff;
    max-width: 555px;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px
}

.date-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    align-self: self-start;
    gap: 8px
}

.date-wrapper__date {
color: #000000;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%
}

.date-wrapper__delimiter {
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
background-color: var(--tp-theme-1);
}

.date-wrapper__expire {
color: #000000;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    display: flex;
    gap: 8px;
    align-items: center
}

.hero-blog-section {
    background-size: cover;
    min-height: 350px;
    padding-block:108px;
    padding-bottom: 70px;
    padding-top: 25px;
    background-position: 50%;
    background-color: #26927B;
  box-shadow: inset 0px -10px 25px rgba(0, 0, 0, 0.5),
              inset 0px 10px 25px rgba(0, 0, 0, 0),
              inset 10px 0px 25px rgba(0, 0, 0, 0),
              inset -10px 0px 25px rgba(0, 0, 0, 0);


}

.hero-blog-section__head {

    color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 32px
}

.hero-blog-section__head h1.head__title {
    font-size: 80px;
    font-weight: 700;
    line-height: 70px;
    /*text-transform: uppercase*/
}

.hero-blog-section__head p.head__subtitle {
    color:#ffffff;
    max-width: 555px;
    font-size: 17.5px;
    font-weight: 400;
    line-height: 28px
}

.date-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    align-self: self-start;
    gap: 8px
}




.blog-posts-section {
    padding-bottom: 30px
}

.blog-posts-section ul.post-body__category {
    display: flex;
    flex-direction: row;
    gap: 6px;
    flex-wrap: wrap
}

.blog-posts-section ul.post-body__category li.category-item {
    /* height: 26px; */
    display: flex;
    padding: 2px 16px;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    color: #fff;
    background: var(--tp-theme-background)
}

.blog-posts-section ul.post-body__category li.category-item:has(a.selected) {
    background: linear-gradient(130deg,#97cf00 -14.98%,#24b400 109.44%)
}

.blog-posts-section ul.post-body__category li.category-item a {
    margin-top: 2px;
    font-feature-settings: "clig" off,"liga" off;
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}

.blog-posts-section ul.post-body__category li.category-item:hover {
    color: #fff;
    background: linear-gradient(130.27deg, #ffce7b -14.98%, #fbb53a 109.44%)
}

.blog-posts-section .sidebar {
    background: #fff;
    padding: 48px 0
}

.blog-posts-section .sidebar .sidebar_widget {
    max-width: 1222px;
    margin: 0 auto
}

.blog-posts-section .sidebar .sidebar_widget .category-item {
    height: 32px
}

.blog-posts-section .sidebar .blog-search-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between
}

.blog-posts-section .sidebar form input:-webkit-autofill,.blog-posts-section .sidebar form input:-webkit-autofill:focus,.blog-posts-section .sidebar form input:-webkit-autofill:hover {
    background-color: inherit;
    transition: background-color 0s 600000s,color 0s 600000s!important
}

.blog-posts-section .sidebar form input.search-field {
    background-color: inherit;
    border: none;
    outline :none;
}

.blog-posts-section .sidebar form.blog-search {
    height: 32px;
    display: flex;
    width: 288px;
    padding: 6px 12px;
    align-items: center;
    gap: 8px;
    border-radius: 200px;
    border: 1px solid rgba(21,25,21,.32);
    outline: 0;
    margin-bottom: 32px
}

.blog-posts-section .sidebar form.blog-search .blog-search-btn {
    background-size: contain;
    display: flex;
    width: 20px;
    height: 20px;
    background: url(../../../images/search.png) no-repeat
}

.blog-posts-section .sidebar form.blog-search:focus-visible,.blog-posts-section .sidebar form.blog-search:hover {
    border: 1px solid var(--Text-Green,#57b12d)
}

.blog-posts-section .sidebar form.blog-search input[type=search] {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    text-align: start
}

.blog-posts-section .sidebar form.blog_filters_form {
    width: 288px
}

.blog-posts-section .sidebar form.blog_filters_form li.blog_results-filter__item {
    text-decoration: none;
    display: flex;
    width: 100%;
    padding: 6px 16px;
    justify-content: space-between;
    align-items: center;
    border-radius: 200px;
    background: #f9f9f9;
    position: relative;
    margin-bottom: 0;
    border: none;
    font-size: 18px;
    color: #57b12d;
    transition-delay: .1s;
    transition: .2s;
    cursor: pointer
}

.blog-posts-section .sidebar form.blog_filters_form li.blog_results-filter__item:before {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    top: 11px;
    right: 20px;
    width: 8px;
    height: 8px;
    border-bottom: 2px solid #000;
    border-right: 2px solid #000;
    transition: all .2s;
    transform: rotate(45deg);
    pointer-events: none
}

.blog-posts-section .sidebar form.blog_filters_form li.blog_results-filter__item.active {
    transition-delay: 0s
}

.blog-posts-section .sidebar form.blog_filters_form li.blog_results-filter__item.active:before {
    top: 13px;
    border-image-slice: 1;
    border-image-source: linear-gradient(130.27deg,#97cf00 -14.98%,#24b400 109.44%);
    transform: rotate(-135deg)
}

.blog-posts-section .sidebar form.blog_filters_form li.blog_results-filter__item.results-filter__title {
    display: block;
    padding: 2.5px 45px 2.5px 16px;
    font-size: 14px;
    line-height: 1.9;
    font-weight: 600;
    color: #131c24;
    transition: .2s
}

.blog-posts-section .sidebar form.blog_filters_form li.blog_results-filter__item.results-filter__title[data-counter]:after {
    content: "(+" attr(data-counter) ")";
    display: inline-block;
    margin-left: .35em;
    color: #afafaf
}

@media (max-width: 970px) {
    .blog-posts-section .sidebar form.blog_filters_form li.blog_results-filter__item.results-filter__title {
        padding-right:0
    }
}

.blog-posts-section .sidebar form.blog_filters_form li.blog_results-filter__item .results-filter__dropdown {
    display: none;
    position: absolute;
    z-index: 99;
    top: calc(100% + 8px);
    left: 0;
    overflow: hidden;
    overflow-y: scroll;
    width: 288px;
    padding: 24px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    border-radius: 16px;
    background: #f9f9f9;
    box-shadow: 0 8px 12px 0 rgba(0,0,0,.05)
}

.blog-posts-section .sidebar form.blog_filters_form li.blog_results-filter__item .results-filter__dropdown::-webkit-scrollbar {
    width: 3px
}

.blog-posts-section .sidebar form.blog_filters_form li.blog_results-filter__item .results-filter__dropdown::-webkit-scrollbar-track {
    background: 0 0
}

.blog-posts-section .sidebar form.blog_filters_form li.blog_results-filter__item .results-filter__dropdown::-webkit-scrollbar-thumb {
    border: 1px solid transparent;
    border-radius: 20px;
    background-color: grey
}

.blog-posts-section .sidebar form.blog_filters_form li.blog_results-filter__item .results-filter__dropdown li {
    margin-bottom: 19px;
    padding-left: 25px;
    line-height: 20px;
    list-style: none
}

.blog-posts-section .sidebar form.blog_filters_form li.blog_results-filter__item .results-filter__dropdown li .label-filter {
    position: relative;
    display: block;
    font-size: 14px;
    color: #131c24;
    text-align: left;
    white-space: nowrap;
    cursor: pointer
}

.blog-posts-section .sidebar form.blog_filters_form li.blog_results-filter__item .results-filter__dropdown li .label-filter:before {
    content: "";
    position: absolute;
    border: 1px solid #768693;
    top: 0;
    left: -25px;
    height: 20px;
    width: 20px;
    border-image-slice: 1;
    border-image-source: linear-gradient(130.27deg,#97cf00 -14.98%,#24b400 109.44%)
}

.blog-posts-section .sidebar form.blog_filters_form li.blog_results-filter__item .results-filter__dropdown li .label-filter:after {
    content: "";
    position: absolute;
    width: 5.03px;
    height: 8.43px;
    left: -15px;
    top: 10px;
    border-left: 3px solid #57b12d;
    border-bottom: 3px solid #57b12d;
    transform: translate(-50%,-60%) matrix(-.71,-.71,-.71,.71,0,0);
    opacity: 0
}

.blog-posts-section .sidebar form.blog_filters_form li.blog_results-filter__item .results-filter__dropdown li .label-filter:hover:after {
    opacity: 1
}

.blog-posts-section .sidebar form.blog_filters_form li.blog_results-filter__item .results-filter__dropdown li input[type=checkbox] {
    display: none
}

.blog-posts-section .sidebar form.blog_filters_form li.blog_results-filter__item .results-filter__dropdown li input[type=checkbox]:checked+.label-filter:before {
    background: linear-gradient(130.27deg,#97cf00 -14.98%,#24b400 109.44%)
}

.blog-posts-section .sidebar form.blog_filters_form li.blog_results-filter__item .results-filter__dropdown li input[type=checkbox]:checked+.label-filter:after {
    border-color: #fff;
    opacity: 1
}

.blog-posts-section .sidebar form.blog_filters_form li.blog_results-filter__item .results-filter__dropdown li .nothing-found {
    display: none;
    line-height: 1.2;
    padding: 5px 10px;
    white-space: nowrap
}

.blog-posts-section .sidebar form.blog_filters_form li.blog_results-filter__item .results-filter__item-footer {
    position: absolute;
    display: none;
    height: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px 0 20px;
    text-align: center;
    border-top: 1px solid #d8e1e9
}

.blog-posts-section .sidebar form.blog_filters_form .blog_results-filter__title {
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px
}

.blog-posts-section .blog-posts-list-title {
    width: 100%;
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 80%;
    text-transform: uppercase;
    margin-bottom: 56px
}

.blog-posts-section .blog-posts-list {
    width: 100%;
    margin: 64px 0 40px;
    padding-inline:var(--inline-padding);padding-right: var(--inline-padding);
    padding-left: var(--inline-padding)
}

.blog-posts-section .blog-posts-list .blog-post-sidebar {
    margin-bottom: 84px;
    display: flex;
    flex-direction: row;
    gap: 48px
}

.blog-posts-section .blog-posts-list .blog-post-sidebar .post-sidebar-first {
    min-width: 50%
}

.blog-posts-section .blog-posts-list .blog-post-sidebar .post-sidebar-first .large-post {
    width: 100%;
    box-shadow: 0 8px 12px 0 rgba(0,0,0,.05);
    border-radius: var(--border-radius);
}

.blog-posts-section .blog-posts-list .blog-post-sidebar .post-sidebar-first .large-post .post-img {
    width: 100%;
    border-radius: var(--border-radius);
}

.blog-posts-section .blog-posts-list .blog-post-sidebar .post-sidebar-first .large-post .post-img a img {
    max-height: 404px;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: var(--image-border-radius);
    
}

.blog-posts-section .blog-posts-list .blog-post-sidebar .post-sidebar-first .large-post .post-body {
    padding: 24px;
    align-self: stretch;
    border-radius: var(--border-radius);
    
}

.blog-posts-section .blog-posts-list .blog-post-sidebar .post-sidebar-first .large-post .post-body,.blog-posts-section .blog-posts-list .blog-post-sidebar .post-sidebar-first .large-post .post-body__wrapper {
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    background-color: #fff
}

.blog-posts-section .blog-posts-list .blog-post-sidebar .post-sidebar-first .large-post .post-body__wrapper .wrapper-title {
    line-height: 32px;
}

.blog-posts-section .blog-posts-list .blog-post-sidebar .post-sidebar-first .large-post .post-body__wrapper .wrapper-title a {
    color: #000000;
    font-feature-settings: "clig" off,"liga" off;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    /*text-transform: uppercase*/
}

.blog-posts-section .blog-posts-list .blog-post-sidebar .post-sidebar-first .large-post .post-body__wrapper .wrapper-description {
    overflow: hidden;
    color: #000000;
    text-overflow: ellipsis;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    align-self: stretch;
    line-height: 150%
}

.blog-posts-section .blog-posts-list .blog-post-sidebar .post-sidebar-first .large-post .post-body__wrapper .wrapper-description a {
    color: #57b12d;
    text-decoration: underline #bed9b2!important
}

.blog-posts-section .blog-posts-list .blog-post-sidebar .post-sidebar-first .large-post .post-body__wrapper .wrapper-description a:hover {
    color: #57b12d;
    text-decoration: underline #57b12d!important
}

.blog-posts-section .blog-posts-list .blog-post-sidebar .right-sidebar .right_sidebar_widget p.sidebar_widget_title {
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    text-transform: uppercase;
    margin-bottom: 40px
}

.blog-posts-section .blog-posts-list .blog-post-sidebar .right-sidebar .right_sidebar_widget .post-recent__list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 368px
}

.blog-posts-section .blog-posts-list .blog-post-sidebar .right-sidebar .right_sidebar_widget .post-recent__list .post-recent {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    background: var(--bs-btn-active-color);
    box-shadow: 0 8px 12px 0 rgba(0,0,0,.05);
    border-radius: var(--border-radius);

}

.blog-posts-section .blog-posts-list .blog-post-sidebar .right-sidebar .right_sidebar_widget .post-recent__list .post-recent .category-item {
    height: 26px
}

.blog-posts-section .blog-posts-list .blog-post-sidebar .right-sidebar .right_sidebar_widget .post-recent__list .post-recent__title h2 {
    font-feature-settings: "clig" off,"liga" off;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
}

.blog-posts-section .blog-posts-list .blog-post-sidebar .right-sidebar .right_sidebar_widget .post-recent__list .post-recent-last {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 32px 20px;
    justify-content: center;
    align-items: center;
    gap: 32px;
    background: var(--tp-theme-background);
    border-radius: var(--border-radius);

}

.blog-posts-section .blog-posts-list .blog-post-sidebar .right-sidebar .right_sidebar_widget .post-recent__list .post-recent-last__image {
    position: absolute;
    bottom: 0;
    right: 0;
    /*width: 150px;*/
    height: 160px;
    flex-shrink: 0
}

.blog-posts-section .blog-posts-list .blog-post-sidebar .right-sidebar .right_sidebar_widget .post-recent__list .post-recent-last__title h2 {
    width: 70%;
    color: var(--tp-theme-primary);
    font-feature-settings: "clig" off,"liga" off;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    /*text-transform: uppercase;*/
    align-self: self-start
}

.blog-posts-section .blog-posts-list .blog-post-sidebar .right-sidebar .right_sidebar_widget .post-recent__list .post-recent-last__btn {
    border: 2px solid var(--Background-White,#fff);
    color: #fff;
    padding: 8px 22px;
    align-self: start;
    gap: 10px;
    height: 39px;
    width: 141px
}

.blog-posts-section .blog-posts-list .blog-post-sidebar .right-sidebar .right_sidebar_widget .post-recent__list .post-recent-last__btn a {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 80%;
    text-transform: uppercase
}

.blog-posts-section .blog-posts-list .blog-post-sidebar .right-sidebar .right_sidebar_widget .post-recent__list .post-recent-last__btn:hover {
    background: rgba(87,177,45,.22)
}

.blog-posts-section .posts-load-more {
    padding: 8px 23px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border: 2px solid #97cf00;
    margin: 0 auto;
    width: -moz-fit-content;
    width: fit-content;
    height: 39px
}

.blog-posts-section .posts-load-more:hover {
    background-color: rgba(87,177,45,.2196078431372549)
}

.blog-posts-section .posts-load-more__button {
    color: #151915;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 80%;
    text-transform: uppercase
}

.blog-posts-section .posts-list-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px;
    width: 100%
}

.blog-posts-section .posts-list-wrapper .posts {
    width: calc(33.33333% - 16px);
    box-shadow: 0 8px 12px 0 rgba(0,0,0,.05);
    border-radius: var(--border-radius);
    border-radius: var(--border-radius);

}

.blog-posts-section .posts-list-wrapper .posts .post-image a img {
    height: 30%;
    -o-object-fit: cover;
    object-fit: cover;
    max-height: 196px;
    max-width: 392px;
    width: 100%;
    border-radius: var(--image-border-radius);
}

.blog-posts-section .posts-list-wrapper .posts .post_content {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    height: calc(100% - 196px);
    justify-content: space-between
}

.blog-posts-section .posts-list-wrapper .posts .post_content__wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.blog-posts-section .posts-list-wrapper .posts .post_content__wrapper .post_content__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.blog-posts-section .posts-list-wrapper .posts .post_content__wrapper .post_content__body h2.body-title {
line-height: 25px;
}

.blog-posts-section .posts-list-wrapper .posts .post_content__wrapper .post_content__body h2.body-title a {
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    /*text-transform: uppercase*/
}

.blog-posts-section .posts-list-wrapper .posts .post_content__wrapper .post_content__body .body-text {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 15.5px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%
}

.blog-posts-section #cube-loader-posts-list {
    z-index: 989;
    background: hsla(0,0%,100%,.5);
    display: none;
    justify-content: center;
    align-content: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: .5;
    flex-wrap: wrap;
    transition: opacity .5s
}

.blog-posts-section #cube-loader-posts-list .scene-loader {
    scale: .25
}

@media (max-width: 991px) {
    :root {
        --inline-padding:16px
    }

    .blog-posts-section .blog-posts-list .blog-post-sidebar {
        margin-bottom: 80px;
        gap: 30px
    }

    .blog-posts-section .blog-posts-list .blog-post-sidebar .sidebar .right_sidebar_widget .post-recent__list {
        display: flex;
        flex-direction: column;
        gap: 16px
    }
}

@media (max-width: 860px) {
    .blog-posts-section .blog-posts-list .blog-post-sidebar .sidebar .right_sidebar_widget .post-recent__list {
        gap:24px;
        width: 345px
    }

    .blog-posts-section .blog-posts-list .blog-post-sidebar .sidebar .right_sidebar_widget .post-recent__list .post-recent-last__title h2 {
        width: 75%
    }

    .blog-posts-section .posts-list-wrapper .posts {
        width: calc(50% - 12px)
    }

    .blog-posts-section ul.post-body__category li.category-item a {
        margin-top: 2px
    }
}

@media (max-width: 758px) {
    .blog-posts-section .blog-posts-list .blog-post-sidebar .sidebar .right_sidebar_widget p.sidebar_widget_title {
        font-size:28px;
        text-transform: uppercase;
        margin-bottom: 20px
    }

    .blog-posts-section .blog-posts-list .blog-post-sidebar .post-sidebar-first .large-post .post-body__wrapper .wrapper-title a {
        font-size: 18px;
        line-height: 120%;
    }

    .blog-posts-section .posts-list-wrapper .posts .post_content__wrapper .post_content__body h2.body-title a {
        font-size: 18px;
        line-height: 22px
    }

    .blog-posts-section .blog-posts-list .blog-post-sidebar .sidebar .right_sidebar_widget .post-recent__list {
        gap: 16px;
        width: 345px
    }

    .blog-posts-section .blog-posts-list .blog-post-sidebar .sidebar .right_sidebar_widget .post-recent__list .post-recent__title h2 {
        font-size: 18px
    }

    .blog-posts-section .blog-posts-list .blog-post-sidebar .post-sidebar-first .large-post .post-body__wrapper .wrapper-description {
        font-size: 16px;
        font-weight: 400
    }

    .blog-posts-section .posts-list-wrapper .posts .post_content__wrapper .post_content__body .body-text {
        font-size: 16px;
        line-height: 150%
    }
}

@media (max-width: 560px) {
    .hero-blog-section {
        min-height:343px;
        padding-block:56px;padding-bottom: 56px;
        padding-top: 56px;
    }

    .hero-blog-section__head h1.head__title {
        font-size: 40px;
        line-height: 90%
    }

    .hero-blog-section__head p.head__subtitle {
        color:#ffffff;
        min-width: 342px;
        font-size: 14px;
        line-height: 120%
    }

    .blog-posts-section {
        padding-bottom: 56px
    }

    .blog-posts-section .posts-load-more {
        padding: 8px 12px
    }

    .blog-posts-section .post-list-wrapper .posts {
        width: 100%;
        min-width: 343px
    }

    .blog-posts-section .post-list-wrapper .posts .post_content__wrapper .post_content__body h2.body-title a {
        font-size: 16px;
        line-height: 120%
    }

    .blog-posts-section .post-list-wrapper .posts .post-image a img {
        -o-object-fit: cover;
        object-fit: cover;
        height: unset;
        max-height: unset;
        max-width: unset;
        width: 100%
    }

    .blog-posts-section .post-list-wrapper .sidebar {
        padding: 32px 0
    }

    .blog-posts-section .post-list-wrapper .sidebar .sidebar_widget {
        padding-inline:var(--inline-padding);padding-right: var(--inline-padding);
        padding-left: var(--inline-padding)
    }

    .blog-posts-section .post-list-wrapper .sidebar .sidebar_widget .blog-search-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: unset;
        gap: 16px;
        margin-bottom: 32px
    }

    .blog-posts-section .post-list-wrapper .sidebar form.blog-search {
        margin-bottom: unset;
        width: unset
    }

    .blog-posts-section .post-list-wrapper .sidebar form.blog_filters_form li.blog_results-filter__item {
        width: unset
    }

    .blog-posts-section .post-list-wrapper .sidebar .right_sidebar_widget .post-recent__list {
        width: 100%;
        min-width: 343px
    }

    .blog-posts-section .post-list-wrapper .sidebar .right_sidebar_widget .post-recent__list p.sidebar_widget_title {
        font-size: 20px
    }

    .blog-posts-section .post-list-wrapper .blog-posts-list {
        margin: 40px 0
    }

    .blog-posts-section .post-list-wrapper .blog-posts-list .blog-post-sidebar {
        flex-direction: column;
        gap: 40px;
        margin-bottom: unset
    }

    .blog-posts-section .post-list-wrapper .blog-posts-list .blog-post-sidebar .right-sidebar .right_sidebar_widget .post-recent__list {
        width: unset
    }

    .blog-posts-section .post-list-wrapper ul.post-body__category li.category-item a {
        margin-top: 2px;
        font-size: 12px
    }

    .blog-posts-section ul.post-body__category li.category-item {
        padding: 2px 16px;
        height: 26px
    }

    .blog-posts-section .posts-list-wrapper .posts .post_content {
        padding: 16px;
        height: unset
    }

    .blog-posts-section .blog-posts-list-title {
        font-size: 30px;
        margin-bottom: 32px
    }

    .blog-posts-section .blog-posts-list .blog-post-sidebar .right-sidebar .right_sidebar_widget .post-recent__list .post-recent__title h2 {
        font-size: 16px
    }

    .blog-posts-section .blog-posts-list .blog-post-sidebar .right-sidebar .right_sidebar_widget .post-recent__list .post-recent {
        padding: 16px
    }

    .blog-posts-section .blog-posts-list .blog-post-sidebar .right-sidebar .right_sidebar_widget .post-recent__list .post-recent-last {
        padding: 24px 20px
    }

    .blog-posts-section .blog-posts-list .blog-post-sidebar .right-sidebar .right_sidebar_widget .post-recent__list .post-recent-last .post-recent-last__title h2 {
        font-size: 16px
    }

    .blog-posts-section .blog-posts-list .blog-post-sidebar .right-sidebar .right_sidebar_widget .post-recent__list .post-recent-last .post-recent-last__btn {
        height: 39px
    }

    .blog-posts-section .blog-posts-list .blog-post-sidebar .post-sidebar-first .large-post .post-body__wrapper .wrapper-title a {
        font-size: 16px
    }

    .blog-posts-section .blog-posts-list .blog-post-sidebar .post-sidebar-first .large-post .post-body {
        padding: 16px
    }

    .hero-blog-section__head h1.head__title {
        width: 80%
    }
}

@media (max-width: 375px) {
    .blog-posts-section .post-list-wrapper .posts .post-image a img {
        max-height:171px
    }
}

/* === Blog List Mobile Responsiveness Improvements === */
@media (max-width: 768px) {
  /* Hero Section Mobile Improvements */
  .tp-hero-area {
    padding: 40px 16px !important;
    min-height: auto !important;
  }

  .tp-hero-bs-title {
    font-size: 32px !important;
    line-height: 1.2 !important;
    margin-bottom: 16px !important;
  }

  .tp-hero-area p {
    font-size: 16px !important;
    line-height: 1.4 !important;
    margin-bottom: 24px !important;
  }

  /* Blog Posts Section Mobile Layout */
  .blog-posts-section {
    padding: 20px 16px !important;
  }

  .blog-posts-list {
    margin: 32px 0 !important;
    padding: 0 !important;
  }

  /* Featured Post Mobile Improvements */
  .blog-post-sidebar {
    flex-direction: column !important;
    gap: 24px !important;
    margin-bottom: 40px !important;
  }

  .post-sidebar-first {
    min-width: 100% !important;
  }

  .large-post {
    width: 100% !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  .large-post .post-img {
    width: 100% !important;
    height: 200px !important;
  }

  .large-post .post-img a img {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
    border-radius: 12px 12px 0 0 !important;
  }

  .large-post .post-body {
    padding: 16px !important;
  }

  .large-post .post-body__wrapper .wrapper-title a {
    font-size: 18px !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
  }

  .large-post .post-body__wrapper .wrapper-description {
    font-size: 14px !important;
    line-height: 1.4 !important;
    -webkit-line-clamp: 3 !important;
  }

  /* Right Sidebar Mobile Improvements */
  .right-sidebar {
    width: 100% !important;
  }

  .right_sidebar_widget {
    max-width: 100% !important;
  }

  .right_sidebar_widget p.sidebar_widget_title {
    font-size: 24px !important;
    margin-bottom: 20px !important;
  }

  .post-recent__list {
    width: 100% !important;
    gap: 16px !important;
  }

  .post-recent {
    padding: 16px !important;
    border-radius: 12px !important;
  }

  .post-recent__title h2 {
    font-size: 16px !important;
    line-height: 1.3 !important;
  }

  .post-recent-last {
    padding: 20px 16px !important;
    border-radius: 12px !important;
  }

  .post-recent-last__title h2 {
    font-size: 16px !important;
    width: 100% !important;
  }

  .post-recent-last__image {
    height: 120px !important;
    right: 10px !important;
  }

  .post-recent-last__btn {
    width: 100% !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Blog Posts Grid Mobile Improvements */
  .posts-list-wrapper {
    flex-direction: column !important;
    gap: 16px !important;
  }

  .posts {
    width: 100% !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  .posts .post-image {
    width: 100% !important;
    height: 180px !important;
  }

  .posts .post-image a img {
    width: 100% !important;
    height: 180px !important;
    object-fit: cover !important;
    border-radius: 12px 12px 0 0 !important;
  }

  .posts .post_content {
    padding: 16px !important;
    height: auto !important;
    gap: 12px !important;
  }

  .posts .post_content__wrapper {
    gap: 12px !important;
  }

  .posts .post_content__body h2.body-title a {
    font-size: 16px !important;
    line-height: 1.3 !important;
  }

  .posts .post_content__body .body-text {
    font-size: 14px !important;
    line-height: 1.4 !important;
    -webkit-line-clamp: 3 !important;
  }

  /* Category Tags Mobile Improvements */
  .post-body__category {
    gap: 4px !important;
    flex-wrap: wrap !important;
  }

  .post-body__category li.category-item {
    padding: 2px 8px !important;
    height: 24px !important;
    border-radius: 8px !important;
  }

  .post-body__category li.category-item a {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  /* Date Wrapper Mobile Improvements */
  .date-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 12px !important;
    color: #666 !important;
  }

  .date-wrapper__date,
  .date-wrapper__expire {
    margin: 0 !important;
    font-size: 12px !important;
  }

  /* Pagination Mobile Improvements */
  .tp-pagination-wrapper {
    margin-top: 32px !important;
    padding: 0 16px !important;
  }

  .tp-pagination-list {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .tp-page-link {
    padding: 8px 12px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
  }
}

@media (max-width: 480px) {
  /* Extra Small Screen Improvements */
  .tp-hero-bs-title {
    font-size: 28px !important;
  }

  .tp-hero-area p {
    font-size: 14px !important;
  }

  .blog-posts-section {
    padding: 16px 12px !important;
  }

  .large-post .post-img,
  .large-post .post-img a img {
    height: 160px !important;
  }

  .posts .post-image,
  .posts .post-image a img {
    height: 140px !important;
  }

  .large-post .post-body__wrapper .wrapper-title a {
    font-size: 16px !important;
  }

  .posts .post_content__body h2.body-title a {
    font-size: 14px !important;
  }

  .right_sidebar_widget p.sidebar_widget_title {
    font-size: 20px !important;
  }

  .post-recent__title h2 {
    font-size: 14px !important;
  }

  .post-recent-last__title h2 {
    font-size: 14px !important;
  }

  .post-recent-last__image {
    height: 100px !important;
  }
}

@media (max-width: 360px) {
  /* Very Small Screen Improvements */
  .tp-hero-bs-title {
    font-size: 24px !important;
  }

  .blog-posts-section {
    padding: 12px 8px !important;
  }

  .large-post .post-img,
  .large-post .post-img a img {
    height: 140px !important;
  }

  .posts .post-image,
  .posts .post-image a img {
    height: 120px !important;
  }

  .large-post .post-body,
  .posts .post_content {
    padding: 12px !important;
  }

  .post-body__category li.category-item {
    padding: 1px 6px !important;
    height: 20px !important;
  }

  .post-body__category li.category-item a {
    font-size: 9px !important;
  }
}

td,th{
    border: 1px solid #dddddd;

}



/* testimonial-start */
/* testimonial-end */



/* contact-form-start */
.new-contact-form {
    z-index: 111;
    margin-inline:var(--inline-padding);margin-right: var(--inline-padding);
    margin-left: var(--inline-padding);
    padding: 80px;
    background-color: #fff;
    box-shadow: 0 8px 40px rgba(0,0,0,.08)
}

.new-contact-form-contact-us h2,.new-contact-form-contact-us h6 {
    font-style: normal;
    font-weight: 400;
    font-size: 56px;
    line-height: 80%;
    text-transform: uppercase;
    margin-bottom: 56px
}

.new-contact-form-contact-us .new-contact-form-content-title,.new-contact-form-contact-us h3,.new-contact-form-contact-us h4 {
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 120%;
    margin-bottom: 32px
}

.new-contact-form-contact-us p {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 120%;
    color: #151915;
    margin-bottom: 20px
}

.new-contact-form-contact-us .section-name {
    font-size: 16px;
    line-height: 120%
}

.new-contact-form-content-wrapper {
    max-width: 600px;
    margin: 0 auto
}

.new-contact-form-form-notice,.new-contact-form-form-success {
    display: none
}

.new-contact-form-form-notice,.new-contact-form-form-success,.new-contact-form-form-thank-you {
    max-width: 600px;
    margin-inline:auto;margin: 40px auto 48px;
    padding: 16px
}

.new-contact-form-form-notice p,.new-contact-form-form-success p,.new-contact-form-form-thank-you p {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    margin-bottom: 0
}

.new-contact-form-form-success,.new-contact-form-form-thank-you {
    background: rgba(87,177,45,.22)
}

.new-contact-form-form-notice {
    background: rgba(255,92,92,.22)
}

.thank-you-line {
    max-width: 600px;
    height: 1px;
    margin-inline:-16px;margin-block:16px;margin: 16px -16px;
    background: rgba(87,177,45,.25)
}

.hide-thank {
    display: none
}

.new-contact-form-checkbox-wrapper {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-row-gap: 10px;
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 20px;
    color: #151915
}

.new-contact-form-checkbox-wrapper label {
    display: flex;
    align-items: center
}

.new-contact-form-checkbox-wrapper input[type=checkbox] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0
}

.new-contact-form-checkbox-container {
    display: block;
    position: relative;
    cursor: pointer;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.new-contact-form-checkbox-container:hover input~.new-contact-form-checkbox-checkmark {
    background-color: #fff
}

.new-contact-form-checkbox-container:hover input~.new-contact-form-checkbox-checkmark:after {
    display: block;
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid #24b400;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg)
}

.new-contact-form-checkbox-container:hover input:checked~.new-contact-form-checkbox-checkmark:after {
    display: block;
    border-color: #fff
}

.new-contact-form-checkbox-checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #fff;
    border: 1px solid #24b400
}

.new-contact-form-checkbox-container input:checked~.new-contact-form-checkbox-checkmark {
    background: linear-gradient(130.27deg,#97cf00 -14.98%,#24b400 109.44%);
    border: none
}

.new-contact-form-checkbox-container input:checked~.new-contact-form-checkbox-checkmark:after {
    top: 4px;
    left: 8px
}

.new-contact-form-checkbox-checkmark:after {
    content: "";
    position: absolute;
    display: none
}

.new-contact-form-checkbox-container input:checked~.new-contact-form-checkbox-checkmark:after {
    display: block
}

.new-contact-form-checkbox-container .new-contact-form-checkbox-checkmark:after {
    top: 3px;
    left: 7px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg)
}

.new-contact-form-radio-container {
    display: block;
    position: relative;
    cursor: pointer;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.new-contact-form-radio-wrapper {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-row-gap: 10px;
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 20px;
    color: #151915
}

.new-contact-form-radio-wrapper label {
    display: flex;
    align-items: center
}

.new-contact-form-radio-wrapper input[type=radio] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0
}

.new-contact-form-radio-checkmark {
    position: absolute;
    transform: rotate(45deg) translateX(3px);
    transform-origin: center;
    top: 0;
    left: 0;
    height: 14px;
    width: 14px;
    background-color: #fff;
    border: 1px solid #24b400
}

.new-contact-form-radio-container:hover input~.new-contact-form-radio-checkmark {
    background-color: #ccc
}

.new-contact-form-radio-container input:checked~.new-contact-form-radio-checkmark {
    background-color: #24b400
}

.new-contact-form-radio-checkmark:after {
    content: "";
    position: absolute;
    display: none
}

.new-contact-form-radio-container input:checked~.new-contact-form-radio-checkmark:after {
    display: block
}

.new-contact-form-radio-container .new-contact-form-radio-checkmark:after {
    width: 12px;
    height: 12px;
    border: 2px solid #fff
}

.must-field-container {
    width: 100%;
    position: relative;
    margin-top: 24px
}

.new-contact-form-must-field {
    margin-bottom: 32px
}

.new-contact-form-must-field input,.new-contact-form-must-field textarea {
    height: 24px;
    width: 100%;
    outline: none;
    border: none;
    border-bottom: 1px solid rgba(21,25,21,.09);
    padding-bottom: 5px;
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    color: #151915
}

.new-contact-form-must-field input:invalid {
    border-color: red
}

.new-contact-form-must-field textarea {
    overflow: hidden
}

.must-field-placeholder {
    position: absolute;
    left: 0;
    top: 0;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    color: #151915;
    pointer-events: none
}

.green-placeholder {
    color: #57b12d
}

.new-contact-form-must-field input:not(:placeholder-shown)~.must-field-placeholder,.new-contact-form-must-field textarea:not(:placeholder-shown)~.must-field-placeholder {
    display: none
}

.new-contact-form ::-moz-placeholder {
    opacity: 1;
    color: #151915
}

.new-contact-form :-ms-input-placeholder {
    opacity: 1;
    color: #151915
}

.new-contact-form ::placeholder {
    opacity: 1;
    color: #151915
}

.label {
    margin-left: 31px
}

.new-contact-form-form-new-contact-form {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%
}

.new-contact-form-form-new-contact-form .buttons {
    margin-inline:auto;margin-right: auto;
    margin-left: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center
}

.footer-picker {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 40px
}

.footer-picker .button {
    display: flex;
    align-items: center;
    padding: 7px 16px 5px;
    border-radius: 200px;
    font-style: normal;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    background: rgba(25,25,25,.1)
}

.footer-picker .button.active {
    color: #fff;
    background: linear-gradient(130.27deg,#97cf00 -14.98%,#24b400 109.44%)
}

.stay-in-touch {
    padding-inline:var(--inline-padding);padding-right: var(--inline-padding);
    padding-left: var(--inline-padding);
    margin-top: 70px;
    display: flex;
    overflow: hidden
}

.stay-in-touch span.ssp-900 {
    color: #57b12d;
    font-size: 32px;
    line-height: 120%
}

.stay-in-touch-left {
    display: flex;
    flex-direction: column
}

.stay-in-touch-left h3,.stay-in-touch-left h5,.stay-in-touch-left p {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    color: #fff
}

.stay-in-touch-left h3,.stay-in-touch-left h5 {
    margin-bottom: 16px
}

.stay-in-touch-left h3 .color-gradient,.stay-in-touch-left h5 .color-gradient {
    -webkit-text-fill-color: unset
}

.footer-contact-data {
    display: flex;
    gap: 64px;
    margin-bottom: 48px
}

.footer-contact-data .ctc-email {
    cursor: pointer;
    position: relative
}

.footer-contact-data .ctc-email-tooltip {
    visibility: hidden;
    background-color: #252525;
    color: #fff;
    position: absolute;
    font-size: 16px;
    line-height: 120%;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 6px 16px;
    gap: 8px;
    right: -10px;
    top: -26px;
    transition: .3s
}

@media screen and (max-width: 575px) {
    .footer-contact-data .ctc-email-tooltip {
        top:-40px;
        color: #fff!important
    }
}

.footer-contact-data .ctc-email-tooltip:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border: 5px solid transparent;
    border-top-color: #252525
}

.stay-flags {
    height: 50px;
    margin-top: 23px;
    display: flex;
    min-width: 600px;
    justify-content: space-between;
    gap: 36px
}

.stay-flag {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center
}

.stay-flag img {
    box-shadow: inset 0 0 15px 4px rgba(0,0,0,.63945);
    border: 6px solid #fff;
    border-radius: 200px
}

.stay-flags-location-naming {
    display: flex;
    flex-direction: column;
    font-size: 16px;
    line-height: 16px;
    color: #fff
}

.new-contact-form-row {
    padding-inline:var(--inline-padding);padding-right: var(--inline-padding);
    padding-left: var(--inline-padding);
    margin-top: 50px;
    padding-bottom: 20px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    width: 100%;
    align-items: center
}

.new-contact-form-row .leobit-name {
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 27px;
    letter-spacing: .01em;
    color: #fff
}

.new-contact-form-row .all-rights {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: #fff
}

.new-contact-form-links-container {
    display: flex;
    justify-content: flex-end
}

.new-contact-form-link {
    min-width: 40px;
    height: 40px;
    background: hsla(0,0%,84.7%,.08);
    mix-blend-mode: normal;
    display: flex;
    justify-content: center;
    align-items: center
}

.new-contact-form-link svg {
    fill: #fff;
    stroke: #fff
}

.new-contact-form-links {
    display: inline-flex!important;
    position: relative!important;
    flex-direction: row-reverse!important;
    gap: 8px;
    overflow: hidden;
    width: 192px;
    transition: .5s
}

@media screen and (max-width: 576px) {
    .new-contact-form-links {
        height:40px;
        max-width: 192px;
        flex-direction: row!important
    }

    .new-contact-form-links.expanded {
        height: auto;
        display: inline-flex!important;
        flex-direction: row;
        justify-content: normal;
        gap: 5px
    }
}

.new-contact-form-map {
    position: absolute;
    right: calc(var(--inline-padding) - 44px);
    top: 700px;
    z-index: -1
}

.new-contact-form-links-expand {
    display: flex;
    align-items: center;
    border-right: 2px solid hsla(0,0%,60.8%,.16);
    mix-blend-mode: normal;
    padding-inline:10px;padding-right: 10px;
    padding-left: 10px;
    margin-inline:10px;margin-right: 10px;
    margin-left: 10px;
    width: 30px;
    height: 40px
}

@media screen and (max-width: 576px) {
    .new-contact-form-links-expand {
        border-right:2px solid rgba(21,25,21,.16)
    }
}

.new-contact-form-links-expand:hover {
    cursor: pointer
}

.new-contact-form-tabs {
    max-width: 600px;
    margin-inline:auto;margin-right: auto;
    margin-left: auto;
    margin-top: 24px;
    display: flex;
    flex-direction: column
}

.new-contact-form-tabs p {
    margin: 0 auto
}

.hide-tab,.tab-radio {
    display: none!important
}

.tab-radio {
    position: absolute;
    height: 32px
}

.new-contact-form-tab {
    display: none
}

.tab-radio:checked+.tab-label+.new-contact-form-tab {
    display: block;
    padding-top: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(21,25,21,.09);
    margin-bottom: 16px;
    height: -moz-fit-content;
    height: fit-content
}

.tab-radio:checked+.tab-label+.new-contact-form-tab.slider-inside {
    padding-top: 32px;
    padding-bottom: 16px;
    display: block;
    border-bottom: 1px solid rgba(21,25,21,.09);
    margin-bottom: 16px;
    height: -moz-fit-content;
    height: fit-content
}

.tab-radio:checked+.tab-label {
    margin-bottom: 0!important;
    border: none
}

.tab-radio:checked+.tab-label img {
    transform: scaleY(1)
}

.tab-label {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    display: flex;
    align-items: center;
    color: #151915;
    border-bottom: 1px solid rgba(21,25,21,.09);
    margin-bottom: 28px;
    justify-content: space-between
}

.tab-label img {
    transform: scaleY(-1)
}

.new-contact-form-contact-us {
    position: relative
}

.new-contact-form-contact-us .tab-button {
    cursor: pointer
}

.new-contact-form-contact-us input.required,.new-contact-form-contact-us input.required-mail,.new-contact-form-contact-us textarea.required,.new-contact-form-contact-us textarea.required-mail {
    border-bottom-color: red
}

.new-contact-form-contact-us input+.requiredError,.new-contact-form-contact-us input+.requiredMailError,.new-contact-form-contact-us textarea+.requiredError,.new-contact-form-contact-us textarea+.requiredMailError {
    margin-top: -30px;
    margin-bottom: 12px;
    font-size: 12px;
    color: red
}

.new-contact-form-add-file, .new-contact-form-links-container a.new-contact-form-link {
    display: flex;
    align-items: center
}

.new-contact-form-add-file {
    justify-content: center;
    gap: 16px;
    border: 1px dashed #afafaf;
    width: 100%;
    min-height: 60px;
    margin-bottom: 32px;
    padding: 0 5px
}

.new-contact-form-add-file:hover {
    cursor: pointer;
    background: rgba(87,177,45,.22)
}

.new-contact-form-add-file.is-loading {
    cursor: progress
}

.new-contact-form-add-file input[type=file] {
    display: none
}

.new-contact-form-add-file span {
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    text-transform: uppercase;
    color: #151915;
    overflow-wrap: anywhere
}

.new-contact-form-add-file .icon_plus.added {
    transform: rotate(45deg)
}

.slider-value-container {
    display: flex;
    gap: 8px;
    justify-content: flex-start;
    align-items: center;
    margin-top: 35px
}

.slider-value-container label {
    height: 18px
}

.slider-value-container .slider-value,.slider-value-container label {
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 120%;
    display: flex;
    align-items: center;
    color: #151915
}

.slider-value-container .slider-value {
    text-align: center;
    flex-direction: row;
    justify-content: center;
    padding: 2px 12px;
    gap: 10px;
    border: 1px solid;
    -o-border-image: linear-gradient(90deg,#97cf00 100%,#24b400 0) 10;
    border-image: linear-gradient(90deg,#97cf00 100%,#24b400 0) 10;
    margin-bottom: 0;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 80px
}

.slider-value-container .slider-value.notchanged {
    color: #afafaf
}

.slider-row {
    display: flex;
    gap: 12px;
    width: 100%;
    align-items: center;
    white-space: nowrap
}

.slider {
    height: 2px;
    background: rgba(0,0,0,.2);
    border-radius: 2px;
    position: relative;
    flex: 1 0
}

.slider .ui-slider-range {
    border-radius: 2px;
    left: 0;
    bottom: 0
}

.slider .ui-slider-handle,.slider .ui-slider-range {
    background: linear-gradient(130.27deg,#97cf00 -14.98%,#24b400 109.44%);
    position: absolute;
    top: 0
}

.slider .ui-slider-handle {
    cursor: move;
    cursor: grab;
    cursor: -webkit-grab;
    width: 7px;
    height: 7px;
    outline: 0;
    z-index: 1;
    box-shadow: 0 2px 7px rgba(0,0,0,.2);
    margin: -1px 0 0;
    transform: translate(-50%,-30%) rotate(45deg);
    transition: box-shadow .3s ease
}

.slider .ui-slider-handle .smiley {
    position: absolute;
    left: 50%;
    bottom: 100%;
    opacity: 0;
    transform: translate(-50%,-12px) rotate(-45deg);
    transition: all .3s ease 0s
}

.slider .ui-slider-handle .smiley:after,.slider .ui-slider-handle .smiley:before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: 0 0;
    position: absolute;
    top: 8px
}

.slider .ui-slider-handle .smiley:before {
    left: 7px
}

.slider .ui-slider-handle .smiley:after {
    right: 7px
}

.slider .ui-slider-handle .smiley svg {
    width: 16px;
    height: 7px;
    position: absolute;
    left: 50%;
    bottom: 5px;
    margin: 0 0 0 -8px
}

.slider .ui-slider-handle .smiley svg path {
    stroke-width: 3.4;
    stroke: #000;
    fill: none;
    stroke-linecap: round
}

.slider .ui-slider-handle.ui-state-active {
    cursor: grabbing;
    cursor: -webkit-grabbing;
    box-shadow: 0 4px 12px rgba(0,0,0,.32)
}

.slider .ui-slider-handle.ui-state-active+.text {
    transform: translateY(-80px);
    transition: transform .3s ease 0s
}

.slider .ui-slider-handle.ui-state-active .smiley {
    opacity: 1;
    transform: translateX(-113%) rotate(-45deg);
    transition: all .3s ease .1s
}

.slider .text {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    transform: translateY(-44px);
    transition: transform .3s ease .2s;
    font-size: 16px
}

.slider .text strong {
    color: #000;
    font-weight: 700
}

.slider-dedicated-value-text,.slider-software-value-text {
    position: absolute;
    top: 50px;
    text-align: center;
    width: 50px;
    left: -10px
}

.smiley {
    background: #f9f9f9;
    padding: 7px;
    box-shadow: 1px 1px 4px rgba(0,0,0,.1)
}

#new-contact-form-cube-loader-desktop {
    z-index: 989;
    background: #fff;
    display: none;
    justify-content: center;
    align-content: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    flex-wrap: wrap;
    transition: opacity .5s
}

#new-contact-form-cube-loader-desktop .scene-loader {
    scale: .25
}

.new-contact-form-more-button {
    margin-inline:auto;margin-right: auto;
    margin-left: auto;
    width: 40px;
    cursor: pointer
}

.new-contact-form-more-button__less,.new-contact-form-more-button__more {
    display: flex;
    flex-direction: column;
    max-width: 496px;
    align-items: center;
    gap: 0
}

.hidden {
    display: none!important
}

.new-contact-form-more-button span {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    color: #afafaf;
    cursor: pointer
}

.new-contact-form-more-button img {
    margin-inline:auto;margin-right: auto;
    margin-left: auto
}

.new-contact-form-more-button svg {
    fill: #151915;
    opacity: .5
}

.more-button-line {
    width: 40px;
    height: 2px;
    background: #afafaf;
    opacity: .1;
    margin-top: 1px;
    margin-bottom: 9px
}

@media screen and (max-width: 576px) {
    .more-button-line {
        background:#151915;
        opacity: .5
    }
}

.new-contact-form-more-button__less .more-button-line {
    background: linear-gradient(130.27deg,#97cf00 -14.98%,#24b400 109.44%);
    opacity: 1
}

.new-contact-form-menu {
    padding-inline:var(--inline-padding);padding-right: var(--inline-padding);
    padding-left: var(--inline-padding);
    margin-inline:-10.5px;margin-right: -10.5px;
    margin-left: -10.5px;
    background: #191919;
    padding-block:48px;padding-bottom: 48px;
    padding-top: 48px
}

@media screen and (max-width: 576px) {
    .new-contact-form-menu {
        margin-inline:0;
        margin-right: 0;
        margin-left: 0;
        background: #f9f9f9;
        padding-inline:0;padding-block:0;padding: 0
    }
}

.new-contact-form-menu a,.new-contact-form-menu-item {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    color: #afafaf
}

@media screen and (max-width: 576px) {
    .new-contact-form-menu a,.new-contact-form-menu-item {
        color:#151915
    }
}

.new-contact-form-menu .menu .menu-item a {
    font-weight: 900
}

@media screen and (max-width: 576px) {
    .new-contact-form-menu .menu .menu-item a {
        color:#151915
    }
}

@media screen and (max-width: 576px) {
    .new-contact-form-menu .menu .sub-menu a {
        font-weight:400
    }
}

.new-contact-form-menu .menu .sub-menu li {
    margin-top: 8px
}

.new-contact-form-menu li {
    width: 100%
}

.new-contact-form-menu-item-header,.new-contact-form-menu-item-header a {
    font-weight: 900;
    font-size: 16px;
    line-height: 120%;
    text-transform: uppercase;
    color: #fff
}

.new-contact-form-menu a:hover,.new-contact-form-menu-item-header a:hover {
    color: #409717
}

.new-contact-form-menu .widget.widget_nav_menu {
    display: block;
    padding: 0;
    list-style: none
}

.new-contact-form-menu .menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0
}

.new-contact-form-menu .all-rights {
    margin-inline:auto;margin-right: auto;
    margin-left: auto;
    margin-top: 56px;
    text-align: center
}

.new-contact-form-menu .all-rights,.stay-flags-title {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    color: #fff
}

.stay-flags-title {
    margin: 0
}

.new-contact-form-menu .sub-menu {
    padding-left: 0
}

.menu>.menu-item>a {
    font-weight: 500;
    font-size: 15.5px;
    line-height: 120%;
    /* text-transform: uppercase; */
    color: #fff
}

.new-contact-form-form-mobile-ajax-message {
    font-size: 14px;
    line-height: 21px;
    width: 100%;
    padding: 16px;
    margin-top: -16px;
    margin-bottom: 24px
}

.new-contact-form-form-mobile-ajax-message.new-contact-form-form-success {
    display: none;
    background: rgba(87,177,45,.5)
}

.new-contact-form-form-mobile-ajax-message.new-contact-form-form-notice {
    display: none;
    background: rgba(177,45,45,.5)
}

.new-contact-form-form-legal-notice {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 30px
}

.new-contact-form-form-legal-notice span {
    font-size: 16px;
    line-height: 120%
}

.new-contact-form-form-legal-notice span a {
    color: #24b400;
    text-decoration: underline!important;
    text-decoration-color: #fff!important
}

.new-contact-form-color-gradient{
    color: var(--tp-theme-secondary);
}

/* contact-form-end */


/* careers-page-start */
.values-section {
    background: var(--tp-theme-background);
    color: #fff;
    position: relative
}

.values-section .value-card {
    position: relative;
    z-index: 10
}

.values-section .section-name {
    color: #fff
}

.values-section .section-header {
    margin-bottom: 40px
}

.value-card {
    max-height: max-content;
    min-height: 500px;
    height: 500px; 
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 40px 40px 56px;
    gap: 16px;
    background: #202020;
    border-radius: var(--border-radius);
    overflow: hidden; /* Hide overflowing content */
    transition: all 0.3s ease; /* Smooth transition for hover effect */
}
.value-card-2{
    max-height: max-content;
    min-height: 410px;
    height: 410px; 
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 40px 40px 56px;
    gap: 16px;
    background: #262d38;
    border-radius: var(--border-radius);
    overflow: hidden; /* Hide overflowing content */
    transition: all 0.3s ease; /* Smooth transition for hover effect */

}
.value-card img {
    width: 80px;
    height: 80px;
}

.value-card__icon {
    margin-bottom: 16px;
}

.value-card__icon.icon-bg {
    width: 80px;
    height: auto;
    aspect-ratio: 1;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
}

.value-card__name {
    font-style: normal;
    font-weight: 400;
    font-size: 40px;
    line-height: 120%;
    color: white;
}

.value-card__description {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: white;
    margin-top: 60px; /* Initial margin */
    transition: margin-top 0.3s ease; /* Smooth transition for margin change */
}

/* Hover effect */
.value-card:hover .value-card__description {
    margin-top: 0; /* Removes margin-top on hover */

}
.value-card:hover .card-button{
display: inline-block;    
transition: 0.3s ease;
}
.card-button {
    padding: 10px 20px;
    font-size: 16px;
    color: #ffffff;
    background-color: transparent;
    border: 1px solid #ffffff;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    display:none;
    text-align: center;
    transition: 0.3s ease-in;

}
.card-details{
    margin-top: 10px;
}

.card-button:hover {
    background-color: #ffffff;
    color: #202020; /* Button text color changes to match background on hover */
}

.background {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 1;
    pointer-events: none
}

/* .desktop {
    display: inline-block
} */

.mobile {
    display: none
}

.careers-page-header{
    font-weight: 700;
    font-size:56px;
    line-height: 60px;
}


.work-at-leobit--section {
    padding-block:120px;padding-bottom: 120px;
    padding-top: 120px;
    background: #f9f9f9;
    color: #151915
}

.work-at-leobit--section .section-header {
    margin-bottom: 32px
}

.work-at-leobit--section .section-description {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    opacity: .9;
    margin-top: 0;
    margin-bottom: 60px
}

.work-at-leobit--section .work-card-cover:not(:nth-child(-n+3)) {
    margin-top: 24px
}

.work-at-leobit--section .work-card {
    height: 100%;
    min-height: 416px;
    padding: 32px;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    border-radius: var(--border-radius);
    
}

.work-at-leobit--section .work-card--header {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0;
    gap: 32px
}

.work-at-leobit--section .work-card--header .header--image {
    width: 60px;
    height: 60px
}

.work-at-leobit--section .work-card--header .header--name {
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 120%;
    text-transform: uppercase
}

.work-at-leobit--section .work-card--list {
    list-style-type: disc;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    opacity: .9;
    margin-bottom: 0
}

.work-at-leobit--section .work-card--list li {
    list-style: disc;
    padding-left: 0
}

.work-at-leobit--section .work-card--list li:not(:last-child) {
    margin-bottom: 20px
}

@media screen and (max-width: 992px) {
    .work-at-leobit--section .work-card-cover:not(:nth-child(-n+2)) {
        margin-top:24px
    }
}

@media screen and (max-width: 768px) {
    .work-at-leobit--section .work-card-cover:not(:nth-child(-n+1)) {
        margin-top:24px
    }
}

@media screen and (max-width: 576px) {
    .work-at-leobit--section .section-header {
        margin-bottom:32px
    }

    .work-at-leobit--section .section-description {
        font-size: 16px;
        line-height: 150%;
        margin-top: 0;
        margin-bottom: 48px
    }

    .work-at-leobit--section .work-card-cover:not(:first-child) {
        margin-top: 24px
    }

    .work-at-leobit--section .work-card {
        height: 100%;
        min-height: auto;
        padding: 24px;
        gap: 24px
    }

    .work-at-leobit--section .work-card--header {
        gap: 24px
    }

    .work-at-leobit--section .work-card--header .header--image {
        height: 56px;
        width: 56px
    }

    .work-at-leobit--section .work-card--header .header--name {
        font-size: 16px;
        line-height: 100%
    }

    .work-at-leobit--section .work-card--list {
        font-size: 16px;
        line-height: 150%
    }

    .work-at-leobit--section .work-card--list li {
        list-style: disc;
        padding-left: 0
    }

    .work-at-leobit--section .work-card--list li:not(:last-child) {
        margin-bottom: 24px
    }
}


#career-section-vacancy-single-image {
    background: #fff
}

#career-section-vacancy-single-image .vacancy-single-image {
    width: 100vw
}

#career-section-vacancy-single-image .vacancy-single-image img {
    width: 100vw;
    height: auto
}

@media screen and (min-width: 1280px) {
    #career-section-vacancy-single-image .vacancy-single-image {
        height:400px;
        overflow-y: clip
    }
}

#career-section-vacancy-single.section.vacancy {
    background: #fff;
    padding-top: 80px
}

#career-section-vacancy-single.section.vacancy .container {
    margin: 0 auto;
    margin-inline:0}

#career-section-vacancy-single.section.vacancy .vacancy-content-single .title.vacancy-title {
    font-size: 56px;
    line-height: 48px;
    padding-bottom: 32px
}

#career-section-vacancy-single.section.vacancy .vacancy-content-single .vacancy-columns {
    display: flex;
    gap: 128px
}

#career-section-vacancy-single.section.vacancy .vacancy-content-single .vacancy-columns .vacancy-columns-left .vacancy-description {
    font-size: 18px;
    line-height: 27px
}

#career-section-vacancy-single.section.vacancy .vacancy-content-single .vacancy-columns .vacancy-columns-right {
    display: flex;
    justify-content: center;
    width: 100%
}

#career-section-vacancy-single.section.vacancy .vacancy-content-single .vacancy-columns .vacancy-columns-right .vacancy-single-form-container {
    box-shadow: 0 8px 40px rgba(0,0,0,.08);
    width: 392px;
    height: -moz-fit-content;
    height: fit-content;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 40px 24px 24px
}

#career-section-vacancy-single.section.vacancy .vacancy-content-single .vacancy-columns .vacancy-columns-right .vacancy-single-form-container .vacancy-form-naming {
    display: flex;
    flex-direction: column;
    gap: 16px
}

#career-section-vacancy-single.section.vacancy .vacancy-content-single .vacancy-columns .vacancy-columns-right .vacancy_form_title {
    font-size: 32px;
    line-height: 90%
}

#career-section-vacancy-single.section.vacancy .vacancy-content-single .vacancy-columns .vacancy-columns-right .vacancy_form_text {
    font-weight: 400;
    font-size: 16px;
    line-height: 120%
}

#career-section-vacancy-single.section.vacancy .vacancy-content-single .vacancy-columns .vacancy-columns-right .vacancy_form_text a,#career-section-vacancy-single.section.vacancy .vacancy-content-single .vacancy-columns .vacancy-columns-right .vacancy_form_text a:hover {
    color: #212529
}

#career-section-vacancy-single.section.vacancy .vacancy-content-single .vacancy-columns .vacancy-columns-right .vacancy-single-form {
    display: flex;
    flex-direction: column;
    gap: 24px
}

#career-section-vacancy-single.section.vacancy .vacancy-content-single .vacancy-columns .vacancy-columns-right .vacancy-single-form .form-group {
    position: relative
}

#career-section-vacancy-single.section.vacancy .vacancy-content-single .vacancy-columns .vacancy-columns-right .vacancy-single-form .formblock_field input {
    border-radius: 0;
    padding: 0 0 5px;
    height: 24px;
    width: 100%;
    border: none;
    border-bottom: 1px solid rgba(21,25,21,.09);
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    color: #151915
}

#career-section-vacancy-single.section.vacancy .vacancy-content-single .vacancy-columns .vacancy-columns-right .vacancy-single-form .formblock_field input:focus {
    outline: 0;
    box-shadow: none
}

#career-section-vacancy-single.section.vacancy .vacancy-content-single .vacancy-columns .vacancy-columns-right .vacancy-single-form .formblock_field input:not(:placeholder-shown)~.must-field-placeholder {
    display: none
}

#career-section-vacancy-single.section.vacancy .vacancy-content-single .vacancy-columns .vacancy-columns-right .vacancy-single-form .formblock_field input[type=tel]:hover~.must-field-placeholder {
    display: none
}

#career-section-vacancy-single.section.vacancy .vacancy-content-single .vacancy-columns .vacancy-columns-right .vacancy-single-form .add-file-input {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    border: 1px dashed #afafaf;
    width: 100%;
    min-height: 60px;
    margin-bottom: 8px;
    padding: 0 5px
}

#career-section-vacancy-single.section.vacancy .vacancy-content-single .vacancy-columns .vacancy-columns-right .vacancy-single-form .add-file-input:hover {
    cursor: pointer;
    background: rgba(87,177,45,.22)
}

#career-section-vacancy-single.section.vacancy .vacancy-content-single .vacancy-columns .vacancy-columns-right .vacancy-single-form .add-file-input.is-loading {
    cursor: progress
}

#career-section-vacancy-single.section.vacancy .vacancy-content-single .vacancy-columns .vacancy-columns-right .vacancy-single-form .add-file-input input[type=file] {
    display: none
}

#career-section-vacancy-single.section.vacancy .vacancy-content-single .vacancy-columns .vacancy-columns-right .vacancy-single-form .add-file-input span {
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    text-transform: uppercase;
    color: #151915;
    overflow-wrap: anywhere
}

#career-section-vacancy-single.section.vacancy .vacancy-content-single .vacancy-columns .vacancy-columns-right .vacancy-single-form .add-file-input .icon_plus.added {
    transform: rotate(45deg)
}

#career-section-vacancy-single.section.vacancy .vacancy-content-single .vacancy-columns .vacancy-columns-right .vacancy-single-form .button-submit-container {
    display: flex;
    justify-content: center
}

#career-section-vacancy-single.section.vacancy .vacancy-content-single .vacancy-columns .vacancy-columns-right .vacancy-single-form .button-submit-container button.button {
    height: 40px;
    width: 160px;
    padding: 0 14px;
    color: #151915!important
}

#career-section-vacancy-single.section.vacancy .vacancy-lists {
    display: flex;
    gap: 40px;
    flex-direction: column
}

#career-section-vacancy-single.section.vacancy .vacancy-lists .vacancy-list-header {
    font-size: 18px;
    line-height: 150%;
    font-weight: 700
}

#career-section-vacancy-single.section.vacancy .vacancy-lists .vacancy-list {
    display: flex;
    gap: 16px;
    flex-direction: column
}

#career-section-vacancy-single.section.vacancy .vacancy-lists .vacancy-list .vacancy-list-item {
    font-size: 16px;
    line-height: 150%;
    display: flex;
    position: relative;
    gap: 9px
}

#career-section-vacancy-single.section.vacancy .vacancy-lists .vacancy-list .vacancy-list-item:before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    background: linear-gradient(130.27deg,#97cf00 -14.98%,#24b400 109.44%);
    position: relative;
    top: 6px;
    transform: rotate(45deg);
    min-width: 10px
}

#career-section-vacancy-single.section.vacancy .vacancy-lists .vacancy-list .vacancy-list-item-sub {
    padding-left: 28px
}

#career-section-vacancy-single.section.vacancy .vacancy-lists .vacancy-list .vacancy-list-item-sub:before {
    width: 8.5px;
    height: 8.5px;
    top: 10px;
    min-width: 8.5px;
    border: 2px solid;
    border-image-source: linear-gradient(130.27deg,#97cf00 -14.98%,#24b400 109.44%);
    border-image-slice: 1;
    background: 0 0
}

#career-section-vacancy-single.section.vacancy .wysiwygBox h2 {
    font-size: 18px;
    line-height: 1.5;
    font-weight: 700;
    padding-bottom: 25px;
    margin: 0
}

@media screen and (max-width: 992px) {
    #career-section-vacancy-single.section.vacancy .container {
        max-width:100%
    }
}

@media (hover: none) {
    .vacancies-section .checkbox-container:hover input~.checkbox-checkmark:before,.vacancies-section .radiobutton-container:hover input~.radiobutton-mark:before {
        display:none!important
    }
}

@media screen and (max-width: 992px) {
    #career-section-vacancy-single.section.vacancy {
        padding-inline:var(--mobile-padding);
        padding-right: var(--mobile-padding);
        padding-left: var(--mobile-padding)
    }

    #career-section-vacancy-single.section.vacancy .title.vacancy-title {
        font-size: 32px!important;
        line-height: 80%!important
    }

    #career-section-vacancy-single.section.vacancy .vacancy-columns {
        flex-direction: column;
        display: flex
    }

    #career-section-vacancy-single.section.vacancy .vacancy-columns-left,#career-section-vacancy-single.section.vacancy .vacancy-columns-right {
        min-width: unset;
        width: 100%
    }
}

.topblk {
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff
}

.topblk_alter .topblk__cont {
    max-width: 840px;
    margin: auto;
    padding-bottom: 0
}

.topblk_alter .topblk__inner {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    min-height: 620px
}

.topblk_alter .topblk__title.title {
    font-style: normal;
    font-weight: 400;
    font-size: 80px;
    line-height: 70px;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 32px
}

.topblk_alter .topblk__subtitle {
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 120%;
    text-align: center;
    color: white;
    margin-bottom: 56px
}

.topblk_alter .topblk__btns {
    text-align: center
}

.topblk_alter .topblk__btns .primary-button {
    margin-inline:auto}

.vacancies-section.section {
    padding-top: 0;
    padding-bottom: 0;
    background: #fff;
    color: #151915
}

#vacancies-list {
    position: relative
}

#vacancies-list .scene-loader {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 100px;
    height: 420px;
    scale: .15
}

.vacancies-section .container {
    padding-inline:0;padding-right: 0;
    padding-left: 0
}

.vacancies-section .sidebar {
    padding-top: 100px;
    padding-bottom: 36px
}

.vacancies-section .sidebar-block:not(:last-child) {
    margin-bottom: 48px
}

.vacancies-section .sidebar_title {
    font-style: normal;
    font-weight: 600;
    font-size: 30px;

    line-height: 100%;
    text-transform: uppercase;
    color: #151915;
    margin-bottom: 24px
}

.vacancies-section .sidebar_item {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: #151915;
    opacity: .9
}

.vacancies-section .sidebar_item:not(:last-child) {
    margin-bottom: 8px
}

.vacancies-section .sidebar_item-count {
    color: #afafaf
}

.vacancies-section .sidebar_item:has(>.checkbox-containerinput:checked),.vacancies-section .sidebar_item:has(>.radiobutton-containerinput:checked) {
    font-weight: 700
}

.vacancies-section .checkbox-container,.vacancies-section .radiobutton-container {
    width: 100%;
    display: block;
    position: relative;
    padding-left: 36px;
    cursor: pointer;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.vacancies-section .checkbox-container input,.vacancies-section .radiobutton-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0
}

.vacancies-section .checkbox-checkmark {
    transform: translateY(-50%);
    left: 0;
    height: 20px;
    width: 20px
}

.vacancies-section .checkbox-checkmark,.vacancies-section .radiobutton-mark {
    position: absolute;
    box-sizing: border-box;
    top: 50%;
    background-color: none;
    border-width: 1px;
    border-style: solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(130.27deg,#97cf00 -14.98%,#24b400 109.44%)
}

.vacancies-section .radiobutton-mark {
    height: 14.14px;
    width: 14.14px;
    transform: translateY(-50%) rotate(45deg);
    left: 3px
}

.vacancies-section .checkbox-checkmark:before,.vacancies-section .radiobutton-mark:before {
    content: "";
    position: absolute;
    display: none
}

.vacancies-section .checkbox-container:hover input~.checkbox-checkmark,.vacancies-section .radiobutton-container:hover input~.radiobutton-mark {
    background-color: none
}

.vacancies-section .checkbox-container .checkbox-checkmark:before {
    position: absolute;
    width: 5.03px;
    height: 8.43px;
    left: 50%;
    top: 50%;
    border-width: 0 0 3px 3px;
    border-style: solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(130.27deg,#97cf00 -14.98%,#24b400 109.44%);
    transform: translate(-50%,-60%) matrix(-.71,-.71,-.71,.71,0,0)
}

.vacancies-section .radiobutton-container .radiobutton-mark:before {
    position: absolute;
    width: 9.19px;
    height: 9.19px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background: rgba(87,177,45,.22)
}

.vacancies-section .checkbox-container:hover input~.checkbox-checkmark:before,.vacancies-section .radiobutton-container:hover input~.radiobutton-mark:before {
    display: block
}

.vacancies-section .checkbox-container input:checked~.checkbox-checkmark {
    background: linear-gradient(130.27deg,#97cf00 -14.98%,#24b400 109.44%)
}

.vacancies-section .checkbox-checkmark:after,.vacancies-section .radiobutton-mark:after {
    content: "";
    position: absolute;
    display: none
}

.vacancies-section .checkbox-container input:checked~.checkbox-checkmark:after,.vacancies-section .radiobutton-container input:checked~.radiobutton-mark:after {
    display: block
}

.vacancies-section .checkbox-container input:checked~.sidebar_item-title,.vacancies-section .radiobutton-container input:checked~.sidebar_item-title {
    font-weight: 700
}

.checkbox-container .checkbox-checkmark:after {
    position: absolute;
    width: 5.03px;
    height: 8.43px;
    left: 50%;
    top: 50%;
    border-left: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: translate(-50%,-60%) matrix(-.71,-.71,-.71,.71,0,0)
}

.vacancies-section .radiobutton-container .radiobutton-mark:after {
    position: absolute;
    width: 9.19px;
    height: 9.19px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background: linear-gradient(130.27deg,#97cf00 -14.98%,#24b400 109.44%)
}

.vacancies-section .vacancies {
    padding-top: 100px;
    display: flex;
    gap: 24px;
    flex-wrap: wrap
}

.vacancies-section .vacancies-card {
    flex: 0 0 calc(50% - 12px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 44px 70px 24px 24px;
    background: #f9f9f9;
    position: relative;
    font-style: normal;
    font-weight: 400
}

.vacancies-section .vacancies-card:hover {
    box-shadow: 0 8px 40px rgba(0,0,0,.08)
}

.vacancies-section .vacancies-card_hot {
    position: absolute;
    left: 0;
    top: 0;
    padding: 4px 8px;
    background: linear-gradient(130.27deg,#97cf00 -14.98%,#24b400 109.44%);
    font-size: 12px;
    line-height: 100%;
    text-transform: uppercase;
    color: #fff
}

.vacancies-section .vacancies-card_title {
    max-width: calc(100% - 39px);
    font-size: 20px;
    line-height: 100%;
    text-transform: uppercase;
    color: #151915
}

@media screen and (max-width: 768px) {
    .vacancies-section .vacancies-card_title {
        font-size:18px
    }
}

.vacancies-section p.vacancies-card_title {
    margin-bottom: 0
}

.vacancies-section .vacancies_link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.vacancies-section .vacancies_link:after {
    transition: .1s
}

.vacancies-section .vacancies_link:after {
    content: "\e807";
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 24px;
    bottom: 24px;
    border-width: 2px;
    border-style: solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(130deg,#97cf00 -15%,#24b400 109%);
    width: 39px;
    height: 39px;
    font-size: 22px;
    line-height: 1;
    text-align: center;
    color: #191919;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.vacancies-section .vacancies_link:hover:after {
    background: rgba(87,177,45,.22)
}

@media screen and (max-width: 992px) {
    .vacancies-section .vacancies-card {
        flex:0 0 100%
    }
}

@media screen and (max-width: 576px) {
    .topblk_alter .topblk__cont {
        max-width:100%;
        text-align: center
    }

    .topblk_alter .topblk__inner {
        min-height: auto;
        padding: 105px 16px
    }

    .topblk_alter .topblk__title.title {
        font-size: 40px;
        line-height: 90%
    }

    .topblk_alter .topblk__subtitle {
        font-style: normal;
        font-weight: 500;
        font-size: 18px;
        line-height: 120%;
        margin-bottom: 64px
    }

    .vacancies-section.section {
        padding-inline:0;padding-right: 0;
        padding-left: 0
    }

    .vacancies-section .sidebar {
        padding: 32px 16px 56px;
        background: #fff
    }

    .vacancies-section .sidebar-directions .sidebar_title {
        display: block;
        width: 100%;
        padding: 13px 16px;
        background: #f9f9f9
    }

    .vacancies-section .sidebar-directions {
        position: relative
    }

    .vacancies-section .sidebar-directions:before {
        content: "";
        display: block;
        position: absolute;
        z-index: 1;
        top: 19px;
        right: 19px;
        width: 8px;
        height: 8px;
        border-bottom: 2px solid #000;
        border-right: 2px solid #000;
        transition: all .2s;
        transform: rotate(45deg);
        pointer-events: none
    }

    .vacancies-section .sidebar-directions.active:before {
        top: 22px;
        transform: rotate(-135deg)
    }

    .vacancies-section .sidebar-directions .sidebar-items {
        display: none
    }

    .vacancies-section .sidebar-directions.active .sidebar-items {
        width: 100%;
        max-height: 368px;
        overflow: scroll;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 27px 21px;
        gap: 14px;
        background: #f9f9f9;
        border-bottom: none;
        border-inline:none;border-top: 1px solid #d9d9d9
    }

    .vacancies-section .sidebar-selected {
        display: none;
        padding: 16px;
        border-top: 1px solid #d9d9d9;
        background: #f9f9f9;
        flex-wrap: wrap;
        gap: 8px;
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 120%;
        color: #151915
    }

    .vacancies-section .selected-item {
        padding: 0 4px 0 16px;
        min-height: 32px;
        display: flex;
        align-items: center;
        gap: 4px;
        background: #d9d9d9;
        border-radius: 32px
    }

    .vacancies-section .selected-item button {
        background: 0 0
    }

    .vacancies-section .selected-clean {
        padding-inline:16px;padding-right: 16px;
        padding-left: 16px;
        background: #fff;
        border: 1px solid #d9d9d9;
        order: 2
    }

    .vacancies-section .sidebar_title {
        font-size: 18px;
        line-height: 120%;
        margin-bottom: 0
    }

    .vacancies-section .sidebar-block {
        background: #f9f9f9
    }

    .vacancies-section .sidebar_item:not(:last-child) {
        margin-bottom: 14px
    }

    .vacancies-section .sidebar-qualification .sidebar_title {
        padding: 13px 16px
    }

    .vacancies-section .sidebar-qualification .sidebar-items {
        border-top: 1px solid #d9d9d9;
        padding: 27px 21px
    }

    .vacancies-section .vacancies {
        padding: 56px 16px 80px;
        background: #f9f9f9
    }

    .vacancies-section .vacancies-card {
        background: #fff;
        padding: 44px 30px 24px 24px
    }

    .vacancies-section .vacancies-card_title {
        max-width: 100%
    }

    .vacancies-section .vacancies_link:after {
        display: none
    }
}

.hero-career {
    width: 100%;
color: white;
    /* background-image: url(https://leobit.com/content/themes/leobit-wp-theme/images/career/pattern.webp); */
    background-repeat: repeat-x;
    background-position-x: center;
    min-height: 624px;
    padding: 172px 0 159px
}

.hero-career .hero-header {
    font-style: normal;
    font-size: 80px;
    font-weight: 700;
    line-height: 76px;
    /* text-transform: uppercase; */
    margin-bottom: 32px
}

.hero-career .hero-header span {
    color: red;
}



.hero-career .hero-text {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    color: white;
    line-height: 28px;
    margin-bottom: 58px;
    max-width: 100%
}

@media screen and (max-width: 992px) {
    .hero-career .container {
        max-width:100%;
        padding: 0 16px
    }
}

@media screen and (min-width: 993px) {
    .hero-career .container {
        width:1226px;
        max-width: 92%;
        margin: 0 auto;
        padding: 0
    }

    .hero-career .hero-career-content {
        max-width: 704px
    }
}

@media screen and (max-width: 576px) {
    .hero-career {
        min-height:auto;
        overflow: hidden;
        margin-top: 0
    }

    .hero-career .hero-header {
        font-size: 40px;
        line-height: 36px
    }

    .hero-career .hero-text {
        font-size: 18px;
        margin-bottom: 62px;
        max-width: 100%
    }
}


.openings-primary-button{
    /* background-color: linear-gradient(130.27deg,#97cf00 -14.98%,#24b400 109.44%); */
    background:var(--tp-theme-1);
    padding: 10px 24px;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 80%;
    font-weight: 600;
    color: white;
    cursor: pointer;
    
}



/* careers-page-end */





/* case-studies-start */
.post-type-archive .topblk_alter {
    position: relative;
    z-index: 1
}

.post-type-archive .topblk_alter .topblk__title.title:after {
    content: none
}

@media (min-width: 769px) {
    .post-type-archive .topblk_alter .topblk__title.title {
        font-size:5.714rem
    }
}

.post-type-archive .topblk_alter .topblk__btns .btn {
    height: auto;
    border: 3px solid #57b12d;
    padding-top: 14px;
    padding-bottom: 14px;
    font-size: 1rem;
    line-height: 2;
    color: #fff;
    background-color: unset
}

.post-type-archive .topblk_alter .topblk__btns .btn:hover {
    background: rgba(87,177,45,.22)
}

@media (max-width: 370px) {
    .post-type-archive .topblk_alter .topblk__btns .btn {
        padding-top:10px;
        padding-bottom: 10px
    }
}

@media (min-width: 993px) {
    .post-type-archive-projects .topblk__cont {
        max-width:1200px;
        margin-left: calc(50vw - 600px);
        margin-right: calc(50vw - 600px)
    }
}

.post-type-archive-projects .topblk__title {
    max-width: unset;
    text-align: left
}

.post-type-archive-projects .topblk__subtitle {
    max-width: 540px;
    margin-left: 0;
    margin-right: 0;
    font-size: 20px;
    font-weight: 400;
    text-align: left
}

.post-type-archive-projects .topblk__cont .topblk__btns {
    justify-content: flex-start
}

.post-type-archive-projects .topblk__cont .topblk__btns .btn {
    margin-left: 0;
    margin-right: 0;
    padding: 2px 30px;
    font-size: 14px;
    font-weight: 400
}

.post-type-archive-technologies .topblk__title {
}

.post-type-archive-technologies .topblk__cont .topblk__btns .btn {
    padding: 13px 24px;
    font-weight: 400;
    line-height: 1
}

@media (max-width: 600px) {
    .post-type-archive {
        padding-top:0
    }
}

.cpt-archive {
    padding-top: 6.7rem;
    padding-bottom: 6.7rem;
    background: #f9f9f9
}

.cpt-archive .container {
    max-width: 1286px;
    padding-left: 1rem;
    padding-right: 1rem
}

.cpt-archive__items {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}

.cpt-archive__item {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    flex-grow: 0;
    flex-basis: calc(50% - 15px);
    margin-bottom: 30px;
    background-color: #fff
}

@media (max-width: 1024px) {
    .cpt-archive__item {
        flex-basis:100%
    }
}

.cpt-archive__item_image {
    width: 100%
}

.cpt-archive__item_image .image__link {
    display: inline-block
}

.cpt-archive__item_image .image__link,.cpt-archive__item_image img {
    width: inherit;
    height: inherit
}

.cpt-archive__item_content {
    height: 100%;
    margin: 32px 24px 24px
}

.cpt-archive__item_title {
    margin-bottom: 16px;
    font-style: normal;
    font-weight: 900;
    font-size: 32px;
    line-height: 90%
}

.cpt-archive__item_title .title__link {
    color: inherit
}

.cpt-archive__item_text {
    font-style: normal;
    font-weight: 400;
    font-size: 1.285rem;
    line-height: 150%;
    opacity: .9
}

.cpt-archive__item_link {
    align-self: flex-end;
    margin: 0 24px 24px 0
}

.cpt-archive__item_link .link__button {
    display: flex;
    gap: 10px;
    width: 39px;
    height: 39px;
    border: 2px solid #24b400;
    border-radius: .375rem;
    padding: 11px;
    text-align: center
}

.cpt-archive__item_link .link__button:hover {
    border: 2px solid #24b400;
    background: rgba(87,177,45,.22)
}

.section h2.cpt-archive__item_title {
    text-transform: none;
    color: inherit
}


.section.proj-acrhive {
    padding-top: 56px;
    padding-bottom: 56px;
    background: #f5f5f5
}

.proj_filters {
    list-style-type: none;
    margin-left: 0;
    padding-left: 0;
    display: -ms-flex;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    -ms-justify-content: center;
    justify-content: center;
    margin-bottom: 4rem;
    position: relative;
    top: -1rem
}

.proj_filters input[type=radio] {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    -moz-opacity: 0;
    -khtml-opacity: 0;
    -webkit-opacity: 0;
    opacity: 0
}

.proj_filters input[type=radio]:checked+label {
    color: #33a927
}

.proj_filters input[type=radio]:checked+label:after {
    content: "";
    width: 19px;
    height: 1px;
    background: #33a927;
    position: absolute;
    bottom: 4px;
    left: 1.5rem
}

.proj_filters label {
    color: #191919;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1.25rem;
    line-height: 1;
    text-decoration: none;
    display: block;
    padding: .5rem 1.5rem;
    position: relative;
    will-change: background,opacity;
    transition: background .3s,opacity .3s;
    cursor: pointer
}

.proj_filters label:hover {
    color: #33a927
}

.proj_filters_form {
    position: relative;
    margin-bottom: 120px
}

.proj_filters_form:before {
    content: "";
    position: absolute;
    top: -56px;
    left: calc(-50vw - -50%);
    width: 100vw;
    height: calc(100% + 112px);
    background-color: #ef0000;
}

@media (max-width: 970px) {
    .proj_filters_form {
        margin-bottom:32px
    }
}

.proj_filters_form.is-loading {
    position: relative
}

.proj_filters_form.is-loading:after {
    content: "";
    width: 100%;
    height: 120%;
    position: absolute;
    top: -20px;
    left: 0;
    z-index: 5
}

.proj_item {
    position: relative;
    margin-bottom: 24px;
    border-radius: 6px;
    background: #fff
}

.proj_item_cont {
    padding: 20px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media screen and (max-width: 769px) {
    .proj_item_cont {
        padding:32px 24px 87px
    }
}

.proj_item-large {
    position: relative
}

.proj_item-small {
    width: calc(50% - 10px)
}

.proj_item-small .proj_item_img:hover img {
    transform: scale(1.1)
}

.proj_item_vid {
    position: absolute;
    top: calc(400px + 2rem);
    right: 2rem;
    width: 352px;
    height: 224px;
    padding: 0
}

.proj_item_vid+.proj_item_cont {
    padding-right: 430px;
    min-height: 290px
}

.proj_item_tech {
    display: -ms-flex;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: -1rem
}

.proj_item_tech img {
    max-width: 2rem;
    max-height: 30px;
    height: auto;
    margin-right: 1rem;
    margin-bottom: 1rem
}

.proj_item_img {
    overflow: hidden;
    display: block;
    border-top-right-radius: inherit;
    border-top-left-radius: inherit
}

.proj_item_img img {
    display: block;
    height: auto;
    max-width: 100%;
    will-change: transform;
    transition: transform .3s
}

.proj_item_img:hover img {
    transform: scale(1.02)
}

.proj_list {
    display: -ms-flex;
    display: flex;
    flex-wrap: wrap;
    -ms-justify-content: space-between;
    justify-content: space-between
}

.proj .results-filter {
    display: flex;
    margin: 0 0 40px;
    padding: 0;
    list-style: none;
    text-align: center;
    gap: 15px;
    justify-content: center
}

@media (max-width: 970px) {
    .proj .results-filter {
        margin:0;
        flex-wrap: wrap
    }
}

.proj .results-filter__item {
    display: inline-block;
    position: relative;
    width: 100%;
    max-width: 21%;
    margin-bottom: 0;
    border: none;
    border-radius: 16px;
    font-size: 18px;
    color: #57b12d;
    text-align: left;
    background: #f9f9f9;
    transition-delay: .1s;
    transition: .2s;
    cursor: pointer
}

@media (max-width: 970px) {
    .proj .results-filter__item {
        margin-bottom:15px;
        margin-right: 0;
        border: 1px solid #d8e1e9;
        box-shadow: none;
        max-width: 48%
    }
}

@media (max-width: 770px) {
    .proj .results-filter__item {
        max-width:100%
    }
}

.proj .results-filter__item:before {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    top: 11px;
    right: 20px;
    width: 8px;
    height: 8px;
    border-bottom: 2px solid #000;
    border-right: 2px solid #000;
    transition: all .2s;
    transform: rotate(45deg);
    pointer-events: none
}

@media (max-width: 970px) {
    .proj .results-filter__item:before {
        transform:rotate(-45deg)
    }
}

.proj .results-filter__item.active {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    transition-delay: 0s
}

.proj .results-filter__item.active:before {
    top: 13px;
    border-image-slice: 1;
    border-image-source: linear-gradient(130.27deg,#97cf00 -14.98%,#24b400 109.44%);
    transform: rotate(-135deg)
}

.proj .results-filter__item .results-filter__title {
    display: block;
    padding: 2.5px 45px 2.5px 16px;
    font-size: 14px;
    line-height: 1.9;
    font-weight: 600;
    color: #131c24;
    transition: .2s
}

.proj .results-filter__item .results-filter__title[data-counter]:after {
    content: "(+" attr(data-counter) ")";
    display: inline-block;
    margin-left: .35em;
    color: #afafaf
}

@media (max-width: 970px) {
    .proj .results-filter__item .results-filter__title {
        padding-right:0
    }
}

.proj .results-filter__item .results-filter__dropdown {
    display: none;
    position: absolute;
    z-index: 99;
    top: 100%;
    min-width: 100%;
    padding: 12px 15px 5px;
    border-bottom-right-radius: 16px;
    border-bottom-left-radius: 16px;
    box-shadow: 0 8px 12px rgba(0,0,0,.05);
    background: #f9f9f9;
    overflow: hidden;
    overflow-y: scroll
}

.proj .results-filter__item .results-filter__dropdown::-webkit-scrollbar {
    width: 3px
}

.proj .results-filter__item .results-filter__dropdown::-webkit-scrollbar-track {
    background: 0 0
}

.proj .results-filter__item .results-filter__dropdown::-webkit-scrollbar-thumb {
    border: 1px solid transparent;
    border-radius: 20px;
    background-color: grey
}

@media (max-width: 970px) {
    .proj .results-filter__item .results-filter__dropdown {
        -moz-column-count:2;
        column-count: 2
    }
}

.proj .results-filter__item .results-filter__dropdown li {
    margin-bottom: 19px;
    padding-left: 25px;
    line-height: 20px;
    list-style: none
}

@media (max-width: 970px) {
    .proj .results-filter__item .results-filter__dropdown li {
        display:block;
        margin-bottom: 20px
    }
}

.proj .results-filter__item .results-filter__dropdown li .label-filter {
    position: relative;
    display: block;
    font-size: 14px;
    color: #131c24;
    text-align: left;
    white-space: nowrap;
    cursor: pointer
}

@media (max-width: 970px) {
    .proj .results-filter__item .results-filter__dropdown li .label-filter {
        white-space:wrap
    }
}

.proj .results-filter__item .results-filter__dropdown li .label-filter:before {
    content: "";
    position: absolute;
    border: 1px solid #768693;
    top: 5px;
    top: 0;
    left: -25px;
    height: 20px;
    width: 20px;
    border-image-slice: 1;
    border-image-source: linear-gradient(130.27deg,#97cf00 -14.98%,#24b400 109.44%)
}

.proj .results-filter__item .results-filter__dropdown li .label-filter:after {
    content: "";
    position: absolute;
    width: 5.03px;
    height: 8.43px;
    left: -15px;
    top: 10px;
    border-left: 3px solid #57b12d;
    border-bottom: 3px solid #57b12d;
    transform: translate(-50%,-60%) matrix(-.71,-.71,-.71,.71,0,0);
    opacity: 0
}

.proj .results-filter__item .results-filter__dropdown li .label-filter:hover:after {
    opacity: 1
}

.proj .results-filter__item .results-filter__dropdown li input[type=checkbox] {
    display: none
}

.proj .results-filter__item .results-filter__dropdown li input[type=checkbox]:checked+.label-filter:before {
    background: linear-gradient(130.27deg,#97cf00 -14.98%,#24b400 109.44%)
}

.proj .results-filter__item .results-filter__dropdown li input[type=checkbox]:checked+.label-filter:after {
    border-color: #fff;
    opacity: 1
}

.proj .results-filter__item .results-filter__dropdown li.nothing-found {
    display: none;
    line-height: 1.2;
    padding: 5px 10px;
    white-space: nowrap
}

.proj .results-filter__item .results-filter__item-footer {
    position: absolute;
    display: none;
    height: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px 0 20px;
    text-align: center;
    border-top: 1px solid #d8e1e9
}


.pagination {
    padding-top: 2rem;
    padding-bottom: 2rem;
    -ms-justify-content: center;
    justify-content: center
}

.pagination .page-numbers {
    color: #57b12f;
    font-size: .875rem;
    font-weight: 600;
    display: inline-block;
    padding: 0;
    border: none;
    background: 0 0;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    box-shadow: inset 0 0 0 1px #57b12f;
    margin: .5rem
}

.pagination .page-numbers:hover {
    text-decoration: none
}

.pagination .page-numbers.current {
    color: #fff;
    background: #57b12f;
    font-weight: 600
}

.pagination .page-numbers.next,.pagination .page-numbers.prev {
    margin: .5rem;
    color: transparent;
    text-indent: -9999px;
    width: 50px;
    height: 50px;
    padding: 0;
    background: 0 0;
    box-shadow: inset 0 0 0 1px #dde9d7;
    will-change: background,opacity;
    transition: background .3s,opacity .3s
}

.pagination .page-numbers.next:hover,.pagination .page-numbers.prev:hover {
    -moz-opacity: 1;
    -khtml-opacity: 1;
    -webkit-opacity: 1;
    opacity: 1
}

.pagination .page-numbers.next:before,.pagination .page-numbers.prev:before {
    font-style: normal;
    font-weight: 400;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-indent: 0;
    color: #57b12f;
    display: block;
    margin: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 50px;
    font-size: 1rem;
    font-weight: 700
}

.pagination .page-numbers.next {
    margin-left: 3rem
}

.pagination .page-numbers.next:before {
    content: "\e802"
}

.pagination .page-numbers.prev {
    margin-right: 3rem
}

.pagination .page-numbers.prev:before {
    content: "\e803"
}

body.blog:not(.design) .pagination .page-numbers.next svg,body.blog:not(.design) .pagination .page-numbers.prev svg {
    display: none
}

body.post-type-archive-projects .pagination .page-numbers {
    width: auto;
    height: auto;
    margin: 0;
    padding-left: 15px;
    padding-right: 8px;
    font-size: 24px;
    line-height: 39px;
    font-weight: 400;
    color: rgba(0,0,0,.2);
    box-shadow: unset;
    transition: .3s
}

body.post-type-archive-projects .pagination .page-numbers.current {
    color: #191919;
    background-color: unset
}

body.post-type-archive-projects .pagination .page-numbers.current:after {
    content: "|";
    display: inline-block;
    width: 0;
    margin-left: 8px;
    color: rgba(0,0,0,.2);
    pointer-events: none
}

body.post-type-archive-projects .pagination .page-numbers.next,body.post-type-archive-projects .pagination .page-numbers.prev {
    position: relative;
    width: 39px;
    height: 39px;
    margin: 0;
    border-width: 2px;
    border-style: solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(130.27deg,#97cf00 -14.98%,#24b400 109.44%);
    padding: 0;
    line-height: 39px
}

body.post-type-archive-projects .pagination .page-numbers.next:before,body.post-type-archive-projects .pagination .page-numbers.prev:before {
    content: unset
}

body.post-type-archive-projects .pagination .page-numbers.next:hover,body.post-type-archive-projects .pagination .page-numbers.prev:hover {
    background: rgba(87,177,45,.22)
}

body.post-type-archive-projects .pagination .page-numbers.next.inactive,body.post-type-archive-projects .pagination .page-numbers.prev.inactive {
    border-image-source: none;
    pointer-events: none
}

body.post-type-archive-projects .pagination .page-numbers.next.inactive svg,body.post-type-archive-projects .pagination .page-numbers.prev.inactive svg {
    fill: rgba(0,0,0,.2)
}

body.post-type-archive-projects .pagination .page-numbers.next svg,body.post-type-archive-projects .pagination .page-numbers.prev svg {
    position: absolute;
    top: calc(50% - 6.5px);
    left: calc(50% - 8px)
}

body.post-type-archive-projects .pagination .page-numbers.next {
    margin-left: 25px
}

body.post-type-archive-projects .pagination .page-numbers.prev {
    margin-right: 15px;
    transform: rotate(180deg)
}

.project_content p{
    font-size: 15px;
    line-height: 25px;
}

.ptitle a{
    font-size: 1.9rem;
    font-weight: 600;
}

.psubtitle{
    font-size: 1.1rem;
    font-weight: 500;
}
.project_content+.item__link {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 24px;
    bottom: 0px;
    width: 39px;
    height: 39px;
    margin-left: auto;
    border: 2px solid #24b400;
    padding: 11px;
}
/* case-studies-end */

/* Internship Start */

.hero-internship {
    width: 100%;
    padding: 0;
    color: #fff;
    background: #191919
}

.hero-internship .hero-internship-section {
    color: #fff;
    padding-bottom: 159px;
    padding-top: 172px
}

.hero-internship .hero-internship-content {
    text-align: center
}

.hero-internship .hero-internship-content .primary-button {
    margin-inline:auto}

.hero-internship .hero-internship-header {
    font-style: normal;
    font-weight: 400;
    font-size: 80px;
    line-height: 70px;
    text-transform: uppercase;
    margin-bottom: 32px
}

.hero-internship .hero-internship-text {
    max-width: 704px;
    margin-inline:auto;margin-right: auto;
    margin-left: auto;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 120%;
    margin-bottom: 62px
}

.color-gradient {
    background-color: white;
    background-image: var(--tp-theme-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    font-weight:bolder;
    /*margin-bottom: 20px;*/
}


@media screen and (max-width: 992px) {
    .hero-internship .hero-internship-section {
        color:#fff;
        padding-block:120px;padding-inline:16px;padding: 120px 16px
    }
}

@media screen and (max-width: 576px) {
    .hero-internship {
        min-height:auto;
        overflow: hidden;
        margin-top: 0
    }

    .hero-internship .hero-internship-section {
        color: #fff;
        padding-block:120px;padding-inline:16px;padding: 120px 16px
    }

    .hero-internship .hero-internship-content {
        width: 100%
    }

    .hero-internship .hero-internship-header {
        font-size: 40px;
        line-height: 36px
    }

    .hero-internship .hero-internship-text {
        font-weight: 500;
        font-size: 18px;
        line-height: 120%;
        margin-bottom: 62px
    }

}
.page-menu-section {
    padding-block:16px;padding-bottom: 16px;
    padding-top: 16px;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center
}

.page-menu-section:has(>.silver-background) {
    background: #f9f9f9
}

.page-menu-section .nav {
    align-self: center;
    display: flex;
    gap: 0;
    margin-bottom: 0
}

.page-menu-section .nav li {
    padding: 9px 20px
}

.page-menu-section .nav li:not(:last-child) {
    border-right: 1px solid rgba(0,0,0,.1)
}

.page-menu-section .nav a {
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    text-transform: uppercase;
    color: #151915
}

.page-menu-section .current-menu-item a {
    color: var(--tp-theme-primary)
}

@media screen and (max-width: 576px) {
    .page-menu-section {
        padding-block:16px;
        padding-bottom: 16px;
        padding-top: 16px!important;
        overflow: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none
    }

    .page-menu-section::-webkit-scrollbar {
        display: none
    }

    .page-menu-section .nav {
        margin-left: 0;
        align-self: flex-start;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        gap: 0;
        margin-bottom: 0
    }

    .page-menu-section .nav li {
        width: -moz-max-content;
        width: max-content;
        padding: 4px 20px
    }

    .page-menu-section .nav a {
        padding: 5px 0;
        font-size: 12px;
        line-height: 14px
    }
}
.program--section {
    background: #fff;
    padding-block:120px;
    padding-bottom: 120px;
    padding-top: 120px;
    color: #151915
}

.program--section .row {
    display: flex;
    justify-content: space-between
}

.program--section .program-text>* {
    max-width: 496px
}

.program--section .section-header {
    margin-bottom: 32px
}

.program--section .program-text p {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    color: #151915
}

.program--section .program-title {
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 90%;
    /*text-transform: uppercase;*/
    color: #151915;
    margin-top: 72px;
    margin-bottom: 24px;
    width: -moz-fit-content;
    width: fit-content
}

.program--section .program-title h4 {
    width: calc(100% + 20px);
    margin-bottom: unset
}

.program--section .program-title h4:after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    background: var(--tp-theme-primary);
    position: relative;
    left: 13px;
    bottom: 3px;
    transform: rotate(45deg);
    min-width: 10px;
    vertical-align: middle
}

.program--section .program-text {
    position: relative
}

.program--section .plans {
    margin-top: 48px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.program--section .plan-card {
    position: relative;
    width: 100%;
    background: #f9f9f9;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 24px
}

.program--section .plan-card #end-line {
    position: absolute;
    top: 50%;
    left: -16px
}

.program--section .plan-number {
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 48px;
    text-transform: uppercase
}

.program--section .plan {
    border-left: 2px solid #fff;
    padding-left: 24px
}

.program--section .plan-name {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 100%;
    text-transform: uppercase;
    margin-bottom: 16px
}

.program--section .plan-description {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    color: #151915;
    opacity: .9
}

@media screen and (max-width: 1280px) {
    .program--section .program-text>* {
        max-width:460px
    }

    .program--section .plans-wrapper {
        width: 45%
    }
}

@media screen and (max-width: 992px) {
    .program--section .plans-wrapper {
        width:unset
    }

    .program--section .program-text>* {
        max-width: 100%
    }

    .program--section .program-description {
        max-width: 90%
    }
}

@media screen and (max-width: 576px) {
    .program--section.section {
        padding-top:64px;
        padding-bottom: 80px
    }

    .program--section .container {
        padding-right: 0;
        padding-left: 0
    }

    .program--section .section-header {
        font-size: 32px;
        line-height: 80%
    }

    .program--section .program-title {
        max-width: calc(100% - 120px);
        margin-top: 64px;
        margin-bottom: 16px;
        font-size: 20px;
        line-height: 90%;
        position: relative
    }

    .program--section .program-text p {
        font-size: 16px;
        line-height: 150%
    }

    .program--section .plans {
        margin-top: 40px;
        gap: 16px
    }

    .program--section .plan-card {
        height: auto;
        padding: 16px;
        gap: 16px;
        align-items: flex-start
    }

    .program--section .plan {
        border-left: 2px solid #d9d9d9;
        padding-left: 16px
    }

    .program--section .plan-name,.program--section .plan-number {
        font-size: 16px;
        line-height: 120%
    }

    .program--section .plan-name {
        margin-bottom: 10px
    }
}

.centered-element {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%)
}

.steps--section {
    background: #f9f9f9;
    padding-top: 80px;
    padding-bottom: 90px;
    text-align: center
}

.steps--section .section-header {
    margin-bottom: 16px
}

.steps--section .section-text {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    color: #151915;
    margin-bottom: 32px
}

.steps--section .all-steps {
    display: flex;
    gap: 24px;
    margin-bottom: 64px;
    flex-wrap: wrap
}

.steps--section .step {
    height: 124px;
    width: 288px;
    padding: 20px;
    background: #fff;
    box-shadow: 0 8px 40px rgba(0,0,0,.08);
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
    border-radius: var(--border-radius);
}

.steps--section .step-number {
    font-size: 32px;
    line-height: 90%;
    text-transform: uppercase;
    background: var(--tp-theme-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent
}

.steps--section .step-number,.steps--section .step-task {
    font-style: normal;
    font-weight: 400
}

.steps--section .step-task {
    font-size: 18px;
    line-height: 100%;
    text-transform: uppercase;
    text-align: left;
    color: #151915
}

.steps--section .step:last-child {
    background: var(--tp-theme-1);
    position: relative
}

.steps--section .step:last-child .step-number {
    color: #fff;
    background: 0 0;
    -webkit-text-fill-color: #fff;
    text-fill-color: #fff
}

.steps--section .step:last-child .step-task {
    width: 100%;
    display: flex;
    justify-content: space-between
}

.steps--section .step:not(:last-child) .arrow {
    display: none
}

.steps--section .step:last-child .arrow {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 14px;
    gap: 10px;
    width: 39px;
    height: 39px;
    background: 0 0;
    border: 2px solid #fff
}

.steps--section .buttons {
    display: flex;
    justify-content: center;
    gap: 24px
}

.steps--section .button-apply {
    background: linear-gradient(130.27deg,#97cf00 -14.98%,#24b400 109.44%)
}

.steps--section .button-apply:hover {
    color: #191919
}

.steps--section .button-join {
    align-items: center;
    padding: 7px 24px;
    gap: 16px
}

.steps--section .button-join:hover {
    color: #191919
}

.steps--section .icon-join-telegram {
    height: 21px;
    width: 20px
}

.steps--section .icon-right-arrow {
    height: 13px;
    width: 17px
}

@media screen and (max-width: 992px) {
    .steps--section .all-steps {
        display:flex;
        gap: 24px;
        margin-bottom: 64px;
        flex-wrap: wrap;
        justify-content: center
    }
}

@media screen and (max-width: 576px) {
    .steps--section.section {
        padding-top:80px;
        padding-bottom: 80px;
        text-align: left
    }

    .steps--section .container {
        margin-inline:-10.5px;margin-right: -10.5px;
        margin-left: -10.5px
    }

    .steps--section .section-header {
        margin-bottom: 24px;
        font-size: 32px;
        line-height: 80%
    }

    .steps--section .step {
        height: auto;
        width: 100%;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px
    }

    .steps--section .step-number {
        font-size: 20px;
        line-height: 90%
    }

    .steps--section .buttons {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 24px
    }

    .steps--section .button-apply,.steps--section .button-join {
        min-width: 255px
    }
}

.program--section {
    background: #fff;
    padding-block:120px;padding-bottom: 120px;
    padding-top: 120px;
    color: #151915
}

.program--section .row {
    display: flex;
    justify-content: space-between
}

.program--section .program-text>* {
    max-width: 496px
}

.program--section .section-header {
    margin-bottom: 32px
}

.program--section .program-text p {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    color: #151915
}

.program--section .program-title {
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 90%;
    text-transform: uppercase;
    color: #151915;
    margin-top: 72px;
    margin-bottom: 24px;
    width: -moz-fit-content;
    width: fit-content
}

.program--section .program-title h4 {
    width: calc(100% + 20px);
    margin-bottom: unset
}
cc

.program--section .program-text {
    position: relative
}

.program--section .plans {
    margin-top: 48px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.program--section .plan-card {
    position: relative;
    width: 100%;
    background: #f9f9f9;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 24px
}

.program--section .plan-card #end-line {
    position: absolute;
    top: 50%;
    left: -16px
}

.program--section .plan-number {
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 48px;
    text-transform: uppercase
}

.program--section .plan {
    border-left: 2px solid #fff;
    padding-left: 24px
}

.program--section .plan-name {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 100%;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.program--section .plan-description {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    color: #151915;
    opacity: .9
}

@media screen and (max-width: 1280px) {
    .program--section .program-text>* {
        max-width:460px
    }

    .program--section .plans-wrapper {
        width: 45%
    }
}

@media screen and (max-width: 992px) {
    .program--section .plans-wrapper {
        width:unset
    }

    .program--section .program-text>* {
        max-width: 100%
    }

    .program--section .program-description {
        max-width: 90%
    }
}

@media screen and (max-width: 576px) {
    .program--section.section {
        padding-top:64px;
        padding-bottom: 80px
    }

    .program--section .container {
        padding-right: 0;
        padding-left: 0
    }

    .program--section .section-header {
        font-size: 32px;
        line-height: 80%
    }

    .program--section .program-title {
        max-width: calc(100% - 120px);
        margin-top: 64px;
        margin-bottom: 16px;
        font-size: 20px;
        line-height: 90%;
        position: relative
    }

    .program--section .program-text p {
        font-size: 16px;
        line-height: 150%
    }

    .program--section .plans {
        margin-top: 40px;
        gap: 16px
    }

    .program--section .plan-card {
        height: auto;
        padding: 16px;
        gap: 16px;
        align-items: flex-start
    }

    .program--section .plan {
        border-left: 2px solid #d9d9d9;
        padding-left: 16px
    }

    .program--section .plan-name,.program--section .plan-number {
        font-size: 16px;
        line-height: 120%
    }

    .program--section .plan-name {
        margin-bottom: 10px
    }
}
.program-benefits--section {
    background: #f9f9f9;
    padding-block:120px;padding-bottom: 120px;
    padding-top: 120px
}

.program-benefits--section .section-header {
    margin-bottom: 64px
}

.program-benefits--section .title {
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 90%;
    text-transform: uppercase;
    margin-bottom: 16px;
    color: #151915
}

.program-benefits--section .description {
    font-weight: 400
}

.program-benefits--section .description,.program-benefits--section .list {
    font-style: normal;
    font-size: 18px;
    line-height: 150%;
    color: #151915;
    opacity: .9
}

.program-benefits--section .list {
    font-weight: 700;
    padding-left: 0;
    margin-top: 32px
}

.program-benefits--section .list-item {
    max-width: 496px;
    margin-top: 16px;
    gap: 4px;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: #151915;
    opacity: .9;
    padding-left: 29px;
    position: relative
}

.program-benefits--section .list-item:before {
    display: inline-block;
    margin: 0 auto;
    width: 10px;
    height: 10px;
    background: var(--tp-theme-primary);
    transform: rotate(45deg);
    content: "";
    position: absolute;
    left: 8px;
    top: 10px
}

.program-benefits--section .list-mark-cover {
    flex: 0 0 24px;
    text-align: center
}

.program-benefits--section .list-mark {
    display: inline-block;
    margin: 0 auto;
    width: 10px;
    height: 10px;
    background: linear-gradient(130.27deg,#97cf00 -14.98%,#24b400 109.44%);
    transform: rotate(45deg)
}

.program-benefits--section .list-item-text {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: #151915;
    opacity: .9
}

.program-benefits--section .benefits {
    margin-top: 48px;
    display: grid;
    grid-template-columns: 2fr auto;
    gap: 8px
}

.program-benefits--section .benefit-card.benefit-card-black {
    color: #fff;
    background: linear-gradient(304.38deg,#000 11.74%,#323232 84.36%);
    gap: 16px
}

.program-benefits--section .benefit-subtitle {
    font-weight: 500;
    font-size: 14px;
    line-height: 120%
}

.program-benefits--section .benefit-title {
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 90%;
    text-transform: uppercase
}

.program-benefits--section .benefit-card {
    background: #fff;
    width: 288px;
    height: 144px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-radius: var(--border-radius);
}

.program-benefits--section .benefit-number {
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 90%;
    text-transform: uppercase
}

.program-benefits--section .benefit {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    color: #151915;
    opacity: .9
}

@media screen and (max-width: 992px) {
    .program-benefits--section .benefits {
        margin-top:32px;
        display: flex;
        flex-wrap: wrap
    }

    .program-benefits--section .benefit-card {
        width: calc(50% - 4px)
    }
}

@media screen and (max-width: 576px) {
    .program-benefits--section.section {
        padding-top:80px;
        padding-bottom: 80px
    }

    .program-benefits--section .container {
        padding-right: 0;
        padding-left: 0
    }

    .program-benefits--section .section-header {
        font-size: 32px;
        line-height: 80%;
        margin-bottom: 56px
    }

    .program-benefits--section .title {
        font-size: 20px;
        line-height: 90%
    }

    .program-benefits--section .description {
        font-size: 16px;
        line-height: 150%
    }

    .program-benefits--section .list {
        font-size: 16px;
        line-height: 150%;
        margin-top: 40px
    }

    .program-benefits--section .benefits {
        margin-top: 64px;
        justify-content: center;
        gap: 16px
    }

    .program-benefits--section .benefit-title {
        font-size: 20px;
        line-height: 90%
    }

    .program-benefits--section .benefit-card {
        width: 100%;
        height: auto;
        padding: 16px;
        gap: 8px
    }

    .program-benefits--section .benefit-card .benefit br {
        display: none
    }

    .program-benefits--section .benefit-number {
        font-size: 20px;
        line-height: 90%
    }
}

:root {
    --inline-padding: calc(50% - 613px)
}

.inline-padding {
    padding-inline:var(--inline-padding);padding-right: var(--inline-padding);
    padding-left: var(--inline-padding)
}

.success-stories--section {
    padding-block:120px;padding-bottom: 120px;
    padding-top: 120px;
    background: #fff!important;
    overflow: hidden
}

.inline-padding .container {
    margin-inline:-10.5px;margin-right: -10.5px;
    margin-left: -10.5px
}

.success-stories-swiper-slide,.success-stories-swiper-wrapper {
    display: flex;
    min-width: 100vw;
    position: relative
}

.success-stories-swiper-slide {
    flex-basis: 100vw;
    padding-inline:var(--inline-padding);padding-right: var(--inline-padding);
    padding-left: var(--inline-padding);
    gap: 60px
}

.success-stories--section .section-header {
    max-width: 600px;
    margin-bottom: 52px
}

.success-stories--section .quote--container {
    background: #fff;
    box-shadow: 0 8px 40px rgba(0,0,0,.08)
}

.quote--container .row {
    height: 100%
}

.success-stories--section .quote-photo--cover {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start
}

.success-stories--section .quote-photo {
    width: 100%;
    max-width: 281px;
    height: auto
}

.success-stories--section .quote {
    padding: 40px 104px 40px 0;
    position: relative;
    color: #151915;
    font-size: 16px
}

.success-stories--section .quote-quotes {
    position: absolute;
    left: 0;
    top: -12px
}

.success-stories--section .quote-text {
    font-style: italic;
    font-weight: 400;
    line-height: 30px
}

.success-stories--section .quote-author {
    margin-top: 40px
}

.success-stories--section .quote-author--name {
    font-weight: 700;
    line-height: 21px
}

.success-stories--section .quote-author--position {
    font-weight: 300;
    line-height: 21px
}

.success-stories--section .quote-author--photo {
    display: none
}

.success-stories--section .icon-left-arrow,.success-stories--section .icon-right-arrow {
    height: 13px;
    width: 17px
}

.success-stories--section .success-stories-nav {
    margin-top: 56px;
    display: flex;
    justify-content: center!important;
    align-items: center
}

.success-stories--section .success-stories-nav button {
    line-height: 14px;
    margin-left: 12px;
    margin-right: 12px;
    max-width: 39px;
    max-height: 39px
}

.success-stories--section .success-stories-nav span {
    display: inline-block;
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 30px;
    min-width: 32px;
    text-align: center;
    padding-right: 8px
}

.success-stories--section .success-stories-nav span:last-of-type {
    color: #d9d9d9;
    border-left: 1px solid #d9d9d9;
    padding-right: 0;
    padding-left: 8px
}

.success-stories--section .success-stories-nav-pagination {
    margin-left: unset
}

.success-stories--section .success-stories-mobile {
    display: none
}

@media screen and (max-width: 992px) {
    .success-stories--section .quote--container {
        max-width:100%!important
    }

    .success-stories--section .quote {
        padding: 32px 32px 32px 0
    }
}

@media screen and (max-width: 768px) {
    .success-stories--section .quote {
        padding:32px
    }

    .success-stories--section .quote-photo {
        display: none
    }

    .success-stories--section .quote-author {
        margin-top: 32px;
        display: flex;
        flex-direction: row;
        gap: 16px;
        align-items: center
    }

    .success-stories--section .quote-author--photo {
        display: block;
        width: 64px;
        height: 64px;
        border-radius: 50%
    }
}

@media screen and (max-width: 576px) {
    .success-stories--section {
        padding-top:80px;
        padding-bottom: 80px;
        text-align: left
    }

    .success-stories--section .section-header {
        font-size: 32px;
        line-height: 80%;
        margin-bottom: 55px
    }

    .success-stories--section .success-stories-nav,.success-stories--section .success-stories-swiper-wrapper {
        display: none
    }

    .success-stories--section .success-stories-mobile {
        display: block
    }

    .success-stories-mobile-carousel {
        display: flex
    }

    .success-stories--section .success-stories-mobile-content {
        display: flex;
        flex-direction: column;
        gap: 32px;
        padding: 0 16px;
        min-width: 100vw
    }

    .success-stories--section .quote-photo {
        display: none
    }

    .success-stories--section .quote {
        padding: 24px;
        box-shadow: 0 8px 40px rgba(0,0,0,.08);
        height: 100%
    }

    .success-stories--section .quote-quotes {
        position: absolute;
        left: 24px;
        top: -17px
    }

    .success-stories--section .quote-text {
        font-size: 16px;
        line-height: 30px
    }

    .success-stories--section .quote-author {
        margin-top: 51px;
        display: flex;
        flex-direction: row;
        gap: 16px;
        align-items: center
    }

    .success-stories--section .quote-author--photo-cover {
        display: block;
        width: 48px;
        height: 48px;
        background: #daeed1;
        border-radius: 100px;
        position: relative;
        overflow: clip
    }

    .author--photo {
        position: absolute;
        width: 39px;
        height: auto;
        left: calc(50% - 19px);
        top: 2px
    }

    .success-stories--section .quote-author--name,.success-stories--section .quote-author--position {
        font-size: 16px;
        line-height: 21px
    }

    .success-stories-mobile-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 10px;
        gap: 16px;
        padding-top: 32px;
        padding-bottom: 0;
        background: #fff
    }

    .success-stories-mobile-pagination .strength-car-bullet {
        height: 5px;
        width: 5px;
        background: #d9d9d9;
        transition: .5s
    }

    .success-stories-mobile-pagination .strength-car-bullet-active {
        height: 8px;
        width: 8px;
        background: linear-gradient(130.27deg,#97cf00 -14.98%,#24b400 109.44%);
        transform: rotate(45deg)
    }
}

.section-internship {
    padding-top: 120px;
    padding-inline:var(--inline-padding);padding-right: var(--inline-padding);
    padding-left: var(--inline-padding);
    padding-bottom: 120px
}

.section-internship.no-padding {
    padding: unset
}

.section-internship h2.section-internship-header {
    text-transform: uppercase
}

.section-internship h2.section-header.color-white {
    color: #fff
}

.section-header {
    font-size: 40px;
    line-height: 48px;
    line-height: 1.10;
    font-weight: 600;
}

.section-name {
    font-size: 20px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: 0;
    text-align: left;
    margin-bottom: 16px
}

.bg-color-gradient {
    background: linear-gradient(130deg,#97cf00 -15%,#24b400 109%)
}

.color-gradient {
    /* background-color: #97cf00; */
    background-image: var(--tp-theme-1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.secondary-button-internship {
    border-width: 2px;
    border-style: solid;
    border-image-slice: 1;
    border-color: var(--tp-theme-1)
}

.button-join {
    align-items: center;
    padding: 7px 24px;
    gap: 16px
}

/* Internship End */



/* cookie-banner-start */
/* ================= COOKIE BANNER START ================= */

.cookie-banner {
        display: none; /* hidden by default */

  position: fixed;
  bottom: 20px;
  left: 0;
    margin-left: 30px;
  max-width: 575px;
  margin: auto 20px;
  background-color: #000;                /* Black background */
  color: #fff;                           /* White text */
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  overflow: hidden;                      /* Clip flex children */
  z-index: 9999;

  /* Entrance animation: slide up + fade in */
  opacity: 0;
  transform: translateY(50px);
  animation: slideUpFadeIn 0.4s ease-out forwards;
}

@keyframes slideUpFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

  /* Only run animation when this class is added */
  .show-with-animation {
    animation: slideUpFadeIn 0.4s ease-out forwards;
  }

/* Wrapper for icon + text + close button */
.cookie-content-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 17px;
  flex-wrap: wrap;
  position: relative;  /* For positioning the close button */
}

.cookie-picture img {
  width: 60px;
  height: auto;
  flex-shrink: 0;
}

.cookie-text {
  flex: 1 1 240px;
  font-size: 14px;
  line-height: 1.5;
}

.cookie-text p {
  margin: 0 0 10px;
    color: white;
    font-size: 13px;
}

.cookie-text a {
  color: #fff;
  text-decoration: underline;
  font-weight: bold;
  transition: color 0.2s ease;
}

.cookie-text a:hover,
.cookie-text a:focus {
  color: var(--tp-theme-primary);  /* Limegreen hover */
}

/* “X” close button in top‐right */
.cookie-close {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 20px;
  line-height: 1;
  color: #fff;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  transition: color 0.2s ease;
}

.cookie-close:hover,
.cookie-close:focus {
  color: var(--tp-theme-secondary);
}

/* Container for the two action buttons */
.cookie-actions {
  display: flex;
  gap: 10px;
  padding: 0 17px 17px;
  flex-wrap: wrap;
}

.button {
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid #fff;      /* Default border is white */
  background-color: transparent;
  color: #fff;                  /* White button text */
  font-weight: bold;
  font-size: 13px;
  border-radius: 4px;
  padding: 8px 10px;
  cursor: pointer;
  transition: background-color 0.2s ease,
              color 0.2s ease,
              border-color 0.2s ease;
  flex: 1 1 150px;
  text-align: center;
}

.button:hover,
.button:focus {
  background-color: #fff;
  color: #000;
  outline: none;
}

/* “Accept All” button gets a limegreen border by default */
.cookie-accept {
  border-color: var(--tp-theme-primary);
}

.cookie-accept:hover,
.cookie-accept:focus {
  border-color: #000;
  background-color: var(--tp-theme-primary);
  color: #000;
}

/* “Keep Only Essential” button keeps the white border */
.cookie-essential {
  border-color: #fff;
}

/* Responsive adjustments for narrow screens */
@media (max-width: 600px) {
  .cookie-content-wrapper {
    padding: 15px;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .cookie-picture img {
    margin-bottom: 12px;
  }

  .cookie-text {
    flex: unset;
    width: 100%;
  }

  .cookie-actions {
    justify-content: center;
    padding: 0 15px 15px;
  }

  .button {
    flex: 1 1 100%;
  }
}

/* ================= COOKIE BANNER END ================= */






/* homepage-blog-start */
.new-blog {
    position: relative;
;
}
.modify009{
    display: flex ;
    justify-content: center;
}
.modify008 {
    background-color: #1b232e;
    /* border: 1px solid black; */
    border-radius: 20px;
    width: 90%;

}
.section-home-new {
    padding: 100px 80px;
}

@media screen and (max-width: 576px) {
    .section-home-new {
        padding: 4rem 1.2rem;
    }
}
.project-heading{
    color: white;
    font-size: 30px;
    font-weight: 600;
    text-align: start;
    padding-top: 20px;
    padding-bottom: 20px;
}
.section-project-management{
    /* padding-top: 60px;
    padding-bottom: 60px; */
    margin-top: 60px;
    margin-bottom: 60px;
    padding-left: 60px;
    padding-right: 60px;
}

.new-blog .breadcrumb {
    margin-bottom: 0
}

.new-blog-header {
    display: flex;
    justify-content: space-between
}

.new-blog-naming .section-header {
    /*width: 496px;*/
    font-size: 40px;
    margin-bottom: 0
}

.new-blog-picker {
    display: flex;
    flex-direction: row;
    gap: 12px;
    margin-top: 48px;
    flex-wrap: wrap;
    align-content: flex-end
}

.new-blog-picker .button {
    text-align: center;
    line-height: 20px;
    border-radius: 200px;
    padding: 8px 16px 4px;
    max-height: 32px;
    background: rgba(25,25,25,.1);
    color: #151915;
    white-space: nowrap
}

.new-blog-picker .button.active {
    /* background: linear-gradient(130.27deg,#97cf00 -14.98%,#24b400 109.44%); */
    background-color: var(--tp-theme-primary);
    color: #fff
}

.new-blog-carousel {
    margin-top: 80px
}

.new-blog .section__row,.new-blog-card,.new-blog-carousel {
    position: relative
}

.new-blog-card {
    display: flex;
    flex-direction: column;
    min-width: 392px;
    max-width: 392px;
    transition: .2s ease-in-out;
    transition-property: background-color;
    box-shadow: 0 8px 40px rgba(0,0,0,.08);
    padding-bottom: 32px
}

.new-blog-card-body {
    height: 100%;
}

.new-blog-card__link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10
}

.new-blog-card-tags a {

    margin-top: 2px;
    font-feature-settings: "clig" off, "liga" off;
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}

.new-blog-card-tags a,.new-blog-card-tags a:hover {
    color: white;
}

.new-blog-card:hover {
    z-index: 444;
    background-color: #191919;
    padding-bottom: 158px
}

.new-blog-card:hover .post-description {
    display: block;
    overflow: hidden;
    font-size: 16px;
    line-height: 120%;
    max-height: 194px;
}

.post-description {
    padding-top: 10px;
}

.new-blog-card:hover .new-blog-card-body {
    position: absolute;
    height: 85%;
    top: 42px;
    margin-top: 0;
    color: #f9f9f9
}

.new-blog-card:hover .new-blog-card-tags .button {
    background: hsla(0,0%,100%,.1)
}

.new-blog-card:hover .new-blog-card-tags .button a {
    color: #f9f9f9
}

.new-blog-card:hover .new-blog-card-img-container {
    position: relative
}

.new-blog-card:hover .new-blog-card-img-container:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.5))
}

.new-blog-card-text {
    width: 100%;
    padding: 12px 18px 10px;
    transition: .2s
}

.new-blog-card-text .new-blog-card-headline {
    font-size: 1.4rem;
    margin-bottom: 10px;
    }


.new-blog-card-date {
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 20px
}

.new-blog-card h3 {
    font-style: normal;
    font-size: 20px;
    line-height: 26px;
    margin-top: 12px
}

.new-blog-card-tags {
    /*display: flex;*/
    gap: 7px;
    padding: 12px 18px 18px;
    flex-wrap: wrap;
    align-items: center;
}



.new-blog-card-tags .button {
    /*display: flex;*/
    padding: 2px 16px;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    color: #fff;
    background: var(--tp-theme-background);
}

.new-blog-card-tags .button p {
    min-width: 32px;
    max-width: 100%;
    line-height: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: clamp(12px, 1.4vw, 14px) !important;
}

.new-blog-card-img-container {
    height: 196px;
    display: flex
}

.new-blog-card-img {
    flex: 0 1 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transition: 3s;
    height: 196px;
    border-radius: 10px 10px 0 0;
}

.new-blog-card:hover .new-blog-card-img-container {
    z-index: 1;
    -webkit-clip-path: inset(0 0 100% 0);
    clip-path: inset(0 0 100% 0)
}

.our-new-blog.secondary-button {
    position: absolute;
    right: 0;
    bottom: 0
}

.our-new-blog.secondary-button a {
    color: inherit
}

.new-blog-footer {
    position: relative;
    margin-top: 24px
}

.new-blog-footer,.new-blog-nav {
    display: flex;
    justify-content: center
}

.new-blog-nav {
    margin-top: 64px;
    gap: 24px;
    align-items: center
}

.new-blog-nav button.swiper-button-disabled {
    background-image: none;
    background-origin: unset;
    background-clip: unset;
    box-shadow: unset;
    border-color: #d9d9d9;
    cursor: default
}

.new-blog-nav button.swiper-button-disabled path,.new-blog-nav button.swiper-button-disabled svg {
    fill: #d9d9d9
}

@media screen and (max-width: 992px) {
    .section.new-blog {
        overflow:visible
    }

    .new-blog .new-blog-header {
        display: flex;
        flex-direction: column
    }

    .new-blog .new-blog-picker {
        padding-top: 16px;
        padding-bottom: 16px;
        flex-wrap: wrap;
        padding-left: 16px;
        width: 100vw;
        top: 56px;
        z-index: 989;
        background: 0 0;
        margin-left: -16px;
        align-self: flex-start
    }

    .new-blog .new-blog-carousel {
        padding-bottom: 40px;
        margin-top: 40px
    }

    .new-blog .new-blog-carousel .new-blog-card {
        min-width: 317px;
        max-width: 317px;
        box-shadow: 0 8px 40px rgba(0,0,0,.08)
    }

    .new-blog .new-blog-carousel .new-blog-card-img-container {
        min-height: 180px;
        max-height: 180px
    }

    .new-blog .new-blog-carousel .new-blog-card-body .new-blog-card-text {
        margin-top: 24px;
        padding-inline:24px;
    }

    .new-blog .new-blog-carousel .new-blog-card-body .new-blog-card-text h2 {
        font-size: 16px;
        margin-top: 8px
    }

    .new-blog .new-blog-carousel .new-blog-card-body .new-blog-card-tags {
        margin-top: 24px;
        padding-inline:24px;padding-right: 24px;
        padding-left: 24px
    }

    .new-blog .new-blog-footer .new-blog-nav {
        display: none
    }

    .new-blog .new-blog-footer button.our-new-blog {
        position: relative
    }

    .new-blog .new-blog-footer button.our-new-blog a {
        color: #151915
    }
}


.secondary-button {
    display: flex;
    justify-content: center;
    gap: 10px;
    width: -moz-max-content;
    width: max-content;
    box-sizing: border-box;
    padding: 12px 24px;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 80%;
    text-transform: uppercase;
    background: 0 0;
    color: #151915;
    cursor: pointer;
}

.secondary-button {
    border-width: 2px;
    border-style: solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(130.27deg,#97cf00 -14.98%,#24b400 109.44%);
}

.new-blog-section-header{
    line-height: 1.25;
    font-weight: 600;
}

/* homepage-blog-end */




 /* blog-details-page-start  */
/*Blog header start*/

.article-header {
  background: #f6f9fc;
  padding: 80px 0 40px;
}

.article-header .article-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px;
  display: flex;
  gap: 48px;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.06);
  position: relative;
  z-index: 5;
  overflow: hidden;
}

.article-header .left-side {
  flex: 0 0 300px;
  background: #0d0d0d;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
}

.article-header .left-side img {
  width: 100%;
  height: auto;
  display: block;
}

.article-header .main-side {
  flex: 1;
  padding-right: 16px;
}

.article-header .tags-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.article-header .tag {
  font-size: 11px;
  font-weight: 600;
  padding: 6px 16px;
  background: #000;
  color: #fff;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.article-header .header {
  font-size: 38px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 24px;
  color: #151915;
}

.article-header .article-detail {
  display: flex;
  gap: 12px;
  font-size: 14px;
  color: #555;
  margin-bottom: 32px;
  align-items: center;
}

.article-authors {
  display: flex;
  align-items: center;
}

.article-author {
  display: flex;
  align-items: center;
  gap: 16px;
}

.author-photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.author-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.author-detail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.4;
}

.author-detail p {
    margin-bottom: 0 !important;
}

.author-name {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: #111;
}

.author-position {
  font-size: 14px;
  margin: 4px 0 0;
  color: #888;
}




/* === BLOG DETAIL MOBILE RESPONSIVENESS === */

@media (max-width: 768px) {
  /* Article Header Mobile Improvements */
  .article-header {
    padding: 20px 0 10px;
  }

  .article-header .article-container {
    flex-direction: column;
    padding: 20px 16px;
    gap: 20px;
    margin: 0 12px;
    border-radius: 12px;
  }

  .article-header .left-side {
    width: 100%;
    max-width: 240px;
    margin: 0 auto;
    border-radius: 8px;
  }

  .article-header .left-side img {
    max-height: 160px;
    object-fit: cover;
    border-radius: 8px;
  }

  .article-header .main-side {
    padding-right: 0;
  }

  .article-header .header {
    font-size: 20px;
    line-height: 1.3;
    margin-bottom: 12px;
  }

  .article-header .tags-row {
    gap: 6px;
    margin-bottom: 10px;
  }

  .article-header .tag {
    font-size: 9px;
    padding: 3px 10px;
  }

  .article-header .article-detail {
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
    font-size: 11px;
  }

  .article-author {
    gap: 12px;
  }

  .author-photo {
    width: 48px;
    height: 48px;
  }

  .author-name {
    font-size: 14px;
  }

  .author-position {
    font-size: 12px;
  }

  /* Article Content Mobile Improvements */
  .article-container.article-nav {
    flex-direction: column;
    padding: 16px 12px;
    gap: 20px;
    max-width: 100%;
  }

  .article-container.article-nav .main-side {
    padding-left: 0;
    border-left: none;
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .article-container.article-nav .left-side {
    position: static;
    flex: none;
    width: 100%;
    order: 1;
    margin-bottom: 24px;
  }

  .article-nav-block {
    max-height: none;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 12px;
    position: static;
    top: auto;
  }

  .article-nav-title {
    font-size: 14px;
    margin-bottom: 10px;
  }

  .article-nav-item {
    font-size: 12px;
    padding: 6px 8px;
  }

  .article-nav-subitem-link {
    font-size: 11px;
    padding: 4px 8px;
  }

  .article-share-block {
    padding: 10px 12px;
  }

  .article-share {
    gap: 10px;
  }

  .article-share-btn {
    width: 32px;
    height: 32px;
  }

  /* Blog Content Mobile Improvements */
  .main-side h2 {
    font-size: 18px;
    margin: 20px 0 12px;
    text-align: left;
  }

  .main-side h3 {
    font-size: 16px;
    margin: 16px 0 10px;
    text-align: left;
  }

  .main-side p,
  .main-side li {
    margin-bottom: 12px;
    text-align: left;
  }

  .main-side img {
    border-radius: 6px;
    margin: 12px 0;
    max-width: 100%;
    height: auto;
  }

  .main-side blockquote {
    padding: 10px 12px;
    margin: 16px 0;
    font-size: 13px;
    text-align: left;
  }

  /* Remove large images on mobile */
  .main-side img[width*="800"],
  .main-side img[width*="900"],
  .main-side img[width*="1000"] {
    max-width: 100%;
    height: auto;
  }

  /* Improve table responsiveness */
  .main-side table {
    font-size: 12px;
    overflow-x: auto;
    display: block;
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
  }

  .main-side table td,
  .main-side table th {
    padding: 6px 4px;
    min-width: 60px;
    text-align: left;
    border: 1px solid #ddd;
  }

  .main-side table th {
    background-color: #f5f5f5;
    font-weight: 600;
  }
}

@media (max-width: 480px) {
  .article-header .article-container {
    padding: 16px 12px;
    margin: 0 8px;
  }

  .article-header .header {
    font-size: 18px;
  }

  .article-header .left-side {
    max-width: 200px;
  }

  .article-header .left-side img {
    max-height: 140px;
  }

  .article-container.article-nav {
    padding: 12px 8px;
  }

  .article-container.article-nav .main-side {
    font-size: 13px;
  }

  .main-side h2 {
    font-size: 16px;
  }

  .main-side h3 {
    font-size: 14px;
  }

  .article-nav-block {
    padding: 10px;
  }

  .article-nav-item {
    font-size: 11px;
    padding: 4px 6px;
  }

  .article-nav-subitem-link {
    font-size: 10px;
    padding: 3px 6px;
  }
}

@media (max-width: 360px) {
  .article-header .article-container {
    padding: 12px 8px;
    margin: 0 6px;
  }

  .article-header .header {
    font-size: 16px;
  }

  .article-container.article-nav {
    padding: 10px 6px;
  }

  .article-container.article-nav .main-side {
    font-size: 12px;
  }

  .main-side h2 {
    font-size: 14px;
  }

  .main-side h3 {
    font-size: 13px;
  }
}

/* === ADDITIONAL MOBILE IMPROVEMENTS === */

/* Touch-friendly improvements */
@media (max-width: 768px) {
  .article-nav-item,
  .article-nav-subitem-link,
  .article-share-btn {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Better spacing for mobile reading */
  .main-side {
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-align: left;
  }

  .main-side p {
    text-align: left;
  }

  /* Improve code blocks on mobile */
  .main-side pre,
  .main-side code {
    font-size: 13px;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  /* Better list styling on mobile */
  .main-side ul,
  .main-side ol {
    padding-left: 20px;
  }

  .main-side li {
    margin-bottom: 8px;
  }

  /* Improve link styling on mobile */
  .main-side a {
    word-break: break-word;
    hyphens: auto;
  }

  /* Better image handling */
  .main-side img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 16px 0;
  }

  /* Improve blockquote readability */
  .main-side blockquote {
    font-size: 15px;
    line-height: 1.6;
    margin: 20px 0;
    padding: 16px 20px;
  }

  /* Better table of contents on mobile */
  .article-nav-block {
    position: relative;
    z-index: 10;
  }

  .article-nav-item:hover,
  .article-nav-item.active {
    background: #f0f8ff;
    transform: translateX(4px);
  }

  /* Improve share buttons */
  .article-share-btn {
    border-radius: 8px;
    transition: transform 0.2s ease;
  }

  .article-share-btn:active {
    transform: scale(0.95);
  }
}

/* Landscape orientation improvements */
@media (max-width: 768px) and (orientation: landscape) {
  .article-header .article-container {
    flex-direction: row;
    gap: 20px;
  }

  .article-header .left-side {
    flex: 0 0 200px;
    max-width: 200px;
  }

  .article-header .left-side img {
    max-height: 120px;
  }

  .article-header .header {
    font-size: 20px;
  }
}
/*Blog header end*/


/*left table of content TOC start*/

 /* blog-details-page-end  */




/* Chat Bot Style Start */

input::placeholder {
    color: white;
    opacity: 1; /* Ensures the placeholder is fully visible */
}


.chatbot-toggler {
    position: fixed;
    bottom: 30px;
    right: 70px;
    outline: none;
    border: none;
    height: 65px;
    width: 65px;
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--tp-theme-primary);
    transition: all 0.2s ease;
    z-index: 999999999;
  }

  .chatbot-toggler span {
    color: #fff;
    position: absolute;
  }
  .chatbot-toggler span:last-child,
  body.show-chatbot .chatbot-toggler span:first-child  {
    opacity: 0;
  }
  body.show-chatbot .chatbot-toggler span:last-child {
    opacity: 1;
  }
  .chatbot {
    position: fixed;
    right: 35px;
    bottom: 90px;
    width: 420px;
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.5);
    transform-origin: bottom right;
    box-shadow: 0 0 128px 0 rgba(0,0,0,0.1),
                0 32px 64px -48px rgba(0,0,0,0.5);
    transition: all 0.1s ease;
    z-index: 100000;

  }
  body.show-chatbot .chatbot {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
  }
  .chatbot header {
    padding: 16px 0;
    position: relative;
    text-align: center;
    color: #fff;
    background: var(--tp-theme-primary);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  }
  .chatbot header span {
    position: absolute;
    right: 15px;
    top: 50%;
    display: none;
    cursor: pointer;
    transform: translateY(-50%);
  }
  header h2 {
    font-size: 1.4rem;
  }
  .chatbot .chatbox {
    overflow-y: auto;
    height: 510px;
    padding: 30px 20px 100px;
  }
  .chatbot :where(.chatbox, textarea)::-webkit-scrollbar {
    width: 6px;
  }
  .chatbot :where(.chatbox, textarea)::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 25px;
  }
  .chatbot :where(.chatbox, textarea)::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 25px;
  }
  .chatbox .chat {
    display: flex;
    list-style: none;
  }
  .chatbox .outgoing {
    margin: 20px 0;
    justify-content: flex-end;
  }
  .chatbox .incoming span {
    width: 32px;
    height: 32px;
    color: #fff;
    cursor: default;
    text-align: center;
    line-height: 32px;
    align-self: flex-end;
    background: var(--tp-theme-primary);
    border-radius: 4px;
    margin: 0 10px 7px 0;
  }
  .chatbox .chat p {
    white-space: pre-wrap;
    padding: 12px 16px;
    border-radius: 10px 10px 0 10px;
    max-width: 75%;
    color: #fff;
    font-size: 0.95rem;
    background: var(--tp-theme-primary);
  }
  .chatbox .incoming p {
    border-radius: 10px 10px 10px 0;
  }
  .chatbox .chat p.error {
    color: #721c24;
    background: #f8d7da;
  }
  .chatbox .incoming p {
    color: #000;
    background: #f2f2f2;
  }
  .chatbot .chat-input {
    display: flex;
    gap: 5px;
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #fff;
    padding: 3px 20px;
    border-top: 1px solid #ddd;
  }
  .chat-input textarea {
    height: 55px;
    width: 100%;
    border: none;
    outline: none;
    resize: none;
    max-height: 180px;
    padding: 15px 15px 15px 0;
    font-size: 0.95rem;
  }
  .chat-input span {
    align-self: flex-end;
    color: var(--tp-theme-primary);
    cursor: pointer;
    height: 55px;
    display: flex;
    align-items: center;
    visibility: hidden;
    font-size: 1.35rem;
  }
  .chat-input textarea:valid ~ span {
    visibility: visible;
  }
  
  @media (max-width: 490px) {
    .chatbot-toggler {
      right: 20px;
      bottom: 20px;
    }
    .chatbot {
      right: 0;
      bottom: 0;
      height: 100%;
      border-radius: 0;
      width: 100%;
    }
    .chatbot .chatbox {
      height: 90%;
      padding: 25px 15px 100px;
    }
    .chatbot .chat-input {
      padding: 5px 15px;
    }
    .chatbot header span {
      display: block;
    }
  }

/* Chat Bot Style End */



 /* typical-process-start  */
 

.whats-the-process-section {
    padding-block:80px;padding-bottom: 80px;
    padding-top: 80px;
    padding-inline:120px;
    padding-right: 120px;
    padding-left: 120px
}

.typical-process-header{
    font-weight: 700;
}

.whats-the-process-section.black-background {
    /* background: linear-gradient(297.02deg,#000 23.43%,#323232 88.6%); */
    background-color: orange;
    color: #fff
}

.whats-the-process-section.silver-background {
    background: #f9f9f9;
    color: #151915
}

.whats-the-process-section .white-background {
    background: #fff;
    color: #151915
}

.whats-the-process-section .black {
    border-radius: 4px;
    /* background: var(--gradient-black,linear-gradient(304deg,#000 11.74%,#323232 84.36%)); */
    background-color: var(--tp-theme-primary);
color: #ffffff;
}

.whats-the-process-section .ligth-green {
    border-radius: 4px;
    border: 1px solid var(--gradient-green,#97cf00);
    background: #daeed1;
    color: var(--Black-191919,#191919)!important
}

.whats-the-process-section .bright-green {
    background: var(--gradient-green,linear-gradient(130deg,#97cf00 -14.98%,#24b400 109.44%));
    color: white;
}

.whats-the-process-section .section-header {
    padding-bottom: 40px
}

.whats-the-process-section .whats-the-process-columns {
    display: flex;
    box-shadow: 0 8px 40px 0 rgba(0,0,0,.08);
    border-radius: var(--border-radius-lg);
}

.whats-the-process-section .column-title {
    color: #151915;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    padding-top: 10px;
    padding-left: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e9e9e9
}

.whats-the-process-section .column-layout {
    width: 204px;
    height: 510px
}

.whats-the-process-section .column-layout:not(:first-of-type) {
    border-left: 1px solid #e9e9e9
}

.whats-the-process-section .row-layout {
    display: flex;
    width: 188px;
    padding: 12px 16px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    margin-top: 16px;
    margin-left: 8px;
    position: relative
}

.whats-the-process-section .column-layout:last-of-type .row-layout {
    margin-top: 10px!important;
    height: 450px!important;
    width: 196px;
    border-radius: 4px 0 0 4px
}

.whats-the-process-section .row-title {
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%
}

.whats-the-process-section h3.row-title {
    margin-bottom: 0
}

.whats-the-process-section .row-text {
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    padding-bottom: 4px
}

.whats-the-process-section .whats-the-process-button,.whats-the-process-section .whats-the-process-button:hover {
    color: #fff
}

.column-layout img.vertical-vector-img,.column-layout:last-of-type .vector-img {
    display: none
}

.whats-the-process-section .column-layout:not(:last-of-type) .vector-img {
    position: absolute;
    height: 20px;
    left: 96px;
    right: -15px;
    margin: 0 auto;
    bottom: -26px;
    /* background-image: url(https://leobit.com/content/themes/leobit-wp-theme/images/development_team/vector.svg); */
    background-repeat: no-repeat
}

.whats-the-process-list {
    padding-left: 0
}

.whats-the-process-list-item {
    display: flex;
    width: 156px;
    padding: 5px 8px;
    align-items: center;
    border-radius: 4px;
    background: hsla(0,0%,100%,.16);
    }
    
.whats-the-process-list-item:not(:last-child) {
    margin-bottom: 5px
}

.whats-the-process-section .list-item-text {
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    color: #ffffff;
    }

.whats-the-process-section .comment-layout {
    position: absolute;
    top: calc(-50% + 19px);
    left: calc(100% + 16px)
}

.whats-the-process-section .comment {
    margin-left: 12px;
    width: 216px;
    padding: 8px 16px;
    border-radius: 4px 4px 4px 0;
    background: rgba(25,25,25,.1);
    position: relative
}

.whats-the-process-section .comment:after {
    position: absolute;
    display: block;
    content: "";
    left: -11.5px;
    bottom: 0;
    width: 12px;
    height: 12px;
    z-index: 100;
    background: rgba(25,25,25,.1);
    -webkit-clip-path: polygon(0 100%,100% 100%,100% 0);
    clip-path: polygon(0 100%,100% 100%,100% 0)
}

.whats-the-process-section .comment-text {
    color: green;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%
}

@media screen and (min-width: 991px) and (max-width:1400px) {
    .whats-the-process-section {
        padding-right:74px;
        padding-left: 74px
    }
}

@media screen and (max-width: 1199px) {
    .whats-the-process-section .whats-the-process-columns {
        display:block;
        width: -moz-max-content;
        width: max-content;
        margin: auto
    }

    .whats-the-process-section .column-title {
        font-size: 12px;
        font-style: normal;
        font-weight: 700;
        line-height: 120%;
        border: unset;
        padding-top: 38px!important;
        padding-bottom: 0
    }

    .whats-the-process-section .column-layout:first-of-type .column-title {
        padding-top: 0!important
    }

    .whats-the-process-section .column-layout {
        width: -moz-max-content;
        width: max-content;
        height: -moz-max-content;
        height: max-content;
        border: unset;
        margin-left: auto;
        margin-right: auto;
        padding-left: 24px;
        padding-right: 24px
    }

    .whats-the-process-section .row-layout {
        width: 500px;
        margin-top: 0!important;
        border-radius: 8px!important;
        height: auto!important
    }

    .whats-the-process-section .column-layout:not(:first-of-type) {
        border: unset
    }

    .whats-the-process-section .column-layout:last-of-type .row-layout {
        height: auto!important;
        margin-top: 0!important;
        width: 500px
    }

    .whats-the-process-section .vector-img {
        display: none
    }

    .column-layout .vector-img,.column-layout:last-of-type img.vertical-vector-img {
        display: none
    }

    .whats-the-process-section .column-layout:not(:last-of-type) img.vertical-vector-img {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        bottom: -50px
    }

    .whats-the-process-section .column-layout:first-of-type {
        padding-top: 24px
    }

    .whats-the-process-section .column-layout:last-of-type {
        padding-bottom: 24px
    }

    .whats-the-process-list-item {
        width: 468px!important
    }

    .whats-the-process-section .list-item-text {
        font-size: 14px
    }

    .whats-the-process-section .comment-layout {
        position: relative;
        top: 0;
        left: 0
    }

    .whats-the-process-section .comment {
        margin-left: 0;
        width: 100%;
        padding: 16px;
        border-radius: 8px;
        background: #f4faf1;
        position: relative
    }

    .whats-the-process-section .comment:after {
        display: none
    }
}

@media screen and (max-width: 576px) {
    .whats-the-process-section .section-header {
        line-height:80%;
        font-size: 32px;
        padding-bottom: 63px;
        margin-bottom: 0
    }

    .whats-the-process-section .row-layout {
        width: 295px!important
    }

    .whats-the-process-section .column-layout:last-of-type .row-layout {
        width: 295px!important
    }

    .whats-the-process-list-item {
        width: 247px!important
    }
}

 /* typical-process-end */



 /* we-work-with-start */
 .cloud-software-achievements {
    background: #f9f9f9;
    padding: 80px 16px
}

.cloud-software-achievements__text-wrapper {
    flex: 50%;
    padding-right: 82px
}

.cloud-software-achievements__text-wrapper .text-wrapper__headers {
    display: flex;
    flex-direction: column-reverse
}

.cloud-software-achievements__text-wrapper .text-wrapper__headers .section-name {
    color: red;
    font-size: 20px;
    line-height: 24px
}

.cloud-software-achievements__text-wrapper .text-wrapper__headers .section-header {
    margin-bottom: 40px
}

.cloud-software-achievements__text-wrapper .section-text {
    color: green;
    font-weight: 400;
    font-size: 18px;
    line-height: 150%
}

.cloud-software-achievements__plates-wrapper {
    flex: 50%
}

.cloud-software-achievements__plates-wrapper .cloud-description {
    font-size: 18px;
    line-height: 1.2
}



.cloud-software-achievements__plates-wrapper .plates-wrapper__blocks .plate img.plate-image {
    width: 70px;
    height: 70px
}

.cloud-software-achievements__plates-wrapper .plates {
    display: grid;
    gap: 24px
}

.cloud-software-achievements__plates-wrapper .plates .plate {
    padding: 16px;
    box-shadow: 0 8px 40px 0 rgba(0,0,0,.0784313725490196);
    color: yellow;
}

.cloud-software-achievements__plates-wrapper .plates.grid_plates .plate:first-child,.cloud-software-achievements__plates-wrapper .plates.grid_plates .plate:last-child,.cloud-software-achievements__plates-wrapper .plates.half_plates .plate:first-child,.cloud-software-achievements__plates-wrapper .plates.half_plates .plate:last-child {
    color: pink;
    background: linear-gradient(304deg,#000 11.74%,#323232 84.36%)
}

@media screen and (min-width: 360px) {
    .cloud-software-achievements__plates-wrapper .plates.grid_plates {
        grid-template-columns:repeat(2,1fr);
        grid-template-rows: repeat(2,1fr)
    }
}

@media (min-width: 480px) and (max-width:1080px) {
    .cloud-software-achievements__plates-wrapper .plates.grid_plates {
        grid-template-columns:repeat(3,1fr);
        grid-template-rows: repeat(3,1fr)
    }

    .cloud-software-achievements__plates-wrapper .plates.grid_plates .plate:not(:first-child) {
        grid-column-start: 2;
        grid-column-end: 4;
        min-height: 150px
    }

    .cloud-software-achievements__plates-wrapper .plates.grid_plates .plate:first-child {
        grid-row-start: 1;
        grid-row-end: 4
    }
}

@media screen and (min-width: 1081px) {
    .cloud-software-achievements__plates-wrapper .plates.grid_plates {
        grid-template-columns:repeat(3,1fr);
        grid-template-rows: repeat(2,1fr)
    }

    .cloud-software-achievements__plates-wrapper .plates.grid_plates .plate:first-child {
        grid-row-start: 1;
        grid-row-end: 3;
        min-height: 392px
    }

    .cloud-software-achievements__plates-wrapper .plates.grid_plates .plate:nth-child(2) {
        grid-column-start: 2;
        grid-column-end: 4
    }
}

@media screen and (min-width: 360px) {
    .cloud-software-achievements__plates-wrapper .plates.half_plates {
        grid-template-columns:repeat(2,1fr);
        grid-template-rows: repeat(2,1fr);
        gap: 16px
    }
}

@media screen and (min-width: 768px) {
    .cloud-software-achievements__plates-wrapper .plates.half_plates {
        grid-template-columns:56% 42%
    }
}

@media screen and (min-width: 1300px) {
    .cloud-software-achievements__plates-wrapper .plates.half_plates {
        grid-template-columns:392px 288px;
        gap: 24px
    }
}

@media screen and (min-width: 768px) {
    .cloud-software-achievements__plates-wrapper .plates.three_plates {
        grid-template-columns:repeat(2,1fr);
        grid-template-rows: repeat(2,1fr)
    }

    .cloud-software-achievements__plates-wrapper .plates.three_plates .plate:first-child {
        grid-column-start: 1;
        grid-column-end: 3
    }
}

.cloud-software-achievements__plates-wrapper .plates.three_plates .plate:last-child,.cloud-software-achievements__plates-wrapper .plates.two_plates .plate:last-child {
    background: linear-gradient(304deg,#000 11.74%,#323232 84.36%)
}

@media screen and (min-width: 1081px) {
    .cloud-software-achievements__plates-wrapper .plates.one_plate {
        height:100%
    }
}

@media screen and (max-width: 1080px) {
    .cloud-software-achievements__text-wrapper {
        padding-bottom:48px
    }
}

@media screen and (min-width: 1081px) {
    .cloud-software-achievements {
        padding-top:120px;
        padding-bottom: 120px;
        display: flex;
        justify-content: space-between;
        width: 1224px;
        max-width: 100%;
        margin: 0 auto
    }
}

@media screen and (min-width: 991px) and (max-width:1400px) {
    .cloud-software-achievements {
        padding-right:74px;
        padding-left: 74px
    }
}

@media screen and (max-width: 1023px) {
    .cloud-software-achievements__text-wrapper {
        padding-right:50px
    }
}

@media screen and (max-width: 992px) {
    .cloud-software-achievements__text-wrapper {
        padding-right:30px
    }

    .cloud-software-achievements__plates-wrapper {
        gap: 10px
    }

    .cloud-software-achievements__plates-wrapper .plates-wrapper__block-height .plate:first-child {
        height: 500px
    }
}

@media screen and (max-width: 745px) {
    .cloud-software-achievements {
        flex-direction:column;
        padding-top: 80px;
        padding-bottom: 80px;
        padding-block:80px}

    .cloud-software-achievements .cloud-software-achievements__text-wrapper {
        padding-right: unset;
        padding-bottom: 48px
    }

    .cloud-software-achievements .cloud-software-achievements__text-wrapper .section-text {
        font-size: 16px
    }

    .cloud-software-achievements .cloud-software-achievements__text-wrapper .text-wrapper__headers .section-name {
        font-size: 16px;
        line-height: 120%
    }

    .cloud-software-achievements .cloud-software-achievements__text-wrapper .text-wrapper__headers .section-header {
        margin-bottom: 24px
    }
}


.cloud-native-approach {
    padding-block:120px;padding-bottom: 120px;
    padding-top: 120px;
    padding-inline:80px;
    padding-right: 80px;
    padding-left: 80px;
    display: flex;
    gap: 28px;
    justify-content: space-between;
    height: 770px
}

.cloud-native-approach.black-background {
    background: linear-gradient(297.02deg,#000 23.43%,#323232 88.6%);
    color: #fff
}

.cloud-native-approach.silver-background {
    background: #f9f9f9;
    color: #151915
}

.cloud-native-approach.silver-background .cloud-native-approach__components-side .components-side__plates-wrapper:first-child .plate:after {
    -webkit-filter: brightness(0);
    filter: brightness(0)
}

.cloud-native-approach.silver-background .cloud-native-approach__components-side .components-side__plates-wrapper:last-child .plate:before {
    -webkit-filter: brightness(0);
    filter: brightness(0)
}

.cloud-native-approach.silver-background .cloud-native-approach__components-side .components-side__plates-wrapper.small-plates .plates-wrapper__plates:last-child .plate:before {
    -webkit-filter: brightness(0);
    filter: brightness(0)
}

.cloud-native-approach.silver-background .cloud-native-approach__components-side .components-side__plates-wrapper.small-plates .plates-wrapper__plates:first-child .plate:after {
    -webkit-filter: brightness(0);
    filter: brightness(0)
}

.cloud-native-approach__text-side {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 496px;
    min-width: 343px;
    color: inherit
}

.cloud-native-approach__text-side .text-side__text {
    font-size: 18px;
    font-weight: 400;
    line-height: 27px
}

.cloud-native-approach__text-side h2 .section-header {
    width: 100%
}

.cloud-native-approach__components-side {
    width: 700px;
    height: 418px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-self: self-end
}

.cloud-native-approach__components-side.native-mobile-view {
    display: none
}

.cloud-native-approach__components-side .components-side__plates-wrapper {
    display: flex;
    flex-direction: row
}

.cloud-native-approach__components-side .components-side__plates-wrapper:first-child .plate:after {
    content: url(../../../images/cloud-native/Arrow.svg);
    position: absolute;
    transform: rotate(90deg);
    bottom: -27px
}

.cloud-native-approach__components-side .components-side__plates-wrapper:last-child .plate:before {
    content: url(../../../images/cloud-native/Arrow.svg);
    position: absolute;
    transform: rotate(-90deg);
    top: -27px
}

.cloud-native-approach__components-side .components-side__plates-wrapper .plate {
    position: relative;
    width: 160px;
    border-radius: 12px;
    border: 3px solid #24b400;
    padding: 12px 6px 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    opacity: 0
}

.cloud-native-approach__components-side .components-side__plates-wrapper .plate h4 {
    text-align: center;
    font-size: 13px;
    font-weight: 400;
    line-height: 110%;
    letter-spacing: .13px;
    margin-bottom: unset
}

.cloud-native-approach__components-side .components-side__plates-wrapper.large-plates {
    justify-content: center;
    gap: 32px
}

.cloud-native-approach__components-side .components-side__plates-wrapper.large-plates .plate {
    height: 98px
}

.cloud-native-approach__components-side .components-side__plates-wrapper.small-plates {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 40px
}

.cloud-native-approach__components-side .components-side__plates-wrapper.small-plates .plate {
    height: 84px
}

.cloud-native-approach__components-side .components-side__plates-wrapper.small-plates .plates-wrapper__plates {
    display: flex;
    flex-direction: column;
    gap: 36px
}

.cloud-native-approach__components-side .components-side__plates-wrapper.small-plates .plates-wrapper__plates:first-child .plate:after {
    content: url(../../../images/cloud-native/Arrow.svg);
    position: absolute;
    right: -40px;
    top: 40%
}

.cloud-native-approach__components-side .components-side__plates-wrapper.small-plates .plates-wrapper__plates:last-child .plate:before {
    content: url(../../../images/cloud-native/Arrow.svg);
    position: absolute;
    transform: rotate(180deg);
    left: -40px;
    top: 40%
}

.cloud-native-approach__components-side .components-side__plates-wrapper.small-plates .plates-wrapper__plates.center-plate {
    position: relative;
    width: 280px;
    height: 132px;
    margin-bottom: 19px
}

.cloud-native-approach__components-side .components-side__plates-wrapper.small-plates .plates-wrapper__plates.center-plate img {
    width: 100%;
    height: 100%
}

.cloud-native-approach__components-side .components-side__plates-wrapper.small-plates .plates-wrapper__plates.center-plate h3 {
    position: absolute;
    padding-left: 30px;
    margin-bottom: unset;
    bottom: 24px;
    width: 100%;
    height: 58px;
    text-align: center;
    font-size: 17px;
    line-height: 120%;
    letter-spacing: -.17px;
    text-transform: uppercase
}

@media screen and (min-width: 991px) and (max-width:1400px) {
    .cloud-native-approach {
        padding-right:74px;
        padding-left: 74px
    }
}

@media screen and (max-width: 1100px) {
    .cloud-native-approach {
        display:flex;
        flex-direction: column;
        gap: 48px;
        height: unset
    }

    .cloud-native-approach__text-side {
        width: 60%
    }

    .cloud-native-approach__components-side {
        width: 700px;
        height: 418px;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        align-self: center
    }
}

@media screen and (max-width: 992px) {
    .cloud-native-approach {
        padding-block:56px;
        padding-bottom: 56px;
        padding-top: 56px
    }

    .cloud-native-approach__text-side {
        gap: unset
    }
}

@media screen and (max-width: 720px) {
    .cloud-native-approach__components-side {
        width:unset;
        height: unset;
        gap: 20px
    }

    .cloud-native-approach__components-side .components-side__plates-wrapper .plate {
        width: 120px;
        padding: 8px
    }

    .cloud-native-approach__components-side .components-side__plates-wrapper .plate img {
        width: 30px;
        height: 30px
    }

    .cloud-native-approach__components-side .components-side__plates-wrapper.large-plates {
        justify-content: center;
        gap: 32px
    }

    .cloud-native-approach__components-side .components-side__plates-wrapper.large-plates .plate {
        height: auto
    }

    .cloud-native-approach__components-side .components-side__plates-wrapper.small-plates .plate {
        height: 74px
    }

    .cloud-native-approach__components-side .components-side__plates-wrapper.small-plates .plates-wrapper__plates.center-plate {
        position: relative;
        width: 100%;
        height: 90%
    }
}

@media screen and (max-width: 633px) {
    .cloud-native-approach__components-side {
        width:unset;
        height: unset;
        gap: 15px
    }

    .cloud-native-approach__components-side .components-side__plates-wrapper.small-plates .plate {
        height: 74px;
        min-width: 80px
    }

    .cloud-native-approach__components-side .components-side__plates-wrapper.small-plates .plates-wrapper__plates {
        gap: 15px
    }

    .cloud-native-approach__components-side .components-side__plates-wrapper.small-plates .plates-wrapper__plates.center-plate {
        position: relative;
        width: 100%;
        height: 80%
    }

    .cloud-native-approach__components-side .components-side__plates-wrapper.small-plates .plates-wrapper__plates.center-plate h3 {
        font-size: 16px;
        height: unset;
        line-height: 100%;
        bottom: 20px;
        padding-left: 20px
    }
}

@media screen and (max-width: 578px) {
    .cloud-native-approach__components-side.native-desktop-view {
        display:none
    }

    .cloud-native-approach__components-side.native-mobile-view {
        display: block;
        width: 100%;
        height: 100%
    }

    .cloud-native-approach__components-side.native-mobile-view img {
        width: 100%
    }

    .cloud-native-approach__components-side .components-side__plates-wrapper .plate {
        justify-content: space-evenly
    }

    .cloud-native-approach__text-side .text-side__text {
        font-size: 16px;
        line-height: 24px
    }
}

@media screen and (max-width: 552px) {
    .cloud-native-approach__components-side {
        gap:10px
    }

    .cloud-native-approach__components-side.native-desktop-view {
        display: none
    }

    .cloud-native-approach__components-side.native-mobile-view {
        display: block
    }

    .cloud-native-approach__components-side .components-side__plates-wrapper .plate {
        width: 100px;
        padding: 4px
    }

    .cloud-native-approach__components-side .components-side__plates-wrapper .plate img {
        width: 25px;
        height: 25px
    }

    .cloud-native-approach__components-side .components-side__plates-wrapper.large-plates {
        justify-content: center;
        gap: 16px
    }

    .cloud-native-approach__components-side .components-side__plates-wrapper.large-plates .plate {
        height: auto
    }

    .cloud-native-approach__components-side .components-side__plates-wrapper.small-plates {
        gap: 30px
    }

    .cloud-native-approach__components-side .components-side__plates-wrapper.small-plates .plates-wrapper__plates.center-plate {
        position: relative;
        width: 90%;
        height: 70%
    }

    .cloud-native-approach__components-side .components-side__plates-wrapper.small-plates .plates-wrapper__plates.center-plate h3 {
        font-size: 14px;
        bottom: 15px;
        padding-left: 15px
    }
}

@media screen and (max-width: 480px) {
    .cloud-native-approach__components-side .components-side__plates-wrapper.large-plates .plate h4 {
        margin-bottom:unset
    }

    .cloud-native-approach__components-side .components-side__plates-wrapper.small-plates {
        gap: 18px
    }

    .cloud-native-approach__components-side .components-side__plates-wrapper.small-plates .plates-wrapper__plates.center-plate h3 {
        bottom: 10px
    }
}

@media screen and (max-width: 420px) {
    .cloud-native-approach__components-side {
        gap:10px
    }

    .cloud-native-approach__components-side .components-side__plates-wrapper .plate {
        width: 80px;
        padding: 4px
    }

    .cloud-native-approach__components-side .components-side__plates-wrapper .plate img {
        width: 25px;
        height: 25px
    }

    .cloud-native-approach__components-side .components-side__plates-wrapper.large-plates {
        justify-content: center;
        gap: 18px
    }

    .cloud-native-approach__components-side .components-side__plates-wrapper.large-plates .plate h4 {
        margin-bottom: unset;
        font-size: 10px
    }

    .cloud-native-approach__components-side .components-side__plates-wrapper.small-plates {
        gap: 16px
    }

    .cloud-native-approach__components-side .components-side__plates-wrapper.small-plates .plates-wrapper__plates.center-plate {
        position: relative;
        width: 90%;
        height: 70%
    }

    .cloud-native-approach__components-side .components-side__plates-wrapper.small-plates .plates-wrapper__plates.center-plate h3 {
        font-size: 10px;
        bottom: 10px;
        padding-left: 15px
    }
}

.animate .plate {
    animation: appear .4s ease-in-out forwards
}

.animate .components-side__plates-wrapper:first-child .plate:first-child {
    animation-delay: 0s
}

.animate .components-side__plates-wrapper:first-child .plate:nth-child(2) {
    animation-delay: .4s
}

.animate .components-side__plates-wrapper:nth-child(2) .plates-wrapper__plates:nth-child(3) .plate:first-child {
    animation-delay: .8s
}

.animate .components-side__plates-wrapper:nth-child(2) .plates-wrapper__plates:nth-child(3) .plate:nth-child(2) {
    animation-delay: 1.2s
}

.animate .components-side__plates-wrapper:nth-child(3) .plate:nth-child(2) {
    animation-delay: 1.6s
}

.animate .components-side__plates-wrapper:nth-child(3) .plate:first-child {
    animation-delay: 2s
}

.animate .components-side__plates-wrapper:nth-child(2) .plates-wrapper__plates:first-child .plate:nth-child(2) {
    animation-delay: 2.4s
}

.animate .components-side__plates-wrapper:nth-child(2) .plates-wrapper__plates:first-child .plate:first-child {
    animation-delay: 2.8s
}

@keyframes appear {
    0% {
        opacity: 0;
        transform: scale(0)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}



.cloud_skillset {
    padding-inline:120px;
    padding-right: 120px;
    padding-left: 120px;
    padding-block:120px;padding-bottom: 120px;
    padding-top: 120px;
    background: #ffffff;
}

.cloud_skillset .cloud_skillset-wrapper h2.section-header {
    margin-bottom: 98px
}

.cloud_skillset .cloud_skillset-wrapper h2.section-header.mobile-view-skillset {
    display: none
}

.cloud_skillset .cloud_skillset-wrapper__main-block {
    display: flex;
    background: #ffffff;
    box-shadow: 0 8px 40px 0 rgba(0,0,0,.0784313725490196);
    border-radius: var(--border-radius-lg);
}

.cloud_skillset .cloud_skillset-wrapper__main-block .main-block__item {
    flex: 1;
    border-right: 1px solid rgba(21,25,21,.08);
    margin-left: unset!important;
    margin-right: unset!important
}

.cloud_skillset .cloud_skillset-wrapper__main-block .main-block__item:first-child .item__wrapper .item__list {
    padding-left: 0
}

.cloud_skillset .cloud_skillset-wrapper__main-block .main-block__item:last-child {
    border-right: unset
}

.cloud_skillset .cloud_skillset-wrapper__main-block .main-block__item:last-child .item__wrapper .item__list {
    padding-right: 0
}

.cloud_skillset .cloud_skillset-wrapper__main-block .main-block__item .item__wrapper .item__head {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px
}

.cloud_skillset .cloud_skillset-wrapper__main-block .main-block__item .item__wrapper .item__head .head__header {
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: center
}

.cloud_skillset .cloud_skillset-wrapper__main-block .main-block__item .item__wrapper .item__head .head__header h3.header__title {
    color: #191919;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 80%;
    text-transform: uppercase
}

.cloud_skillset .cloud_skillset-wrapper__main-block .main-block__item .item__wrapper .item__head .head__text {
    color: #151915;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%
}

.cloud_skillset .cloud_skillset-wrapper__main-block .main-block__item .item__wrapper .item__head .head__text p{
    font-size: 14px;
    line-height: 24px;

}

.cloud_skillset .cloud_skillset-wrapper__main-block .main-block__item .item__wrapper .item__title-list {
    color: #7b7b7b;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    margin-bottom: 16px;
    padding-left: 24px
}

.cloud_skillset .cloud_skillset-wrapper__main-block .main-block__item .item__wrapper .item__list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 12px
}

.cloud_skillset .cloud_skillset-wrapper__main-block .main-block__item .item__wrapper .item__list .list_block-element {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 24px;
    min-height: 76px
}

.cloud_skillset .cloud_skillset-wrapper__main-block .main-block__item .item__wrapper .item__list .list_block-element:nth-child(odd) {
    background: #f9f9f9
}

.cloud_skillset .cloud_skillset-wrapper__main-block .main-block__item .item__wrapper .item__list .list_block-element:last-child {
    margin-bottom: 21px
}

.cloud_skillset .cloud_skillset-wrapper__main-block .main-block__item .item__wrapper .item__list .list_block-element h4 {
    color: #151915;
    font-feature-settings: "clig" off,"liga" off;
    margin-bottom: unset;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 110%
}

.cloud_skillset .cloud_skillset-wrapper__main-block .main-block__item .item__wrapper .item__list .list_block-element p {
    color: #151915;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2
}

.cloud_skillset .cloud_skillset-wrapper__main-block .main-block__item .main-block__vertical-line {
    min-width: 1px;
    opacity: .08;
    background: green;
    margin-left: 12px;
    margin-right: 12px
}

.cloud_skillset .other-cloud-technologies {
    margin-top: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px
}

.cloud_skillset .other-cloud-technologies__title h2 {
    color: red;
    text-align: center;
    font-size: 32px;
    line-height: 32px;
    text-transform: uppercase;
    margin-bottom: unset
}

.cloud_skillset .other-cloud-technologies__logo-list {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    max-width: 876px;
    gap: 24px
}

.cloud_skillset .wysiwygBox.head__text a,.cloud_skillset .wysiwygBox.item__list_text a {
    color: #24b400
}

.cloud_skillset .wysiwygBox.head__text>*,.cloud_skillset .wysiwygBox.item__list_text>* {
    margin-bottom: 16px
}

@media screen and (min-width: 681px) and (max-width:992px) {
    .cloud_skillset .main-block__item {
        min-width:400px
    }
}

@media screen and (min-width: 991px) and (max-width:1400px) {
    .cloud_skillset {
        padding-right:74px;
        padding-left: 74px
    }
}

@media screen and (max-width: 1167px) {
    .cloud_skillset .cloud_skillset-wrapper .swiper-pagination {
        display:flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        margin-top: 32px;
        height: 13px
    }

    .cloud_skillset .cloud_skillset-wrapper .swiper-pagination .swiper-pagination-bullet {
        height: 5px;
        width: 5px;
        background: #d9d9d9;
        transition: .5s
    }

    .cloud_skillset .cloud_skillset-wrapper .swiper-pagination .swiper-pagination-bullet-active {
        height: 8px;
        width: 8px;
        background: linear-gradient(130.27deg,#97cf00 -14.98%,#24b400 109.44%);
        transform: rotate(45deg)
    }
}

@media screen and (max-width: 992px) {
    .cloud_skillset {
        padding-block:80px;
        padding-bottom: 80px;
        padding-top: 80px
    }

    .cloud_skillset .cloud_skillset-wrapper h2.section-header {
        margin-bottom: 62px
    }

    .cloud_skillset .other-cloud-technologies {
        margin-top: 80px
    }

    .cloud_skillset .other-cloud-technologies__title h2 {
        font-size: 20px;
        line-height: 20px
    }
}

@media screen and (max-width: 680px) {
    .cloud_skillset .cloud_skillset-wrapper__main-block .main-block__item {
        min-width:343px;
        margin-right: unset
    }

    .cloud_skillset .cloud_skillset-wrapper__main-block .main-block__item .item__wrapper p.head__text {
        height: 120px
    }
}

@media screen and (max-width: 440px) {
    .cloud_skillset .other-cloud-technologies__logo-list img.header__icon-icon {
        width:37%;
        height: 37%
    }
}

@media screen and (max-width: 390px) {
    .cloud_skillset {
        padding-block:80px;
        padding-bottom: 80px;
        padding-top: 80px
    }

    .cloud_skillset .cloud_skillset-wrapper h2.section-header.desktop-view-skillset {
        display: none
    }

    .cloud_skillset .cloud_skillset-wrapper h2.section-header.mobile-view-skillset {
        display: block
    }

    .cloud_skillset .cloud_skillset-wrapper__main-block {
        gap: 16px
    }

    .cloud_skillset .cloud_skillset-wrapper__main-block .main-block__item {
        min-width: 330px;
        box-shadow: 0 8px 40px 0 rgba(0,0,0,.08);
        padding-right: unset;
        padding-left: unset;
        border-right: unset
    }
}


 /* we-work-with-end */


/* collabration-models-start */
.collaboration-models-section {
    padding-block:80px;padding-bottom: 80px;
    padding-top: 80px;
    padding-inline:120px;
    padding-right: 120px;
    padding-left: 120px
}

.collaboration-models-section .section-header {
    padding-bottom: 56px
}

.collaboration-models-section .collaboration-models-section--text {
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 100%;
    padding-top: 120px;
}

.collaboration-models-section .not-sure {
    margin: 0 225px;
    grid-column: span 4
}

.collaboration-models-section .not-sure .collaboration-models-section--text {
    padding: 120px 24px 40px
}

.collaboration-models-section .not-sure .primary-button {
    margin-inline:auto}

.collaboration-models-section .collaboration-block-head {
    height: 248px
}

.collaboration-models-section .collaboration-block-head .collaboration-models-section--text {
    padding: 24px 24px 16px;
    margin-bottom: 0
}

.collaboration-models-section .main-blocks {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(288px,1fr));
    grid-gap: 12px
}

.collaboration-models-section .collaboration-block {
    width: 288px;
    margin-inline:auto;margin-right: auto;
    margin-left: auto;
    background: #fff;
    color: #151915;
    border-radius: var(--border-radius);
}

.collaboration-models-section .collaboration-block .collaboration-models-button,.collaboration-models-section .collaboration-block .collaboration-models-button:hover {
    color: #151915
}

.collaboration-models-section .collaboration-block:first-of-type {
    margin-left: 0
}

.collaboration-models-section .collaboration-block:last-of-type {
    margin-right: 0
}

.collaboration-models-section .collaboration-block-most_popular {
    outline: 8px solid #38ba01;
    position: relative
}

.collaboration-models-section .collaboration-block-most_popular_text {
    color: var(--white,#fff);
    text-align: center;
    font-size: 12px;
    line-height: 28px;
    text-transform: uppercase;
    position: absolute;
    background: #38ba01;
    width: 126px;
    height: 28px;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: -18px
}

.collaboration-models-section .block-item-text {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    padding: 0 24px 20px
}

.collaboration-models-section .blocks-percent {
    display: flex;
    align-items: center;
    padding: 20px 24px;
    gap: 12px;
    position: relative
}

.collaboration-models-section .block-percent-text {
    color: var(--text-black,#151915);
    font-size: 17px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    text-transform: uppercase
}

.collaboration-models-section .block-percent-number {
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    text-transform: uppercase;
    background: var(--gradient-green,linear-gradient(131deg,#97cf00,#24b400));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.collaboration-models-section .moreinfo_icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    fill: var(--gradient-green,linear-gradient(131deg,#97cf00,#24b400));
    opacity: .3;
    margin-left: auto
}

.collaboration-models-section .moreinfo_icon_black {
    margin-left: auto;
    padding-right: 9px
}

.collaboration-models-section .collaboration-show-more_message {
    visibility: hidden;
    padding: 12px 20px 12px 12px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: #fff;
    box-shadow: 0 8px 40px rgba(0,0,0,.08);
    color: #151915;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    position: absolute;
    right: -32px;
    z-index: 1
}

.collaboration-models-section .collaboration-show-more:hover~.collaboration-show-more_message {
    visibility: visible
}

.collaboration-models-section .tilda-blocks {
    display: flex;
    position: relative
}

.collaboration-models-section .tilda-blocks .collaboration-show-more_message {
    bottom: 20px
}

.collaboration-models-section .tilda-block-header {
    color: var(--text-black,#151915);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    text-transform: uppercase;
    padding: 20px 0 10px;
    margin-right: -9px
}

.collaboration-models-section .your-team-list {
    width: 50%;
    padding-left: 20px
}

.collaboration-models-section .your-team-list .collaboration-models-list-item {
    background-color: #eaeaea
}

.collaboration-models-section .leobit-team-list {
    width: 50%;
    /* background-image: url(https://leobit.com/content/themes/leobit-wp-theme/images/development_team/collaboration_models/Green-part.webp); */
    background-size: cover;
    padding-right: 13px
}

.collaboration-models-section .leobit-team-list .collaboration-models-list-item {
    background-color: hsla(0,0%,100%,.8)
}

.collaboration-models-section .collaboration-models-list {
    padding-left: 0
}

.collaboration-models-section .collaboration-models-list-block {
    margin: 20px 24px 24px;
    display: grid;
    gap: 11px
}

.collaboration-models-section .collaboration-models-list-title {
    color: var(--grey,#afafaf);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%
}

.collaboration-models-section .collaboration-models-list-background {
    padding-left: 20px;
    background-clip: content-box;
    background-color: #daeed1;
    height: 195px
}

.collaboration-models-section .collaboration-models-list-item {
    display: flex;
    height: 24px;
    width: 109px;
    align-items: center;
    gap: 0;
    position: relative
}

.collaboration-models-section .collaboration-models-list-item .black-mark {
    /* background-image: url(https://leobit.com/content/themes/leobit-wp-theme/images/development_team/collaboration_models/person_point.svg); */
    background-repeat: no-repeat;
    display: inline-block;
    height: 14px;
    margin-left: 6px
}

.collaboration-models-section .collaboration-models-list-item:not(:last-of-type) {
    margin-bottom: 4px
}

.collaboration-models-section .list-mark-cover {
    flex: 0 0 16px;
    /*padding-top: 1.43px;*/
    text-align: center
}

.collaboration-models-section .list-mark-cover.green-mark {
    height: 14px;
    /* background-image: url(https://leobit.com/content/themes/leobit-wp-theme/images/development_team/collaboration_models/person_point_green.svg); */
    background-repeat: no-repeat;
    display: inline-block;
    margin-left: 6px
}

.collaboration-models-section .list-mark-cover--small {
    flex: 0 0 24px;
    /*padding-top: 5px;*/
    text-align: center
}

.collaboration-models-section .list-mark {
    display: inline-block;
    margin: 0 auto;
    width: 10px;
    height: 10px;
    background: linear-gradient(130.27deg,#97cf00 -14.98%,#24b400 109.44%);
    transform: rotate(45deg)
}

.collaboration-models-section .list-item-text {
    color: var(--text-black,#151915);
    font-size: 10.5px;
    font-style: normal;
    font-weight: 400;
}

.collaboration-models-section.black-background {
    background: linear-gradient(297.02deg,#000000 23.43%, #323232 88.6%);
    color: #fff
}

.collaboration-models-section.black-background .collaboration-models-button,.collaboration-models-section.black-background .collaboration-models-button:hover {
    color: #fff
}

.collaboration-models-section .silver-item,.collaboration-models-section.silver-background {
    background: #f9f9f9;
    color: #151915
}

.collaboration-models-section .silver-item .collaboration-models-button,.collaboration-models-section .silver-item .collaboration-models-button:hover,.collaboration-models-section.silver-background .collaboration-models-button,.collaboration-models-section.silver-background .collaboration-models-button:hover {
    color: #151915
}

@media screen and (min-width: 991px) and (max-width:1400px) {
    .collaboration-models-section {
        padding-right:74px;
        padding-left: 74px
    }
}

@media screen and (max-width: 1167px) {
    .collaboration-models-section .main-blocks {
        display:flex;
        flex-wrap: unset
    }

    .collaboration-models-section .collaboration-block {
        width: 288px
    }

    .collaboration-models-section .swiper-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        margin-top: 24px;
        height: 13px
    }

    .collaboration-models-section .swiper-pagination .swiper-pagination-bullet {
        height: 5px;
        width: 5px;
        background: #d9d9d9;
        transition: .5s
    }

    .collaboration-models-section .swiper-pagination .swiper-pagination-bullet-active {
        height: 8px;
        width: 8px;
        background: linear-gradient(130.27deg,#97cf00 -14.98%,#24b400 109.44%);
        transform: rotate(45deg)
    }
}

@media screen and (max-width: 992px) {
    .collaboration-models-section {
        padding-inline:16px;
        padding-right: 16px;
        padding-left: 16px
    }

    .collaboration-models-section .row:not(:last-child) {
        margin-bottom: 32px
    }

    .collaboration-models-section .not-sure {
        display: none
    }
}

@media screen and (max-width: 576px) {
    .collaboration-models-section .section-header {
        padding-bottom:62px
    }

    .collaboration-models-section .collaboration-models-section--text {
        font-size: 26px;
        padding-bottom: 8px
    }

    .collaboration-models-section .main-blocks {
        gap: 0
    }

    .collaboration-models-section .row:not(:last-child) {
        margin-bottom: 56px
    }

    .collaboration-models-section .collaboration-block {
        min-width: 100%!important
    }
}

.request-consultation-button{
    background : linear-gradient(130.27deg,#97cf00 -14.98%,#24b400 109.44%);
    display: flex;
    justify-content: center;
    gap: 10px;
    width: -moz-max-content;
    width: max-content;
    box-sizing: border-box;
    padding: 12px 24px;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 80%;
    text-transform: uppercase;
    color: #ffffff;
    cursor: pointer
}

/* collabration-models-end */


.main-side h3{
    font-size: 17px;
}

.main-side h2{
    font-size: 25px;
}


.main-side table {
    margin: 30px 0; /* Adds 24px above and below */
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 15px;
    line-height: 22px;
    color: #191919;
    overflow: hidden;
    box-shadow: 0 0 30px 0 rgba(0,0,0,0.1); /* Adjusted from cookie table style */
    border-radius: 8px;
}

/* Style first row like header */
.main-side table tr:first-child td {
    background: #26927B; /* CodeSuite primary color */
    color: #fff;
    font-weight: 600;
    text-align: left;
    padding: 16px 20px;
    font-size: 15px;
    border: none;
    letter-spacing: 0.3px;
}

/* Apply consistent cell padding and styling */
.main-side table td {
    padding: 16px 20px;
    border-top: 1px solid #f0f0f0;
    background-color: #fff;
    vertical-align: top;
    transition: background-color 0.25s ease;
    font-size: 15px;
    line-height: 22px;
}

/* Zebra striping for better readability */
.main-side table tr:nth-child(even) td {
    background-color: #f9f9f9;
}

.main-side table tr:not(:first-child):hover td {
    background-color: #eefaf6;
}

/* Optional: Links inside table cells */
.main-side table td a {
    color: #26927B;
    text-decoration: underline;
    font-weight: 500;
    word-break: break-word;
    transition: color 0.2s;
}

.main-side table td a:hover {
    color: #FEC563;
}


.grecaptcha-badge {
  visibility: hidden;
}

#recaptcha-badge-container {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 1000;
}

#recaptcha-badge-container:hover .grecaptcha-badge {
  visibility: visible;
}
/* google capcha */

.main-side h2{
    padding-top: 5px;
    padding-bottom: 5px;
}

.bg-\[\#D7D9F6\] {
    background-color: #D7D9F6;
  }
  
  .py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  
  .sm\:py-9 {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }
  
  .ticker {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    padding: 0;
    flex-shrink: 0;
  }
  
  .gap-\[40px\] {
    gap: 40px;
  }
  
  .ticker-image-container {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    animation: tickerAnimation 100s linear infinite;
  }
  
  .duration-\[200s\] {
    animation-duration: 200s;
  }
  
  .animate-ticker-left {
    animation-name: ticker-left;
  }
  
  .flex {
    display: flex;
  }
  
  .flex-nowrap {
    flex-wrap: nowrap;
  }
  
  .items-center {
    align-items: center;
  }
  
  .gap-4 {
    gap: 1rem;
  }
  
  .flex-shrink-0 {
    flex-shrink: 0;
  }
  

  
  .mx-auto {
    margin-left: auto;
    margin-right: auto;
  }
  
  .max-w-4xl {
    max-width: 64rem;
  }
  
  .text-left {
    text-align: left;
  }
  
  .text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
  
  .uppercase {
    text-transform: uppercase;
  }
  
  .text-black {
    color: #000000;
  }
  
  .md\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
  
  .lg\:text-\[2\.5rem\] {
    font-size: 2.5rem;
  }
  
  @keyframes ticker-left {
    0% {
      transform: translateX(0);
    }
    to {
      transform: translateX(-100%);
    }
  }
  
  @keyframes tickerAnimation {
    0% {
      transform: translateX(0);
    }
    to {
      transform: translateX(-100%);
    }
  }
  
  .swiper-vertical>.swiper-wrapper {
    flex-direction: column;
  }
  
  .swiper-wrapper {
    display: flex;
    transition-property: transform;
  }
  
  .swiper-android .swiper-slide, .swiper-wrapper {
    transform: translate3d(0, 0, 0);
  }
  
  .swiper-slide {
    flex-shrink: 0;
    position: relative;
    transition-property: transform;
  }
  
  .swiper-slide-invisible-blank {
    visibility: hidden;
  }
  
  .swiper-autoheight, .swiper-autoheight .swiper-slide {
    height: auto;
  }
  
  .swiper-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform, height;
  }
  
  .swiper-backface-hidden .swiper-slide {
    transform: translateZ(0);
    backface-visibility: hidden;
  }
  
  .swiper-3d, .swiper-3d.swiper-css-mode .swiper-wrapper {
    perspective: 1200px;
  }
  
  .swiper-3d .swiper-cube-shadow, .swiper-3d .swiper-slide {
    transform-style: preserve-3d;
  }
  

  
  .project-management-container{
    background: #1b232e;
  }


/* Only apply styles to ul that do not contain the class 'tags-row' */
.main-side ul:not(.tags-row) {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.main-side ul:not(.tags-row) li:not(.category-item) {
    position: relative;
    padding-left: 2.625rem;
}

/* Spacing between non-last items, excluding category-item */
.main-side ul:not(.tags-row) li:not(.category-item):not(:last-child) {
    padding-bottom: 0.5rem;
}

/* Space adjustment when ul has space-sm class */
.main-side ul.space-sm:not(.tags-row) li:not(.category-item):not(:last-child) {
    padding-bottom: 1rem;
}

/* Bullet styling, excluding category-item */
.main-side ul:not(.tags-row) li:not(.category-item):before {
    content: "";
    position: absolute;
    background-image: url("../svg/green-dot-sm.svg");
    background-size: contain;
    background-repeat: no-repeat;
    width: 2.5rem;
    height: 2.5rem;
    left: -13.5px;
    top: -8px;
    z-index: 1;
}

/* Orange and black bullet styles, excluding category-item */
.main-side ul.bullet-orange:not(.tags-row) li:not(.category-item):before {
    background-image: url("../svg/green-dot-sm.svg");
}

.main-side ul.bullet-black:not(.tags-row) li:not(.category-item):before {
    background-image: url("../svg/green-dot-sm.svg");
}

/* Hover effect on non-category-item */
.main-side ul:not(.tags-row) li:not(.category-item):hover > a > p {
    color: #266ae6;
}

/* Additional styling for main-side elements */
.main-side p {
    padding-top: 4px;
}
.main-side h2 {
    padding-top: 5px;
    padding-bottom: 5px;
}
.main-side h1 {
    padding-top: 5px;
    padding-bottom: 5px;
}
.main-side span {
    padding-top: 4px;
}

.left-panel {
    flex: 1;
    padding: 30px;
    background-color: #f7f7f7;
    height: 900px;
}

.left-panel h2 {
    font-size: 20px;
    margin-bottom: 10px;
}

.left-panel p {
    margin-bottom: 30px;
    color: #666;
    font-size: 14px;
}
.left-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-item {
    display: flex;
    align-items: start;

    gap: 15px;
}

.contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 18px;
    color: #333;
}

.contact-text h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 3px;
    color: #333;
}

.contact-text p {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}

.right-panel {
    flex: 1.5;
    padding: 40px;
    background-color: #d1ff57;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 900px;
    border-radius: 30px;
}



.right-panel form {
    display: flex;
    flex-direction: column;
}
.form-input,
.form-textarea {
    width: 100%;
    padding: 12px 0;
    margin-bottom: 20px;
    font-size: 16px;
    color: #333;
    border: none;
    border-bottom: 1px solid #333;
    background-color: transparent;
    outline: none;
    transition: border-color 0.3s ease;
}

.form-input:focus,
.form-textarea:focus {
    border-bottom: 1px solid #000;
}

.form-textarea {
    resize: none;
    height: 100px;
}

.form-placeholder::placeholder {
    color: #000;
    font-size: 16px;
}

.checkbox-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.checkbox-container label {
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.right-panel form button {
    padding: 10px;
    background-color: #000;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

.social-icons {
    display: flex;
    gap: 10px;
    margin-top: 30px;
}

.social-icons a {
    color: #333;
    font-size: 18px;
    text-decoration: none;
}
.checkbox-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.custom-checkbox {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #333;
}

.checkbox-input {
    appearance: none;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    border: 2px solid #333;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
}

.checkbox-input:checked {
    
    border-color: #000;
}

.checkbox-input:checked::before {
    content: '✔';
    font-size: 14px;
    color: #000;
    position: absolute;
    left: 2px;
    top: -5px;
}
.contact-us {
    display: flex;
    border: 10px solid black;
    flex-direction: row;
    border-radius: 30px;
    background-color: #f7f7f7;
}

/* Apply column layout for screens below 900px */
@media (max-width: 700) {
    .contact-us-form-outer {
        flex-direction: column;
    }
    .left-panel{
        display: none;
    }

}


.social-icons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 18px;
    color: #333;
    background-color: #f8f9fa;
    transition: background-color 0.3s, color 0.3s;
    text-decoration: none;
}

.social-icon:hover {
    background-color: #333;
    color: #fff;
}
.container-company {
    display: flex;
    gap: 40px;
    background-color: #fff;
    padding:"20px";
}

.left-column-company {
    width: 70%;
    display: flex;
    flex-direction: row;
    gap: 30px;
}
.section-company{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.section-company-2{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}
.section-company h3 {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
}

.item-company {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 15px;
    padding: 15px;
    border-radius: 10px;
    transition: background-color 0.3s;
    cursor: pointer;
}
.heading-company{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
} 
.item-company.active-company {
    background-color: #f0f4f8;
}

.icon-box-company {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 18px;
    color: #333;
}

.item-company h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
    color: #333;
}

.item-company p {
    font-size: 14px;
    color: #666;
}

.badge-company {
    background-color: #e0e7ff;
    color: #333;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 12px;
    margin-left: 8px;
}

.right-column-company {
    width: 30%;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.right-column-company h4 {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.right-column-company p {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
}

.video-box-company {
    position: relative;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
}

.video-box-company img {
    width: 100%;
    display: block;
    border-radius: 10px;
}

.video-icon-company {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px;
    color: rgba(0, 0, 0, 0.7);
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    padding: 10px;
}

.version-company {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    margin-top: 15px;
}

.container-poster {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

/* Hero Section */
.hero-section-poster {
    display: flex;
    justify-content: space-between;
    color: #fff;
    border-radius: 12px;
    margin-bottom: 30px;
    gap: 70px;
}

.hero-text-poster {
    background-color: #007bff;
    padding: 40px;
    border-radius: 12px;
    flex: 1;
    max-width: 50%;
}

.hero-text-poster h1 {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 10px;
}

.hero-text-poster p {
    font-size: 18px;
    margin-bottom: 20px;
}

.hero-info-poster {
    display: flex;
    align-items: center;
    font-size: 16px;
    background-color: #ffffff;
    color: #333;
    padding: 8px 12px;
    border-radius: 20px;
    width: fit-content;
}

.hero-icon-poster {
    margin-right: 8px;
    color: #007bff;
}

.hero-image-poster {
    flex: 1;
    position: relative;
    max-width: 50%;
    border-radius: 12px;
    overflow: hidden;
}

.hero-image-poster img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.image-tag-poster {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 14px;
}

/* Search Section */
.search-section-poster {
    margin-bottom: 30px;
}

.search-section-poster h3 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
}

.search-bar-poster {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.search-bar-poster input {
    flex: 1;
    padding: 12px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    outline: none;
}

.search-bar-poster button {
    padding: 12px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
}

.search-tags-poster {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tag-poster {
    background-color: #f0f0f0;
    color: #333;
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 20px;
}

/* Categories Section */
.categories-section-poster h3 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
}

.categories-list-poster {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.category-item-poster {
    width: 100px;
    text-align: center;
}

.category-item-poster img {
    width: 100px;
    height: 100px;
    border-radius: 12px;
    object-fit: cover;
    margin-bottom: 8px;
}

.category-item-poster p {
    font-size: 14px;
    color: #333;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .hero-section-poster {
        flex-direction: column;
        padding: 20px;
    }

    .hero-text-poster, .hero-image-poster {
        max-width: 100%;
    }

    .categories-list-poster {
        justify-content: center;
    }
}
.post-shadow{
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
    border-radius: 0 0 10px 10px;
}

.main_container {
    width: 100%;
    background-color: #C7FFFA;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .content {
        z-index: 2;
        position: relative;
        padding: 12rem 6rem;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-image: url('https://s3-alpha-sig.figma.com/img/f29b/33d3/2731d8801a8a84b1275b75af0e78dbcc?Expires=1736726400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=Pjz-fiYpucx~LlPAbxKQvY67yuTd3c3-lNvNIvamVa4xkl2ASJAb0xgaL~9XSxKhoYEgYc6GnMkTg1rDP10effvp2aPnHShhOj8T57SiBD4r21b3ukmfQ82LGNCtYHaV3PtntwZwTxvtgauPteBqyEF4vYmvsDbfgj-JfaRuyeYUuIXWLD69Aj8IUdPOf02UPJkxDo41g4EwvXmV6gySIj207UuHfeq7SaNtPO7LiY9xifJC2fIGy~Shc~p4anEgxBqY8USpeCAWcFrOI~NP4wqckygYmQPYGi3vwPex6BguFSXrg9~T0HIR43jSXyXXNUSJYO3K5pjHpuXUfkG3VQ__');
        background-position: center;
        background-size: cover;

        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(199, 255, 250, 0.8);
            z-index: 1;
        }

        * {
            position: relative;
            z-index: 2;
        }

        h1 {
            font-size: clamp(2.5rem, 5vw, 4rem);
            line-height: 1.1;
            font-weight: 400;
            word-spacing: -0.05em;
            display: flex;
            flex-direction: column;

            span {
                color: #FDC463;
                font-weight: 600;
            }
        }

        p {
            font-size: clamp(0.9rem, 2vw, 1rem);
            line-height: 1.5;
            margin-top: 1rem;
        }

        button {
            background: #FDC463;
            border: none;
            padding: 1rem 1.5rem;
            border-radius: 10px;
            margin-top: 1.8rem;
            font-weight: 500;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
            max-width: max-content;

            &:hover {
                background: #ffc573;
            }
        }
    }
}

.stats {
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(32px);
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 2.4rem 12rem;

        .details {
            margin: 1rem;

            h2 {
                font-size: 2rem;
                font-weight: 600;
                font-family: var(--tp-dm-sans) !important;
            }

            p {
                font-size: 1rem;
                font-family: var(--tp-dm-sans) !important;
            }
        }
    }

.box-shadow-new-home {
    border: 1px solid rgba(28,110,164,0.15);
    border-radius: 10px 10px 10px 10px;
    overflow: hidden;
    display: flex;
    flex-flow: column nowrap;
    height: auto;
}

.case_studies {
    background: #f5f8ff;

    .cards {
        display: grid;
        /*grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));*/
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        padding: 6rem 6rem;

    }

          .card-case-studies {
            background: #fff;
            /*border-radius: 10px;*/
            overflow: hidden;
            box-shadow: 1px 4px 12px rgba(0, 0, 0, 0.01);

            .card-case-studies-image {
                overflow: hidden;

                &:hover {
                    img {
                        transform: scale(110%);
                    }
            }
            }

            img {
                width: 100%;
                /* aspect-ratio: 16 / 9; */
                /* aspect-ratio: 2.15 / 1; */
                object-fit: cover;
                /* object-fit: contain; */
            }
        }

    .card-case-studies-details {
                /*padding: 1.4rem 1rem 3.2rem;*/
                padding: 1rem 1.2rem 1rem;

                >h2 {
                    font-size: 1.8rem;
                    font-weight: 700;
                    line-height: 1.4;
                    color: #333;
                }

                >h4 {
                    margin-top: 0.4rem;
                    margin-bottom: 0.6rem;
                    font-size: 1.1rem;
                    font-weight: 600;
                    color: #333;
                }

                >p {
                    font-size: 0.9rem;
                    color: #555;
                    margin-top: 0.5rem;
                    line-height: 1.8;
                }
            }

    .pagination {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        justify-content: center;
        margin-top: 2rem;

        .pagination__btn {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: none;
            border-radius: 50%;
            width: 2rem;
            height: 2rem;
            cursor: pointer;
            font-size: 1rem;
            color: #333;
            transition: all 0.3s ease, color 0.3s ease;

            .page_number {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-size: 1rem;
                color: inherit;
                pointer-events: none;
              }

            &.active {
                background: #e0e8ff;
                color: #000;
                font-weight: bold;
            }

            &:hover {
                background: #f0f4ff;
            }

            &:disabled {
                color: #bbb;
                opacity: 0.5;
                cursor: not-allowed;
            }
        }
    }
}

@media (max-width: 768px) {
    .main_container {
        .content {
            padding: 0 2rem;

            h1 {
                font-size: 2.5rem;
            }

            p {
                font-size: 0.9rem;
            }
        }
    }

    .stats {
        padding: 1rem 1.2rem;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        place-items: center;

        .details {
            h2 {
                font-size: 1.2rem;
            }
            p {
                font-size: 0.7rem;
            }
        }
    }

    .case_studies {
        padding: 2rem;

        .cards {
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        }
    }
}

@media (max-width: 480px) {
    .main_container {
        .content {
            padding: 0 1rem;
            align-items: center;
            justify-content: flex-start;
            padding-top: 8rem;

            h1 {
                font-size: 1.8rem;
            }

            p {
                font-size: 0.8rem;
            }
        }
    }

    .case_studies {
        .cards {
            grid-template-columns: 1fr;
        }
    }
    .card-case-studies-details {
                >h2 {
                    font-size: 1.3rem !important;
                }

                >h4 {
                    font-size: 0.8rem !important;
                }

                >p {
                    font-size: 1rem !important;
                }
            }
}

.no-padding-chip-tags {
    padding: 0 !important;
}

.hero-aboutv2-section {
    width: 100%;
    background-color: #C1FFF9;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hero-aboutv2-section__head {
    z-index: 2;
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    text-align: center;
    background-image: url('https://s3-alpha-sig.figma.com/img/f29b/33d3/2731d8801a8a84b1275b75af0e78dbcc?Expires=1736726400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=Pjz-fiYpucx~LlPAbxKQvY67yuTd3c3-lNvNIvamVa4xkl2ASJAb0xgaL~9XSxKhoYEgYc6GnMkTg1rDP10effvp2aPnHShhOj8T57SiBD4r21b3ukmfQ82LGNCtYHaV3PtntwZwTxvtgauPteBqyEF4vYmvsDbfgj-JfaRuyeYUuIXWLD69Aj8IUdPOf02UPJkxDo41g4EwvXmV6gySIj207UuHfeq7SaNtPO7LiY9xifJC2fIGy~Shc~p4anEgxBqY8USpeCAWcFrOI~NP4wqckygYmQPYGi3vwPex6BguFSXrg9~T0HIR43jSXyXXNUSJYO3K5pjHpuXUfkG3VQ__');
    background-position: center;
    background-size: cover;
    position: relative;
}

.hero-aboutv2-section__head::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #C1FFF9;
    z-index: 1;
    opacity: 60%;
}

.hero-aboutv2-section__head > * {
    position: relative;
    z-index: 2;
}

.hero-aboutv2-section__head h1 {
    text-transform: uppercase;
    font-size: 4.8rem;
    line-height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
    font-weight: 300;
    word-wrap: break-word;
    color: #0ABEAD;
    font-weight: 600;
}

.hero-aboutv2-section__head p {
    font-size: 1.2rem;
    line-height: 1.5;
    width: 50%;
    display: inline-block;
    word-wrap: break-word;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
}

.hero-aboutv2-section__head button {
    background: #FDC463;
    border: none;
    outline: none;
    padding: 16px 24px;
    border-radius: 10px;
    margin-top: 1.8rem;
    font-weight: 700;
    width: max-content;
}

.aboutv2-solution-section {
    z-index: 2;
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-image: url('https://s3-alpha-sig.figma.com/img/43d1/0391/74fa091cf183f851dc944b2a1cda6bbb?Expires=1736726400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=Zc0SzsAvnVLOJglNT4hce6Nw8FRJQLGCe18aiGTnrkdUj5t0iILGGYmnUW0uuIX6MYZ5IzNW1rxCoA25TSw-FKn~ONiR7tRQhNAMf90SrnWOS92aG3YnFxytqo3kD-8gqcQitnVTHLPNBNwpUffpS0A3eBGM1WP4nCSwYN-XbOJsorkE~~cXncekulz~RCWfueOXbknN0dVgydf8tIy58V4Xyz70SVmRggeqhwkmQBLUI5c-OcDd1ZVfTRgC7FGCdr2x9Tjzvn4MlamyuskQQFN8IwGfF52LIfbgT5Q0aJZvny24HE5Wir6QB5Es~Z95Sx~roAzZZE~c-3ixLUNwlA__');
    background-position: center;
    background-size: cover;
    position: relative;

    .container h2, .container p, .container h4{
        color: white;
    }

    .container .card-text {
        > h4 {
            font-weight: 500;
            font-size: 20px;
            margin-bottom: 1rem;
        }

        > p {
            font-size: 16px;
            font-weight: 200;
            line-height: 1.25;
        }
    }
}

.aboutv2-solution-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #15BCAC;
    z-index: 1;
    opacity: 70%;
}

.aboutv2-solution-section > * {
    position: relative;
    z-index: 2;
}

.solution-grid-container {
    margin-top: 4rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;

    .card-text {
        h4 {
            font-size: 20px;
        }

        p {
            font-size: 16px;
        }
    }

    .grid-1 {
        display: grid;
        gap: 1.2rem;
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-2 {
        display: grid;
        gap: 1.2rem;
        grid-template-columns: 1.4fr 1.4fr 1fr;
    }
}

.choose-us-section {
    padding: 4rem 5rem;

    #company-logos {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    width: 100%;
    margin-top: 8rem;
    }
}

.our-strengths-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
align-items: center;
margin-top: 6rem;

#left-section-strength {
grid-column: span 2;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap: 16px;
}

.left-section-strength-card {
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    padding: 42px 24px;
    text-align: left;
    color:#7A7A7A;
    background-color: white;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.strength-card-icon {
        width: 72px;
        height: 72px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.strength-card-details {
    h4 {
        margin: 0;
        font-size: 22px;
        font-weight: 600;
    }

    p {
        margin: 8px 0 0;
        font-size: 16px;
        line-height: 1.25;
    }
}

#right-section-strength {
height: 100%;
background-color: #FFD470;
overflow: hidden;
position: relative;
border-radius: 8px;
padding: 40px;
text-align: left;
display: flex;
flex-direction: column;
align-items: flex-start;

#phone-mockup {
position: absolute;
bottom: -6rem;
right: -12rem;
}
}
}

@media (max-width: 768px) {

.hero-aboutv2-section__head {
    min-height: 88vh;
    padding: 0;
    justify-content: flex-start;
}

.hero-aboutv2-section__head h1 {
    margin-top: 18rem;
    font-size: 3rem;
}

.hero-aboutv2-section__head p {
    font-size: 0.9rem;
    line-height: 1.25;
    padding: 0 1rem;
    margin-top: 2rem;
    width: 100%;
}

.custom-padding-about-new-v2 {
    padding-top: 4rem;
}
.solution-grid-container {
    margin-top: 4rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;

    .grid-1 {
        display: grid;
        gap: 1.2rem;
        grid-template-columns: 1fr;
    }

    .grid-2 {
        display: grid;
        gap: 1.2rem;
        grid-template-columns: 1fr;

    #get-started {
        margin-top: 2.4rem;
        text-align: center;
        justify-content: center !important;
    }
    }
}

.choose-us-section {
    padding: 2rem 0.5rem;

    #company-logos {
    gap: 0.8rem;
    text-align: center;
    margin-top: 3rem;

    >h5 {
    font-size: 1.2rem;
    }
    }
}

.our-strengths-container {
display: flex;
flex-direction: column;
margin-top: 6rem;

#left-section-strength {
display: flex;
flex-direction: column;
}

#right-section-strength {
width: 100%;
height: 30rem;
padding: 30px 10px 60px;
}
}
}

.program--section-new {
    background: #F5F8FF;
    padding-block:120px;
    padding-bottom: 120px;
    padding-top: 120px;
    color: #151915
}

.program--section-new .row {
    display: flex;
    justify-content: space-between;
}

.program--section-new .program--title-new {
    margin-bottom: 3.4rem;
}

.program--section-new .program--plan-new {
    h4 {
        font-weight: 500;
        margin-bottom: 0.4rem;
        text-transform: capitalize;
        font-size: 1.2rem;
    }

    .program-description {
        color: #5D5C5C;
        font-size: 0.9rem;
    }
}

.program--section-new .plans {
    margin-top: 48px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.program--section-new .plan-card {
    position: relative;
    width: 100%;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 24px
}

.program--section-new .plan-number {
    font-style: normal;
    font-weight: 400;
    color: #15BCAC;
    font-size: 32px;
    line-height: 12px;
    text-transform: uppercase
}

.program--section-new .plan {
    border-left: 2px solid #fff;
    padding-left: 24px
}

.program--section-new .plan-name {
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 100%;
    text-transform: capitalize;
}

.program--section-new .plan-description {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: #151915;
    opacity: .9
}

@media screen and (max-width: 1280px) {
    .program--section-new .program-text>* {
        max-width:460px
    }

    .program--section-new .plans-wrapper-new {
        width: 100%
    }
}

@media screen and (max-width: 992px) {
    .program--section-new .plans-wrapper-new {
        width: 100%;
        display: flex;
        padding: 0 1.4rem;
    }

    .program--section-new .program-text>* {
        max-width: 100%
    }

    .program--section-new .program-description {
        max-width: 90%
    }
}

.tp-custom-accordio-plan .accordion-items {
    border-bottom: 2px solid #ECECF1 !important;
}

.tp-custom-accordio-plan .accordion-buttons {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    font-size: 18px;
    font-weight: 700;
    padding: 0;
    color: #212121;
    border-radius: 10px 10px 0 0;
    gap: 2rem;
}

.tp-custom-accordio-plan .plan-number {
    display: inline-block;
    min-width: 3rem;
    text-align: center;
    font-weight: 500;
}

.tp-custom-accordio-plan .plan-name {
    flex-grow: 1;
    text-align: left;
    font-size: 24px !important;
    font-weight: 500 !important;
}

@media (max-width: 767px) {
    .tp-custom-accordio-plan .accordion-buttons {
        font-size: 17px;
        padding: 28px 20px;
    }

    .tp-custom-accordio-plan .plan-name {
        flex-grow: 1;
        text-align: left;
        font-size: 16px !important;
        font-weight: 500 !important;
    }
}

.tp-custom-accordio-plan .accordion-buttons::after {
    position: absolute;
    content: "\f067";
    transform: rotate(-45deg);
    right: 45px;
    color: #000000;
    width: auto;
    height: auto;
    font-weight: 500;
    font-size: 14px;
    transition: transform 0.1s ease-in-out;
}

@media (max-width: 767px) {
    .tp-custom-accordio-plan .accordion-buttons::after {
        top: inherit;
        right: 18px;
    }
}

.tp-custom-accordio-plan .accordion-buttons.collapsed::after {
transform: rotate(0deg);
}

.tp-custom-accordio-plan .collapsed {
    border-radius: 10px 10px 10px 10px;
}

.tp-custom-accordio-plan .accordion-header {
    padding: 2.4rem 0;
}

.tp-custom-accordio-plan .accordion-body {
    padding: 0rem 5rem 1rem;
    z-index: 1;
    font-size: 16px;
}

.team-container {
    justify-content: center;
}
@media (max-width: 767px) {
    .tp-custom-accordio-plan .accordion-body {
        padding: 10px 0px;
        font-size: 13px;
    }

    .tp-custom-accordio-plan .accordion-header {
        padding: 0.3rem 0;
    }

    .tp-custom-accordio-plan .accordion-buttons {
        padding: 12px 0px;
        gap: 20px;
    }
}

.tp-custom-accordio-plan .accordion-body::before {
    position: absolute;
    content: "";
    height: 2px;
    background-color: var(--tp-grey-1);
    top: 0;
    left: 45px;
    right: 45px;
}

@media screen and (max-width: 576px) {
    .program--section-new .section {
        padding-top:64px;
        padding-bottom: 80px
    }

    .program--section-new .container {
        padding-inline: 14px;
        display: flex;
        justify-content: center;
    }

    .program--section-new .section-header {
        font-size: 32px;
        line-height: 80%
    }

    .program--section-new .program-title {
        max-width: calc(100% - 120px);
        margin-top: 64px;
        margin-bottom: 16px;
        font-size: 20px;
        line-height: 90%;
        position: relative
    }

    .program--section-new .program-text p {
        font-size: 16px;
        line-height: 150%
    }

    .program--section-new .plans {
        margin-top: 40px;
        gap: 16px
    }

    .program--section-new .plan-card {
        height: auto;
        padding: 16px;
        gap: 16px;
        align-items: flex-start
    }

    .program--section-new .plan {
        border-left: 2px solid #d9d9d9;
        padding-left: 16px
    }

    .program--section-new .plan-name,.program--section-new .plan-number {
        font-size: 16px;
        line-height: 120%;
        min-width: 1rem;
    }
}

/*@media (max-width: 480px) {
.solution-grid-container {
    margin-top: 4rem;

    .grid-1 {
        grid-template-columns: 1fr;
    }

    .grid-2 {
        grid-template-columns: 1fr;
    }
}
}*/


/* new blog page css classes */

.cs-blog__category {
    background: linear-gradient(90deg, #457EFF -0.48%, #2AE0BF 137.86%);
    background-clip: text;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
    font-size: 1.2rem;
    line-height: 1.25;
    margin-bottom: 0;
}


.cs-blog__meta {
    background-color: #EBEEF2;
    color: #495367;
    font-size: 0.8rem;
    font-weight: 400;
    padding: 0.3rem 0.45rem;
    border-radius: 4px;
    line-height: 1.25;
    width: max-content;
}

.cs-button {
    margin-top: 1.4rem;
    background-color: #F4F7FC;
    padding: 0.7rem 1.2rem;
    border-radius: 22px;
    border: 0;
    outline: 0;
    color: #457EFF;
    display: flex;
    align-items: center;
    gap: 14px;
}

.cs-button p {
    font-weight: 500;
    font-size: 1.2rem;
}

.cs-button svg {
    width: 18px;
}

.cs-blog__card-content {
    border-bottom: 0.7px solid #ECF0F6;
    padding-bottom: 1.4rem;
}

.cs-blog__card-title {
    color: #1A202E;
    font-size: 2.3rem;
}

.cs-blog__card-description {
    margin-top: 0.4rem;
    line-height: 1.25;
    font-size: 1rem;
    color: #1A202E;
}

.cs-blog__card-info {
    padding: 1rem 1.2rem 0 0;
}

.cs-blog__profile {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1.4rem 0 0;
}

.cs-avatar {
    width: 42px;
    height: 42px;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}

.cs-blog__author-name {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 0;
    letter-spacing: -0.05em;
    color: #495367;
     font-family: var(--tp-dm-sans) !important;
}

.cs-blog__post-meta {
    font-size: 0.9rem;
    letter-spacing: -0.05em;
    color: #96A2BE;
     font-family: var(--tp-dm-sans) !important;
    line-height: 1.25;
}

.cs-blog__image {
    flex: 1;
    height: 26rem;
    border-radius: 12px;
    overflow: hidden;
}

.cs-blog__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.cs-blog__card {
    max-width: 30%;
    padding-top: 1rem;
}

.cs-blog {
    background-color: #F5F8FF;
    width: 100%;
    padding: 0 4rem;
    padding-bottom: 10rem;
    font-family: var(--tp-dm-sans);
}

.cs-blog__head {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 110vh;
}

.cs-blog__title {
    font-weight: 300;
    font-size: 6rem;
    letter-spacing: 1.25;
}

.cs-blog__highlight {
    font-weight: 400;
    color: #FDC463;
}

.cs-blog__description {
    letter-spacing: 1.25;
    margin-top: 1.4rem;
    max-width: 60%;
    color: #52525B;
    line-height: 1.15;
    font-weight: 400;
    font-family: var(--tp-dm-sans);
}

.cs-blog__card-header {
    display: flex;
    gap: 1rem;
}

.cs-blog__main {
    display: flex;
    background-color: #fff;
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.05);
}

.hero-blog-section-new__popular {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;

    background-color: #2AE0BF;
    width: 100%;
}

.cs-blog__popular {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    margin-top: 4.2rem;
}

.popular-blogs {
    display: flex;
    gap: 20px;
}

.popular-blogs .blog-card {
    background-color: #fff;
    display: flex;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 4px 32px rgba(0, 0, 0, 0.01);
    flex: 1;
    gap: 4px;
}

.blog-card__preview {
    width: 50%;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
}

.blog-card__info {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    width: 100%;
    padding: 1rem;
}

.blog-card-info__category {
    color: #457EFF;
    text-transform: uppercase;
    font-size: 0.9rem;
    line-height: 1.25;
    font-family: var(--tp-dm-sans) !important;
    font-weight: 600;
    margin-bottom: 0;
}

.blog-card-info__meta {
    display: flex;
    align-items: center;
    background-color: #EBEEF2;
    color: #495367;
    font-size: 0.7rem;
    letter-spacing: -0.05em;
    font-weight: 400;
    padding: 0.12rem 0.45rem;
    border-radius: 4px;
    line-height: 1.25;
    width: max-content;
    font-family: var(--tp-dm-sans) !important;
}

.blog-card-info__content {

    >h2 {
        margin-top: 0.6rem;
        line-height: 1.15;
        font-size: 1.6rem;
        font-weight: 600;
        word-spacing: 1.25;
    }
}

.no-padding {
    border-top: 0.7px solid #ECF0F6;
    margin-top: 0.8rem;
    padding: 0.8rem 0 0 !important;

    .cs-avatar {
        width: 32px !important;
        height: 32px !important;
    }


    .cs-blog__author-name {
        font-size: 0.8rem;
        font-family: var(--tp-dm-sans) !important;
    }

    .cs-blog__post-meta {
        font-size: 0.7rem;
        font-family: var(--tp-dm-sans) !important;
    }
}

.cs-blog-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cs-blog-section__title {
    font-weight: 600;
    font-size: 1.1rem;
}

.cs-blog-section__link {
    color: #2051E5;
    text-decoration: none;
    transition: all 0.3s ease-in;
    font-size: 0.8rem;

    &:hover {
        text-decoration: underline;
    }
}

.cs-blog__our-blogs {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    margin-top: 5.2rem;
}

.blog-category-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

    .filter {
        cursor: pointer;
        border: 0;
        outline: 0;
        padding: 0.8rem 1.9rem;
        border-radius: 6px;
        background-color: #fff;
        text-transform: uppercase;
        font-size: 0.75rem;
        font-weight: 600;
        transition: color 0.2s ease-in, background-color 0.2s ease-in 0.1s;

        &:hover {
            background-color: #457EFF0F;
            color: #457EFF;
        }
    }

    .active {
        background-color: #457EFF0F;
        color: #457EFF;
    }
}

.cs-blog-our-blogs__blog-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.blog-card-detailed {
    border-radius: 12px;
    background-color: #fff;
    overflow: hidden;

    .blog-card-detailed__preview {
        width: 100%;
        height: 12.5rem;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }
    }
}

.blog-card-detailed__info {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    width: 100%;

    >h2 {
        margin-top: 0.8rem;
        line-height: 1.25;
        font-size: 1.2rem;
        font-weight: 500;
        text-transform: capitalize;
        letter-spacing: -0.05em;
    }

    >p {
        margin-top: 0.3rem;
        line-height: 1.25;
        font-size: 0.9rem;
        color: #595959;
        font-weight: 400;
        word-wrap: break-word;
    }
}

.cs-blog__author__entry {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    margin-top: 5.2rem;
}

.author-entry__card {
    display: flex;
    border-radius: 10px;
    overflow: hidden;
}

.author-entry-card__left {
    width: 50%;
    background-image: url('https://s3-alpha-sig.figma.com/img/bb93/2173/5c8271f4a4856b0e995360e4f93bd35b?Expires=1736726400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=N55lUBK8A0n-t8x6no5ZRgjhmcqyjpEeShSd93cumrPZMDOgbg5GPuJExSU6so2epsajFWkwJ51YhuI9HV8Bpf3A-CZcMQepfq~bVozqtSPncwuWwDjTnJLFNTDkFLIQXvAnDJfN1lN6XdzBmD8455hVZ2dmgacdcWk-K0dTkv~tcNhB88RohNy40ZhppFhtjmd~Onzphqyy55FSgEeB7-vTY415q1wSgtyYtryNCbDRxWXIQrt4RDYdqXi7QypjVRY6uWtBE4CHLRJkN1ZZz-YW3wQJeF4NGPmxMW0uknk28yPBTvFFxU~JJdNG2hJm~iVf6QWhB8U91abgIA5Yjw__');
    background-position: center;
    background-size: cover;
}

.author-entry-card__right {
    width: 50%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    padding: 3rem 3.8rem 0.8rem;
}


.entry-card__info {
    display: flex;
    flex-direction: column;
}

.entry-card-info__title {
    font-size: 2rem;
    word-wrap: break-word;
    line-height: 1.25;
    margin-top: 1.2rem;
    max-width: 80%;
}

.entry-card-info__description {
    color: #1A202E;
    font-size: 0.9rem;
    letter-spacing: -0.02em;
    font-weight: 400;
    word-wrap: break-word;
    line-height: 1.25;
    margin-top: 0.4rem;
}

.entry-card-info__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    border-top: 0.7px solid #ECF0F6;
    margin-top: 0.8rem;
    padding: 0.8rem 0 0 !important;
}

.cs-blog__author-text {
    font-size: 0.8rem;
    color: #B7BECD;
}

.cs-blog__author-name {
    font-size: 0.9rem;
    font-family: var(--tp-dm-sans) !important;
}

.cs-blog__post-meta {
    font-size: 0.7rem;
    word-spacing: -0.09rem;
    letter-spacing: -0.06em;
}

.entry-card-centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    padding: 0.3rem;
    align-items: center;
    justify-content: center;
}

.entry-card-centered__avatar {
    width: 82px;
    height: 82px;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}


.cs-blog__newsletter {
    display: flex;
    background-color: #000A6D0D;
    border-radius: 10px;
    padding: 2.5rem 1.8rem;
    position: relative;
    margin-top: 2.8rem;
}

.blog-newsletter_content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-right: 2rem;

    >h2 {
        font-weight: 700;
        font-size: 2rem;
    }

    >p {
        font-weight: 400;
        font-size: 1.2rem;
        line-height: 1.25;
        margin-top: 0.6rem;
    }
}

.blog-newsletter_email-box {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    padding: 0 10px;

    >input[type=email] {
        border: none;
        outline: none;
        border-radius: 6px;
        padding: 0.8rem 0.7rem;
        font-size: 0.9rem;
        font-weight: 500;
        flex: 0.8;
    }
    > input[type=email]::placeholder {
        color: #B5BCCC;
    }

    >button {
        background-color: #457EFF;
        color: #fff;
        border: none;
        outline: none;
        border-radius: 6px;
        padding: 0.8rem 1.6rem;
        font-size: 0.9rem;
        font-weight: 500;
    }
}

.blog-newsletter_animator {
    position: absolute;
    top: -20%;
    left: 2%;
    width: 10%;
    display: flex;

    >svg {
        width: 100%;
    }
}


@media (max-width: 480px) {
    .cs-blog__card-info {
        padding: 0;
    }

    .cs-blog__card {
        max-width: 100%;
    }

    .cs-blog {
        padding: 0 1.5rem;
    }

    .cs-blog__head {
        min-height: 80vh;
    }
    .cs-blog__title {
        font-size: 3.8rem;
        line-height: 1;
    }

    .cs-blog__description {
        max-width: 100%;
    }

    .cs-blog__main {
        flex-direction: column-reverse;
        padding: 1.2rem;
    }

    .popular-blogs {
        flex-direction: column;
    }

    .cs-blog__our-blogs {
        display: flex;
        flex-direction: column;
        gap: 1.4rem;
        margin-top: 5.2rem;
        padding: 0 0.8rem;
    }
    .blog-category-filters {
        flex-wrap: wrap;

        .filter {
            padding: 0.4rem 0.9rem;
            font-size: 0.8rem;
        }
    }

    .cs-blog-our-blogs__blog-container {
        grid-template-columns: 1fr;
    }

    .author-entry__card {
        flex-direction: column;
    }

    .author-entry-card__left {
        width: 100%;
        aspect-ratio: 1;
        background-position: left;
    }

    .author-entry-card__right {
        width: 100%;
        aspect-ratio: 1;
        padding: 0 1rem;
        padding-bottom: 1.8rem;
        justify-content: end;
    }

    .cs-blog__newsletter {
        flex-direction: column;
    }

    .blog-newsletter_content {
        padding-right: 0;
    }

    .blog-newsletter_email-box {
        margin-top:2rem;
        padding: 0;

        >input[type="email"] {
            flex: 1;
        }

        >button {
            padding: 0.8rem 0.6rem;
            font-size: 0.8rem;
        }
    }

    .blog-newsletter_animator {
        top: -10%;
        width: 25%;
    }
}

.dm_sans {
    font-family: var(--tp-dm-sans) !important;
}


.about-new-cards {
    width: 310px;
    height: 20rem;
    border-radius: 12px;
    margin-right: 24px;
    background-color: #E1FFFC;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    >h4 {
    font-size: 1.4rem;
    font-weight: 500;
    color: #15BCAC;
    }

    >p {
    font-size: 1rem;
    line-height: 1.25;
    }
}

.bottom-blog-card {
    margin-top: 1.4rem;
    display: flex;
    align-items:center;
    justify-content: space-between;
}


.btn-modified-link {
    height: auto !important;
    line-height: normal !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;

    i {
    padding-left: 8px !important;
    }

    &:hover {
        text-decoration: underline !important;
    }
}




.tp-hero-bs-title-casestudy {
    font-size: 52px;
    font-weight: 700;
    color: var(--tp-common-white);
    letter-spacing: -3px;
    padding-bottom: 30px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-hero-bs-title-casestudy {
        font-size: 45px;
        padding-bottom: 20px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-hero-bs-title-casestudy {
        font-size: 42px;
    }
}

@media (max-width: 767px) {
    .tp-hero-bs-title-casestudy {
        font-size: 28px;
        letter-spacing: 1px;
        padding-bottom: 15px;
    }
}



      min-width: 1200px;
    }

    .phase {
      flex: 1 0 300px;
      border-right: 2px solid #000000;
      box-sizing: border-box;
    }

    .phase h3 {
      border-bottom: 2px solid #000000;
      padding: 10px;
      font-size: 1.1rem;
      margin: 0 0 10px;
      font-weight: bold;
    }

    .task {
      background-color: #2f441e;
      border: 1px solid #24b400;
      border-radius: 5px;
      font-size: 0.8rem;
      padding: 10px;
      color: white;
      position: absolute;
      white-space: nowrap;
    }

    .progress-bar-container {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 6px;
      width: 100%;
      background: #111;
    }

    .progress-bar {
      height: 100%;
      background: limegreen;
      width: 0%;
      transition: width 0.1s;
    }



      .case-study-card {
        display: flex;
        flex-direction: column;
        max-width: 600px;
        margin: 20px auto;
        border-radius: 12px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
      }
      
      .case-study-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
      }
      
      .card-link {
        text-decoration: none;
        color: inherit;
        display: flex;
        flex-direction: column;
        height: 100%;
      }
      
      .card-image img {
        width: 100%;
        height: auto;
        display: block;
      }
      
      .card-content {
        padding: 24px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
      }
      
      .card-title {
        font-size: 1.8rem;
        font-weight: 800;
        margin: 0 0 8px;
        line-height: 1.3;
      }
      
      .card-subtitle {
        font-size: 1rem;
        color: #444;
        font-weight: 500;
        margin-bottom: 12px;
      }
      
      .card-description {
        font-size: 0.95rem;
        color: #333;
        line-height: 1.8;
        margin-bottom: 20px;
      }

      .card-bottom{
        display: flex;
        gap: 16px;
        justify-content: space-between;
        align-items: center;
      }
      
      .card-tags {
        display: flex;
        flex-wrap: wrap;
        align-self: flex-start;
        gap: 8px;
        align-items: center;
        background-color: #f2f2f2;
        color: #111;
        font-size: 0.8rem;
        text-transform: capitalize;
        padding: 6px 16px;
        border-radius: 999px;
        font-weight: 600;
        white-space: nowrap;

      }
      
      .card-footer {
        font-weight: 700;
        font-size: 0.85rem;
      }
      
      .view-project {
        border-bottom: 1px solid #000;
        padding-bottom: 2px;
        transition: all 0.2s ease;
      }
      
      .view-project:hover {
        color: var(--tp-theme-1);
        border-color: var(--tp-theme-1);
      }

/* === Case Study Mobile Responsiveness Improvements === */
@media (max-width: 768px) {
  /* Hero Section Mobile Improvements */
  .tp-hero-area {
    padding: 40px 16px !important;
    min-height: auto !important;
  }

  .tp-hero-bs-title {
    font-size: 32px !important;
    line-height: 1.2 !important;
    margin-bottom: 16px !important;
  }

  .tp-hero-area p {
    font-size: 16px !important;
    line-height: 1.4 !important;
    margin-bottom: 24px !important;
  }

  /* Case Studies Section Mobile Layout */
  .case_studies {
    background: #f5f8ff !important;
    padding: 20px 16px !important;
  }

  .case_studies .cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 0 !important;
  }

  /* Case Study Card Mobile Improvements */
  .case-study-card {
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  .case-study-card .card-image {
    width: 100% !important;
    height: 200px !important;
    overflow: hidden !important;
  }

  .case-study-card .card-image img {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
  }

  .case-study-card .card-content {
    padding: 16px !important;
    gap: 12px !important;
  }

  .case-study-card .card-title {
    font-size: 18px !important;
    line-height: 1.3 !important;
    margin-bottom: 6px !important;
  }

  .case-study-card .card-subtitle {
    font-size: 14px !important;
    margin-bottom: 8px !important;
  }

  .case-study-card .card-description {
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
  }

  .case-study-card .card-bottom {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
  }

  .case-study-card .card-tags {
    font-size: 12px !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    background-color: #f0f0f0 !important;
  }

  .case-study-card .card-footer {
    align-self: flex-end !important;
  }

  .case-study-card .view-project {
    font-size: 14px !important;
    font-weight: 600 !important;
  }

  /* Brand/Client Section Mobile Improvements */
  .tp-brand-area {
    padding: 40px 16px !important;
    background: #f8f9fa !important;
  }

  .tp-brand-title-four h4 {
    font-size: 20px !important;
    margin-bottom: 20px !important;
    text-align: center !important;
  }

  .tp-brand-slider-section {
    margin: 0 !important;
    padding: 20px 0 !important;
  }

  .swiper-container.active-technologies {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 16px !important;
  }

  .business-logo-swiper {
    gap: 24px !important;
  }

  .swiper-slide {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100px !important;
  }

  .tp-brand-slider-section {
    margin: 0 !important;
  }

  .swiper-container.active-technologies {
    width: 100% !important;
    margin: 0 !important;
  }

  .logo-slide img {
    max-width: 140px !important;
    max-height: 80px !important;
    object-fit: contain !important;
  }

  .logo-slide {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    min-height: 100px !important;
  }

  /* Pagination Mobile Improvements */
  .tp-pagination-wrapper {
    margin-top: 32px !important;
    padding: 0 16px !important;
  }

  .tp-pagination-list {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .tp-page-link {
    padding: 8px 12px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
  }

  /* Engagement Models Section Mobile Improvements */
  .pt-100.pb-100.wss {
    padding: 40px 16px !important;
  }

  .pt-100.pb-100.wss h2 {
    font-size: 24px !important;
    margin-bottom: 24px !important;
  }

  .pt-100.pb-100.wss .row {
    gap: 24px !important;
  }

  .pt-100.pb-100.wss .col-lg-4 {
    margin-bottom: 24px !important;
  }

  .pt-100.pb-100.wss .card-icon {
    text-align: center !important;
  }

  .pt-100.pb-100.wss .card-icon img {
    max-width: 60px !important;
    max-height: 60px !important;
  }

  .pt-100.pb-100.wss .card-text h4 {
    font-size: 18px !important;
    margin-bottom: 12px !important;
    text-align: center !important;
  }

  .pt-100.pb-100.wss .card-text p {
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-align: center !important;
  }

  .pt-100.pb-100.wss .cta-link {
    text-align: center !important;
  }

  .pt-100.pb-100.wss .tp-btn-border-3 {
    width: 100% !important;
    text-align: center !important;
    padding: 12px 24px !important;
  }
}

@media (max-width: 480px) {
  /* Extra Small Screen Improvements */
  .tp-hero-bs-title {
    font-size: 28px !important;
  }

  .tp-hero-area p {
    font-size: 14px !important;
  }

  .case_studies {
    padding: 16px 12px !important;
  }

  .case-study-card .card-image,
  .case-study-card .card-image img {
    height: 160px !important;
  }

  .case-study-card .card-title {
    font-size: 16px !important;
  }

  .case-study-card .card-subtitle {
    font-size: 13px !important;
  }

  .case-study-card .card-description {
    font-size: 13px !important;
  }

  .case-study-card .card-tags {
    font-size: 11px !important;
    padding: 3px 10px !important;
  }

  .case-study-card .view-project {
    font-size: 13px !important;
  }

  .tp-brand-title-four h4 {
    font-size: 18px !important;
  }

  .logo-slide img {
    max-width: 120px !important;
    max-height: 70px !important;
  }

  .logo-slide {
    min-height: 80px !important;
    padding: 12px !important;
  }

  .pt-100.pb-100.wss h2 {
    font-size: 20px !important;
  }

  .pt-100.pb-100.wss .card-text h4 {
    font-size: 16px !important;
  }

  .pt-100.pb-100.wss .card-text p {
    font-size: 13px !important;
  }
}

@media (max-width: 360px) {
  /* Very Small Screen Improvements */
  .tp-hero-bs-title {
    font-size: 24px !important;
  }

  .case_studies {
    padding: 12px 8px !important;
  }

  .case-study-card .card-image,
  .case-study-card .card-image img {
    height: 140px !important;
  }

  .case-study-card .card-content {
    padding: 12px !important;
  }

  .case-study-card .card-title {
    font-size: 15px !important;
  }

  .case-study-card .card-subtitle {
    font-size: 12px !important;
  }

  .case-study-card .card-description {
    font-size: 12px !important;
  }

  .case-study-card .card-tags {
    font-size: 10px !important;
    padding: 2px 8px !important;
  }

  .case-study-card .view-project {
    font-size: 12px !important;
  }

  .tp-brand-title-four h4 {
    font-size: 16px !important;
  }

  .logo-slide img {
    max-width: 100px !important;
    max-height: 60px !important;
  }

  .logo-slide {
    min-height: 70px !important;
    padding: 10px !important;
  }

  .pt-100.pb-100.wss h2 {
    font-size: 18px !important;
  }

  .pt-100.pb-100.wss .card-text h4 {
    font-size: 14px !important;
  }

  .pt-100.pb-100.wss .card-text p {
    font-size: 12px !important;
  }
}