@charset "UTF-8";
/* CSS Document */

.top_header {background: url(../img/slider/BannerBigTitle_services.png) center bottom no-repeat, #ffffff; margin-top: 100PX !important; height: 320px !important;}
.servs {margin-top: 80px;}
@media screen and (max-width:920px)  {
.top_header {background: url(../img/slider/BannerBigTitle2_services.png) center bottom, #ffffff; margin-top: 100PX !important; height: auto; padding-bottom: calc(100% / 1.75); background-size: cover;}
}
@media screen and (min-width:1921px)  {
section#packages .iwrap {width: 1400px !important; left: calc(50% - 700px) !important;}
}

#consultation {display: inline-block; position: relative; width: calc(100% - (450px)); left: 0; height: auto; min-height: 400px; text-align: left; padding: 30px 30px 30px 420px; margin-top: 50px; background: url(../img/consultation.png) left top no-repeat, #F9F9F9; border-radius: 20px;}
#listing {display: inline-block; position: relative; width: calc(100% - (450px)); left: 0; height: auto; min-height: 400px; text-align: right; padding: 30px 420px 30px 30px; margin-top: 50px; background:  url(../img/listing.png) right top no-repeat, #F9F9F9;  border-radius: 20px;}
#channel {display: inline-block; position: relative; width: calc(100% - (450px)); left: 0; height: auto; min-height: 400px; text-align: left; padding: 30px 30px 30px 420px; margin-top: 50px; background: url(../img/channel.png) left top no-repeat, #F9F9F9;  border-radius: 20px;}
#cleaning {display: inline-block; position: relative; width: calc(100% - (450px)); left: 0; height: auto; min-height: 400px; text-align: right; padding: 30px 420px 30px 30px; margin-top: 50px; background: url(../img/cleaning.png) right top no-repeat, #F9F9F9;  border-radius: 20px;}
@media screen and (max-width:860px)  {
#consultation, #listing, #channel, #cleaning   { padding: 400px 30px 30px 30px; height: auto !important; width: calc(100% - (60px)); text-align: center;}
}
#packages {margin-top: 200px; background: #fffdeb !important; padding: 0; height: auto !important; min-height: 100% !important; }
/**#packages .iwrap {width: 75% !important; left: 12.5% !important; background: pink;}**/

#servs_container {box-sizing: border-box; display: inline-block; position: relative; width: 900px; margin: 50px 0 !important; height: auto; min-height: 600px; left: calc(50% - 450px); padding: 0; border-radius: 20px; overflow: hidden; background: #FFBDBF;}
#serv1 {box-sizing: border-box; position: relative; width: 50%; height: auto; min-height: 600px; background: #FFBDBF; float: left; text-align: center; padding: 20px; color: black !important;}
#serv2 {box-sizing: border-box; position: relative; width: 50%; height: auto; min-height: 600px; background: #A0E3E3; float: left; text-align: center; padding: 20px; color: black !important;}
.pkg {text-align: left;}

.serv_p {display: block; margin: 0 0px;}
.serv_p p { width: auto !important; max-width: 940px !important; min-width: 320px !important;}

@media screen and (max-width:1152px)  {
#servs_container { width: calc(100% - 40px); left: 20px !important; }
#serv1 {width: 50%; padding: 12px;}
#serv2 {width: 50%; padding: 12px;}
}

@media screen and (max-width:960px)  {
#servs_container { width: calc(100% - 40px); left: 20px !important;}
#serv1 {width: 100%; padding: 12px;}
#serv2 {width: 100%; padding: 12px;}
}

@media screen and (max-width:640px)  {
#servs_container { width: 100% !important; margin: 20px 0 !important; left: 0 !important; border-radius: 0 !important;}
#serv1 {width: 100%; padding: 12px !important; border-radius: 0px;}
#serv2 {width: 100%; padding: 12px; height: 400px;}
.serv_p {padding: 0 10px !important; background: none;}

}

