@charset "UTF-8";
/*
Template Name: Hoverax
Theme URI: https://wealcoder.com/
Author: WealCoder
Author URI: https://wealcoder.com/
Description:
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
Version: 1.0.0
*/
/*-----------------------------------------------------------------------------------

	Theme Name: Hovarax - Creative Agency HTML5 Template
	Author: Crowdyflow
	Support: habib.crowdyflow@gmail.com
	Description: Hovarax – is a  Creative Agency HTML5 template that comes with high-quality 3 Pre build Home Pages and many built-in awesome inner pages  which are perfect for any creative agencies, designers, digital agencies, freelancers, developers, designers, marketing, startup, blog and portfolio.
	Version: 1.0

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

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

	01. VARIABLES CSS
	02. MIXIN CSS
	03. SPACING CSS
	04. TYPOGRAPHY CSS
	05. BASE CSS
	06. ANIMATION CSS
	07. BUTTON CSS
	08. TITLE CSS
	09. BG CSS
	10. SCROLL CSS
	11. MODAL CSS
	12. HEADER CSS
	13. HERO CSS
	14. SERVICE CSS
	15. TEAM CSS
	16. PORTFOLIO CSS
	17. BLOG CSS
	18. ABOUT US CSS
	19. COUNTER CSS
	20. SUBSCRIBE CSS
	21. BUSINESS CSS
	22. CONTACT CSS
	23. BREADCRUMB CSS
	24. TESTIMONIAL CSS
	25. PRICE CSS
	26. FAQ CSS
	27. OFFCANVAS CSS
	28. CAREER CSS
	29. JOB CSS
	30. FOOTER CSS


**********************************************/
/*----------------------------------------*/
/*  01. VARIABLES CSS START
/*----------------------------------------*/
/*
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(./inter/Inter-Thin.woff2?v=3.4.1)
      format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url(./inter/Inter-ThinItalic.woff2?v=3.4.1)
      format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(./inter/Inter-ExtraLight.woff2?v=3.4.1)
      format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: url(./inter/Inter-ExtraLightItalic.woff2?v=3.4.1)
      format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(./inter/Inter-Light.woff2?v=3.4.1)
      format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(./inter/Inter-LightItalic.woff2?v=3.4.1)
      format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./inter/Inter-Regular.woff2?v=3.4.1)
      format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(./inter/Inter-Italic.woff2?v=3.4.1)
      format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./inter/Inter-Medium.woff2?v=3.4.1)
      format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(./inter/Inter-MediumItalic.woff2?v=3.4.1)
      format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(./inter/Inter-SemiBold.woff2?v=3.4.1)
      format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(./inter/Inter-SemiBoldItalic.woff2?v=3.4.1)
      format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./inter/Inter-Bold.woff2?v=3.4.1)
      format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(./inter/Inter-BoldItalic.woff2?v=3.4.1)
      format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(./inter/Inter-Black.woff2?v=3.4.1)
      format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url(./inter/Inter-BlackItalic.woff2?v=3.4.1)
      format("woff2");
}
*/

@import url("./platform/css.css");

:root {
    --box-shadow-1: 0 5px 10px 0 rgb(0 0 0 / 10%);
    --border-radius-1:8px;
    --border-radius-2:8px 8px 0 0;
    --border-radius-3:0 0 8px 8px;
    /*--primary: #5B19C8;
  --secondary: #F15224;*/
    --primary: #1d18af;
    --secondary: #1d18af;
    --logo: #1d18af;
    --hover: #1d18af;

    --gray: #68666F;
    --gray-light: #B7B6C3;
    --gray-thin: #A099AB;
    --gray-2: #9D9DA9;
    --gray-3: #F2EFF6;
    --gray-4: #68666E;
    --gray-5: #9F9F9F;
    --gray-6: #D7D7D7;
    --gray-7: #9793A2;
    --gray-8: #F7F4F9;
    --gray-9: #A1A1A1;
    --gray-10: #B7B6C4;
    --gray-11: #E5DEEF;
    --gray-12: #8A879F;
    --gray-13: #A19FAC;
    --gray-14: #777B83;
    --gray-15: #A8A8A8;
    --gray-16: #f1f1f1;
    --white: #FFFFFF;
    --white-2: #F9F9F9;
    --white-3: #F0F2F8;
    --white-4: #F5F7F9;
    --white-5: #FBFBFB;
    --white-6: #F2F4F6;
    --white-7: #EFF1F7;
    --white-light: #D0CED5;
    --black: #000000;
    --black-darker: #030A39;
    --black-dark: #04010C;
    --black-light: #282F3B;
    --black-2: #373434;
    --black-3: #212024;
    --black-4: #97919F;
    --black-5: #141515;
    --black-6: #363636;
    --black-7: #0C0C0C;
    --green: #219653;
    --orange: #FFA439;
    --purple: #150B2F;
    --purple-light: #372F4E;
    --purple-2: rgb(16 4 49 / 0.35);
    /*
  --purple-3: #6222CC;
  */
    --purple-3: #0d6efd;
    --purple-4: #5115B4;
    --purple-5: #6E2CDC;
    --pink: #EA4CA8;
    --pink-2: #CFBCEF;
    --pink-3: #F6F4F9;
    --pink-4: #ECEFF4;
    --blue: #0E63FF;
    --red: #FF0000;
    --twitter: #1DA1F2;
    --facebook: #4267B2;
    --linkedin: #0072AC;
    --border-2: #F1EEF5;
    /*
  --heading-font: "Oswald", sans-serif;
  --body-font: "Roboto", sans-serif;
  --font-archivo: "Archivo", sans-serif;
  --font-poppins: "Poppins", sans-serif;
  */
    --heading-font: "Inter", sans-serif;
    --body-font: "Inter", sans-serif;
    --font-archivo: "Inter", sans-serif;
    --font-poppins: "Inter", sans-serif;
}

/*----------------------------------------*/
/*  02. MIXIN CSS START
/*----------------------------------------*/
/* Section Shadow */
/*----------------------------------------*/
/*  03. SPACING CSS START
/*----------------------------------------*/
.mr-20 {
    margin-right: 20px;
}

.mb-35 {
    margin-bottom: 35px;
}

.mb-60 {
    margin-bottom: 60px;
}

.mb-130 {
    margin-bottom: 130px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .mb-130 {
        margin-bottom: 80px;
    }
}
@media only screen and (max-width: 767px) {
    .mb-130 {
        margin-bottom: 40px;
    }
}

.mb-50 {
    margin-bottom: 50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .mb-50 {
        margin-bottom: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .mb-50 {
        margin-bottom: 20px;
    }
}

.pt-100 {
    padding-top: 100px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .pt-100 {
        padding-top: 50px;
    }
}
@media only screen and (max-width: 767px) {
    .pt-100 {
        padding-top: 40px;
    }
}

.pb-100 {
    padding-bottom: 100px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .pb-100 {
        padding-bottom: 50px;
    }
}
@media only screen and (max-width: 767px) {
    .pb-100 {
        padding-bottom: 40px;
    }
}

.pb-60 {
    padding-bottom: 60px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .pb-60 {
        padding-bottom: 40px;
    }
}
@media only screen and (max-width: 767px) {
    .pb-60 {
        padding-bottom: 30px;
    }
}



.pb-110 {
    padding-bottom: 110px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .pb-110 {
        padding-bottom: 50px;
    }
}
@media only screen and (max-width: 767px) {
    .pb-110 {
        padding-bottom: 20px;
    }
}

.pb-120 {
    padding-bottom: 120px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .pb-120 {
        padding-bottom: 60px;
    }
}
@media only screen and (max-width: 767px) {
    .pb-120 {
        padding-bottom: 30px;
    }
}

.pb-130 {
    padding-bottom: 130px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .pb-130 {
        padding-bottom: 80px;
    }
}
@media only screen and (max-width: 767px) {
    .pb-130 {
        padding-bottom: 40px;
    }
}

.pt-130 {
    padding-top: 130px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .pt-130 {
        padding-top: 80px;
    }
}
@media only screen and (max-width: 767px) {
    .pt-130 {
        padding-top: 40px;
    }
}

.pt-120 {
    padding-top: 120px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .pt-120 {
        padding-top: 80px;
    }
}
@media only screen and (max-width: 767px) {
    .pt-120 {
        padding-top: 50px;
    }
}

.pr-130 {
    padding-right: 130px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .pr-130 {
        padding-right: 80px;
    }
}
@media only screen and (max-width: 767px) {
    .pr-130 {
        padding-right: 0px;
    }
}

/*----------------------------------------*/
/*  04. TYPOGRAPHY CSS START
/*----------------------------------------*/
* {
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--heading-font);
    color: var(--black-dark);
    padding: 0;
    margin: 0;
}

ul,
ol {
    padding: 0;
    margin: 0;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
    /*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  */
}
a:hover {
    color: var(--secondary);
}

p {
    padding: 0;
    margin: 0;
    line-height: 1.5;
    font-weight: 400;
    font-size: 16px;
    color: var(--black);
}

/*----------------------------------------*/
/*  05. BASE CSS START
/*----------------------------------------*/
body {
    font-family: var(--body-font);
    color: var(--gray);
}

.container__xl {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.container__lg {
    max-width: 1150px;
    margin: 0 auto;
    padding: 0 15px;
}

.play-btn {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto;
    z-index: 9;
}
.play-btn button::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(241, 82, 36, 0.5);
    border-radius: 100%;
    left: 0px;
    top: 0px;/*
  -webkit-animation: ripple-1 2s 0.5s infinite ease-in-out;
		  animation: ripple-1 2s 0.5s infinite ease-in-out;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
    z-index: -1;
}
.play-btn button::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(241, 82, 36, 0.5);
    border-radius: 100%;
    left: 0px;
    top: 0px;/*
  -webkit-animation: ripple-2 2s infinite ease-in-out;
		  animation: ripple-2 2s infinite ease-in-out;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
    z-index: -1;
}
.play-btn button:hover::after, .play-btn button:hover::before {
    background-color: rgba(91, 25, 200, 0.5);
}

#preloader {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: var(--white);
    z-index: 999;
}
#preloader .loading {
    position: absolute;
    width: 80px;
    height: 80px;
    left: 50%;
    top: 50%;
    margin: -40px 0 0 -40px;
}
#preloader .loading div {
    position: absolute;
    border: 4px solid var(--primary);
    opacity: 1;
    border-radius: 50%;/*
  -webkit-animation: preloader 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
		  animation: preloader 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;*/
}
#preloader .loading div:nth-child(2) {/*
  -webkit-animation-delay: -0.5s;
		  animation-delay: -0.5s;*/
}

/*----------------------------------------*/
/*  06. ANIMATION CSS START
/*----------------------------------------*/
@-webkit-keyframes leftshape {
    0% {
        left: -50px;
    }
    50% {
        left: 0;
    }
    100% {
        left: -50px;
    }
}
@keyframes leftshape {
    0% {
        left: -50px;
    }
    50% {
        left: 0;
    }
    100% {
        left: -50px;
    }
}
@-webkit-keyframes bottomshape {
    0% {
        bottom: -50px;
    }
    50% {
        bottom: 0;
    }
    100% {
        bottom: -50px;
    }
}
@keyframes bottomshape {
    0% {
        bottom: -50px;
    }
    50% {
        bottom: 0;
    }
    100% {
        bottom: -50px;
    }
}
@-webkit-keyframes rightshape {
    0% {
        right: -50px;
    }
    50% {
        right: 0;
    }
    100% {
        right: -50px;
    }
}
@keyframes rightshape {
    0% {
        right: -50px;
    }
    50% {
        right: 0;
    }
    100% {
        right: -50px;
    }
}
@-webkit-keyframes leftcornershape {
    0% {
        -webkit-transform: translate(-30%, 30%);
        transform: translate(-30%, 30%);
    }
    50% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    100% {
        -webkit-transform: translate(-30%, 30%);
        transform: translate(-30%, 30%);
    }
}
@keyframes leftcornershape {
    0% {
        -webkit-transform: translate(-30%, 30%);
        transform: translate(-30%, 30%);
    }
    50% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    100% {
        -webkit-transform: translate(-30%, 30%);
        transform: translate(-30%, 30%);
    }
}
@-webkit-keyframes heroshape {
    0% {
        left: 0;
    }
    50% {
        left: -100px;
    }
    100% {
        left: 0;
    }
}
@keyframes heroshape {
    0% {
        left: 0;
    }
    50% {
        left: -100px;
    }
    100% {
        left: 0;
    }
}
@-webkit-keyframes subs-right {
    0% {
        bottom: -120px;
        right: -60%;
    }
    50% {
        bottom: -110px;
        right: -70%;
    }
    100% {
        bottom: -120px;
        right: -60%;
    }
}
@keyframes subs-right {
    0% {
        bottom: -120px;
        right: -60%;
    }
    50% {
        bottom: -110px;
        right: -70%;
    }
    100% {
        bottom: -120px;
        right: -60%;
    }
}
@-webkit-keyframes bounceIn {
    0% {
        width: 120px;
        height: 120px;
        left: 0;
        top: 0;
    }
    50% {
        width: 180px;
        height: 180px;
        left: -30px;
        top: -30px;
    }
    100% {
        width: 120px;
        height: 120px;
        left: 0;
        top: 0;
    }
}
@keyframes bounceIn {
    0% {
        width: 120px;
        height: 120px;
        left: 0;
        top: 0;
    }
    50% {
        width: 180px;
        height: 180px;
        left: -30px;
        top: -30px;
    }
    100% {
        width: 120px;
        height: 120px;
        left: 0;
        top: 0;
    }
}
@-webkit-keyframes preloader {
    0% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 0;
    }
    4.9% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 0;
    }
    5% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        top: 0px;
        left: 0px;
        width: 72px;
        height: 72px;
        opacity: 0;
    }
}
@keyframes preloader {
    0% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 0;
    }
    4.9% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 0;
    }
    5% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        top: 0px;
        left: 0px;
        width: 72px;
        height: 72px;
        opacity: 0;
    }
}
@-webkit-keyframes fade_left {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-60px);
        transform: translateX(-60px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes fade_left {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-60px);
        transform: translateX(-60px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@-webkit-keyframes fade_right {
    0% {
        opacity: 0;
        -webkit-transform: translateX(60px);
        transform: translateX(60px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes fade_right {
    0% {
        opacity: 0;
        -webkit-transform: translateX(60px);
        transform: translateX(60px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@-webkit-keyframes fade_bottom {
    0% {
        opacity: 0;
        -webkit-transform: translateY(60px);
        transform: translateY(60px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes fade_bottom {
    0% {
        opacity: 0;
        -webkit-transform: translateY(60px);
        transform: translateY(60px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@-webkit-keyframes ripple-1 {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
        opacity: 0;
    }
}
@keyframes ripple-1 {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
        opacity: 0;
    }
}
@-webkit-keyframes ripple-2 {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1.7);
        transform: scale(1.7);
        opacity: 0;
    }
}
@keyframes ripple-2 {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1.7);
        transform: scale(1.7);
        opacity: 0;
    }
}
/*----------------------------------------*/
/*  07. BUTTON CSS START
/*----------------------------------------*/
.wc-btn-primary {
    display: inline-block;
    padding: 20px 55px;
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    /*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
    color: var(--white);
    background: var(--primary);
    overflow: hidden;
    position: relative;
    z-index: 9;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
    .wc-btn-primary {
        padding: 20px 36px;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .wc-btn-primary {
        padding: 20px 30px;
    }
}
.wc-btn-primary span {
    position: absolute;
    width: 0px;
    height: 0px;
    background: var(--secondary);
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    /*
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;*/
    z-index: -1;
}
.wc-btn-primary:hover {
    color: var(--white);
}
.wc-btn-primary:hover span {
    width: 500px;
    height: 500px;
}

.wc-btn-secondary {
    display: inline-block;
    padding: 20px 55px;
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
    text-transform: none;
    text-decoration: none;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    /*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  */
    color: var(--white);
    background: var(--secondary);
    overflow: hidden;
    position: relative;
    z-index: 9;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
    .wc-btn-secondary {
        padding: 20px 36px;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .wc-btn-secondary {
        padding: 20px 30px;
    }
}
.wc-btn-secondary span {
    position: absolute;
    width: 0px;
    height: 0px;
    background: var(--primary);
    border-radius: 50%;
    /*
  -webkit-transform: translate(-50%, -50%);
		  transform: translate(-50%, -50%);
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  */
    z-index: -1;
}
.wc-btn-secondary:hover {
    color: var(--white);
}
.wc-btn-secondary:hover span {
    width: 500px;
    height: 500px;
}

.wc-btn-white {
    display: inline-block;
    padding: 20px 55px;
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    font-weight: 600;
    /*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  */
    color: var(--black);
    background: var(--white);
    overflow: hidden;
    position: relative;
    z-index: 9;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
    .wc-btn-white {
        padding: 20px 36px;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .wc-btn-white {
        padding: 20px 30px;
    }
}
.wc-btn-white span {
    position: absolute;
    width: 0px;
    height: 0px;
    background: var(--black);
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);/*
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;*/
    z-index: -1;
}
.wc-btn-white:hover {
    /*color: var(--white);*/
}
.wc-btn-white:hover span {
    width: 500px;
    height: 500px;
}

.btn-right-icon {
    text-decoration: none;
    font-family: var(--heading-font);
    color: var(--black);
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-transform: none;
    /*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  */
}
.btn-right-icon i {
    margin-left: 10px;
    /*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  */
}

.price-btn {
    color: var(--black-dark);
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 21px 0 16px;
    border: 1px solid var(--gray-3);
    border-radius: 5px;/*
  -webkit-transition: all 0.5s;
  transition: all 0.5s;*/
    display: block;
    text-align: center;
    position: relative;
    z-index: 9;
    overflow: hidden;
}
.price-btn span {
    position: absolute;
    width: 0px;
    height: 0px;
    background: var(--secondary);
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    /*
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;*/
    z-index: -1;
}
.price-btn:hover {
    color: var(--white);
}
.price-btn:hover span {
    width: 800px;
    height: 800px;
}

/*----------------------------------------*/
/*  08. TITLE CSS START
/*----------------------------------------*/

.section-title {
    font-weight: 700;
    font-size: 36px;
    line-height: 1.19;
    /*
  letter-spacing: 0.02em;
  */
    text-transform: none;
    color: var(--black-dark);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .section-title {
        font-size: 32px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .section-title {
        font-size: 32px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .section-title {
        font-size: 28px;
        padding-bottom: 10px;
    }
}
@media only screen and (max-width: 767px) {
    .section-title {
        font-size: 28px;
        padding-bottom: 10px;
    }
}


.section-title-index {
    font-weight: 700;
    font-size: 42px;
    line-height: 1.19;
    /*
  letter-spacing: 0.02em;
  */
    text-transform: none;
    color: var(--black-dark);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .section-title-index {
        font-size: 36px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .section-title-index {
        font-size: 32px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .section-title-index {
        font-size: 32px;
        padding-bottom: 10px;
    }
}
@media only screen and (max-width: 767px) {
    .section-title-index {
        font-size: 28px;
        padding-bottom: 10px;
    }
}

.section-sub-title {
    display: inline-block;
    font-family: var(--body-font);
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.1;
    text-transform: none;
    color: var(--secondary);
    padding-left: 35px;
    padding-bottom: 17px;
    position: relative;
}
.section-sub-title::before {
    position: absolute;
    content: "";
    width: 25px;
    height: 2px;
    top: 10px;
    left: 0;
    background: var(--secondary);
}

/*----------------------------------------*/
/*  09. BG CSS START
/*----------------------------------------*/
.bg-shape {
    background-image: url(../img/bg/gray-shape.png);
    background-size: cover;
    background-position: center;
}

/*----------------------------------------*/
/*  10. SCROLL CSS START
/*----------------------------------------*/
.pos-top {
    position: absolute;
    width: 100%;
    height: auto;
    left: 0;
    top: 40px;
    z-index: 99;
}
@media only screen and (max-width: 767px) {
    .pos-top {
        top: 20px;
    }
}

.scroll-down {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    grid-row-gap: 30px;
    max-width: 100px;
    text-align: center;
    position: absolute;
    left: 0;
    bottom: 30px;/*
  -webkit-animation: scrolldown infinite 3s;
		  animation: scrolldown infinite 3s;*/
}
.scroll-down img {
    margin: 0 auto;
}
.scroll-down a {
    display: inline-block;
    margin: 0 auto;
    width: 80px;
    height: 80px;
    background: var(--white);/*
  -webkit-box-shadow: 0px 10px 17px rgba(223, 224, 242, 0.25);
		  box-shadow: 0px 10px 17px rgba(223, 224, 242, 0.25);*/
    border-radius: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-weight: 400;/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
}
.scroll-down a i {
    font-size: 24px;
    color: var(--black);/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
}
.scroll-down a:hover {
    background: var(--secondary);
}
.scroll-down a:hover i {
    color: var(--white);
}
.scroll-down p {
    font-family: var(--heading-font);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--black);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    margin-bottom: 30px;
}
.scroll-down.right {
    left: unset;
    right: -195px;
    bottom: 115px;/*
  -webkit-animation: scrolldown infinite 5s;
		  animation: scrolldown infinite 5s;*/
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
    .scroll-down.right {
        right: 0;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .scroll-down.right {
        right: 0;
    }
}
@media only screen and (max-width: 767px) {
    .scroll-down.right {
        right: 0;
    }
}
.scroll-down.right p {
    color: var(--white);
}

@-webkit-keyframes scrolldown {
    0% {
        bottom: 100px;
    }
    50% {
        bottom: 115px;
    }
    100% {
        bottom: 100px;
    }
}

@keyframes scrolldown {
    0% {
        bottom: 100px;
    }
    50% {
        bottom: 115px;
    }
    100% {
        bottom: 100px;
    }
}
/*----------------------------------------*/
/*  11. MODAL CSS START
/*----------------------------------------*/
.modal__area {
    background-color: rgba(0, 0, 0, 0.8);
}
.modal__dialog {
    max-width: 1200px;
    height: 500px;
}
.modal__content {
    height: 100%;
}
.modal__body {
    padding: 30px 15px 15px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
}
.modal__body iframe {
    width: 100%;
    height: 100%;
    border-radius: 5px;
}
.modal__close {
    position: absolute;
    right: -12px;
    top: -12px;
    color: var(--white);
    background-color: transparent;
    border: none;
    width: 30px;
    height: 30px;
    background: var(--black-dark);
    border-radius: 50px;
}

/*----------------------------------------*/
/*  12. HEADER CSS START
/*----------------------------------------*/
.header__area .navbar-toggler:focus, .header__area-3 .navbar-toggler:focus, .header__area-2 .navbar-toggler:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
}
.header__area.sticky, .sticky.header__area-3, .sticky.header__area-2 {
    position: fixed;
    top: -8px;
    width: 100%;
    z-index: 99;
}
.header__area.sticky .nav-link, .sticky.header__area-3 .nav-link, .sticky.header__area-2 .nav-link {
    padding: 35px 8px;/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header__area.sticky .nav-link, .sticky.header__area-3 .nav-link, .sticky.header__area-2 .nav-link {
        padding: 10px 0;
    }
}
@media only screen and (max-width: 767px) {
    .header__area.sticky .nav-link, .sticky.header__area-3 .nav-link, .sticky.header__area-2 .nav-link {
        padding: 10px 0;
    }
}
.header__area.sticky .header__content, .header__area.sticky .header__content-2, .sticky.header__area-3 .header__content, .sticky.header__area-3 .header__content-2, .sticky.header__area-2 .header__content, .sticky.header__area-2 .header__content-2 {
    /* -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
}
.header__area.sticky .navbar-collapse, .sticky.header__area-3 .navbar-collapse, .sticky.header__area-2 .navbar-collapse {
    top: 90px;
}
.header__area.sticky .dropdown-menu, .sticky.header__area-3 .dropdown-menu, .sticky.header__area-2 .dropdown-menu {
    top: 95px;
}
.header__area.sticky .nav-link.active::after, .sticky.header__area-3 .nav-link.active::after, .sticky.header__area-2 .nav-link.active::after {
    bottom: -4px;
}
.header__area.sticky .nav-link::after, .sticky.header__area-3 .nav-link::after, .sticky.header__area-2 .nav-link::after {
    bottom: -4px;
}
.header__area.sticky_2, .sticky_2.header__area-3, .sticky_2.header__area-2 {
    /*border-bottom: 1px solid var(--white-light);*/
    /*-webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
}
.header__area.sticky_2 .nav-link, .sticky_2.header__area-3 .nav-link, .sticky_2.header__area-2 .nav-link {
    padding: 0;/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header__area.sticky_2 .nav-link, .sticky_2.header__area-3 .nav-link, .sticky_2.header__area-2 .nav-link {
        padding: 10px 0;
    }
}
@media only screen and (max-width: 767px) {
    .header__area.sticky_2 .nav-link, .sticky_2.header__area-3 .nav-link, .sticky_2.header__area-2 .nav-link {
        padding: 10px 0;
    }
}
.header__area.sticky_2 .header__content-2, .sticky_2.header__area-3 .header__content-2, .sticky_2.header__area-2 .header__content-2 {
    /*-webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
}
.header__area.sticky_2 .header__menu .dropdown-menu, .sticky_2.header__area-3 .header__menu .dropdown-menu, .sticky_2.header__area-2 .header__menu .dropdown-menu {
    top: 100%;
}
.header__area.sticky_3, .sticky_3.header__area-3, .sticky_3.header__area-2 {
    background-color: var(--primary);/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
}
.header__area.sticky_3 .header__content-3, .sticky_3.header__area-3 .header__content-3, .sticky_3.header__area-2 .header__content-3 {
    /*-webkit-transition: all 0.3s;
  transition: all 0.3s;*/
}
.header__area.sticky_3 .nav-link, .sticky_3.header__area-3 .nav-link, .sticky_3.header__area-2 .nav-link {
    padding: 34px 8px;
    /*-webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header__area.sticky_3 .nav-link, .sticky_3.header__area-3 .nav-link, .sticky_3.header__area-2 .nav-link {
        padding: 10px 0;
    }
}
@media only screen and (max-width: 767px) {
    .header__area.sticky_3 .nav-link, .sticky_3.header__area-3 .nav-link, .sticky_3.header__area-2 .nav-link {
        padding: 10px 0;
    }
}
.header__area.sticky_3 .header__menu .dropdown-menu, .sticky_3.header__area-3 .header__menu .dropdown-menu, .sticky_3.header__area-2 .header__menu .dropdown-menu {
    top: 91px;
}
.header__area.sticky_3 .header__phone-2 a span, .sticky_3.header__area-3 .header__phone-2 a span, .sticky_3.header__area-2 .header__phone-2 a span {
    background-color: var(--purple);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header__area .navbar-collapse, .header__area-3 .navbar-collapse, .header__area-2 .navbar-collapse {
        position: absolute;
        background: white;
        width: 100vw;
        margin-left: -15px;
        left: 0;
        top: 88px;
        z-index: 99;
    }
}
@media only screen and (max-width: 767px) {
    .header__area .navbar-collapse, .header__area-3 .navbar-collapse, .header__area-2 .navbar-collapse {
        position: absolute;
        background: white;
        width: 100vw;
        margin-left: -15px;
        left: 0;
        top: 88px;
        z-index: 99;
    }
}
.header__area .nav-item.dropdown::after, .header__area-3 .nav-item.dropdown::after, .header__area-2 .nav-item.dropdown::after {
    position: absolute;
    content: "\f054";
    font-family: "Font Awesome 5 Pro";
    right: 25px;
    top: 10px;
    display: none;
    z-index: -1;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header__area .nav-item.dropdown::after, .header__area-3 .nav-item.dropdown::after, .header__area-2 .nav-item.dropdown::after {
        display: block;
    }
}
@media only screen and (max-width: 767px) {
    .header__area .nav-item.dropdown::after, .header__area-3 .nav-item.dropdown::after, .header__area-2 .nav-item.dropdown::after {
        display: block;
    }
}
.header__area .mobile-icon, .header__area-3 .mobile-icon, .header__area-2 .mobile-icon {
    display: none;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    width: inherit;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header__area .mobile-icon, .header__area-3 .mobile-icon, .header__area-2 .mobile-icon {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
}
@media only screen and (max-width: 767px) {
    .header__area .mobile-icon, .header__area-3 .mobile-icon, .header__area-2 .mobile-icon {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
}
.header__area .dropdown-toggle::after, .header__area-3 .dropdown-toggle::after, .header__area-2 .dropdown-toggle::after {
    border: none;
}
.header__area .nav-link, .header__area-3 .nav-link, .header__area-2 .nav-link {
    font-family: var(--heading-font);
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #212121;
    margin: 0 25px;
    padding: 50px 0;
    position: relative;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
    .header__area .nav-link, .header__area-3 .nav-link, .header__area-2 .nav-link {
        margin: 0 25px;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .header__area .nav-link, .header__area-3 .nav-link, .header__area-2 .nav-link {
        margin: 0 25px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .header__area .nav-link, .header__area-3 .nav-link, .header__area-2 .nav-link {
        margin: 0 25px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header__area .nav-link, .header__area-3 .nav-link, .header__area-2 .nav-link {
        padding: 10px 0;
    }
}
@media only screen and (max-width: 767px) {
    .header__area .nav-link, .header__area-3 .nav-link, .header__area-2 .nav-link {
        padding: 10px 0;
    }
}
.header__area .nav-link::after, .header__area-3 .nav-link::after, .header__area-2 .nav-link::after {
    position: absolute;
    content: "";
    width: 0%;
    height: 3px;
    bottom: -4px;
    left: 0;
    background-color: var(--secondary);
    border-radius: 1.9rem;/*
  -webkit-transition: all 0.3s;
  transition: all 0.3s;*/
}
.header__area .nav-link.active, .header__area-3 .nav-link.active, .header__area-2 .nav-link.active {
    color: var(--secondary);
}
.header__area .nav-link.active::after, .header__area-3 .nav-link.active::after, .header__area-2 .nav-link.active::after {
    width: 100%;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header__area .nav-link.active::after, .header__area-3 .nav-link.active::after, .header__area-2 .nav-link.active::after {
        width: 0;
    }
}
@media only screen and (max-width: 767px) {
    .header__area .nav-link.active::after, .header__area-3 .nav-link.active::after, .header__area-2 .nav-link.active::after {
        width: 0;
    }
}
.header__area .nav-link:hover, .header__area-3 .nav-link:hover, .header__area-2 .nav-link:hover {
    color: var(--secondary);
}
.header__area .nav-link:hover::after, .header__area-3 .nav-link:hover::after, .header__area-2 .nav-link:hover::after {
    width: 100%;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header__area .nav-link:hover::after, .header__area-3 .nav-link:hover::after, .header__area-2 .nav-link:hover::after {
        width: 0;
    }
}
@media only screen and (max-width: 767px) {
    .header__area .nav-link:hover::after, .header__area-3 .nav-link:hover::after, .header__area-2 .nav-link:hover::after {
        width: 0;
    }
}
.header__area-2 {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 99;
}
.header__area-2 .navbar-expand-lg {
    padding: 0;
}
.header__area-2 .nav-link.active,
.header__area-2 .nav-link:hover {
    color: var(--black-dark);
}
.header__area-2 .nav-link.active::after,
.header__area-2 .nav-link:hover::after {
    position: inherit;
}
.header__area-3 .navbar-expand-lg {
    padding: 0;
}
.header__area-3.pos-top {
    position: fixed;
    top: 0;
}
.header__area-3 .nav-link.active,
.header__area-3 .nav-link:hover {
    color: var(--secondary);
}
.header__area-3 .nav-link.active::after,
.header__area-3 .nav-link:hover::after {
    position: inherit;
}
.header__logo {
    margin-right: 130px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .header__logo {
        margin-right: 100px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .header__logo {
        margin-right: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .header__logo {
        margin-right: 0;
    }
}
.header__logo-2 {
    margin-right: 25px;
}
@media only screen and (max-width: 767px) {
    .header__logo-2 {
        margin-right: 0;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .header__logo-2 {
        margin-right: 25px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .header__logo-2 {
        margin-right: 25px;
    }
}
.header__phone, .header__phone-2 {
    margin-left: 160px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
    .header__phone, .header__phone-2 {
        margin-left: 80px;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .header__phone, .header__phone-2 {
        margin-left: 60px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .header__phone, .header__phone-2 {
        display: none;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header__phone, .header__phone-2 {
        display: none;
    }
}
@media only screen and (max-width: 767px) {
    .header__phone, .header__phone-2 {
        display: none;
    }
}
.header__phone a, .header__phone-2 a {
    font-family: var(--heading-font);
    font-style: normal;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--black-dark);
    /*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  */
}
.header__phone a:hover, .header__phone-2 a:hover {
    color: var(--secondary);
}
.header__phone a i, .header__phone-2 a i {
    color: var(--secondary);
    margin-right: 5px;/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
}
.header__phone a:hover i, .header__phone-2 a:hover i {
    color: var(--primary);
}
.header__phone-2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.header__phone-2 a {
    font-family: var(--body-font);
    font-size: 16px;
    line-height: 1.5;
    color: var(--white);
    font-weight: 600;
}
.header__phone-2 a:hover {
    color: var(--white);
}
.header__bar-icon {
    margin-left: 60px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .header__bar-icon {
        margin-left: 40px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header__bar-icon {
        display: none;
    }
}
@media only screen and (max-width: 767px) {
    .header__bar-icon {
        display: none;
    }
}
.header__bar-icon button {
    border: none;
    background: transparent;
    color: var(--black-light);
    font-size: 1.5rem;
}
.header__bar-icon button:hover {
    color: var(--secondary);
}
.header__search {
    position: relative;
}
@media only screen and (max-width: 767px) {
    .header__search {
        display: none;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header__search {
        display: none;
    }
}
.header__search-icon {
    border: none;
    background: transparent;
    color: var(--black-light);
    font-size: 1.5rem;
}
.header__search-icon:hover {
    color: var(--secondary);
}
.header__search-close {
    display: none;/*
  -webkit-transition: all 0.3s;
  transition: all 0.3s;*/
}
.header__search-close:hover {
    color: var(--secondary);
}
.header__search-box {
    background-color: var(--black-dark);
    position: absolute;
    width: 360px;
    top: calc(100% + 20px);
    left: 0;
    border-radius: 0;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);/*
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;*/
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .header__search-box {
        left: -300px;
    }
}
.header__search-box.show-box {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
.header__search-form {
    position: relative;
    margin: 10px 30px 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.header__search-form input {
    background-color: transparent;
    width: 100%;
    height: 55px;
    line-height: 55px;
    border: none;
    outline: none;
    font-size: 18px;
    color: var(--white);
    text-transform: capitalize;
}
.header__search-form input::-webkit-input-placeholder {
    color: var(--white);
}
.header__search-form input::-moz-placeholder {
    color: var(--white);
}
.header__search-form input:-ms-input-placeholder {
    color: var(--white);
}
.header__search-form input::-ms-input-placeholder {
    color: var(--white);
}
.header__search-form input::placeholder {
    color: var(--white);
}
.header__submit {
    background-color: transparent;
    border: none;
    position: absolute;
    top: 50%;
    right: 30px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--white);/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
}
.header__submit:hover {
    color: var(--secondary);
}
.header__content, .header__content-2 {
    max-width: 1760px;
    width: 100%;
    margin: 0 auto;
    padding: 0 55px;
    background: var(--white);
    border: 1px solid var(--white-2);/*
  -webkit-box-shadow: 0px 0px 37px rgba(69, 81, 113, 0.06);
		  box-shadow: 0px 0px 37px rgba(69, 81, 113, 0.06);*/
    border-radius: 8px;/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header__content, .header__content-2 {
        padding: 20px 55px;
    }
}
@media only screen and (max-width: 767px) {
    .header__content, .header__content-2 {
        padding: 15px 20px;
    }
}
.header__content-2 {
    padding: 0;/*
  -webkit-box-shadow: none;
		  box-shadow: none;*/
    background: transparent;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: none;
}
.header__content-2 .header__menu .dropdown-menu {
    top: 100%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .header__content-2 {
        padding: 0 20px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header__content-2 {
        padding: 17px 0;
    }
}
@media only screen and (max-width: 767px) {
    .header__content-2 {
        padding: 17px 0;
    }
}
.header__content-2 .nav-link {
    padding: 58px 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header__content-2 .nav-link {
        padding: 10px 0;
    }
}
@media only screen and (max-width: 767px) {
    .header__content-2 .nav-link {
        padding: 10px 0;
    }
}
.header__content-2 .nav-link::after {
    position: inherit;
    background-color: transparent;
}
.header__content-2 .header__search-icon,
.header__content-2 .header__bar-icon button {/*
  -webkit-transition: all 0.3s;
  transition: all 0.3s;*/
}
.header__content-2 .header__search-icon:hover,
.header__content-2 .header__bar-icon button:hover {
    color: var(--black-dark);
}
.header__content-3 {
    max-width: 1760px;
    width: 100%;
    margin: 0 auto;
    padding: 0 55px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .header__content-3 {
        padding: 0;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header__content-3 {
        padding: 17px 0;
    }
}
@media only screen and (max-width: 767px) {
    .header__content-3 {
        padding: 17px 0;
    }
}
.header__content-3 .nav-link {
    padding: 58px 0;
    color: var(--white);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header__content-3 .nav-link {
        padding: 10px 0;
        color: var(--gray-4);
    }
}
@media only screen and (max-width: 767px) {
    .header__content-3 .nav-link {
        padding: 10px 0;
        color: var(--gray-4);
    }
}
.header__content-3 .nav-link::after {
    position: inherit;
    background-color: transparent;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header__menu {
        padding: 30px 40px;
    }
}
@media only screen and (max-width: 767px) {
    .header__menu {
        padding-bottom: 10px;
    }
}
.header__menu .dropdown-menu {/*
  -webkit-box-shadow: 0px 0px 37px rgba(69, 81, 113, 0.06);
		  box-shadow: 0px 0px 37px rgba(69, 81, 113, 0.06);*/
    border: none;
    border-radius: 0 0 4px 4px;
    top: 125px;
    width: 260px;
    padding: 15px 0;
    /*
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  */
}
.header__menu .dropdown-menu::before {
    position: unset;
    content: "";
    width: 100%;
    height: 3px;
    left: 0;
    top: 0;
    background-color: var(--secondary);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header__menu .dropdown-menu::before {
        position: unset;
    }
}
@media only screen and (max-width: 767px) {
    .header__menu .dropdown-menu::before {
        position: unset;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header__menu .dropdown-menu {
        width: 100%;
    }
}
@media only screen and (max-width: 767px) {
    .header__menu .dropdown-menu {
        width: 100%;
    }
}
.header__menu .dropdown-menu li {
    position: relative;
}
.header__menu .dropdown-menu li span {
    position: absolute;
    right: 20px;
    width: 20px;
    top: 0;
    font-size: 18px;
    color: var(--gray-4);
    cursor: pointer;
}
.header__menu .dropdown-menu li:hover .sub-dropdown {
    left: 260px;
    opacity: 1;
    visibility: visible;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header__menu .dropdown-menu li {
        padding-left: 10px;
        padding-bottom: 8px;
    }
}
@media only screen and (max-width: 767px) {
    .header__menu .dropdown-menu li {
        padding-left: 10px;
        padding-bottom: 8px;
    }
}
.header__menu .dropdown-item {
    padding: 0 20px 0 0;
    text-transform: capitalize;
}
.header__menu .dropdown-item:hover, .header__menu .dropdown-item.active {
    color: var(--secondary);
    background: transparent;
}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        opacity: 0;
        visibility: hidden;
        display: unset;
    }

    .navbar .nav-item:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
    }
}
/*----------------------------------------*/
/*  13. HERO CSS START
/*----------------------------------------*/
.hero__area {
    padding: 180px 0 190px;
    background-image: url(../img/bg/hero-shape-2.png);
    background-size: auto;
    background-position: right top;
    background-repeat: no-repeat;
    background-color: var(--gray-8);
    position: relative;
    overflow: hidden;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero__area {
        background-size: 55%;
        overflow: hidden;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero__area {
        background-size: 60%;
        padding: 60px 0 120px;
        overflow: hidden;
    }
}
@media only screen and (max-width: 767px) {
    .hero__area {
        padding: 60px 0;
    }
}
.hero__area-2 {
    margin-top: 138px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero__area-2 {
        margin-top: 85px;
    }
}
@media only screen and (max-width: 767px) {
    .hero__area-2 {
        margin-top: 85px;
    }
}
.hero__area-3 {
    padding: 270px 0 220px;
    background-image: url(../img/bg/hero3-overlay.png);
    background-color: var(--purple-3);
    background-size: cover;
    background-position: bottom center;
    background-size: cover;
    position: relative;
    z-index: 9;
}
@media only screen and (max-width: 767px) {
    .hero__area-3 {
        padding: 270px 0 100px;
    }
}
.hero__area-3::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(../img/bg/hero-3.png);
    background-position: top right;
    background-repeat: no-repeat;
    z-index: -1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero__area-3::after {
        background-size: 60%;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero__area-3::after {
        background-size: 60%;
    }
}
.hero__slider {
    position: relative;
}
.hero__slider .swiper-slide {
    text-align: center;
}
.hero__slider .slide-1 {
    background-image: -webkit-gradient(linear, left top, left bottom, from(black), to(black)), url(../img/bg/hero-2.jpg);
    background-image: linear-gradient(black, black), url(../img/bg/hero-2.jpg);
    background-size: cover;
}
.hero__slider .slide-2 {
    background-image: -webkit-gradient(linear, left top, left bottom, from(black), to(black)), url(../img/bg/contact.jpg);
    background-image: linear-gradient(black, black), url(../img/bg/contact.jpg);
    background-size: cover;
}
.hero__slider .slide-3 {
    background-image: -webkit-gradient(linear, left top, left bottom, from(black), to(black)), url(../img/bg/hero-2.jpg);
    background-image: linear-gradient(black, black), url(../img/bg/hero-2.jpg);
    background-size: cover;
}
.hero__slider .swiper-slide-active .hero__sub-title {/*
  -webkit-animation: fadeInUp 1s;
		  animation: fadeInUp 1s;*/
}
.hero__slider .swiper-slide-active .hero__title-2 {/*
  -webkit-animation: fadeInUp 1.25s -0.25s;
		  animation: fadeInUp 1.25s -0.25s;*/
}
.hero__slider .swiper-slide-active a {/*
  -webkit-animation: fadeInUp 1s;
		  animation: fadeInUp 1s;*/
}
.hero__slider .prev-btn {
    position: absolute;
    top: 50%;
    margin-top: -25px;
    background: rgba(0, 0, 0, 0.5);
    padding: 15px 15px 15px 20px;
    color: var(--white);
    border-radius: 0 5px 5px 0;
    z-index: 9;
    font-size: 20px;
    line-height: 20px;/*
  -webkit-transition: all 0.3s;
  transition: all 0.3s;*/
}
.hero__slider .prev-btn:hover {
    background: rgba(0, 0, 0, 0.7);
}
@media only screen and (max-width: 767px) {
    .hero__slider .prev-btn {
        display: none;
    }
}
.hero__slider .next-btn {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -25px;
    background: rgba(0, 0, 0, 0.5);
    padding: 15px 20px 15px 15px;
    color: var(--white);
    border-radius: 5px 0 0 5px;
    z-index: 9;
    font-size: 20px;
    line-height: 20px;/*
  -webkit-transition: all 0.3s;
  transition: all 0.3s;*/
}
.hero__slider .next-btn:hover {
    background: rgba(0, 0, 0, 0.7);
}
@media only screen and (max-width: 767px) {
    .hero__slider .next-btn {
        display: none;
    }
}
.hero__slide {
    padding: 200px 0 190px;
    background-size: cover;
    background-blend-mode: saturation;
    background-position: bottom center;
    background-size: cover;
    position: relative;
    z-index: 9;
}
@media only screen and (max-width: 767px) {
    .hero__slide {
        padding: 120px 0 100px;
    }
}
.hero__slide::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(../img/bg/overlay.png);
    background-position: top right;
    background-repeat: no-repeat;
    mix-blend-mode: hue;
    z-index: 0;
}
.hero__slide::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /*background-image: url(../img/bg/hero-2-overlay.png);*/
    background-position: left bottom;
    background-color: var(--purple-2);
    z-index: -1;
    opacity: .5;
}
.hero__list {
    padding-bottom: 40px;
    opacity: 0;/*
  -webkit-animation-name: fade_left;
		  animation-name: fade_left;
  -webkit-animation-duration: 1s;
		  animation-duration: 1s;
  -webkit-animation-delay: 1s;
		  animation-delay: 1s;
  -webkit-animation-fill-mode: forwards;
		  animation-fill-mode: forwards;*/
}
@media only screen and (max-width: 767px) {
    .hero__list {
        padding-bottom: 20px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero__list {
        position: relative;
        z-index: 9;
    }
}
.hero__list li {
    font-family: var(--body-font);
    font-style: normal;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--gray);
    padding-left: 2.5rem;
    padding-bottom: 1rem;
    position: relative;
}
@media only screen and (max-width: 767px) {
    .hero__list li {
        color: var(--white);
    }
}
.hero__list li::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: url(../img/check-theme.png);
    background-position: 0 5px;
    background-repeat: no-repeat;
}
.hero__content {
    padding: 150px 0 165px;
    position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero__content {
        padding: 180px 0 100px;
    }
}
@media only screen and (max-width: 767px) {
    .hero__content {
        padding: 130px 0 50px 0;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero__content > a {
        position: relative;
        z-index: 9;
    }
}
.hero__content .btn_about_us {
    opacity: 0;/*
  -webkit-animation-name: fade_left;
		  animation-name: fade_left;
  -webkit-animation-delay: 2s;
		  animation-delay: 2s;
  -webkit-animation-duration: 1s;
		  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
		  animation-fill-mode: forwards;*/
}
.hero__content .btn_contact_us {
    opacity: 0;
    /*
  -webkit-animation-name: fade_left;
		  animation-name: fade_left;
  -webkit-animation-delay: 1.5s;
		  animation-delay: 1.5s;
  -webkit-animation-duration: 1s;
		  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
		  animation-fill-mode: forwards;*/
}
.hero__content-3 a {
    font-weight: 600;
    background-color: var(--black);
    color: var(--white);
    opacity: 0;/*
  -webkit-animation: fade_left 1s 1.5s forwards;
		  animation: fade_left 1s 1.5s forwards;*/
}
.hero__content-3 a:hover {
    background-color: var(--white);
    color: var(--black);
}
.hero__content-3 a span {
    background-color: var(--white);
}
.hero__content-2 {
    position: relative;
    z-index: 9;
}
.hero__title {
    font-family: var(--heading-font);
    font-style: normal;
    font-weight: 500;
    font-size: 75px;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--black);
    max-width: 500px;
    padding-bottom: 50px;
    opacity: 0;/*
  -webkit-animation-name: fade_left;
		  animation-name: fade_left;
  -webkit-animation-duration: 1s;
		  animation-duration: 1s;
  -webkit-animation-delay: 0.5s;
		  animation-delay: 0.5s;
  -webkit-animation-fill-mode: forwards;
		  animation-fill-mode: forwards;*/
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero__title {
        font-size: 50px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero__title {
        font-size: 48px;
    }
}
@media only screen and (max-width: 767px) {
    .hero__title {
        font-size: 36px;
        color: var(--white);
    }
}
.hero__title-2 {
    font-style: normal;
    font-weight: 400;
    font-size: 100px;
    line-height: 1.06;
    text-align: center;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--white);
    max-width: 1000px;
    margin: 0 auto;
    padding-bottom: 60px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero__title-2 {
        font-size: 60px;
        max-width: 760px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero__title-2 {
        font-size: 60px;
        color: var(--white);
    }
}
@media only screen and (max-width: 767px) {
    .hero__title-2 {
        padding-left: 15px;
        padding-right: 15px;
        font-size: 36px;
        color: var(--white);
    }
}
.hero__title-3 {
    font-style: normal;
    font-weight: 400;
    font-size: 100px;
    line-height: 1.14;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--white);
    max-width: 600px;
    padding-bottom: 60px;
    opacity: 0;/*
  -webkit-animation: fade_left 1s 1s forwards;
		  animation: fade_left 1s 1s forwards;*/
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero__title-3 {
        font-size: 80px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero__title-3 {
        font-size: 70px;
    }
}
@media only screen and (max-width: 767px) {
    .hero__title-3 {
        font-size: 50px;
    }
}
.hero__sub-title {
    font-family: var(--heading-font);
    font-style: normal;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.5;
    text-align: center;
    letter-spacing: 0.295em;
    text-transform: uppercase;
    color: var(--white);
    padding-bottom: 40px;
}
.hero__social {
    position: relative;
}
@media only screen and (max-width: 767px) {
    .hero__social {
        margin-bottom: 20px;
    }
}
.hero__social::before {
    position: absolute;
    content: "";
    width: 250px;
    height: 1px;
    background-color: var(--gray-11);
    left: -320px;
    bottom: 10px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .hero__social::before {
        left: -250px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero__social::before {
        position: unset;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero__social::before {
        position: unset;
    }
}
@media only screen and (max-width: 767px) {
    .hero__social::before {
        position: unset;
    }
}
.hero__social::after {
    position: absolute;
    content: "";
    width: 660px;
    height: 1px;
    background-color: var(--gray-11);
    right: -200px;
    bottom: 7px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
    .hero__social::after {
        width: 520px;
        right: -60px;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .hero__social::after {
        width: 350px;
        right: 0;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero__social::after {
        width: 240px;
        right: 0;
        bottom: 8px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero__social::after {
        width: 70px;
        right: 0;
        bottom: 8px;
    }
}
@media only screen and (max-width: 767px) {
    .hero__social::after {
        width: 100%;
        right: unset;
        bottom: -10px;
    }
}
.hero__social li {
    display: inline;
    padding-right: 60px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero__social li {
        padding-right: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .hero__social li {
        padding-right: 30px;
    }
}
.hero__social li:last-child {
    margin-right: 0;
}
@media only screen and (max-width: 767px) {
    .hero__social li:last-child {
        padding-right: 0;
    }
}
.hero__social li a {
    display: inline-block;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray-10);/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
}
.hero__social li a i {
    padding-right: 5px;
    font-size: 16px;
}
@media only screen and (max-width: 767px) {
    .hero__social li a i {
        padding-right: 0;
        font-size: 14px;
    }
}
.hero__social li a:hover {
    color: var(--secondary);
}
.hero__social-2 {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
@media only screen and (max-width: 767px) {
    .hero__social-2 {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }
}
.hero__social-item {
    text-align: center;
    padding: 68px 0 70px;/*
  -webkit-transition: all 0.3s;
  transition: all 0.3s;*/
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero__social-item {
        padding: 45px 0;
    }
}
@media only screen and (max-width: 767px) {
    .hero__social-item {
        padding: 45px 0;
    }
}
.hero__social-item.envelope {
    /*background-image: url(../img/bg/social-orange.png);
  background-color: var(--secondary);*/
    background-color: var(--gray-16);
}
.hero__social-item.envelope:hover {/*
  -webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
		  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);*/
}
.hero__social-item.phone {
    /*background-image: url(../img/bg/social-purple.png);*/
    background-color: var(--purple-3);
}
.hero__social-item.phone:hover {/*
  -webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
		  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);*/
}
.hero__social-item.map {
    /*background-image: url(../img/bg/social-map.png);
  background-color: var(--black-dark);*/
    background-color: var(--gray-16);
}
.hero__social-item.map:hover {/*
  -webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
		  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);*/
}
.hero__social-item p,
.hero__social-item a {
    font-family: var(--heading-font);
    font-style: normal;
    font-weight: 500;
    font-size: 30px;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--white);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .hero__social-item p,
    .hero__social-item a {
        font-size: 24px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero__social-item p,
    .hero__social-item a {
        font-size: 20px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero__social-item p,
    .hero__social-item a {
        font-size: 16px;
    }
}
@media only screen and (max-width: 767px) {
    .hero__social-item p,
    .hero__social-item a {
        font-size: 24px;
    }
}
.hero__social-item p a:hover,
.hero__social-item a a:hover {
    color: inherit;
}
.hero__social-item p i,
.hero__social-item a i {
    font-size: 48px;
    margin-right: 24px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .hero__social-item p i,
    .hero__social-item a i {
        font-size: 32px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero__social-item p i,
    .hero__social-item a i {
        font-size: 30px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero__social-item p i,
    .hero__social-item a i {
        font-size: 24px;
        margin-right: 10px;
    }
}
@media only screen and (max-width: 767px) {
    .hero__social-item p i,
    .hero__social-item a i {
        margin-right: 15px;
    }
}
.hero__email {
    -webkit-transform: translateX(85%);
    transform: translateX(85%);
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
    .hero__email {
        -webkit-transform: translateX(30%);
        transform: translateX(30%);
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .hero__email {
        -webkit-transform: translateX(15%);
        transform: translateX(15%);
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero__email {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero__email {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
}
@media only screen and (max-width: 767px) {
    .hero__email {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
}
.hero__email a {
    font-family: var(--heading-font);
    font-weight: 400;
    font-size: 24px;
    line-height: 1;
    text-align: right;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--black-dark);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero__email a {
        font-size: 20px;
        line-height: 1.4;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero__email a {
        font-size: 18px;
        line-height: 1.4;
    }
}
.hero__email a i {/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
    color: var(--secondary);
    padding-right: 10px;
}
.hero__email a:hover {
    color: var(--secondary);
}
.hero__email a:hover i {
    color: var(--primary);
}
.hero__scroll {
    position: relative;/*
  -webkit-animation: bottomshape infinite 7s;
		  animation: bottomshape infinite 7s;*/
}
.hero__scroll a {
    position: absolute;
    left: 60px;
    bottom: -110px;
    font-family: var(--heading-font);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--white);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.hero__scroll a:hover p {
    color: var(--secondary);
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
    .hero__scroll a {
        left: 0;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero__scroll a {
        left: unset;
        right: 0;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero__scroll a {
        left: unset;
        right: 0;
    }
}
@media only screen and (max-width: 767px) {
    .hero__scroll a {
        left: unset;
        right: 0;
        bottom: 0;
    }
}
.hero__scroll a img {
    margin-bottom: 30px;
    margin-left: 2px;
}
.hero__scroll a p {
    color: var(--white);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    margin-top: 30px;
    line-height: 1.5;/*
  -webkit-transition: all 0.3s;
  transition: all 0.3s;*/
}
.hero__shape {
    position: absolute;
    top: 330px;
    left: -50px;/*
  -webkit-animation: heroshape infinite 15s;
		  animation: heroshape infinite 15s;*/
}
@media only screen and (max-width: 767px) {
    .hero__shape {
        top: 0;
        width: 80px;
    }
}
.hero__shape-2 {
    mix-blend-mode: luminosity;
    position: absolute;
    top: 80px;
    right: -10px;
    opacity: 0;/*
  -webkit-animation: fade_bottom 1s 2s forwards;
		  animation: fade_bottom 1s 2s forwards;*/
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero__shape-2 {
        width: 50%;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero__shape-2 {
        width: 50%;
        right: -10%;
        top: 195px;
    }
}
@media only screen and (max-width: 767px) {
    .hero__shape-2 {
        position: unset;
        width: 100%;
        margin-top: 30px;
    }
}

/*----------------------------------------*/
/*  14. SERVICE CSS START
/*----------------------------------------*/
.service__area {
    background-color: var(--gray-8);
    position: relative;
}
.service__area .scroll-down {
    left: inherit;
}
.service__top {
    padding-bottom: 50px;
    position: relative;
    z-index: 1;
}
.service__top::after {
    position: absolute;
    content: "";
    width: 1260px;
    height: 540px;
    background-color: #F2EFF7;
    border-radius: 20px;
    left: 160px;
    top: -55px;
    z-index: -1;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
    .service__top::after {
        width: 1200px;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .service__top::after {
        width: 1070px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .service__top::after {
        width: 800px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .service__top::after {
        width: 560px;
    }
}
@media only screen and (max-width: 767px) {
    .service__top::after {
        position: inherit;
    }
}
.service__item, .service__item-3, .service__item-2 {
    background-color: var(--white);
    padding: 65px 45px;
    border-radius: var(--border-radius-1);
    position: relative;/*
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-filter: drop-shadow(0px 11px 19px var(--white-3));
		  filter: drop-shadow(0px 11px 19px var(--white-3));
  */
    box-shadow: var(--box-shadow-1);
    z-index: 9;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .service__item, .service__item-3, .service__item-2 {
        margin-bottom: 25px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .service__item, .service__item-3, .service__item-2 {
        margin-bottom: 25px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .service__item, .service__item-3, .service__item-2 {
        padding: 50px 30px;
        margin-bottom: 25px;
    }
}
@media only screen and (max-width: 767px) {
    .service__item, .service__item-3, .service__item-2 {
        padding: 50px 40px;
        margin-bottom: 20px;
    }
}
.service__item::after, .service__item-3::after, .service__item-2::after {
    position: absolute;
    content: "";
    width: 0%;
    height: 4px;
    bottom: 0;
    left: 0;
    background-color: var(--secondary);
    border-radius: 15px;
    /*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
}
.service__item:hover, .service__item-3:hover, .service__item-2:hover {
    border-radius: 15px 15px 0 0;
}
.service__item:hover .service__title, .service__item:hover .service__title-3, .service__item-3:hover .service__title, .service__item-3:hover .service__title-3, .service__item-2:hover .service__title, .service__item-2:hover .service__title-3,
.service__item:hover .btn-right-icon,
.service__item-3:hover .btn-right-icon,
.service__item-2:hover .btn-right-icon {
    color: var(--secondary);
}
.service__item:hover .btn-right-icon i, .service__item-3:hover .btn-right-icon i, .service__item-2:hover .btn-right-icon i {
    margin-left: 15px;
}
.service__item:hover::after, .service__item-3:hover::after, .service__item-2:hover::after {
    width: 100%;
}
.service__item-2 {
    margin-bottom: 22px;
    z-index: 9;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .service__item-2 {
        padding: 40px;
    }
}
.service__item-2::after {
    height: 100%;
    background-color: var(--purple-3);
    /*background-image: url(../img/thumb/service-hover.png);*/
    background-position: center;
    background-size: cover;
    z-index: -1;
    opacity: 0;
}
.service__item-2:hover {/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
}
.service__item-2:hover::after {
    opacity: 1;
}
.service__item-2:hover .btn-right-icon {
    color: var(--white);
}
.service__item-2:hover .service__title, .service__item-2:hover .service__title-3 {
    color: var(--white);
}

.service__item-2:hover .btn-right-icon a:hover{
    color: #000;
}
/*
.service__item-2:hover .service__icon {
  -webkit-filter: brightness(10);
		  filter: brightness(10);
}
*/
.service__item-3 {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 17% 32% auto 40px;
    grid-template-columns: 17% 32% auto 40px;
    padding: 55px 45px 50px;
    margin-bottom: 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .service__item-3 {
        -ms-grid-columns: 10% 20px 30% 20px auto 20px 30px;
        grid-template-columns: 10% 30% auto 30px;
        grid-gap: 20px;
        padding: 55px 30px 50px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .service__item-3 {
        -ms-grid-columns: 10% 20px 30% 20px auto 20px 40px;
        grid-template-columns: 10% 30% auto 40px;
        grid-gap: 20px;
    }
}
@media only screen and (max-width: 767px) {
    .service__item-3 {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        grid-gap: 20px;
        padding: 40px 30px;
    }
}
.service__item-3 p {
    max-width: 310px;
}
.service__item-3 i {
    text-align: right;
    font-size: 3rem;
    color: var(--black);/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
}
.service__item-3:hover i {
    color: var(--secondary);
}
.service__title, .service__title-3 {
    font-style: normal;
    font-weight: 600;
    font-size: 26px;
    line-height: 32px;
    letter-spacing: 0.02em;
    text-transform: none;
    padding: 45px 0 40px;/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .service__title, .service__title-3 {
        font-size: 22px;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .service__title, .service__title-3 {
        font-size: 20px;
        padding: 25px 0 30px;
    }
}
.service__title-3 {
    padding: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .service__title-3 {
        font-size: 20px;
    }
}
.service__sub-title {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 85px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .service__sub-title {
        padding-left: 0;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .service__sub-title {
        padding: 20px 50px 30px 0;
    }
}
@media only screen and (max-width: 767px) {
    .service__sub-title {
        padding-left: 0;
    }
}
.service__sub-title p {
    font-weight: 400;
    font-size: 18px;
    line-height: 1.6;
    color: var(--gray-4);
}
@media only screen and (max-width: 767px) {
    .service__sub-title p {
        font-size: 16px;
        margin-bottom: 20px;
    }
}
.service__section-title-2 {
    padding-bottom: 50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .service__section-title-2 {
        padding-bottom: 35px;
    }
}
@media only screen and (max-width: 767px) {
    .service__section-title-2 {
        padding-bottom: 25px;
    }
}
.service__section-title-3 {
    height: 100%;
    position: relative;
}
@media only screen and (max-width: 767px) {
    .service__section-title-3 {
        padding-bottom: 30px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .service__section-title-3 {
        padding-bottom: 30px;
    }
}
.service__btn {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .service__btn {
        text-align: left;
        display: inherit;
        margin-bottom: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .service__btn {
        display: inherit;
        margin-bottom: 30px;
    }
}
.service__shape-1 {
    position: absolute;
    left: 0;
    top: 0;/*
  -webkit-animation: leftshape infinite 15s;
		  animation: leftshape infinite 15s;*/
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
    .service__shape-1 {
        margin-left: -30px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .service__shape-1 {
        margin-left: -60px;
    }
}
.service__shape-2 {
    position: absolute;
    left: -50px;
    top: 0;
    z-index: 0;/*
  -webkit-animation: leftshape infinite 15s;
		  animation: leftshape infinite 15s;
  -webkit-animation-delay: 7s;
		  animation-delay: 7s;*/
}
.service-details__area {
    overflow: hidden;
}
.service-details__inner {
    max-width: 1180px;
}
.service-details__top {
    padding-bottom: 45px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .service-details__top {
        gap: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .service-details__top {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 20px;
    }
}
.service-details__thumb img {
    width: 100%;
    border-radius: 8px;
    mix-blend-mode: luminosity;
}
.service-details__title {
    font-weight: 400;
    font-size: 40px;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--black-5);
    margin-bottom: 30px;
}
@media only screen and (max-width: 767px) {
    .service-details__title {
        font-size: 30px;
    }
}
.service-details__sub-title {
    font-weight: 400;
    font-size: 30px;
    line-height: 30px;
    text-transform: uppercase;
    color: var(--black-5);
    margin-bottom: 30px;
    padding-top: 20px;
}
.service-details__content p {
    line-height: 30px;
    color: var(--gray-4);
    padding-bottom: 30px;
}
.service-details__content ol {
    margin-bottom: 30px;
}
.service-details__content ol li {
    padding: 0 0 25px 30px;
    position: relative;
}
@media only screen and (max-width: 767px) {
    .service-details__content ol li {
        padding: 0 0 15px 25px;
    }
}
.service-details__content ol li::after {
    position: absolute;
    content: "";
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    background-color: var(--secondary);
    border-radius: 30px;
}
.service-details__content .full_img {
    width: 100%;
    border-radius: 15px;
    margin-bottom: 30px;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);/*
  -webkit-transition: all 0.3s;
  transition: all 0.3s;*/
}
.service-details__content .full_img:hover {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}
.service-details__content ul {
    margin-bottom: 30px;
}
.service-details__content ul li {
    padding: 0 0 25px 30px;
    position: relative;
}
@media only screen and (max-width: 767px) {
    .service-details__content ul li {
        padding: 0 0 15px 25px;
    }
}
.service-details__content ul li::before {
    position: absolute;
    content: "\f00c";
    top: 5px;
    left: 6px;
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    font-size: 10px;
    color: var(--white);
    z-index: 9;
}
.service-details__content ul li::after {
    position: absolute;
    content: "";
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    background-color: var(--secondary);
    border-radius: 30px;
}
.service-details__steps {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 25px 0 60px;
}
@media only screen and (max-width: 767px) {
    .service-details__steps {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 50px;
    }
}
.service-details__step {
    text-align: center;
    position: relative;
}
.service-details__step::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    width: 150%;
    background-repeat: no-repeat;
    background-size: 30%;
}
@media only screen and (max-width: 767px) {
    .service-details__step::after {
        position: unset;
    }
}
.service-details__step:nth-child(odd)::after {
    background-image: url(../img/service/arrow-1.png);
    background-position: 75% 15px;
}
.service-details__step:nth-child(2)::after {
    background-image: url(../img/service/arrow-2.png);
    background-position: 75% 20px;
}
.service-details__step img {
    margin-bottom: 30px;
}
@media only screen and (max-width: 767px) {
    .service-details__step img {
        margin-bottom: 20px;
    }
}
.service-details__step h4 {
    font-weight: 400;
    font-size: 18px;
    line-height: 27px;
    text-transform: uppercase;
    color: var(--black-5);
    padding-bottom: 5px;
}
.service-details__step p {
    padding: 0 40px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .service-details__step p {
        padding: 0 20px;
        line-height: 1.3;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .service-details__step p {
        padding: 0 5px;
        line-height: 1.3;
    }
}

/*----------------------------------------*/
/*  15. TEAM CSS START
/*----------------------------------------*/
.team__slide img {
    width: 100%;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
.team__title-wrapper-2 {
    text-align: center;
    padding-bottom: 70px;
}
@media only screen and (max-width: 767px) {
    .team__title-wrapper-2 {
        padding-bottom: 40px;
    }
}
.team__social {
    position: relative;
}
.team__social ul {
    position: absolute;
    height: 260px;
    width: 70px;
    right: -3rem;
    top: 50%;
    margin-top: -130px;
    background: var(--primary);
    text-align: center;
    padding-top: 20px;/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
    opacity: 0;
}
.team__social ul li a {
    display: inline-block;
    font-size: 22px;
    color: var(--white);
    padding: 10px;
}
.team__social ul li a:hover {
    color: var(--secondary);
}
.team__social:hover ul {
    opacity: 1;
    right: 0;
}
.team__social:hover img {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}
.team__social-2 ul li {
    display: inline-block;
}
.team__social-2 ul li a {
    display: inline-block;
    font-size: 22px;
    color: var(--white);
    padding: 10px;
}
.team__social-2 ul li a:hover {
    color: var(--secondary);
}
.team__slide:hover .team__detail {
    opacity: 1;
}
.team__detail {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: var(--purple-3);
    border-radius: 15px;/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
    background-image: url(../img/thumb/service-hover.png);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    opacity: 0;
}
.team__detail-3 {
    overflow: hidden;
}
.team__detail-3 img {
    border-radius: 15px;
}
.team__info {
    text-align: center;
}
.team__title, .team__title-2 {
    display: inline-block;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 35px 0 16px;
    position: relative;
}
.team__title::after, .team__title-2::after {
    position: absolute;
    content: "";
    width: 0%;
    height: 2px;
    left: 0;
    bottom: 12px;
    background-color: var(--white);/*
  -webkit-transition: all 0.5s;
  transition: all 0.5s;*/
}
.team__title:hover::after, .team__title-2:hover::after {
    width: 100%;
}
.team__title::after, .team__title-2::after {
    background-color: var(--black);
}
.team__title a, .team__title-2 a {
    color: var(--black-darker);
}
.team__title-2::after {
    background-color: var(--white);
}
.team__title-2 a {
    color: var(--white);
}
.team__designation, .team__designation-2 {
    font-family: var(--body-font);
    font-weight: 600;
    font-size: 0.75rem;
    line-height: 1.3;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gray-2);
}
.team__designation-2 {
    color: var(--white);
}
.team__pagination {
    padding-top: 80px;
}
.team-details__img {
    mix-blend-mode: luminosity;
    border-radius: 15px;
}
.team-details__img img {
    width: 100%;
}
.team-details__bio {
    padding-left: 50px;
    padding-top: 45px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .team-details__bio {
        padding-left: 0;
        padding-top: 20px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .team-details__bio {
        padding: 0;
    }
}
@media only screen and (max-width: 767px) {
    .team-details__bio {
        padding-left: 0;
        padding-top: 20px;
    }
}
.team-details__bio .team-details__sub-title {
    padding-bottom: 15px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .team-details__bio .team-details__sub-title {
        padding-bottom: 10px;
    }
}
.team-details__bio p {
    font-size: 15px;
    color: var(--gray-12);
    padding-right: 20%;
    margin-bottom: 55px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .team-details__bio p {
        padding-right: 0;
        margin-bottom: 40px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .team-details__bio p {
        padding-right: 0;
        margin-bottom: 20px;
    }
}
@media only screen and (max-width: 767px) {
    .team-details__bio p {
        margin-bottom: 30px;
        padding-right: 0;
    }
}
.team-details__bio li {
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    color: var(--gray-12);
    padding-bottom: 25px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .team-details__bio li {
        padding-bottom: 15px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .team-details__bio li {
        padding-bottom: 10px;
        font-size: 16px;
    }
}
@media only screen and (max-width: 767px) {
    .team-details__bio li {
        padding-bottom: 10px;
    }
}
.team-details__bio li strong {
    color: var(--black-darker);
    font-weight: 400;
}
.team-details__social {
    text-align: right;
    padding-top: 50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .team-details__social {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        padding-top: 10px;
    }
}
@media only screen and (max-width: 767px) {
    .team-details__social {
        text-align: left;
        padding-top: 30px;
    }
}
.team-details__social li {
    display: inline-block;
    margin-left: 10px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .team-details__social li {
        margin-left: 7px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .team-details__social li {
        margin-bottom: 10px;
    }
}
.team-details__social li a {
    width: 42px;
    height: 42px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: var(--white);
    border-radius: 3px;/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
}
.team-details__social li a:hover {
    opacity: 0.8;
}
.team-details__social li a.facebook {
    background-color: var(--facebook);
}
.team-details__social li a.twitter {
    background-color: var(--twitter);
}
.team-details__social li a.instagram {
    background-color: var(--blue);
}
.team-details__social li a.pinterest {
    background-color: var(--red);
}
.team-details__content {
    padding: 100px 0 70px;
}
@media only screen and (max-width: 767px) {
    .team-details__content {
        padding: 60px 0 40px;
    }
}
.team-details__content .team-details__title, .team-details__content .team-details__sub-title {
    padding-bottom: 30px;
}
@media only screen and (max-width: 767px) {
    .team-details__content .team-details__title, .team-details__content .team-details__sub-title {
        padding-bottom: 20px;
    }
}
.team-details__content p {
    font-family: var(--font-archivo);
    line-height: 28px;
    padding-bottom: 30px;
}
@media only screen and (max-width: 767px) {
    .team-details__content p {
        padding-bottom: 20px;
    }
}
.team-details__title, .team-details__sub-title {
    font-weight: 400;
    font-size: 30px;
    line-height: 30px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--black-dark);
}
.team-details__sub-title {
    font-size: 24px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .team-details__sub-title {
        font-size: 18px;
    }
}
.team-details__designation {
    font-family: var(--body-font);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gray-2);
    margin-bottom: 40px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .team-details__designation {
        margin-bottom: 15px;
    }
}
@media only screen and (max-width: 767px) {
    .team-details__designation {
        margin-bottom: 25px;
    }
}
@media only screen and (max-width: 767px) {
    .team-details__feature {
        padding-bottom: 50px;
    }
}
.team-details__feature .team-details__sub-title {
    padding-bottom: 30px;
}
@media only screen and (max-width: 767px) {
    .team-details__feature .team-details__sub-title {
        padding-bottom: 20px;
    }
}
.team-details__feature p {
    font-family: var(--font-archivo);
    color: var(--gray-4);
    line-height: 26px;
    padding-right: 80px;
    padding-bottom: 40px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .team-details__feature p {
        padding-right: 0;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .team-details__feature p {
        padding-right: 0;
    }
}
@media only screen and (max-width: 767px) {
    .team-details__feature p {
        padding-right: 0;
        padding-bottom: 20px;
    }
}
.team-details__feature li {
    font-weight: 400;
    font-size: 15px;
    line-height: 26px;
    color: var(--black-5);
    padding-left: 40px;
    margin-bottom: 10px;
    position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .team-details__feature li {
        padding-left: 25px;
        font-size: 14px;
    }
}
.team-details__feature li::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/icon/check-blue.png);
    background-repeat: no-repeat;
    background-position: 0 7px;
}

/*----------------------------------------*/
/*  16. PORTFOLIO CSS START
/*----------------------------------------*/
.portfolio__area {
    overflow: hidden;
}
.portfolio__row {
    margin-right: -590px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
    .portfolio__row {
        margin-right: -380px;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .portfolio__row {
        margin-right: -280px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .portfolio__row {
        margin-right: -160px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .portfolio__row {
        margin-right: calc(-0.5 * var(--bs-gutter-x));
    }
}
@media only screen and (max-width: 767px) {
    .portfolio__row {
        margin-right: calc(-0.5 * var(--bs-gutter-x));
    }
}
.portfolio__top-wrapper {
    padding-bottom: 75px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .portfolio__top-wrapper {
        padding-bottom: 40px;
    }
}
@media only screen and (max-width: 767px) {
    .portfolio__top-wrapper {
        padding-bottom: 40px;
    }
}
.portfolio__img {
    width: 100%;
    border-radius: 15px;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
.portfolio__btns {
    text-align: right;
    padding-top: 55px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .portfolio__btns {
        text-align: left;
    }
}
@media only screen and (max-width: 767px) {
    .portfolio__btns {
        padding-top: 30px;
        text-align: left;
    }
}
.portfolio__btns button {
    color: var(--gray-4);
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background: var(--gray-3);
    border-radius: 5px;
    padding: 12px 20px 10px;
    margin-left: 4px;
    border: none;/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
    z-index: 9;
    overflow: hidden;
    position: relative;
}
.portfolio__btns button span {
    position: absolute;
    width: 0px;
    height: 0px;
    background-color: var(--primary);
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);/*
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;*/
    z-index: -1;
}
.portfolio__btns button:hover {
    color: var(--white);
}
.portfolio__btns button:hover span {
    width: 400px;
    height: 400px;
}
.portfolio__btns button:hover::after {
    background-color: rgba(91, 25, 200, 0.5);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .portfolio__btns button {
        padding: 12px 18px 10px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .portfolio__btns button {
        padding: 12px 10px 10px;
        margin-left: 0;
        margin-bottom: 4px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .portfolio__btns button {
        padding: 12px 15px 10px;
    }
}
@media only screen and (max-width: 767px) {
    .portfolio__btns button {
        margin-bottom: 7px;
    }
}
.portfolio__btns button.mixitup-control-active {
    background-color: var(--primary);
    color: var(--white);
}
.portfolio__item-inner {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 80% 20%;
    grid-template-columns: 80% 20%;
    padding: 45px 15px;
}
@media only screen and (max-width: 767px) {
    .portfolio__item-inner {
        padding: 20px 10px 40px;
    }
}
.portfolio__title-wrapper {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    padding: 0 15px 70px;
}
@media only screen and (max-width: 767px) {
    .portfolio__title-wrapper {
        padding: 0 15px 40px;
    }
}
.portfolio__title-wrapper-2 {
    text-align: left;
    padding-bottom: 70px;
}
@media only screen and (max-width: 767px) {
    .portfolio__title-wrapper-2 {
        padding-bottom: 20px;
    }
}
.portfolio__title {
    display: block;
    font-style: normal;
    font-weight: 400;
    font-size: 30px;
    line-height: 2.25rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--white);
    padding-bottom: 20px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
    .portfolio__title {
        font-size: 20px;
    }
}
@media only screen and (max-width: 767px) {
    .portfolio__title {
        font-size: 24px;
    }
}
.portfolio__title-3 {
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--black-darker);
    padding-bottom: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .portfolio__title-3 {
        font-size: 18px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .portfolio__title-3 {
        font-size: 18px;
    }
}
@media only screen and (max-width: 767px) {
    .portfolio__title-3 {
        font-size: 18px;
    }
}
.portfolio__category {
    display: block;
    font-weight: 400;
    font-size: 30px;
    line-height: 2.25rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--white);
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
    .portfolio__category {
        font-size: 20px;
    }
}
@media only screen and (max-width: 767px) {
    .portfolio__category {
        font-size: 24px;
    }
}
.portfolio__category-3 {
    font-family: var(--body-font);
    font-weight: 600;
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gray-2);
}
.portfolio__btn {
    text-decoration: none;
    font-family: var(--heading-font);
    color: var(--white);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-transform: uppercase;/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
}
.portfolio__btn-2 {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 94px;
    height: 94px;
    border-radius: 100%;
    background: var(--secondary);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
}
.portfolio__btn-2 i {
    font-size: 30px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    color: var(--white);
}
.portfolio__btn-2::after {
    position: absolute;
    content: "";
    width: 140px;
    height: 140px;
    left: -23px;
    top: -23px;
    border: 2px solid var(--secondary);
    border-radius: 100%;
}
.portfolio__btn-3 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 72px;
    height: 72px;
    background-color: var(--white);
    border: 1px solid var(--gray-3);
    border-radius: 5px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
    margin-left: auto;
}
.portfolio__btn-3 i {
    color: var(--gray-2);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    font-size: 24px;
}
.portfolio__btn-3:hover {
    background-color: var(--secondary);
}
.portfolio__btn-3:hover i {
    color: var(--white);
}
.portfolio__btn-top {
    text-align: right;
    margin-top: 45px;
}
@media only screen and (max-width: 767px) {
    .portfolio__btn-top {
        text-align: left;
        margin-top: 0;
        margin-bottom: 30px;
    }
}
.portfolio__btn-top a i {
    color: var(--pink);
    font-size: 18px;
    margin-right: 5px;
}
.portfolio__slide {
    position: relative;/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
}
.portfolio__slide:hover .portfolio__img {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}
.portfolio__content {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);/*
  -webkit-transition: all 0.7s ease;
  transition: all 0.7s ease;*/
    opacity: 0;
    visibility: hidden;
}
.portfolio__info {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    background-image: url(../img/portfolio/blue-shape.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: left 120%;
    z-index: 9;
    padding-bottom: 2.75rem;
    border-radius: 15px;/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
    opacity: 0;
}
.portfolio__info::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(../img/portfolio/orange-shape.png);
    background-size: auto;
    background-repeat: no-repeat;
    background-position: 200% bottom;
    z-index: -1;
    border-radius: 15px;/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-transition-delay: 0.2s;
		  transition-delay: 0.2s;*/
}
.portfolio__info:hover {
    background-position: left 100%;
    opacity: 1;
}
.portfolio__info:hover::after {
    background-position: 100% bottom;
}
.portfolio__info:hover .portfolio__content {
    -webkit-transform: translateY(0);
    transform: translateY(0);/*
  -webkit-transition-delay: 0.4s;
		  transition-delay: 0.4s;*/
    opacity: 1;
    visibility: visible;
}
.portfolio__pagination {
    padding-top: 105px;
}
.portfolio__pagination-2 {
    padding-top: 10px;
}
.portfolio__pagination-2 li a {
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0.02em;
    color: var(--gray-13);
    width: 49px;
    height: 49px;
    background: var(--pink-3);
    border: 1px solid var(--border-2);
    border-radius: 5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 5px;
    position: relative;
    z-index: 9;
    overflow: hidden;
}
.portfolio__pagination-2 li a span {
    position: absolute;
    width: 0px;
    height: 0px;
    background: var(--secondary);
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);/*
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;*/
    z-index: -1;
}
.portfolio__pagination-2 li a:hover {
    color: var(--white);
}
.portfolio__pagination-2 li a:hover span {
    width: 300px;
    height: 300px;
}
.portfolio__pagination-2 li a:not([href]):not([class]) {
    background-color: transparent;
    border: none;
}
.portfolio__pagination-2 li a.active {
    background-color: var(--secondary);
    color: var(--white);
}
.portfolio__item-2 {
    position: relative;
    margin-bottom: 30px;/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
}
.portfolio__item-2::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 15px;/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
}
.portfolio__item-2:hover::after {
    position: inherit;
}
.portfolio__item-2:hover .portfolio__btn-2 {
    opacity: 1;
    visibility: visible;
    -webkit-transform: scale(1);
    transform: scale(1);
}
.portfolio__item-2:hover .portfolio__img {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}
.portfolio__item-3 {
    padding-right: 35px;/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .portfolio__item-3 {
        padding-right: 0;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .portfolio__item-3 {
        padding-right: 0;
    }
}
@media only screen and (max-width: 767px) {
    .portfolio__item-3 {
        padding-right: 0;
    }
}
.portfolio__item-3:hover .portfolio__img {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}
.portfolio__item-3:hover .portfolio__btn-3 {
    background-color: var(--secondary);
}
.portfolio__item-3:hover .portfolio__btn-3 i {
    color: var(--white);
}
.portfolio__link-2 {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.portfolio__list-main .portfolio__item-3 {
    margin-bottom: 12px;
    padding-right: 0;
}

/*----------------------------------------*/
/*  17. BLOG CSS START
/*----------------------------------------*/
.blog__area {
    position: relative;
    overflow: hidden;
}
.blog__area-2 {
    padding-top: 360px;
}
@media only screen and (max-width: 767px) {
    .blog__area-2 {
        padding-top: 310px;
    }
}
.blog__title-wrapper {
    text-align: center;
    padding-bottom: 73px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .blog__title-wrapper {
        padding-bottom: 50px;
    }
}
@media only screen and (max-width: 767px) {
    .blog__title-wrapper {
        padding-bottom: 40px;
    }
}
.blog__title-wrapper-2 {
    padding-bottom: 70px;
}
@media only screen and (max-width: 767px) {
    .blog__title-wrapper-2 {
        padding-bottom: 30px;
    }
}
.blog__btn-wrapper-2 {
    text-align: right;
    padding-top: 0;
}
@media only screen and (max-width: 767px) {
    .blog__btn-wrapper-2 {
        text-align: left;
        padding-top: 0;
        margin-bottom: 30px;
    }
}
.blog__item {
    background-color: var(--white);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .blog__item {
        margin-bottom: 30px;
    }
}
.blog__content {
    padding: 25px 20px 53px;
    position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .blog__content {
        padding: 20px 0px 50px;
    }
}
@media only screen and (max-width: 767px) {
    .blog__content {
        padding: 20px 5px 50px;
    }
}
.blog__content-lg {
    padding: 35px 40px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .blog__content-lg {
        padding: 35px 40px 50px 35px;
    }
}
@media only screen and (max-width: 767px) {
    .blog__content-lg {
        padding: 20px 5px 50px;
    }
}
.blog__content-2 {
    padding: 25px 20px 30px;
}
.blog__content-3 {
    padding: 25px 30px 35px;
    position: relative;
}
.blog__content-4 {
    padding-bottom: 60px;
}
.blog__content-4 p {
    color: var(--black);
    padding-bottom: 40px;
}
.blog__img, .blog__img-2 {
    width: 100%;
    /*
  -webkit-filter: grayscale(1);
		  filter: grayscale(1);
      */
}
.blog__img-2 {
    border-radius: 5px 5px 0 0;
}
.blog__title {
    font-family: var(--heading-font);
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.2;
    text-transform: uppercase;/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
    color: var(--black-light);
    padding-bottom: 25px;
}
.blog__title:hover {
    text-decoration: underline;
    color: var(--secondary);
}
.blog__title-lg {
    font-family: var(--heading-font);
    font-style: normal;
    font-weight: 400;
    font-size: 30px;
    line-height: 1.2;
    text-transform: uppercase;/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
    padding-bottom: 30px;
    color: var(--black-light);
}
.blog__title-lg:hover {
    text-decoration: underline;
    color: var(--secondary);
}
@media only screen and (max-width: 767px) {
    .blog__title-lg {
        font-size: 24px;
    }
}
.blog__title-2 {
    font-family: var(--heading-font);
    font-style: normal;
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 2rem;
    text-transform: none;
    /*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  */
}
.blog__title-2:hover {
    text-decoration: underline;
    color: var(--secondary);
}
.blog__title-3 {
    font-family: var(--heading-font);
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.2;
    text-transform: uppercase;/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
    line-height: 1.4;
    color: var(--black-dark);
    padding-bottom: 25px;
}
.blog__title-3:hover {
    text-decoration: underline;
    color: var(--secondary);
}
.blog__title-4 {
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 2rem;
    color: var(--black);
    /*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
}
.blog__title-4:hover {
    color: var(--secondary);
    /*text-decoration: underline;*/
}
.blog__excerpt {
    padding-bottom: 45px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .blog__excerpt {
        padding-bottom: 20px;
    }
}
@media only screen and (max-width: 767px) {
    .blog__excerpt {
        padding-bottom: 20px;
    }
}
.blog__excerpt p {
    font-family: var(--font-archivo);
    font-size: 14px;
    line-height: 1.6;
    color: var(--gray-4);
    padding-right: 60px;
}
.blog__excerpt-2 {
    padding-top: 20px;
}
.blog__excerpt-2 p {
    font-family: var(--font-archivo);
    font-size: 15px;
    line-height: 1.6;
    color: var(--gray-4);
}
.blog__category {
    padding-bottom: 25px;
}
.blog__category li {
    display: inline;
}
.blog__category li a {
    font-size: 12px;
    font-style: normal;
    line-height: 1.5;
    text-align: center;
    text-transform: uppercase;
    display: inline-block;
    color: var(--white);
    background-color: var(--secondary);
    padding: 4px 16px;/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
    font-family: var(--font-archivo);
    font-weight: 700;
    letter-spacing: 0.05em;
    border-radius: 3px;
    position: relative;
    z-index: 9;
    overflow: hidden;
}
.blog__category li a span {
    position: absolute;
    width: 0px;
    height: 0px;
    background: var(--primary);
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);/*
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;*/
    z-index: -1;
}
.blog__category li a:hover span {
    width: 500px;
    height: 500px;
}
.blog__category-2 {
    position: absolute;
    left: 20px;
    top: 0;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}
.blog__category-2 li {
    display: inline;
}
.blog__category-2 li a {
    font-size: 12px;
    font-style: normal;
    line-height: 1.5;
    text-align: center;
    text-transform: uppercase;
    display: inline-block;
    color: var(--white);
    background-color: var(--secondary);
    padding: 4px 16px;/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
    padding: 8px 24px;
    font-family: var(--font-poppins);
    font-weight: 500;
    letter-spacing: 0.18em;
    position: relative;
    z-index: 9;
    overflow: hidden;
}
.blog__category-2 li a span {
    position: absolute;
    width: 0px;
    height: 0px;
    background: var(--primary);
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);/*
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;*/
    z-index: -1;
}
.blog__category-2 li a:hover span {
    width: 500px;
    height: 500px;
}
.blog__meta, .blog__meta-3, .blog__meta-lg {
    font-family: var(--font-archivo);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gray-5);
    padding-bottom: 20px;
}
@media only screen and (max-width: 767px) {
    .blog__meta, .blog__meta-3, .blog__meta-lg {
        padding-bottom: 10px;
    }
}
.blog__meta-lg {
    padding-bottom: 30px;
}
@media only screen and (max-width: 767px) {
    .blog__meta-lg {
        padding-bottom: 10px;
    }
}
.blog__meta-3 {
    font-size: 12px;
    letter-spacing: 0.18em;
}
.blog__meta-list {
    margin: 20px 0 10px;
}
@media only screen and (max-width: 767px) {
    .blog__meta-list {
        margin: 20px 0 0;
    }
}
.blog__meta-list li {
    display: inline;
    padding-right: 50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .blog__meta-list li {
        padding-right: 20px;
    }
}
@media only screen and (max-width: 767px) {
    .blog__meta-list li {
        padding-right: 5px;
        display: inline-block;
        margin-bottom: 10px;
    }
}
.blog__meta-list li a {
    display: inline-block;
    font-weight: 600;
    font-size: 14px;
    line-height: 30px;
    letter-spacing: 0.05em;
    color: var(--gray-2);
}
.blog__meta-list li a i {
    color: var(--secondary);
    padding-right: 5px;
    font-size: 16px;/*
  -webkit-transition: all 0.3s;
  transition: all 0.3s;*/
}
.blog__meta-list li a:hover {
    color: var(--secondary);
}
.blog__meta-list li a:hover i {
    color: var(--primary);
}
.blog__link, .blog__link-3 {
    font-family: var(--font-archivo);
    font-weight: 600;
    font-size: 12px;
    line-height: 22px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--black-dark);
    position: relative;
    vertical-align: bottom;
}
.blog__link i, .blog__link-3 i {
    font-size: 14px;
    vertical-align: middle;/*
  -webkit-transition: all 0.3s;
  transition: all 0.3s;*/
}
.blog__link:hover i, .blog__link-3:hover i {
    margin-left: 5px;
}
.blog__link-3 {
    font-size: 12px;
}
.blog__link-3:hover::after {
    border-color: var(--secondary);
}
.blog__shape-1 {
    position: absolute;
    right: 0;
    top: 300px;
    z-index: 1;/*
  -webkit-animation: leftshape infinite 15s;
		  animation: leftshape infinite 15s;*/
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .blog__shape-1 {
        top: 30px;
    }
}
.blog__shape-2 {
    position: absolute;
    right: 0;
    top: 600px;
    z-index: 0;/*
  -webkit-animation: leftshape infinite 15s;
		  animation: leftshape infinite 15s;
  -webkit-animation-delay: 7s;
		  animation-delay: 7s;*/
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .blog__shape-2 {
        top: 0;
    }
}
.blog__shape-3 {
    position: absolute;
    right: 0;
    top: 0;/*
  -webkit-animation: rightshape infinite 15s;
		  animation: rightshape infinite 15s;*/
}
.blog__shape-4 {
    position: absolute;
    right: 0;
    top: 200px;/*
  -webkit-animation: rightshape infinite 15s;
		  animation: rightshape infinite 15s;
  -webkit-animation-delay: 7s;
		  animation-delay: 7s;*/
}
.blog__pagination {
    padding-top: 100px;
    margin-top: 40px;
    border-top: 1px solid var(--pink-3);
}
.blog__sidebar {
    padding-left: 35px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .blog__sidebar {
        padding-left: 0;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .blog__sidebar {
        padding-left: 0;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .blog__sidebar {
        padding-left: 0;
    }
}
@media only screen and (max-width: 767px) {
    .blog__sidebar {
        padding-left: 0;
    }
}
.blog-details__top {
    padding-bottom: 25px;
}
/*
.blog-details__top ul li:first-child a {
  background-color: var(--secondary);
  color: var(--white);
}
.blog-details__top ul li:first-child a:hover {
  background-color: var(--primary);
}
*/
.blog-details__top ul li a {
    padding: 0 10px;
    border-radius: 5px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .blog-details__top ul li a {
        padding: 0 5px;
    }
}
.blog-details__title {
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 3rem;
    color: var(--black);
    padding-bottom: 10px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .blog-details__title {
        font-size: 55px;
        line-height: 1.2;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .blog-details__title {
        font-size: 48px;
        line-height: 52px;
    }
}
@media only screen and (max-width: 767px) {
    .blog-details__title {
        font-size: 36px;
        line-height: 40px;
    }
}
.blog-details__content h1,
.blog-details__content h2 {
    font-weight: 400;
    line-height: 30px;
    text-transform: uppercase;
    color: var(--black-darker);
    font-size: 28px;
    padding-bottom: 48px;
}
@media only screen and (max-width: 767px) {
    .blog-details__content h1,
    .blog-details__content h2 {
        padding-bottom: 25px;
    }
}
.blog-details__content h3 {
    font-weight: 400;
    line-height: 30px;
    text-transform: uppercase;
    color: var(--black-darker);
    font-size: 24px;
    padding-bottom: 40px;
}
@media only screen and (max-width: 767px) {
    .blog-details__content h3 {
        padding-bottom: 20px;
    }
}
.blog-details__content h4 {
    font-weight: 400;
    line-height: 30px;
    text-transform: uppercase;
    color: var(--black-darker);
    font-size: 22px;
    padding-bottom: 40px;
}
@media only screen and (max-width: 767px) {
    .blog-details__content h4 {
        padding-bottom: 20px;
    }
}
.blog-details__content h5 {
    font-weight: 400;
    line-height: 30px;
    text-transform: uppercase;
    color: var(--black-darker);
    font-size: 20px;
    padding-bottom: 30px;
}
@media only screen and (max-width: 767px) {
    .blog-details__content h5 {
        padding-bottom: 20px;
    }
}
.blog-details__content h6 {
    font-weight: 400;
    line-height: 30px;
    text-transform: uppercase;
    color: var(--black-darker);
    font-size: 18px;
    padding-bottom: 30px;
}
@media only screen and (max-width: 767px) {
    .blog-details__content h6 {
        padding-bottom: 20px;
    }
}
.blog-details__content p {
    line-height: 1.9rem;
    font-size: 1.2rem;
    color: var(--black);
    padding-bottom: 30px;
    max-width: 800px;
}
@media only screen and (max-width: 767px) {
    .blog-details__content p {
        padding-bottom: 20px;
    }
}
.blog-details__content img {
    max-width: 100%;
    margin-bottom: 50px;
    border-radius: 15px;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}
@media only screen and (max-width: 767px) {
    .blog-details__content img {
        margin-bottom: 30px;
    }
}
.blog-details__content strong {
    font-weight: 500;
}
.blog-details__content a {
    color: var(--secondary);
    font-weight: 500;/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
}
.blog-details__content a:hover {
    color: var(--primary);
}
.blog-details__content ul {
    margin-bottom: 30px;
}
.blog-details__content ul li {
    padding: 0 0 25px 30px;
    position: relative;
}
@media only screen and (max-width: 767px) {
    .blog-details__content ul li {
        padding: 0 0 15px 25px;
    }
}
.blog-details__content ul li::before {
    position: absolute;
    content: "\f00c";
    top: 5px;
    left: 6px;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 10px;
    color: var(--white);
    z-index: 9;
}
.blog-details__content ul li::after {
    position: absolute;
    content: "";
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    background-color: var(--secondary);
    border-radius: 30px;
}
.blog-details__content ol {
    margin-bottom: 30px;
}
.blog-details__content ol li {
    padding: 0 0 25px 30px;
    position: relative;
}
@media only screen and (max-width: 767px) {
    .blog-details__content ol li {
        padding: 0 0 15px 25px;
    }
}
.blog-details__content ol li::after {
    position: absolute;
    content: "";
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    background-color: var(--secondary);
    border-radius: 30px;
}
.blog-details__content iframe,
.blog-details__content video {
    width: 100%;
    margin-bottom: 50px;
    border-radius: 15px;
}
.blog-details__content blockquote {
    position: relative;
    padding-left: 20px;
    margin-bottom: 65px;
}
.blog-details__content blockquote::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background-color: var(--secondary);
}
.blog-details__content blockquote p {
    line-height: 1.5;
}
.blog-details__content blockquote p:last-child {
    padding-bottom: 0;
}
.blog-details__content .thumb-col-2 {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 50px 1fr;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 50px;
    margin-top: 25px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .blog-details__content .thumb-col-2 {
        grid-column-gap: 20px;
    }
}
@media only screen and (max-width: 767px) {
    .blog-details__content .thumb-col-2 {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }
}
.blog-details__content .thumb-col-2 img {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    width: 100%;
}
.blog-details__tags {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 200px auto;
    grid-template-columns: 200px auto;
    border-bottom: 1px solid var(--pink-4);
    padding-bottom: 50px;
    margin-bottom: 40px;
}
@media only screen and (max-width: 767px) {
    .blog-details__tags {
        margin-top: 30px;
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        gap: 20px;
    }
}
.blog-details__tags .tags-title {
    font-weight: 400;
    line-height: 30px;
    text-transform: uppercase;
    color: var(--black-darker);
    font-size: 24px;
}
.blog-details__tags .tag-lists li {
    display: inline;
}
.blog-details__tags .tag-lists li a {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    line-height: 26px;
    color: var(--gray-14);
    border: 1px solid var(--white-6);
    border-radius: 5px;
    text-transform: uppercase;
    padding: 3px 25px;
    margin: 0 6px 10px 0;/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
}
.blog-details__tags .tag-lists li a:hover {
    background-color: var(--primary);
    color: var(--white);/*
  -webkit-box-shadow: 0px 5px 7px rgba(98, 34, 204, 0.23);
		  box-shadow: 0px 5px 7px rgba(98, 34, 204, 0.23);*/
}

.sidebar__widget {
    padding: 30px;
    border: 1px solid var(--pink-4);
    margin-bottom: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .sidebar__widget {
        padding: 30px 10px;
    }
}
.sidebar__widget-title {
    font-weight: 400;
    font-size: 22px;
    line-height: 30px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--black-dark);
    padding-bottom: 25px;
}
.sidebar__widget-search {
    position: relative;
}
.sidebar__widget-search input {
    width: 100%;
    height: 60px;
    background: var(--white-5);
    border: 1px solid var(--white-6);
    border-radius: 5px;
    font-weight: 400;
    font-size: 14px;
    color: var(--gray-14);
    padding: 0 50px 0 20px;
    outline: none;
}
.sidebar__widget-search button {
    position: absolute;
    right: 15px;
    top: 18px;
    background: transparent;
    border: none;/*
  -webkit-transition: all 0.3s;
  transition: all 0.3s;*/
}
.sidebar__widget-search button:hover {
    color: var(--secondary);
}
.sidebar__widget-category li {
    padding-bottom: 15px;
}
.sidebar__widget-category li:last-child {
    padding-bottom: 0;
}
.sidebar__widget-category li a {
    font-size: 14px;
    line-height: 26px;
    color: var(--gray-14);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border: 1px solid var(--white-6);
    border-radius: 5px;
    padding: 9px 15px;/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
}
.sidebar__widget-category li a:hover {
    color: var(--white);
    background: var(--purple-3);
    border: 1px solid var(--purple-3);/*
  -webkit-box-shadow: 0px 5px 5px rgba(98, 34, 204, 0.26);
		  box-shadow: 0px 5px 5px rgba(98, 34, 204, 0.26);*/
}
.sidebar__widget-pages li {
    padding-bottom: 12px;
}
.sidebar__widget-pages li:last-child {
    padding-bottom: 0;
}
.sidebar__widget-pages li a {
    font-size: 14px;
    line-height: 26px;
    color: var(--gray-14);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border-radius: 5px;
    padding: 5px 15px 5px 20px;/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
    position: relative;
}
.sidebar__widget-pages li a:hover {
    color: var(--purple-3);
}
.sidebar__widget-pages li a::before {
    position: absolute;
    content: "\f054";
    font-family: "Font Awesome 5 Pro";
    left: 0;
    font-size: 12px;
}
.sidebar__widget-rp .rp__item {
    padding-bottom: 20px;
}
.sidebar__widget-rp .rp__item:last-child {
    padding-bottom: 0;
}
.sidebar__widget-rp .rp__thumb img {
    width: 97px;
    margin-right: 15px;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);/*
  -webkit-transition: all 0.3s;
  transition: all 0.3s;*/
}
.sidebar__widget-rp .rp__thumb img:hover {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .sidebar__widget-rp .rp__thumb img {
        width: 80px;
    }
}
.sidebar__widget-rp .rp__date {
    font-size: 12px;
    line-height: 14px;
    color: var(--gray-14);
    padding: 3px 0 8px;
}
.sidebar__widget-rp .rp__title {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    color: var(--black-dark);
}
.sidebar__widget-tags li {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
}
.sidebar__widget-tags li:last-child a {
    margin: 0;
}
.sidebar__widget-tags li a {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    line-height: 26px;
    color: var(--gray-14);
    border: 1px solid var(--white-6);
    border-radius: 5px;
    text-transform: uppercase;
    padding: 5px 25px 3px;
    margin: 0 6px 10px 0;/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
    overflow: hidden;
    position: relative;
    z-index: 9;
}
.sidebar__widget-tags li a span {
    position: absolute;
    width: 0px;
    height: 0px;
    background: var(--purple-3);
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);/*
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;*/
    z-index: -1;
}
.sidebar__widget-tags li a:hover {
    color: var(--white);
}
.sidebar__widget-tags li a:hover span {
    width: 300px;
    height: 300px;
}

.recent-post__top {
    border-top: 1px solid var(--pink-4);
}
.recent-post__sec-title {
    font-weight: 400;
    line-height: 30px;
    text-transform: uppercase;
    color: var(--black-darker);
    font-size: 24px;
    padding-top: 20px;
    padding-bottom: 40px;
}
@media only screen and (max-width: 767px) {
    .recent-post__sec-title {
        padding-top: 40px;
    }
}
.recent-post__items {
    border-bottom: 1px solid var(--pink-4);
    margin-bottom: 60px;
    padding-bottom: 50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .recent-post__items {
        margin-bottom: 40px;
    }
}
@media only screen and (max-width: 767px) {
    .recent-post__items {
        padding-bottom: 0;
        margin-bottom: 40px;
    }
}
@media only screen and (max-width: 767px) {
    .recent-post__item {
        margin-bottom: 40px;
    }
}
.recent-post__thumb {
    position: relative;
    margin-bottom: 30px;
}
.recent-post__thumb::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: url(../img/blog/recent-post/overly.png);
    border-radius: 15px;
    mix-blend-mode: color;
}
.recent-post__thumb img {
    width: 100%;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    border-radius: 15px;
}
.recent-post__title {
    font-weight: 400;
    font-size: 24px;
    line-height: 35px;
    text-transform: uppercase;
    color: var(--black-7);
    padding-right: 50px;/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
    padding-bottom: 20px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .recent-post__title {
        padding-right: 20px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .recent-post__title {
        font-size: 20px;
        line-height: 1.2;
        padding-right: 0;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .recent-post__title {
        font-size: 16px;
        line-height: 1.3;
        padding-right: 0;
    }
}
@media only screen and (max-width: 767px) {
    .recent-post__title {
        font-size: 20px;
        padding-right: 0;
    }
}
.recent-post__title:hover {
    color: var(--secondary);
    text-decoration: underline;
}
.recent-post__category {
    font-weight: 700;
    font-size: 11px;
    line-height: 13px;
    text-align: center;
    text-transform: uppercase;
    color: var(--white);
    background-color: var(--secondary);
    display: inline-block;
    padding: 5px 13px;
    border-radius: 5px;
    margin-bottom: 20px;
}
.recent-post__category:hover {
    background-color: var(--primary);
    color: var(--white);
}
.recent-post__date {
    font-weight: 400;
    font-size: 15px;
    line-height: 29px;
    color: var(--gray-15);
}
.recent-post__date i {
    color: var(--black-dark);
    margin-right: 3px;
}

.comment__top {
    padding-bottom: 60px;
}
.comment__title, .comment__share-title {
    font-weight: 400;
    font-size: 24px;
    line-height: 30px;
    text-transform: uppercase;
    color: var(--black-darker);
}
.comment__share {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 5px;
    margin-top: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .comment__share {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .comment__share {
        margin-bottom: 50px;
        margin-top: 0;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: start;
    }
}
@media only screen and (max-width: 767px) {
    .comment__share {
        margin-bottom: 50px;
        margin-top: 0;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: start;
    }
}
.comment__share ul li {
    display: inline;
    padding-left: 20px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .comment__share ul li {
        padding-left: 12px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .comment__share ul li {
        padding-left: 6px;
    }
}
.comment__share ul li:first-child a {
    color: var(--linkedin);
}
.comment__share ul li:nth-child(2) a {
    color: var(--red);
}
.comment__share ul li:last-child a {
    color: var(--twitter);
}
.comment__share ul li a {
    display: inline-block;
    font-size: 18px;
    padding: 0 5px;
    color: var(--facebook);
}
.comment__items {
    border-bottom: 1px solid var(--pink-4);
    padding-bottom: 20px;
    margin-bottom: 60px;
}
@media only screen and (max-width: 767px) {
    .comment__items {
        margin-bottom: 45px;
    }
}
.comment__item {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 80px 30px auto;
    grid-template-columns: 80px auto;
    grid-column-gap: 30px;
    margin-bottom: 70px;
}
@media only screen and (max-width: 767px) {
    .comment__item {
        -ms-grid-columns: 60px 20px auto;
        grid-template-columns: 60px auto;
        grid-column-gap: 20px;
        margin-bottom: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .comment__item img {
        width: 100%;
    }
}
.comment__item p {
    color: var(--gray-14);
    padding-right: 100px;
}
@media only screen and (max-width: 767px) {
    .comment__item p {
        padding-right: 0;
    }
}
.comment__commentor {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 18px;
    line-height: 25px;
    color: var(--black-5);
    padding-top: 10px;
    padding-bottom: 5px;
}
.comment__reply {
    padding-left: 100px;
}
@media only screen and (max-width: 767px) {
    .comment__reply {
        padding-left: 50px;
    }
}
.comment__reply p {
    padding-right: 50px;
}
@media only screen and (max-width: 767px) {
    .comment__reply p {
        padding-right: 0;
    }
}
.comment__date {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 12px;
    line-height: 29px;
    text-transform: uppercase;
    color: var(--secondary);
}

.no-border {
    border: none;
}

/*----------------------------------------*/
/*  18. ABOUT US CSS START
/*----------------------------------------*/
.about__area {
    position: relative;
    overflow: hidden;
}
.about__area .nav-tabs {
    border: none;
}
.about__area-3 {
    position: relative;
}
.about__area-3::before {
    position: absolute;
    content: "";
    width: 22%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: var(--white);
}
@media only screen and (max-width: 767px) {
    .about__area-3::before {
        position: unset;
    }
}
.about__thumb {
    position: relative;
    padding-right: 80px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .about__thumb {
        padding-right: 30px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .about__thumb {
        padding-right: 0;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about__thumb {
        padding-right: 0;
    }
}
@media only screen and (max-width: 767px) {
    .about__thumb {
        padding-right: 0;
    }
}
.about__thumb-2 {
    position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about__thumb-2 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: 100%;
    }
}
.about__img {
    border-radius: 8px;
    /*
  -webkit-filter: grayscale(1);
		  filter: grayscale(1);
      */
    width: 100%;
}
.about__shape-1 {
    -webkit-transform: translate(-30%, 30%);
    transform: translate(-30%, 30%);
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;/*
  -webkit-animation: leftcornershape infinite 10s;
		  animation: leftcornershape infinite 10s;*/
}
.about__shape-2 {
    -webkit-transform: translate(-30%, 30%);
    transform: translate(-30%, 30%);
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;/*
  -webkit-animation: leftcornershape infinite 10s;
		  animation: leftcornershape infinite 10s;
  -webkit-animation-delay: 5s;
		  animation-delay: 5s;*/
}
.about__shape-3 {
    position: absolute;
    right: 0px;
    bottom: 200px;
    z-index: -1;/*
  -webkit-animation: rightshape infinite 15s;
		  animation: rightshape infinite 15s;*/
}
.about__shape-4 {
    position: absolute;
    right: 0px;
    bottom: 105px;
    z-index: -1;/*
  -webkit-animation: rightshape infinite 15s;
		  animation: rightshape infinite 15s;
  -webkit-animation-delay: 7s;
		  animation-delay: 7s;*/
}
.about__content-right {
    /*padding-top: 7px;*/
}
@media only screen and (max-width: 767px) {
    .about__content-right {
        padding-top: 20px;
    }
}

.about__text {
    font-family: var(--body-font);
    font-style: normal;
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.8rem;
    color: var(--black);
    max-width: 530px;
    padding: 1rem 0 1.2rem;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .about__text {
        padding: 20px 0;
        font-size: 1.1rem;
        line-height: 1.55rem;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about__text {
        padding: 15px 0;
        font-size: 1rem;
        line-height: 1.45rem;
    }
}
@media only screen and (max-width: 767px) {
    .about__text {
        padding: 15px 0;
        font-size: 1rem;
        line-height: 1.45rem;
    }
}

.about__text-index {
    font-family: var(--body-font);
    font-style: normal;
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1.85rem;
    color: var(--black);
    max-width: 530px;
    padding: 1rem 0 0.2rem;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .about__text-index {
        padding: 20px 0;
        font-size: 1rem;
        line-height: 1.45rem;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about__text-index {
        padding: 15px 0;
        font-size: 1rem;
        line-height: 1.45rem;
    }
}
@media only screen and (max-width: 767px) {
    .about__text-index {
        padding: 15px 0;
        font-size: 1rem;
        line-height: 1.45rem;
    }
}


.about__text-3 {
    padding: 15px 0 20px;
    max-width: 530px;
}
.about__text-3 p {
    font-family: var(--body-font);
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--gray-4);
    line-height: 1.6;
    padding-bottom: 35px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about__text-3 p {
        padding-bottom: 20px;
    }
}
@media only screen and (max-width: 767px) {
    .about__text-3 p {
        padding-bottom: 20px;
    }
}
.about__tablist {
    background: var(--white);
    border: 1px solid var(--white-2);/*
  -webkit-box-shadow: 0px 29px 42px rgba(175, 181, 199, 0.18);
		  box-shadow: 0px 29px 42px rgba(175, 181, 199, 0.18);*/
    border-radius: 8px;
    margin-bottom: 80px;
}
@media only screen and (max-width: 767px) {
    .about__tablist {
        margin-bottom: 50px;
    }
}
.about__tablist .nav-link {
    padding: 31px 0;
    font-family: var(--heading-font);
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 4rem;
    text-align: center;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--black-dark);
    width: 33.33%;
    position: relative;
    outline: none;
    border: none;
}
.about__tablist .nav-link::before {
    position: absolute;
    content: "";
    width: 0%;
    height: 4px;
    bottom: 0;
    left: 0;
    background-color: var(--secondary);
    border-radius: 12px;/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
}
.about__tablist .nav-link:hover::before {
    width: 100%;
}
@media only screen and (max-width: 767px) {
    .about__tablist .nav-link {
        padding: 10px 0;
        font-size: 18px;
    }
}
.about__tablist .nav-link.active {
    color: var(--black-dark);
    border: none;
    outline: none;
}
.about__tablist .nav-link.active::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 4px;
    bottom: 0px;
    left: 0;
    background-color: var(--secondary);
    border-radius: 12px;
}
.about__tablist .nav-link::after {
    position: absolute;
    content: "";
    width: 2px;
    height: 42px;
    top: 40px;
    right: 0;
    background-color: var(--gray-3);
}
@media only screen and (max-width: 767px) {
    .about__tablist .nav-link::after {
        height: 36px;
        top: 25px;
    }
}
.about__tablist .nav-link:last-child::after {
    position: inherit;
}
.about__tablist .nav-link:hover {
    border-color: transparent;
}
.about__tablist-3 {
    margin-left: 50px;
    margin-top: 60px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about__tablist-3 {
        margin-top: 40px;
        margin-left: 0;
    }
}
@media only screen and (max-width: 767px) {
    .about__tablist-3 {
        margin-top: 40px;
        margin-left: 0;
    }
}
.about__tablist-3 .nav {
    border: none;
}
.about__tablist-3 .nav-link {
    font-family: var(--body-font);
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--gray-4);
    background: var(--gray-3);
    border-radius: 5px;
    border: none;
    padding: 11px 20px 9px;
    margin-right: 32px;/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
    position: relative;
    z-index: 9;
    overflow: hidden;
}
.about__tablist-3 .nav-link span {
    position: absolute;
    width: 0px;
    height: 0px;
    background: var(--primary);
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);/*
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;*/
    z-index: -1;
}
.about__tablist-3 .nav-link:hover {
    color: var(--white);
}
.about__tablist-3 .nav-link:hover span {
    width: 400px;
    height: 400px;
}
.about__tablist-3 .nav-link:last-child {
    margin-right: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about__tablist-3 .nav-link {
        margin-right: 10px;
    }
}
@media only screen and (max-width: 767px) {
    .about__tablist-3 .nav-link {
        font-size: 14px;
        margin-right: 15px;
        padding: 11px 13px 9px;
    }
}
.about__tablist-3 .nav-link.active {
    background-color: var(--primary);
    color: var(--white);
}
.about__list {
    padding-bottom: 40px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .about__list {
        padding-bottom: 20px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about__list {
        padding-bottom: 20px;
    }
}
.about__list li {
    font-family: var(--body-font);
    font-style: normal;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--black);
    padding-left: 40px;
    padding-bottom: 18px;
    position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about__list li {
        padding-left: 30px;
        padding-bottom: 10px;
    }
}
.about__list li::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: url(../img/check-theme.png);
    background-position: 0 5px;
    background-repeat: no-repeat;
}
.about__content-2 {
    padding-left: 55px;
    padding-top: 15px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .about__content-2 {
        padding-left: 10px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about__content-2 {
        padding-left: 0;
    }
}
@media only screen and (max-width: 767px) {
    .about__content-2 {
        padding-left: 0;
    }
}
.about__content-right-3 {
    margin-left: 55px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about__content-right-3 {
        margin-left: 0;
    }
}
@media only screen and (max-width: 767px) {
    .about__content-right-3 {
        margin-left: 0;
    }
}
.about__experience {
    position: absolute;
    width: 246px;
    height: 246px;
    top: 50%;
    left: 50%;
    background-color: var(--secondary);
    border-radius: 100%;
    margin-left: -123px;
    margin-top: -123px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .about__experience {
        width: 180px;
        height: 180px;
        margin-left: -90px;
        margin-top: -90px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about__experience {
        width: 180px;
        height: 180px;
        margin-left: -90px;
        margin-top: -90px;
    }
}
@media only screen and (max-width: 767px) {
    .about__experience {
        width: 180px;
        height: 180px;
        margin-left: -90px;
        margin-top: -90px;
    }
}
.about__experience h4 {
    max-width: 100px;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.5;
    text-align: center;
    color: var(--white);
    text-transform: none;
}
.about__experience h4 span {
    font-size: 90px;
    line-height: 1.2;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .about__experience h4 span {
        font-size: 55px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about__experience h4 span {
        font-size: 55px;
    }
}
@media only screen and (max-width: 767px) {
    .about__experience h4 span {
        font-size: 55px;
    }
}
.about__btn li {
    display: inline;
    padding-right: 60px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about__btn li {
        padding-right: 20px;
    }
}
@media only screen and (max-width: 767px) {
    .about__btn li {
        padding-right: 20px;
    }
}
.about__btn li:last-child {
    padding-right: 0;
}
.about__btn li a {
    display: inline-block;
    font-family: var(--heading-font);
    font-style: normal;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-transform: none;
    color: var(--black);
    position: relative;
    padding-right: 25px;
}
.about__btn li a:hover {
    color: var(--secondary);
    text-decoration: underline;
}
/*
.about__btn li a:hover i {
  right: -5px;
}
*/
.about__btn li a i {/*
  -webkit-transition: all 0.3s;
  transition: all 0.3s;*/
    position: absolute;
    top: 5px;
    right: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about__btn li a i {
        right: 0;
    }
}
.about__top {
    padding-bottom: 60px;
    position: relative;
}
.about__tabcontent-3 {
    position: relative;
}
.about__tabcontent-3 .scroll-down {
    left: inherit;
    right: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .about__tabcontent-3 .scroll-down {
        right: -44px;
    }
}

/*----------------------------------------*/
/*  19. COUNTER CSS START
/*----------------------------------------*/
.counter__area {
    background-image: url(../img/bg/counter-bg.png);
    background-color: var(--purple-3);
    padding: 100px 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .counter__area {
        padding: 60px 0;
    }
}
@media only screen and (max-width: 767px) {
    .counter__area {
        padding: 50px 0;
    }
}
.counter__item {
    position: relative;
    padding: 50px 60px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .counter__item {
        padding: 30px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .counter__item {
        padding: 20px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .counter__item {
        padding: 30px 0;
    }
}
@media only screen and (max-width: 767px) {
    .counter__item {
        padding: 30px;
        text-align: center;
    }
}
.counter__item::after {
    position: absolute;
    content: "";
    width: 1px;
    height: 285px;
    background: rgba(236, 238, 243, 0.2);
    top: 0;
    right: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .counter__item::after {
        height: 250px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .counter__item::after {
        height: 235px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .counter__item::after {
        height: 180px;
        top: 20px;
    }
}
@media only screen and (max-width: 767px) {
    .counter__item::after {
        position: unset;
    }
}
.counter__item.last::after {
    position: inherit;
}
.counter__item img {
    margin-bottom: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .counter__item img {
        margin-bottom: 10px;
    }
}
@media only screen and (max-width: 767px) {
    .counter__item img {
        margin-bottom: 5px;
    }
}
.counter__item p {
    font-family: var(--font-archivo);
    font-style: normal;
    font-weight: 400;
    font-size: 0.938rem;
    line-height: 1.5;
    text-transform: capitalize;
    color: var(--white);
}
.counter__number {
    font-family: var(--heading-font);
    font-style: normal;
    font-weight: 400;
    font-size: 48px;
    line-height: 1.5;
    color: var(--white);
    margin-bottom: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .counter__number {
        margin-bottom: 10px;
        font-size: 36px;
    }
}
@media only screen and (max-width: 767px) {
    .counter__number {
        margin-bottom: 10px;
    }
}

/*----------------------------------------*/
/*  20. SUBSCRIBE CSS START
/*----------------------------------------*/
.subscribe__area {
    position: relative;
}
.subscribe__content {
    background-image: -webkit-gradient(linear, left top, left bottom, from(var(--black)), to(var(--black))), url(../img/bg/subscribe.jpg);
    background-image: linear-gradient(var(--black), var(--black)), url(../img/bg/subscribe.jpg);
    background-position: center;
    background-size: cover;
    background-blend-mode: saturation;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 30px 1fr;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 30px;
    padding: 90px 60px 95px;
    position: relative;
    border-radius: 15px;
    z-index: 9;
    overflow: hidden;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .subscribe__content {
        padding: 80px 30px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .subscribe__content {
        padding: 80px 30px 85px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .subscribe__content {
        text-align: center;
        padding: 45px 20px;
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }
}
@media only screen and (max-width: 767px) {
    .subscribe__content {
        text-align: center;
        padding: 50px 20px;
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }
}
.subscribe__content::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(4, 1, 12, 0.5);
    border-radius: 15px;
    z-index: -1;
}
.subscribe__img {
    position: absolute;
    right: 0;
    bottom: 0;
    border-radius: 15px;/*
  -webkit-animation: rightshape infinite 15s;
		  animation: rightshape infinite 15s;*/
}
@media only screen and (max-width: 767px) {
    .subscribe__img {
        right: -60%;
        bottom: -120px;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);/*
	-webkit-animation: subs-right 5s infinite;
			animation: subs-right 5s infinite;*/
    }
}
.subscribe__img-2 {
    position: absolute;
    right: 110px;
    bottom: 0;/*
  -webkit-animation: bottomshape infinite 15s;
		  animation: bottomshape infinite 15s;
  -webkit-animation-delay: 7s;
		  animation-delay: 7s;*/
}
.subscribe__title {
    font-family: var(--heading-font);
    font-style: normal;
    font-weight: 400;
    font-size: 35px;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--white);
    padding-bottom: 15px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .subscribe__title {
        font-size: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .subscribe__title {
        font-size: 24px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .subscribe__left {
        position: relative;
        z-index: 9;
        margin-bottom: 25px;
    }
}
.subscribe__left p {
    font-family: var(--body-font);
    font-style: normal;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--white);
    padding-right: 100px;
}
@media only screen and (max-width: 767px) {
    .subscribe__left p {
        padding-right: 0;
    }
}
.subscribe__right {
    z-index: 9;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
@media only screen and (max-width: 767px) {
    .subscribe__right {
        padding-top: 20px;
    }
}
.subscribe__right form {
    position: relative;
}
.subscribe__right input {
    width: 100%;
    height: 69px;
    font-style: normal;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    text-transform: capitalize;
    border: 2px solid var(--white);
    border-radius: 5px;
    padding-left: 25px;
    padding-right: 230px;
    outline: none;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .subscribe__right input {
        padding-right: 170px;
    }
}
@media only screen and (max-width: 767px) {
    .subscribe__right input {
        padding-right: 20px;
        padding-left: 20px;
    }
}
.subscribe__right input::-webkit-input-placeholder {
    color: var(--gray-7);
}
.subscribe__right input::-moz-placeholder {
    color: var(--gray-7);
}
.subscribe__right input:-ms-input-placeholder {
    color: var(--gray-7);
}
.subscribe__right input::-ms-input-placeholder {
    color: var(--gray-7);
}
.subscribe__right input::placeholder {
    color: var(--gray-7);
}
.subscribe__right button {
    height: 65px;
    padding: 0 40px;
    font-style: normal;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
    text-transform: uppercase;
    color: var(--white);
    border: none;
    border-radius: 5px;
    background-color: var(--black-dark);
    position: absolute;
    right: 2px;
    top: 2px;/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .subscribe__right button {
        padding: 0 10px 0 25px;
    }
}
@media only screen and (max-width: 767px) {
    .subscribe__right button {
        position: inherit;
        margin-top: 15px;
    }
}
.subscribe__right button:hover {
    background-color: var(--secondary);
}
.subscribe__right button i {
    margin-left: 10px;
}

/*----------------------------------------*/
/*  21. BUSINESS CSS START
/*----------------------------------------*/
.business__area {
    padding: 270px 0;
    text-align: center;
    background-image: -webkit-gradient(linear, left top, left bottom, from(var(--black)), to(var(--black))), url(../img/bg/business.jpg);
    background-image: linear-gradient(var(--black), var(--black)), url(../img/bg/business.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: saturation;
    background-color: rgba(4, 1, 12, 0.3);
    position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .business__area {
        padding: 200px 0;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .business__area {
        padding: 170px 0;
    }
}
@media only screen and (max-width: 767px) {
    .business__area {
        padding: 100px 0;
    }
}
.business__area::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(../img/bg/overly-2.png);
    background-position: left bottom;
    z-index: -1;
}
.business__area-2 {
    background-image: -webkit-gradient(linear, left top, left bottom, from(var(--black)), to(var(--black))), url(../img/bg/business2.jpg);
    background-image: linear-gradient(var(--black), var(--black)), url(../img/bg/business2.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: saturation;
    padding-top: 330px;
    position: relative;
    z-index: 9;
    overflow: hidden;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .business__area-2 {
        padding-top: 150px;
    }
}
.business__area-2::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(../img/bg/overlay.png);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: cover;
    mix-blend-mode: hue;
    z-index: 0;
}
.business__area-2::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(../img/bg/business-2-shape2.png);
    background-color: rgba(16, 4, 49, 0.35);
    background-repeat: no-repeat;
    background-position: right top;
    z-index: -1;
}
.business__area-2 .section-sub-title::before {
    background-color: var(--white);
}
.business__content button {
    position: absolute;
    left: 0;
    top: 0;
    width: 120px;
    height: 120px;
    border: none;
    border-radius: 100%;
    background-color: var(--secondary);/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
}
.business__content button i {
    font-size: 25px;
    color: var(--white);
}
.business__content button:hover {
    background-color: var(--primary);
}
.business__title {
    max-width: 640px;
    margin: 0 auto;
    font-style: normal;
    font-weight: 400;
    font-size: 55px;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 45px;
}
@media only screen and (max-width: 767px) {
    .business__title {
        font-size: 30px;
    }
}
.business__content-2 {
    position: relative;
}
.business__info-2 {
    position: absolute;
    left: 0px;
    bottom: 85px;
}
.business__shape-1 {
    margin-left: -170px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .business__shape-1 {
        margin-left: -250px;
        margin-bottom: -80px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .business__shape-1 {
        margin-left: -330px;
        margin-bottom: -100px;
    }
}
@media only screen and (max-width: 767px) {
    .business__shape-1 {
        margin-bottom: -130px;
    }
}

/*----------------------------------------*/
/*  22. CONTACT CSS START
/*----------------------------------------*/
.contact__area {
    background-image: -webkit-gradient(linear, left top, left bottom, from(var(--black)), to(var(--black))), url(../img/bg/contact.jpg);
    background-image: linear-gradient(var(--black), var(--black)), url(../img/bg/contact.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-blend-mode: saturation;
    padding-top: 180px;
    position: relative;
    z-index: 9;
}
.contact__area::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(../img/bg/overlay.png);
    background-position: top right;
    background-repeat: no-repeat;
    background-size: cover;
    mix-blend-mode: hue;
    z-index: 0;
}
.contact__area::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-position: left bottom;
    background-color: var(--purple-2);
    z-index: -1;
}
.contact__area-2 {
    padding-bottom: 130px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .contact__area-2 {
        padding-bottom: 100px;
    }
}
@media only screen and (max-width: 767px) {
    .contact__area-2 {
        padding-bottom: 80px;
    }
}
.contact__content {
    max-width: 50%;
    margin-left: auto;
    background-image: url(../img/thumb/service-hover.png);
    background-color: var(--purple-3);
    padding: 70px 60px;
    border-radius: 15px 15px 0 0;
    position: relative;
    z-index: 9;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .contact__content {
        max-width: 80%;
    }
}
@media only screen and (max-width: 767px) {
    .contact__content {
        max-width: 100%;
        padding: 40px 20px;
    }
}
.contact__title, .contact__title-2 {
    font-style: normal;
    font-weight: 400;
    font-size: 30px;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--white);
    padding-bottom: 35px;
}
.contact__title-2 {
    color: var(--black);
    padding-bottom: 48px;
}
.contact__form input,
.contact__form textarea {
    width: 100%;
    height: 60px;
    padding: 0 20px;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 60px;
    color: var(--pink-2);
    margin-bottom: 25px;
    background: var(--purple-4);
    border: 1px solid var(--purple-5);
    border-radius: 5px;
}
.contact__form input::-webkit-input-placeholder, .contact__form textarea::-webkit-input-placeholder {
    color: var(--pink-2);
}
.contact__form input::-moz-placeholder, .contact__form textarea::-moz-placeholder {
    color: var(--pink-2);
}
.contact__form input:-ms-input-placeholder, .contact__form textarea:-ms-input-placeholder {
    color: var(--pink-2);
}
.contact__form input::-ms-input-placeholder, .contact__form textarea::-ms-input-placeholder {
    color: var(--pink-2);
}
.contact__form input::placeholder,
.contact__form textarea::placeholder {
    color: var(--pink-2);
}
.contact__form input:focus,
.contact__form textarea:focus {
    outline: 0;
}
.contact__form textarea {
    height: 215px;
    resize: none;
    margin-bottom: 20px;
}
.contact__form-2 input,
.contact__form-2 textarea {
    width: 100%;
    height: 45px;
    padding: 0 20px;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 60px;
    color: var(--black);
    margin-bottom: 15px;
    background: #fff;
    border: 2px solid var(--white-light);
    border-radius: 8px;
}
.contact__form-2 input:focus,
.contact__form-2 textarea:focus{
    /*
  background: var(--pink-3);
  */
    border-color: var(--primary);
    transition: all 0.15s;
    box-shadow: 0px 0px 16px -7px var(--primary);
    -webkit-box-shadow: 0px 0px 16px -7px var(--primary);
}
.contact__form-2 input::-webkit-input-placeholder, .contact__form-2 textarea::-webkit-input-placeholder {
    color: var(--black-4);
}
.contact__form-2 input::-moz-placeholder, .contact__form-2 textarea::-moz-placeholder {
    color: var(--black-4);
}
.contact__form-2 input:-ms-input-placeholder, .contact__form-2 textarea:-ms-input-placeholder {
    color: var(--black-4);
}
.contact__form-2 input::-ms-input-placeholder, .contact__form-2 textarea::-ms-input-placeholder {
    color: var(--black-4);
}
.contact__form-2 input::placeholder,
.contact__form-2 textarea::placeholder {
    color: var(--black-4);
}
.contact__form-2 input:focus,
.contact__form-2 textarea:focus {
    outline: 0;
}
.contact__form-2 textarea {
    height: 160px;
    resize: none;
    margin-bottom: 10px;
}
@media only screen and (max-width: 767px) {
    .contact__form-2 textarea {
        height: 100px;
    }
}
.contact__type {
    text-align: center;
    padding: 50px;
    border: 1px solid var(--white-7);
    border-radius: 15px;
    background-repeat: no-repeat;
    background-position: calc(100% - 10px) 15px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .contact__type {
        padding: 50px 30px;
        margin-bottom: 20px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .contact__type {
        padding: 30px;
        margin-bottom: 20px;
    }
}
@media only screen and (max-width: 767px) {
    .contact__type {
        padding: 30px;
        margin-bottom: 20px;
    }
}
.contact__type.phone {
    background-color: var(--primary);
}
.contact__type.address {
    background-color: var(--secondary);
}
.contact__type.schedule {
    background-color: var(--purple);
}
.contact__type img {
    margin-bottom: 30px;
}
.contact__type p {
    font-size: 18px;
    color: var(--white);
}
.contact__type-title {
    font-weight: 400;
    font-size: 22px;
    line-height: 34px;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 15px;
}

.map__area img {
    max-width: 100%;
    width: 100%;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

.fz-24 {
    font-size: 24px;
}

/*----------------------------------------*/
/*  23. BREADCRUMB CSS START
/*----------------------------------------*/
.breadcrumb__area {
    background-image: url(../img/defaultBG.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-color: #1d18af;
    padding: 150px 0 70px;
    position: relative;
}
@media only screen and (max-width: 767px) {
    .breadcrumb__area {
        padding: 110px 0 20px;
        text-align: center;
    }
}
.breadcrumb__area:before{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000;
    opacity: .30;
    content: '';
}
.breadcrumb__title {
    position: relative;
    font-family: Platform,sans-serif;
    font-style: normal;
    font-weight: 500;
    text-transform:uppercase;
    letter-spacing:.15em;
    font-size: 62px;
    line-height: 1.2;
    /*letter-spacing: 0.02em;*/
    /*text-transform: none;*/
    color: var(--white);
    opacity: 1;/*
  -webkit-animation: fade_left 1s 0.5s forwards;
		  animation: fade_left 1s 0.5s forwards;*/
}
@media only screen and (max-width: 767px) {
    .breadcrumb__title {
        font-size: 28px;
        margin-bottom: 15px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .breadcrumb__title {
        font-size: 36px;
    }
}
.breadcrumb__path {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}
@media only screen and (max-width: 767px) {
    .breadcrumb__path {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}
.breadcrumb__path p {
    font-family: var(--body-font);
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--white);
    opacity: 1;/*
  -webkit-animation: fade_right 1s 1s forwards;
		  animation: fade_right 1s 1s forwards;*/
}
@media only screen and (max-width: 767px) {
    .breadcrumb__path p {
        font-size: 16px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .breadcrumb__path p {
        font-size: 18px;
    }
}
.breadcrumb__path p a {
    position: relative;/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
}
.breadcrumb__path p a::after {
    position: absolute;
    content: "";
    width: 0%;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: var(--white);/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
}
.breadcrumb__path p a:hover {
    color: var(--primary);
}
.breadcrumb__path p a:hover::after {
    width: 100%;
    background-color: var(--primary);
}

/*----------------------------------------*/
/*  24. TESTIMONIAL CSS START
/*----------------------------------------*/
.testimonial__area {
    background-color: var(--gray-3);
}
.testimonial__area-2 {
    background-image: -webkit-gradient(linear, left top, left bottom, from(black), to(black)), url(../img/testimonial/bg.jpg);
    background-image: linear-gradient(black, black), url(../img/testimonial/bg.jpg);
    background-size: cover;
    background-blend-mode: saturation;
    background-position: bottom center;
    background-size: cover;
    position: relative;
    z-index: 9;
}
.testimonial__area-2::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(../img/bg/overlay.png);
    background-position: top right;
    background-repeat: no-repeat;
    mix-blend-mode: hue;
    z-index: 0;
}
.testimonial__area-2::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-position: left bottom;
    background-color: var(--purple-2);
    z-index: -1;
}
.testimonial__area-3 {
    background-image: url(../img/bg/gray-shape.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    padding-bottom: 100px;
}
.testimonial__wrapper {
    margin-top: 58px;
}
@media only screen and (max-width: 1024px) {
    .testimonial__wrapper {
        margin-top: 20px;
    }
}
.testimonial__wrapper-2 {
    margin-bottom: -250px;
}
.testimonial__wrapper-2 .testimonial__client {
    padding-bottom: 90px;
}
.testimonial__client-feedback {
    color: var(--orange);
    font-size: 12px;
    font-weight: 900;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 6px;
    padding-bottom: 13px;
}
.testimonial__client-feedback.fdback-3 {
    color: var(--secondary);
}
@media only screen and (max-width: 1024px) {
    .testimonial__client-feedback {
        padding-bottom: 20px;
    }
}
.testimonial__client-company {
    font-family: var(--body-font);
    font-size: 18px;
    line-height: 29px;
    color: var(--green);
    font-weight: 500;
    padding-bottom: 50px;
}
@media only screen and (max-width: 1024px) {
    .testimonial__client-company {
        padding-bottom: 20px;
    }
}
.testimonial__client-reivew {
    font-size: 18px;
    font-weight: 400;
    color: var(--gray-4);
    padding-bottom: 76px;
    max-width: 595px;
    line-height: 1.7;
}
@media only screen and (max-width: 1024px) {
    .testimonial__client-reivew {
        padding-bottom: 20px;
        padding-right: 0;
    }
}
.testimonial__client-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
}
.testimonial__client-wrapper img {
    max-width: inherit;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
    .testimonial__client-wrapper img {
        max-width: 110%;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .testimonial__client-wrapper img {
        max-width: 110%;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .testimonial__client-wrapper img {
        max-width: 105%;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .testimonial__client-wrapper img {
        max-width: 102%;
    }
}
@media only screen and (max-width: 767px) {
    .testimonial__client-wrapper img {
        max-width: 100%;
    }
}
.testimonial__btn-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 50px;
    color: var(--black);
    font-family: var(--heading-font);
}
@media only screen and (max-width: 1024px) {
    .testimonial__btn-wrapper {
        margin-bottom: 30px;
    }
}
.testimonial__btn-wrapper .prev-btn {
    outline: none;/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
}
.testimonial__btn-wrapper .prev-btn:hover {
    color: var(--secondary);
}
.testimonial__btn-wrapper .prev-btn:hover i {
    margin-right: 15px;
}
.testimonial__btn-wrapper .prev-btn i {
    margin-right: 10px;/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
}
.testimonial__btn-wrapper .next-btn {
    outline: none;/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
}
.testimonial__btn-wrapper .next-btn:hover {
    color: var(--secondary);
}
.testimonial__btn-wrapper .next-btn:hover i {
    margin-left: 15px;
}
.testimonial__btn-wrapper .next-btn i {
    margin-left: 10px;/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
}
.testimonial__icon {
    margin: 0 auto;
    width: 132px;
    height: 132px;
    opacity: 0.8;
    background: var(--secondary);
    border-radius: 100px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 80px;
}
@media only screen and (max-width: 767px) {
    .testimonial__icon {
        margin-bottom: 40px;
    }
}
.testimonial__icon i {
    font-size: 50px;
    opacity: 0.8;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: var(--white);
}
.testimonial__feedback {
    text-align: center;
    padding-bottom: 70px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .testimonial__feedback {
        padding-bottom: 40px;
    }
}
@media only screen and (max-width: 767px) {
    .testimonial__feedback {
        padding-bottom: 40px;
    }
}
.testimonial__feedback .section-sub-title {
    color: var(--white);
}
.testimonial__feedback .section-sub-title::before {
    background-color: var(--white);
}
.testimonial__client-feedback {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 8px;
    color: var(--orange);
}
@media only screen and (max-width: 767px) {
    .testimonial__client-feedback {
        gap: 5px;
    }
}
.testimonial__client-feedback li {
    line-height: initial;
}
.testimonial__client-feedback li i {
    font-size: 15px;
}
.testimonial__box {
    background-color: var(--white);
    padding: 53px 45px 50px 47px;/*
  -webkit-box-shadow: 0px 8px 28px rgba(238, 241, 248, 0.77);
		  box-shadow: 0px 8px 28px rgba(238, 241, 248, 0.77);*/
    border-radius: 8px;
}
@media only screen and (max-width: 767px) {
    .testimonial__box {
        padding: 50px 20px;
    }
}
.testimonial__box__2 {
    padding: 70px 58px 49px 47px;
}
.testimonial__box p {
    font-size: 16px;
    color: var(--black-dark);
}
.testimonial__client-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 18px;
}
.testimonial__client-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-bottom: 25px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .testimonial__client-list {
        padding-bottom: 35px;
        gap: 15px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .testimonial__client-list {
        padding-bottom: 35px;
    }
}
.testimonial__client-name {
    font-size: 20px;
    line-height: 1.1em;
    padding-bottom: 9px;
    font-family: var(--font-archivo);
}
.testimonial__client-designation {
    font-size: 12px;
    color: var(--gray-2);
    font-family: var(--body-font);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .testimonial__client-avatar {
        width: 55px;
        height: 55px;
    }
}
@media only screen and (max-width: 767px) {
    .testimonial__client-avatar {
        width: 55px;
        height: 55px;
    }
}
.testimonial__inner {
    margin-bottom: 90px;
}
.testimonial__icon-2 i {
    font-size: 35px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: var(--white);
    width: 66px;
    height: 66px;
    background: var(--secondary);
    border-radius: 50%;
}
.testimonial__icon-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.testimonial__icon-wrapper {
    padding-top: 50px;
}
.testimonial__title-wrapper-3 {
    margin-bottom: -35px;
}
.testimonial__slider-3 {
    padding-top: 85px;
}
@media only screen and (max-width: 767px) {
    .testimonial__slider-3 {
        padding-top: 50px;
    }
}
.testimonial__pagination-3 .swiper-pagination-bullets.swiper-pagination-horizontal {
    left: 14%;
    top: 0;
}
@media only screen and (max-width: 767px) {
    .testimonial__pagination-3 .swiper-pagination-bullets.swiper-pagination-horizontal {
        left: inherit;
        top: inherit;
        bottom: 40px;
    }
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    -webkit-transform: scale(1);
    transform: scale(1);
}

.swiper-pagination-bullet {
    width: 15px;
    height: 15px;
    display: inline-block;
    border-radius: 50%;
    background-color: #E9E7EC;
    opacity: 1;
    outline: none;
}

.swiper-pagination-bullet-active {
    background: var(--secondary);
}

/*----------------------------------------*/
/*  25. PRICE CSS START
/*----------------------------------------*/
.price__area {
    background-image: url(../img/bg/gray-shape.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.price__title-wrapper {
    padding-bottom: 70px;
}
@media only screen and (max-width: 767px) {
    .price__title-wrapper {
        padding-bottom: 40px;
    }
}
.price__item {
    background-color: var(--white);
    padding: 55px 45px 54px 47px;
    border-radius: 15px;/*
  -webkit-transition: all 0.5s;
  transition: all 0.5s;*/
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .price__item {
        padding: 50px 30px;
        margin-bottom: 30px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .price__item {
        padding: 50px 30px;
        margin-bottom: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .price__item {
        padding: 50px 30px;
        margin-bottom: 30px;
    }
}
.price__item-number {
    font-size: 45px;
    font-weight: 400;
    font-family: var(--heading-font);
    color: var(--black-dark);
    padding-bottom: 30px;
    display: inline-block;
}
.price__item p {
    padding-bottom: 30px;
}
.price__item h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--secondary);
    font-family: var(--font-archivo);
    text-transform: uppercase;
}
.price__item:hover {/*
  -webkit-box-shadow: 0px 8px 28px rgba(238, 241, 248, 0.77);
		  box-shadow: 0px 8px 28px rgba(238, 241, 248, 0.77);*/
}
.price__item-package {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-bottom: 20px;
}
.price__item-package i {
    font-size: 16px;
    color: var(--secondary);
}
.price__item-list, .price__item-list-2 {
    padding-bottom: 30px;
}
.price__item-list li, .price__item-list-2 li {
    font-size: 18px;
    font-weight: 500;
    line-height: 1em;
    margin-bottom: 22px;
    position: relative;
    padding-left: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .price__item-list li, .price__item-list-2 li {
        font-size: 16px;
    }
}
@media only screen and (max-width: 767px) {
    .price__item-list li, .price__item-list-2 li {
        font-size: 16px;
    }
}
.price__item-list li::before, .price__item-list-2 li::before {
    position: absolute;
    top: 2px;
    left: 0;
    content: "";
    width: 12px;
    height: 12px;
    border: 2px solid var(--secondary);
    border-radius: 50%;
}
.price__item-list-2 li::before {
    background-color: var(--secondary);
}

.disable {
    opacity: 0.3;
}

/*----------------------------------------*/
/*  26. FAQ CSS START
/*----------------------------------------*/
.faq__item {
    padding: 0 37px;
    margin-bottom: 135px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .faq__item {
        padding: 0;
        margin-bottom: 100px;
    }
}
@media only screen and (max-width: 767px) {
    .faq__item {
        padding: 0;
        margin-bottom: 80px;
    }
}
.faq__item:last-child {
    margin-bottom: 0;
}
.faq__item h3 {
    padding-bottom: 50px;
}

.accordion-button {
    background: var(--gray-8);
    font-size: 24px;
    line-height: 1;
    font-family: var(--heading-font);
    text-transform: uppercase;
    color: var(--black-dark);
    padding: 40px 45px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .accordion-button {
        font-size: 20px;
        padding: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .accordion-button {
        font-size: 18px;
        padding: 30px;
        line-height: 1.2;
    }
}

.accordion-item {
    margin-bottom: 30px;
    border: 1px solid #F2F5FA;
}

.accordion-body {
    border-bottom: 4px solid var(--secondary);/*
  -webkit-box-shadow: 0px 20px 20px rgba(228, 228, 228, 0.25);
		  box-shadow: 0px 20px 20px rgba(228, 228, 228, 0.25);*/
    padding: 40px 131px 40px 47px;
    color: var(--gray-4);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .accordion-body {
        padding: 30px 60px 30px 30px;
    }
}
@media only screen and (max-width: 767px) {
    .accordion-body {
        padding: 30px;
    }
}

.accordion-button:not(.collapsed) {
    color: var(--secondary);
}

.accordion-button::after {
    content: "\f175";
    font-weight: 600;
    font-family: "Font Awesome 5 Pro";
    background-image: none;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.accordion-button:not(.collapsed)::after {
    background-image: none;
    -webkit-transform: rotate(0);
    transform: rotate(0);
}

.accordion-button:focus {
    z-index: 0;
    border-color: var(--white);
    outline: 0;/*
  -webkit-box-shadow: var(--white);
		  box-shadow: var(--white);*/
}

/*----------------------------------------*/
/*  27. OFFCANVES CSS START
/*----------------------------------------*/
.offcanvas__area {
    background-color: var(--black-dark);
    padding: 100px 30px 50px;
}
.offcanvas__close {
    background: var(--white-light);
    width: 40px;
    height: 40px;
    position: absolute;
    top: 30px;
    right: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 4px;/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
}
.offcanvas__close:hover {
    background-color: var(--secondary);
}
.offcanvas__close:hover i {
    color: var(--white);
}
.offcanvas__close button {
    background-color: transparent;
    border: none;
    color: var(--black-dark);
    font-size: 18px;
    line-height: 18px;
    padding: 6px 14px;
}
.offcanvas__close button i {/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
}
.offcanvas__logo {
    margin-bottom: 60px;
}
.offcanvas__logo img {
    max-width: 200px;
}
.offcanvas__title-wrapper {
    margin-bottom: 60px;
}
.offcanvas__title {
    font-weight: 400;
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-transform: capitalize;
    color: var(--white-light);
    padding-bottom: 20px;
}
.offcanvas__sub-title {
    color: var(--white-light);
}
.offcanvas__subscribe {
    margin-bottom: 60px;
}
.offcanvas__subscribe input {
    width: 100%;
    height: 48px;
    background-color: transparent;
    border: none;
    outline: none;
    color: var(--white-light);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.offcanvas__subscribe input::-webkit-input-placeholder {
    color: var(--white-light);
    opacity: 0.8;
}
.offcanvas__subscribe input::-moz-placeholder {
    color: var(--white-light);
    opacity: 0.8;
}
.offcanvas__subscribe input:-ms-input-placeholder {
    color: var(--white-light);
    opacity: 0.8;
}
.offcanvas__subscribe input::-ms-input-placeholder {
    color: var(--white-light);
    opacity: 0.8;
}
.offcanvas__subscribe input::placeholder {
    color: var(--white-light);
    opacity: 0.8;
}
.offcanvas__contact {
    padding-bottom: 30px;
}
.offcanvas__contact li {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: var(--white-light);
    margin-bottom: 15px;
}
.offcanvas__contact li span {
    display: inline-block;
    margin-right: 10px;
}
.offcanvas__contact li i {
    color: var(--secondary);
    font-size: 18px;
}
.offcanvas__contact li a {
    display: block;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: var(--white-light);
}
.offcanvas__contact li a:hover {
    color: var(--secondary);
}
.offcanvas__contact li a:hover i {
    color: var(--primary);
}
.offcanvas__social-list li {
    display: inline;
    padding: 0 7px;
}
.offcanvas__social-list li a {
    display: inline-block;
    font-size: 16px;
    color: var(--white);
    text-align: center;
    width: 45px;
    height: 45px;
    line-height: 42px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 100%;
    position: relative;
    z-index: 9;
    overflow: hidden;
}
.offcanvas__social-list li a span {
    position: absolute;
    width: 0px;
    height: 0px;
    background: var(--secondary);
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);/*
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;*/
    z-index: -1;
}
.offcanvas__social-list li a:hover {
    color: var(--white);
}
.offcanvas__social-list li a:hover span {
    width: 200px;
    height: 200px;
}

/*----------------------------------------*/
/*  28. CAREER CSS START
/*----------------------------------------*/
.career-title {
    font-weight: 700;
    font-size: 2.5em;
    line-height: 3em;
    color: var(--black);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .career-title {
        font-size: 48px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .career-title {
        font-size: 36px;
    }
}
@media only screen and (max-width: 767px) {
    .career-title {
        font-size: 36px;
    }
}
.career-direction__area {
    padding: 40px 0 40px;
    /*
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--black)), to(var(--black))), url(../img/bg/career-direction.jpg);
  background-image: linear-gradient(var(--black), var(--black)), url(../img/bg/career-direction.jpg);
  background-blend-mode: saturation;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  */
    position: relative;
    z-index: 9;
}
@media only screen and (max-width: 767px) {
    .career-direction__area {
        text-align: center;
        padding: 40px 0;
    }
}
/*
.career-direction__area::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(../img/bg/overly-3.png);
  z-index: -1;
}
*/
.career-direction__title .career-title {
    color: var(--black);
}
.career-direction__btn {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
@media only screen and (max-width: 767px) {
    .career-direction__btn {
        margin-top: 20px;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}
.career-text__area {
    padding: 145px 0 110px;
}
@media only screen and (max-width: 767px) {
    .career-text__area {
        padding: 50px 0 40px;
    }
}
.career-text__area-2 {
    padding-bottom: 70px;
}
.career-text__title .career-title {
    padding-right: 50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .career-text__title .career-title {
        padding-right: 0;
    }
}
@media only screen and (max-width: 767px) {
    .career-text__title .career-title {
        padding-right: 0;
    }
}
.career-text__content p {
    line-height: 28px;
    color: var(--gray-4);
    padding-left: 100px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .career-text__content p {
        padding-left: 40px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .career-text__content p {
        padding-left: 0;
    }
}
@media only screen and (max-width: 767px) {
    .career-text__content p {
        padding-left: 0;
        padding-top: 20px;
    }
}
.career-gallery__slide img {
    width: 100%;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);/*
  -webkit-transition: all 0.3s;
  transition: all 0.3s;*/
}
.career-gallery__slide img:hover {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}
.career-discuss__content {
    padding: 230px 0;
    background-image: -webkit-gradient(linear, left top, left bottom, from(var(--black)), to(var(--black))), url(../img/career/career-discuss.jpg);
    background-image: linear-gradient(var(--black), var(--black)), url(../img/career/career-discuss.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-blend-mode: saturation;
    text-align: center;
    border-radius: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .career-discuss__content {
        padding: 150px 0;
    }
}
@media only screen and (max-width: 767px) {
    .career-discuss__content {
        padding: 120px 0;
    }
}
.career-discuss__play {
    width: 120px;
    height: 120px;
    line-height: 126px;
    border: none;
    border-radius: 100%;
    background-color: var(--secondary);/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
}
.career-discuss__play i {
    font-size: 24px;
    color: var(--white);
}
.career-discuss__play:hover {
    background-color: var(--primary);
}
.career-path__area {
    background-color: var(--white-4);
}
.career-path__item {
    margin-bottom: 22px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .career-path__item {
        margin-bottom: 25px;
    }
}
@media only screen and (max-width: 767px) {
    .career-path__item {
        margin-bottom: 30px;
    }
}
.career-path__title {
    text-align: center;
    padding-bottom: 70px;
}
.career-path__content {
    text-align: center;
    background-color: var(--white);
    padding: 10px 0 0 0;
    margin-bottom: 15px;
    border-radius: 0 0 15px 15px;
}
.career-path__content .path-title {
    font-weight: 500;
    font-size: 1.5em;
    line-height: 2em;
    color: var(--black);
    padding-bottom: 5px;
}
@media only screen and (max-width: 767px) {
    .career-path__content .path-title {
        padding-bottom: 15px;
    }
}
.career-path__content p {
    color: var(--black);
    /*padding-bottom: 10px;*/
}
@media only screen and (max-width: 767px) {
    .career-path__content p {
        /*padding-bottom: 5px;*/
    }
}
.career-path__content a {
    font-weight: 600;
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: 0.05em;
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline;
    text-transform: uppercase;
    color: var(--black-darker);/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
}
.career-path__content a i {
    margin-left: 5px;/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
}
.career-path__content a:hover {
    color: var(--secondary);
}
.career-path__content a:hover i {
    margin-left: 10px;
}
.career-path__thumb {
    width: 100%;
    /*
  mix-blend-mode: luminosity;
  */
    border-radius: 15px 15px 0 0;
}
.career-path__btn {
    text-align: center;
    padding-top: 52px;
}

@media only screen and (max-width: 767px) {
    .company-logo__slide img {
        width: 100%;
    }
}

/*----------------------------------------*/
/*  29. JOB CSS START
/*----------------------------------------*/
.job__area {
    padding-bottom: 80px;
}
.job__inner {
    padding: 0 40px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .job__inner {
        padding: 0;
    }
}
@media only screen and (max-width: 767px) {
    .job__inner {
        padding: 0;
    }
}
.job__inner .row > * {
    padding-right: calc(var(--bs-gutter-x) * 1);
    padding-left: calc(var(--bs-gutter-x) * 1);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .job__inner .row > * {
        padding-right: calc(var(--bs-gutter-x) * 0.5);
        padding-left: calc(var(--bs-gutter-x) * 0.5);
    }
}
.job__item {
    background: var(--white);
    border: 1px solid var(--pink-4);
    margin-bottom: 50px;
    padding: 80px 90px 70px;/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .job__item {
        padding: 50px 40px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .job__item {
        padding: 50px 30px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .job__item {
        padding: 50px 25px;
        margin-bottom: 22px;
    }
}
@media only screen and (max-width: 767px) {
    .job__item {
        padding: 50px 25px;
        margin-bottom: 30px;
    }
}
.job__item:hover {/*
  -webkit-box-shadow: 0px 40px 25px rgba(219, 219, 219, 0.25);
		  box-shadow: 0px 40px 25px rgba(219, 219, 219, 0.25);*/
}
.job__item p {
    font-size: 15px;
    line-height: 24px;
    color: var(--gray-2);
    padding-bottom: 30px;
}
.job__status, .job-details__status {
    font-family: var(--body-font);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--secondary);
    padding-bottom: 20px;
}
.job__title, .job-details__title {
    font-weight: 400;
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--black-5);
    padding-bottom: 30px;
}
.job__category, .job-details__category {
    font-family: var(--body-font);
    font-weight: 600;
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gray-2);
    padding-bottom: 65px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .job__category, .job-details__category {
        padding-bottom: 50px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .job__category, .job-details__category {
        padding-bottom: 40px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .job__category, .job-details__category {
        padding-bottom: 40px;
    }
}
@media only screen and (max-width: 767px) {
    .job__category, .job-details__category {
        padding-bottom: 40px;
    }
}
.job__salary {
    font-family: var(--body-font);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: var(--black-5);
    padding-bottom: 7px;
}
.job__location {
    font-family: var(--body-font);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.3;
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline;
    color: var(--black-5);
    padding-bottom: 75px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .job__location {
        padding-bottom: 40px;
    }
}
@media only screen and (max-width: 767px) {
    .job__location {
        padding-bottom: 40px;
    }
}
.job-details__area {
    padding-bottom: 70px;
}
.job-details__contents {
    padding-right: 85px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .job-details__contents {
        padding-right: 15px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .job-details__contents {
        padding-right: 0;
    }
}
@media only screen and (max-width: 767px) {
    .job-details__contents {
        padding-right: 0;
    }
}
.job-details__status {
    border-bottom: 1px solid var(--pink-4);
    margin-bottom: 50px;
}
.job-details__title {
    padding-bottom: 25px;
}
.job-details__category {
    padding-bottom: 55px;
}
@media only screen and (max-width: 767px) {
    .job-details__category {
        padding-bottom: 40px;
    }
}
.job-details__content p {
    padding-bottom: 35px;
    line-height: 30px;
}
@media only screen and (max-width: 767px) {
    .job-details__content p {
        padding-bottom: 20px;
    }
}
.job-details__content ul {
    margin-bottom: 30px;
}
.job-details__content ul li {
    padding: 0 0 28px 35px;
    position: relative;
}
@media only screen and (max-width: 767px) {
    .job-details__content ul li {
        padding: 0 0 15px 30px;
    }
}
.job-details__content ul li::before {
    position: absolute;
    content: "\f00c";
    top: 4px;
    left: 6px;
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    font-size: 10px;
    color: var(--white);
    z-index: 9;
}
.job-details__content ul li::after {
    position: absolute;
    content: "";
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    background-color: var(--secondary);
    border-radius: 30px;
}
.job-details__content img {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    border-radius: 15px 15px 0 0;
    margin-bottom: 40px;
    width: 100%;
}
.job-details__content h1,
.job-details__content h2 {
    font-weight: 400;
    font-size: 26px;
    line-height: 30px;
    text-transform: uppercase;
    color: var(--black-5);
    padding-bottom: 30px;
}
.job-details__content h3,
.job-details__content h4 {
    font-weight: 400;
    font-size: 22px;
    line-height: 30px;
    text-transform: uppercase;
    color: var(--black-5);
    padding-bottom: 20px;
}
.job-details__content h5 {
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
    text-transform: uppercase;
    color: var(--black-5);
    padding-bottom: 20px;
}
.job-details__content h6 {
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    text-transform: uppercase;
    color: var(--black-5);
    padding-bottom: 20px;
}
.job-details__form {
    margin-top: 42px;
}
.job-details__form input,
.job-details__form textarea {
    border-radius: 5px;
    margin-bottom: 20px;
}
.job-details__form textarea {
    height: 230px;
}
.job-details__form button {
    width: 100%;
}
.job-details__form button:hover span {
    width: 1100px;
    height: 1100px;
}

/*----------------------------------------*/
/*  30. FOOTER CSS START
/*----------------------------------------*/
.footer__area {
    background-color: var(--purple);
    padding: 130px 0 120px;
    overflow: hidden;
    position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .footer__area {
        padding: 80px 0 70px;
    }
}
@media only screen and (max-width: 767px) {
    .footer__area {
        padding: 40px 0 30px;
    }
}
.footer__area-2, .footer__area-3 {
    /*background-image: url(../img/bg/footer-2.png);*/
    background-repeat: no-repeat;
    background-size: cover;
    background-color: var(--black-dark);
    padding: 50px 0 35px 0;
}
@media only screen and (max-width: 767px) {
    .footer__area-2, .footer__area-3 {
        padding: 40px 0 30px;
    }
}
.footer__area-3 {
    padding-top: 105px;
}
@media only screen and (max-width: 767px) {
    .footer__area-3 {
        padding-top: 70px;
    }
}
.footer__top {
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 30px;
    padding-bottom: 50px;
}
.footer__top p {
    font-family: var(--body-font);
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.5;
    color: var(--white);
    font-family: var(--font-archivo);
    margin-top: 50px;
    mix-blend-mode: normal;
    opacity: 0.8;
}
.footer__top-3 {
    margin-bottom: 50px;
}
@media only screen and (max-width: 767px) {
    .footer__top-3 {
        margin-bottom: 30px;
    }
}
.footer__title {
    font-style: normal;
    font-weight: 400;
    font-size: 50px;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--white);
    padding-bottom: 35px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .footer__title {
        font-size: 40px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .footer__title {
        font-size: 36px;
    }
}
@media only screen and (max-width: 767px) {
    .footer__title {
        font-size: 30px;
    }
}
.footer__sub-title {
    max-width: 560px;
    margin: 0 auto;
    font-family: var(--body-font);
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    color: var(--white);
    font-family: var(--font-archivo);
    padding-bottom: 40px;
    mix-blend-mode: normal;
    opacity: 0.8;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .footer__sub-title {
        max-width: 460px;
    }
}
.footer__logo {
    padding-top: 2px;
}
@media only screen and (max-width: 767px) {
    .footer__logo {
        text-align: center;
        margin-bottom: 30px;
    }
}
.footer__logo img {
    max-width: 190px;
}
.footer__logo-3 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}
@media only screen and (max-width: 767px) {
    .footer__logo-3 {
        padding-bottom: 60px;
    }
}
.footer__menu {
    text-align: center;
    font-family: var(--font-archivo);
    padding-top: 5px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .footer__menu {
        text-align: right;
    }
}
@media only screen and (max-width: 767px) {
    .footer__menu {
        margin-bottom: 10px;
    }
}
.footer__menu li {
    display: inline;
    padding: 0 10px;
}
@media only screen and (max-width: 767px) {
    .footer__menu li {
        padding: 0;
    }
}
.footer__menu li a {
    display: inline-block;
    font-family: var(--body-font);
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--white);
    padding: 10px;
    text-transform: capitalize;/*
  -webkit-transition: all 0.3s;
  transition: all 0.3s;*/
}
@media only screen and (max-width: 767px) {
    .footer__menu li a {
        padding: 10px 5px;
    }
}
.footer__menu li a:hover {
    color: var(--secondary);
}
.footer__social {
    text-align: right;
    margin-top: 5px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .footer__social {
        text-align: center;
        margin-top: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .footer__social {
        text-align: center;
    }
}
.footer__social li {
    display: inline;
    padding: 0 7px;
}
.footer__social li a {
    display: inline-block;
    font-size: 16px;
    color: var(--white);
    text-align: center;
    width: 45px;
    height: 45px;
    line-height: 42px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 100%;/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
    z-index: 9;
    overflow: hidden;
    position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .footer__social li a {
        width: 36px;
        height: 36px;
        line-height: 32px;
    }
}
.footer__social li a span {
    position: absolute;
    width: 0px;
    height: 0px;
    background: var(--secondary);
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);/*
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;*/
    z-index: -1;
}
.footer__social li a:hover {
    color: var(--white);
}
.footer__social li a:hover span {
    width: 200px;
    height: 200px;
}
.footer__shape-1 {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;/*
  -webkit-animation: leftshape infinite 15s;
		  animation: leftshape infinite 15s;*/
}
.footer__shape-2 {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;/*
  -webkit-animation: leftshape infinite 15s;
		  animation: leftshape infinite 15s;
  -webkit-animation-delay: 7s;
		  animation-delay: 7s;*/
}
.footer__shape-3 {
    position: absolute;
    right: 0;
    bottom: 75px;/*
  -webkit-animation: rightshape infinite 15s;
		  animation: rightshape infinite 15s;*/
}
.footer__shape-4 {
    position: absolute;
    right: 0;
    bottom: 0;/*
  -webkit-animation: rightshape infinite 15s;
		  animation: rightshape infinite 15s;
  -webkit-animation-delay: 7s;
		  animation-delay: 7s;*/
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .footer__widget, .footer__widget-3 {
        margin-bottom: 60px;
    }
}
@media only screen and (max-width: 767px) {
    .footer__widget, .footer__widget-3 {
        margin-bottom: 50px;
    }
}
.footer__widget-title {
    font-family: var(--font-archivo);
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    color: var(--white);
    padding-bottom: 24px;
}
@media only screen and (max-width: 767px) {
    .footer__widget-title {
        padding-bottom: 20px;
    }
}
.footer__widget-title-3 {
    font-weight: 400;
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--white);
    padding-bottom: 24px;
}
.footer__widget p, .footer__widget-3 p {
    padding-top: 6px;
    font-family: var(--body-font);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: var(--white-light);
    max-width: 270px;
    margin-bottom: 35px;
}
@media only screen and (max-width: 767px) {
    .footer__widget p, .footer__widget-3 p {
        max-width: 350px;
    }
}
.footer__widget li, .footer__widget-3 li {
    margin-bottom: 10px;
}
.footer__widget li a, .footer__widget-3 li a {
    display: block;
    font-family: var(--font-archivo);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.35rem;
    color: var(--white-light);
    padding: 0;
}
.footer__widget li a:hover, .footer__widget-3 li a:hover {
    color: var(--secondary);
}
.footer__widget form, .footer__widget-3 form {
    position: relative;
}
.footer__widget input, .footer__widget-3 input {
    width: 100%;
    height: 60px;
    font-style: normal;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    text-transform: capitalize;
    border: 1px solid var(--black-2);
    color: var(--white-light);
    background-color: var(--black-3);
    border-radius: 5px;
    padding-left: 25px;
    padding-right: 80px;
    outline: none;
}
.footer__widget input::-webkit-input-placeholder, .footer__widget-3 input::-webkit-input-placeholder {
    opacity: 1;
    color: var(--white-light);
}
.footer__widget input::-moz-placeholder, .footer__widget-3 input::-moz-placeholder {
    opacity: 1;
    color: var(--white-light);
}
.footer__widget input:-ms-input-placeholder, .footer__widget-3 input:-ms-input-placeholder {
    opacity: 1;
    color: var(--white-light);
}
.footer__widget input::-ms-input-placeholder, .footer__widget-3 input::-ms-input-placeholder {
    opacity: 1;
    color: var(--white-light);
}
.footer__widget input::placeholder, .footer__widget-3 input::placeholder {
    opacity: 1;
    color: var(--white-light);
}
.footer__widget button, .footer__widget-3 button {
    height: 60px;
    padding: 0 24px;
    font-style: normal;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
    text-transform: uppercase;
    color: var(--white);
    border: none;
    border-radius: 5px;
    background-color: var(--secondary);
    position: absolute;
    right: 0;
    top: 0;
    /*
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  */
}
.footer__widget button:hover, .footer__widget-3 button:hover {
    background-color: var(--primary);
}
.footer__widget-3 li {
    margin-bottom: 7px;
}
.footer__widget-3 li a {
    font-family: var(--body-font);
    font-size: 16px;
}
.footer__btm {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 50px;
    padding-top: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .footer__btm {
        margin-top: 0;
    }
}
@media only screen and (max-width: 767px) {
    .footer__btm {
        margin-top: 0;
    }
}
.footer__btm-3 {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 70px;
    padding-top: 25px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .footer__btm-3 {
        margin-top: 20px;
    }
}
.footer__subscribe-3 {
    position: relative;
}
.footer__subscribe-3 input {
    width: 100%;
    height: 56px;
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--white);
    color: var(--white);
    opacity: 0.5;
    outline: none;
    padding-right: 120px;
}
.footer__subscribe-3 input::-webkit-input-placeholder {
    opacity: 1;
}
.footer__subscribe-3 input::-moz-placeholder {
    opacity: 1;
}
.footer__subscribe-3 input:-ms-input-placeholder {
    opacity: 1;
}
.footer__subscribe-3 input::-ms-input-placeholder {
    opacity: 1;
}
.footer__subscribe-3 input::placeholder {
    opacity: 1;
}
.footer__subscribe-3 .submit-btn {
    position: absolute;
    right: 0;
    bottom: 14px;
    font-weight: 600;
    font-size: 16px;
    line-height: 26px;
    text-transform: uppercase;
    color: var(--white);
    background: transparent;
    border: none;
    /*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  */
}
.footer__subscribe-3 .submit-btn i {
    margin-left: 5px;/*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
}
.footer__subscribe-3 .submit-btn:hover {
    color: var(--secondary);
}
.footer__subscribe-3 .submit-btn:hover i {
    color: var(--secondary);
}
.footer__social-2 {
    text-align: right;
}
@media only screen and (max-width: 767px) {
    .footer__social-2 {
        text-align: center;
    }
}
.footer__social-2 li {
    display: inline-block;
    margin-left: 20px;
}
.footer__social-2 li a {
    display: inline-block;
    font-size: 16px;
    color: var(--gray-9);
    text-align: center;
    /*
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  */
}
.footer__social-2 li a:hover {
    color: var(--secondary);
}
.footer__copyright {
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.3;
    color: var(--white-light);
}
@media only screen and (max-width: 767px) {
    .footer__copyright {
        text-align: center;
        margin-bottom: 30px;
    }
}
.footer__address li {
    margin-bottom: 11px;
    color: var(--white-light);
    line-height: 1.6;
}

@media only screen and (min-width: 1920px) {
    .xxxl-none {
        display: none;
    }
}

@media only screen and (min-width: 1400px) and (max-width: 1919px) {
    .xxl-none {
        display: none;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .xl-none {
        display: none;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .lg-none {
        display: none;
    }
}

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

.zi-9 {
    position: relative;
    z-index: 9;
}