/*TABLE OF */
/*=====================
02. Moving Header Menu Area Css
03. Moving Hero Area Css
04. Moving About Area Css
05. Moving Service Area Css
07. Moving Choose UsArea Css
08. Moving Testimonial Area Css
09. Moving work Area Css
10. Moving Call Du Action Area Css
11. Moving Contact Area Css
12. Moving Footer Area Css
13. Moving Bridcame Area Css
14. Moving Team Area Css
15. Moving Blog Details Area Css
16. Moving Blog Area Css
17. Moving Contacts Section Area Css
18. Moving Faq Area Css
19. Moving Pricing Area Css
20. Moving Service Details Area Css
21. Moving Team  Area Css
22. Moving Search Popup Area Css
23. Moving Search Box Css
24. Moving Loader Css
=======================*/
:root {
    --primary-color: #203459;
    --secondary-color: #4379a5;
    --action-color: #F5C607;
    --main-text-color: #000;
    --alt-text-color: #fff;
    --bg-color: #fff;
    --alt-bg-color: #4379a5;
    --accent-bg-color:#f8e07e;
    --border-color: #203459;
    --alt-border-color: #ffcd05;
}
/*================================
 <--Start Moving header Area Css-->
==================================*/

* {
    box-sizing: border-box;
}

html, body {
	overflow-x: hidden;
}
html{
    scroll-behavior: smooth;
    font-family: swap;
}

body {	
    color: #616161;
    font-size: 16px;
    font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #232323;
    font-style: normal;
    line-height: 1.1;
    font-weight: 700;
    -webkit-transition: .5s;
    transition: .5s;
}
h1 {
    font-size:40px;
}
h2 {
    font-size: 35px;
	
}
h3 {
    font-size: 30px;
}
h4 {
    font-size: 24px;
}
h5 {
    font-size: 20px;
}
h6 {
    font-size: 18px;
}
a{
    -webkit-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}
a{
	 color: #080202;
}
a:focus,
a:focus,
.btn:focus {
    text-decoration: none;
    outline: none;
}
a:focus,
a:hover {
    text-decoration: none;
    text-decoration: none;	
}
.uppercase {
    text-transform: uppercase;
}
.capitalize {
    text-transform: capitalize;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: inherit;
    -webkit-transition: .5s;
    transition: .5s;
}


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



input:focus,
button:focus
{
	outline-color:#FF3C00;
    border: 1px solid #FF3C00;
}
textarea:focus{
	outline-color:#F16722;
}
hr {
    margin: 60px 0;
    padding: 0px;
    border-bottom: 1px solid #eceff8;
    border-top: 0px;
}

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

a,i, cite, em, var, address, dfn,ol,li,ul{
	font-style:normal;
	font-weight:400;
}

ul {
    list-style-type: none;
}
@media screen and (max-width: 500px) {
    
    h2 {
        font-size: 28px;
    }
}
.header-area {
    background: var(--bg-color);
    padding: 4px 0;

}

@media screen and (max-width: 991px) {
    .header-area {
        display: none;
    }
}

.sticky {
    left: 0;
    margin: auto;
    position: fixed !important;
    top: 0;
    width: 100%;
    -webkit-box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.1);
    background: var(--alt-bg-color) !important;
    transition: .5s;
    z-index: 922;
    animation: 500ms running fadeInUp;
    animation-name: slideInDown;
}
.sticky .header-menu ul li a {
    color: #fff;
}

/*header logo*/
a.active-sticky {
    display: none;
}
.sticky a.active-sticky2{
	display:none;
}
.sticky a.active-sticky{
	display:inline-block;
}

.mean-container .mean-bar {
    z-index: 100;
}
/*header-menu*/
.header-menu {
    text-align: right;
}
.header-menu ul {
    display: inline-block;
}
.header-menu ul li {
    list-style: none;
    display: inline-block;
}
.header-menu ul li a {
    color: #232323;
    font-size: 16px;
    padding: 40px 13px;
	position:relative;
}
.header-menu ul li:hover a {
    color: var(--action-color);
}



/* mobile header */
.mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.burger {
    display: flex;
    gap: 4px;
    flex-direction: column;
    cursor: pointer;
    background-color:transparent;
    border: 0;
}
.burger:focus {
    border: 0;
}
.burger-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background-color: white;
    list-style-type: none;

}
.burger-menu li {
    width: 100%;
    padding: 8px;
    text-align: center;
}
.burger-menu li:hover  {
    background-color: var(--action-color);
}
.burger-menu li a {
    display: block;
    width: 100%;
    height: 100%;
}
.burger-menu li:hover a {
color: var(--alt-text-color);
}

.icon-bar {
    background: white;
    width: 32px;
    height: 4px;
    display: block;
    border-radius: 20px;
}
.phone-burger {
    display: none;
    font-size: 20px;
    padding: 12px;
    background-color: var(--primary-secondary);
    cursor: pointer;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 432;
    text-align: center;
}
.phone-burger a {
    display: block;
    width: 100%;
    height: 100%;
}
.phone-burger:hover img {

    filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(91deg) brightness(106%) contrast(100%);
}
.phone-burger img {
    width: 150px;
}
@media screen and (max-width: 991px) {
    .phone-burger {
        display: block;
    }
}
/*header telephone*/
.header-telephone {
    display: inline-block;
}
.header-telephone a {
	display: inline-block;
	line-height: 20px;
	color: var(--alt-text-color);
	background: var(--action-color);
	padding: 8px 32px;
	border-radius: 10px 0 10px 0;
	letter-spacing: 2px;
	transition: .5s;
}
.header-telephone  img {
    filter: invert(18%) sepia(14%) saturate(2639%) hue-rotate(180deg) brightness(91%) contrast(92%);
}

/* .sticky .header-telephone a{
    outline: 1px solid var(--action-color);
} */
.header-telephone a:hover {
	background: var(--primary-color);
    outline: 1px solid var(--action-color);

}
.header-telephone a:hover img {
    /* filter: invert(19%) sepia(0%) saturate(42%) hue-rotate(159deg) brightness(86%) contrast(107%); */
    filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(91deg) brightness(106%) contrast(100%);

}



/*================================
 <--Start Moving  Hero Area Css-->
==================================*/
.hero-area {
    position: relative;
    /* height: 900px; */
    background: var(--primary-color);

}
.hero-container {
    /* overflow: hidden; */
    /* border-radius: 20px; */
    margin-bottom: 40px;
    position: relative;
    /* border: 1px solid var(--border-color); */
    /* padding: 20px; */
}
.hero-image::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
}
.hero-text-container {
    padding: 60px;
    z-index: 500;
}
.hero-title h5 {
    font-size: 18px;
    color: #f3031e;
    font-weight: 700;
    margin-bottom: 16px;
}
.hero-title h1 {
    color: var(--alt-text-color);
    font-size: 55px;
    line-height: 60px;
    font-weight: 700;
}
.hero-description p {
    color: var(--alt-text-color);
    width: 80%;
    margin: 24px 0 32px;
    font-weight: 500;
}
.hero-button a {
    font-size: 16px;
    font-weight: 400;
    color: var(--main-text-color);
    background: var(--action-color);
    display: inline-block;
    padding: 12px 28px;
    border-radius: 12px 0 12px 0;
    transition: 0.5s;
    overflow: hidden;
    text-transform: uppercase;
	z-index:44;
	border:1px solid transparent; 
}

.hero-button a:hover {
  color: var(--alt-text-color);
  border:1px solid var(--alt-border-color);
  background-color: var(--primary-color);
}

/*hero-thumb*/
.hero-thumb {
    margin-top: 15px;
    width: 100%;
    background-color: red;
    border-radius: 20px;
    background: var(--primary-color);
    background: radial-gradient(circle, var(--action-color) 0%, var(--secondary-color) 100%);
}
.hero-thumb img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover; /* Ensures the image scales properly */
}

/*section-title*/
.section-title {
    text-align: center;
    margin-bottom: 52px;
}
.section-sub-title h3 {
    font-size: 18px;
    color: #f3031e;
    font-weight: 700;
    margin-bottom: 17px;
}
.section-description p {
    font-size: 18px;
    color: #616161;
    font-weight: 500;
    width: 63%;
    margin: auto;
    margin-top: 23px;
}
@media screen and (max-width: 401px) {
    .section-description p {
        width: 100%;
    } 
}
/*================================
 <--Start Moving  About Css-->
==================================*/
.about-area {
    padding: 120px 0 120px;
}
.about-left {
    position: relative;
    right: 44px;
}
/*counter-box*/
.counter-box {
    position: absolute;
    bottom: -20px;
    background: #fff;
    right: -6px;
    box-shadow: 0 0 9px rgba(2,2,2,0.1);
    padding: 40px 26px 41px;
    border-bottom: 3px solid #f3031e;
}
.counter-namber h1 {
    display: inline-block;
    font-size: 60px;
    line-height: 45px;
    color: #190202;
    font-weight: 700;
}
.counter-namber span {
    font-size: 30px;
    display: inline-block;
    position: relative;
    color: #f3031e;
    top: -26px;
    left: -3px;
}
.counter-title h3 {
    font-size: 16px;
    color: #232323;
    font-weight: 400;
    margin-top: 18px;
}
/*about-right*/
.section-title-one {
    text-align: left;
} 
p.about-description-one {
    margin: 22px 0 19px;
}
.about-button a {
    font-size: 14px;
    letter-spacing: 2px;
    color: #ffffff;
    background: #f3031e;
    display: inline-block;
    padding: 13px 28px;
    border-radius: 10px 0 10px 0;
    margin-top: 20px;
	position:relative;
	overflow:hidden;
	z-index:1;
	border:1px solid transparent;
}
.about-button a:before, .about-button a:after {
    content: "";
    position: absolute;
    top: -7px;
    right: 6px;
    bottom: 0;
    left: 6px;
    border-top: 35px solid #fff;
    border-bottom: 35px solid #fff;
    transition: 0.5s;
    border-radius: 10px 0 10px 0;
    z-index: -1;
}
.about-button a:before {
  border-right: 30px solid transparent;
  transform: translateX(-100%);
}
.about-button a:after {
  border-left: 30px solid transparent;
  transform: translateX(100%);
}
.about-button a:hover {
  color: #f3031e;
  border:1px solid #f3031e;
}
.about-button a:hover:before {
  transform: translateX(-30%);
}
.about-button a:hover:after {
  transform: translateX(30%);
}

/*================================
 <--Start Moving  Service Css-->
==================================*/
.service-area {
    position: relative;
    /* padding: 40px; */
    margin-bottom: 40px;
}
.service-container {
    padding: 20px;
    border:1px solid var(--primary-color);
    border-radius: 52px 8px 52px 8px;
    background-color: var(--alt-bg-color);
}
 .section-mean-title h1 {
    color: var(--alt-text-color);
}
 .section-description p {
    color: var(--alt-text-color);
}


.service-area.style {
    background: #F7E7E7;
}
.service-cards {
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}
/* .service-area:before {
    position: absolute;
    content: "";
    left: 36px;
    top: 0;
    width: 96%;
    height: 100%;
    background: var(--accent-bg-color);
    border-radius: 50px;
} */
/*service-box*/
.service-single-box {
    padding: 18px 20px 30px;
    text-align: center;
    background: #fff;
    border-radius: 5px;
    width: 100%;
}
.service-single-thumb {
    overflow:hidden;
}
.service-single-thumb img {
    width: 100%;
    max-height: 170px;
	transition:.5s;
}
@media screen and (max-width:768px) {
    .service-single-thumb img {
        
        max-height: 200px;
        
    }  
}
/*service-content*/
.service-title h3 {
    font-size: 22px;
    font-weight: 700;
    margin: 26px 0 15px;
}
.service-button a {
    font-size: 16px;
    line-height: 28px;
    color: var(--main-text-color);
    font-weight: 400;
    background: var(--action-color);
    display: inline-block;
    padding: 4px 24px;
    border-radius: 5px 0 5px 0;
    margin-top: 10px;
	position:relative;
	overflow:hidden;
	z-index:1;
	border:1px solid var(--action-color);
	
}
/* .service-button a:before, .service-button a:after {
    content: "";
    position: absolute;
    top: -5px;
    right: 6px;
    bottom: 0;
    left: 6px;
    border-top: 25px solid #fff;
    border-bottom: 25px solid #fff;
    transition: 0.5s;
    border-radius: 10px 0 10px 0;
    z-index: -1;
}
.service-button a:before {
  border-right: 24px solid transparent;
  transform: translateX(-100%);
}
.service-button a:after {
  border-left: 24px solid transparent;
  transform: translateX(100%);
} */
.service-button a:hover {
  color: var(--alt-text-color);
  background-color: var(--primary-color);
}
/* .service-button a:hover:before {
  transform: translateX(-30%);
}
.service-button a:hover:after {
  transform: translateX(30%);
} */
/*all hover*/
.service-single-box:hover .service-single-thumb img {
    transform: scale(1.1);
}
/*================================
 <--Main Content Css-->
==================================*/

.siteBox {
    padding: 40px;
    border-radius: 20px;
    border: 1px solid var(--primary-color);
}
@media screen and (max-width: 500px) {
    .siteBox {
        padding: 16px;
    }
}

/*================================
 <--Start Moving  Testimonial area Css-->
==================================*/
.testimonial-area {
    background: var(--secondary-color);
    padding: 112px 0 180px;
}
.testimonial-area .section-description-alt p {
    width: 43%;
}
/*testimonial single box*/
.testimonial-single-box {
    text-align: center;
    box-shadow: 0 0 9px rgba(2,2,2,0.15);
    padding: 40px 22px 31px;
    margin-top: 4px;
    margin-bottom: 11px;
    background: #fff;
    position: relative;
    margin-left: 20px;
    cursor: grab;
}
.testimonial-single-box:before {
    position: absolute;
    content: "";
    right: -11px;
    bottom: 0;
    height: 93%;
    width: 10px;
	background: var(--primary-color);
	transition:0.5s;
}
.testimonial-single-box:hover:before {
    background: var(--primary-color);
}

.testimonial-single-box:after {
    position: absolute;
    content: "";
    right: -11px;
    bottom: -11px;
    height: 11px;
    width: 94%;
	background: var(--primary-color);
	transition:0.5s;
}
.testimonial-single-box:hover:after {
    background: var(--primary-color);
}
.active.center .testimonial-single-box:before {
    background: var(--primary-color);
}
.active.center .testimonial-single-box:after {
    background: var(--primary-color);
}
.testimonial-thumb {
    display: inline-block;
}
/*testimonial title*/
.testimonial-title h3 {
    font-size: 22px;
    margin-top: 6px;
    margin-bottom: 10px;
}
.testimonial-title p {
    margin-bottom: 14px;
}
.testi-star-icon i {
    font-size: 16px;
    color: #ed031d;
}
span.rating-poin {
    background: #ed031d;
    width: 35px;
    height: 18px;
    border-radius: 2px;
    display: inline-block;
    font-size: 14px;
    color: #ffffff;
    font-weight: 500;
    position: relative;
    top: 1px;
    line-height: 20px;
    left: 3px;
    text-align: center;
}
/*owl-dots*/
.owl-dots {
    position: absolute;
    text-align: center;
    left: 0;
    right: 0;
    margin: auto;
    bottom: -85px;
}
.owl-dot {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    margin: 0 4px;
    background-color: var(--primary-color);
	transition:.5s;
}
.owl-dot.active {
    background: var(--action-color);
}
.owl-dot:hover{
	background:#ED031D;
}


/*================================
 <--Start Dreamhub Contact Area Css-->
==================================*/
.contacts-area {
	position: relative;
	padding: 97px 0 100px;
	background: url(../images/contact.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
.contact-content {
    position: relative;
    top: 15px;
    left: 61%;
    background: #F0031D;
    display: inline-block;
    padding: 23px 25px 4px;
    border-radius: 30px 0;
    border: 15px solid #F3707E;
}
.help-desk p {
    color: #ffffff;
    font-weight: 500;
    margin: 0;
} 
.help-desk h6 {
    font-size: 22px;
    color: #ffffff;
    font-weight: 700;
    margin: 2px 0 3px;
}
.help-desk h4 {
    font-size: 22px;
    color: #ffffff;
    font-weight: 700;
}
.contacts-titles h1 {
    margin-bottom: 29px;
    position: relative;
    display: inline-block;
    font-weight: 500;
    font-size: 30px;
}
.contacts-titles h1:before {
    position: absolute;
    content: "";
    right: -69px;
    top: 22px;
    background: #232323;
    height: 3px;
    width: 60px;
}
.form_box input {
    width: 100%;
    height: 50px;
    padding-left: 25px;
    background: #fff;
    transition: .5s;
    outline: 0;
    margin-bottom: 20px;
    border: none;
    border-radius: 5px 0;
}
.form_box input::placeholder {
    font-size: 14px;
    color: #616161;
}
 .form_box.style {
    width: 100%;
    height: 79px;
    padding-left: 1px;
    background: #fff;
    transition: .5s;
    outline: 0;
    margin-bottom: 20px;
    border: none;
    border-radius: 5px 0;
    padding-top: 15px;
}
.contacts-area .form_box textarea {
    width: 100%;
    padding-left: 25px;
    padding-top: 22px;
    height: 140px;
    outline: 0;
    transition: .5s;
    background: #fff;
    margin-top: 2px;
    border: none;
    border-radius: 10px 0;
}
.form_box textarea::placeholder {
    font-size: 14px;
    color: #616161;
}
/*contacts btn button*/
.contacts-btn button {
    background: #EE2626;
    padding: 10px 40px;
    display: inline-block;
    border: none;
    border-radius: 10px 0;
    color: #fff;
    margin-top: 26px;
    border: 1px solid transparent;
    transition: .5s;
    position: relative;
    margin-left: 16px;
    font-size: 16px;
}
.contacts-btn button:hover {
    border: 1px solid #EE2626;
    background: #fff;
    color: #EE2626;
}
/*================================
 <--Start Dreamhub Footer Area Css-->
==================================*/
.footer-area {
    background-color: var(--secondary-color);
    padding: 100px 0 27px;
}
.footer-description p {
    margin: 29px 0 39px;
}
.footer-social-address {
	display: inline-block;
}
.footer-social-address ul li {
	list-style: none;
	display: inline-block;
}
.footer-social-address ul li a {
    display: inline-block;
    margin-right: 17px;
    background: #F0031D;
    text-align: center;
    color: #fff;
    border-radius: 5px 0;
    height: 35px;
    width: 35px;
    line-height: 35px;
    transition: 0.5s;
    border: 1px solid transparent;
}
.footer-social-address ul li a:hover {
    color: #FE0000;
    border: 1px solid #FE0000;
    background: transparent;
}
/*footer title*/
.widget-title h3 {
    font-size: 22px;
    margin-bottom: 26px;
    margin-top: 17px;
}
.footer-list ul li {
	list-style: none;
}
.footer-list ul li a {
    display: inline-block;
    margin-bottom: 14px;
    color: #616161;
}
.footer-list ul li a i {
    display: inline-block;
    margin-right: 9px;
}

/*recent-post-item*/
.recent-post-item {
	margin-bottom: 20px;
}
.recent-post-item.active {
    border-bottom: 1px solid #A3A3A3;
    padding-bottom: 24px;
    padding-top: 7px;
}
.recent-tost-img {
    float: left;
    margin-right: 13px;
}
.recent-tost-text a {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
}
.recent-tost-text p {
	font-size: 14px;
	line-height: 22px;
}
.rcomment {
	margin-top: -5px;
}
/*company-info-desc*/
.company-info-box {
    padding-top: 5px;
}
.company-info-desc {
    margin-bottom: 3px;
}
.company-info-title h6 {
    font-size: 16px;
    color: #232323;
}
.company-icon {
    float: left;
    margin-right: 19px;
}
.company-icon a {
    color: #E12323;
    display: inline-block;
    font-size: 22px;
}
.company-info-title {
    overflow: hidden;
}
/*all hover*/
.footer-fllow a:hover {
    color: #f10239;
}
.footer-list ul li a:hover {
    color: #f10239;
	
}

.recent-tost-text a:hover {
    color: #f10239;
}
/*================================
 <--Start Dreamhub Footer bottom Area Css-->
==================================*/
.row.footer-btm {
    border-top: 1px solid #A3A3A3;
    margin-top: 50px;
    padding-top: 25px;
}
.footer-bottom-right {
	text-align: right;
}
.footer-bottom-right a {
	display: inline-block;
	font-size: 16px;
	padding-left: 26px;
	
}
.footer-bottom-right a:hover {
    color: #F10239;
}



/*all hover*/

.blog-details-title a h1:hover {
    color: #DB1D00;
}

/*==============================*/
/*Start moving Service Details Area*/
/*==============================*/
.serice-details-area {
	padding: 100px 0 0;
}
/*service-details-left*/
.service-details-left {
    background: #fff;
    padding: 25px;
    box-shadow: 0 0 5px rgb(0 0 0 / 20%);
}
.service-dtls-form-field input {
    width: 100%;
    padding: 10px 9px;
    border: 1px solid #F7E7E8;
}
.service-search-btn button {
    position: absolute;
    top: 36px;
    right: 55px;
    border: none;
    background: none;
}
/*single-service-details-bpx*/
.single-service-details-box {
    background: #fff;
    padding: 25px;
    box-shadow: 0 0 5px rgb(0 0 0 / 20%);
    margin-top: 40px;
}
.single-widget-list h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 37px;
}
.single-widget-list ul li {
    list-style: none;
    padding: 18px 0 15px;
    border-top: 1px solid #F7E7E7;
}
.single-widget-list ul li a {
    display: inline-block;
    color: #616161;
}
.single-widget-list ul li:hover a {
    color: #f10239;
}
/*single-sidebar-widget*/
.single-sidebar-widget h3 {
    font-size: 22px;
    font-weight: 700;
    margin-top: 41px;
    margin-bottom: 25px;
}
.single-sidebar-widget span {
    font-size: 18px;
    color: #f10239;
}
.single-sidebar-widget ul li {
    list-style: none;
    background: #fff;
    padding: 12px 0 12px;
    border: 1px solid #F7E7E7;
}
ul.style li {
    margin-bottom: 20px;
}
.single-sidebar-widget ul li a {
    display: inline-block;
    color: #616161;
    margin-left: 26px;
    font-weight: 500;
}
.single-sidebar-widget ul li:hover a {
    color: #f10239;
}
.single-sidebar-widget ul li a i {
    display: inline-block;
    margin-right: 13px;
    font-size: 16px;
}
/*moving-service-details-box*/
.moving-service-details-thubm img {
    width: 100%;
}
.service-page-title h1 {
    margin: 32px 0 23px;
}
.serivce-details-desc span {
    color: #f10239;
}
/*.row.style3*/
.row.style3 {
    margin-top: 42px;
}
.service-details-thumb img {
    width: 100%;
    border-radius: 10px;
}
/*service-page-title2*/
.service-page-title2 h1 {
    font-size: 30px;
    margin-bottom: 8px;
}
.widget-service-details-icon p {
    margin-bottom: 10px;
}
.widget-service-details-icon p i {
    font-size: 25px;
    color: #f10239;
    margin-right: 2px;
    position: relative;
    top: 4px;
}
/*service-work-process-box*/
.service-work-process-box {
    padding: 40px 25px 20px;
    background: #F5F5F5;
    border-radius: 4px;
    text-align: center;
    margin-top: 32px;
}
.service-work-process-title h4 {
    font-size: 22px;
    font-weight: 700;
    padding: 20px 0 10px;
}
.service-work-process-number {
    display: inline-block;
    padding: 10px;
    position: relative;
}
.service-work-process-number:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 10px solid #f10239;
    border-radius: 50%;
    opacity: .3;
}
.service-work-process-number span {
    font-size: 24px;
    line-height: 32px;
    font-weight: 500;
    color: #fff;
    width: 70px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    background: #f10239;
    display: inline-block;
    border-radius: 50%;
    position: relative;
    z-index: 1;
}

/*scrollUp*/
#scrollUp {
    bottom: 30px;
    background: var(--primary-color);
    color: #fff;
    font-size: 30px;
    height: 46px;
    right: 49px;
    text-align: center;
    border-radius: 55px;
    width: 45px;
    line-height: 40px;
}
#scrollUp i {
    display: inline-block;
    font-size: 20px;
    color: #fff;
}
#scrollUp svg {
    vertical-align: middle;
}

/* Custom CSS */

#contact {
    padding: 50px 0 60px;
    background: var(--primary-color);
    color: var(--alt-text-color);
}
.contact-form-container, .contact-form-container > div {
    padding: 0 20px;
}
#contact .section-title {
    margin-bottom: 40px;
}
#contact .section-title {
    margin-bottom: 40px;
}

#contact h2 {
    color: var(--footer-text);
    margin-top: 10px;
    margin-bottom: 15px;
    padding-bottom: 15px;
}
#amzgMessage {
    text-align: center;
    font-weight: bold;
    margin: 10px;
    font-size: 1.2rem;
}
div#amzgForm {
    display: flex;
    flex-wrap: wrap;
}
#amzgForm div {
    width: 50%;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    padding: 4px 8px;
}
#amzgf div span {
    color: var(--footer-text) !important;
    font-size: 16px;
}
div#amzgfemessage {
    width: 100%;
}
#amzgfephotos button {
    display: inline-block;
    vertical-align: top;
    font-size: 1rem !important;
    border-radius: 20px;
    color: white !important;
    padding: 12px 30px;
    transition: all 0.5s;
    text-transform: uppercase;
    position: relative;
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    z-index: 1;
    border: none !important;
    background: var(--secondary-color) !important;
    box-shadow: 0 3px 24px rgb(0 0 0 / 10%);
}
#amzgf div .btn {
    display: inline-block;
    vertical-align: top;
    font-size: 1rem;
    border-radius: 20px;
    color: white;
    padding: 12px 30px;
    transition: all 0.5s;
    text-transform: uppercase;
    position: relative;
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    z-index: 1;
    border: none !important;
    background: var(--secondary-color);
    box-shadow: 0 3px 24px rgb(0 0 0 / 10%);
}
.amzgstextarea textarea {
    margin: 8px 0;
    padding: 8px 0 32px 8px;
    height: auto;
    width: 100%;
    border-radius: 8px;
}
.amzgsinput input {
    padding: 8px;
    border: 1px solid #535555;
    border-radius: 8px;
}
.amzgRequired span:after {
    content: "*";
    color: red;
}
.c_input {
    float: left;

}
.footer-container {
    display: flex;
    justify-content: space-evenly;

}
address a {
    color: var(--alt-text-color);
}


address a:hover {
    color: var(--action-color);
}
#amzgf div .btn:hover, #amzgfephotos:hover button {
    color: var(--main-text-color) !important;
    background-color: var(--action-color) !important;
}

.social-icons {
    display: flex;
    gap: 16px;
}
.social-icons svg {
    min-height: 32px;
}
@media screen and (max-width: 400px) {
.siteBox img:not([alt='Call Now!']) {
    width: 100%;
}
}
input:focus, button:focus,textarea:focus {
    outline-color: var(--border-color);
    border: 1px solid var(--border-color);
}

.main-section {
    padding: 20px;
}
.main-section .title {
    font-size: 40px;
    text-align: center;
}

.main-section .siteBoxContent {
    padding: 20px;
    border: 1px solid var(--border-color);
    margin-top: 40px;
    border-radius: 52px 8px 52px 8px;
}
.contact-form-title {
    display: flex;
    justify-content: space-around;
}
.mobile-services-menu {
    display: none;
}
.mobile-services-menu li:hover  {
    border:1px solid var(--primary-color);
}
@media screen and (max-width:992px) {
    .hero-container {
        margin-top: 52px;
    }
    .hero-text-container {
        padding: 60px;
    }
    .footer-container {
        flex-direction: column;
    }
}
@media   (max-width: 768px) {
    .hero-text-container {
        padding: 40px;
    }
    .hero-container {
        margin-top: 40px;
    }
    .hero-button a {
        font-size: 14px;
        padding: 12px 32px;
    }
    #amzgForm div, .c_input {
        width: 100%;
    }
}

@media screen and (max-width: 570px) {
    .main-section,.service-area {
        padding: 20px;
    }
}

@media (max-width:500px) {
    .hero-text-container {
        padding: 12px;
    }
    .hero-container {
        margin-top: 72px;
    }
    .testimonial-area .section-description p {
        width: 100%;
    }

    .testimonial-area {
        padding: 80px 0 120px;
    }
    .testimonial-single-box {
        width: 84%;
    }
}





/* BLOG */
.blog_title{background-color:#f7f7f7;padding:20px}
.blog_txt{border:1px solid #f7f7f7}
.preview{border-top:1px dashed #ccc;margin-bottom:20px;margin-top:20px;padding:20px}
.date{background-image:url("../img/blogdate.png");background-position:left center;background-repeat:no-repeat;color:#6d6d77!important;display:block;font-family:open_sanslight;font-size:14px;font-weight:700;margin-bottom:10px;padding-left:20px;text-transform:uppercase}
.maipage_blogitem_title{font-weight:700;width:auto}
.mainpage_blogitem{clear:both;margin-bottom:20px!important;padding-right:10px}
.maipage_blogitem_img{float:left;margin-right:10px}
#blog-data{display:flex;flex-wrap:wrap;flex-direction:row;width:100%}
.blogPost img{width:100%;height:200px;object-fit:cover}
article.testimonialsList{border-bottom:1px dashed #d1d1d1;margin:0 0 30px;padding:0 0 20px}
article.testimonialsList ul{float:left;margin:0;width:100%}
article.testimonialsList ul li{float:left;width:50%}
article.testimonialsList ul li.author{color:#fcb034;font-size:16px;font-weight:600}
article.testimonialsList ul li.date{float:left;text-align:right}
article.categoryList{float:left;margin:0 15px 30px 0;min-height:410px;width:320px}
article.categoryList h3{color:#6d6d6d;font-size:24px;font-weight:600;margin:0 0 15px;text-transform:uppercase}
article.categoryList header a.boxLink{display:block;height:219px;margin:0 0 20px;overflow:hidden;position:relative;width:320px}
article.categoryList header a.boxLink span{background:url(../images/view-more.png) no-repeat scroll center center #000;bottom:-100%;display:block;height:100%;left:0;opacity:.6;position:absolute;text-indent:-9999px;transition:bottom .4s ease-in-out 0;width:100%}
article.categoryList header a.boxLink:hover span{bottom:0;transition:bottom .4s ease-in-out 0}
article.categoryList header.boxLink img{height:auto;margin:0;padding:0;position:relative;width:100%}
article.categoryList p{color:#828282;font-size:14px}
article.categoryList a.readMore{background:url(../images/read-more.png) no-repeat scroll 0 0 rgba(0,0,0,0);color:#fff;display:block;font-size:18px;font-weight:600;height:38px;line-height:42px;text-align:center;text-transform:uppercase;transition:all .2s ease-in-out 0;width:138px}
article.categoryList a.readMore:hover{color:#415a68;text-decoration:none}
article.blogList{border-bottom:1px dashed #dadada;margin:0 10px 10px 10px;padding:0 0 10px;width:46%;border: none; border-radius: 0;}
article.blogList header p{margin:0 0 10px}
article.blog img,article.blogList img{border:1px solid #dadada;padding:4px;width:100%;height:190px;object-fit:cover}
article.blog h3,article.blogList h3{margin:0 0 5px}
article.blogList h3 a{color:#415a68;font-size:18px;font-weight:600;transition:all .2s ease-in-out 0}
article.blogList h3 a:hover{color:#fcb034;text-decoration:none}
article time{color:#aeaeae;font-size:11px;font-style:italic;font-weight:300}
.blog_preview{background:none repeat scroll 0 0 #fff;border-bottom:1px dashed #c9e0e6;clear:left;height:200px;margin-bottom:20px;padding-bottom:20px}
.blog_preview .date,.blogdate{color:#8c9195;display:block;font-size:11px;margin:12px 0}
.blog_preview .text{color:#484e4e!important;display:block;font-size:13px;text-decoration:none}
.blog_preview .preview{float:left;margin-left:16px;width:70%}
.blog_preview .img{background-color:#000;background-position:center center;background-repeat:no-repeat;border-radius:12px;float:left;height:200px;width:200px}
.blogtitle{background:#a1d784;color:#fff!important;display:block;font-size:18px;margin-left:-80px;margin-top:22px;padding:8px 12px;position:absolute;text-decoration:none}
.pagination a{display:inline-block;padding:3px 8px}
.pagination a.active{background:#ccc;font-weight:700}
.blogList a{display:block;font-weight:700;color:#000;margin-bottom:10px}
.blogList p{font-size:12px;font-style:italic}
.blogList img{width:100%}
.authorInfo{display:flex;justify-content:flex-start;align-items:center;padding:10px;border:1px solid #ccc;border-radius:5px;margin-top:30px}
.authorInfo img{width:80px;border-radius:100%;margin-right:20px}
@media only screen and (max-width:767px){
.blogList{width:100%!important}
.content-wrapper img {
max-width: 100%;
}

}
.blogPost {
    padding: 40px;
    border: 1px solid var(--secondary-color);
    border-radius: 20px;
}