.behindBackground{
    position: absolute;
    content: "";
    width: 100%;
    height: 1000px;
    border-radius: 30%;
    z-index: -1;
    filter: blur(20px);
	max-width: 2000px;
}
.behindBackground-top{
	right:30%;
    top:10%;
	background: linear-gradient(180deg, rgba(255, 61, 61, 0.06), rgba(61, 103, 255, 0.045));
}

.behindBackground-bottom{
	 right: 0;
    bottom: 10%;
	background: linear-gradient(180deg, rgba(255, 61, 61, 0.06), rgba(61, 103, 255, 0.045));
} 


/*********************
START: PUBLIC
*********************/
.main--aboutUs .banner{
	background-image: url(../img/icons/bg-hero-aboutus.svg);
    background-repeat: no-repeat;
	position: relative;
    width: 100%;
    height: 100%;
    background-size: cover;
}

.about {
    border-bottom: 1px solid var(--bordered);
}

.about--title {
    font-size: var(--txt40);
    margin-block-end: 2rem;
    color: var(--text-color2);
    text-transform: capitalize;
}

.about--text {
    font-size: var(--txt16);
    color: var(--text-color2);
	line-height: var(--line-height150)
}

.about--content {
    padding-inline: 107px;
	padding-block: 88px;
/*     border-left: 1px solid var(--bordered);
    border-right: 1px solid var(--bordered); */
}

.main--aboutUs {
    position: relative;
    background-color: rgba(246, 245, 247, 0.5);
}

section {
    position: relative;
}
/*********************
END: PUBLIC
*********************/
.aboutUs--pack{
	border-left: 1px solid var(--bordered);
	border-right: 1px solid var(--bordered);
}
/*********************
START: STORY
*********************/
.story--content {
/*     padding-block: var(--gap); */
    position: relative;
    z-index: 5;
}

.story--text {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.story--text__left,
.story--text__right {
    width: 47%;
}

/*********************
END: STORY
*********************/

/*********************
START: MISSION
*********************/
.services--content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.services--content>h5,
.services--content>ul {
    width: 47%;
}

.services--content>h3 {
    text-align: center;
}

.services--content>ul li {
    width: 90%;
    padding: 2.5rem 1.5rem;
    border-radius: var(--border-radius8);
    background-color: rgba(255, 255, 255,1);
    transition: all 0.3s;
}

.services--content>ul li:nth-child(1) {
    animation-delay: 0s;
}

.services--content>ul li:nth-child(2) {
    animation-delay: 0.3s;
}

.services--content>ul li:nth-child(3) {
    animation-delay: 0.6s;
}

.services--content>ul li:nth-child(4) {
    animation-delay: 0.9s;
}

.services--content>ul li:not(:last-child) {
    margin-block-end: 2.9rem;
}

.services--content>ul li:hover {
    background-color: var(--text-color2);
}

.services--content>ul li>h4 {
    font-size: var(--txt25);
    color: var(--text-color2);
    text-transform: uppercase;
    line-height: var(--line-height150);
}

.services--content>ul li>h4>span {
    font-size: var(--txt25);
    color: var(--primary-color) !important;
}

.services--content>ul li:hover>h4 {
    color: var(--text-color);
}

/*********************
END: MISSION
*********************/

/*********************
START: TECHNOLOGIES
*********************/
.technologies--content {
	padding-inline:0 !important;
    padding-block: var(--gap);
}

.technologies--content .about--title{
	text-align: center;
}

.technologies--content ul{
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.technologies--content ul li{
	background-color: rgba(255, 255, 255, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
/* 	padding: 40px 47px; */
	padding: 1.5rem;
	min-height: 176px;
	border-radius: var(--border-radius8);
	transition: all 0.5s;
	margin: 8px;
	flex-basis: calc(16.666% - 16px);
}

.technologies--content ul li:hover{
	background-color: rgba(255, 255, 255, 1);
}

.technologies--content ul li span{
	color: var(--text-color2);
	font-size: var(--txt16);
	padding-inline-start: 1.5rem;
	display: none;
}

.technologies--content ul li > img{
    width: 100%;
    aspect-ratio: 2.5/1;
}

.technologies--content ul li > img.django{
	aspect-ratio: 4/1 !important;
}

/*********************
END: TECHNOLOGIES
*********************/


/*********************
START: CONTACT
*********************/
.contact--content {
	padding-block: var(--gap);
    padding-block-start: var(--gap);
    padding-block-end: 200px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.contact--form,
.contact--rate {
    width: 47%;
}

.contact--form>.about--title {
    width: 60%;
	margin-block-end: 4rem;
}

.contact--form>form div {
    display: flex;
    flex-direction: column;
    color: var(--text-color2);
    margin-bottom: 1rem;
}

.contact--rate {
    color: var(--text-color2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
	margin-top: 2rem;
}

.contact--rate__item {
    width: auto;
    margin-block-end: 1rem;
	border: 1px solid var(--text-color);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: var(--border-radius16);
    background-color: rgba(255, 255, 255, 0.6);
}

.contact--rate__item:first-child {
    margin-inline-end: 1rem;
    margin-block-start: -1rem;
}

.contact--rate__item>h2 {
    font-size: var(--txt30);
    color: var(--primary-color);
    margin-block-end: 1rem;
}

.contact--rate__item>p {
    color: var(--text-color2);
    font-size: var(--txt25);
	line-height: var(--line-height150)
}

/*********************
END: CONTACT
*********************/


/*********************
START: MEDIA
*********************/
@media screen and (min-width: 2560px) {
    .contact--rate__item>p,
    .about--text,
    .approach--text>p{
        font-size: var(--txt30);
    }
	
	.contact--rate__item:nth-child(2){
		margin-inline-end: 2rem;
	}
	
	.technologies--content ul li{
		min-height: 300px;
	}
}

@media screen and (min-width: 1920px) and (max-width: 2559px) {
	.contact--rate__item>p,
    .about--text,
    .approach--text>p{
        font-size: var(--txt25);
    }
		
	.contact--rate__item:nth-child(2){
		margin-inline-end: 2rem;
	}
	
	.technologies--content ul li{
		min-height: 250px;
	}
}

@media screen and (min-width: 1440px) and (max-width: 1919px) {
    .about--text,
    .approach--text>p{
        font-size: var(--txt20);
    }
	
}

@media screen and (max-width: 1320px) {
/* 	.technologies--content ul li > img {
		aspect-ratio: 1.5/1;
	} */
}

@media screen and (max-width: 1200px) {
	.about--content{
		padding-inline: var(--gap);
	}
    .services--content>ul li {
        width: 100%;
    }

    .services--content>h5 {
        width: 30%;
    }

    .services--content>ul {
        width: 60%;
    }

	

	.technologies--content ul li > img {
    aspect-ratio: 2/1 ;
	}
}

@media screen and (max-width: 992px) {
	.about--content {
		padding-inline: var(--space);
	}
	
    .contact--rate__item {
        padding: 1rem;
    }

    .contact--rate {
        width: 51%;
    }
	
	.technologies--content ul li{
		flex-basis: calc(20% - 16px);
	}

}


@media screen and (max-width: 768px) {
	.about--content {
		padding-inline: 20px;
	}
	
    .services--content {
        flex-direction: column;
    }

    .services--content>h5,
    .services--content>ul {
        width: 100%;
    }

    .services--content>ul li>h4,
    .services--content>ul li>h4>span {
        font-size: var(--txt25);
    }
	
	.services--content>ul li:not(:last-child) {
    	margin-block-end: 1em;
	}
	
	.technologies--content ul li {
		flex-basis: calc(25% - 16px);
	}
    .contact--content{
        flex-direction: column-reverse;
    }

    .contact--form{
        width: 100%;
    }

    .contact--rate{
        width: 80%;
        margin-inline: auto;
        margin-block-end: var(--gap2);
    }

    .contact--rate__item:last-child{
        width: 97%;
    }

    .contact--rate__item:first-child {
        margin-inline-end: 1rem;
        margin-block-start: 0;
    }

    .contact--rate__item:first-child, 
    .contact--rate__item:nth-child(2){
        width: 47%;
    }

}

@media screen and (max-width: 576px) {
    .story--text {
        flex-direction: column;
    }

    .story--text__left,
    .story--text__right,
    .approach--text,
    .approach--text>p,
    .vision--text,
    .vision--text>p {
        width: 100%;
    }

    .approach--text,
    .vision--text {
        border-right: none;
    }

    .services--content>ul li>h4,
    .services--content>ul li>h4>span {
        font-size: var(--txt20);
    }

	.technologies--content ul li {
		flex-basis: calc(33.33% - 16px);
	}

    .contact--rate {
        width: 100%;
    }
}

@media screen and (max-width: 425px) {
  .contact--rate__item {
        min-height: 140px;
    }

	.technologies--content ul li > img.django,
	.technologies--content ul li > img {
    	aspect-ratio: 1.5/1 !important;
	}
}

@media screen and (max-width: 375px) {
	.technologies--content ul li {
		flex-basis: calc(50% - 16px);
	}
	
	.technologies--content ul li > img.django, 
	.technologies--content ul li > img {
      aspect-ratio: 2/1 !important;
	}
}

/*********************
END: MEDIA
*********************/