/*===============================================
Template Name: Portfolio -  HTML5 Template
Author:  https://www.templatemonster.com/authors/themez/
Description: Description
Version: 1.0.0
Text Domain: Portfolio
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. Portfolio Header Top Menu Section Css
02. Portfolio Nav Menu Section Css 
03. Portfolio Banner Section Css
04. Portfolio Section Title Css
05. Portfolio Service Section css
06. Portfolio About Section Css
07. Portfolio Counter Section Css
08. Portfolio Case Study Section Css
09. Portfolio Testimonial Section Css
10. Portfolio Process Section Css
11. Portfolio Team Section Css
12. Portfolio Faq Section Css
13. Portfolio Brand Section Css
14. Portfolio Call Do Section Css
15. Portfolio Form Box Css
16. Portfolio Skill Section Css
17. Portfolio Blog Section Css
18. Portfolio footer Section Css
19. Portfolio Subscribe Section Css
20. Portfolio Lines CSS
21. Portfolio Prossess Ber Css
22. Portfolio Scrollup Section
23. Portfolio Bounce Animation Css 
24. Portfolio Animation Dance
25. Portfolio Breadcumb Section Css
26. Portfolio abouts_Sections Css
27. Portfolio Feture-Section Css
28. Portfolio Pricing Section Css
29. Portfolio Web Development Section CSS
30. Portfolio Contact  US Css
31. Portfolio Blog Sidber Widget CSS
32. Portfolio Case Study Details Css
33. Portfolio Search Box Css
34. Portfolio Loader Css
=======================*/


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

body {
  background-color: #0A0D00;
} 

/* -------------------------------------------------------
                   Cursor Css
-------------------------------------------------------- */

.cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 25px;
    height: 25px;
    border: 1px solid #fff;
    mix-blend-mode: difference;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 1000;
    transition: .15s;
}

.cursor2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    background: var(--white, #fff);
    mix-blend-mode: difference;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-5px, 0px);
    z-index: 1000;
    transition: .1s;
}

.grow,
.grow-small {
    transform: scale(2);
    background: var(--primary-color);
    mix-blend-mode: difference;
    border: none;
    transition: .5s;
    opacity: 0;
}

.grow-small {
    transform: scale(2);
}





.banner-section span {
    font-size: 116px;
    line-height: 135px;
    font-weight: 600;
}

.design {
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--white, #fff);
    color: transparent;
    transition: all 0.5s;
    position: relative;
}

.design::before {
    content: attr(data-text);
    position: absolute;
    color: var(--primary-color);
    width: 0px;
    overflow: hidden;
    animation: pulse-width 3s ease-in infinite;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--primary-color);
}

@keyframes pulse-width {
    50% {
        width: 100%;
    }
}





/*<!-- ============================================================== -->
 <!-- Portfolio Banner Start Here -->
<!-- ============================================================== -->*/
.container-custom{
  width: 78%;
  margin: auto;
}
.banner-section{
  background: url('../images/banner4.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 850px;
    margin-top: -25px;
    position: relative;
}

.banner-content{
  padding: 100px 0px;
  
}

.banner-content h3{
  font-size: 30px;
  color: #fff;
  margin-bottom: 15px; 
}
.banner-content h2{
  font-size: 116px;
  color: var(--primary-color);
  line-height: .9;
  font-weight: 800;
}

.banner-section .banner-image img {
    width: 100%;
}


.button-area {
    text-align: center;
    display: flex;
    justify-content: center;
    overflow: hidden !important;
    width: 45%;
    margin-top: 50px;
}

.button-area .btn_wrapper {
    width: 200px;
    height: 200px;
    margin-right: -15px;
}

.button-area .btn_wrapper {
    width: 220px;
    height: 220px;
    margin-left: -25px;
}

.button-area .btn_wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    height: 250px;
    width: 250px;
    border-radius: 100%;
    margin-left: -40px;
}

.button-area .btn-item {
    position: absolute;
}

.button-area .btn-item:hover {
    color: #F31313;
}

.button-area .wc-btn-black {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 150px;
    height: 150px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.3;
    text-transform: capitalize;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 100%;
    position: relative;
    overflow: hidden;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.button-area a {
    text-decoration: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    position: relative;
    z-index: 1;
    display: inline-block;
}

.button-area .wc-btn-black:hover span {
    width: 350px;
    height: 350px;
}

.button-area .wc-btn-black span {
    background-color: #000;
}

.button-area .wc-btn-black span {
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    left: 0;
    top: 0;
    background-color: #fff;
    z-index: -1;
    border-radius: 100%;
    -webkit-transition: all 0.7s;
    transition: all 0.7s;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}







.banner-section .social {
    display: flex;
    align-items: center;
    justify-content: end;
    position: absolute;
    bottom: 6px;
    right: 8%;
}
.banner-section .social h3{
    font-size: 20px;
    font-weight: 400;
    color: #fff;
    margin: 0;
}

.banner-section .social img {
    width: 17%;
    margin: 0px 60px;
}
.banner-section .social .icon i{
    height: 60px;
    width: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 17px;
    color: var(--primary-color);
    background: linear-gradient(145deg, #1e2024, #23272b);
    box-shadow: 0px 0px 9px 0px rgba(255, 255, 255, .5);
    margin: 0px 15px;
    border-radius: 5px;
}
.banner-section .social .icon i:first-child{
    margin-left: 0px;
}

.banner-section .social .icon i:hover {
     -webkit-animation: updown 2s linear infinite;
     animation: updown 2s linear infinite;
      -webkit-transform-origin: 0px 0px -50px;
}

@-webkit-keyframes updown {
    0%   {transform: rotateX(0deg);}
    25%   {transform: rotateX(5deg);}
    50%   {transform: rotateX(0deg);}
    75%   {transform: rotateX(-5deg);}
    100% {transform: rotateX(0deg);}
}


/* ======================marque section start========================== */
 .marque-section{
    background: url('../images/bbg2.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    padding: 30px 0px;
    position: relative;
    z-index: 1;
} 
.marque-section:before{
    position: absolute;
    content: "";
    background-color: rgba(30, 30, 30, .5);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}


/*marque*/

.text_bar.style1 {
    position: relative;
    display: inline-block;
    width: 100%;
    vertical-align: top;
    overflow: hidden;
}
.text_bar.style1 .text-item {
    display: flex;
    align-items: baseline;
    animation: pureit-animation 20s linear infinite;
    -webkit-animation: pureit-animation 20s linear infinite;
}
.text_bar.style1 .text-item.copy {
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform;
    backface-visibility: hidden;
    transform: translateX(100%) translateZ(0);
    animation: pureit-animation-copy 20s linear infinite;
    -webkit-animation: pureit-animation-copy 20s linear infinite;
}
.text-item h3 {
    font-size: 70px;
    line-height: 1.1em;
    padding-right: .5em;
    padding-left: .5em;
    color: #fff;

}
.text_bar_content{
    display: flex;
    white-space: nowrap;
    font-size: 0;
    overflow: hidden;

}
/*two*/
.text_bar.style2 {
    position: relative;
    display: inline-block;
    width: 100%;
    vertical-align: top;
    overflow: hidden;
}
.text_bar.style2 .text-item {
    display: flex;
    align-items: baseline;
    animation: qode-move-horizontal-normal-text-marquee-copy 20s linear infinite;

}
.text_bar.style2 .text-item.copy {
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform;
    backface-visibility: hidden;
    transform: translateX(100%) translateZ(0);
     animation: qode-move-horizontal-normal-text-marquee-copy 20s linear infinite;

}
.text-item h3 {
    font-size: 50px;
    line-height: 1.1em;
    padding-right: .5em;
    padding-left: .5em
}
.text_bar_content{
    display: flex;
    white-space: nowrap;
    font-size: 0;
    overflow: hidden;
}
@keyframes pureit-animation{
    0% {
        transform: translateX(0) translateZ(0);
    }
    100% {
        transform: translateX(-100%) translateZ(0);
    }
}
@keyframes pureit-animation-copy{
    0% {
        transform: translateX(100%) translateZ(0);
    }
    100% {
        transform: translateX(0) translateZ(0);
    }
}

/*marque*/



/* ======================marque section end========================== */

/* ======================portfolio section start========================== */
.gallery1{
    background: url('../images/bg4.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    padding: 100px 0px 60px;
}
.gallery1 .top-content {
    text-align: center;
    width: 58%;
    margin: auto;
    margin-bottom: 40px;
}
.gallery1 .top-content h1{
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0px 0px 0px 0px;
}

.gallery1 .top-content h2{
    font-size: 45px;
    font-weight: 600;
    margin-bottom: 17px;
    color: var(--primary-color);
}
.gallery1 .slider-gallery img{
  border-radius: 10px;
  width: 100%;
}

.gallery1 .slider-gallery a {
    width: 100%;
}

.gallery1 .single-box{
    transition: .5s;
    overflow: hidden;
    position: relative;
}

.gallery1 .single-box:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(0 100%, 100% 0%, 100% 100%);
    transform: scale(1);
    transform-origin: bottom right;
    background-image: linear-gradient(-86deg, #212428 0%, #212428 100%);
    pointer-events: none;
    transition: all 500ms linear;
    border-radius: 5px;
    opacity: .5;
}
.gallery1 .single-box:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    clip-path: polygon(0 0, 100% 0%, 0% 100%);
    transform: scale(1);
    transform-origin: top left;
    background-image: linear-gradient(-86deg, #212428 0%, #212428 100%);
    pointer-events: none;
    transition: all 500ms linear;
    border-radius: 5px;
    opacity: .5;
}
.gallery1 .single-box:hover::before,
.gallery1 .single-box:hover::after {
    transform: scale(0);
}

.gallery1 .single-box .portfolio-content{
    padding: 0px 30px 40px 30px;
    background: transparent;
    position: absolute;
    bottom: -60px;
    left: 0;
    right: 0;
    transition: .5s;
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s;
}
.gallery1 .single-box:hover .portfolio-content{
    bottom: -10px;
    background: rgba(33, 36, 40, .4);
    transition: .5s;
}
.gallery1 .single-box .portfolio-content .study-text p{
    opacity: 1;
    color: var(--primary-color);
    transition: .5s;
    position: relative;
    z-index: 9;
}
.gallery1 .single-box:hover .portfolio-content .study-text p{
    opacity: 0;
    transition: .5s;
}
.gallery1 .single-box .portfolio-content .study-title h3{
    font-size: 22px;
    font-weight: 500;
    color: #fff;
    z-index: 9;
    position: relative;
}
.gallery1 .single-box .portfolio-content .portfolio-button{
    margin-top: 15px;
}
.gallery1 .single-box .portfolio-content .portfolio-button a{
    transition: .5s;
    color: var(--primary-color);
}
.gallery1 .single-box .portfolio-content .portfolio-button a:hover{
    transition: .5s;
}
.gallery1 .single-box .portfolio-content .portfolio-button i{
    transition: .5s;
}
/* .gallery1 .single-box .portfolio-content .portfolio-button a:hover i{
    transition: .5s;
    margin-left: 10px;
} */
/* ======================portfolio section end========================== */

/*<!-- ============================================================== -->
 <!-- Portfolio Banner End Here -->
<!-- ============================================================== -->*/

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

.service-section .top-content {
    text-align: center;
    width: 58%;
    margin: auto;
    margin-bottom: 40px;
}
.service-section .top-content h4 {
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0px 0px 0px 0px;
}

.service-section .top-content h2{
    font-size: 45px;
    font-weight: 600;
    margin-bottom: 17px;
    color: var(--primary-color);
}

.service-section .team-desc .btn-item{
    border-radius: 6px;
    background-color: rgb(29, 29, 29);
    min-width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s;
}

.service-section .team-desc .btn-item i{
    color: #fff;
    transition: all 0.4s;
    font-size: 20px;
}
.team-member {
  position: relative;
  padding: 40px 0;
  border-bottom: 1px solid var(--mostofa-border-light-color);
}

.team-member:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.team-member:hover {
  border-bottom-color: var(--mostofa-primary-color);
}

.service-section .team-member:hover .team-desc .btn-item{
  background-color: var(--primary-color);
  transition: .5s;
}
.service-section .team-member:hover .team-desc .btn-item i{
    color: rgb(29, 29, 29);
    transition: all 0.4s;
    font-size: 20px;
}
.team-member .team-desc {
  display: flex;
  justify-content: space-between;
  align-items: end;
}

.team-member .team-desc h2 {
  margin-bottom: 5px;
  font-size: 80px;
  line-height: 80px;
  text-transform: uppercase;
  font-weight: 700;
}

.team-member .team-desc h2 a {
  color: #fff;
}

.team-title {
    text-align: left;
}

.team-member .team-desc a:hover {
  background-size: 100% 100%;
}

.team-member .team-desc span {
  display: block;
  color: var(--primary-color);
  font-weight: 500;
  font-size: 20px;
}

.team-member .team-social-icon {
  margin: 0;
  padding: 0;
}

.team-contact {
  padding-top: 30px;
}

.anime-list .team-images {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 0%;
  width: 20vw;
  height: 20vw;
}

.anime-list .team-images img {
  transition: all 0.7s;
  -webkit-transition: all 0.7s;
  opacity: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.anime-list .team-member:hover .team-images img {
  opacity: 1;
}

a {
  text-decoration: none;
}



/*<!-- ============================================================== -->
 <!-- Portfolio About Start Here -->
<!-- ============================================================== -->*/




/* ======================accordion section start========================== */

.faq-section {
    background: url('../images/faq-bg3.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    padding: 100px 0px 100px 0px;

}
.faq-section .top-content {
    text-align: center;
    width: 58%;
    margin: auto;
    margin-bottom: 40px;
}
.faq-section .top-content h1{
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0px 0px 0px 0px;
}

.faq-section .top-content h2{
    font-size: 45px;
    font-weight: 600;
    margin-bottom: 17px;
    color: var(--primary-color);
}

.faq-section .tab_container {
    overflow: hidden;
    padding: 20px 0 0;
}
.faq-section .accordion li {
    list-style: none;
    padding: 2px 0px 0px;
}
.faq-section .accordion li a {
    position: relative;
    width: 100%;
    display: block;
    cursor: pointer;
    font-weight: 500;
    font-size: 19px;
    padding: 20px 20px 20px 30px;
    border-radius: 5px;
    text-decoration: none;
    color: #fff;
}
.faq-section .accordion a::before {
    width: 2px;
    height: 10px;
    background: #fff;
    position: absolute;
    right: 32px;
    content: " ";
    top: 22px;
    transform: rotate(0deg);
    transition: all 0.2s ease-in-out;
    opacity: .5;
}
.faq-section .accordion a::after {
    width: 10px;
    height: 2px;
    background: #fff;
    position: absolute;
    right: 28px;
    content: " ";
    top: 26px;
    transition: all 0.2s ease-in-out;
    opacity: .5;
}
.faq-section .accordion a.active::after {
    transform: rotate(0deg);
    -webkit-transition: all 0.2s ease-in-out;
    background: var(--primary-color);
    opacity: 1;
}
.faq-section .accordion a.active::before{
    display: none;
}
.faq-section .accordion a.active {
    border-bottom: 0;
    padding: 25px 20px 15px 30px;
    color: var(--primary-color);
}
.faq-section .accordion li {
    background: linear-gradient(145deg, #1e2024, #23272b);
    /* box-shadow: 0px 0px 10px 0px rgba(168, 168, 167, .2); */
    margin: 27px 20px 40px 20px;
    border-radius: 5px;
}
.faq-section .accordion li p {
    display: none;
    font-size: 16px;
    padding: 0px 15px 25px 30px;
    margin: 0;
    background: transparent;
    backdrop-filter: blur(1.9px);
    overflow: hidden;
    border-radius: 5px;
}
/* .faq-section .card-content{
    margin: 70px 0px 0px 0px;
}
.faq-section .card-content .single-cird{
    background: linear-gradient(145deg, #1e2024, #23272b);
    box-shadow: 0px 0px 30px 0px rgba(168, 168, 167, .2);
    padding: 10px 35px;
    width: 90%;
    margin: 50px 0px 40px 40px;
    position: relative;
    transition: .5s;
    border-radius: 5px;
}
.faq-section .card-content .single-cird h3 {
    font-size: 22px;
    font-weight: 600;
    margin: 13px 0px;
    color: #0fffb7;
}
.faq-section .card-content .single-cird p{
    color: #fff;
    font-size: 16px;
    font-weight: 400;
}
.faq-section .card-content .single-cird .hover-cird{
    padding: 10px 35px;
    width: 100%;
    position: absolute;
    background: linear-gradient(145deg, #1e2024, #23272b);
    box-shadow: 0px 0px 30px 0px rgba(168, 168, 167, .2);
    left: 24px;
    top: 24px;
    border-radius: 5px;
    transform: perspective(500px)rotateX(90deg);
    -webkit-transition: all 400ms linear 0ms;
    transition: all 400ms linear 0ms;
}
.faq-section .card-content .single-cird:hover{
    transition: .5s;
}
.faq-section .card-content .single-cird:hover .hover-cird {
    transform: perspective(500px)rotateX(0deg);
}
.faq-section .card-content .single-cird .hover-cird h3{
    font-size: 22px;
    color: #0fffb7;
    font-weight: 600;
    margin: 13px 0px;
}
.faq-section .card-content .single-cird .hover-cird p{
    color: #fff;
    font-size: 16px;
    font-weight: 400;
} */
/* ======================accordion section end========================== */

/*<!-- ============================================================== -->
 <!-- Portfolio About End Here -->
<!-- ============================================================== -->*/

/*<!-- ============================================================== -->
 <!-- Portfolio Resume Start Here -->
<!-- ============================================================== -->*/


/* ======================blog section start========================== */

.blog-section {
    background-color: #121315;
    padding: 100px 0px;
}
.blog-section .top-content {
    text-align: center;
    width: 58%;
    margin: auto;
    margin-bottom: 40px;
}
.blog-section .top-content h1{
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0px 0px 0px 0px;
}

.blog-section .top-content h2{
    font-size: 45px;
    font-weight: 600;
    margin-bottom: 17px;
    color: var(--primary-color);
}
.blog-section .title-content .title h2{
    font-size: 60px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 27px;
}

.blog-section .songle-blog .blog-image img{
    width: 100%;
    border-radius: 5px;
    transition: .5s;
}
.blog-section .songle-blog .blog-image{
    transition: .5s;
    overflow: hidden;
}
.blog-section .songle-blog .blog-image:hover img {
    transform: scale3d(1.1,1.1,1);
    transition: .5s;
}
.blog-section .songle-blog {
    padding: 20px 20px 0px 20px;
    background: linear-gradient(145deg, #121315, #121315);
    box-shadow: 0px 0px 15px 0px rgba(168, 168, 167, .2);
    margin: 20px 20px;
    border-radius: 5px;
    position: relative;
    transition: .5s;
    overflow: hidden;
}
.blog-section .songle-blog .blog-content{
    padding: 20px 10px;
}
.blog-section .songle-blog .blog-content .blog-meta{
    margin-bottom: 10px;
}
.blog-section .songle-blog .blog-content .blog-meta img{
    width: 8%;
    margin-right: 8px;
}
.blog-section .songle-blog .blog-content .blog-meta a{
    color: #fff;
}
.blog-section .songle-blog .blog-content .blog-meta span{
    text-align: end;
    margin-left: 10px;
    color: #fff;
}
.blog-section .songle-blog .blog-content .blog-text h3 a{
    transition: .5s;
    font-size: 22px;
    font-weight: 500;
    color: #fff;
}
.blog-section .songle-blog:hover .blog-content .blog-text h3 a{
    color: var(--primary-color);
    transition: .5s;
}
/* ======================blog section end========================== */


/* ======================testi section start========================== */

/* ======================testi section end========================== */


/*<!-- ============================================================== -->
 <!-- Portfolio Resume End Here -->
<!-- ============================================================== -->*/

/*<!-- ============================================================== -->
 <!-- Portfolio Service Start Here -->
<!-- ============================================================== -->*/
.testionial-section{
    background-color: #161912;
    padding: 100px 0px;
}
.testionial-section .top-content {
    text-align: center;
    width: 58%;
    margin: auto;
    margin-bottom: 40px;
}
.testionial-section .top-content h1{
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0px 0px 0px 0px;
}

.testionial-section .top-content h2{
    font-size: 45px;
    font-weight: 600;
    margin-bottom: 17px;
    color: var(--primary-color);
}

.testionial-section .testi-iage {
    position: relative;
}
.testionial-section .testi-iage::before {
    position: absolute;
    content: '';
    left: 0;
    right: 0;
    bottom: 72px;
    height: 70px;
    background-color: var(--primary-color);
}
.testionial-section .testi-iage img {
    width: 100%;
}
.testionial-section .single-testi {
    display: flex;
    width: 80%;
    margin: auto;
}
.testionial-section .single-testi .testi-content {
    text-align: center;
    padding: 40px 50px 20px 50px;
    background-color: #212428;
    margin-bottom: 72px;
}
.testionial-section .single-testi .testi-content h2 {
    font-size: 40px;
    color: var(--primary-color);
    margin-bottom: 30px;
}

.testionial-section .single-testi .testi-content p {
    font-size: 16px;
    color: #fff;
    opacity: .4;
    margin-bottom: 35px;
}

.testionial-section .single-testi .testi-content i {
    font-size: 16px;
    margin: 5px;
    color: var(--primary-color);
}
.testionial-section .single-testi .col-md-8 {
    margin: 0;
    padding: 0;
}

.testionial-section .single-testi .col-md-4 {
    margin: 0;
    padding: 0;
}
.testionial-section .single-testi .row {
    align-items: flex-end;
}
.testionial-section .owl-nav{
  position: relative;
}
.testionial-section .owl-prev i {
    background-color: var(--primary-color);
    height: 70px;
    width: 138px;
    line-height: 70px;
    text-align: center;
    position: absolute;
    left: 0;
    bottom: 72px;
}
.testionial-section .owl-next i {
    background-color: var(--primary-color);
    height: 70px;
    width: 138px;
    line-height: 70px;
    text-align: center;
    position: absolute;
    right: 0;
    bottom: 73px;
}
/*<!-- ============================================================== -->
 <!-- Portfolio Service End Here -->
<!-- ============================================================== -->*/

/*<!-- ============================================================== -->
 <!-- Portfolio Skill Start Here -->
<!-- ============================================================== -->*/
.contact-section{
    background-color: #161912;
    padding: 100px 0px 0px;
}
.contact-section .top-content {
    text-align: center;
    width: 58%;
    margin: auto;
    margin-bottom: 40px;
}
.contact-section .top-content h1{
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0px 0px 0px 0px;
}

.contact-section .top-content h2{
    font-size: 45px;
    font-weight: 600;
    margin-bottom: 17px;
    color: var(--primary-color);
}

.contact-section .title h2 {
    font-size: 35px;
    color: #fff;
    margin-bottom: 50px;
}
.contact-section .row {
    align-items: center;
}
.contact-section .contact-icon {
    margin-bottom: 15px;
} 

.contact-section .icon i {
    font-size: 16px;
    margin-right: 10px;
    color: var(--primary-color);
}
.contact-section .text p {
    margin: 0;
    color: #fff;
    font-size: 16px;
}

.contact-section .contact_from.upper10 {
    background-color: #212428;
    padding: 40px 40px 70px;
    border-radius: 5px;
    margin-bottom: -100px;
} 

.contact-section .contact_from .form_box input {
    margin-bottom: 44px;
    outline: 0;
    padding: 16px 10px;
    border-left: 2px solid var(--primary-color);
    border-top: none;
    border-right: none;
    border-bottom: none;
    box-shadow: 0px 0px 10px 0px rgba(168, 168, 167, .4);
}
.contact-section .contact_from .form_box input::placeholder{
    color: #fff;
}
.contact-section .contact_from {
    box-shadow: 0px 2px 35px 0px rgb(0 0 0 / 10%);
    padding: 0px 0px 45px 25px;
}
.contact-section .contact_from .form_box .form-control{
    background-color: transparent;
    color: var(--primary-color);
}
.contact-section .contact_from .form_box .form-control:focus {
    color: var(--primary-color);
    background-color: rgba(33, 36, 40, .5);
    outline: 0;
    box-shadow: 0px 0px 10px 0px rgba(168, 168, 167, .4);
}
.contact-section .contact_from .form_box textarea {
    margin-bottom: 40px;
    outline: 0;
    border-left: 2px solid var(--primary-color);
    border-top: none;
    border-right: none;
    border-bottom: none;
    box-shadow: 0px 0px 10px 0px rgba(168, 168, 167, .4);
}
.contact-section .contact_from .form_box textarea::placeholder{
    color: #fff;
}
.contact-section .contact_from .quote_btn button {
    position: relative;
    display: inline-block;
    font-size: 16px;
    line-height: 30px;
    color: #ffffff;
    padding: 13px 45px;
    font-weight: 400;
    overflow: hidden;
    background: linear-gradient(145deg, #1e2024, #23272b);
    box-shadow: 0px 0px 10px 0px rgba(168, 168, 167, .2);
    border-radius: 5px;
    transition: .5s;
    z-index: 1;
    border-left: 2px solid var(--primary-color);
  width: 100%;
    transition: .5s;
}

.contact-section .contact_from .quote_btn button:hover {
    color: var(--primary-color);
    box-shadow:none;
    border-left: 2px solid #23272b;
    transition: .5s;
}
.contact-section .contact_from .quote_btn button::before,
.contact-section .contact_from .quote_btn button::after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  height:1px;
  width:0;
  background: var(--primary-color);
  box-shadow:
   -1px -1px 5px 0px #fff,
   7px 7px 20px 0px #0003,
   4px 4px 5px 0px #0002;
  transition:400ms ease all;
}
.contact-section .contact_from .quote_btn button::after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}
.contact-section .contact_from .quote_btn button:hover::before,
.contact-section .contact_from .quote_btn button:hover::after{
  width:100%;
  transition:800ms ease all;
}
.contact-section .contact_from .quote_btn button i{
    margin-left: 10px;
}
/*<!-- ============================================================== -->
 <!-- Portfolio Skill End Here -->
<!-- ============================================================== -->*/

/*<!-- ============================================================== -->
 <!-- Portfolio Start Here -->
<!-- ============================================================== -->*/
.footer-section{
  padding: 80px 0px;
  position: relative;
}

.footer-section .social {
    display: flex;
    align-items: center;
    justify-content: end;
    position: absolute;
    top: 55%;
    right: 11%;
}
.footer-section .social h3{
    font-size: 20px;
    font-weight: 400;
    color: #fff;
    margin: 0;
}

.footer-section .social img {
    width: 17%;
    margin: 0px 60px;
}
.footer-section .social .icon i{
    height: 60px;
    width: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 17px;
    color: var(--primary-color);
    background: linear-gradient(145deg, #1e2024, #23272b);
    box-shadow: 0px 0px 9px 0px rgba(255, 255, 255, .5);
    margin: 0px 0px 0px 30px;
    border-radius: 5px;
}
/* .footer-section .social .icon i:first-child{
    margin-left: 0px;
} */

.footer-section .social .icon i:hover {
     -webkit-animation: updown 2s linear infinite;
     animation: updown 2s linear infinite;
      -webkit-transform-origin: 0px 0px -50px;
}

@-webkit-keyframes updown {
    0%   {transform: rotateX(0deg);}
    25%   {transform: rotateX(5deg);}
    50%   {transform: rotateX(0deg);}
    75%   {transform: rotateX(-5deg);}
    100% {transform: rotateX(0deg);}
}

.footer-section h2 {
    font-size: 25px;
    color: #fff;
    margin-bottom: 20px;
}

.footer-section p {
    color: #fff;
    opacity: .7;
}

.footer-section ul li a {
    color: #fff;
    opacity: .7;
    margin-bottom: 10px;
    transition: .5s;
}

.footer-section ul li a i{
    color: var(--primary-color);
    margin-right: 5px;
    transition: .5s;
}
.footer-section ul li:hover a {
    padding-left: 10px;
    transition: .5s;
}
/*<!-- ============================================================== -->
 <!-- Portfolio End Here -->
<!-- ============================================================== -->*/

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


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

/*<!-- ============================================================== -->
 <!-- Portfolio Pricing Start Here -->
<!-- ============================================================== -->*/



/*<!-- ============================================================== -->
 <!-- Portfolio Pricing End Here -->
<!-- ============================================================== -->*/

/*<!-- ============================================================== -->
 <!-- Portfolio Brand Start Here -->
<!-- ============================================================== -->*/



/*<!-- ============================================================== -->
 <!-- Portfolio Brand End Here -->
<!-- ============================================================== -->*/

/*<!-- ============================================================== -->
 <!-- Portfolio Contact Start Here -->
<!-- ============================================================== -->*/



/*<!-- ============================================================== -->
 <!-- Portfolio Contact End Here -->
<!-- ============================================================== -->*/

/* Slick Dots Area /
/ ----------------------------------------------------------------------------------- */



/* Rotate SVG Area /
/ ----------------------------------------------------------------------------------- */


/*===========================
<-- Portfolio Sent Btn Css -->
=============================*/

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


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

/* curser Animation */



/* curser Animation */

/*<!-- ============================================================== -->
 <!-- Portfolio 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(0.7) translateY(100px);
    transform: scale(0.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(0.6);
    transform: scale(0.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);
  }
}

@-webkit-keyframes shine {
  100% {
    left: 100%;
  }
}

@keyframes shine {
  100% {
    left: 100%;
  }
}

.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 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -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;
  }
}



button.switch {
  font-size: 30px;
  color: var(--primary-color);
}

button.settings_btn.headers-button {
  font-size: 24px;
  color: var(--primary-color);
  background: #141a17;
  position: fixed;
  width: 45px;
  height: 45px;
  line-height: 45px;
  top: 94px;
  left: 41px;
  border-radius: 30px;
  border: 1px solid rgb(255 255 255 / 10%);
  display: inline-block;
  padding: 0;
  z-index: 1;
}

button.settings_btn.headers-button i{
    -webkit-animation: rotateme 4s linear infinite;
  animation: rotateme 4s linear infinite;
}







.sidebar-menu-wrapper {
  display: block;
}

.settings_sidebar {
  top: 0;
  width: 80%;
  right: -100%;
  height: 100vh;
  z-index: 9999;
  position: fixed;
  padding: 50px 20px;
  overflow-y: scroll;
  background-color: #090f0d;
  transition: 0.6s cubic-bezier(1, 0, 0, 1);
}

.settings_sidebar .mCustomScrollBox {
  overflow: visible !important;
}

.settings_sidebar.active {
  right: 0px;
}

.settings_sidebar .close_btn {
  top: 15px;
  right: 20px;
  line-height: 1;
  font-size: 24px;
  position: absolute;
}

.settings_sidebar .close_btn:hover {
  color: red;
}


.settings_sidebar_overlay {
  left: 100%;
  top: 0;
  position: fixed;
  z-index: 101;
  height: 100%;
  opacity: 0;
  width: 100%;
  visibility: hidden;
  -webkit-transition: all 0.4s ease-in 0.4s;
  -o-transition: all 0.4s ease-in 0.4s;
  transition: all 0.4s ease-in 0.4s;
  background: var(--primary-color);
}

.settings_sidebar_overlay.active {
  opacity: 0.5;
  visibility: visible;
  -webkit-transition: all 0.4s ease-out 0s;
  -o-transition: all 0.4s ease-out 0s;
  transition: all 0.4s ease-out 0s;
  left: 0;
  cursor: url(../images/icon/cross.png), pointer;
}

.color-btn ul li {
  display: inline-block;
}

.color-btn ul li button {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 30px;
  position: relative;
  transition: .5s;
}

.color-btn ul li:nth-child(1) button {
  background: #ff99cc;
}

.color-btn ul li:nth-child(2) button {
  background: #f31313;
}

.color-btn ul li:nth-child(3) button {
  background: #FACD00;
}

.color-btn ul li:nth-child(4) button {
  background: #fe6f1d;
}

.color-btn ul li:nth-child(5) button {
  background: #00ff88;
}

.color-btn ul li:nth-child(6) button {
  background: #1338f3;
}

.color-btn ul li:nth-child(7) button {
  background: #00ADEF;
}

.color-btn ul li:nth-child(8) button {
  background: #fff;
}

.color-btn ul li:nth-child(9) button {
  background: #412485;
}