.wrapper {padding-top: 100px !important;}

.navbar {background: #FFFFFF;}
.navbar ul li a {
    background-color: transparent;
    /* transform: scale(1.1); */
    color: #212529 !important;
}
.navbar div a i {color: #212529 !important;}
.image-container {
    position: relative;
    width: 80%;
    margin: auto;
}
.remove-back{mix-blend-mode: darken;}

.image-container img {
    max-width: 100%;
    display: block;
}

.image-container img:nth-child(2) {
    width: 360px;
    position: absolute;
    bottom: -25px;
    left: 0;
}

.services_header {
    width: 100%;
}
.services_header p {
    font-weight: 400;
    line-height: 30px;
}
.services_header h1 {font-size: 38px !important; font-weight: 400 !important; line-height: 1.1;}
.services_header h1 span {
    font-size: 42px;
    background: linear-gradient(to left, #28B4EF 20%, #330867 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
    text-transform: uppercase; 
    font-weight: 700 !important;
}
.services_header img {
    display: block;
    margin: auto;
    border-radius: 5px;
}
.services_text p {font-size: 30px !important; line-height: 2;}
.services_text p span {font-weight: 600;}
.services-graph h2 {font-weight: 400 !important; font-size: 42px;}
.services-graph h2 span{color: #FFAA45; font-weight: 700;}
.services-graph img {width: 60%;}
.advantages ul li {
	font-size: 20px;
    margin: 20px 0;
    list-style: none;
	text-align: justify;
	display: flex;
    cursor: pointer;
}
.advantages ul li i {font-size: 24px; margin-right: 10px;}
.advantages ul li:hover, .advantages ul li:hover i {color: blue;}

.advantages h2 {
    font-size: 42px;
    /*background: linear-gradient(to left, #28B4EF 20%, #330867 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;*/
    text-decoration: none;
    text-transform: uppercase; 
    font-weight: 400 !important;
    display: inline-block;
    position: relative;
}

.image-container-two {
    position: relative;
    display: inline-block;
}

.image-container-two img {
    max-width: 100%;
    display: block;
}

.overlay-text {
    position: absolute;
    top: 50%; 
    left: 42%; 
    display: inline;
    transform: translate(-50%, -50%); 
    z-index: 1; 
    font-size: 20px;
    color: #FFFFFF;
    /* padding: 10px;  */
    text-align: center;
}
.overlay-text-two {
    position: absolute;
    top: 50%; 
    left: 50%; 
    display: inline;
    transform: translate(-50%, -50%); 
    z-index: 1; 
    color: #FFFFFF;
    font-size: 20px;
    padding: 10px; 
    text-align: center;
}
.overlay{
    position: absolute;
    top: 0; 
    left: 0; 
    right: 0;
    bottom: 0;
    overflow: hidden;
    background-color: rgba(0,0,0,0.5); 
    width: 100%;
    height: auto;
}
.advantage-images {
    position: relative;
}

.advantage-images::before {
    content: "";
    position: absolute;
    top: -153px;
    left: 150px;
    width: 115%;
    height: 170%;
    background-color: #eeeeee;
    z-index: -1;
    transform: rotate(74deg);
}

.image-container-three {
    position: relative;
    z-index: 1;
}

.image-container-three img {
    max-width: 100%;
    display: block;
}

@media screen and (max-width: 7000px) {
    .advantages h2:before {height: 58.5px;}
    .services-graph img {width: 25%;}
    .services_header p {line-height: 40px;}
}
@media screen and (max-width: 5000px) {
    .services-graph img {width: 30%;}
}
@media screen and (max-width: 3000px) {
    .services-graph img {width: 35%;}
}
@media screen and (max-width: 2000px) {
    .services-graph img {width: 40%;}
}
@media screen and (max-width: 1800px) {
    .advantages h2:before {height: 58px;}
    .services-graph img {width: 45%;}
}
@media screen and (max-width: 1600px) {
    .advantages h2:before {height: 58.5px;}
    .services-graph img {width: 50%;}
}
@media screen and (max-width: 1440px) {
    .services-graph img {width: 55%;}
}
@media screen and (max-width: 1380px) {
    .services-graph img {width: 60%;}
    .services_header p {line-height: 30px;}
}
@media screen and (max-width: 1024px) {
    .image-container {width: 100%;}
    .services_header p {line-height: 25px;}
    .advantages h2:before {height: 56.5px;}
    .services-graph img {width: 75%;}
}
@media screen and (max-width: 991px) {
    .services_header img {width: 100%;}
    .advantages_2 .card.bg-dark {margin: 0;}
    .services_header h1 {font-size: 30px !important; text-align: center;}
    .services_header h1 span {font-size: 30px !important; text-align: center;}
    .advantages h2:before {height: 55px;}
    .services-graph img {width: 100%;}
    .advantages ul {font-size: 13px;}
    .advantages ul li {margin: 5px 0;}
}
@media screen and (max-width: 880px) {
    .advantages h2:before {height: 54.5px;}
}
@media screen and (max-width: 768px) {
    .advantages h2:before {height: 53.5px;}
    .services-graph img {width: 80%;}
    .advantages ul {font-size: 15px;}
    .advantage-images::before {display: none;}
}
@media screen and (max-width: 767px) {
    .advantages h2:before {height: 53.5px;}
    .advantages ul {margin: 20px 0 30px 0;}
}
@media screen and (max-width: 670px) {
    .advantages h2:before {height: 52.5px;}
}
@media screen and (max-width: 550px) {
    .image-container img:nth-child(2) {left: -20%;}
    .advantages ul {margin-left: 15px;}
}
@media screen and (max-width: 480px) {
    .services_header img {margin-bottom: 40px;}
    .services_header .card {margin-left: 0; margin-top: 0;}
    .advantages h2:before {height: 50px;}
    .image-container img:nth-child(2) {bottom: -70px;}
}
@media screen and (max-width: 400px) {
    .advantages h2:before {height: 49.5px;}
} 
@media screen and (max-width: 380px) {
    .advantages h2:before {height: 49px;}
}