@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/*----------------------------------------*/
/*  1.  Theme default CSS
/*----------------------------------------*/
body {
    font-family: 'Roboto', sans-serif;
	font-size:16px;
	line-height:28px;
	color:#E9E9E9;
	font-weight:normal;
    transition:.3s;
    overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
    font-weight:500;
    color: #212f36;
}
a {transition: .3s;}
a,a:hover {color:#fb5c71;}
img {max-width:100%;}
ul.list-none {
    margin:0;
    padding:0;
    list-style: none;
}
ul.list-inline li {display: inline-block;}
input:focus, textarea:focus {outline: 0;}
.ps-unset {position: unset;}
.d-hidden {display: none;}
/*----------------------------------------*/
/*  1.2  Section Title
/*----------------------------------------*/
.section-title {
    color:#ffffff;
}
.section-title h5 {
    font-size: 16px;
    font-style: italic;
    color:#ffffff;
    margin-bottom: 4px;
}
.section-title span {
    color:#F95353;
}
.section-title h2, .section-title h3 {
    font-size: 52px;
    font-weight: 400;
}
.section-title h2, .section-title h3 {
    color:#ffffff;
}
.section-title h3 {
    font-size: 36px;
}
.section-title p {
    margin-top:25px;
}
.section-title.section-dark-text h2, .section-title.section-dark-text h3, .section-title.section-dark-text h5 {
    color:#03004E;
}
.section-title.section-dark-text {
    color:#666666;
}
.section-title.section-title-bold h2, .section-title.section-title-bold h3 {
    font-weight: 700;
}
@media (min-width: 1200px) {
.container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 1170px;
    padding: 0;
}
}
/*----------------------------------------*/
/*  1.3  Sticky Menu
/*----------------------------------------*/
.stick {
    top: 0;
    position: fixed;
    width: 100%;
    z-index: 9999;
    background-color: #2B2344;
    -webkit-box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.2);
    -webkit-animation: 900ms cubic-bezier(0.2, 1, 0.22, 1) 0s normal none 1 running fadeInDown;
    animation: 900ms cubic-bezier(0.2, 1, 0.22, 1) 0s normal none 1 running fadeInDown;
    border-bottom: 0;
    padding-top: 0;
}
/*----------------------------------------*/
/*  1.4  Scrollup CSS */
/*----------------------------------------*/
#scrollUp {

	font-size: 20px;
	transition: all .2s ease-in-out 0s;
	position: fixed;
	z-index: 99;
	bottom: 50px;
	right: 50px;
	display: inline-block;
	color: #fff;
	width: 45px;
	height: 45px;
	line-height: 46px;
	border-radius: 3px;
	text-align: center;
    background: #F95353;
    text-decoration: none;
}
/*----------------------------------------*/
/*  1.5 Preloader css
/*----------------------------------------*/
.preloader {
    background: #1D1730;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99999;
}
.spinner_text{
    width: 300px;
    height: 80px;
    position: absolute;
    top: 130px;
    left: 0;
	right:0;
	bottom:0;
	margin:auto;
	text-align: center;
}
.spinner_text h2{
    color: #fff;
	font-size: 20px;
	text-align: center;
	
	
}
.spinner-inner {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
    left: 0;
	right:0;
	bottom:0;
	margin:auto;
	border: 4px solid #2B2344;
    border-top: 4px solid #F95353;
    border-radius: 100%;
    -webkit-animation: spinner 2000ms infinite linear;
    animation: spinner 2000ms infinite linear;
    z-index: 999999;
}

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

@keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
/*----------------------------------------*/
/*  2.  Header Area
/*----------------------------------------*/
.header-area {
    background-color: #1D1730;
    padding-top: 50px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 2;
}
.header-area-white, .header-area-white.stick  {
    background-color: #F5F5F5;
}
.header-area .row {
	height:70px;
}
/*----------------------------------------*/
/*  2.2  Mainmenu
/*----------------------------------------*/
.logo img{
    margin-top: -10px;
    height: 90px;
    width: 90px;
}
.logo h2 {
    font-size: 22px;
    font-weight: 800;
    color: #F95353;
}
.mainmenu ul li {
    margin-right: 40px;
    position: relative;
}
.mainmenu > ul > li::before, .mainmenu > ul > li::after {
    background-color: #F95353;
    width: 0;
    height: 2px;
    position: absolute;
    left: 0;
    bottom: -2px;
    content: "";
    transition: .3s;
}
.mainmenu > ul > li::after {
    left:unset;
    right:0;
}
.mainmenu > ul > li:hover::before, .mainmenu > ul > li:hover::after {
    width:50%;
}
.mainmenu > ul > li > a::after {
	background-color: #F95353;
	width: 6px;
	height: 6px;
	border-radius: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: -8px;
	content: "";
	margin: auto;
	transition: .4s;
	visibility: hidden;
	opacity: 0;
}
.mainmenu > ul > li:hover > a::after {
    visibility: visible;
    opacity: 1;
    top: 33.9px;
}
.mainmenu > ul > li:last-child {
    margin-right: 0;
}
.mainmenu ul li a {
    font-size: 16px;
    font-weight: 400;
    color:#ffffff;
    text-decoration: none;
}
.mainmenu > ul > li > a {
	padding:10px 0;
}
.stellarnav.dark ul ul {
	background-color:#2B2344;
}
.mainmenu ul li ul li {
	margin:0;
}
.mainmenu ul li ul li a {
	border-bottom:1px solid rgba(255,255,255,.06);
}
.mainmenu ul li ul li a:hover {
	color:#F95353;
}
.mainmenu ul li ul li:last-child a {
	border-bottom:0;
}
.mainmenu ul li.has-sub::before, .mainmenu ul li.has-sub::after, .mainmenu ul li.has-sub a::after {
	display:none;
}
.stellarnav ul ul {
    box-shadow: 1px 1px 5px rgba(0,0,0,.05);
}

.btn-common.hire-me {
    display: none;
}
.header-area.stick .mainmenu ul li::before, .header-area.stick .mainmenu ul li::after {
    bottom: 0;
}
.header-area.stick  .mainmenu ul li:hover a::after {
    visibility: visible;
    opacity: 1;
    top: 30px;
}
.header-area.stick .btn-common.btn-hire::before, .header-area.stick .btn-common.btn-hire::after {
    background-color: #1D1730;
}
.stellarnav.light ul li ul li a {
	border-bottom:1px solid rgba(0,0,0,.06);
}
.mainmenu ul li.has-sub a span {
    position: absolute;
    top: 12px;
    right: -20px;
    bottom: 0;
    margin: auto;
}
.mainmenu ul li.has-sub ul li a span {
    top: 15px;
    right: 10px;
}
/*----------------------------------------*/
/*  2.3  Menu Stick
/*----------------------------------------*/
@keyframes sticky {
    0% {
      top: -200px;
    }
    100% {
      top: 0;
    }
  }
.stick, .mainmenu-area.in-home.stick {
    top: 0;
    position: fixed;
    width: 100%;
    z-index: 9999;
    background-color: #2B2344;
    -webkit-box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.2);
    animation: sticky 1.2s;
	border-bottom:0;
	padding-top:0;
}
.mainmenu-area .row {
    height:100px !important;
}
.mainmenu-area.stick {
	background-color: #1E46DD;
	z-index: 9999;
}
.mainmenu-area.stick  .row {
	height:80px !important;
}
.mainmenu .navbar-toggler {
    display: none;
}
/*----------------------------------------*/
/*  2.3  Menu Stick
/*----------------------------------------*/
.stick, .mainmenu-area.in-home.stick {
    top: 0;
    position: fixed;
    width: 100%;
    z-index: 9999;
    background-color: #2B2344;
    -webkit-box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.2);
	border-bottom:0;
	padding-top:0;
}
.mainmenu-area .row {
    height:100px !important;
}
.mainmenu-area.stick {
	background-color: #1E46DD;
	z-index: 9999;
}
.mainmenu-area.stick  .row {
	height:80px !important;
}
.mainmenu .navbar-toggler {
    display: none;
}
.mainmenu.text-dark > ul > li > a {
    color:#555555;
}
/*----------------------------------------*/
/*  3.  Banner Area
/*----------------------------------------*/
.banner-area {
    background-image: url(../images/banner/bg.png);
    background-position: 15% 50%;
    background-color: #1D1730;
	background-repeat:no-repeat;
}
.banner-area .row {
    height:960px;
    flex-wrap: unset;
    margin:0;
}
.banner-text {
    color: #ffffff;
}
.banner-text h4 {
    font-size: 30px;
	font-weight:400;
    color:#E9E9E9;
    margin-bottom: 15px;
}
.banner-text h2 {
    font-size: 77px;
    color:#E9E9E9;
    line-height: 1;
    margin-bottom: 0;
}
.banner-text h2 b {
    font-weight:500;
}

.social-icons h5 {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color:#ffffff;
}
.social-icons a {
    background-color:#2B2344;
    display: inline-block;
    text-align: center;
    font-size: 18px;
    line-height: 40px;
    color:#ffffff;
    width:40px;
    height:40px;
    border-radius: 3px;
    margin-right: 10px;
}
.social-icons a:hover {
    background-color: #F95353;
}
.social-icons.in-banner {
	position:absolute;
	bottom:0;
	left:15px;
}
.banner-particle {
    position: relative;
}
.banner-particle::before {
    background-image: url(../images/banner/particle.png);
    width: 439px;
    height: 439px;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    background-repeat: no-repeat;
}
/*----------------------------------------*/
/*  3.2  Banner Image
/*----------------------------------------*/
.banner-image {
    position: relative;
}
.banner-image::before, .banner-image::after {
	background-color: #EE6D52;
	width: 80%;
	height: 67%;
	border-radius: 100%;
	content: "";
	position: absolute;
	left: 160px;
	z-index: 1;
	top: 30%;
}

.banner-image::after {
    opacity: 0.06;
    top: 5px;
    left: 85px;
}
.banner-image img {
    position: relative;
    z-index: 1;
}
.banner-image-inner {
    position: relative;
    right: -115px;
    
}
.banner-image-inner::before {
    background-color: #EE6D52;
    width: 92%;
    height: 78%;
    border-radius: 100%;
    content: "";
    position: absolute;
    left: 160px;
    z-index: 1;
    top: 17px;
    opacity: .06;
}
.b-shape-3 {
    position: absolute;
    top: 18px;
    -webkit-animation: rotate 3s linear infinite;
    width: 92%;
    height: 78%;
    border-radius: 50%;
    border: 2px dashed #fff;
    right: -29%;
}
/*----------------------------------------*/
/*  3.3  Banner Animation
/*----------------------------------------*/
@keyframes sliderShape{
    0%,100%{
    border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
      transform: translate3d(0,0,0) rotateZ(0.01deg);
    }
    34%{
        border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
      transform:  translate3d(0,5px,0) rotateZ(0.01deg);
    }
    50%{
      transform: translate3d(0,0,0) rotateZ(0.01deg);
    }
    67%{
      border-radius: 100% 60% 60% 100% / 100% 100% 60% 60% ;
      transform: translate3d(0,-3px,0) rotateZ(0.01deg);
    }
  }
  
  
.banner-left {
	width: 40%;
	flex: 0 0 40%;
	padding: 207px 0 340px 0;
}
.banner-right {
    width: 57%;
}
/*----------------------------------------*/
/*  3.4  Banner Home 3
/*----------------------------------------*/
.banner-area-3 .social-icons, .banner-area-3 .btn-common {
	display:none;
}
/*----------------------------------------*/
/*  4.  Fact Area
/*----------------------------------------*/
.fact-single {
    border: 1px solid #552B47;
    border-radius: 3px 40px 3px 3px;
    padding: 66px 45px 45px 45px;
    position: relative;
    transition: .3s;
}
.fact-single:hover {
    border-color:#F95353;
}
.fact-single .fact-icon {
    background-color: #F95353;
    display: inline-block;
    text-align: center;
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 26px;
    color: #ffffff;
    position: absolute;
    top: -30px;
    left: 30px;
    border-radius: 3px;
}
.fact-single h3 {
    font-family: 'Roboto', sans-serif;
    font-weight:500;
    font-size: 46px;
    margin: 0 0 6px 0;
    color:#ffffff;
}
.fact-single p {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    margin-bottom: 0;
}
/*----------------------------------------*/
/*  4.2  Fact style 2
/*----------------------------------------*/
.fact-single.style-2 {
    border:0;
    display: flex;
    padding: 0;
}
.fact-single.style-2 .fact-icon {
    position: unset;
    top: unset;
    left: unset;
    float: left;
    background-color: #2B2344;
    width: 70px;
    height: 70px;
    line-height: 70px;
    border-radius: 100%;
    flex: 0 0 70px;
    color:#FE4D55;
    margin-right: 30px;
}
.fact-text h4 {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    margin-bottom: 20px;
    color:#ffffff;
}
.fact-text p {
    font-family: 'Roboto', sans-serif;
}
/*----------------------------------------*/
/*  4.3  Fact style 3
/*----------------------------------------*/
.fact-single.style-2.fact-text-dark {
    color:#666666;
}
.fact-single.style-2.fact-text-dark {
    padding-right:60px;
}
.fact-single.style-2.fact-text-dark p {
    font-size: 16px;
}
.fact-single.style-2.fact-text-dark h3 {
    color:#03004E;
}
.fact-single.style-2.fact-text-dark h4 {
    color:#2B2344;
}
.fact-single.style-2.fact-text-dark .fact-icon {
    background-color: #ffffff;
    box-shadow: 0 3px 26px rgba(0,0,0,.06);
}
/*----------------------------------------*/
/*  5.  About Area
/*----------------------------------------*/

.about-text p {
    margin-top: 30px;
}
.about-text .btn-common {
    min-width:150px;
    height:60px;
}
.video-play-icon span::after, .video-play-icon span::before {
    background-color: #ffffff;
    height:1px;
    position: absolute;
    left: 0;
    bottom:0;
    width:100%;
    content:"";
}
.video-icon {
    display: inline-block;
    width: 60px;
    height: 60px;
    z-index: 3;
    text-align: center;
    padding-top: 15px;
    font-size: 18px;
    background: #2B2344;
    border-radius: 100%;
    color: #ffffff;
    transition: .3s;
    position: relative;
  }
  .video-icon::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    bottom: 0;
    left: 0;
    border-radius: 100%;
    border: 5px solid #1D1730;
  }
.video-icon::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    bottom: 0;
    left: 0;
    border-radius: 100%;
    border: 5px solid #2B2344;
}
.video-icon:before {
    animation: ripple 3s linear infinite;
}
.video-icon:after {
    animation: ripple 3s linear 1s infinite;
}
.video-icon:hover {
    background-color: #F95353;
    color: #fff;
}
.video-icon.video-icon-2::before, .video-icon.video-icon-2::after {
	display:none;
}
span.video-text {
    margin-left: 25px;
    position: relative;
    color:#ffffff;
}
span.video-text::before {
    background-color: #ffffff;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    content: "";
}
.video-play-icon span:hover::before {
    width:100%;
}
.image-with-bg {
    padding: 40px 0 0 10px;
    border-radius: 5px;
    position: relative;
}
.image-with-bg.style-2 {
    padding:0 0 0 10px;
}
.image-with-bg.style-3 {
    padding:5px 0 0 10px;
}
.image-with-bg img {
    position: relative;
    z-index: 1;
}
.image-with-bg.style-2 img {
    left:24px;
}
.image-with-bg::before {
    background-color: #FF6A6A;
    position: absolute;
    top: 0;
    left: -36px;
    width: 100%;
    height: 100%;
    content: "";
    border-radius: 5px;
    transform: scaleY(1.19);
}
.image-with-bg.style-2::before {
    transform: scaleY(1);
    top:65px;
    height:96%;
}
.image-with-bg::after {
    background-color: #2B2344;
    position: absolute;
    top:0;
    left: 0;
    width:100%;
    height:100%;
    border-radius: 5px;
    content:"";
}
.image-with-bg.style-2::after {
    background-color: #1D1730;
    height:85%;
    top:unset;
    bottom: 0;
}
.image-with-bg.style-3::after {
    display: none;
}
.single-progress-bar {
    margin-bottom: 25px;
    overflow: hidden;
}
.progress-bar-title {
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 1;
}
.progress-bar-title span {
    color: #fff;
    font-family: "Poppins",sans-serif;
    font-size: 13px;
    font-weight: 300;
}
.progress {
    background-color: #7E7E7E;
    border-radius: 0;
    box-shadow: none;
    height: 3px;
    overflow: visible;
}
.progress-bar {
    background-color: #FE4D55;
    box-shadow: none;
    position: relative;
}
.sr-only {
    border: 0 none;
    clip: rect(0px, 0px, 0px, 0px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
.btn-about:hover::before, .btn-about:hover::after {
    background-color: #1D1730;
}
/*----------------------------------------*/
/*  6.  Skills & experiences
/*----------------------------------------*/
.skills-experiences-area {
    position: relative;
}

.education-single {
    background-color: #1D1730;
    border: 1px solid #1D1730;
    color:#ffffff;
    padding:26px 40px;
    border-radius: 5px;
    position: relative;
    transition: .3s;
}
.education-single:hover {
    border-color:#EE6D52;
}
.education-single h4 {
    font-size: 24px;
    line-height: 32px;
    color: #ffffff;
    margin-bottom: 11px;
}
.education-single span {
    color: #F95353;
    display: block;
    font-size: 16px;
    line-height: 1;
    margin-bottom: 12px;
}
.education-single small {
    display: block;
    color:#DEDEDE;
    font-size: 16px;
    font-weight:100;
    line-height: 1.4;
}
/*----------------------------------------*/
/*  6.2   experiences
/*----------------------------------------*/
.edu-icon span {
    background-color: #F95353;
    width:56px;
    height:56px;
    border-radius: 100%;
    font-size: 24px;
    color:#ffffff;
    text-align: center;
    line-height: 56px;
    margin-right: 20px;
}
/*----------------------------------------*/
/*  6.3   experiences
/*----------------------------------------*/
.hover-border {
    border: 1px solid #1D1730;
    transition: .3s;
}
.hover-border:hover {
    border-color:#EE6D52;
}
.skills-list {
    background-color: #1D1730;
    border-radius: 5px;
    padding:20px 40px;
}
.skills-list:hover {
    border-color:#EE6D52;
}
.skills-list ul {
    margin:0;
    padding:0;
    list-style: none;
}
.skills-list ul li {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: normal;
    color: #E9E9E9;
    margin-bottom: 18px;
    position: relative;
    padding-left: 16px;
}
.skills-list ul li::before {
    content: "\2022";
    color: #F95353;
    font-weight: bold;
    display: inline-block;
    width: 7px;
    height: 7px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
}
/*----------------------------------------*/
/*  7.   services
/*----------------------------------------*/
.service-single {
    background-color: #2B2344;
    padding: 90px 50px 25px 50px;
    border-radius: 3px 60px 3px 3px;
    position: relative;
}
.service-single .service-icon {
    background-color: #F95353;
    display: inline-block;
    width: 90px;
    height: 90px;
    font-size: 48px;
    line-height: 90px;
    text-align: center;
    position: absolute;
    top: -45px;
    left: 50px;
    border-radius: 3px;
}
.service-single h4 {
    font-size: 24px;
    line-height: 32px;
    color:#ffffff;
    margin-bottom: 25px;
}
/*----------------------------------------*/
/*  7.2   services style 2
/*----------------------------------------*/

/*----------------------------------------*/
/*  7.3   services style 3
/*----------------------------------------*/

.service-single.style-3 {
    background-color: #FEF6F6;
    border-color:#FEF6F6;
    color:#666666;
	padding: 135px 50px 25px 50px;
}
.service-single.style-3:hover {
    background-color: #2B2344;
    border-color:#552B47;
    color:#E9E9E9;
}
.service-single.style-3 .service-icon {
    color:#ffffff;
	top:0;
}
.service-single.style-3 h4 {
    color:#2B2344;
    font-weight: 700;
}
.service-single.style-3:hover h4 {
    color:#ffffff;
}
/*----------------------------------------*/
/*  7.4   services style 4
/*----------------------------------------*/
.service-single.style-4 {
    background-color: #ffffff;
    box-shadow: 0 3px 26px rgba(0,0,0,.06);
    color:#666666;
    transition: .3s;
}
.service-single.style-4:hover {
    background-color: #2B2344;
    color:#ffffff;
}
.service-single.style-4 .service-icon {
    color:#ffffff;
}
.service-single.style-4 h4 {
    color:#2B2344;
    font-weight: 700;
}
.service-single.style-4:hover h4 {
    color:#ffffff;
}
/*----------------------------------------*/
/*  8.   portfolios
/*----------------------------------------*/

.portfolio-menu ul {
    background-color: #1D1730;
    border-radius: 5px;
    float: right;
}
.portfolio-menu.float-none ul {
    float: none;
}
.portfolio-menu ul li {
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    color:#ffffff;
    padding:20px 30px;
    transition: .3s;
    cursor: pointer;
}
.portfolio-menu ul li:hover, .portfolio-menu ul li.active {
    background-color: #F95353;
}
.portfolio-menu ul li:first-child.active {
    border-radius: 5px 0 0 5px;
}
.portfolio-menu ul li:first-child:hover {
    border-radius: 5px 0 0 5px;
}
.portfolio-menu ul li:last-child:hover {
    border-radius: 0 5px 5px 0;
}
/*----------------------------------------*/
/*  8.2   portfolio menu style 2
/*----------------------------------------*/
.portfolio-menu.style-2 ul {
    background-color: #2B2344;
    display: inline-block;
    margin:auto;
}
/*----------------------------------------*/
/*  8.2   portfolio menu style 3
/*----------------------------------------*/
.portfolio-menu.style-3 ul {
    background-color: #1D1730;
}
/*----------------------------------------*/
/*  8.3   portfolio single
/*----------------------------------------*/
.portfolio-single {
    overflow: hidden;
}
.portfolio-thumb {
    transition: .5s;
    position:relative;
    overflow: hidden;
    border-radius: 8px;
}
.portfolio-thumb img {
    width:100%;
    transition: .3s;
    border-radius:8px;
}
.portfolio-thumb::before {
    background-color: #F95353;
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:0;
    content:"";
    border-radius:8px;
    transition: .5s;
}
.portfolio-single:hover .portfolio-thumb::before {
    height:100%;
}
.portfolio-text {
    margin-top: 20px;
}
.portfolio-text h3 {
    font-size: 24px;
    margin-bottom: 0;
}
.portfolio-text h3 a {
    color:#ffffff;
}
.portfolio-text h3 a:hover {
    color:#F95353;
}
.portfolio-text span {
    font-size: 16px;
    font-weight: 300;
    color:#ffffff;
}
.portfolio-action {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 50px;
    height: 50px;
    font-size: 36px;
    color: #ffffff;
    margin-top: -18px;
    transition: .6s;
    border: 2px solid #fff;
    line-height: 50px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    border-radius: 2px;
}
.portfolio-action:hover {
    color:#ffffff;
}
.portfolio-single:hover .portfolio-action {
    bottom: 44%;
    opacity: 1;
    visibility: visible;
}
/*----------------------------------------*/
/*  8.2 portfolios style-2
/*----------------------------------------*/
.portfolio-single.style-2 .portfolio-text h3 {
    font-weight: 700;
}
.portfolio-single.style-2 .portfolio-text h3 a {
    color:#03004E;
}
.portfolio-single.style-2 .portfolio-text h3 a:hover {
    color:#F95353;
}
.portfolio-single.style-2 .portfolio-text span {
    color:#555555;
}
/*----------------------------------------*/
/*  8.3 portfolios style-3
/*----------------------------------------*/
.portfolio-single.style-3 {
    background-color: #ffffff;
    border-radius: 8px 8px 0 0;
}
.portfolio-single.style-3 .portfolio-text {
    padding-left: 50px;
    padding-bottom: 20px;
}
.portfolio-single.style-3 .portfolio-text h3 {
    font-weight: 700;
}
.portfolio-single.style-3 .portfolio-text h3 a {
    color:#03004E;
}
.portfolio-single.style-3 .portfolio-text span {
    color:#2B2344;
}
.portfolio-single.style-3 .portfolio-thumb::before {
    border-radius: 8px 8px 0 0;
}
/*----------------------------------------*/
/*  8.4 portfolio details
/*----------------------------------------*/
.project-details {
    color:#666666;
}
.project-details img {
    border-radius:10px;
}
.project-details h1, .project-details h2, .project-details h3, .project-details h4 {
    color:#03004E;
    font-weight: 700;
    margin-bottom: 35px;
}
.portfolio-meta h2 {
    font-size: 52px;
    margin-bottom: 35px;
}
.project-details h4 {
    margin-bottom: 30px;
}
.portfolio-meta ul li {
    display: block;
    margin-bottom: 10px;
}
.portfolio-meta ul li:last-child {
    margin-bottom: 0;
}
.portfolio-meta ul li span {
    color:#03004E;
    font-size: 18px;
    font-weight: 500;
    display: inline-block;
    margin-right:20px;
}
.project-details.style-2  {
    position: sticky;
    top:0;
    left: 0;
    padding-top: 150px;
}
/*----------------------------------------*/
/*  9. testimonial
/*----------------------------------------*/
.testimonial-area {
    position: absolute;
    top: -415px;
    left: 0;
    right: 0;
}
.testimonial-inner {
    background-color: #F4F6FF;
    border-radius: 20px;
    z-index: 9;
    padding-left: 57px;
}
.testimonial-thumb, .testimonial-thumb span {
    position: relative;
}
.testimonial-thumb::before, .testimonial-thumb::after, .testimonial-thumb span::before {
	background-color: #EE6D52;
	width: 455px;
	height: 455px;
	border-radius: 100%;
	content: "";
	position: absolute;
    left: 0;
    right:0;
	z-index: 1;
	top: 30%;
}
.testimonial-thumb::after, .testimonial-thumb span::before {
    background-color: #EE6D52;
    opacity: 0.06;
    top: 74px;

}
.testimonial-thumb span::before {
    top: 0;
    left: 74px;
}
.testimonial-thumb span::after {
    content:url(../images/shapes/shape-dotted.png);
    position: absolute;
    top:0;
    left: 0;
}
.banner-image::before {
	border-radius: 62% 47% 82% 35% / 45% 45% 80% 66%;
	will-change: border-radius, transform, opacity;
    animation: sliderShape 5s linear infinite;
    -webkit-animation: sliderShape 5s linear infinite;
}
.testimonial-thumb img {
    position: relative;
    z-index: 2;
}
.testimonial-text span.icon-left-quotes-sign {
    background-color: #F95353;
    font-size: 20px;
    display: inline-block;
    width:60px;
    height:60px;
    text-align: center;
    line-height: 60px;
    color:#ffffff;
    border-radius: 100%;
    margin-bottom: 35px;
}
.testimonial-text h5 {
    color:#2B2344;
    font-size: 16px;
    font-style: italic;
    margin-bottom: 0;
}
.testimonial-text h5 span {
    color:#F95353;
}
.testimonial-text h2 {
    font-weight: 400;
    color: #1D1730;
    margin-bottom: 22px;
    font-size: 52px;
}
.testimonial-text p {
    font-size: 16px;
    font-style: italic;
    color: #363636;
}
.testimonial-author-name {
    margin-top: 30px;
}
.testimonial-author-name h4 {
    font-size:24px;
    color:#1D1730;
}
.testimonial-author-name span {
    font-size:16px;
    font-weight: 300;
    color:#2B2344;
}
/*----------------------------------------*/
/*  9.2 testimonial style 2
/*----------------------------------------*/
.testimonial-area.testimonial-area-3 {
	background-color:#FEF6F6;
    position: unset;
    top:unset;
    left: unset;
    right:0;
    position: relative;
}
.testimonial-area.testimonial-area-3::before, .testimonial-area.testimonial-area-3::after {
	background-color:#FDEBEB;
	width:300px;
	position:absolute;
	top:0;
	left:80px;
	height:100%;
	content:"";
}
.testimonial-area.testimonial-area-3::after {
    left: unset;
    right: 430px;
    z-index: 1;
}
.testimonial-single.style-2 .testimonial-text {
	position:relative;
	z-index:2;
}
.testimonial-single.style-2 .image-with-shape::before {
	background-color: #FF6A6A;
	position: absolute;
	left: 0;
	width: 99%;
	height: 100%;
	content: "";
	z-index: -1;
	margin: auto;
	border-radius: 20px 20px 0 0;
	right: 0;
	top: 0;
	margin: auto;
}
.testimonial-single.style-2 .testimonial-text h2 {
    font-weight: 700;
}
.testimonial-single.style-2 .testimonial-author-name h4 {
    font-weight: 700;
}
.testimonial-single.style-2 .testimonial-carousel .slick-dots {
    bottom: 30px;
	left:40px;
	z-index:2;
}
.testimonial-single.style-2 .testimonial-carousel .slick-list {
	z-index:2;
}
/*----------------------------------------*/
/*  10.   blog
/*----------------------------------------*/
.blog-area {
    position: relative;
    padding-top: 435px;
}
.blog-thumb {
    margin-bottom: 25px;
}
.blog-text span {
    font-size: 16px;
    font-weight: 300;
    color:#ffffff;
    display: block;
    margin-bottom: 3px;
}
.blog-single .blog-text h3 {
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
}
.blog-text h3 a {
    color:#ffffff;
}
.blog-text h3 a:hover {
    color:#F95353;
}

.blog-single.bg-white .blog-thumb {
    box-shadow: 0 3px 26px rgba(0,0,0,.06);
}
.blog-single.bg-white .blog-text span {
	color:#666666;
}
.blog-single.bg-white .blog-text h3 {
	font-weight:700;
}
.blog-single.bg-white .blog-text h3 a {
	color: #212f36;
}
.blog-single.bg-white .blog-text h3 a:hover {
	color:#F95353;
}
/*----------------------------------------*/
/*  10.2   blog pagination
/*----------------------------------------*/
.blog-pagination ul li a {
    background-color: transparent;
    font-size: 16px;
    color:#ffffff;
    width:40px;
    height:40px;
    line-height: 40px;
    text-align: center;
    display: block;
    border-radius: 3px;
}
.blog-pagination ul li a:hover, 
.blog-pagination ul li.active a {
    background-color: #F95353;
}
.blog-pagination.in-white ul li a {
	color:#666666;
}
.blog-pagination.in-white ul li a:hover, 
.blog-pagination.in-white ul li.active a {
	background-color: #F95353;
	color:#ffffff;
}
/*----------------------------------------*/
/*  10.3   blog details
/*----------------------------------------*/
.blog-details-area {
    color:#E9E9E9;
}
.blog-details {
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 8px;
    padding: 50px 100px;
}
.blog-details p {
    padding-bottom: 13px;
}
.blog-details h3 {
    font-size: 36px;
    line-height: 48px;
}
.blog-details h4 {
    font-size: 24px;
}
.blog-details blockquote {
    background-color: #1D1730;
    border-radius: 8px;
    padding:50px 60px;
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-style: italic;
    line-height: 38px;
    position: relative;
}
.blog-details blockquote::before {
    content:url(../images/blog/details/left-quotes-sign.png);
    position: absolute;
    top:30px;
    left: 50px;
    z-index: 1;
}
.blog-details blockquote::after {
    content:url(../images/blog/details/ellipse.png);
    position: absolute;
    bottom:0;
    right: 0;
    z-index: 1;
}
.blog-details blockquote span {
    position: relative;
    z-index: 2;
}
.blog-details ul li {
    display: block;
    margin-bottom: 10px;
}
.blog-details ul li:last-child {
    margin-bottom: 0;
}
.blog-details ul li {
    display: block;
    margin-bottom: 10px;
    position: relative;
    padding-left: 30px;
}
.blog-details ul li img {
    margin-right: 15px;
    position: absolute;
    left: 0;
    top: 8px;
    bottom: auto;
    display: inline-block;
    margin: auto;
}
.blog-details h1, .blog-details h2, .blog-details h3, .blog-details h4, .blog-details h5, .blog-details h6 {
    color:#ffffff;
}

.blog-social-icons-title {
    font-size:16px;
}
.blog-tags a {
    background-color: #1D1730;
    display: inline-block;
    font-size:16px;
    padding:10px 15px;
    color:#ffffff;
    border-radius: 3px;
    margin-right:3px;
	transition:.3s;
}
.blog-tags a:hover {
    background-color: #F95353;
}
.blog-social-icons a {
    color:#ffffff;
    display: inline-block;
    margin-right: 17px;
}
.blog-social-icons a span {
	transition:.3s;
}
.blog-social-icons a:hover span {
    color:#F95353;
}
.blog-social-icons a:last-of-type {
    margin-right: 0;
}
/*----------------------------------------*/
/*  10.4   blog details 2
/*----------------------------------------*/
.bg-white .blog-details {
	border:1px solid #f5f5f5;
	color:#666666;
}
.bg-white .blog-details h2, .bg-white .blog-details h3, .bg-white .blog-details h4 {
	color:#2B2344;
	font-weight:700;
}
.bg-white .blog-details blockquote {
	color:#E9E9E9;
}
.blog-social-icons.in-white a {
	color:#707070;
}
.blog-social-icons.in-white span {
	color:#2B2344;
}
/*----------------------------------------*/
/*  10.5   blog comemnts
/*----------------------------------------*/
.blog-comments ul li.comment-single {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
}
.comment-thumb {
    width:85px;
    flex: 0 0 85px;
    margin-right:20px;
}
.comment-text {
    width: 77%;
    flex: 0 0 77%;
}
.comment-author {
    margin-bottom: 15px;
}
.comment-author h4 {
    font-size:24px;
    color:#ffffff;
    margin-bottom: 0;
}
.comment-author span {
    font-size:16px;
    font-weight: 300;
    color:#DEDEDE;
}
.comment-reply-link a {
    font-size: 16px;
    color: #E9E9E9;
    display: block;
    padding: 5px 20px;
    border: 1px solid #ffffff;
}
.comment-reply-link a:hover {
    background-color:#F95353;
    border-color:#F95353;
}
.blog-comments ul li.comment-single ul {
    padding:40px 0 0 100px;
}
.comemtn-btn {
    min-width: 185px;
    height:55px;
    line-height: 55px;
}
/*----------------------------------------*/
/*  10.6   blog comemnts 2
/*----------------------------------------*/
.blog-comments.in-white .comment-author span {
	color:#666666;
} 
.blog-comment-form.bg-white input, .blog-comment-form.bg-white textarea {
	background-color:#F9F9F9;
	color:#666666;
}
.blog-comment-form.bg-white input::placeholder, .blog-comment-form.bg-white textarea::placeholder {
	color:#666666;
}
.blog-comments.in-white .comment-reply-link a {
    border-color: #2B2344;
    color: #2B2344;
}
.blog-comments.in-white .comment-reply-link a:hover {
    background-color: #F95353;
    color: #ffffff;
    border-color: #F95353;
}
/*----------------------------------------*/
/*  10.7   blog comemnt form
/*----------------------------------------*/
.comment-form-title h2 {
    font-size: 36px;
}

.blog-comment-form input, .blog-comment-form textarea {
    background-color: #1D1730;
    width:100%;
    border:0;
    padding-left:20px;
    margin-bottom: 30px;
    border-radius: 4px;
    color:#ffffff;
}
.blog-comment-form input {
    height:55px;
}
.blog-comment-form textarea {
    height:225px;
    padding-top: 15px;
}
/*----------------------------------------*/
/*  10.3 page-banner
/*----------------------------------------*/
.page-banner-area {
    background-color: #1D1730;
}
.page-banner-area.bg-1 {
    background: rgba(0, 0, 0, 0) url("../images/blog/blog-bg.png") no-repeat scroll center center / cover ;
}
.page-banner-area.bg-2 {
    background-color: #1D1730;
}
.page-title h1 {
    font-size: 60px;
    line-height: 70px;
    color:#ffffff;
}
.page-title h1 span {
    color:#FE4D55;
}
.page-title-dark h1 {
    color:#03004E;
    font-weight: 700;
}
.page-breadcrumb ul li {
    color:#ffffff;
}
.page-title-dark .page-breadcrumb ul li {
    color:#555555;
}
ul.blog-meta {
    margin-top:17px;
}
ul.blog-meta li {
    font-size: 18px;
    color:#E9E9E9;
    margin-right:55px;
}
ul.blog-meta li:last-child {
    margin-right:0;
}
ul.blog-meta li a {
    color:#E9E9E9;
}
ul.blog-meta li a:hover {
    color:#F95353;
}
/*----------------------------------------*/
/*  11.   contact
/*----------------------------------------*/
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea {
    width:100%;
    border:1px solid #C1C1C1;
    background-color: transparent;
    margin-bottom: 30px;
    border-radius: 4px;
    padding-left: 20px;
    color:#ffffff;
}

.contact-form input[type="text"], .contact-form input[type="email"] {
    height:57px;
}
.contact-form textarea {
    height:225px;
    padding-top:10px;
}
.contact-form ::placeholder { 
  color: #B1B1B1;
  opacity: 1;
}
.contact-form :-ms-input-placeholder {
    color: #B1B1B1;
}
.contact-form ::-ms-input-placeholder {
    color: #B1B1B1;
}
/*----------------------------------------*/
/*  11.2  Google Map
/*----------------------------------------*/
.google-map {
	width:100%;
    height:400px;
    border-radius: 10px;
}
/*----------------------------------------*/
/*  11.3   contact style 2
/*----------------------------------------*/

/*----------------------------------------*/
/*  12.   footer
/*----------------------------------------*/
.footer-area {
    background-color:#1D1730;
    background-image:url(../images/footer/footer-bg.png);
}
.footer-area.style-2 {
    background-color: #2B2344;
    background-image: unset;
}

.footer-round {
    padding:75px 0 75px 0;
}
.footer-round h3 {
    margin-bottom: 25px;
}
.footer-widget h3, .footer-widget h4 {
    color:#ffffff;
}
.footer-widget h3 {
    font-size: 52px;
    font-weight: normal;
    color:#ffffff;
}
.footer-widget h4 {
    font-family: 'Roboto', sans-serif;
}
.social-icons.style-2 a {
    border-radius: 100%;
    height: 46px;
    width: 46px;
    line-height: 50px;
}
.social-icons.style-2 a.fb-icon {
    background-color: #1976D2;
}
.social-icons.style-2 a.dribble-icon {
    background-color: #D04C7D;
}
.social-icons.style-2 a.behance-icon {
    background-color: #1769FF;
}
/*----------------------------------------*/
/*  12.2   footer copyright
/*----------------------------------------*/
.copyright-text {
    border-top: 1px solid #3B3158;
    color: #E9E9E9;
    padding: 22px 0;
}
.copyright-text p {
    margin-bottom: 0;
}
/*----------------------------------------*/
/*  13.   shapes
/*----------------------------------------*/
.banner-shape {
    position: relative;
}
.banner-shape::before {
    position: absolute;
    right: -20px;
    top: 0;
    bottom: 0;
    content: url(../images/shapes/1.png);
    background-repeat: no-repeat;
    margin: auto;
    display: flex;
    align-items: center;
}
.i-shape {
    position: absolute;
    top: 0;
    right: -85px;
    bottom: 0;
    height: 230px;
    margin: auto;
}
.e-shape {
    position: absolute;
    bottom: 220px;
    right: 118px;
    height: 255px;
}
.i-shape-portfolio {
    position: absolute;
    height: 230px;
    left: 45px;
    bottom: 0;
    top: 0;
    margin: auto;
    transition: .3s;
}
.ff-shape {
    position: absolute;
    top: 135px;
    right: -160px;
    bottom: 0;
    margin: auto;
    overflow: hidden;
}
.e-shape-reverse {
    position: absolute;
    top: -128px;
}
.blog-banner-shape.text-right {
    position: absolute;
    top: 160px;
    right: 15px;
}
.footer-shape {
    position:relative;
}
.footer-shape::before {
    background-image: url(../images/shapes/footer-shape.png);
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    background-repeat: no-repeat;
    width: 100%;
    height: 376px;
}
/*----------------------------------------*/
/*  14.   slick slider
/*----------------------------------------*/

.slick-slider .slick-dots li {
    display: inline-block;
    margin: 0 5px;
	width:auto;
	height:auto;
}
.slick-slider .slick-dots li button {
	font-size:inherit;
    border: none;
    display: block;
    text-indent: -9999em;
    width: 23px;
    height: 2px;
    padding: 0;
    background: #707070;
    -webkit-transition: all .2s ease-in-out 0s;
    -o-transition: all .2s ease-in-out 0s;
    transition: all .2s ease-in-out 0s;
}
.slick-slider .slick-dots li.slick-active button {
    background: #F95353;
    width: 40px;
    height: 2px;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
}
.testimonial-carousel .slick-dots {
    bottom: 130px;
    display: inline-block;
    left: 72px;
}
/*----------------------------------------*/
/*  15.   Animation
/*----------------------------------------*/
@keyframes ripple {
    0% {
      transform: scale(1);
    }
    75% {
      transform: scale(1.75);
      opacity: 1;
    }
    100% {
      transform: scale(2);
      opacity: 0;
    }
}
@keyframes toTopFromBottom {
    49% {
      transform: translateY(-100%);
    }
    50% {
      opacity: 0;
      transform: translateY(100%);
    }
    51% {
      opacity: 1;
    }
  }
/*----------------------------------------*/
/*  16.   Work Process
/*----------------------------------------*/

.work-process-list ul li {
    position: relative;
    padding-left: 65px;
    display: block;
    padding-bottom: 10px;
}
.work-process-list ul li::after {
    background-color: #FE4D55;
    width: 1px;
    height: 100%;
    content: "";
    position: absolute;
    top: 16px;
    left: 23px;
}
.work-process-list ul li:last-child::after {
    display: none;
}
.work-process-list ul li span {
    background-color: #1D1730;
    border: 1px solid #FE4D55;
    width:45px;
    height:45px;
    line-height: 45px;
    display: inline-block;
    font-size: 16px;
    text-align: center;
    border-radius: 100%;
    position: absolute;
    top:0;
    left:0;
    transition: .3s;
    z-index: 2;
}
.work-process-list ul li:hover span {
    background-color: #FE4D55;
    border-color: #FE4D55;
}
.work-process-list h4 {
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    color:#ffffff;
}
.work-process-list.style-2 ul li {
    color:#666666;
}
.work-process-list.style-2 ul li span {
    background-color: #ffffff;
    color:#03004E;
    border: 0;
    box-shadow: 0 3px 26px rgba(0,0,0,.06);
}
.work-process-list.style-2 ul li:hover span {
    background-color: #FE4D55;
    color:#ffffff;
}
.work-process-list.style-2 ul li::after {
    background-color: #DEDEDE;
}
.work-process-list.style-2 h4 {
    color:#03004E;
}
/*----------------------------------------*/
/*  17.   Brands
/*----------------------------------------*/
.brand-single {
    background-color: #2B2344;
    min-height: 80px;
    line-height: 80px;
    text-align: center;
    border-radius: 5px;
    overflow: hidden;
}
.brand-single img {
    transition: all 0.4s ease;
}
.brand-single:hover img {
    animation: toTopFromBottom 0.8s forwards;
}
#footer-scene {
    z-index: 2;
}