/* 
============================================================
CSS Index
============================================================
1. Theme default css
2. Header
3. Hero
4. Our service
5. Service
6. Portfolio
7. Slider
8. Testimonial
9.  Blog
10. Contact
11. Footer
12. Sticky Header
13. Ajax-response
14. keyframes animation
*/



/* ==============================================================
                    1.Theme default css 
=================================================================*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,800&display=swap');
body {
    font-family: 'Poppins',sans-serif;
    font-weight: normal;
    font-style: normal;
    box-sizing: border-box;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

img {
    max-width: 100%;
    transition: all 0.3s ease-out 0s;
}

.f-left {
    float: left
}

.f-right {
    float: right
}

.fix {
    overflow: hidden
}

a,
.button {
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}

a:focus,
.button:focus {
    text-decoration: none;
    outline: none;
}

a:focus,
a:hover,
.portfolio-cat a:hover,
.footer -menu li a:hover {
    color: #000;
    text-decoration: none;
}

a,
button {
    color: #474747;
    outline: medium none;
}

button:focus,
input:focus,
input:focus,
textarea,
textarea:focus {
    outline: 0
}

.uppercase {
    text-transform: uppercase;
}

.capitalize {
    text-transform: capitalize;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: normal;
    color: #474747;
    margin-top: 0px;
    font-style: normal;
    font-weight: 400;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: #474747;
}

h1 {
    font-size: 56px;
    font-weight: 600;
}

h2 {
    font-size: 45px;
    font-weight: 600;
}

h3 {
    font-size: 32px;
    font-weight: 600;
}

h4 {
    font-size: 22px;
    font-weight: 600;
}

h5 {
    font-size: 18px;
}

h6 {
    font-size: 14px;
}

ul {
    margin: 0px;
    padding: 0px;
}

li {
    list-style: none
}

.mt-10 {
    margin-top: 10px;
}
.mt-350 {
    margin-top : 350px;
}

p {
    font-size: 14px;
    line-height: 20px;
    color: #474747;
    margin-bottom: 15px;
    font-weight: 300;
}
hr {
    border-bottom: 1px solid #eceff8;
    border-top: 0 none;
    margin: 30px 0;
    padding: 0;
}

label {
    color: #7e7e7e;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
}

*::-moz-selection {
    background: #d6b161;
    color: #fff;
    text-shadow: none;
}

::-moz-selection {
    background: #444;
    color: #fff;
    text-shadow: none;
}

::selection {
    background: #444;
    color: #fff;
    text-shadow: none;
}

*::-moz-placeholder {
    color: #ffffff;
    font-size: 20px;
    opacity: 1;
}

*::placeholder {
    color: #ffffff;
    font-size: 14px;
    opacity: 1;
}

.theme-overlay {
    position: relative;
}

.theme-overlay::before {
    background-color: #ffcbcb;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.6;
    position: absolute;
    top: 0;
    width: 100%;
}

.separator {
    border-top: 1px solid #f2f2f2
}
/* button style */
.btn{
    -moz-user-select: none;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 18px;
    margin-bottom: 0;
    text-align: center;
    transition: all 0.3s ease 0s;
    vertical-align: middle;
    white-space: nowrap;
    padding: 15px 30px;
    border-radius: 25px;
    box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.29);
    z-index: 99;
    background-color: #ffcbcb;
}
.btn2{
    -moz-user-select: none;
    color: #ffcbcb;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 18px;
    margin-bottom: 0;
    text-align: center;
    transition: all 0.3s ease 0s;
    vertical-align: middle;
    white-space: nowrap;
    padding: 15px 30px;
    border-radius: 25px;
    background-color: #ffffff;
    box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.29);
    z-index: 99999;

}
.btn3{
    -moz-user-select: none;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: 300;
    line-height: 18px;
    margin-bottom: 0;
    text-align: center;
    transition: all 0.3s ease 0s;
    vertical-align: middle;
    white-space: nowrap;
    padding: 10px 20px;
    border-radius: 25px;
    box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.29);
    z-index: 99;
    background-color: #ffcbcb;

}
.btn:hover {
    background-color: #ffffff;
    color: #ffcbcb;
}
.btn3:hover {
    background-color: #ffffff;
    color: #ffcbcb;
}
.btn2:hover {
    color: #ffffff;
    background-color: #ffcbcb;
}
.submit.btn2:hover {
    color: #ffcbcb;
    background-color: #474747;
}
/* scrollUp */
#scrollUp {
    background: #ffcbcb;
    height: 35px;
    width: 35px;
    right: 50px;
    bottom: 77px;
    color: #474747;
    font-size: 20px;
    text-align: center;
    font-size: 20px;
    line-height: 34px;
}

#scrollUp:hover {
    background: #474747;
    color:#ffcbcb;
    border: 1px solid #ffcbcb;
}
.section-padding {
    padding: 100px 0;
}



/*====================================================
                        Header 
======================================================*/
.logo {
    padding: 8px 0px 0px 0px;
}
.mian-menu nav ul {
    margin-right: 33px;
}
.mian-menu nav ul li a {
    padding-bottom: 20px;
    font-size: 18px;
}
.mian-menu nav ul li {
    display: inline-block;
    margin: 16px 0px 0px 21px;
    font-size: 14px;
    font-weight: 500;
}

.mean-container a.meanmenu-reveal {
	border: 1px solid #f4f4f4;
	color: #ebeff2;
	top: -12px;
}
/*====================================================
                        Hero Area 
======================================================*/

.hero-bg {
	min-height: 1100px;
	max-width: 100%;
	position: absolute;
	background-position: center;
	background-size: cover;
	left: 0;
	right: 0;
	z-index: -9;
	background-repeat: no-repeat;
	top: 0;
}
.hero-text span {
	color: #ffff;
	font-size: 16px;
}
.hero-text h1 {
	color: #ffff;
}
.hero-text p {
	color: #474747;
	padding: 5px 13px 20px 0px;
	line-height: 20px;
}

.hero-area{
    position: relative;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}
.shape {
	position: absolute;
	top: 0%;
	z-index: 99999;
}
.shape-01 {
	background-color: #fff;
    animation: headeranimation 3s  alternate;
    -webkit-animation: headeranimation 3s  alternate;
	height: 6px;
}
.shape-02 {
	border-radius: 50%;
	width: 56px;
	height: 56px;
	top: 10%;
    left: 2%;
    animation: bgshapeanimation 1s infinite alternate;
    -webkit-animation: bgshapeanimation 1s infinite alternate;
}
.shape-03 {
	border-radius: 50%;
	width: 56px;
	height: 56px;
	top: 18%;
	left: 48%;
    background: -moz-linear-gradient( 90deg, rgb(197, 25, 124) 0%, #ffcbcb 100%);
    background: -webkit-linear-gradient( 90deg, rgb(197, 25, 124) 0%, #ffcbcb 100%);
    background: -ms-linear-gradient( 90deg, rgb(197, 25, 124) 0%, #ffcbcb 100%);
    animation: shapezoomanimation 3s infinite alternate;
    -webkit-animation: shapezoomanimation 3s infinite alternate;
}
.shape-04 {
	border-radius: 50%;
	width: 56px;
	height: 56px;
	top: 68%;
	left: 91%;
	background: -moz-linear-gradient( 90deg, rgb(197, 25, 124) 0%, #ffcbcb 100%);
	background: -webkit-linear-gradient( 90deg, rgb(197, 25, 124) 0%, #ffcbcb 100%);
	background: -ms-linear-gradient( 90deg, rgb(197, 25, 124) 0%, #ffcbcb 100%);
	animation: shapezoomanimation 3s infinite alternate;
	-webkit-animation: shapezoomanimation 3s infinite alternate;
}
.shape-05 {
	border-radius: 50%;
	width: 80px;
	height: 80px;
	top: 72%;
	left: 43%;
	background: -moz-linear-gradient( 90deg, rgb(197, 25, 124) 0%, #ffcbcb 100%);
	background: -webkit-linear-gradient( 90deg, rgb(197, 25, 124) 0%, #ffcbcb 100%);
	background: -ms-linear-gradient( 90deg, rgb(197, 25, 124) 0%, #ffcbcb 100%);
	animation: shapezoomanimation 3s infinite alternate;
	-webkit-animation: shapezoomanimation 3s infinite alternate;
}

/*====================================================
                 Header sticky
======================================================*/
#header-sticky {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 9999;
    top: 0;
}

.sticky {
    background-color: #fff;
    box-shadow: 0px 6px 9px 0px rgb(0 0 0 / 6%);
}

/*====================================================
                   Service Area
======================================================*/
.our-services {
	min-height: 540px;
	background-position: center;
    background-size: cover;
}
.section-title-02 h3 {
	color: #ffffff;
}
.service-item{
    border-radius: 10px;
    background-color: #ffcbcb;
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.27);
    cursor: pointer;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    min-height: 170px;

}
.service-item:hover{
    transform: translateY(10px);
}
.service-item i {
	font-size: 30px;
	color: #474747;
}
.service-item h5 {
	color: #474747;
}
.service-item h5 {
	color: #474747;
	padding: 10px 0px 5px 0px;
}
.service-item p {
	padding: 0px 35px;
}
/**************************************
 * 06.About Section Style
 *************************************/
 .about-area {
    position: relative;
    z-index: 1;
    padding-top: 0px;
}
.about-area .bg-shape {
    background-image: url(../img/bg-shape-1.png);
    background-repeat: no-repeat;
    background-position: right center;
    position: absolute;
    width: 700px;
    height: 705px;
    background-size: 80%;
    top: 15px;
    right: 0;
    z-index: -1;
}
.about-content-text h2 {
    font-size: 33px;
    font-weight: 700;
    margin-bottom: 15px;
}

.about-content-text h3 {
    color: #555;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
}

.about-feature-wrapper {
    margin-top: 25px;
}

.about-features-item {
    display: flex;
    align-items: center;
    padding: 0;
    margin-bottom: 30px;
}
.about-features-item:last-child {
	margin-bottom: 0px;
}
.about-features-icon {
    position: absolute;
    text-align: center;
    font-size: 30px;
    width: 75px;
    height: 75px;
    line-height: 75px;
    border-radius: 3px;
    z-index: 1;
    background: #fff;
    -webkit-box-shadow: 0 1px 4px rgb(187 191 218);
    -moz-box-shadow: 0 1px 4px rgb(187 191 218);
    box-shadow: 0 1px 4px rgb(187 191 218);
    -o-box-shadow: 0 1px 4px rgb(187 191 218);
    -ms-box-shadow: 0 1px 4px rgb(187 191 218);
}

.about-features-info {
    padding-left: 95px;
}

.about-features-icon i {
	color: inherit;
    font-size: 35px;
    line-height: 75px;
}

.about-features-info p {
    margin: 0;
}

.about-features-info h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}
.about-features-item .about-features-icon:after {
    top: 0px;
    left: 0px;
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 100%;
    content: '';
    -webkit-transform: scale(1.4);
    -ms-transform: scale(1.4);
    -o-transform: scale(1.4);
    transform: scale(1.4);
    opacity: 0;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
    background: inherit;
    border-radius: inherit;
}
.about-features-item:hover .about-features-icon:after {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}
.about-features-item:hover .about-features-icon i:before {
    color: #fff;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
}
.about-features-item:hover .color-icon-1:after {
    background-color: #ffcbcb !important;
}
.about-features-item:hover .color-icon-2:after {
    background-color: #ffcbcb !important;
}
.about-features-item:hover .color-icon-3:after {
    background-color: #ffcbcb !important;
}
.color-icon-1 {
    color: #ffcbcb !important;
    background-color: transparent;
}
.color-icon-2 {
    color: #ffcbcb !important;
    background-color: transparent;
}
.color-icon-3 {
    color: #ffcbcb !important;
    background-color: transparent;
}
.color-icon-4 {
    color: #ffcbcb !important;
    background-color: transparent;
}
.color-icon-5 {
    color: #ffcbcb !important;
    background-color: transparent;
}
.color-icon-6 {
    color: #ffcbcb !important;
    background-color: transparent;
}
.carousel-control-next,
.carousel-control-prev {
    height: 40px;
    width: 40px;
    margin-top: 250px;
    border-radius: 40px;
    background-color: #ffcbcb;
}
.carousel-control-next {
    margin-right: 15%;
}
.carousel-control-prev {
    margin-left: 15%;
}

/*====================================================
                   Contact area
======================================================*/
.social ul li a {
	color: #474747;
	font-size: 14px;

}
.social ul li {
	float: left;
	margin: 25px 50px 0px 0px;
}
.social ul li span{
	margin: 10px;
}
.box::after {
	content: "";
	height: 350px;
	width: 2px;
	background-color: #ffcbcb;
	display: block;
	position: absolute;
	right: -4px;
	top: -5px;
}
.btn2-area ul li {
	float: left;
	margin: 39px 25px 0px 0px;
}
#contact-form input {
    background-color: inherit;
    border: 2px solid #ffcbcb;
    border-radius: 15px;
    margin: 14px 4px 20px 10px;
    font-size: 14px;
    color: #474747;
    width: 47%;
    padding: 20px;
}
#contact-form input::placeholder,
#contact-form textarea::placeholder {
    color: #474747;
}
#contact-form textarea {
    margin: 0px 0px 10px 15px;
    padding: 20px 0px 0px 14px;
	width: 96%;
	background-color: inherit;
	border: 2px solid #ffcbcb;
	border-radius: 15px;
}
.submit.btn2 {
	border: navajowhite;
	margin: 14px;
    background-color: #ffcbcb;
    color: #474747;
}
/*====================================================
                   Footer Area
======================================================*/
.footer-area{
    min-height: 470px;
	max-width: 100%;
	background-position: top;
	background-size: cover;
	left: 0;
	right: 0;
	z-index: -9;
	background-repeat: no-repeat;
}
.footer-01 p {
    padding: 24px 0px;
    font-size:14px;
}
.quick-link h6 {
	color: #474747;
}
.quick-link ul li {
    margin: 10px 0px;
    font-size: 14px;
}
.quick-link ul {
	margin: 15px 0px 0px 0px;
}
.copyright-text span {
	font-size: 14px;
	font-weight: 500;
    color: #474747;
}
.social-media ul li {
	display: inline-block;
	margin: 15px 10px;
	font-size: 20px;
}
.social-media {
    margin: 0px auto;
}
/*====================================================
                   Ajax-response
======================================================*/
p.ajax-response.success {
    color: #1DBF73;
    font-size: 14px;
    font-weight: 600;
}

p.ajax-response.error {
    font-size: 14px;
    color: red;
    font-weight: 600;
}
/*====================================================
                      keyframes
======================================================*/
@keyframes headeranimation {
    0% {
        width: 0%;
        -webkit-width: 0%;
    }

    100% {
        width:100%;
        -webkit-width:100%;
    }
}
@keyframes bgshapeanimation {
    0% {
        background: -moz-linear-gradient( 90deg, rgb(115,108,236) 0%, rgb(146,141,244) 100%);
        background: -webkit-linear-gradient( 90deg, rgb(115,108,236) 0%, rgb(146,141,244) 100%);
        background: -ms-linear-gradient( 90deg, rgb(115,108,236) 0%, rgb(146,141,244) 100%);
        transform: translateY(0px);
        -webkit-transform: translateY(0px);



    }

    100% {
        background: -moz-linear-gradient( 90deg, rgb(115,108,236) 0%, rgb(105,98,218) 100%);
        background: -webkit-linear-gradient( 90deg, rgb(115,108,236) 0%, rgb(105,98,218) 100%);
        background: -ms-linear-gradient( 90deg, rgb(115,108,236) 0%, rgb(105,98,218) 100%);
        transform: translateY(500px);
        -webkit-transform: translateY(500px);


    }
}

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

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