/*----------------------------------------------------------------------------------- Template Name: Potfo Template URI: Description: This is html5 template Author: Voidcoders Author URI: https://themeforest.net/user/voidcoders Version: 1.00----------------------------------------------------------------------------------- INDEX =================== 1. Theme default Style 2. Header Style 3. Hero Style 4. About Style 5. Portfolio Style 6 Service Style 7 Testimonial Style 8 Blog Style 9 Gallery Style 10 Error Style 11 Contact Style 12 Footer Style 13 RTL 14 Responsive Style -----------------------------------------------------------------------------------*/
/*----------------------------------------*/
/* Theme default CSS
/*----------------------------------------*/
.clear {
     clear: both;
}
::-moz-selection {
     background: #777777;
     color: #fff;
     text-shadow: none;
}
::selection {
     background: #7c7b7b;
     color: #fff;
     text-shadow: none;
}
.no-mar {
     margin: 0 !important;
}
.no-pad {
     padding: 0 !important;
}
.some-pad {
     padding-left: 5px !important;
     padding-right: 5px !important;
}
.left-pad {
     padding-left: 90px !important;
}
.mar-1_br {
     margin-right: -1px;
     margin-bottom: -1px;
}
div#preloader {
     background: #0d0d0d url("../img/preloder.gif") no-repeat scroll center center;
     height: 100%;
     left: 0;
     overflow: visible;
     position: fixed;
     top: 0;
     width: 100%;
     z-index: 999;
}
.custom-padding {
     padding-bottom: 350px !important;
}
.mar-bot-50 {
     margin-bottom: 10px;
}
.mar-bot-40 {
     margin-bottom: 40px;
}
.mar-bot-150 {
     margin-bottom: 150px;
}
.mar-bot-30 {
     margin-bottom: 30px;
}
.margin-minas {
     margin-bottom: -50px;
}
.padding-minas {
     padding-bottom: 50px !important;
}
.padding-to-minas {
     padding-top: 0px !important;
}
.mar-top-30 {
     margin-top: 30px;
}
.mar-top-80 {
     margin-top: 80px;
}
.mar-top-80 {
     margin-top: 80px;
}
.mar-top-55 {
     margin-top: 55px;
}
.mar-top-140 {
     margin-top: 140px;
}
.text-left {
     text-align: left;
}
.text-center {
     text-align: center;
}
.text-right {
     text-align: right;
}
*,*:before,*:after {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
}
*:focus {
     outline: 0;
}
html {
     font-size: 62.5%;
     -webkit-font-smoothing: antialiased;
}
body {
     background: #101010;
     font-weight: normal;
     font-size: 16px;
     font-family: 'El Messiri',Helvetica,Arial,Lucida,sans-serif;
     letter-spacing: 1.5px;
     color: #ffffff;
     line-height: 30px;
     -webkit-font-smoothing: antialiased;
    /* Fix for webkit rendering */
     -webkit-text-size-adjust: 100%;
}
body.vs-light {
     background: #fff;
}
.dark-bg {
     background-color: #dcbc95;
}
img {
     max-width: 100%;
     height: auto;
     width: 100%;
}
button,input,textarea {
     letter-spacing: 0px;
}
/* Table Of Contents=========================- Default Typography- Custom Typography=========================*/
/* --------------------------- Default Typography--------------------------*/
body {
     font-family: 'El Messiri',Helvetica,Arial,Lucida,sans-serif;
     overflow-x: hidden;
}
h1,h2,h3,h4,h5,h6 {
     margin: 0;
     font-family: 'El Messiri',Helvetica,Arial,Lucida,sans-serif;
     font-weight: 600;
     color: #ffffff;
     letter-spacing: 0px;
}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {
     font-weight: inherit;
     font-family: 'El Messiri',Helvetica,Arial,Lucida,sans-serif;
     letter-spacing: 0;
}
h1 {
     font-size: 100px;
     font-family: 'El Messiri',Helvetica,Arial,Lucida,sans-serif;
     font-weight: 700;
     line-height: 105px;
     margin-bottom: 0px;
}
h2 {
     font-size: 40px;
     line-height: 50px;
     margin-bottom: 0px;
     font-weight: 700;
}
h3 {
      
  line-height: 31px;
  margin-bottom: 5px;
  font-weight: 700;

}
h4 {
     font-size: 20px;
     line-height: 27px;
}
h5 {
     font-size: 18px;
     line-height: 26px;
}
h6 {
     font-size: 14px;
     line-height: 22px;
}
p {
     font-family: 'El Messiri',Helvetica,Arial,Lucida,sans-serif;
     font-size: 16px;
     font-weight: 400;
     letter-spacing: 0;
     color: #000;;
     line-height: 28px;
     margin: 0;
     text-align: right;
}
p img {
     margin: 0;
}
/* em and strong */
em {
     font: 15px/30px;
}
strong,b {
     font: 15px/30px;
}
small {
     font-size: 11px;
     line-height: inherit;
}
/* links */
a,a:visited {
     text-decoration: none;
     font-family: 'El Messiri',Helvetica,Arial,Lucida,sans-serif;
     font-weight: 500;
     font-size: 15px;
     letter-spacing: 0;
     outline: 0;
}
a:hover,a:active {
     color: #df319c;
     text-decoration: none;
     outline: 0;
}
a:focus {
     text-decoration: none;
     outline: 0;
}
p a,p a:visited {
     line-height: inherit;
     outline: 0;
}
/* list */
ul,ol {
     margin-bottom: 0px;
     margin-top: 0px;
}
ul {
     margin: 0;
     padding: 0;
}
ol {
     list-style: decimal;
}
ol,ul.square,ul.circle,ul.disc {
     margin-left: 0px;
}
ul.square {
     list-style: square outside;
}
ul.circle {
     list-style: circle outside;
}
ul.disc {
     list-style: disc outside;
}
ul ul,ul ol,ol ul,ol ol {
     padding: 0;
     margin: 0;
}
 ul ul li, ul ol li, ol ul li, ol ol li {
     margin-bottom: 0px;
}
li {
     line-height: 18px;
     list-style-type: none;
     margin: 0px;
     letter-spacing: 0;
     display: inline-block;
     font-size: 16px;
}
[class^="flaticon-"]:before {
     font-size: inherit;
     font-weight: inherit;
     line-height: inherit;
     margin: 0;
     letter-spacing: inherit;
}
.btn.focus, .btn:focus {
     outline: 0;
     box-shadow: none !important;
}
button:focus {
     outline: none !important;
     box-shadow: none !important;
     border-color: transparent !important;
}
span {
     letter-spacing: 0;
}
input:focus {
     outline: none !important;
     box-shadow: none !important;
     border-color: #fd0861 !important;
}
.c-fulid-max {
     max-width: 90%;
     margin: auto;
}
.form-control:focus {
     outline: none !important;
     box-shadow: none !important;
     border-color: #fd0861 !important;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
     color: #f50c20 !important;
     background-color: #fff0 !important;
     border: none !important;
}
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
     border: none !important;
}
.nav-tabs .nav-link {
     color: #fff;
     border: none !important;
     border-top-left-radius: 0 !important;
     border-top-right-radius: 0 !important;
}
.nav-tabs {
     border-bottom: 0 !important;
}
.nav-fill .nav-item {
     text-align: left !important;
     font-size: 24px;
     font-family: 'El Messiri',Helvetica,Arial,Lucida,sans-serif;
     font-weight: 500;
     transition: .5s ease;
}
.nav-fill .nav-item:hover {
     color: #f50c20;
}
.btn-1 {
     position: relative;
     padding: 14px 45px;
     color: #fff;
     background: #831c5b;
     display: inline-block;
     min-width: 170px;
     transition: 1.5s ease;
     cursor: pointer;
     z-index: 1;
}
 .btn-1:hover {
     color: #fff;
}
 .btn-1:hover::before {
     opacity: 1;
}
 .btn-1::before {
     background: linear-gradient(-90deg, #f10d01 0%, #fe0869 100%);
     color: #fff;
     position: absolute !important;
     content: '';
     width: 100%;
     height: 100%;
     left: 0;
     top: 0;
     opacity: 0;
     transition: .5s ease;
     z-index: -1;
}
.btn-2 {
     padding: 14px 45px;
     color: #fff;
     background: transparent;
     display: inline-block;
     min-width: 170px;
     cursor: pointer;
}
.btn-3 {
     padding: 14px 45px;
     color: #fff;
     background: #000000;
     display: inline-block;
     min-width: 170px;
     cursor: pointer;
     transition: .5s ease !important;
     text-transform: uppercase;
}
 .btn-3:hover {
     background: #fff;
     color: #101010;
}
 .card {
     position: relative;
     -webkit-transform-style: preserve-3d;
     transform-style: preserve-3d;
}
.scroll-top {
     position: fixed;
     right: 105%;
     bottom: 70px;
     z-index: 99;
     cursor: pointer;
     transition: 1.5s ease;
     border: none;
     background: transparent;
}
.scrollup-icon {
     font-size: 40px;
     color: #fa0a49;
}
.scr-3 {
     color: #ff6666;
}
.scroll-top.open {
     right: 30px;
}
/*==============Header Style Start===============*/
/*--------potfo header 1--------------*/
header.header-area {
     position: absolute;
     width: 100%;
     left: 0;
     top: 0;
     padding: 25px 0px;
     z-index: 9;
     background-color: #fff;
}
 header.header-area .logo-wrapper {
     position: relative;
}
 header.header-area .logo-wrapper img {
     width: auto;
}
 header.header-area .menu-wrapper {
     position: relative;
}
 header.header-area .menu-wrapper .header-btn {
     position: absolute;
     right: 0;
     top: 0;
     z-index: 9999;
}
 header.header-area .menu-wrapper .header-btn .btn-chat {
     text-align: center;
     position: relative;
     box-sizing: border-box;
     color: #fff;
     display: block;
     padding: 2px;
     z-index: 2;
     transition: .5s ease;
     width: 132px;
     background-image: linear-gradient(90deg, #f10d01 0%, #fe0869 100%);
}
 header.header-area .menu-wrapper .header-btn .btn-chat:hover {
     background-image: linear-gradient(-90deg, #f10d01 0%, #fe0869 100%);
}
 header.header-area .menu-wrapper .header-btn .btn-chat span {
     align-items: center;
     background: #000;
     display: block;
     justify-content: center;
     box-sizing: border-box;
     transition: .5s ease;
     padding: 8px 15px;
}
 header.header-area .menu-wrapper .header-btn .btn-chat2 {
     text-align: center;
     position: relative;
     color: #fff;
     display: block;
     padding: 8px 18px;
     border: 2px solid #fff;
     transition: .5s ease;
     width: 132px;
     background: transparent;
     z-index: 2;
}
 header.header-area .menu-wrapper .header-btn .btn-chat2:hover {
     border-color: #f50c20;
}
 header.header-area .menu-3 {
     float: right;
}
header.header-area.nav-fixed {
     animation-duration: 0.8s;
     animation-name: fadeInDown;
     animation-timing-function: ease-in-out;
     -webkit-box-shadow: 0px 13px 35px -12px rgba(35, 35, 35, 0.15);
     -moz-box-shadow: 0px 13px 35px -12px rgba(35, 35, 35, 0.15);
     box-shadow: 0px 13px 35px -12px rgba(35, 35, 35, 0.15);
     left: 0;
     background: #191919;
     position: fixed !important;
     right: 0;
     top: 0;
     width: 100%;
     z-index: 999;
}
header.header-area.nav-fixed2 {
     background: #fff;
}
/*==============Header Style End===============*/
/*==============Hero Area Style Start================*/
.hero-area {
     position: relative;
     overflow: hidden;
}
 .hero-area .hero-content {
     position: relative;
     padding: 300px 0px 280px;
}
 .hero-area .hero-content p {
     font-size: 30px;
     font-weight: 500;
     line-height: 40px;
     color: #000;
}
 .hero-area .hero-content h1 {
     margin-left: -5px;
}
 .hero-area .hero-content h2 {
     font-size: 50px;
     line-height: 60px;
     background: #831c5b;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
}
 .hero-area .hero-content span.sign {
     font-size: 66px;
     font-family: "halimunregular";
     line-height: 75px;
     margin-top: 100px;
     display: block;
}
 .hero-area .hero-img {
     position: relative;
     width: 100%;
     margin-left: -90px;
}
 .hero-area .hero-img img {
     max-width: unset;
     width: auto;
}
.hero2 {
     position: relative;
}
 .hero2::before {
     position: absolute;
     content: '';
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     background-image: -moz-linear-gradient(-162deg, #fe0869 2%, #f80b35 48%, #f10d01 100%);
     background-image: -webkit-linear-gradient(-162deg, #fe0869 2%, #f80b35 48%, #f10d01 100%);
     background-image: -ms-linear-gradient(-162deg, #fe0869 2%, #f80b35 48%, #f10d01 100%);
     opacity: 0.6;
}
 .hero2 .hero-content {
     position: relative;
     padding: 280px 0px 231px;
}
 .hero2 .hero-content h1 {
     font-size: 95px;
}
 .hero2 .hero-content h2 {
     background: none;
     color: #fff;
     -webkit-text-fill-color: unset;
}
 .hero2 .hero-img {
     position: relative;
     margin-left: 80px;
}
.hero3 {
     position: relative;
}
 .hero3::before {
     position: absolute;
     content: '';
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     z-index: -1;
     background: #831c5b;
}
 .hero3 .hero-content {
     position: relative;
     padding: 245px 0px 185px;
}
 .hero3 .hero-content span.sign {
     margin-top: 0px;
}
 .hero3 .hero-content h1 {
     text-transform: uppercase;
     font-weight: 800;
}
 .hero3 .hero-content p {
     margin-top: 10px;
}
 .hero3 .hero-content .btn-3 {
     margin-top: 40px;
}
 .hero3 .hero-img {
     position: relative;
     margin-top: 70px;
     margin-left: -65px;
}
.inner-hero {
     position: relative;
     text-align: center;
     background: url(../img/hero/inner-page.jpg);
     background-size: cover;
     background-position: center;
}
 .inner-hero::before {
     position: absolute;
     content: '';
     height: 100%;
     width: 100%;
     background-color: #000000;
     opacity: 0.8;
     left: 0;
     top: 0;
}
 .inner-hero .page-tittle {
     position: relative;
     padding: 170px 0px;
}
 .inner-hero .page-tittle ul.breadcam {
     padding-top: 20px;
}
 .inner-hero .page-tittle ul.breadcam li {
     font-size: 17px;
     letter-spacing: 0;
     color: #fff;
     font-weight: 500;
     padding-left: 8px;
}
 .inner-hero .page-tittle ul.breadcam li a {
     font-size: 17px;
     letter-spacing: 0;
     color: #fff;
     font-weight: 500;
     transition: .5s ease;
}
 .inner-hero .page-tittle ul.breadcam li a:hover {
     color: #fe0869;
}
.blog-hero {
     background: url(../img/hero/inner-page2.jpg);
}
.errore {
     position: relative;
     background: #070707;
}
/*==============Hero Area Styl Ende================*/
/*=======================About Style Start===================*/
.about {
     position: relative;
     margin-top: 10px;
}
 .about .about-img {
     width: calc(100% + 20%);
     margin-left: -20%;
}
 .about .about-content {
     position: relative;
     padding-left: 30px;
}
 .about .about-content .nav-tabs {
     margin-top: -120px;
}
 .about .about-content .about-single-content {
     position: relative;
     margin-top: 55px;
}
 .about .about-content .about-single-content h2 {
     margin-bottom: 40px;
}
 .about .about-content .about-single-content p {
     font-size: 18px;
     padding-right: 45px;
     line-height: 30px;
}
 .about .about-content .about-single-content .btn-1 {
     margin-top: 50px;
}
 .about .about-content .about-single-content .single-award {
     position: relative;
     text-align: center;
     background: #181818;
     padding: 15px;
     margin: 15px auto;
}
 .about .about-content .about-single-content .single-award h4 {
     font-size: 22px;
     line-height: 42px;
}
 .about .about-content .about-single-content .single-award img {
     max-width: unset;
     width: auto;
}
 .about .about-content .about-single-content .single-award p {
     font-size: 14px;
     line-height: 20px;
     padding-right: 0;
}
.about-2 {
     position: relative;
     margin-top: 0px;
}
 .about-2 .about-img {
     position: relative;
}
 .about-2 .about-img img.ab-2-bg {
     position: absolute;
     left: 15px;
     z-index: -1;
     top: -25px;
     width: 105%;
     max-width: unset;
}
 .about-2 .about-content {
     position: relative;
}
 .about-2 .about-content .about-single-content {
     position: relative;
     margin-top: 0px;
}
 .about-2 .about-content .about-single-content p {
     margin-bottom: 30px;
}
 .about-2 .about-content .about-single-content .btn-1 {
     margin-top: 20px;
}
.about-3 .about-content {
     position: relative;
}
 .about-3 .about-content .about-single-content span {
     color: #fff;
     font-size: 22px;
     font-weight: 500;
     font-family: 'El Messiri',Helvetica,Arial,Lucida,sans-serif;
}
 .about-3 .about-content .about-single-content h2 {
     color: #000;
     padding-right: 10%;
}
 .about-3 .about-content .about-single-content p {
     color: #000;
}
 .about-3 .about-content .about-single-content .btn-3 {
     margin-top: 20px;
}
 .about-3 .about-content .about-single-content .btn-3:hover {
     background: #ff7381;
     color: #fff;
}
.about-3 .about-img {
     position: relative;
     z-index: 1;
}
 .about-3 .about-img::before {
     position: absolute;
     content: '';
     background: url(../img/about/about-3-befor.png);
     width: 94%;
     height: 200px;
     bottom: 0;
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
     z-index: -1;
}
 .about-3 .about-img::after {
     position: absolute;
     content: '';
     background: url(../img/about/about-3-after.png);
     width: 250px;
     height: 250px;
     right: 30px;
     top: 53px;
     z-index: -2;
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
     z-index: -3;
}
 .about-3 .about-img img.ab-3-bg {
     position: absolute;
     left: 0;
     z-index: -2;
     top: 0;
     width: auto;
     max-width: unset;
}
.about-details {
     position: relative;
     margin-top: 10px;
}
 .about-details .ad-text {
     position: relative;
}
 .about-details .ad-text h3 {
     font-size: 28px;
     line-height: 38px;
}
 .about-details .ad-text p {
     padding-top: 40px;
     font-size: 18px;
}
/*=======================About Style End===================*/
/*=============================Video ======================*/
.video {
     position: relative;
     max-height: 500px;
     background: url(../img/hero/video1.jpg);
     height: 500px;
     margin-top: 10px;
     background-size: cover;
     background-position: center;
     display: flex;
     justify-content: center;
     align-items: center;
}
 .video::before {
     position: absolute;
     width: 100%;
     height: 100%;
     content: '';
     background-image: -moz-linear-gradient(-162deg, #fe0869 2%, #f80b35 48%, #f10d01 100%);
     background-image: -webkit-linear-gradient(-162deg, #fe0869 2%, #f80b35 48%, #f10d01 100%);
     background-image: -ms-linear-gradient(-162deg, #fe0869 2%, #f80b35 48%, #f10d01 100%);
     opacity: 0.6;
}
 .video a {
     position: relative;
     display: block;
     height: 70px;
     width: 70px;
     border-radius: 50%;
     background: #fff;
     color: #fe0869;
     text-align: center;
     line-height: 70px;
     font-size: 24px;
}
 .video a::before {
     content: '';
     position: absolute;
     left: 0;
     top: 0;
     height: 100%;
     width: 100%;
     opacity: 0;
     border-radius: 50%;
     border: 1px solid #fff;
     -webkit-animation: spin2 1000ms linear infinite;
     -o-animation: spin2 1000ms linear infinite;
     animation: spin2 1000ms linear infinite;
}
.video-2 {
     position: relative;
     background: url(/forentend/assets/img/hero/video2.jpg);
     background-size: cover;
     background-position: 100% -127%;
     background-attachment: fixed;
}
 .video-2::before {
     background-color: #ff6666;
     background-image: none;
}
 .video-2 a {
     color: #ff6666;
}
.progress {
     height: 5px;
     font-size: 8px;
     background-color: #ffffff;
     margin-bottom: 20px;
     overflow: unset;
}
 .progress .progress-bar {
     position: relative;
     width: 0;
     background: #831c5b;
     animation: progress 1.5s ease-in-out forwards;
}
 .progress .progress-bar .title {
     opacity: 0;
     animation: show 0.35s forwards ease-in-out 0.5s;
     position: absolute;
     right: 0;
     top: -22px;
     font-size: 12px;
}
@keyframes progress {
     from {
         width: 0;
    }
     to {
         width: 100%;
    }
}
@keyframes show {
     from {
         opacity: 0;
    }
     to {
         opacity: 1;
    }
}
/*=============================Video ======================*/
/*======================Testimonial Style Start=====================*/
.testimonial {
     position: relative;
     margin-top: 10px;
     text-align: center;
}
 .testimonial h2 {
     margin-bottom: 60px;
}
 .testimonial .client {
     position: relative;
}
 .testimonial .client button.owl-prev {
     position: absolute;
     top: 40%;
     font-size: 50px;
     left: -13%;
     color: #a2a4b0;
     transition: .5s ease;
}
 .testimonial .client button.owl-prev:hover {
     background: #86979100;
     color: #ef0963;
}
 .testimonial .client button.owl-next {
     position: absolute;
     top: 40%;
     right: -13%;
     transition: .5s ease;
     color: #a2a4b0;
     font-size: 50px;
}
 .testimonial .client button.owl-next:hover {
     background: #86979100;
     color: #ef0963;
}
 .testimonial .client .single-client {
     background: #191919;
     padding: 90px 90px 50px;
     border-radius: 10px;
}
 .testimonial .client .single-client .flaticon-quote {
     font-size: 120px;
     color: #1f2022;
     position: absolute;
     left: 40px;
     top: 37px;
}
 .testimonial .client .single-client p {
     font-size: 20px;
     color: #c6c9d8;
     z-index: 1;
     position: relative;
}
 .testimonial .client .single-client span {
     font-size: 20px;
     color: #ffffff;
     display: inline-flex;
     margin-top: 50px;
}
 .testimonial .client .single-client span small {
     color: #d1d1d1;
     font-size: 16px;
     padding-left: 10px;
}
/*======================Testimonial Style End=====================*/
/*=================Blog Style Start====================*/
.blog {
     position: relative;
     margin-top: 10px;
     text-align: center;
}
 .blog h2 {
     margin-bottom: 10px;
}
 .blog .single-blog {
     position: relative;
     border-radius: 5px;
     margin: 15px auto;
}
 .blog .single-blog .sb-img {
     position: relative;
}
 .blog .single-blog .sb-img img {
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
}
 .blog .single-blog .sb-text {
     position: relative;
     text-align: left;
     padding: 30px;
     padding-bottom: 40px;
     background: #191919;
}
 .blog .single-blog .sb-text span {
     font-size: 16px;
     font-family: 'El Messiri',Helvetica,Arial,Lucida,sans-serif;
     line-height: 28px;
     color: #9e9fa2;
     letter-spacing: 0;
}
 .blog .single-blog .sb-text h3 {
     margin-top: 20px;
     min-height: 100px;
     transition: .5s ease;
}
 .blog .single-blog .sb-text h3:hover {
     color: #fe0869;
}
 .blog .single-blog .sb-text .btn-2 {
     border: 1px solid #fe0869;
     padding: 8px 30px;
     min-width: 135px;
     margin-top: 35px;
     transition: .5s ease;
}
 .blog .single-blog .sb-text .btn-2:hover {
     color: #fe0869;
}
 .blog .b-classic {
     position: relative;
}
 .blog .b-classic span {
     text-transform: uppercase;
}
 .blog .b-classic span:nth-child(2) {
     float: right;
}
 .blog .b-classic h3 {
     font-size: 30px;
     line-height: 40px;
}
 .blog .blog-details .sb-text {
     position: relative;
     text-align: left;
     padding: 30px 0px;
     background: transparent;
}
 .blog .blog-details .sb-text p {
     margin-bottom: 30px;
}
 .blog .blog-details .sb-text p.bdp-tittle {
     position: relative;
     background: #191919;
     color: #fff;
     font-size: 18px;
     font-style: italic;
     padding: 40px;
     padding-top: 80px;
}
 .blog .blog-details .sb-text p.bdp-tittle i {
     position: absolute;
     font-size: 45px;
     top: 40px;
     color: #fe0869;
}
 .blog .comment-details {
     position: relative;
     padding-top: 50px;
     text-align: left;
}
 .blog .comment-details h2 {
     padding-bottom: 50px;
     margin: 0;
}
 .blog .comment-details .hire-info {
     width: 100%;
}
 .blog .comment-details .hire-info .form-group {
     position: relative;
     margin-bottom: 25px;
}
 .blog .comment-details .hire-info .form-group input.form-control {
     height: 50px;
     padding: 15px;
     font-size: 15px;
     line-height: 25px;
     color: #c6c9d8;
     font-family: 'El Messiri',Helvetica,Arial,Lucida,sans-serif;
     background-color: #fff0;
     background-clip: padding-box;
     border: 1px solid #464547;
     border-radius: 0;
}
 .blog .comment-details .hire-info .form-group textarea.form-control {
     padding: 15px;
     font-size: 15px;
     line-height: 25px;
     color: #c6c9d8;
     background-color: #fff0;
     font-family: 'El Messiri',Helvetica,Arial,Lucida,sans-serif;
     background-clip: padding-box;
     border: 1px solid #464547;
     border-radius: 0;
}
 .blog .comment-details .hire-info .btn-1 {
     border: 0;
     margin-top: 20px;
}
 .blog .pagination {
     position: relative;
     width: 400px;
     margin-top: 60px !important;
}
 .blog .pagination ul li {
     margin-right: 5px;
}
 .blog .pagination ul li a {
     padding: 10px 15px;
     color: #fff;
     border: 1px solid #fe0869;
     transition: .5s ease;
}
 .blog .pagination ul li a i {
     transition: .5s ease;
     padding-left: 5px;
}
 .blog .pagination ul li a:hover {
     background: #fe0869;
}
 .blog .pagination ul li a:hover i {
     padding-left: 15px;
}
.blog-2 {
     position: relative;
}
 .blog-2 h2 {
     color: #000000;
}
 .blog-2 .single-blog {
     position: relative;
     transition: .5s ease;
}
 .blog-2 .single-blog:hover .sb-text {
     background: #831c5b;
}
 .blog-2 .single-blog:hover .sb-text span {
     color: #f0d2d2;
}
 .blog-2 .single-blog:hover .sb-text h3 {
     color: #ffffff;
}
 .blog-2 .single-blog:hover .sb-text .btn-2 {
     color: #ffffff;
     border-color: #ffffff;
}
 .blog-2 .single-blog .sb-text {
     background: #ffffff;
     transition: .5s ease;
}
 .blog-2 .single-blog .sb-text span {
     color: #831c5b;
     transition: .5s ease;
}
 .blog-2 .single-blog .sb-text h3 {
     color: #000000;
     transition: .5s ease;
}
 .blog-2 .single-blog .sb-text .btn-2 {
     border: 1px solid #831c5b;
     color: #831c5b;
     transition: .5s ease;
}
.side-bar {
     position: relative;
     margin-top: 10px;
     padding-left: 10%;
}
 .side-bar .searchbox {
     position: relative;
     margin: 15px auto;
     display: inline-block;
     width: 100%;
}
 .side-bar .searchbox form .form-control {
     padding: 20px 10px;
     font-size: 14px;
     color: #d7d7d7;
     font-family: "Gotham Narrow";
     border-radius: 0;
}
 .side-bar .searchbox form .input-group-append {
     margin-left: -2px;
}
 .side-bar .searchbox form .input-group-append .btn-outline-secondary {
     color: #ffffff;
     background-color: #fe0869;
     background-image: none;
     border-color: #fe0869;
     padding: 0px 20px;
     font-size: 20px;
     transition: .5s ease;
}
 .side-bar .catagory {
     position: relative;
     margin-top: 35px;
}
 .side-bar .catagory h3 {
     font-size: 24px;
     line-height: 34px;
}
 .side-bar .catagory ul.c-list {
     position: relative;
     margin-top: 10px;
}
 .side-bar .catagory ul.c-list li {
     display: block;
     padding: 13px 0px;
}
 .side-bar .catagory ul.c-list li a {
     color: #bfc1c4;
     transition: .5s ease;
     font-size: 18px;
}
 .side-bar .catagory ul.c-list li a:hover {
     color: #fe0869;
}
 .side-bar .catagory ul.c-list li a:hover span {
     color: #fe0869;
}
 .side-bar .catagory ul.c-list li a span {
     transition: .5s ease;
     padding-left: 5px;
}
 .side-bar .recent-post {
     position: relative;
     margin-top: 50px;
}
 .side-bar .recent-post h3 {
     font-size: 24px;
     line-height: 34px;
     margin-bottom: 10px;
}
 .side-bar .recent-post .single-recent-blog {
     position: relative;
     width: 100%;
     display: flex;
     margin-top: 28px;
}
 .side-bar .recent-post .single-recent-blog .srb-img {
     position: relative;
     width: 80px;
     height: 70px;
     border-radius: 5px;
}
 .side-bar .recent-post .single-recent-blog .srb-img img {
     height: 100%;
     border-radius: 5px;
}
 .side-bar .recent-post .single-recent-blog .srb-text {
     position: relative;
     padding-left: 15px;
}
 .side-bar .recent-post .single-recent-blog .srb-text h5 {
     font-size: 16px;
     line-height: 24px;
     transition: .5s ease;
}
 .side-bar .recent-post .single-recent-blog .srb-text h5:hover {
     color: #fe0869;
}
 .side-bar .recent-post .single-recent-blog .srb-text span {
     text-transform: capitalize;
     font-size: 14px;
     letter-spacing: 0;
     font-family: 'El Messiri',Helvetica,Arial,Lucida,sans-serif;
     color: #c1c1c1;
}
 .side-bar .tag {
     position: relative;
     margin-top: 60px;
}
 .side-bar .tag h3 {
     margin-bottom: 30px;
}
 .side-bar .tag ul li {
     border: 1px solid #b3b5b8;
     display: inline-block;
     margin-top: 10px;
     margin-right: 5px;
     transition: .5s ease;
     border-radius: 30px;
}
 .side-bar .tag ul li:hover {
     border-color: #fe0869;
}
 .side-bar .tag ul li a {
     color: #bfc1c4;
     font-size: 14px;
     padding: 10px 14px;
     display: block;
     border-radius: 30px;
     transition: .5s ease;
}
 .side-bar .tag ul li a:hover {
     background: #fe0869;
     color: #fff;
}
.left-sidebar {
     padding-left: 0;
     padding-right: 10%;
}
/*=================Blog Style End====================*/
/*=======================Portfolio Style Start========================*/
.portfolio {
     position: relative;
     margin-top: 20px;
     text-align: center;
}
 .portfolio h2 {
     margin-bottom: 10px;
}
 .portfolio .btn-1 {
     margin-top: 10px;
}
 .portfolio .single-portfolio {
     position: relative;
     width: 100%;
     border-radius: 5px;
     margin: 15px auto;
}
 .portfolio .single-portfolio img {
     border-radius: 5px;
}
 .portfolio .single-portfolio::before {
     position: absolute;
     content: '';
     width: 100%;
     height: 100%;
     border-radius: 5px;
     background-color: black;
     opacity: 0.502;
}
 .portfolio .single-portfolio:hover .sp-text {
     bottom: 15%;
     opacity: 1;
     -webkit-transition: all 0.3s ease 0s;
     -o-transition: all 0.3s ease 0s;
     transition: all 0.3s ease 0s;
}
 .portfolio .single-portfolio:hover .sp-text h6 {
     -webkit-transform: translateY(0);
     -ms-transform: translateY(0);
     -o-transform: translateY(0);
     transform: translateY(0);
     opacity: 1;
}
 .portfolio .single-portfolio:hover .sp-text h3 {
     -webkit-transform: translateY(0);
     -ms-transform: translateY(0);
     -o-transform: translateY(0);
     transform: translateY(0);
     opacity: 1;
}
 .portfolio .single-portfolio:hover .sp-text .btn-2 {
     -webkit-transform: translateY(0);
     -ms-transform: translateY(0);
     -o-transform: translateY(0);
     transform: translateY(0);
     opacity: 1;
}
 .portfolio .single-portfolio .sp-text {
     text-align: center;
     position: absolute;
     bottom: 10%;
     opacity: 0;
     width: 100%;
     -webkit-transition: all 0.3s ease 0s;
     -o-transition: all 0.3s ease 0s;
     transition: all 0.3s ease 0s;
}
 .portfolio .single-portfolio .sp-text h6 {
     font-size: 15px;
     line-height: 26px;
     font-weight: 400;
     -webkit-transform: translateY(10px);
     -ms-transform: translateY(10px);
     -o-transform: translateY(10px);
     transform: translateY(10px);
     -webkit-transition: all 0.3s ease 0s;
     -o-transition: all 0.3s ease 0s;
     transition: all 0.3s ease 0s;
     opacity: 0;
}
 .portfolio .single-portfolio .sp-text h3 {
     font-size: 26px;
     line-height: 36px;
     -webkit-transform: translateY(10px);
     -ms-transform: translateY(10px);
     -o-transform: translateY(10px);
     transform: translateY(10px);
     -webkit-transition: all 0.3s ease 0s;
     -o-transition: all 0.3s ease 0s;
     transition: all 0.3s ease 0s;
     transition-delay: 0.1s;
     opacity: 0;
}
 .portfolio .single-portfolio .sp-text .btn-2 {
     font-size: 16px;
     font-weight: 500;
     -webkit-transform: translateY(10px);
     -ms-transform: translateY(10px);
     -o-transform: translateY(10px);
     transform: translateY(10px);
     -webkit-transition: all 0.3s ease 0s;
     -o-transition: all 0.3s ease 0s;
     transition: all 0.3s ease 0s;
     transition-delay: 0.1s;
     opacity: 0;
     border: 1px solid #c6c9d8;
     padding: 10px 30px;
     min-width: 150px;
     margin-top: 30px;
}
 .portfolio .single-portfolio .sp-text .btn-2:hover {
     color: #fe0869;
}
.portfolio-2 {
     position: relative;
}
 .portfolio-2 h2 {
     color: #000000;
}
 .portfolio-2 .single-portfolio {
     position: relative;
}
 .portfolio-2 .single-portfolio::before {
     display: none;
}
.portfolio2 {
     position: relative;
     text-align: center;
     margin-top: 10px;
     margin-bottom: 10px;
}
 .portfolio2 label.btn {
     font-size: 18px;
     font-weight: 700;
     padding: 0px 12px;
     margin-bottom: 50px;
     font-family: 'El Messiri',Helvetica,Arial,Lucida,sans-serif;
}
 .portfolio2 label.btn:hover {
     color: #fe0869;
}
 .portfolio2 label.btn.active {
     color: #fe0869;
}
 .portfolio2 .single-portfolio {
     position: relative;
     transition: .5s ease;
     margin: 15px auto;
     overflow: hidden;
}
 .portfolio2 .single-portfolio a {
     transition: .5s ease;
}
 .portfolio2 .single-portfolio a::before {
     position: absolute;
     content: '';
     width: calc(100% - 30px);
     height: 100%;
     background-color: black;
     opacity: 0;
     left: 15px;
     top: 0;
     transition: .5s ease;
}
 .portfolio2 .single-portfolio a:hover::before {
     opacity: 0.502;
}
 .portfolio2 .single-portfolio a:hover .port-text {
     opacity: 1;
}
 .portfolio2 .single-portfolio a .port-text {
     position: absolute;
     left: 15%;
     bottom: 10%;
     opacity: 0;
     transition: .5s ease;
}
.product-details {
     position: relative;
     margin-bottom: 200px;
}
 .product-details .product-info {
     position: relative;
     margin-top: 260px;
}
 .product-details .product-info .sp-info {
     margin-top: 35px;
}
 .product-details .product-img {
     position: relative;
     margin-top: -80px;
}
 .product-details .product-text {
     position: relative;
}
 .product-details .product-text h2 {
     margin-top: 40px;
}
 .product-details .product-text p {
     margin-top: 30px;
}
 .product-details .product-text .pt-tittle {
     position: relative;
     padding-left: 50px;
     font-size: 18px;
     color: #fff;
}
 .product-details .product-text .pt-tittle::before {
     position: absolute;
     content: '';
     height: 80px;
     width: 30px;
     background: #fe0869;
     left: 0;
     top: 0;
}
 .product-details .product-img2 {
     position: relative;
     margin: 50px auto;
}
/*=======================Portfolio Style End========================*/
/*===================Service Style Start===================*/
.service {
     position: relative;
     text-align: center;
     margin-top: 10px;
}
 .service h2 {
     margin-bottom: 10px;
}
 .service .single-service {
     position: relative;
     background: #191919;
     padding: 20px 15px;
     margin: 7px 0px;
     border-radius: 5px;
     transform-style: preserve-3d;
}
 .service .single-service:hover .icon {
     -moz-transform: scaleX(-1);
     -o-transform: scaleX(-1);
     -ms-transform: scaleX(-1);
     -webkit-transform: scaleX(-1);
     transform: scaleX(-1);
}
 .service .single-service .icon {
     position: relative;
     padding-top: 20px;
     transition: .5s ease;
}
 .service .single-service .icon i {
     font-size: 70px;
     background: -moz-linear-gradient(-162deg, #fe0869 2%, #f80b35 48%, #f10d01 100%);
     background: -webkit-linear-gradient(-162deg, #fe0869 2%, #f80b35 48%, #f10d01 100%);
     background: -ms-linear-gradient(-162deg, #fe0869 2%, #f80b35 48%, #f10d01 100%);
     -webkit-background-clip: text;
     -moz-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
     transition: .5s ease;
}
 .service .single-service .content {
     position: relative;
}
 .service .single-service .content h3 {
     padding: 20px 0px;
}
 .service .single-service .content p {
     color: #c6c9d8;
}
.service-2 {
     position: relative;
}
 .service-2 h2 {
     color: #000000;
}
 .service-2 .single-service {
     position: relative;
     background: transparent;
     box-shadow: 0.349px 4.988px 9.2px 0.8px rgba(241, 241, 241, 0.91);
     transition: 1.2s ease !important;
}
 .service-2 .single-service:hover {
     background-color: #ff6666;
     box-shadow: 1.389px 7.878px 29.44px 2.56px rgba(255, 157, 157, 0.81);
}
 .service-2 .single-service:hover .icon {
     transition: 1s ease;
}
 .service-2 .single-service:hover .icon i {
     color: #fff;
}
 .service-2 .single-service:hover .content h3 {
     color: #fff;
}
 .service-2 .single-service:hover .content p {
     color: #fff;
}
 .service-2 .single-service .icon {
     transition: 1s ease;
}
 .service-2 .single-service .icon i {
     font-size: 70px;
     color: #ff6666;
     background: unset;
     -moz-background-clip: unset;
     background-clip: unset;
     -webkit-text-fill-color: unset;
     transition: 1s ease;
}
 .service-2 .single-service .content {
     position: relative;
}
 .service-2 .single-service .content h3 {
     padding: 20px 0px;
     transition: 1s ease;
     color: #000000;
}
 .service-2 .single-service .content p {
     color: #8b8b8b;
     transition: 1.5s ease;
}
/*===================Service Style End===================*/
/*==================Error Style Start============*/
.errore-area {
     position: relative;
     margin-top: 210px;
     margin-bottom: 180px;
     text-align: center;
}
 .errore-area .errore-img {
     position: relative;
}
 .errore-area .errore-img img {
     max-width: unset;
     width: auto;
}
 .errore-area .errore-text {
     padding-top: 50px;
}
 .errore-area .errore-text p {
     width: 400px;
     margin: 30px auto;
}
 .errore-area .errore-text .btn-1 {
     border-radius: 30px;
}
 .errore-area .errore-text .btn-1::before {
     border-radius: 30px;
}
/*==================Error Style end============*/
/*=================FAQ Style====================*/
.faq-area {
     position: relative;
     text-align: center;
     margin: 200px auto;
}
 .faq-area h2 {
     margin-bottom: 70px;
}
 .faq-area .card {
     border-radius: 0;
     margin-bottom: 30px;
     border-color: #191919;
     background-color: #191919;
     text-align: left;
}
 .faq-area .card .card-header {
     position: relative;
     background-color: #191919;
     border-radius: 0;
     border-bottom: 0;
     border-color: #191919;
}
 .faq-area .card .card-header .accordion-toggle.collapsed {
     font-size: 18px;
     color: #ffffff;
}
 .faq-area .card .card-header .accordion-toggle.collapsed .fa-chevron-up {
     display: none;
}
 .faq-area .card .card-header .accordion-toggle.collapsed .fa-chevron-down {
     display: block;
     position: absolute;
     right: 5px;
     font-size: 20px;
     top: 7px;
     color: #c6c9d8;
}
 .faq-area .card .card-header .accordion-toggle {
     font-size: 18px;
     color: #ffffff;
}
 .faq-area .card .card-header .accordion-toggle .fa-chevron-down {
     display: none;
}
 .faq-area .card .card-header .accordion-toggle .fa-chevron-up {
     position: absolute;
     right: 5px;
     font-size: 20px;
     top: 7px;
     color: #fe0869;
}
 .faq-area .card .card-block {
     padding: 0px 20px;
     background-color: #191919;
}
 .faq-area .card .card-block p {
     font-size: 14px;
     padding-bottom: 20px;
     line-height: 24px;
}
/*=================FAQ Style====================*/
/*===================Hiar Style Start=================*/
.hire {
     position: relative;
     margin-top: 10px;
}
 .hire::before {
     height: 100%;
     width: 100%;
     content: '';
     position: absolute;
     background: url(../img/hero/hire-bg1.png);
     background-size: cover;
     z-index: -1;
}
 .hire .hire-details {
     position: relative;
     padding: 80px 0px;
}
 .hire .hire-details h2 {
     padding-bottom: 60px;
}
 .hire .hire-details .hire-info {
     width: 50%;
}
 .hire .hire-details .hire-info .form-group {
     position: relative;
     margin-bottom: 25px;
}
 .hire .hire-details .hire-info .form-group input.form-control {
     height: 50px;
     padding: 15px;
     font-size: 15px;
     line-height: 25px;
     color: #c6c9d8;
     font-family: 'El Messiri',Helvetica,Arial,Lucida,sans-serif;
     background-color: #fff0;
     background-clip: padding-box;
     border: 1px solid #464547;
     border-radius: 0;
}
 .hire .hire-details .hire-info .form-group textarea.form-control {
     padding: 15px;
     font-size: 15px;
     line-height: 25px;
     color: #c6c9d8;
     background-color: #fff0;
     font-family: 'El Messiri',Helvetica,Arial,Lucida,sans-serif;
     background-clip: padding-box;
     border: 1px solid #464547;
     border-radius: 0;
}
 .hire .hire-details .hire-info .btn-1 {
     border: 0;
}
.hire2 {
     background-size: cover;
     position: relative;
}
 .hire2::before {
     background: url(../img/hero/hire-bg2.png);
     background-size: cover;
}
.hire3 {
     position: relative;
}
 .hire3::before {
     background: #191919;
}
 .hire3 .hire-details {
     position: relative;
     padding: 100px 0px 115px;
}
 .hire3 .hire-details h2 {
     padding-bottom: 50px;
}
 .hire3 .hire-details .hire-text {
     position: relative;
}
 .hire3 .hire-details .hire-text p {
     color: #6e6e6e;
     padding: 0px 24% 50px 0px;
}
 .hire3 .hire-details .hire-text .social-icon {
     position: relative;
}
 .hire3 .hire-details .hire-text .social-icon ul {
     position: relative;
}
 .hire3 .hire-details .hire-text .social-icon ul li {
     margin-left: 15px;
}
 .hire3 .hire-details .hire-text .social-icon ul li a {
     font-size: 17px;
     color: #6e6e6e;
     transition: .5s ease;
}
 .hire3 .hire-details .hire-text .social-icon ul li a:hover {
     color: #831c5b;
}
 .hire3 .hire-details .hire-info {
     width: 100%;
}
 .hire3 .hire-details .hire-info .form-group {
     position: relative;
}
 .hire3 .hire-details .hire-info .form-group input.form-control {
     border: 0;
     border-bottom: 1.2px solid;
     border-color: #464547;
     padding: 0;
     font-size: 16px;
}
 .hire3 .hire-details .hire-info .form-group input.form-control::placeholder {
     color: #fff;
}
 .hire3 .hire-details .hire-info .form-group input.form-control:focus {
     outline: none !important;
     box-shadow: none !important;
     border-color: #831c5b !important;
}
 .hire3 .hire-details .hire-info .form-group textarea.form-control {
     border: 0;
     border-bottom: 1.2px solid;
     border-color: #464547;
     padding: 0;
     color: #fff;
     font-size: 16px;
}
 .hire3 .hire-details .hire-info .form-group textarea.form-control::placeholder {
     color: #fff;
}
 .hire3 .hire-details .hire-info .form-group textarea.form-control:focus {
     outline: none !important;
     box-shadow: none !important;
     border-color: #831c5b !important;
}
 .hire3 .hire-details .hire-info .btn-3 {
     border: 0;
     background: #831c5b;
     font-size: 15px;
     padding: 14px 30px;
     letter-spacing: 0;
     margin-left: 15px;
     margin-top: 10px;
}
.hire3-v2 {
     position: relative;
     margin-top: 30px;
}
 .hire3-v2::before {
     background: #101010;
}
 .hire3-v2 .btn-1 {
     margin-left: 15px;
     margin-top: 15px;
}
 .hire3-v2 .hire-details .hire-text p {
     color: #c6c9d8;
}
.con-hire {
     margin: 0;
     background: #191919;
     margin-top: -30px;
     border-radius: 8px;
}
 .con-hire .hire-details {
     padding: 100px 20px 115px;
}
 .con-hire .hire-details .hire-text {
     position: relative;
}
 .con-hire .hire-details .hire-text .social-icon {
     position: relative;
}
 .con-hire .hire-details .hire-text .social-icon ul {
     position: relative;
}
 .con-hire .hire-details .hire-text .social-icon ul li a:hover {
     color: #fe0869;
}
 .con-hire .hire-details .hire-info .btn-1 {
     margin-left: 15px;
     margin-top: 20px;
}
.contact-info {
     position: relative;
     margin-top: 60px;
     margin-bottom: 150px;
}
 .contact-info .single-info {
     position: relative;
     text-align: center;
     background: #191919;
     padding: 30px 50px;
     border-radius: 8px;
}
 .contact-info .single-info i {
     font-size: 30px;
     color: #fe0869;
}
 .contact-info .single-info p {
     line-height: 24px;
}
 .contact-info .single-info h5 {
     line-height: 32px;
}
/*===================Hiar Style End=================*/
/*=================Footer Style Start======================*/
footer {
     position: relative;
     background: #191919;
     padding: 30px 0px;
}
 footer .logo img {
     max-width: unset;
     width: auto;
}
 footer .text {
     position: relative;
     text-align: center;
}
 footer .text p {
     font-size: 16px;
     font-weight: 400;
}
 footer .text p a {
     color: #a3a6b2;
     transition: .5s ease;
}
 footer .text p a:hover {
     color: #fe0869;
}
 footer .social-icon {
     position: relative;
     text-align: right;
}
 footer .social-icon ul {
     position: relative;
}
 footer .social-icon ul li {
     margin-left: 15px;
}
 footer .social-icon ul li a {
     font-size: 17px;
     color: #c6c9d8;
     transition: .5s ease;
}
 footer .social-icon ul li a:hover {
     color: #fe0869;
}
.footer-2 {
     position: relative;
     background: #831c5b;
}
 .footer-2 .footer-nav {
     position: relative;
}
 .footer-2 .footer-nav ul li {
     padding: 5px 10px;
}
 .footer-2 .footer-nav ul li a {
     font-size: 16px;
     color: #ffffff;
     transition: .5s ease;
}
 .footer-2 .footer-nav ul li a:hover {
     color: #831c5b;
}
 .footer-2 .text {
     text-align: right;
}
 .footer-2 .text p {
     color: #fff;
}
 .footer-2 .text p a {
     color: #fff;
}
 .footer-2 .text p a:hover {
     color: #831c5b;
}
/*=================Footer Style End======================*/
/* Animation style */
@-webkit-keyframes spinnerRotateone {
     0% {
         -webkit-transform: rotate(0deg) translateY(30px);
         transform: rotate(0deg) translateY(30px);
    }
     100% {
         -webkit-transform: rotate(160deg) translateY(30px);
         transform: rotate(160deg) translateY(30px);
    }
}
@keyframes spinnerRotateone {
     0% {
         -webkit-transform: rotate(0deg) translateY(30px);
         transform: rotate(0deg) translateY(30px);
    }
     100% {
         -webkit-transform: rotate(160deg) translateY(30px);
         transform: rotate(160deg) translateY(30px);
    }
}
@-webkit-keyframes slideInnew3 {
     0% {
         -webkit-transform: translate(-30px, -100px);
         -ms-transform: translate(-30px, -100px);
         transform: translate(-30px, -100px);
    }
     100% {
         -webkit-transform: translate(0, 0);
         -ms-transform: translate(0, 0);
         transform: translate(0, 0);
    }
}
@keyframes slideInnew3 {
     0% {
         -webkit-transform: translate(-30px, -100px);
         -ms-transform: translate(-30px, -100px);
         transform: translate(-30px, -100px);
    }
     100% {
         -webkit-transform: translate(0, 0);
         -ms-transform: translate(0, 0);
         transform: translate(0, 0);
    }
}
@-webkit-keyframes slideInnew4 {
     0% {
         -webkit-transform: translate(30px, 0px);
         -ms-transform: translate(30px, 0px);
         transform: translate(30px, 0px);
    }
     100% {
         -webkit-transform: translate(0, 0);
         -ms-transform: translate(0, 0);
         transform: translate(0, 0);
    }
}
@keyframes slideInnew4 {
     0% {
         -webkit-transform: translate(30px, 0px);
         -ms-transform: translate(30px, 0px);
         transform: translate(30px, 0px);
    }
     100% {
         -webkit-transform: translate(0, 0);
         -ms-transform: translate(0, 0);
         transform: translate(0, 0);
    }
}
@-webkit-keyframes scrollup {
     0% {
         -webkit-transform: translate(0px, 30px);
         -ms-transform: translate(0px, 30px);
         transform: translate(0px, 30px);
    }
     100% {
         -webkit-transform: translate(0, 0);
         -ms-transform: translate(0, 0);
         transform: translate(0, 0);
    }
}
@keyframes scrollup {
     0% {
         -webkit-transform: translate(0px, 30px);
         -ms-transform: translate(0px, 30px);
         transform: translate(0px, 30px);
    }
     100% {
         -webkit-transform: translate(0, 0);
         -ms-transform: translate(0, 0);
         transform: translate(0, 0);
    }
}
@-webkit-keyframes roket {
     0% {
         -webkit-transform: translate(0px, 30px);
         -ms-transform: translate(0px, 30px);
         transform: translate(0px, 30px);
    }
     100% {
         -webkit-transform: translate(0, 0);
         -ms-transform: translate(0, 0);
         transform: translate(0, 0);
    }
}
@keyframes roket {
     0% {
         -webkit-transform: translate(0px, 80px);
         -ms-transform: translate(0px, 80px);
         transform: translate(0px, -70px);
    }
     100% {
         -webkit-transform: translate(0, 0);
         -ms-transform: translate(0, 0);
         transform: translate(0, 0);
    }
}
@keyframes spin {
     from {
         transform: rotate(0deg);
    }
     to {
         transform: rotate(360deg);
    }
}
@keyframes spin2 {
     0% {
         opacity: 1;
         -webkit-transform: scale(0.9);
         -ms-transform: scale(0.9);
         -o-transform: scale(0.9);
         transform: scale(0.9);
    }
     100% {
         opacity: 0;
         -webkit-transform: scale(1.5);
         -ms-transform: scale(1.5);
         -o-transform: scale(1.5);
         transform: scale(1.5);
    }
}
@-webkit-keyframes years {
     50% {
         -webkit-transform: scale(1);
         -moz-transform: scale(1);
         -ms-transform: scale(1);
         -o-transform: scale(1);
         transform: scale(1);
    }
}
@keyframes years {
     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);
    }
}
/* End Animation style */
/*----------------------------------------*/
/* Potfo RTL Style
/*----------------------------------------*/
html[dir="rtl"] header.header-area .logo-wrapper {
     text-align: right;
}
html[dir="rtl"] header.header-area .menu-3 {
     float: left;
}
html[dir="rtl"] .sm-mint ul {
     width: 16em !important;
}
html[dir="rtl"] .sm-mint ul ul {
     margin-left: 236px !important;
}
html[dir="rtl"] .about-details .ad-text {
     text-align: right;
}
html[dir="rtl"] .hire3 .hire-details .hire-text {
     text-align: right;
}
html[dir="rtl"] .hire3 .hire-details .hire-text p {
     padding: 0px 0 50px 0px;
}
html[dir="rtl"] .blog .blog-details .sb-text {
     text-align: right;
}
html[dir="rtl"] .side-bar {
     padding-left: 0;
     text-align: right;
}
html[dir="rtl"] .side-bar .recent-post .single-recent-blog .srb-text {
     padding-left: 0;
     padding-right: 15px;
}
html[dir="rtl"] footer .social-icon {
     text-align: left;
}
html[dir="rtl"] footer .logo {
     text-align: right;
}
html[dir="rtl"] .blog .single-blog .sb-text {
     text-align: right;
}
html[dir="rtl"] .blog .b-classic span:nth-child(2) {
     float: left;
}
html[dir="rtl"] .contact-info .single-info {
     padding: 30px 20px;
}
html[dir="rtl"] .faq-area .card .card-block {
     text-align: right;
}
html[dir="rtl"] header.header-area .menu-wrapper .header-btn {
     left: 0;
     right: unset;
}
html[dir="rtl"] .menu-rtl {
     float: right;
}
html[dir="rtl"] .hero-area .hero-content span.sign {
     margin-top: 35px;
}
html[dir="rtl"] .about .about-img {
     width: calc(100% + 20%);
     margin-right: -20%;
     margin-left: unset;
}
html[dir="rtl"] .hire .hire-details {
     text-align: right;
}
html[dir="rtl"] .hire::before {
     background-position: center;
     right: 0;
     left: 0;
     top: 0;
}
html[dir="rtl"] .about .about-content .about-single-content {
     text-align: right;
}
html[dir="rtl"] .about .about-content .about-single-content p {
     padding-right: 0;
}
html[dir="rtl"] .hero-area .hero-content {
     text-align: right;
}
html[dir="rtl"] .service .single-service .content p {
     font-size: 15px;
}
html[dir="rtl"] .about-3 .about-content .about-single-content h2 {
     padding-right: 0;
}
html[dir="rtl"] .footer-2 .text {
     text-align: left;
}
html[dir="rtl"] .testimonial {
     direction: ltr;
}
html[dir="rtl"] .testimonial .client .single-client {
     direction: rtl;
}
html[dir="rtl"] .progress .progress-bar .title {
     right: unset;
     left: 0;
}
html[dir="rtl"] .hire3 .hire-details .hire-info .btn-3 {
     margin-right: 15px;
}
html[dir="rtl"] .hire3-v2 .btn-1 {
     margin-left: 0;
     margin-right: 15px;
}
html[dir="rtl"] .product-details .product-info {
     text-align: right;
}
html[dir="rtl"] .blog .comment-details {
     text-align: right;
}
html[dir="rtl"] .con-hire .hire-details .hire-info .btn-1 {
     margin-left: 0;
     margin-right: 15px;
}
/*----------------------------------------*/
/* Portfo RTL Style END
/*----------------------------------------*/
/*----------------------------------------*/
/* Portfo RTL Responsive Style
/*----------------------------------------*/
@media only screen and (max-width: 1499px) {
     html[dir="rtl"] .hero-area .hero-img {
         margin-left: 0;
         margin-right: -250px;
    }
     html[dir="rtl"] .hire::before {
         background-position: right;
    }
     html[dir="rtl"] .hero3 .hero-img {
         margin-left: -22px !important;
         margin-right: 0 !important;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
     html[dir="rtl"] .about .about-img {
         width: 100%;
         margin-right: 0;
    }
     html[dir="rtl"] .hero-area .hero-img {
         margin-left: 0;
         margin-right: -173px;
    }
}
@media only screen and (max-width: 767px) {
     html[dir="rtl"] .main-menu-btn {
         float: left;
    }
     html[dir="rtl"] .about .about-img {
         width: 100%;
         margin-right: 0;
    }
     html[dir="rtl"] footer .logo {
         text-align: center;
    }
     html[dir="rtl"] footer .social-icon {
         text-align: center;
    }
     html[dir="rtl"] .hero-area .hero-img {
         margin-left: 0;
         margin-right: 0;
    }
     html[dir="rtl"] .footer-2 .text {
         text-align: center;
    }
     html[dir="rtl"] .sm-mint ul {
         width: auto !important;
    }
     html[dir="rtl"] .sm-mint ul ul {
         margin-left: 0px !important;
    }
}
@media only screen and (max-width: 380px) {
     html[dir="rtl"] .errore-area .errore-text p {
         width: 290px;
    }
}
/*----------------------------------------*/
/* Portfo RTL Responsive Style End
/*----------------------------------------*/
/*========================Responsive Style==========================*/
@media only screen and (max-width: 1499px) {
     .hero-area .hero-img {
         margin-left: -220px;
    }
     .hero3 .hero-img {
         margin-left: -22px !important;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
     .sm-mint a .sub-arrow {
         display: none;
    }
}
@media only screen and (min-width: 1199px) {
     .sm-mint a.has-submenu {
         padding-right: 34px;
    }
}
@media only screen and (max-width: 1199px) {
     .sm-mint a, .sm-mint a:hover, .sm-mint a:focus, .sm-mint a:active, .sm-mint a.highlighted {
         padding: 14px 12px;
         font-size: 12px;
    }
     .hero-area .hero-content h1 {
         margin-left: -5px;
         font-size: 72px;
         line-height: 85px;
    }
     .hero-area .hero-content span.sign {
         font-size: 50px;
         margin-top: 60px;
    }
     .about .about-content .about-single-content .single-award h4 {
         font-size: 18px;
         line-height: 33px;
    }
     .service {
         margin-top: 10px;
    }
     .portfolio {
         margin-top: 10px;
    }
     .testimonial {
         margin-top: 10px;
    }
     .blog {
         margin-top: 10px;
    }
     .hire {
         margin-top: 10px;
    }
     .about-2 {
         margin-top: 10px;
    }
     .hero3 .hero-img {
         margin-top: 10px;
    }
     .footer-2 .footer-nav ul li a {
         font-size: 11px;
    }
     .footer-2 .footer-nav ul li {
         padding: 5px 6px;
    }
     .about-3 .about-img {
         overflow: hidden;
    }
     .portfolio2 {
         margin-top: 100px;
    }
     .faq-area {
         margin: 100px auto;
    }
     .errore-area {
         margin-top: 120px;
         margin-bottom: 140px;
    }
     .side-bar {
         margin-top: 100px;
         padding-left: 0;
    }
     .contact-info .single-info {
         padding: 30px 15px;
    }
     .contact-info {
         margin-bottom: 100px;
    }
}
@media only screen and (max-width: 1043px) {
     header.header-area .menu-wrapper .header-btn .btn-chat {
         font-size: 12px;
         width: 110px;
    }
     header.header-area .menu-wrapper .header-btn .btn-chat span {
         padding: 5px 15px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991.9px) {
     .sm-mint a {
         font-size: 10px;
    }
     .sm-mint a .sub-arrow {
         display: none;
    }
     .about .about-content .about-single-content .single-award img {
         max-width: 100%;
         width: 100%;
    }
     .service .single-service .content h3 {
         font-size: 18px;
    }
     .service .single-service {
         padding: 40px 15px;
    }
     .service .single-service .content p {
         font-size: 14px;
    }
     .portfolio .single-portfolio .sp-text h3 {
         font-size: 18px;
         line-height: 28px;
    }
     .portfolio .single-portfolio .sp-text h6 {
         font-size: 12px;
         line-height: 22px;
    }
     .portfolio .single-portfolio .sp-text .btn-2 {
         font-size: 12px;
         padding: 5px 12px;
         min-width: unset;
         margin-top: 20px;
    }
     .blog .single-blog .sb-text {
         padding: 14px;
    }
     .blog .single-blog .sb-text h3 {
         margin-top: 10px;
         min-height: unset;
         margin-bottom: 15px;
         font-size: 17px;
         line-height: 28px;
    }
     .blog .single-blog .sb-text .btn-2 {
         padding: 5px 12px;
         min-width: unset;
         font-size: 12px;
         margin-top: 20px;
    }
     .blog .single-blog .sb-text span {
         font-size: 12px;
         line-height: 22px;
    }
     footer .text p {
         font-size: 12px;
    }
     footer .social-icon ul li a {
         font-size: 12px;
    }
     footer .social-icon ul li {
         margin-left: 10px;
    }
     .hero2 .hero-img {
         margin-top: 60px;
         margin-left: -200px !important;
    }
     .hero2 .hero-content h1 {
         font-size: 54px;
         line-height: 64px;
    }
     .hero2 .hero-content h2 {
         font-size: 30px !important;
         line-height: 40px !important;
    }
     .hero2 .hero-content p {
         font-size: 22px;
         line-height: 34px;
    }
     .hero3 .hero-content {
         padding: 213px 0px !important;
    }
     .hero3 .hero-content h1 {
         font-size: 60px;
         line-height: 70px;
    }
     .hero3 .hero-content p {
         font-size: 20px;
         line-height: 30px;
    }
     .footer-2 .footer-nav ul li a {
         font-size: 8px;
    }
     .footer-2 .text p {
         font-size: 10px;
    }
     .hire3 .hire-details h2 {
         padding-bottom: 35px;
         font-size: 28px;
         line-height: 37px;
    }
     .hire3 .hire-details .hire-text p {
         padding: 0px 0 36px 0px;
    }
     .about-3 .about-img img.ab-3-bg {
         width: 70%;
    }
     .about-3 .about-img::after {
         right: 20px;
    }
     .faq-area .card .card-header .accordion-toggle.collapsed {
         font-size: 14px;
    }
     .side-bar .catagory ul.c-list li a {
         font-size: 15px;
    }
     .side-bar .catagory ul.c-list li {
         padding: 8px 0px;
    }
     .side-bar .recent-post .single-recent-blog .srb-text h5 {
         font-size: 12px;
         line-height: 20px;
    }
     .contact-info .single-info p {
         line-height: 20px;
         font-size: 11px;
    }
}
@media only screen and (max-width: 991px) {
     header.header-area .menu-wrapper .header-btn .btn-chat {
         font-size: 10px;
         width: 90px;
    }
     header.header-area .menu-wrapper .header-btn .btn-chat span {
         padding: 3px 15px;
    }
     .hero-area .hero-img {
         margin-left: -300px;
    }
     .hero-area .hero-content h2 {
         font-size: 40px;
         line-height: 48px;
    }
     .hero-area .hero-content span.sign {
         font-size: 40px;
         margin-top: 30px;
    }
     .hero-area .hero-content {
         padding: 260px 0px;
    }
     .testimonial .client button.owl-prev {
         font-size: 35px;
    }
     .testimonial .client button.owl-next {
         font-size: 35px;
    }
     .about .about-content {
         padding-left: 0;
    }
     .about .about-content .nav-tabs {
         margin-top: -70px;
    }
     .nav-fill .nav-item {
         font-size: 18px;
    }
     .about .about-content .about-single-content {
         margin-top: 5px;
    }
     .about .about-content .about-single-content h2 {
         margin-bottom: 25px;
         font-size: 30px;
         line-height: 40px;
    }
     .about .about-content .about-single-content p {
         font-size: 14px;
         padding-right: 0;
         line-height: 24px;
    }
     .btn-1 {
         padding: 12px 25px;
         min-width: unset;
         font-size: 14px !important;
         margin-top: 30px;
    }
     .testimonial .client .single-client {
         padding: 90px 30px 50px;
    }
     .testimonial .client .single-client .flaticon-quote {
         font-size: 70px;
         top: 16px;
    }
     .testimonial .client .single-client p {
         font-size: 16px;
    }
     .testimonial .client .single-client span {
         font-size: 14px;
         margin-top: 30px;
    }
     .testimonial .client .single-client span small {
         font-size: 15px;
    }
     .video {
         height: 320px;
         margin-top: 100px;
    }
     .video a {
         height: 55px;
         width: 55px;
         line-height: 55px;
         font-size: 18px;
    }
     .about-details {
         margin-top: 100px;
    }
     .about-details .ad-text h3 {
         font-size: 22px;
         line-height: 32px;
    }
     .about-details .ad-text p {
         padding-top: 30px;
         font-size: 16px;
    }
     .product-details .product-info {
         margin-top: 60px;
    }
     .blog .blog-details .sb-text {
         padding: 30px 0px !important;
    }
}
/*--Max-width :991px----------*/
@media only screen and (max-width: 850px) {
     .sm-mint a {
         font-size: 10px;
         padding: 14px 9px;
    }
}
/*===========Max-width : 867px---------------*/
@media only screen and (max-width: 767px) {
     .sm-mint a {
         color: white;
         padding: 14px 10px;
         font-size: 12px;
    }
     .sm-mint {
         padding: 31px 20px;
    }
     .circle {
         display: none;
    }
     #main-menu {
         position: fixed;
         max-height: 383px;
         border-bottom: 0;
         overflow-y: scroll;
         width: 100%;
         top: 70px;
         border-radius: 15px;
         border-top-left-radius: 0;
         border-top-right-radius: 0;
         left: 0;
         box-shadow: 0 4px 3px rgba(0, 0, 0, 0.25);
    }
     header.header-area .menu-wrapper .header-btn {
         display: none;
    }
     .hero-area .hero-content {
         padding: 200px 0px 100px;
    }
     .hero-area .hero-img {
         margin-left: 0;
    }
     .hero-area .hero-img img {
         max-width: 100%;
         width: 100%;
    }
     .about .about-img {
         width: 100%;
         margin-left: 0;
         margin-top: 60px;
    }
     .scrollup-icon {
         font-size: 30px;
    }
     .scroll-top.open {
         right: 20px;
    }
     .testimonial .client button.owl-prev {
         display: none;
    }
     .testimonial .client button.owl-next {
         display: none;
    }
     .hire .hire-details .hire-info {
         width: 100%;
    }
     footer {
         text-align: center;
    }
     footer .text {
         padding: 12px 0px;
    }
     footer .social-icon {
         text-align: center;
    }
     .hero3 .hero-content {
         padding: 150px 0px 100px;
    }
     .hero3 .hero-img {
         margin-top: 0;
         margin-left: 0 !important;
    }
     .about-3 .about-img {
         overflow: hidden;
    }
     .video-2 {
         background-position: center;
    }
     .footer-2 .text {
         text-align: center;
         padding: 0;
    }
     .footer-2 .text p {
         font-size: 12px;
    }
     .footer-2 .footer-nav {
         padding: 10px 0px;
    }
     .hire3 .hire-details .hire-info {
         margin-top: 50px;
    }
     .ad-img {
         margin-top: 50px;
    }
     .faq-area h2 {
         font-size: 30px;
         line-height: 40px;
    }
     .errore-area .errore-img img {
         width: 80%;
    }
     .product-details .product-img {
         margin-top: 60px;
    }
     .product-details .product-text h2 {
         font-size: 30px;
         line-height: 40px;
    }
     .product-details .product-text .pt-tittle {
         padding-left: 40px;
         font-size: 16px;
         line-height: 24px;
    }
     .product-details {
         margin-bottom: 100px;
    }
     .mar-bot-150 {
         margin-bottom: 80px;
    }
     .blog .b-classic h3 {
         margin-bottom: 50px;
         font-size: 25px;
         line-height: 35px;
    }
     .side-bar {
         margin-top: 0;
    }
     .side-bar .tag {
         margin-bottom: 60px;
    }
     .contact-info .single-info {
         margin: 15px auto;
    }
     header.header-area .sm-mint.mv-2 {
         background: #831c5b;
    }
}
@media only screen and (max-width: 512px) {
     .hero-area .hero-content {
         padding: 150px 0px 100px;
    }
     .hero-area .hero-content p {
         font-size: 22px;
         line-height: 30px;
    }
     .hero-area .hero-content h1 {
         font-size: 60px;
         line-height: 70px;
    }
     .hero-area .hero-content h2 {
         font-size: 28px;
         line-height: 38px;
    }
     .hero-area .hero-content span.sign {
         font-size: 30px;
         margin-top: 10px;
    }
     .video {
         height: 220px;
    }
     .about-2 {
         margin-top: 70px;
    }
     .btn-3 {
         padding: 10px 25px;
         font-size: 12px !important;
         min-width: unset;
    }
     .hire3 {
         margin-top: 50px;
    }
     .portfolio2 label.btn {
         font-size: 15px;
         padding: 0px 8px;
    }
     .portfolio2 {
         margin-top: 60px;
    }
     .portfolio2 label.btn {
         margin-bottom: 30px;
    }
     .faq-area h2 {
         font-size: 22px;
         line-height: 30px;
    }
}
@media only screen and (max-width: 434px) {
     .service h2 {
         margin-bottom: 35px;
         font-size: 30px;
         line-height: 40px;
    }
     .portfolio h2 {
         margin-bottom: 40px;
         font-size: 30px;
         line-height: 40px;
    }
     .testimonial h2 {
         margin-bottom: 40px;
         font-size: 28px;
         line-height: 40px;
    }
     .hero2 .hero-content h1 {
         font-size: 50px;
         line-height: 60px;
    }
     .hero2 .hero-content h2 {
         font-size: 25px !important;
         line-height: 34px !important;
    }
     .hero2 .hero-content {
         padding: 150px 0px 65px;
    }
     header.header-area {
         padding: 21px 0px;
    }
     .sm-mint a {
         padding: 10px 10px;
    }
     .hero3 .hero-content {
         padding: 120px 0px 80px;
    }
     .about-3 .about-img img.ab-3-bg {
         width: 65%;
         max-width: 100%;
    }
     .about-3 .about-img::before {
         width: 100%;
    }
     .about-3 .about-img::after {
         right: 0px;
    }
     .errore-area .errore-img img {
         width: 70%;
    }
     .errore-area .errore-text h2 {
         font-size: 32px;
         line-height: 44px;
    }
     .errore-area .errore-text p {
         width: 300px;
         margin: 30px auto;
         font-size: 12px;
         line-height: 24px;
    }
     .product-details .product-text h2 {
         font-size: 25px;
         line-height: 35px;
    }
     .inner-hero .page-tittle h2 {
         font-size: 30px;
         line-height: 40px;
    }
     .blog .pagination {
         width: 320px;
         margin-top: 30px !important;
    }
     .mar-bot-150 {
         margin-bottom: 60px;
    }
}
@media only screen and (max-width: 402px) {
     .blog .single-blog .sb-text h3 {
         font-size: 18px;
         line-height: 28px;
         margin-top: 20px;
         min-height: 80px;
    }
     .hero3 .hero-content h1 {
         font-size: 50px;
         line-height: 60px;
    }
     .hero3 .hero-content p {
         font-size: 18px;
         line-height: 28px;
    }
     .hire3 .hire-details h2 {
         font-size: 30px;
         line-height: 40px;
    }
     .portfolio2 label.btn {
         font-size: 10px;
         padding: 0px 6px;
    }
     .inner-hero .page-tittle {
         padding: 120px 0px;
    }
}
@media only screen and (max-width: 388px) {
     .portfolio .single-portfolio .sp-text .btn-2 {
         font-size: 14px;
         padding: 6px 15px;
         min-width: unset;
         margin-top: 30px;
    }
     .errore-area {
         margin-top: 90px;
         margin-bottom: 90px;
    }
     .blog .pagination {
         width: 300px;
    }
}
@media only screen and (max-width: 359px) {
     .nav-fill .nav-item {
         font-size: 15px;
    }
     .about .about-content .about-single-content h2 {
         margin-bottom: 15px;
         font-size: 26px;
    }
     .about .about-content .about-single-content p {
         font-size: 12px;
         line-height: 22px;
    }
     .testimonial .client .single-client p {
         font-size: 14px;
    }
     .testimonial .client .single-client {
         padding: 90px 20px 50px;
    }
     .hero2 .hero-content h1 {
         font-size: 44px;
         line-height: 55px;
    }
     .faq-area h2 {
         margin-bottom: 10px;
    }
     .faq-area {
         margin: 70px auto;
    }
     .faq-area .card .card-header .accordion-toggle.collapsed {
         font-size: 14px;
         line-height: 20px;
    }
     .faq-area .card .card-header .accordion-toggle.collapsed .fa-chevron-down {
         right: 0px;
         font-size: 16px;
         top: 5px;
    }
}
/* --------------------------- Custom Typography--------------------------*/
/* Your Custom Typography. */
/*# sourceMappingURL=style.css.map */