@import url("css.css");
/*===============================================
Template Name: Maique - SEO Marketing Agency HTML5 Template
Author:  https://templatemonster.com/user/dreamit-solution
Description: Description
Version: 1.0.0
Text Domain: maique
Tags: agency, consulting, digital agency, digital marketing, digital marketing agency, marketing, marketing agency, media agency, portfolio, seo, seo agency, seo agency theme, seo marketing, smm, social media marketing agency.
================================================*/

/*TABLE OF CONTENTS*/
/*=====================
01. Maique Header Top Menu Section Css
02. Maique Nav Menu Section Css 
03. Maique Banner Section Css
04. Maique Section Title Css
05. Maique Service Section css
06. Maique About Section Css
07. Maique Counter Section Css
08. Maique Case Study Section Css
09. Maique Testimonial Section Css
10. Maique Process Section Css
11. Maique Team Section Css
12. Maique Faq Section Css
13. Maique Brand Section Css
14. Maique Call Do Section Css
15. Maique Form Box Css
16. Maique Skill Section Css
17. Maique Blog Section Css
18. Maique footer Section Css
19. Maique Subscribe Section Css
20. Maique Lines CSS
21. Maique Prossess Ber Css
22. Maique Scrollup Section
23. Maique Bounce Animation Css 
24. Maique Animation Dance
25. Maique Breadcumb Section Css
26. Maique abouts_Sections Css
27. Maique Feture-Section Css
28. Maique Pricing Section Css
29. Maique Web Development Section CSS
30. Maique Contact  US Css
31. Maique Blog Sidber Widget CSS
32. Maique Case Study Details Css
33. Maique Search Box Css
34. Maique Loader Css
=======================*/
:root {
    --mio-color: #AA0000;
    --theme-color: #F47629;
    --gr-color2: #FD8900;
    --title-color: #101840;
    --body-color: #666666;
    --smoke-color: #F8F8F8;
    --smoke-color2: #ECF1FF;
    --black-color: #000000;
    --black-color2: #101018;
    --gray-color: #bdbdbd;
    --white-color: #ffffff;
    --body-bg: #E1E4E5;
    --light-color: #E1E4E5;
    --yellow-color: #E2B93B;
    --success-color: #27AE60;
    --error-color: #EB5757;
    --th-border-color: #fff;
    --title-font: "Exo", sans-serif;
    --body-font: "Inter", sans-serif;
    --icon-font: "Font Awesome 6 Pro";
    --main-container: 1320px;
    --container-gutters: 24px;
    --section-space: 50px;
    --section-space-mobile: 80px;
    --section-title-space: 60px;
    --ripple-ani-duration: 5s;
}

/*<!-- ============================================================== -->
 <!-- Maique Reset Code & Common Start Here -->
<!-- ============================================================== -->*/

.maique-logo a {
    font-size: 40px;
    color: #fff;
    font-weight: 500;
    padding-left: 42px;
    position: relative;
}

.maique-logo a span {
    color: var(--mio-color)
;
    font-weight: 600;
}

.maique-logo img {
    width: 48px;
    position: absolute;
    left: 0;
    top: -8px;
}

.maique-section-title h1 {
    font-size: 36px;
    line-height: 50px;
    color: #282828;
    font-weight: 700;
}

.maique-btn>a {
    padding: 15px 32px;
    color: #fff !important;
    background: var(--mio-color);
    border-radius: 30px;
    border: 1px solid var(--mio-color);
    position: relative;
    z-index: 1;
    text-align: center;
}

.maique-btn>a:hover {
    color: #fff ;
    filter: hue-rotate(360deg);
}

.maique-btn>a:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #2D2D92;
    transform: scale(0);
    border-radius: 30px;
    transition: .5s;
    z-index: -1;
}

.maique-btn>a:hover:before {
    transform: scale(1);
}

.maique-btn2>a {
    padding: 11px 30px;
    color: #fff !important;
    background: #282828;
    border: 1px solid #282828;
    position: relative;
    z-index: 1;
    text-align: center;
}

.maique-btn2>a:hover {
    color: #282828 !important;
    filter: hue-rotate(360deg);
}

.maique-btn2>a:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    transform: scale(0);
    transition: .5s;
    z-index: -1;
}

.maique-btn2>a:hover:before {
    transform: scale(1);
}

.maique-btn3>a {
    padding: 12px 30px;
    color: #fff !important;
    background: var(--mio-color);
    border: 1px solid var(--mio-color);
    position: relative;
    z-index: 1;
    text-align: center;
    border-radius: 5px;
}

.maique-btn3>a:hover {
    color: #282828 !important;
    filter: hue-rotate(360deg);
}

.maique-btn3>a:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    transform: scale(0);
    transition: .5s;
    z-index: -1;
    border-radius: 5px;
}

.maique-btn3>a:hover:before {
    transform: scale(1);
}

.maique-btn4>a {
    padding: 12px 30px;
    color: #fff !important;
    background: #0f253d;
    border: 1px solid #0f253d;
    position: relative;
    z-index: 1;
    text-align: center;
}

.maique-btn4>a:hover {
    color: #0f253d !important;
    filter: hue-rotate(360deg);
}

.maique-btn4>a:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    transform: scale(0);
    transition: .5s;
    z-index: -1;
}

.maique-btn4>a:hover:before {
    transform: scale(1);
}

.maique_nav_manu {
    transition: .5s;
    z-index: 2;
    position: relative;
    padding: 0 70px 0;
    margin-bottom: -95px;
    border-bottom: 1px solid rgba(16,18,16,0.10196078431372549);
}

.sticky {
    left: 0;
    margin: auto;
    position: fixed !important;
    top: 0;
    width: 100%;
    -webkit-box-shadow: 0 2px 5px -2px rgba(254, 254, 254, 0.1);
    box-shadow: 0 2px 5px -2px rgba(254, 254, 254, 0.1);
    background: #ffffff55;
    transition: .5s !important;
    z-index: 922;
    -webkit-animation: 300ms ease-in-out slideInDown;
    animation: 500ms ease-in-out slideInDown;
    backdrop-filter: blur(30px);
}

.sticky nav.header-menu {
    background: transparent;
}

.sticky nav.header-menu ul li {
    display: inline-block;
    padding: 24px 0 24px 24px;
    position: relative;
}

/*<!-- ============================================================== -->
 <!-- Maique Reset Code & Common End Here -->
<!-- ============================================================== -->*/


/*<!-- ============================================================== -->
 <!-- Maique Header Menu Start Here -->
<!-- ============================================================== -->*/

nav.header-menu {
    text-align: right;
}

nav.header-menu ul li {
    display: inline-block;
    padding: 34px 0 34px 24px;
    position: relative;
}

nav.header-menu ul li:first-child a {
    color: var(--mio-color);
}

nav.header-menu ul li:last-child {
    padding: 0 0 0 24px;
}

nav.header-menu ul li a {
    font-size: 16px;
    line-height: 28px;
    color: #282828;
    font-weight: 500;
    transition: .5s;
}

nav.header-menu ul li:hover a {
    color: var(--mio-color);
    filter: hue-rotate(360deg);
}

nav.header-menu i {
    font-size: 12px;
    transform: rotate(0deg);
    display: inline-block;
    transition: .5s;
}

nav.header-menu ul li:hover i {
    transform: rotate(-180deg);
    color: var(--mio-color);
}

nav.header-menu ul li:last-child {
    margin-left: 26px;
}

.sticky nav .submenu ul li {
    padding: 0;
}


/* Submenu Start Here */

nav.header-menu ul li:hover .submenu{
    visibility: visible;
    opacity: 1;
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear;
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

.submenu {
    position: absolute;
    top: 96px;
    left: 0;
    width: 225px;
    background: #fff;
    z-index: 50;
    border-top: 3px solid var(--mio-color);
    transition: .4s;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    text-align: left;
    filter: drop-shadow(5px 5px 5px rgba(60, 115, 206, 0.2));
    -webkit-transform: perspective(400px) rotateX(-90deg);
    transform: perspective(400px) rotateX(-90deg);
    transform-origin: 50% 0%;
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear;
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

.sticky .submenu {
    top: 76px;
}

nav .submenu ul li {
    display: block;
    width: 100%;
    background: #fff;
    transition: .4s;
    padding: 0;
    position: relative;
    z-index: 1;
}

nav .submenu ul li:last-child {
    margin-left: 0;
    padding-left: 0;
}

nav .submenu ul li:before {
    position: absolute;
    content: '';
    width: 0%;
    height: 100%;
    background: var(--mio-color);
    top: 0;
    right: -15px;
    transform: skewX(-35deg);
    transition: .4s;
    z-index: -1;
}

nav .submenu ul li:after {
    position: absolute;
    content: '';
    width: 0%;
    height: 100%;
    background: #c39e75;
    top: 0;
    left: -15px;
    transform: skewX(-35deg);
    transition: .4s;
    z-index: -1;
}

nav .submenu ul>li>a {
    color: #282828 !important;
    transition: .4s;
    width: 100%;
    padding: 8px 20px ;
}

nav .submenu ul>li:first-child>a {
    color: #282828;
    font-weight: 500;
}

nav .submenu ul li:hover a{
    color: #fff !important;
}

nav .submenu ul li:hover:before,
nav .submenu ul li:hover:after {
    background: var(--mio-color);
    filter: hue-rotate(360deg);
    width: 58%;
}

/* Submenu End Here */

/*<!-- ============================================================== -->
 <!-- Maique Header Menu End Here -->
<!-- ============================================================== -->*/



/*<!-- ============================================================== -->
 <!-- Maique Banner Section Start Here -->
<!-- ============================================================== -->*/

section.banner-section {
    background-color: #fff8f8;
    height: 850px;
    display: flex;
    align-items: center;
}

.banner-title h1 {
    font-size: 70px;
    line-height: 82px;
    color: #282828;
    font-weight: 700;
}

.banner-desc p {
    margin: 18px 0 42px;
}

/*<!-- ============================================================== -->
 <!-- Maique Banner Section End Here -->
<!-- ============================================================== -->*/


/*<!-- ============================================================== -->
 <!-- Maique About Section Start Here -->
<!-- ============================================================== -->*/

section.about-section {
    padding: 100px 0;
}

.about-thumb img {
    margin-left: -1rem;
}

.about-desc {
    margin: 28px 0 42px;
}

.about-desc p:first-child {
    padding-bottom: 25px;
    border-bottom: 1px solid #d5d4d4;
}

/*<!-- ============================================================== -->
 <!-- Maique About Section End Here -->
<!-- ============================================================== -->*/


/*<!-- ============================================================== -->
 <!-- Maique Brand Section Start Here -->
<!-- ============================================================== -->*/

.brand-section {
    padding: 100px 0;
    background-color: #fff8f8;
}

.brand-thumb  img {
    margin: auto;
    transition: .5s;
}

.brand-thumb  img:hover {
    filter: sepia(1);
}

/*<!-- ============================================================== -->
 <!-- Maique Brand Section End Here -->
<!-- ============================================================== -->*/



/*<!-- ============================================================== -->
 <!-- Maique According Section start Here -->
<!-- ============================================================== -->*/

section.accordian-section {
    padding: 100px 0;
}

section.accordian-section .maique-section-title h1 {
	width: 90%;
}

.according-desc p {
    margin: 30px 0;
}

.according-list i {
    font-size: 28px;
    color: var(--mio-color);
}

.according-list ul li {
    margin: 10px 0;
}

.according-list {
    margin-bottom: 40px;
}

.according-thumb img {
    margin-left: 1rem;
}

/*<!-- ============================================================== -->
 <!-- Maique According Section End Here -->
<!-- ============================================================== -->*/


/*<!-- ============================================================== -->
 <!-- Maique Achievement Section Start Here -->
<!-- ============================================================== -->*/

section.achievement-section {
    padding: 100px 0 70px;
    background-color: #fff8f8;
}

section.achievement-section .maique-section-title h1 {
	width: 40%;
}

.achievement--single-box {
    margin: 40px 0 30px;
}

.achievement-box-title h4 {
    font-size: 22px;
    line-height: 34px;
    color: #282828;
    font-weight: 700;
    margin: 14px 0;
}

.achivement-box-desc p {
    font-weight: 500;
    margin: 0 ;
}

/*<!-- ============================================================== -->
 <!-- Maique Achievement Section End Here -->
<!-- ============================================================== -->*/



/*<!-- ============================================================== -->
 <!-- Maique Service Section Start Here -->
<!-- ============================================================== -->*/

section.service-section {
    padding: 100px 0 70px;
}

.service-desc {
    margin: auto;
    width: 100%;
    padding: 15px 0 26px;
    margin-bottom: 30px;
}

.service-single-box {
    margin-bottom: 30px;
}

.service-box-thumb img {
    width: 100%;
    transition: .5s;
}

.service-box-content {
    background-color: #fff8f8;
    padding: 28px 32px 32px;
}

.service-box-title h3 {
    font-size: 22px;
    line-height: 26px;
    color: #232323;
    font-weight: 700;
    margin-bottom: 17px;
}

.service-box-desc p {
    margin: 0;
}

/*<!-- ============================================================== -->
 <!-- Maique Service Section End Here -->
<!-- ============================================================== -->*/


/*<!-- ============================================================== -->
 <!-- Maique Testimonial Section Start Here -->
<!-- ============================================================== -->*/

section.testimonial-section {
    padding: 100px 0;
    background-color: #fff8f8;
}

.testimonial-desc p {
    margin: auto;
    width: 39%;
    padding: 15px 0 34px;
}

.testimonial-box {
    text-align: center;
    position: relative;
    padding: 42px 42px 0 42px;
    z-index: 1;
}

.testimonial-box::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 74%;
    background: #fff;
    z-index: -1;
}

.testimonial-box img {
    display: inline-block !important;
}

.testimonial-box-desc p {
    margin: 24px 0;
}

.testimonial-rate ul li {
    display: inline-block;
    font-size: 13px;
    color: var(--mio-color);
    margin-bottom: 32px;
}

.testimonial-profile-title h4 {
    font-size: 18px;
    line-height: 28px;
    color: #282828;
    font-weight: 700;
    margin: 12px 0 4px;
}

.testimonial-profile-designation h6 {
    font-size: 16px;
    line-height: 28px;
    color: #505050;
    font-weight: 400;
}

/*<!-- ============================================================== -->
 <!-- Maique Testimonial Section End Here -->
<!-- ============================================================== -->*/



/*<!-- ============================================================== -->
 <!-- Maique Course Section Start Here -->
<!-- ============================================================== -->*/

section.course-section {
    padding: 100px 0 70px;
}

.course-desc p {
    margin: auto;
    width: 48%;
    padding: 18px 0 34px;
}

.course-single-box {
    margin-bottom: 30px;
}

.course-box-thumb {
    position: relative;
    overflow: hidden;
}

.course-single-box:hover .course-box-thumb img {
    transform: scale(1.1);
}

.course-box-thumb img {
    width: 100%;
    transition: .5s;
}

.course-box-price h6 {
    font-size: 14px;
    line-height: 30px;
    color: #fff;
    font-weight: 500;
    width: 100px;
    text-align: center;
    height: 30px;
    border-radius: 15px;
    background-color: var(--mio-color);
    position: absolute;
    top: 20px;
    right: 20px;
}

.course-box-content {
    padding: 22px 8px 30px 30px;
    background-color: #fff8f8;
}

.course-box-time h6 {
    font-size: 14px;
    line-height: 28px;
    color: #505050;
    font-weight: 400;
    float: left;
    margin-right: 40px;
}

.course-box-lessons h6 {
    font-size: 16px;
    line-height: 28px;
    color: #505050;
    font-weight: 400;
}

.course-box-time i,
.course-box-lessons i {
    color: var(--mio-color);
}

.course-box-title a {
    font-size: 22px;
    line-height: 34px;
    color: #282828;
    font-weight: 700;
    margin-top: 16px;
    transition: .5s;
}

.course-single-box:hover .course-box-title a {
    color: var(--mio-color);
    filter: hue-rotate(360deg);
}

/*<!-- ============================================================== -->
 <!-- Maique Course Section End Here -->
<!-- ============================================================== -->*/



/*<!-- ============================================================== -->
 <!-- Maique Course Section End Here -->
<!-- ============================================================== -->*/

section.guide-section {
    padding: 100px 0;
    background-color: #fff8f8;
}

section.guide-section .maique-section-title h1 {
    width: 74%;
}

.guide-thumb {
	text-align: center;
	margin-left: 4rem;
}

.guide-desc {
    margin: 26px 0 38px;
}

.guide-desc p:first-child {
    padding-bottom: 18px;
    border-bottom: 1px solid #d5d5d5;
}

/*<!-- ============================================================== -->
 <!-- Maique Course Section End Here -->
<!-- ============================================================== -->*/



/*<!-- ============================================================== -->
 <!-- Maique Blog Section Start Here -->
<!-- ============================================================== -->*/

section.blog-section {
    padding: 100px 0 70px;
}

.blog-desc p {
    margin: auto;
    width: 50%;
    padding: 18px 0 34px;
}

.blog-single-box {
    margin-bottom: 30px;
}

.blog-box-thumb img {
    width: 100%;
}

.blog-box-contant {
    padding: 14px 24px 0 30px;
}

.blog-box-date h6 {
    font-size: 12px;
    line-height: 30px;
    color: #505050;
    font-weight: 400;
    margin-bottom: 14px;
}

.blog-box-title a {
    font-size: 22px;
    line-height: 30px;
    color: #232323;
    font-weight: 700;
}

/*<!-- ============================================================== -->
 <!-- Maique Blog Section End Here -->
<!-- ============================================================== -->*/


/*<!-- ============================================================== -->
 <!-- Maique Follow Section Start Here -->
<!-- ============================================================== -->*/

section.follow-section {
    padding: 100px 0;
    background-color: #fff8f8;
}

.follow-box-thumb img {
    width: 100%;
    height: 300px;
}

.follow-desc p {
    margin: auto;
    padding: 8px 0 46px;
    width: 56%;
}

section.follow-section.style-2 .follow-desc p {
    width: 39%;
}

/*<!-- ============================================================== -->
 <!-- Maique Follow Section End Here -->
<!-- ============================================================== -->*/


/*<!-- ============================================================== -->
 <!-- Maique Fotter Section Start Here -->
<!-- ============================================================== -->*/

footer.footer-section {
    padding: 100px 0 0;
    background-color: #560d21;
}

.footer-desc p {
    margin: 28px 0;
    color: #fff;
}

.footer-social ul li {
    display: inline-block;
    margin: 0 4px;
}

.footer-social a {
    width: 35px;
    height: 35px;
    border-radius: 30px;
    border: 1px solid #fff;
    text-align: center;
    line-height: 35px;
    color: #fff;
    position: relative;
    transition: .5s;
    z-index: 1;
}

.footer-social a:hover {
    color: #282828;
}

.footer-social a:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 30px;
    transform: scale(0);
    transition: .54s;
    z-index: -1;
}

.footer-social a:hover:before {
    transform: scale(1);
}

.footer-title h3 {
    font-size: 22px;
    line-height: 28px;
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 25px;
}

.footer-navigation ul li a {
    font-size: 16px;
    line-height: 34px;
    color: #ffffff;
    font-weight: 400;
    transition: .5s;
}

.footer-navigation ul li a:hover {
    color: var(--mio-color);
    filter: hue-rotate(360deg);
}

.footer-links a {
    font-size: 16px;
    line-height: 34px;
    color: #ffffff;
    font-weight: 400;
    transition: .5s;
}

.footer-links a:hover {
    color: var(--mio-color);
    filter: hue-rotate(360deg);
}

.footer-contact-open-time h6 {
    font-size: 16px;
    line-height: 34px;
    color: #ffffff;
    font-weight: 400;
}

.footer-contact-desc p {
    color: #fff;
    margin: 2px 0 22px;
}

footer.footer-section .maique-btn>a {
    padding: 13px 32px;
    color: #fff !important;
    width: 80%;
}

/* Fotter Bottom */

.footer-bottom-desc p {
    color: #fff;
    padding: 24px 0;
    border-top: 1px solid #d3d3d363;
    margin: 0;
}

.footer-bottom {
    text-align: center;
    margin-top: 100px;
}

/*<!-- ============================================================== -->
 <!-- Maique Fotter Section End Here -->
<!-- ============================================================== -->*/


/*<!-- ============================================================== -->
 <!-- ============================================================== -->
                <!-- Maique Homepage Two Section Start Here -->
 <!-- ============================================================== -->
<!-- ============================================================== -->*/



/*<!-- ============================================================== -->
 <!-- Maique Banner Section Start Here -->
<!-- ============================================================== -->*/

section.banner-section.style-2 {
    background: url(../images/main-thumb/banner-bg.jpg) no-repeat center;
    background-size: cover;
}

section.banner-section.style-2 .banner-title h1 {
	color: #fff;

	width: 70%;
	font-size: 68px;
}

section.banner-section.style-2 .banner-desc p {
    width: 42%;
    color: #000;
}

/*<!-- ============================================================== -->
 <!-- Maique Banner Section End Here -->
<!-- ============================================================== -->*/



/*<!-- ============================================================== -->
 <!-- Maique Course Section Start Here -->
<!-- ============================================================== -->*/


section.course-section.style-2 .course-box-content {
    padding: 22px 0 0 0;
    background-color: transparent;
}

/*<!-- ============================================================== -->
 <!-- Maique Course Section End Here -->
<!-- ============================================================== -->*/


/*<!-- ============================================================== -->
 <!-- Maique Counter Section Start Here -->
<!-- ============================================================== -->*/

section.counter-section {
    background-color: #e9e7f6;
    padding: 100px 0 70px;
}

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

.counter-title h2 {
    display: inline-block;
    font-size: 36px;
    line-height: 44px;
    color: #282828;
    font-weight: 700;
    margin: 30px 0 8px;
}

.counter-desc p {
    color: #38414a;
    font-weight: 500;
    margin: 0;
}

/*<!-- ============================================================== -->
 <!-- Maique Counter Section End Here -->
<!-- ============================================================== -->*/


/*<!-- ============================================================== -->
 <!-- Maique Portfolio Section Start Here -->
<!-- ============================================================== -->*/

section.portfolio-section {
    padding: 100px 0;
}

.portfolio-desc {
    margin: 17px 0 30px;
}

.portfolio-desc p {
    color: #000;
}

/*<!-- ============================================================== -->
 <!-- Maique Portfolio Section End Here -->
<!-- ============================================================== -->*/


/*<!-- ============================================================== -->
 <!-- Maique Testimonial Section Start Here -->
<!-- ============================================================== -->*/

section.testimonial-section.style-2 {
    background-color: #e9e7f6;
}

section.testimonial-section.style-2 .testimonial-slider {
    margin-top: 48px;
}

section.testimonial-section.style-2 .testimonial-box {
    text-align: left;
    padding: 20px 30px 30px;
}

section.testimonial-section.style-2 .testimonial-box::before {
    height: 100%;
}

section.testimonial-section.style-2 .testimonial-rate ul li {
    font-size: 12px;
    color: #000;
    margin: 0 -1px;
}

section.testimonial-section.style-2 .testimonial-box-desc p {
    margin: 13px 0 30px;
}

section.testimonial-section.style-2 .testimonial-profile {
    display: flex;
    align-items: center;
    gap: 10px;
}

section.testimonial-section.style-2 .testimonial-profile-title h4 {
    margin: 0;
}

section.testimonial-section.style-2 .testimonial-profile-designation h6 {
    color: #000;
    font-weight: 400;
}

section.testimonial-section.style-2 .owl-dots {
    text-align: center;
    margin-top: 44px;
}

section.testimonial-section.style-2 .owl-dot {
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background-color: #cccccc;
    display: inline-block;
    margin: 0 4px;
}

section.testimonial-section.style-2 .owl-dot.active {
    background-color: #999696;
}

/*<!-- ============================================================== -->
 <!-- Maique Testimonail Section End Here -->
<!-- ============================================================== -->*/


/*<!-- ============================================================== -->
 <!-- Maique Channel Section Start Here -->
<!-- ============================================================== -->*/

section.channel-section {
    padding: 100px 0;
}

.channel-thumb {
    position: relative;
}

.channel-thumb img {
    width: 100%;
    margin-left: -2rem;
}

.channel-thumb-btn a {
    width: 85px;
    height: 85px;
    border-radius: 42px;
    background-color: #fefefea1;
    text-align: center;
    line-height: 85px;
    position: absolute;
    top: 30px;
    left: 0;
    font-size: 30px;
    color: #000;
    -webkit-animation: play-btn 1s linear infinite;
    animation: play-btn 1s linear infinite;
}

.maique-section-sub-title h6 {
    font-size: 16px;
    line-height: 30px;
    color: #38414a;
    font-weight: 500;
}

.channel-desc p {
    color: #000;
    margin: 10px 0 34px;
    width: 88%;
}

/*<!-- ============================================================== -->
 <!-- Maique channel Section End Here -->
<!-- ============================================================== -->*/


/*<!-- ============================================================== -->
 <!-- Maique Events Section Start Here -->
<!-- ============================================================== -->*/

section.events-section {
    padding-bottom: 60px;
}

section.events-section .maique-section-title h1 {
    margin-bottom: 47px;
}

.events-box {
    background-color: #e9e7f6;
    margin-bottom: 40px;
}

.events-thumb img {
    width: 100%;
}

.event-details {
    margin-left: 30px;
}

.event-date h6 {
	font-size: 16px;
	line-height: 30px;
	color: #424242;
	font-weight: 400;
}

.event-title h3 {
    font-size: 22px;
    line-height: 30px;
    color: #000000;
    font-weight: 700;
    margin: 20px 0 16px;
}

.event-desc p {
    color: #000;
    width: 74%;
    margin-bottom: 30px;
}

/*<!-- ============================================================== -->
 <!-- Maique Events Section End Here -->
<!-- ============================================================== -->*/



/*<!-- ============================================================== -->
 <!-- Maique Subscribe Section Start Here -->
<!-- ============================================================== -->*/

section.subscribe-section {
    padding: 100px 0;
    background-color: #e9e7f6;
    text-align: center;
}

.subscribe-content {
    position: relative;
}

.subscribe-shape {
    position: absolute;
    top: 0;
    right: 8rem;
    -webkit-animation: dance2 2s alternate infinite;
    animation: dance2 2s alternate infinite;
}

.subscribe-shape2 {
    position: absolute;
    bottom: 0;
    left: 8rem;
    -webkit-animation: dance2 1.7s  alternate infinite;
    animation: dance2 1.7s alternate infinite;
}

.subscribe-desc p {
    color: #000;
    width: 46%;
    margin: auto;
    padding: 12px 0 34px;
}

.subscribe-form {
    display: inline-block;
}

.subscribe-form input {
    width: 473px;
    height: 52px;
    border: 1px solid #282828;
    padding: 10px 20px;
    background: transparent;
}

.subscribe-form button {
    display: inline-block;
    width: 140px;
    height: 52px;
    background-color: #282828;
    border-radius: 0;
    display: inline-block;
    font-size: 16px;
    line-height: 28px;
    color: #ffffff;
    font-weight: 500;
    position: absolute;
    right: 0;
    top: 0;
    border: none;
}

.subscribe-form button:hover {
    color: #fff;
}

.status.success {
    background: #fff;
    display: inline-block;
    padding: 6px 20px;
    border-radius: 5px;
    color: #000;
    font-weight: 500;
}

.status.success i {
    color: rgb(7, 223, 7);
}

.status.error {
    background: #fff;
    display: inline-block;
    padding: 6px 20px;
    border-radius: 5px;
    color: #000;
    font-weight: 500;
}

.status.error i {
    color: #f00;
}

/*<!-- ============================================================== -->
 <!-- Maique Subscribe Section End Here -->
<!-- ============================================================== -->*/


/*<!-- ============================================================== -->
 <!-- Maique Follow Section Start Here -->
<!-- ============================================================== -->*/

section.follow-section.style-2 {
    background: transparent;
}

/*<!-- ============================================================== -->
 <!-- Maique Follow Section End Here -->
<!-- ============================================================== -->*/


/*<!-- ============================================================== -->
 <!-- Maique Footer Section Start Here -->
<!-- ============================================================== -->*/

footer.footer-section.style-2 {
    background: url(../images/banners/footer_bg_1.jpg) no-repeat center;
	background-color: var(--mio-color);
}

.footer-pages a {
    font-size: 16px;
    line-height: 34px;
    color: #ffffff;
    font-weight: 400;
    transition: .5s;
}

.footer-pages a:hover {
    color: var(--mio-color);
    filter: hue-rotate(360deg);
}

.footer-support a {
    font-size: 16px;
    line-height: 34px;
    color: #ffffff;
    font-weight: 400;
    transition: .5s;
}

.footer-support a:hover {
    color: var(--mio-color);
    filter: hue-rotate(360deg);
}

.footer-gallery ul {
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    padding: 12px;
}

.footer-gallery img {
    width: 100%;
    height: 100%;
}

/* Footer Bottom */

footer.footer-section.style-2 .footer-bottom {
    background: #fff;
}

footer.footer-section.style-2 .footer-bottom-desc p {
    color: #000;
    font-weight: 600;
}

/*<!-- ============================================================== -->
 <!-- Maique Footer Section End Here -->
<!-- ============================================================== -->*/



/*<!-- ============================================================== -->
 <!-- ============================================================== -->
                <!-- Maique Homepage Three Section Start Here -->
 <!-- ============================================================== -->
<!-- ============================================================== -->*/



/*<!-- ============================================================== -->
 <!-- Maique Banner Section Start Here -->
<!-- ============================================================== -->*/

section.banner-section.style-3 {
    background: url(../images/main-thumb/banner3-bg.jpg) no-repeat center;
    background-size: cover;
}

.banner-sub-title h6 {
    position: relative;
    font-size: 16px;
    line-height: 28px;
    color: #10263d;
    font-weight: 500;
    padding-left: 54px;
}

.banner-sub-title h6:before {
    position: absolute;
    top: 12px;
    left: 5px;
    content: '';
    width: 40px;
    height: 2px;
    background-color: #ff4612;
}

section.banner-section.style-3 .banner-title h1 {
    font-size: 60px;
    line-height: 70px;
    color: #282828;
    font-weight: 500;
    width: 52%;
}

.banner-section.style-3 .banner-desc p {
    margin: 8px 0 42px;
    width: 45%;
}

.banner-form {
    display: inline-block;
}

.banner-form input {
    width: 521px;
    height: 60px;
    border-radius: 5px;
    background-color: #ffffff;
    border: navajowhite;
    padding: 10px 20px;
}

.banner-form button {
    font-size: 16px;
    line-height: 28px;
    color: #ffffff;
    font-weight: 500;
    width: 161px;
    height: 52px;
    border-radius: 5px;
    background-color: #ff4612;
    border: none;
    position: absolute;
    top: 4px;
    right: 4px;
    transition: .5s;
}
.banner-form button:hover {
    filter: hue-rotate(360deg);
}

/*<!-- ============================================================== -->
 <!-- Maique Banner Section End Here -->
<!-- ============================================================== -->*/



/*<!-- ============================================================== -->
 <!-- Maique Portfolio Section Start Here -->
<!-- ============================================================== -->*/

.portfolio-thumb img {
    width: 100%;
}

section.portfolio-section.style-3 .portfolio-content {
    background: #fff;
    filter: drop-shadow(0px 15px 30px rgba(0,0,0,0.15));
    width: 570px;
    margin-left: -7.5rem;
    padding: 16px 30px 30px;
    position: relative;
}

.maique-section-title.style-2 h1 {
    font-size: 36px;
    line-height: 48px;
    color: #232323;
    font-weight: 500;
}

.portfolio-designation h6 {
    font-size: 16px;
    line-height: 48px;
    color: #555555;
    font-weight: 400;
    position: relative;
}

.portfolio-designation h6:before {
    position: absolute;
    content: '';
    bottom: 0;
    left: 0;
    width: 72px;
    height: 2px;
    background: var(--mio-color)
;
}

.portfolio-social {
    position: absolute;
    right: 30px;
    bottom: 30px;
}

.portfolio-social ul li {
    display: inline-block;
    margin: 0 2px;
}

.portfolio-social a {
    width: 22px;
    height: 22px;
    border-radius: 11px;
    background-color: #ff4612;
    text-align: center;
    line-height: 22px;
    font-size: 12px;
    color: #fff;
    transition: .5s;
}

.portfolio-social a:hover {
    filter: hue-rotate(360deg);
}

/*<!-- ============================================================== -->
 <!-- Maique Portfolio Section End Here -->
<!-- ============================================================== -->*/



/*<!-- ============================================================== -->
 <!-- Maique Counter Section Start Here -->
<!-- ============================================================== -->*/

section.counter-section.style-2 {
    background-color: #fcf6ef;
}

section.counter-section.style-2  .counter-title h2 {
    font-weight: 500;
    margin: 0 0 8px;
}

/*<!-- ============================================================== -->
 <!-- Maique Counter Section End Here -->
<!-- ============================================================== -->*/


/*<!-- ============================================================== -->
 <!-- Maique Channel Section Start Here -->
<!-- ============================================================== -->*/

section.channel-section.style-2 .channel-thumb-btn a {
    color: var(--mio-color);
}

/*<!-- ============================================================== -->
 <!-- Maique Channel Section End Here -->
<!-- ============================================================== -->*/


/*<!-- ============================================================== -->
 <!-- Maique Latest News Section Start Here -->
<!-- ============================================================== -->*/

section.latest-news-section {
    padding: 100px 0 60px;
    background-color: #fcf6ef;
}

.latest-news-desc p {
    width: 43%;
    margin: 13px auto 44px;
}

.latest-news-single-box {
    margin-bottom: 40px;
}

.latest-news-box-thumb img {
    width: 100%;
    border-radius: 5px;
}

.latest-news-box-time h6, .latest-news-box-lessons h6 {
    font-size: 14px;
    line-height: 28px;
    color: #555555;
    font-weight: 400;
    float: left;
    margin-right: 20px;
    margin-top: 14px;
}

.latest-news-box-time h6 i,
.latest-news-box-lessons h6 i {
    color: var(--mio-color);
    font-size: 16px;
    padding-right: 4px;
}

.latest-news-box-title a {
    font-size: 22px;
   /* line-height: 35px;*/
    color: #000;
    font-weight: 500;
    transition: .5s;
    margin: 19px 0 0px;
}

.latest-news-box-title a:hover {
    color: var(--mio-color);
    filter: hue-rotate(360deg);
}

.latest-news-btn a {
    font-size: 20px;
    line-height: 28px;
    color: #282828;
    font-weight: 900;
    position: relative;
    padding-left: 40px;
}

.latest-news-btn a:before {
    position: absolute;
    content: '';
    top: 12px;
    left: 0;
    width: 30px;
    height: 1px;
    background-color: #ff4612;
}

/*<!-- ============================================================== -->
 <!-- Maique Latest News Section End Here -->
<!-- ============================================================== -->*/


/*<!-- ============================================================== -->
 <!-- Maique Upcoming Event Section Start Here -->
<!-- ============================================================== -->*/

section.upcoming-event-section {
    padding: 100px 0;
}

section.upcoming-event-section .maique-section-title h1 {
    margin-bottom: 40px;
}

.upcoming-event-thumb img {
	margin-left: -2rem;
}

.upcoming-event-box {
    display: flex;
    gap: 40px;
    align-items: center;
    border-radius: 5px;
    background-color: #fcf6ef;
    padding: 30px;
    position: relative;
    margin-bottom: 25px;
}

.upcoming-event-box:last-child {
    margin-bottom: 0;
}

.upcoming-event-date {
    background: #2E2D33;
    border-radius: 5px;
    padding: 10px 16px;
}

.upcoming-event-date h2 {
    font-size: 28px;
    line-height: 32px;
    color: #ff4612;
    font-weight: 500;
    text-align: center;
}

.upcoming-event-sub-title h6 {
    font-size: 14px;
    line-height: 18px;
    color: #ff4612;
    font-weight: 400;
    background: #fff;
    display: inline-block;
    padding: 5px 12px;
    border-radius: 4px;
}

.upcoming-box-title h4 {
    font-size: 20px;
    line-height: 30px;
    color: #282828;
    font-weight: 500;
    margin-top: 10px;
}

.upcoming-event-box-btn a {
    font-size: 30px;
    color: #000;
    position: absolute;
    right: 40px;
    top: 58px;
    transition: .4s;
}

.upcoming-event-box:hover .upcoming-event-box-btn a {
    filter: hue-rotate(360deg);
    color: var(--mio-color);
    right: 30px;
}

/*<!-- ============================================================== -->
 <!-- Maique Upcoming Event Section End Here -->
<!-- ============================================================== -->*/

/*<!-- ============================================================== -->
 <!-- Maique Follow Section Start Here -->
<!-- ============================================================== -->*/

section.follow-section.style-3 .follow-desc p {
    margin: auto;
    padding: 14px 0 46px;
    width: 36%;
}

/*<!-- ============================================================== -->
 <!-- Maique Follow Section End Here -->
<!-- ============================================================== -->*/


/*<!-- ============================================================== -->
 <!-- Maique Footer Section Start Here -->
<!-- ============================================================== -->*/

footer.footer-section.style-3 {
    background-color: #ff4612;
}

footer.footer-section.style-3 .footer-navigation ul li a:hover,
footer.footer-section.style-3 .footer-links ul li a:hover {
    color: #fff;
}

footer.footer-section.style-3 .maique-btn3>a {
    color: #000!important;
    background: #fff;
    border: 1px solid #fff;
}

footer.footer-section.style-3 .maique-btn3>a:hover {
    color: #fff !important;
}

footer.footer-section.style-3 .maique-btn3>a:before {
    background: var(--mio-color);
}

/*<!-- ============================================================== -->
 <!-- Maique Footer Section End Here -->
<!-- ============================================================== -->*/



/*<!-- ============================================================== -->
 <!-- ============================================================== -->
            <!-- Maique Homepage Three Section Start Here -->
 <!-- ============================================================== -->
<!-- ============================================================== -->*/


/*<!-- ============================================================== -->
 <!-- Maique Header  Section Start Here -->
<!-- ============================================================== -->*/

header.header-manu-section.style-4 {
    background: #0f253d;
}

header.header-manu-section.style-4 nav.header-menu ul li a {
    color: #fff;
}

header.header-manu-section.style-4 nav.header-menu ul li a:hover {
    color: var(--mio-color) ;
    filter: hue-rotate(360deg);
}

header.header-manu-section.style-4 .maique-btn4>a {
    color: #0f253d !important;
    background: #fff;
    border: 1px solid #fff;
}

header.header-manu-section.style-4 .maique-btn4>a:hover {
    color: #fff !important;
}

header.header-manu-section.style-4 .maique-btn4>a:before {
    background: #0f253d;
}


/*<!-- ============================================================== -->
 <!-- Maique Header Section End Here -->
<!-- ============================================================== -->*/


/*<!-- ============================================================== -->
 <!-- Maique Banner Section start Here -->
<!-- ============================================================== -->*/

section.banner-section.style-4 {
    background: url(../images/main-thumb/banner4-bg.jpg) no-repeat center;
    background-size: cover;
}

section.banner-section.style-4 .banner-title h1 {
    font-size: 60px;
    line-height: 75px;
    color: #282828;
    font-weight: 500;
    width: 54%;
    margin: 7px 0 8px;
}

section.banner-section.style-4 .banner-desc p {
    margin: 8px 0 42px;
    width: 53%;
    color: #000;
}

section.banner-section.style-4 .banner-btn li {
    display: inline-block;
    margin-right: 20px;
}

section.banner-section.style-4 .banner-btn a {
    font-size: 16px;
    line-height: 28px;
    font-weight: 500;
    padding: 12px 32px;
    position: relative;
    z-index: 1;
    border: 1px solid #0f253d;
    transition: .5s;
}

section.banner-section.style-4 .banner-btn a::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scale(0);
    z-index: -1;
    transition: .5s;
}

section.banner-section.style-4 .banner-btn a:hover::before {
    transform: scale(1);
}

section.banner-section.style-4 .banner-btn li:first-child a {
    background: #0f253d;
    color: #fff;
}

section.banner-section.style-4 .banner-btn li:first-child a:hover {
    color: #0f253d;
}

section.banner-section.style-4 .banner-btn li:first-child a::before {
    background: #eef3f6;
}

section.banner-section.style-4 .banner-btn li:last-child a {
    background: transparent;
    color: #0f253d;
}

section.banner-section.style-4 .banner-btn li:last-child a:hover {
    color: #fff;
}

section.banner-section.style-4 .banner-btn li:last-child a::before {
    background: #0f253d;
}

/*<!-- ============================================================== -->
 <!-- Maique Banner Section End Here -->
<!-- ============================================================== -->*/


/*<!-- ============================================================== -->
 <!-- Maique About Section Start Here -->
<!-- ============================================================== -->*/

section.about-section.style-4 .maique-section-title h1 {
    width: 70%;
}

section.about-section.style-4 .about-desc p:first-child {
    padding-bottom: 0;
    border-bottom: 0;
}

/*<!-- ============================================================== -->
 <!-- Maique About Section End Here -->
<!-- ============================================================== -->*/



/*<!-- ============================================================== -->
 <!-- Maique Brand Section Start Here -->
<!-- ============================================================== -->*/

.brand-section.style-4 {
    background: #fff;
    filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.1));
}

/*<!-- ============================================================== -->
 <!-- Maique Brand Section End Here -->
<!-- ============================================================== -->*/


/*<!-- ============================================================== -->
 <!-- Maique News Feed Section Start Here -->
<!-- ============================================================== -->*/

section.news-feed-section {
    padding: 100px 0 70px;
    background-color: #f1f7fa;
}

section.news-feed-section  .maique-section-title h1 {
    margin-bottom: 38px;
}

.news-feed-single-box {
	margin-bottom: 30px;
}

.news-feed-box-thumb img {
    width: 100%;
}

.news-feed-box-time h6,
.news-feed-box-comments h6 {
    font-size: 14px;
    line-height: 28px;
    color: #293039;
    font-weight: 400;
    float: left;
    margin-right: 20px;
    margin-top: 14px;
}

.news-feed-box-time h6 i,
.news-feed-box-comments h6 i {
    margin-right: 6px;
}

.news-feed-box-title a {
    font-size: 22px;
    line-height: 36px;
    color: #000000;
    font-weight: 500;
    transition: .5s;
    margin: 12px 0 20px;
}

.news-feed-box-btn a {
    font-size: 14px;
    line-height: 28px;
    color: #10263d;
    font-weight: 500;
    transition: .5s;
}

/*<!-- ============================================================== -->
 <!-- Maique News Feed Section End Here -->
<!-- ============================================================== -->*/



/*<!-- ============================================================== -->
 <!-- Maique Testimonial Section Start Here -->
<!-- ============================================================== -->*/

section.testimonial-section.style-4 {
    background-color: #fff;
}


section.testimonial-section.style-2.style-4 .testimonial-box::before {
    background: #f1f7fa;
}

section.testimonial-section.style-2.style-4 .testimonial-box {
    padding: 30px 30px 30px;
}

.testimonial-icon i {
    font-size: 45px;
    color: #10263d;
}

/*<!-- ============================================================== -->
 <!-- Maique Testimonial Section End Here -->
<!-- ============================================================== -->*/



/*<!-- ============================================================== -->
 <!-- Maique Case Study Section Start Here -->
<!-- ============================================================== -->*/

section.case-study-section {
    background-color: #f1f7fa;
    padding: 100px 0 70px;
}

section.case-study-section  .maique-section-title h1 {
    margin-bottom: 38px;
}

.case-study-single-box {
	margin-bottom: 30px;
}

.case-study-box-thumb img {
    width: 100%;
}

.case-study-box-time h6 {
    font-size: 14px;
    line-height: 28px;
    color: #10263d;
    font-weight: 400;
    margin-top: 14px;
}

.case-study-box-time h6 i {
    margin-right: 6px;
}

.case-study-box-title a {
    font-size: 22px;
    line-height: 36px;
    color: #282828;
    font-weight: 500;
    margin: 14px 0 6px;
}

.case-study-box-desc p {
    color: #293039;
    margin: 0;
}

/*<!-- ============================================================== -->
 <!-- Maique Case Study Section End Here -->
<!-- ============================================================== -->*/


/*<!-- ============================================================== -->
 <!-- Maique Subscribe Section Start Here -->
<!-- ============================================================== -->*/

section.subscribe-section.style-4 {
    background: url(../images/main-thumb/subscribe2-bg.jpg) no-repeat center;
    background-size: cover;
}

section.subscribe-section.style-4 .maique-section-title h1 {
    color: #fff;
}

section.subscribe-section.style-4 .subscribe-desc p {
    color: #fff;
}

section.subscribe-section.style-4 .subscribe-form input {
    background: #fff;
    width: 570px;
    height: 65px;
    border: none;
}

section.subscribe-section.style-4  .subscribe-form button {
    background-color: #0f253d;
    right: 7px;
    top: 7px;
}

/*<!-- ============================================================== -->
 <!-- Maique Subscribe Section End Here -->
<!-- ============================================================== -->*/


/*<!-- ============================================================== -->
 <!-- Maique Follow Section Start Here -->
<!-- ============================================================== -->*/

section.follow-section.style-4 {
    background: #fff;
}

/*<!-- ============================================================== -->
 <!-- Maique Follow Section End Here -->
<!-- ============================================================== -->*/



/*<!-- ============================================================== -->
 <!-- Maique Footer Section Start Here -->
<!-- ============================================================== -->*/

footer.footer-section.style-4 {
    background: #0f253d;
}

.footer-follow-title h6 {
    font-size: 22px;
    line-height: 28px;
    color: #ffffff;
    font-weight: 500;
    margin-bottom: 24px;
}

.footer-services a {
    font-size: 16px;
    line-height: 40px;
    color: #ffffff;
    font-weight: 400;
}

footer.footer-section.style-4 .footer-title h3 {
    margin-top: 14px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.contact-item-icon i {
    font-size: 26px;
    color: #fff;
}

.contact-item-contect {
    margin-bottom: 8px;
}

.contact-item-contect h6 {
    font-size: 16px;
    line-height: 28px;
    color: #ffffff;
    font-weight: 400;
}

.contact-item-contect {
    margin-bottom: 8px;
}

/*<!-- ============================================================== -->
 <!-- Maique Footer Section End Here -->
<!-- ============================================================== -->*/




/*<!-- ============================================================== -->
 <!-- ============================================================== -->
            <!-- Maique Innerpage Section Start Here -->
 <!-- ============================================================== -->
<!-- ============================================================== -->*/


/*<!-- ============================================================== -->
 <!-- Maique Banner Inner Section Start Here -->
<!-- ============================================================== -->*/

section.banner-inner-section {
    padding: 100px 0;
    background-size: cover;
}

.banner-inner-title h1 {
    color: #fff;
    font-size: 70px;
    font-weight: 500;
    line-height: 60px;
    color: #fff;

font-weight: bold;
font-family: "Montserrat", sans-serif;
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}

.banner-inner-link {
    margin-top: 20px;
}

.banner-inner-link ul li {
    display: inline-block;
    margin-right: 6px;
    color: #fff;
}

.banner-inner-link a {
    font-size: 20px;
    color: #fff;
    font-weight: 500;
    line-height: 30px;
}

.banner-inner-link ul li:last-child a {
    color: var(--mio-color);
    font-weight: 600;
}

/*<!-- ============================================================== -->
 <!-- Maique Banner Inner Section End Here -->
<!-- ============================================================== -->*/



/*<!-- ============================================================== -->
 <!-- Maique About Inner Section Start Here -->
<!-- ============================================================== -->*/

section.about-section.style-5 {
    background: #d1d1d138;
}

/*<!-- ============================================================== -->
 <!-- Maique About Inner Section End Here -->
<!-- ============================================================== -->*/


/*<!-- ============================================================== -->
 <!-- Maique Contact Inner Section Start Here -->
<!-- ============================================================== -->*/


section.contact-inner-section {
    padding: 80px 0 100px;
}

.contact-inner-form {
    margin-top: 34px;
}

.form-top {
    display: flex;
    gap: 30px;
    align-items: center;
    margin-bottom: 20px;
}

.form-top input {
    height: 60px;
    border-radius: 5px;
    background-color: #f1f3ef;
    width: 100%;
    padding: 10px 20px;
    border: none;
}

.form-top input::placeholder,
.form-bottom textarea::placeholder {
    font-size: 16px;
    line-height: 28px;
    color: #797979;
    font-weight: 400;
}

.form-bottom textarea {
    width: 100%;
    height: 180px;
    border-radius: 5px;
    background-color: #f1f3ef;
    border: none;
    padding: 10px 20px;
    resize: none;
    margin-bottom: 14px;
}

.form-button button {
    display: inline-block;
    font-size: 16px;
    line-height: 28px;
    color: #ffffff;
    font-weight: 600;
    border-radius: 5px;
    padding: 12px 32px;
    overflow: hidden;
    background-color: var(--mio-color)
;
    position: relative;
    z-index: 1;
    transition: .4s;
    border: none;
}

.form-button button:hover {
    filter: hue-rotate(360deg);
}

.form-button button::before {
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    width: 0;
    height: 100%;
    background: #333;
    transition: .5s;
    z-index: -1;
    border-radius: 5px;
}

.form-button button:hover::before {
    width: 100%;
    left: 0;
    filter: hue-rotate(360deg);
}

.contact-inner-item {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 56%;
    border-bottom: 1px solid #c6c6c6;
    padding: 31px 0 26px;
}

.contact-inner-item:nth-child(1) {
    margin-top: 14px;
}

.contact-inner-item-title h6 {
    font-size: 20px;
    line-height: 28px;
    color: #333333;
    font-weight: 600;
    margin: 0;
}

.contact-inner-item-desc {
    margin: 8px 0 0;
}

.contact-inner-item-desc p {
    line-height: 26px;
    margin: 0;
}

.contact-inner-item-desc a {
    display: block;
    line-height: 26px;
    color: var(--mio-color);
}

.contact-inner-social ul li {
    display: inline-block;
    margin: 24px 2px;
}

.contact-inner-social a {
    width: 45px;
    height: 45px;
    border-radius: 22px;
    background-color: #797979;
    line-height: 45px;
    text-align: center;
    display: inline-block;
    color: #fff;
    position: relative;
    z-index: 1;
}

.contact-inner-social a:before {
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--mio-color)
;
    z-index: -1;
    border-radius: 30px;
    transition: .5s;
    transform: scale(0);
}

.contact-inner-social a:hover:before {
    transform: scale(1);
}

.contact-location {
    padding-bottom: 100px;
}

.contact-location iframe {
    width: 100%;
    height: 591px;
}


/*<!-- ============================================================== -->
 <!-- Maique Contact Inner Section End Here -->
<!-- ============================================================== -->*/


/*<!-- ============================================================== -->
 <!-- Maique Blog Details Inner Section Start Here -->
<!-- ============================================================== -->*/

section.blog-details {
    padding: 100px 0;
}

.blog-details-thumb img {
    /*width: 100%;   juan*/
    border-radius: 5px;
}

.blog-detials-post-date h6 {
    display: inline-block;
    font-size: 15px;
    line-height: 15px;
    color: #797979;
    font-weight: 500;
    font-family: "Montserrat", sans-serif;
    margin: 30px 20px 12px 0;
}

.blog-detials-post-date i {
    color: var(--mio-color)
;
    padding-right: 6px;
    font-size: 18px;
}

.blog-details-title h1 {
    font-size: 35px;
    line-height: 60px;
    color: #333333;
    font-weight: 700;
    margin: 0 0 20px;
}

.blog-detials-desc p span {
    color: var(--mio-color)
;
    font-weight: 500;
}

.shop-detials-shere h4 {
    font-size: 20px;
    line-height: 28px;
    color: #333333;
    font-weight: 600;
    margin: 0;
}

.blog-details-social {
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 34px 0;
    border-top: 1px solid #e4e1e1;
    padding: 18px 0 0;
}

.blog-details-social-title h5 {
    font-size: 22px;
    font-weight: 400;
    line-height: 34px;
    margin: 0;
}

.blog-details-social-link ul li {
    display: inline-block;
    margin: 0 2px;
}

.blog-details-social-link a {
    width: 45px;
    height: 45px;
    border-radius: 22px;
    background-color: #797979;
    line-height: 45px;
    text-align: center;
    display: inline-block;
    color: #fff;
    position: relative;
    z-index: 1;
}

.blog-details-social-link a:before {
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--mio-color)
;
    z-index: -1;
    border-radius: 30px;
    transition: .5s;
    transform: scale(0);
}

.blog-details-social-link a:hover:before {
    transform: scale(1);
}

.blog-details-box {
    display: flex;
    align-items: center;
    gap: 30px;
}

.blog-detials-single-box {
    border-radius: 5px;
    background-color: #f8f9f7;
    text-align: center;
    padding: 58px 0;
}

.blog-detials-single-box h4 {
    font-size: 20px;
    line-height: 30px;
    color: #333333;
    font-weight: 600;
    width: 70%;
    margin: auto;
}

.blog-title h2 {
    font-size: 24px;
    line-height: 30px;
    color: #333333;
    font-weight: 600;
    margin: 42px 0 34px;
}

.related-blog-single-box {
    border-radius: 5px;
    filter: drop-shadow(0px 5px 30px rgba(226,226,226,0.5));
    background-color: #ffffff;
}

.blog-box-thumb img {
    width: 100%;
    border-radius: 4px 4px 0 0;
}

.blog-box-thumb {
    position: relative;
    overflow: hidden;
}

.blog-box-thumb:before {
    position: absolute;
    content: '';
    top: 0%;
    left: 0;
    width: 0%;
    height: 100%;
    background: rgb(27 27 30 / 60%);
    transition: .4s;
    border-radius: 4px 0 0 0;
}

.blog-box-thumb:after {
    position: absolute;
    content: '';
    top: 0%;
    right: 0;
    width: 0%;
    height: 100%;
    background: rgb(27 27 30 / 60%);
    transition: .4s;
    border-radius: 0 4px 0 0;
}

.related-blog-single-box:hover .blog-box-thumb:before,
.related-blog-single-box:hover .blog-box-thumb:after{
    width: 50%;
}

.blog-content {
    padding: 32px;
    position: relative;
    z-index: 1;
}

.blog-content:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--mio-color)
;
    border-radius: 0 0 5px 5px;
    transition: .4s;
    transform: scale(0);
    z-index: -1;
}

.related-blog-single-box:hover .blog-content:before{
    transform: scale(1);
    filter: hue-rotate(360deg);
}

.related-box-btn a {
    color: #333333;
    transition: .5s;
}

.related-blog-single-box:hover .related-box-btn a {
    color: #fff;
}

.blog-box-date h5 {
    font-size: 16px;
    line-height: 50px;
    color: var(--mio-color)
;
    font-weight: 400;
    margin: 0;
    transition: .4s;
}

.related-blog-single-box:hover .blog-box-date h5{
    color: #fff;
}

.related-blog-single-box .blog-box-title a {
    display: inline-block;
    font-size: 18px;
    line-height: 30px;
    color: #333;
    font-weight: 500;
    margin: 10px 0 20px;
    transition: .4s;
}

.related-blog-single-box:hover .blog-box-title a {
    color: #fff;
}

.blog-box-footer {
    align-items: center;
    display: flex;
    gap: 12px;
    border-top: 1px solid rgba(39,39,39,0.10196078431372549);
    padding: 20px 0 0;
    transition: .4s;
}

.related-blog-single-box:hover .blog-box-footer{
    border-top: 1px solid #fff;
}

.posted-by a,
.post-comment a {
    font-size: 15px;
    line-height: 30px;
    color: #333;
    font-weight: 400;
    display: inline-block;
    transition: .4s;
}

.related-blog-single-box:hover .posted-by a,
.related-blog-single-box:hover .post-comment a,
.related-blog-single-box:hover .posted-by a i,
.related-blog-single-box:hover .post-comment a i{
    color: #fff;
}

.posted-by a i ,
.post-comment a i {
    color: var(--mio-color)
;
    transition: .4s;
}

.blog-box-btn a {
    color: #1f1f1f;
    margin-left: 32px;
    transition: .4s;
}

.related-blog-single-box:hover .blog-box-btn a{
    color: #fff;
}

.comments-title h4 {
    font-size: 24px;
    line-height: 30px;
    color: #333333;
    font-weight: 600;
    margin: 42px 0 34px;
}

.blog-details-comments-item {
    display: flex;
    gap: 24px;
    position: relative;
    border-bottom: 1px solid #e0dcdc;
    padding-bottom: 46px;
}

.blog-details-comments-item:nth-child(3) {
    margin-top: 70px;
}

.comment-profile i {
    font-size: 80px;
    color: #d8d8d8;
    margin-top: 6px;
    display: inline-block;
}

.comment-title h5 {
    margin: 0px 0 20px;
    font-size: 20px;
    line-height: 30px;
    color: #333333;
    font-weight: 600;
}

.comment-reply button {
    font-size: 18px;
    line-height: 30px;
    color: #ffffff;
    font-weight: 600;
    font-family: "Montserrat", sans-serif;
    text-align: center;
    width: 92px;
    height: 32px;
    border-radius: 5px;
    background-color: var(--mio-color)
;
    border: none;
    position: absolute;
    top: 0;
    right: 0;
    transition: .5s;
}

.comment-reply button:hover {
    filter: hue-rotate(360deg);
}

.add-comment-title h4 {
    font-size: 24px;
    line-height: 60px;
    color: #333333;
    font-weight: 600;
    margin: 32px 0;
}

.blog-details-form-top textarea {
    width: 100%;
    height: 225px;
    border-radius: 5px;
    background-color: #fcfcfc;
    border: 1px solid #e6e6e6;
    padding: 10px 20px;
    resize: none;
    margin-bottom: 13px;
}

.blog-details-form-middle input {
    display: inline-block;
    width: 100%;
    height: 60px;
    border-radius: 5px;
    background-color: #fcfcfc;
    border: 1px solid #e6e6e6;
    padding: 10px 20px;
    margin-bottom: 20px;
}

.blog-details-form-bottom {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 10px;
}

.form-bottom-email,
.form-bottom-site {
    width: 100%;
}

.form-bottom-email input, .form-bottom-site input {
    display: inline-block;
    width: 100%;
    height: 60px;
    border-radius: 5px;
    background-color: #fcfcfc;
    border: 1px solid #e6e6e6;
    padding: 10px 20px;
}

.form-bottom-email input::placeholder, .form-bottom-site input::placeholder, 
.blog-details-form-middle input::placeholder, .blog-details-form-top textarea::placeholder {
    font-size: 16px;
    line-height: 28px;
    color: #797979;
    font-weight: 400;
}

.form-condition input {
    float: left;
    margin-right: 10px;
}

.form-condition p {
    margin: 0;
    display: inline-block;
}

.form-condition input {
    float: left;
    margin: 7px 10px 0 0;
    cursor: pointer;
}

.blog-details-form-btn button {
    display: inline-block;
    font-size: 16px;
    line-height: 28px;
    color: #ffffff;
    font-weight: 600;
    border-radius: 5px;
    padding: 12px 32px;
    overflow: hidden;
    background-color: var(--mio-color)
;
    position: relative;
    z-index: 1;
    transition: .4s;
    border: none;
    margin-top: 24px;
}

.blog-details-form-btn button:hover {
    filter: hue-rotate(360deg);
}

.blog-details-form-btn button::before {
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    width: 0;
    height: 100%;
    background: #333;
    transition: .5s;
    z-index: -1;
    border-radius: 5px;
}

.blog-details-form-btn button:hover::before {
    width: 100%;
    left: 0;
    filter: hue-rotate(360deg);
}

.shop-categories {
    margin-top: 30px;
}

.read-more a {
    font-size: 17px;
    line-height: 28px;
    color: #282828;
    font-weight: 500;
    margin-bottom: 40px;
    display: inline-block;
}

.recent-post a {
    display: inline-block;
}

.recent-post-icon {
    width: 60px;
    height: 60px;
    float: left;
    margin-right: 5px;
    margin-top: 4px;
}

.recent-post-icon img {
    border-radius: 5px;
}

.post-title h5 {
    font-size: 16px;
    line-height: 24px;
    color: #282828;
    font-weight: 500;
    margin: 0;
}

.post-date h5 {
    font-size: 14px;
    color: #616161;
    font-weight: 400;
    margin: 0;
    line-height: 24px;
}

.post-date i{
    color: var(--mio-color)
;
    padding-right: 6px;
}

.search-catagory {
    position: relative;
    display: inline-block;
    width: 100%;
}

.search-catagory input {
    width: 100%;
    height: 60px;
    padding: 10px 30px;
    background-color: #fcfcfc;
    border: 1px solid #e6e6e6;
    border-radius: 5px;
}

.search-catagory button {
    position: absolute;
    top: 0;
    bottom: 0;
    font-size: 26px;
    border: none;
    right: 0;
    color: #fff;
    background: var(--mio-color)
;
    width: 80px;
    border-radius: 0 5px 5px 0;
}

.course-dtls-section .shop-categories {
    background: #fff;
}

.shop-categories {
    margin-top: 30px;
    background: #fff;
    padding: 30px;
    border-radius: 5px;
    background-color: #f8f9f7;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.shop-section-title h3 {
    font-size: 20px;
    line-height: 45px;
    color: #333333;
    font-weight: 700;
    margin: 0 0 20px;
    padding-bottom: 16px;
    border-bottom: 3px solid #e6e5e5;
    position: relative;
}

.shop-section-title h3:before {
    position: absolute;
    content: '';
    top: 61px;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--mio-color)
;
}

.shop-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.shop-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 8px 0;
    font-weight: 400;
    color: var(--black-color);
}

.shop-list-left i {
    width: 25px;
    height: 25px;
    display: inline-block;
    border-radius: 4px;
    color: #fff;
    text-align: center;
    line-height: 28px;
    font-size: 20px;
    background: #fff;
    margin-right: 8px;
    transition: .5s;
    cursor: pointer;
    border: 1px solid var(--black-color);
    color:var(--black-color) ;
;
}

.shop-list-left i:hover, 
.shop-list-left i.active {
    background: var(--black-color)
;
    filter: hue-rotate(360deg);
}

.cloud-tag li {
    display: inline-block;
    margin: 10px 6px 0 0;
}

.cloud-tag li a {
    padding: 6px 20px;
    background: #fff;
    border-radius: 4px;
    transition: .4s;
    font-weight: 400;
    position: relative;
    display: inline-block;
    z-index: 1;
    font-size: 14px;
    color: #333;
    transition: .5s;
}

.cloud-tag li a:hover {
    color: #fff;
}

.cloud-tag li a::before{
    position: absolute;
    content: '';
    top: 0;
    left: 50%;
    width: 0%;
    height: 100%;
    background-color: var(--mio-color)
;
    transition: .4s;
    z-index: -1;
    border-radius: 4px;
}

.cloud-tag li a:hover::before { 
    width: 100%;
    left: 0;
    filter: hue-rotate(360deg);
}

.newsletter {
    position: relative;
}

.newsletter input {
    width: 100%;
    height: 60px;
    border-radius: 3px;
    background-color: #ffffff;
    border: 1px solid #2828282e;
    padding: 10px 30px;
    margin-bottom: 20px;
    margin-top: 20px;
}

.newsletter i {
    opacity: 0.702;
    font-size: 15px;
    line-height: 28px;
    color: #282828;
    position: absolute;
    top: 36px;
    right: 18px;
}

.newsletter button {
    height: 60px;
    width: 100%;
    border-radius: 3px;
    background-color: var(--mio-color)
;
    border: none;
    font-size: 17px;
    line-height: 28px;
    color: #ffffff;
    font-weight: 500;
    position: relative;
    z-index: 1;
    overflow: hidden;
    transition: .4s;
}

.newsletter button:hover{
    filter: hue-rotate(250deg);
}

.newsletter button:before {
    position: absolute;
    content: '';
    top: 0;
    left: -50px;
    width: 0%;
    height: 100%;
    background: #282828;
    filter: hue-rotate(250deg);
    transform: skew(-29deg, 10deg) scale(1.8);
    transition: .4s;
    z-index: -1;
}

.newsletter button:after {
    position: absolute;
    content: '';
    top: 0;
    right: -74px;
    width: 0%;
    height: 100%;
    background: #282828;
    filter: hue-rotate(250deg);
    transform: skew(-29deg, 10deg) scale(1.8);
    transition: .4s;
    z-index: -1;
}

.newsletter button:hover:before,
.newsletter button:hover:after{
    width: 50%;
}

.comment ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
}

.recent-comment-icon i {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    background-color: #fff;
    display: inline-block;
    line-height: 50px;
    text-align: center;
    color: var(--mio-color)
;
    font-size: 18px;
    transition: .5s;
}

.comment ul li a:hover .recent-comment-icon i {
    background-color: var(--mio-color)
;
    color: #fff;
    filter: hue-rotate(360deg);
}

.recent-comment-content p {
    color: #333;
    margin: 0;
    transition: .5s;
}

.comment ul li a:hover .recent-comment-content p {
    color: #282828;
}

.contact-us {

    text-align: center;
    padding: 10px 0;
    margin-top: 30px;
    border-radius: 5px;
    position: relative;
}

.contact-us:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: #333;
    border-radius: 5px;
    opacity: 50%;*/
    z-index: -1;
}

.contact-title h1 {
    font-size: 46px;
    font-weight: 400;
    color: #fff;
    margin: 20px 0;
}

.contact-btn a {
    display: inline-block;
    font-size: 16px;
    color: #333;
    background: #fff;
    padding: 8px 28px;
    border-radius: 4px;
    position: relative;
    z-index: 1;
    margin-top: 10px;
    transition: .5s;
}

.contact-btn a:hover {
    color: #fff;
}

.contact-btn a:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--mio-color)
;
    border-radius: 4px;
    transition: .5s;
    z-index: -1;
    transform: scale(0);
}

.contact-btn a:hover:before {
    transform: scale(1);
    filter: hue-rotate(360deg);
}

/*<!-- ============================================================== -->
 <!-- Maique Blog Details Inner Section End Here -->
<!-- ============================================================== -->*/

/*<!-- ============================================================== -->
 <!-- Maique Faq Inner Section End Here -->
<!-- ============================================================== -->*/


section.faq-inner-section {
    padding: 100px 0;
}

section.faq-inner-section .Miaque-section-title h1 {
    font-weight: 500;
    margin: 28px auto 0;
}

ul.accordion {
    margin-top: 38px;
}

.accordion li {
    position: relative;
    z-index: 1;
    background: transparent;
    filter: drop-shadow(0px 5px 13.5px rgba(51,51,51,0.05));
    margin-bottom: 30px;
    border: 1px solid #d8d8d8;
}

.accordion li a {
    position: relative;
    width: 100%;
    display: block;
    cursor: pointer;
    background-color: transparent;
    padding: 10px 20px;
    z-index: 1;
    display: flex;
    justify-content: space-between;
}

.accordion-title {
    font-size: 18px;
    line-height: 28px;
    color: #282828;
    font-weight: 700;
    transition: .5s;
}

.accordion li a.active .accordion-title {
    color: var(--mio-color);
}

.accordian-icon  i {
    transform: rotate(0deg);
    transition: .5s;
    display: inline-block;
}

.accordion li a.active .accordian-icon i {
    transform: rotate(180deg);
    color: var(--mio-color);
}

.accordion li p {
    display: none;
    font-size: 16px;
    margin: 0;
    padding: 0  25px 25px;
}


/*<!-- ============================================================== -->
 <!-- Maique Faq Inner Section End Here -->
<!-- ============================================================== -->*/



/*<!-- ============================================================== -->
 <!-- Maique Portfolio Inner Section End Here -->
<!-- ============================================================== -->*/

section.portfolio-section {
    padding: 100px 0 70px;
}

section.portfolio-section .Miaque-section-title h1 {
    margin: 28px auto 0;
}

.portfolio-box {
    margin-top: 46px;
}

.portfolio-single-box {
    position: relative;
    margin-bottom: 30px;
}

.portfolio-box-thumb img {
    border-radius: 5px;
    width: 100%;
}

.portfolio-box-content {
    background: var(--mio-color)
;
    width: 80%;
    border-radius: 12px 0;
    text-align: center;
    padding: 20px 0;
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    margin: auto;
    transform: perspective(500px) rotateX(-90deg);
    transition: all 400ms linear 0ms;
    -webkit-transition: all 400ms linear 0ms;
    opacity: 0;
    visibility: hidden;
}

.portfolio-single-box:hover .portfolio-box-content {
    transform: perspective(500px) rotateX(0deg);
    opacity: 1;
    visibility: visible;
}

.portfolio-box-sub-title h6 {
    font-size: 16px;
    line-height: 28px;
    color: #fefefe;
    font-weight: 400;
}

.portfolio-box-title h5 {
    font-size: 22px;
    line-height: 28px;
    color: #fefefe;
    font-weight: 700;
    margin-top: 10px;
}

/*<!-- ============================================================== -->
 <!-- Maique Portfolio Inner Section End Here -->
<!-- ============================================================== -->*/




/*<!-- ============================================================== -->
 <!-- Miaque Portfolio Details Inner Section Start Here -->
<!-- ============================================================== -->*/

section.potfolio-details-section {
    padding: 100px 0;
    background: #f8f8f8;
}

.portfolio-info {
    background: #fff;
    filter: drop-shadow(0px 3px 30px rgba(189,189,189,0.26));
    padding: 68px 60px;
}

.portfolio-info-title h1 {
    font-size: 35px;
    line-height: 40px;
    color: #282828;
    font-weight: 500;
    margin: 0;
}

.portfolio-info-details {
    margin-top: 26px;
}

.portfolio-info-details h6 {
    font-size: 22px;
    line-height: 28px;
    color: #282828;
    font-weight: 500;
}

.portfolio-info-details span {
    font-weight: 400;
    font-size: 18px;
}

.portfolio-info-shere-title h5 {
    font-size: 22px;
    line-height: 60px;
    color: #282828;
    font-weight: 400;
    text-transform: capitalize;
    margin: 0;
}

.portfolio-info-share {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.portfolio-info-share ul li {
    display: inline-block;
    margin: 0 4px;
}

.portfolio-info-share ul li a {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background-color: #f8f5f0;
    display: inline-block;
    color: #282828;
    text-align: center;
    line-height: 40px;
    position: relative;
    z-index: 1;
    transition: .5s;
}

.portfolio-info-share ul li a:hover {
    color: #fff;
}

.portfolio-info-share ul li a::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--mio-color);
    transform: scale(0);
    z-index: -1;
    transition: .5s;
    border-radius: 20px;
}

.portfolio-info-share ul li a:hover::before {
    transform: scale(1);
    filter: hue-rotate(360deg);
}

.portfolio-info-thumb {
    filter: drop-shadow(0px 3px 30px rgba(189,189,189,0.26));
}

.portfolio-info-thumb img {
    width: 100%;
}

.portfolio-strategy {
    margin: 60px 0 120px;
    padding: 50px 60px;
    background: #fff;
    filter: drop-shadow(0px 3px 30px rgba(189,189,189,0.26));
}

.portfolio-strategy-title h1 {
    font-size: 35px;
    line-height: 40px;
    color: #282828;
    font-weight: 500;
    margin: 0 0 20px;
}

.portfolio-strategy-desc p {
    margin: 0;
}

.portfolio-related-title h1 {
    font-size: 35px;
    line-height: 60px;
    color: #282828;
    font-weight: 500;
    margin-bottom: 8px;
}

.portfolio-related-btn a {
    font-size: 14px;
    color: #616161;
    font-weight: 500;
    text-transform: uppercase;
    display: inline-block;
    width: 110px;
    height: 45px;
    background-color: #e4e4e4;
    text-align: center;
    line-height: 45px;
    margin-top: 20px;
    transition: .5s;
    position: relative;
    z-index: 1;
}

.portfolio-related-btn a:hover {
    color: #fff;
}

.portfolio-related-btn a:before {
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    width: 0%;
    height: 100%;
    background: var(--mio-color);
    transition: .5s;
    z-index: -1;
}

.portfolio-related-btn a:hover:before {
    width: 100%;
    filter: hue-rotate(360deg);
    left: 0;
}

.portfolio-related-thumb {
    position: relative;
    text-align: center;
}

.portfolio-related-thumb:before {
    position: absolute;
    content: '';
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: #282828;
    opacity: .7;
    transition: .5s;
}

.portfolio-related-thumb:hover:before {
    height: 100%;
    top: 0;
}

.portfolio-related-thumb img {
    width: 100%;
}

.related-thumb-content {
	position: absolute;
	bottom: -10%;
	left: 0;
	right: 0;
	visibility: hidden;
	opacity: 0;
    transition: .5s;
}

.portfolio-related-thumb:hover .related-thumb-content {
    bottom: 7%;
    visibility: visible;
    opacity: 1;
}

.related-thumb-content a {
    font-size: 18px;
    line-height: 30px;
    color: #ffffff;
    font-weight: 400;
    display: inline-block;
    padding: 10px 44px 10px 24px;
    background-color: var(--mio-color);
    transition: .5s;
    position: relative;
}

.related-thumb-content a:hover {
    filter: hue-rotate(360deg);
}

.related-thumb-content a i {
    transition: .5s;
    position: absolute;
    top: 11px;
    right: 20px;
}

.related-thumb-content a:hover i {
    right: 14px;
}

/*<!-- ============================================================== -->
 <!-- Miaque Portfolio Details Inner Section End Here -->
<!-- ============================================================== -->*/



/*<!-- ============================================================== -->
 <!-- Miaque Service Details Inner Section Start Here -->
<!-- ============================================================== -->*/


section.services-details {
    padding: 100px 0;
}

section.services-details h2 {
    font-size: 36px;
    line-height: 40px;
    margin-bottom: 16px;
}

section.services-details h3 {
    font-size: 30px;
    line-height: 40px;
    margin-bottom: 16px;
}

.service-sidebar {
    position: relative;
    display: block;
    max-width: 365px;
    width: 100%;
}

.service-sidebar .service-sidebar-single {
    position: relative;
    display: block;
    margin-bottom: 30px;
}

.service-sidebar .service-sidebar-single-services {
    position: relative;
    display: block;
    background: #f1f3ee;
    border-radius: 10px;
    padding: 35px 30px 25px;
}

.service-sidebar .service-sidebar-single-services .title {
    position: relative;
    display: block;
    margin-bottom: 12px;
    padding-left: 20px;
}

.service-sidebar .service-sidebar-single-services .title h3 {
    color: #333;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: -0.02em;
}

.service-sidebar .service-sidebar-single-services ul {
    position: relative;
    display: block;
    margin-top: 10px;
}
  
.service-sidebar .service-sidebar-single-services ul li {
    position: relative;
    display: block;
    margin-bottom: 5px;
    margin-top: -10px;
}

.service-sidebar .service-sidebar-single-services ul li:last-child {
    margin-bottom: 0;
}

.service-sidebar .service-sidebar-single-services ul li a {
    position: relative;
    display: block;
    color: #333;
    font-size: 18px;
    padding: 20px;
    border-radius: 5px;
    background: transparent;
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear;
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
    z-index: 1;
    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;
}

.service-sidebar .service-sidebar-single-services ul li a:hover {
    color: var(--mio-color);
}

.service-sidebar .service-sidebar-single-services ul li a:hover::before {
    opacity: 1;
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear;
    -webkit-transition-delay: 0.1s;
     transition-delay: 0.1s;
}

.service-sidebar .service-sidebar-single-services ul li a::before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    content: "";
    z-index: -1;
    opacity: 1;
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear;
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
    background: #ffffff;
    -webkit-box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.05);
    box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.05);
    border-radius: 10px;
}

.service-sidebar .service-sidebar-single-services ul li a i {
    font-size: 16px;
}

.service-sidebar .service-sidebar-single-services ul li.active a::before {
    opacity: 1;
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear;
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

.service-sidebar .service-sidebar-single-services ul li.active a i {
    color: var(--theme-color1);
}

.service-sidebar .service-sidebar-single-services ul li.active:first-child {
    margin-top: 20px;
}

.service-sidebar .service-sidebar-single-services ul li.active a{
    color: var(--mio-color);
}

.service-sidebar .service-sidebar-single-services ul li.active:last-child {
    margin-bottom: 35px;
}

.service-sidebar .service-sidebar-single-contact-box {
    position: relative;
    display: block;
    background-attachment: scroll;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 5px;
    background: url(../images/main-thumb/blog-details-thumb.jpg) no-repeat center;
    background-size: cover;
    padding: 50px 0px 44px;
    z-index: 1;
}

.service-sidebar .service-sidebar-single-contact-box::before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: var(--mio-color);
    border-radius: 5px;
    opacity: 40%;
    content: "";
    z-index: -1;
}

.service-sidebar .service-sidebar-single-contact-box .icon {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    border-radius: 50%;
}

.service-sidebar .service-sidebar-single-contact-box .icon:hover span::before {
    color: #fff;
}

.service-sidebar .service-sidebar-single-contact-box .icon span::before {
    position: relative;
    display: inline-block;
    font-size: 30px;
    line-height: 60px;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}

.service-sidebar .service-sidebar-single-contact-box .title {
    position: relative;
    display: block;
    margin-top: 20px;
    margin-bottom: 42px;
}

.service-sidebar .service-sidebar-single-contact-box .title h2 {
    color: #ffffff;
    font-size: 36px;
}

.service-sidebar .service-sidebar-single-contact-box .phone {
    font-size: 24px;
    line-height: 34px;
}

.service-sidebar .service-sidebar-single-contact-box .phone a {
    color: #ffffff;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}

.service-sidebar .service-sidebar-single-contact-box p {
    color: #ffffff;
    font-size: 14px;
    line-height: 22px;
}

.service-sidebar .service-sidebar-single-btn {
    position: relative;
    display: block;
}

.service-sidebar .service-sidebar-single-btn .thm-btn {
    font-size: 16px;
    padding: 13px 50px 28px;
}

.service-sidebar .service-sidebar-single-btn .thm-btn span::before {
    position: relative;
    display: inline-block;
    top: 13px;
    color: #334b35;
    font-size: 40px;
    padding-right: 25px;
    -webkit-transition: all 600ms ease;
    transition: all 600ms ease;
    font-weight: 500;
}

.service-sidebar .service-sidebar-single-btn .thm-btn:hover span::before {
    color: #ffffff;
}

.service-sidebar .banner-widget {
    position: relative;
    display: block;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    -webkit-box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.08);
    box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.08);
}

.service-sidebar .banner-widget .widget-content {
    position: relative;
    display: block;
    width: 100%;
    padding: 45px 30px 40px 30px;
    background: url(../images/main-thumb/service-details.jpg) no-repeat center;
    background-size: cover;
}

.widget-content:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #333;
    opacity: 60%;
}

.service-sidebar .banner-widget .widget-content .shape {
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 278px;
    background-repeat: no-repeat;
    background-size: cover;
}

.service-sidebar .banner-widget .content-box {
    position: relative;
    width: 100%;
}

.services-details__content img {
    width: 100%;
    border-radius: 4px;
}

.service-sidebar .banner-widget .content-box .icon-box {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 40px;
    text-align: center;
    border-radius: 5px;
    margin-bottom: 23px;
}

.service-sidebar .banner-widget .content-box .icon-box .icon-shape {
    position: absolute;
    top: -15px;
    right: -38px;
    width: 32px;
    height: 32px;
    background-repeat: no-repeat;
}

.service-sidebar .banner-widget .content-box h3 {
    display: block;
    font-size: 24px;
    line-height: 32px;
    color: #ffffff;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 22px;
}

.widget-btn a {
    position: relative;
    font-size: 14px;
    line-height: 25px;
    color: #333;
    padding: 15px 40px;
    font-weight: 600;
    background: #fff;
    letter-spacing: 0.05em;
    border-radius: 5px;
    overflow: hidden;
    text-transform: uppercase;
    z-index: 1;
    transition: .5s;
    display: inline-block;
}

.widget-btn a:hover{
    color: #fff;
}

.widget-btn a:before {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    content: "";
    transform: scale(0);
    background-color: var(--mio-color);
    -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    border-radius: 5px;
    transition: .5s;
    z-index: -1;
}

.widget-btn a:hover:before {
    transform: scale(1);
}

.service-sidebar-single-btn a {
    position: relative;
    font-size: 14px;
    line-height: 25px;
    color: #fff;
    padding: 15px 40px;
    font-weight: 600;
    background: var(--mio-color);
    letter-spacing: 0.05em;
    border-radius: 5px;
    overflow: hidden;
    text-transform: uppercase;
    z-index: 1;
    transition: .5s;
    display: inline-block;
    margin-top: 30px;
}

.service-sidebar-single-btn a:before {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    content: "";
    transform: scale(0);
    background-color: #333;
    -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    border-radius: 5px;
    transition: .5s;
    z-index: -1;
}

.service-sidebar-single-btn a:hover:before {
    transform: scale(1);
}

.service-sidebar .service-sidebar-single-btn .theme-btn {
    padding: 20px 50px;
}

.service-sidebar .service-sidebar-single-btn .theme-btn span::before {
    position: relative;
    display: inline-block;
    font-size: 36px;
    padding-right: 25px;
    margin-top: 7px;
    -webkit-transition: all 600ms ease;
    transition: all 600ms ease;
    font-weight: 500;
}
  
.services-details__content .feature-list .single-item {
    position: relative;
    display: block;
    border: 1px solid var(--mio-color);
    background:  #fff;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    -webkit-transition: all 600ms ease;
    transition: all 600ms ease;
}

.services-details__content .feature-list .single-item .icon-box {
    color: var(--mio-color);
    position: absolute;
    left: 20px;
    top: 16px;
    font-size: 18px;
    -webkit-transition: all 600ms ease;
    transition: all 600ms ease;
}

.services-details__content .feature-list .single-item .title {
    display: block;
    margin: 0;
    font-size: 16px;
    line-height: 32px;
    font-weight: 600;
    text-transform: uppercase;
    transition: .5s;
    color: var(--mio-color);
}

.services-details__content .feature-list .single-item:hover .title {
    color: #fff;
}

.services-details__content .feature-list .single-item:hover {
    background-color: var(--mio-color);
    color: #fff;
}

.services-details__content .feature-list .single-item:hover .icon-box {
    color: #fff;
}

/*<!-- ============================================================== -->
 <!-- Miaque Service Details Inner Section End Here -->
<!-- ============================================================== -->*/


/*<!-- ============================================================== -->
 <!-- Miaque Course Details Inner Section Start Here -->
<!-- ============================================================== -->*/

.course-dtls-section {
    padding: 70px 0 100px;
}

.course-dtls-thumb img {
    width: 100%;
}

.course-dtls-section .tab {
    padding: 42px 0px 0 25px;
}

.course-dtls-section .tabs li a {
    font-size: 20px;
    width: 135px;
    height: 48px;
    line-height: 48px;
}

.tab {
    position: relative;
    overflow: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
    padding: 0 1px 0 12px;
}

.course-dtls-section .tabs {
    display: inline-block;
}

.tabs li {
    margin-bottom: 30px;
    position: relative;
    display: inline-block;
}

.tabs li a {
    font-size: 30px;
    width: 100px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    color: var(--mio-color);
    border: 1px solid var(--mio-color);
    display: inline-block;
    margin-right: 0;
    margin-left: 10px;
    padding: 0;
    border-radius: 33px;
}

li.current a {
    color: #fff !important;
    background: var(--mio-color)!important;
}

.tabs_item:first-child {
    display: block;
}

.tabs_item {
    display: none;
}

/*form*/

.widget {
    float: left;
}

.widget select {
    padding: 15px 21px;
    display: inline-block;
    border: 1px solid var(--mio-color);
    appearance: none;
    border-radius: 30px;
    text-align: center;
}

.course-section .tutor-blog-content {
    text-align: left;
}

/*course*/

.tutor-single-blog-box2 {
    margin-bottom: 30px;
    display: flex;
}

.course-section .recipe-meta .recipe-steps, .course-section .recipe-meta .recipe-duration {
    margin-left: 25px;
}

span.course-price {
    float: right;
    font-size: 20px;
    color: var(--mio-color);
}

.course-section .tutor-blog-thumb img {
    width: inherit;
}

ul.course-rating li {
    display: inline-block;
    list-style: none;
    padding: 15px 0 0;
    font-size: 15px;
}

/*Overview*/

p.course-desc {
    margin: 18px 0 0;
}

.course-list-content {
    padding-left: 28px;
    position: relative;
    z-index: 1;
}

.course-list-content:before {
    position: absolute;
    content: "";
    top: 19px;
    left: 0px;
    width: 15px;
    height: 15px;
    background: var(--mio-color);
    border-radius: 30px;
}

.course-list-content h6 {
    font-size: 20px;
    padding: 16px 0 10px;
}

.course-list-content p {
    margin: 0;
}

h4.course-title.up {
    padding: 18px 0 0;
}

.course-widget-warp {
    background: #F9FAFC;
    padding: 40px 45px 40px 45px;
    margin-top: 30px;
}

.widget-item-list {
    display: flex;
    align-items: center;
}

.widget-item-list span i {
    color: var(--mio-color);
}

.widget-item-list p {
    line-height: 24px;
    margin: 15px 0 0 15px;
    display: inline-block;
}

/*curriculum*/

p.crlm-dtls {
    padding: 15px 0 15px;
}

.course-curriculum {
    text-align: left;
}

.tab_container2 {
    text-align: left;
}

.tab_container2 .accordion li a {
    border: 1px dotted var(--mio-color)!important;
    color: #232323 !important;
    font-size: 20px;
}

.tab_container2 .accordion li p {
    display: block !important;
    font-size: 17px;
    font-weight: 500;
    padding: 20px 30px 10px;
    margin: 0;
    background: rgba(30, 71, 153, .1);
    backdrop-filter: blur(1.9px);
    overflow: hidden;
    border-radius: inherit;
    cursor: pointer;
}

p.crse-dtls {
    display: inline-block;
    padding: 0 30px 20px !important;
    margin-bottom: 10px !important;
}

.tab_container2 .accordion li p i {
    color: var(--mio-color);
    padding-right: 6px;
}

span.clm-prv {
    background: #ff4a17;
    color: #fff;
    padding: 3px 6px;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    font-size: 12px;
    margin-left: 10px;
}

span.curricolumn-duration {
    float: right;
}

span.curricolumn-duration i {
    color: #616161 !important;
}

.tab_container2 .accordion a.active {
    color: var(--mio-color)!important;
    border: 1px dotted var(--mio-color)!important;
    background: transparent!important;
    border-radius: 5px 5px 0 0;
}

.tab_container2 .accordion li p:hover {
    color: var(--mio-color);
}

/*Instructor*/


.course-author-warpper {
    display: flex;
    text-align: left;
}

.author-content {
    padding-left: 25px;
}

.author-content h4 a {
    margin-bottom: 2px;
    font-weight: 600;
    font-size: 24px;
    line-height: 36px;
}

.author-content span {
    font-weight: 600;
    font-size: 16px;
    line-height: 26px;
    color: #ff4a17;
    display: block;
    margin-bottom: 20px;
}

.social-list ul li {
    display: inline-block;
}

.course-author-warpper .author-content .social-list ul li a {
    font-size: 16px;
    padding-right: 20px;
    color: #ff4a17;
}

.course-dtls-section .contact-form-box {
    text-align: left;
    padding: 30px 0 0;
}

/*Review*/

.review-wrapper {
    text-align: left;
}

.course-rating-box {
    background: #FFFFFF;
    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.07);
    border-radius: 5px;
    text-align: center;
    min-width: 200px;
    padding: 29px 10px;
}

.rating-number h3 {
    font-size: 72px;
    line-height: 90px;
    color: #232323;
}

.course-rating i {
    color: var(--mio-color);
    padding-right: 2px;
}

.review-wrapper .single-progress-bar {
    position: relative;
}

.review-wrapper .rating-text {
    display: inline-block;
    position: relative;
    top: 23px;
    font-size: 18px;
}

.rating-text i {
    color: var(--mio-color);
}

.review-wrapper .progress {
    max-width: 86%;
    margin-left: 43px;
    height: 14px;
    background: #EEEEEE;
}

.progress.upp {
    background: var(--mio-color);
}


.review-wrapper span.rating-value {
    position: absolute;
    right: 0;
    top: 50%;
}

/*widget sidebar
===================*/

.dreamhub-widget {
    padding: 30px;
    background: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    margin-bottom: 30px;
    border-radius: 5px;
}

.video-thumb img {
    width: 100%;
}

.widget-dtls-content {
    padding: 10px 0 0;
}

.widget-dtls-content ul li {
    list-style: none;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #EEEEEE;
    padding: 15px 0 15px;
}

.widget-dtls-content ul li i {
    color: var(--mio-color);
    margin-right: 10px;
}

/*button*/

a.btn-bg-alt {
    border-radius: 5px;
    display: inline-block;
    width: 100%;
    color: var(--mio-color);
    background: rgba(0, 190, 161, 0.1);
    padding: 16px 30px;
    font-size: 18px;
    font-weight: 600;
    transition: .5s;
    margin-top: 35px;
}

a.btn-bg-alt:hover {
    background: var(--mio-color);
    color: #fff;
}

a.btn-bg-alt2 {
    border-radius: 5px;
    display: inline-block;
    width: 100%;
    color: #fff;
    background: var(--mio-color);
    padding: 16px 30px;
    font-size: 18px;
    font-weight: 600;
    transition: .5s;
    margin-top: 30px;
}

a.btn-bg-alt2:hover {
    background: #232323;
    color: #fff;
}

/*<!-- ============================================================== -->
 <!-- Miaque course Details Inner Section End Here -->
<!-- ============================================================== -->*/


/*<!-- ============================================================== -->
 <!-- Miaque Team Member Inner Section Start Here -->
<!-- ============================================================== -->*/

section.team-inner-section {
    padding: 100px 0 70px;
}

section.team-inner-section .maique-section-title h1 {
    margin: 28px auto 0;
}

.team-inner-box {
    margin-top: 46px;
}

.team-inner-single-box {
    border-radius: 5px;
    text-align: center;
    overflow: hidden;
    margin-bottom: 30px;
}

.team-inner-box-thumb {
    position: relative;
    overflow: hidden;
}

.team-inner-box-thumb img {
    width: 100%;
    transition: .5s;
}

.team-inner-single-box:hover .team-inner-box-thumb img {
    transform: scale(1.1);
}

.team-thumb-social {
    position: absolute;
    top: 55%;
    right: 30px;
    transition: .5s;
    visibility: hidden;
    opacity: 0;
}

.team-inner-single-box:hover .team-thumb-social {
    top: 25%;
    visibility: visible;
    opacity: 1;
}

.team-thumb-social a {
    width: 45px;
    height: 45px;
    border-radius: 25px;
    background-color: var(--mio-color);
    text-align: center;
    line-height: 45px;
    color: #fff;
    font-size: 18px;
    margin: 4px 0;
    position: relative;
    z-index: 1;
    transition: .5s;
}

.team-thumb-social a:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #282828;
    transform: scale(0);
    border-radius: 30px;
    z-index: -1;
    transition: .5s;
}

.team-thumb-social a:hover:before {
    transform: scale(1);
}

.team-innner-box-content {
    background: #f2f3f5;
    padding: 26px 0;
    position: relative;
    z-index: 1;
}

.team-innner-box-content:before {
    position: absolute;
    content: ''; 
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--mio-color);
    z-index: -1;
    transition: .5s;
}

.team-inner-single-box:hover .team-innner-box-content:before {
    width: 100%;
    filter: hue-rotate(360deg);
}

.team-inner-sub-title h6 {
    font-size: 22px;
    line-height: 30px;
    color: #232323;
    font-weight: 700;
    transition: .5s;
}

.team-inner-single-box:hover .team-inner-sub-title h6 {
    color: #fff;
}

.team-inner-box-title h6 {
    font-size: 14px;
    line-height: 28px;
    color: #727272;
    font-weight: 500;
    transition: .5s;
}

.team-inner-single-box:hover .team-inner-box-title h6 {
    color: #fff;
}


/*<!-- ============================================================== -->
 <!-- Miaque Team Member Inner Section End Here -->
<!-- ============================================================== -->*/







/*==========================================
 <-- maique Search CSS  Start -->
=========================================*/

.search-popup {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 100%;
    z-index: 99999;
    margin-top: -540px;
    transform: translateY(-100%);
    background-color: #2828283b;
    -webkit-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -moz-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -o-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    transition: all 1500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    backdrop-filter: blur(5px);
}

.search-popup{
    width: 100%;
}

.search-active .search-popup{
    transform: translateY(0%);
    margin-top: 0;
}

.search-popup .close-search {
    position: absolute;
    left: 0;
    right: 0;
    top: 75%;
    margin: 0 auto;
    margin-top: -200px;
    border-radius: 50%;
    text-align: center;
    background: linear-gradient(to right, var(--mio-color)
 6%, #e9e9e9 96%);
    width: 70px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
    border-bottom: 3px solid #ffffff;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    opacity: 0;
    visibility: hidden;
    height: 70px;
    line-height: 70px;
    text-align: center;
    border-top-color: #fff;
}

.search-popup .close-search i{
    position: relative;
    font-size: 30px;
    color: #ffffff;
}

.search-active .search-popup .close-search{
    visibility: visible;
    opacity: 1;
    top: 50%;
    -webkit-transition-delay: 1500ms;
    -moz-transition-delay: 1500ms;
    -ms-transition-delay: 1500ms;
    -o-transition-delay: 1500ms;
    transition-delay: 1500ms;
}

.search-popup form{
    position: absolute;
    max-width: 700px;
    top: 50%;
    left: 15px;
    right: 15px;
    margin:-35px auto 0;
    transform: scaleX(0);
    transform-origin: center;
    background-color: #111111;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.search-active .search-popup form{
    transform: scaleX(1);
    -webkit-transition-delay: 1200ms;
    -moz-transition-delay: 1200ms;
    -ms-transition-delay: 1200ms;
    -o-transition-delay: 1200ms;
    transition-delay: 1200ms;
}

.search-popup .form-group{
    position:relative;
    margin:0px; 
    overflow: hidden;
}

.search-popup .form-group input[type="text"], .search-popup .form-group input[type="search"] {
    position: relative;
    display: block;
    font-size: 18px;
    line-height: 50px;
    color: #000000;
    height: 70px;
    width: 100%;
    padding: 10px 30px;
    background-color: #ffffff;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    font-weight: 500;
    text-transform: capitalize;
    border: 2px solid var(--mio-color)
;
    border-radius: 5px;
}

.search-popup .form-group input[type="submit"], .search-popup .form-group button {
    position: absolute;
    right: 30px;
    top: 0px;
    height: 70px;
    line-height: 70px;
    background: transparent;
    text-align: center;
    font-size: 24px;
    color: var(--mio-color)
;
    padding: 0;
    cursor: pointer;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    border: none;
}

.search-popup .form-group input[type="submit"]:hover,
.search-popup .form-group button:hover{
    color: #000000;
}

.search-popup input::placeholder,
.search-popup textSection::placeholder{
    color:#000000;
}

.search-popup .close-search.style-two{
    position: absolute;
    right: 25px;
    left: auto;
    color:#ffffff;
    width:auto;
    height:auto;
    top:25px;
    margin:0px;
    border:none;
    background:none !important;
    box-shadow:none !important;
    -webkit-transition:all 500ms ease;
    -moz-transition:all 500ms ease;
    -ms-transition:all 500ms ease;
    -o-transition:all 500ms ease;
    transition:all 500ms ease;
}

.search-popup .close-search.style-two i{
    font-size:20px;
    color:#f00;
}

.search-box-btn.search-box-outer i {
    font-size: 20px;
    display: inline-block;
    color: #fff;
    cursor: pointer;
    transition: .5s;
}

.search-box-btn.search-box-outer i:hover {
    color: var(--mio-color)
;
    filter: hue-rotate(360deg);
}


/*==========================================
 <-- maique Search CSS  End -->
=========================================*/



/*===========================
<-- maique Loader Css -->
=============================*/

.loader_bg {
    position: fixed;
    z-index: 9999;
    background: #00081bbb;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    text-align: center;
    flex-direction: column;
    justify-content: center;
    backdrop-filter: blur(15px);
}

.loader {
    box-sizing: border-box;
    display: inline-block;
    width: 50px;
    height: 80px;
    border-top: 5px solid #fff;
    border-bottom: 5px solid #fff;
    position: relative;
    background: linear-gradient(var(--mio-color)
 30px, transparent 0) no-repeat;
    background-size: 2px 40px;
    background-position: 50% 0px;
    animation: spinx 5s linear infinite;
    border-radius: 3px;
  }

  .loader:before, .loader:after {
    content: "";
    width: 48px;
    left: 50%;
    height: 35px;
    position: absolute;
    top: 0;
    transform: translatex(-50%);
    background: rgba(255, 255, 255, 0.4);
    border-radius: 0 0 20px 20px;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: 0 0px;
    animation: lqt 5s linear infinite;
  }

  .loader:after {
    top: auto;
    bottom: 0;
    border-radius: 20px 20px 0 0;
    animation: lqb 5s linear infinite;
}
      

.loader_bg h3 {
    color: var(--mio-color)
;
    position: absolute;
    display: flex;
    font-weight: 500;
    margin-top: 10rem;
    margin-left: 1rem;
}



/*
<!-- ============================================================== -->
<!--Scrollup Button Section -->
<!-- ============================================================== -->*/



/*------back-to-top------------*/

.prgoress_indicator {
    position: fixed;
    right: 50px;
    bottom: 20px;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    box-shadow: inset 0 0 0 2px rgba(24, 24, 24, 0.2);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px) !important;
    transition: all 200ms linear !important;
}

.prgoress_indicator.active-progress {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) !important;
  background: transparent;
}

.prgoress_indicator::after {
    position: absolute;
    content: "\f106";
    font-family: "Font Awesome 5 Free";
    text-align: center;
    line-height: 46px;
    font-size: 18px;
    color: var(--mio-color);
    left: 0;
    top: 0;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    font-weight: 900;
    z-index: 1;
    transition: all 200ms linear !important;
}

.prgoress_indicator::before {
  position: absolute;
  content: "\f106";
  font-family: "Font Awesome 5 Free";
  text-align: center;
  line-height: 46px;
  font-size: 18px;
  font-weight: 900;
  opacity: 0;
  -webkit-background-clip: text;
    background-clip: text;
  -webkit-text-fill-color: transparent;
  left: 0;
  top: 0;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  z-index: 2;
  transition: all 200ms linear !important;
}

.prgoress_indicator:hover ::after {
  color: #2871ff;
}

.prgoress_indicator:hover ::before {
  opacity: 1;
}

.prgoress_indicator svg path {
  fill: none;
}

.prgoress_indicator svg.progress-circle path {
    stroke: var(--mio-color);
    stroke-width: 4;
    box-sizing: border-box;
    transition: all 200ms linear !important;
}



/* curser Animation */

.curser {
    position: fixed;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    background: #ffffff;
    border-radius: 50%;
    mix-blend-mode: difference;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 999;
    transition: .20s;
}

.curser2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    background:  #ffffff;
    border-radius: 50%;
    pointer-events: none;
    mix-blend-mode: difference;
    transform: translate(-50%, -0%);
    z-index: 9999;
    transition: .1s;
}

/* curser Animation */


/*<!-- ============================================================== -->
 <!-- maique animation start here -->
<!-- ============================================================== -->*/

@keyframes loader{
    0%{
        transform: scale(0);
        opacity: 0;
    }
    50%{
        opacity: 1;
    }
    100%{
        transform: scale(1);
        opacity: 0;
    }
}

@keyframes zoomIn {
    from{
      -webkit-transform: scale(.7) translateY(100px);
      transform: scale(.7) translateY(100px);
      opacity: 0;
    }
    to{
      -webkit-transform: scale(1) translateY(0);
      transform: scale(1) translateY(0);
      opacity: 1;
    }
  }
  
  
@keyframes ZoomIn {
    from{
      -webkit-transform: scale(.6);
      transform: scale(.6);
      opacity: 0;
    }
    to{
      -webkit-transform: scale(1) ;
      transform: scale(1);
      opacity: 1;
    }
  }
  
@keyframes FadeInUp {
    from{
      -webkit-transform: translateY(10%);
      transform:  translateY(10%);
      opacity: 0;
    }
    to{
      -webkit-transform:  translateY(0%) ;
      transform:  translateY(0%);
      opacity: 1;
    }
  }

  @keyframes rotate {
    0% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
        -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
        -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
    }
}

@keyframes rotate2 {
    0% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
        -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
        -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
    }
}

@keyframes rotate3 {
    0% {
        transform: rotateX(-150deg) rotateY(-235deg) rotateZ(0deg);
        -webkit-transform: rotateX(-150deg) rotateY(-235deg) rotateZ(0deg);
    }
    
    100% {
        transform: rotateX(-150deg) rotateY(-235deg) rotateZ(360deg);
        -webkit-transform: rotateX(-150deg) rotateY(-235deg) rotateZ(360deg);
    }
}

@keyframes rotate4 {
    0% {
        transform: rotateX(220deg) rotateY(20deg) rotateZ(0deg);
        -webkit-transform: rotateX(220deg) rotateY(20deg) rotateZ(0deg);
    }
    
    100% {
        transform: rotateX(220deg) rotateY(20deg) rotateZ(360deg);
        -webkit-transform: rotateX(220deg) rotateY(20deg) rotateZ(360deg);
    }
}  


@keyframes ripple {

    0%,
    35% {
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }

    50% {
        -webkit-transform: scale(1.5);
        -moz-transform: scale(1.5);
        -ms-transform: scale(1.5);
        -o-transform: scale(1.5);
        transform: scale(1.5);
        opacity: 0.8;
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(2);
        -moz-transform: scale(2);
        -ms-transform: scale(2);
        -o-transform: scale(2);
        transform: scale(2);
    }
}


@keyframes movebounce {
    0% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }

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

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


@keyframes moveleftbounce {
    0% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }

    50% {
        -webkit-transform: translateX(20px);
        transform: translateX(20px);
    }

    100% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }
}




@-webkit-keyframes play-btn {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(254, 254, 254, 0.3), 0 0 0 10px rgba(254, 254, 254, 0.3), 0 0 0 20px rgba(254, 254, 254, 0.3);
        box-shadow: 0 0 0 0 rgba(254, 254, 254, 0.3), 0 0 0 10px rgba(254, 254, 254, 0.3), 0 0 0 20px rgba(254, 254, 254, 0.3)
    }
    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(254, 254, 254, 0.3), 0 0 0 20px rgba(254, 254, 254, 0.3), 0 0 0 30px rgba(254, 254, 254, 0);
        box-shadow: 0 0 0 10px rgba(254, 254, 254, 0.3), 0 0 0 20px rgba(254, 254, 254, 0.3), 0 0 0 30px rgba(254, 254, 254, 0)
    }
}

@keyframes play-btn {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(254, 254, 254, 0.3), 0 0 0 10px rgba(254, 254, 254, 0.3), 0 0 0 20px rgba(254, 254, 254, 0.3);
        box-shadow: 0 0 0 0 rgba(254, 254, 254, 0.3), 0 0 0 10px rgba(254, 254, 254, 0.3), 0 0 0 20px rgba(254, 254, 254, 0.3)
    }
    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(254, 254, 254, 0.3), 0 0 0 20px rgba(254, 254, 254, 0.3), 0 0 0 30px rgba(254, 254, 254, 0);
        box-shadow: 0 0 0 10px rgba(254, 254, 254, 0.3), 0 0 0 20px rgba(254, 254, 254, 0.3), 0 0 0 30px rgba(254, 254, 254, 0)
    }
}





.dance {
    -webkit-animation: dance 2s alternate infinite;
    animation: dance 2s alternate infinite;
}

@keyframes dance {
    0% {
        -webkit-transform: scale(0.5);
    }

    100% {
        -webkit-transform: scale(1);
    }
}

@keyframes Dance {
    0% {
        -webkit-transform: translateY(0px);
    }

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

    100% {
        -webkit-transform: translateX(0px);
    }
}

.dance2 {
    -webkit-animation: dance2 4s alternate infinite;
    animation: dance2 4s alternate infinite;
}

@keyframes dance2 {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
    }

    50% {
        -webkit-transform: translate3d(25px, -25px, 0);
    }

    100% {
        -webkit-transform: translate3d(0, -25px, 25px);
    }
}


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

@keyframes rotateme {
    from {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
      }
      to {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
      }
}

@keyframes Ripple {
    0% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }
    50% {
        transform: scale(3);
        -webkit-transform: scale(3 );
    }    
    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes lqt {
    0%, 100% {
      background-image: linear-gradient(#FF3D00 40px, transparent 0);
      background-position: 0% 0px;
    }
    50% {
      background-image: linear-gradient(#FF3D00 40px, transparent 0);
      background-position: 0% 40px;
    }
    50.1% {
      background-image: linear-gradient(#FF3D00 40px, transparent 0);
      background-position: 0% -40px;
    }
  }

  @keyframes lqb {
    0% {
      background-image: linear-gradient(#FF3D00 40px, transparent 0);
      background-position: 0 40px;
    }
    100% {
      background-image: linear-gradient(#FF3D00 40px, transparent 0);
      background-position: 0 -40px;
    }
  }

  @keyframes spinx {
    0%, 49% {
      transform: rotate(0deg);
      background-position: 50% 36px;
    }
    51%, 98% {
      transform: rotate(180deg);
      background-position: 50% 4px;
    }
    100% {
      transform: rotate(360deg);
      background-position: 50% 36px;
    }
  }