@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* General Base Styles */
:root {
    --main-green: #00beb2;
    --dark-green: #009087;
    --main-violet: #B200BE;
    --dark-grey: #4A535B;
    --grey-color: #121212;
}

body {
	color: #ddd;
	background-color: #000000;
	font-size: 16px;
	margin: 0;
	padding: 0;
	font-family: 'Inter', sans-serif;
	position: relative;
}

/* Background pseudo-elements */
body::before, body::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 100%;
    left: 0;
}

body::before {
    top: 0;
    background: url('../img/bg-top.svg') no-repeat right top / cover, url('../img/bg-home-line.svg') no-repeat right 70px top 520px / auto;
}

body::after {
    bottom: 0;
    background: url('../img/bg-bottom.svg') no-repeat left bottom / cover;
    height: 1200px;
}

/* Default styles for large screens */
body.services-body::before {
    background-image: url('../img/services-top.svg');
	background-repeat: no-repeat;
	background-position: top right, top 400px right 70px;
	position: absolute;  
	z-index: -1;
	top: 0;
	left:0;
	right: 0;
	bottom: 0;
	width: 100%;
}

/* Adjust background for medium screens */
@media (max-width: 992px) {
    body.services-body::before {
        background-position: top center; /* Center the background */
        background-size: 100% auto; /* Scale the background to 100% width, auto height */
    }
}

/* Adjust background for small screens */
@media (max-width: 768px) {
    body.services-body::before {
        background-image: url('../img/services-top.svg'); /* Optional: use a smaller image for small screens */
        background-size: contain; /* Make sure the whole image fits within the container */
    }
}

/* Adjust background for extra small screens */
@media (max-width: 576px) {
    body.services-body::before {
        background-position: center center; /* Fully center the background image */
        background-size: 150% auto; /* Increase the size if needed */
    }
}


/* Typography */
h1, h2, h3 {
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
}

h1 {
	font-size: 130px;
	font-weight: 700;
	line-height: 130px;
	letter-spacing: 0em;
	text-align: left;
}

h2 {
	font-size: 70px;
	font-weight: 700;
	line-height: 65px;
	letter-spacing: -0.25px;
	text-align: left;
}

h3 {
	font-size: 45px;
	font-weight: 700;
	line-height: 65px;
	letter-spacing: -0.25px;
	text-align: left;
}

/* Links */
a.main-link {
    text-decoration: underline;
    color: var(--main-green);
}

a.main-link:hover {
    text-decoration: none;
}

.title-section__description {
	font-size: 30px;
	font-weight: 500;
	line-height: 30px;
	letter-spacing: 0.05em;
	text-align: left;
}

.title-section__text {
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: 0.5px;
	text-align: left;
	max-width: 700px;
}

span.main-gradient-top {
	background: linear-gradient(to right, #00BEB2 50%, #6b4cb9);
	background: -webkit-linear-gradient(to right, #00BEB2 50%, #6b4cb9);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

span.main-gradient-bottom {
	background: linear-gradient(to right, #00BEB2 30%, #B200BE);
	background: -webkit-linear-gradient(to right, #00BEB2 30%, #B200BE);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.main-button {
	background-color: var(--main-green);
	border: none;
	color: white;
	text-decoration: none;
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: 1px;
	text-align: center;
	padding: 15px 40px;
	transition: all 0.7s;
}

.main-button-outline {
	background-color: transparent;
	border: 1px solid var(--main-green);
	color: var(--main-green);
	text-decoration: none;
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: 1px;
	text-align: center;
	padding: 15px 40px;
	transition: all 0.7s;
}

.main-button:hover, .main-button-outline:hover {
    background-color: var(--dark-green);
    color: white;
}

/* Navigation */
.navigation-section {
    display: flex;
    justify-content: space-between;
    padding-bottom: 100px;
}


.hamburger {
    width: 50px;
    margin-left: auto;
    text-align: right;
}

.hamburger:hover .line {
    transform: translateY(-5px);
}


 .hamburger .line{
	width: 50px;
	height: 5px;
	background-color: var(--main-green);
	display: block;
	margin: 8px auto;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
  }
  
  .hamburger:hover{
	cursor: pointer;
  }

  .hamburger:hover .line:nth-child(1) {
	transform: translate(0, -5px);
  }

  .hamburger:hover .line:nth-child(2) {
	transform: translate(0, 10px);
  }

 .overlay {
	height: 100%;
	width: 100%;
	display: none;
	position: fixed;
	z-index: 2;
	top: 0;
	left: 0;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0, 0.9);
	animation: fadeIn 1s;
  }

  @keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
  }
  
  .overlay-content {
	position: relative;
	top: 15%;
	width: 100%;
	text-align: center;
	margin-top: 30px;
  }
  
  .overlay a {
	padding: 8px;
	text-decoration: none;
	color: #fff;
	display: block;
	transition: 0.3s;
	font-size: 110px;
	font-weight: 700;
	line-height: 55px;
	letter-spacing: 0em;
	text-align: center;
	padding-bottom: 100px;

  }
  
  .overlay a:hover, .overlay a:focus {
	color: var(--main-green);
	text-decoration: none;
  }
  
  .overlay .closebtn {
	position: absolute;
	top: 20px;
	left: 45px;
	font-size: 60px;
  }

  .overlay-logotype {
	transform: rotate(-90deg);
	position: absolute;
	top: 150px;
	right: 45px;
  }
  
  /* @media screen and (max-height: 450px) {
	.overlay a {font-size: 20px}
	.overlay .closebtn {
	font-size: 40px;
	top: 15px;
	right: 35px;
	}
  } */

.partners-section {
	position: relative;
	height: 100%;
}

.carousel-block {
	padding: 80px 0;
	margin: 200px 0 300px;
}

 .carousel-block:before {
	content: "";
	background-color: rgba(255, 255, 255,.5);
	mix-blend-mode: soft-light;
	position: absolute;
	bottom: 0;
	top: 0;
	right: 0;
	left: 0;
 }

 /*
  * Slider
  */

 .slick-dots {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.slick-dots li {
  margin: 0 0.25rem;
}
.slick-dots li button {
  display: block;
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: none;
  border-radius: 100%;
  background-color: rgba(0, 190, 178, .25);
  text-indent: -9999px;
}
.slick-dots li.slick-active button {
  background-color: var(--main-green);
}
  
.slick-slide {
	margin: 0px 20px;
  }

 
  .logo-carousel {
		overflow: inherit;
	  }
  .slide {
		text-align: center;
  }

  .logo-carousel:hover {
  	cursor: pointer;
  }
  
  .logo-carousel .slick-slide img {
	max-height: 50px;
	margin: auto;
  }
  
  .slick-track::before,
  .slick-track::after {
	display: table;
	content: '';
  }
  
  .slick-track::after {
	clear: both;
  }

  .slider-section {
  	overflow: hidden!important;
  	padding-bottom: 30px;
  }
  
  .slider-section .slick-track {
	padding: 1rem 0;
	margin-bottom: 3em;
  }
  
  .slick-loading .slick-track {
	visibility: hidden;
  }
  
  .slick-slide.dragging img {
	pointer-events: none;
  }
  
  .slick-loading .slick-slide {
	visibility: hidden;
  }

  /*
 * ABOUT
 */

  .about-section {
  	margin-bottom: 100px;
  }


.dropdown-section__block h2 {
    font-size: 20px;
    font-weight: 800;
    color: #B200BE;
}

#SEO_1 {
    display: none;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
}



.dropdown-section__block {
	border-radius: 15px!important;
	border: 1px solid var(--main-violet);	
	text-align: center;
	margin: auto;
	font-size: 17px;
	font-weight: 600;
	line-height: 27px;
	text-align: center;
    padding: 0px 20px;
}

.header-flex-container {
    display: flex;
    justify-content: space-between; /* This will push the h2 to the left and the icon to the right */
    align-items: center; /* This will vertically center the items */
    width: 100%; /* Ensure the container takes up the full available width */
}

.header-flex-container h2 {
    margin: 0; /* Adjust or remove default margin to ensure layout consistency */
}

.myservices {
    display: flex;
    justify-content: space-between; /* This spreads the child divs apart */
    align-items: center; /* This vertically centers the child divs */
}


.about-section__block {
	border-radius: 15px!important;
	border: 1px solid var(--main-green);	
	text-align: center;
	margin: auto;
	font-size: 17px;
	font-weight: 600;
	line-height: 27px;
	letter-spacing: 0.0025em;
	text-align: center;
	transition: all 1s;
}

.about-section__block:hover {
	border-color: var(--main-violet);
	cursor: pointer;
	background-color: #000;
	transform: scale(1.05);
}

.about-section__block a {
    text-decoration: none;
    color: #fff;
}

.about-section__block svg {
	width: 82px;
	height: 70px;
	fill: var(--main-green);
}

.about-section__block:hover svg {
	fill: var(--main-violet);
}

.about-section__block:hover svg path {
    fill: var(--main-violet);
}

.about-section__block:hover svg plygon {
    fill: var(--main-violet);
}

.about-section__block:hover svg circle {
    fill: var(--main-violet);
}

.about-section__description {
	font-size: 30px;
	font-weight: 500;
	line-height: 35px;
	letter-spacing: 0.5px;
	text-align: left;

}

.green-text,
.original-text {
	font-size: 16px;
	font-weight: 500;
	line-height: 30px;
	letter-spacing: 0.5px;
	text-align: left;

}

.green-text {
	color: var(--main-green);
}

.original-text {
	color: white;
}

/*
 * CASES
 */
body.casestudy-body::before {
	content: ''; 
	background-repeat: no-repeat, no-repeat;
    background-image: url('../img/bg-top.svg'), url('../img/insights-line.svg');
	background-position: top left 80%, top 400px right 70px;
	position: absolute;  
	z-index: -1;
	top: 0;
	left:0;
	right: 0;
	bottom: 0;
	width: 100%;
	opacity: 0.5;
}

body.casestudy::after { 
	content: ''; 
	background: url('../img/insights-bottom.svg') no-repeat; 
	position: absolute;	 
	bottom: 0px;
	left: 0px;
	width: 100%;
    height: 1000px;
	z-index: -1; 
}


.cases-section__description {
	font-size: 30px;
	font-weight: 500;
	line-height: 35px;
	letter-spacing: 0.5px;
	text-align: left;
	color: var(--main-green);
}

.cases-section__text {
	font-size: 16px;
	font-weight: 500;
	line-height: 30px;
	letter-spacing: 0.5px;
	text-align: left;
}

.contact-section__text {
	font-size: 16px;
	font-weight: 500;
	line-height: 30px;
	letter-spacing: 0.5px;
	text-align: left;
}

.contact-section {
	margin-bottom:150px;
}

/*
 * FORM
 */

 .form-control {
	background-color: #121212!important;
	border-radius: 0;
	border:none;
	border-bottom: 1px solid var(--main-green);
	padding: 15px 20px;
	color: var(--main-green)!important;
 }

 .form-control::placeholder {
	font-size: 16px;
	font-weight: 500;
	line-height: 25px;
	letter-spacing: 0.25px;
	text-align: left;
	color: var(--main-green);
 }

 .form-control:focus {
	background: #4A535B!important;

 }

 .form-select {
	padding: 15px 20px;
	background-color: #121212!important;
	border-radius: 0;
	border:none;
	border: 1px solid var(--main-green);
	color: var(--main-green)!important;
	background-image: url('../img/arrow.svg');
 }

 .form-select::placeholder {
	font-size: 16px;
	font-weight: 500;
	line-height: 25px;
	letter-spacing: 0.25px;
	text-align: left;
	color: var(--main-green);
 }

 .checkbox-inline {
	margin: 0;
  }
  .checkbox-style {
	border: var(--main-green) solid 1px;
	display: inline-block;
	height: 20px;
	margin-right: 5px;
	position: relative;
	vertical-align: top;
	width: 20px;
  }
  .checkbox-style:after {
	background: var(--main-green);
	content: '';
	left: 15%;
	top: 15%;
	bottom: 15%;
	right: 10%;
	position: absolute;
	opacity: 0;
  }
  input[type="radio"]:checked ~ .radio-style:after,
input[type="checkbox"]:checked ~ .checkbox-style:after {
  opacity: 100;
}
.footer-menu img {
	width: 40px;
	height: 40px;
    margin-bottom: 10px;
}

.footer-menu {
	font-size: 12px;
	font-weight: 600;
	line-height: 25px;
	letter-spacing: 1px;
	text-align: left;
	color: white;
}

.footer-menu a {
	text-decoration: none;
	color: white;
	transition: all .5s;
}

.footer-menu a:hover {
	text-decoration: none;
	color: var(--main-green);
}

.footer-menu a.grey-link {
	text-decoration: none;
	color: var(--dark-grey);
	transition: all .5s;
}

.footer-menu a.grey-link:hover {
	text-decoration: none;
	color: var(--main-green);
}

.footer-icons img {
	width: 20px;
	height: 20px;
}

.footer-icons svg {
	fill: var(--dark-grey)
}

.footer-icons svg:hover {
	fill: var(--main-green)
}

.copyright-section {
	font-size: 12px;
	font-weight: 500;
	line-height: 25px;
	letter-spacing: 0.5px;
	color: var(--dark-grey);
}

/*
 * CAROUSEL
 */

 .slider-single {
	position: relative;
}

.slider-single .slick-slide {
	margin: 0;
}

.slider-single .slick-prev {
	position:absolute;
	top:45%;	
	left:-40px;
}
.slider-single .slick-next {
	position:absolute;
	top:45%;	
	right:-40px;
}
.slick-initialized .slick-slide {
	display:flex;
}

.slick-prev:before {
	content: url(../img/cta-previous.svg);
	color: var(--main-green);
	font-size: 30px;
  }
  
  .slick-next:before {
	content: url(../img/cta-next.svg);
	color: var(--main-green);
	font-size: 30px;
  }

  /*
   * SERVICES
   */

.services-title {
	position: relative;
	margin-bottom: 100px;
}

.sevices-about .about-section__block {
	width: 100%;
	text-align: left;
}

.sevices-about .about-section__block span {
	font-size: 25px;
	font-weight: 600;
	line-height: 27px;
	letter-spacing: 0.0025em;
	text-align: left;
	color: var(--main-green);
}

.sevices-about .about-section__block:hover span {
	color: var(--main-violet);
}

.sevices-about__text {
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: 0.5px;
	color: white;
    text-align: left;
}

.about-section__block svg.svg-stroke {
	fill: none!important;
	stroke-width: 2;
	stroke: var(--main-green);
  }
  
  .about-section__block:hover svg.svg-stroke {
	fill: none!important;
	stroke-width: 2;
	stroke: var(--main-violet);
  }

  .accordeon-section {
	margin-bottom: 150px;
  }

  .accordion-button::after {
	background-image: url(../img/plus.png);
  }

  .accordion-button:not(.collapsed)::after{
	background-image: url(../img/minus.png);
  }

  .accordion-item {
    background-color: transparent;
    border: 1px solid var(--main-violet);
}

.accordion-button:not(.collapsed) {
    color: var(--main-violet);
    background-color: transparent;
    box-shadow: none;
	font-weight: bold;
}

.accordion-item {
	margin-bottom: 20px;
	border: 1px solid var(--main-violet);
	border-radius: 10px;
}

.accordion-button {
    color: var(--main-violet);
    background-color: transparent;
    font-weight: bold;
    padding: 0px 20px;
    line-height: clamp(2em, 2vw, 3em); /* Adjust these values as needed */
}

.accordion-item:not(:first-of-type) {
	border-top: 1px solid var(--main-violet);
	border-radius: 10px;
}

.accordion-item:first-of-type {
	border-radius: 10px;
}

.numbers-section {
	margin-bottom: 150px;
	background-color: var(--grey-color);
	padding: 100px 0;
}
.insights-title,
.archive-section {
	margin-bottom: 100px;
}

.archive-item {
	height: 420px;
	width: 100%;
	position: relative;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 110%;
	-webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
.archive-item:hover {
	background-size: 125%;
}

.archive-item__meta {
	position: absolute;
	bottom: 20px;
	left: 20px;
	width: 90%;
	z-index: 909;
}

.archive-item__meta h4 {
	font-size: 21px;
	font-weight: 600;
	line-height: 31px;
	letter-spacing: 0.5px;
	text-align: left;
	color: white;
}

.archive-item__meta span {
	font-size: 13px;
	font-weight: 600;
	line-height: 31px;
	letter-spacing: 0.25px;
	text-align: left;
	color: var(--main-green);
}

.archive-item:before {
	content: "";
	background-color: #000000;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	opacity: .5;
	z-index: 1;
}

.archive-item:hover:before {
	opacity: .75;
}

.pagination-pages img {
	width: 40px;
	height: 40px;
}

/*
 * SINGLE
 */

 .single-title {
	margin-bottom: 80px;
 }

.single-title h1 {
	font-size: 50px;
	font-weight: 700;
	line-height: 65px;
	letter-spacing: 0em;
	text-align: left;
}

.single-date {
	color:var(--main-green);
	font-size: 13px;
	font-weight: 600;
	line-height: 31px;
	letter-spacing: 0.25px;
	text-align: left;
}

.article-section p,
.privacy-text p {
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: 0.5px;
	text-align: left;
}

.article-section ul {
	padding-left: 10px;
	margin-bottom: 100px;
}

.privacy-text ul {
	margin-bottom: 40px;
}

.article-section ul li,
.privacy-text ul li {
	margin-bottom: 20px;
	list-style-type: "■";
	padding-left: 10px;
}
.article-section ul li::marker,
.privacy-text ul li::marker {
	color: var(--main-green);
}

.contacts-title {
	margin-bottom: 50px;
}

.contacts-text {
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: 0.5px;
	text-align: left;
}

.privacy-title {
	margin-bottom: 30px;
}

.privacy-text {
	margin-bottom: 150px;
}

.sm-hidden {
	display: none;
}

/*
 * MOBILE AND MEDIA
 */

@media (min-width: 992px) {
	.slick-dots {
		display: none!important;
	}
	.about-section__block {
		width: 240px;
		height: auto;
        min-height: 260px;
	}
    
    h1#title {
    height: 260px;
    width: 1100px;
    font-size:110px;
    line-height: 130px;}
}



/* Media Queries */
@media (max-width: 1200px) {
    h1 { font-size: 100px; line-height: 100px;}
    h2 { font-size: 60px; line-height: 60px;}
    h3 { font-size: 40px; line-height: 40px;}
}

@media (max-width: 992px) {

    h1 { font-size: 90px; }
    h2 { font-size: 50px; }
    h3 { font-size: 30px; }

    .main-button, .main-button-outline {
        padding: 10px 30px;
        font-size: 12px;
    }

    body::before, body::after {
        background-size: cover;
    }
    
	.overlay .closebtn {
		position: absolute;
		top: 0;
		right: 10px!important;
		left: 90%;
		font-size: 60px;
	  }
	
	.overlay-logotype {
		transform: none;
		position: absolute;
		top: 10px;
		left: 10px;
	}

	.overlay a {
		font-size: 45px;
		font-weight: 700;
		line-height: 55px;
		letter-spacing: 0em;
		text-align: center;
		padding: 0 0 30px;
		margin: 0;
	}

	a.closebtn {
		padding: 0;
		width: 30px;
		height: 30px;
	}
    
    
}

@media (max-width: 768px) {
    h1 { font-size: 75px; line-height: 75px;}
    h2 { font-size: 40px; line-height: 40px;}
    h3 { font-size: 25px; line-height: 25px;}
    
    .accordeon-section__background {
		position: relative;
		padding-bottom: 100px;
	}

	.accordeon-section__background:after {
		position: absolute;
		content: "";
		background-image: url(../img/service-line-description.svg);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: top center;
		top: 0;
		right: 5%;
		left: 5%;
		width: 90%;
		height: 100%;
	}

	.service-background:after {
		position: absolute;
		content: "";
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: top center;
		top: 170px;
		right: 5%;
		left: 5%;
		width: 90%;
		height: 75%;
	}

	.insights-title__background {
		position: relative;
	}

	.insights-title__background:after {
		position: absolute;
		content: "";
		/*background-image: url(../img/service-line-description.svg);*/
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: top center;
		top: 130px;
		right: 5%;
		left: 5%;
		width: 90%;
		height: 75%;
	}

	.contact-section__background {
		position: relative;
	}

	.contact-section__background:after {
		position: absolute;
		content: "";
		background-image: url(../img/service-line-description.svg);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: top center;
		top: 0;
		right: 5%;
		left: 5%;
		width: 90%;
		height: 120%;
	}

	.privacy-text__background {
		position: relative;
		padding: 50px 50px 50px 0;
	}

	.privacy-text__background:after {
		position: absolute;
		content: "";
		background-image: url(../img/service-line-description.svg);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: top center;
		top: 0;
		right: 0;
		left: 0;
		width: 100%;
		height: 110%;
	}

	.partners-carousel {
		position: relative;
		padding: 100px 0;
	}
	.partners-carousel:before {
		position: absolute;
		content: "";
		background-image: url(../img/service-line-description.svg);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: top center;
		top: 50px;
		right: 8%;
		left: 8%;
		width: 84%;
		height: 84%;
	}

	.sm-hidden {
		display: block;
	}

	.services-title {
		margin-bottom: 50px;
	}

	.numbers-section h3 {
		font-size: 45px;
		font-weight: 700;
		line-height: 50px;
		letter-spacing: -0.25px;
		text-align: left;
	}

	.numbers-section {
		margin-bottom: 20px;
	}

	.privacy-text {
		margin-bottom: 0;
	}

        
    .footer-menu a,
	.footer-menu a.grey-link {
		display: block;
		width: 100%;
		margin-bottom: 30px;
	}
    
    
    .carousel-block, .partners-section, .about-section__block {
        padding: 40px 0;
    }
    
    	.accordeon-section__background {
		position: relative;
		padding-bottom: 100px;
	}

	.accordeon-section__background:after {
		position: absolute;
		content: "";
		background-image: url(../img/service-line-description.svg);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: top center;
		top: 0;
		right: 5%;
		left: 5%;
		width: 90%;
		height: 100%;
	}

	.service-background:after {
		position: absolute;
		content: "";
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: top center;
		top: 170px;
		right: 5%;
		left: 5%;
		width: 90%;
		height: 75%;
	}

	.insights-title__background {
		position: relative;
	}

	.insights-title__background:after {
		position: absolute;
		content: "";
		/*background-image: url(../img/service-line-description.svg);*/
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: top center;
		top: 130px;
		right: 5%;
		left: 5%;
		width: 90%;
		height: 75%;
	}

	.contact-section__background {
		position: relative;
	}

	.contact-section__background:after {
		position: absolute;
		content: "";
		background-image: url(../img/service-line-description.svg);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: top center;
		top: 0;
		right: 5%;
		left: 5%;
		width: 90%;
		height: 120%;
	}

	.privacy-text__background {
		position: relative;
		padding: 50px 50px 50px 0;
	}

	.privacy-text__background:after {
		position: absolute;
		content: "";
		background-image: url(../img/service-line-description.svg);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: top center;
		top: 0;
		right: 0;
		left: 0;
		width: 100%;
		height: 110%;
	}

	.partners-carousel {
		position: relative;
		padding: 100px 0;
	}
	.partners-carousel:before {
		position: absolute;
		content: "";
		background-image: url(../img/service-line-description.svg);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: top center;
		top: 50px;
		right: 8%;
		left: 8%;
		width: 84%;
		height: 84%;
	}

	.sm-hidden {
		display: block;
	}

	.services-title {
		margin-bottom: 50px;
	}

	.numbers-section h3 {
		font-size: 45px;
		font-weight: 700;
		line-height: 50px;
		letter-spacing: -0.25px;
		text-align: left;
	}

	.numbers-section {
		margin-bottom: 20px;
	}

	.privacy-text {
		margin-bottom: 0;
	}
}

@media (max-width: 576px) {
    h1 { font-size: 55px; line-height: 55px;}
    h2 { font-size: 30px; line-height: 30px;}
    h3 { font-size: 20px; line-height: 20px;}

    .main-button, .main-button-outline {
        padding: 8px 20px;
        font-size: 11px;
    }
}

/* Desktop and larger tablets */
@media (min-width: 992px) {
    .about-section__block {
        flex-direction: row;
        text-align: left;
    }

    .icon-container {
        margin-right: 1rem; /* Adds right margin to the icon */
    }

    .service-description {
        align-self: center; /* This vertically centers the text next to the icon */
    }
}

/* Mobile and smaller tablets */
@media (max-width: 991.98px) {
    
    body::before {
        background: url(../img/bg-top.svg) no-repeat right top / cover, url(stylev1.css) no-repeat right 70px top 520px / auto;
    }
    body.casestudy-body::before {
        background-image: url(../img/bg-top.svg);
    }
    
    .top-image {
        display: none;
    }
    
    .right-line::before {
        background: none!important;
    }
    
    .bottom-image {
        position: absolute;
        left: 10%;
    }
    .about-section__block {
        flex-direction: column;
        text-align: center;
    }

    .icon-container {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-bottom: 1rem; /* Space between icon and text */
    }

    .service-description {
        /* Ensures the text is not too wide on mobile */
        width: 100%;
    }
}

/* No changes needed for desktop resolutions as default is flex-row */
/* Container of the top image should be relative */
.top-image-container {
  position: relative;
  height: 130px; /* Adjust height as necessary */
  margin-top: -30px; /* This pulls the container up, overlapping the section above if needed */
}

/* Adjust the top image positioning */
.top-image {
  position: absolute;
  right: 10%; /* Positions the right edge of the image at 90% from the left */
  top: 0; /* Align with the start of the line */
  height: auto; /* Keeps the aspect ratio of the image */
  z-index: 1; /* Ensure it is above the line */
  margin-right: -1px;
}

/* Container for the services with the dynamic line */
.right-line {
  position: relative;
  overflow: hidden; /* Hides parts of the pseudo-elements that are outside the container */
}

/* The dynamic line as a pseudo-element */
.right-line::before {
  content: '';
  position: absolute;
  left: 90%; /* Horizontal position of the line */
  top: 0;
  bottom: 0; /* Stretches the line from top to bottom of the container */
  width: 1.3px; /* Width of the line */
  background: linear-gradient(to bottom, #B200BE 0%, #00BEB2 100%); /* Gradient colors */
  transform: translateX(-50%); /* Centers the line */
  z-index: 0; /* Behind content, above the background */
}

/* Styles for the right-line-top were not modified since they were not part of the overlapping issue */

/* Container of the bottom image should be relative */
.bottom-image-container {
  position: relative;
  min-height: 125px;
  margin-right: -1px;
}


.bottom-image {
    position: absolute;
    right: 10%;
    bottom: 0;
    z-index: 0;
    width: 90%;
    object-fit: cover;
}


/* New styles for #summary to make it overlap */
#summary {
  position: relative; 
  top: 50%; /* Vertical alignment */
  left: 0;
  width: 100%;
  transform: translateY(-50%); /* Centers vertically */
  z-index: 1; /* Higher than the .top-image-container to overlap */
  padding: 0 15px; /* Padding inside the summary */
  box-sizing: border-box; /* Includes padding in the width calculation */
}

/* Adjust the z-index of the container to ensure it's above the line */
.right-line > .container {
  position: relative;
  z-index: 1;
}