/*********************
START: HERO
*********************/
.hero {
    padding-block-start: 150px;
	position: relative;
	margin-block-end: 0;
	padding-block-end: 120px;
}

.hero:before{
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	height: 100%;
	max-width: 240px;
	width: 100%;
	background-color: var(--green-color-light);
    z-index: -1;
}

.hero--content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hero--text {
    width: 55%;
}

.hero--text h1 {
    margin-block-end: 1.5rem;
}

.hero--text span {
    color: var(--green-color-2);
    font-weight: 500;
    line-height: var(--line-height130);
    font-family: var(--font-family-Morabba);
}

.hero--text p {
    margin-block-start: 1.5rem;
    font-weight: 400;
    line-height: var(--line-height150);
    margin-block-end: 2rem;
}

.hero--text .hero--btn{
	display: none;
}

.hero--img {
    width: 40%;
}

.hero--img img {
    width: 100%;
    border-radius: var(--border-radius-20);
}

/*********************
END: HERO
*********************/

/*********************
START: SERVICES
*********************/
.services {
    position: relative;
    padding-block: 120px;
    background-image: url("../img/bg-services.png");
    padding-block-end: 7rem;
}

.services::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(to right, rgba(47, 60, 74, 0.4) 0%, rgba(52, 61, 76, 1) 50%, rgba(47, 60, 74, 0.3) 100%);
}

.services--content {
    position: relative;
}

.services--content ul {
display: flex
;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-block-start: 2.5rem;
    width: 100%;
    margin-inline: auto;
}

.services--content ul li {
    position: relative;
    margin: 16px 0;
        flex-basis: calc(25% - 7px);

}

.services--content ul li .imageIndex {
    width: 100%;
    height: auto;
    aspect-ratio: 400 / 280;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
	border-radius: var(--border-radius-20);
}

.services--content ul li .box {
    width: 100%;
    padding: 2rem;
position: relative;
    border-radius: var(--border-radius-20);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
	transition: background 0.3s ease;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.9) 100%);
}

.services--content ul li .box:hover{
	background: var(--green-color-2);
}

.services--content ul li .box img.icon {
    width: 60px;
    height: 60px;
	transition: all 0.3s ease;
}

.services--content ul li .box h6 {
    margin-block: 0.75rem;
    font-weight: 500;
    line-height: var(--line-height150);
    font-family: var(--font-family-Morabba);
}

.services--content ul li .box:hover h6, 
.services--content ul li .box:hover p{
	transition: all 0.3s ease;
}

.services--content ul li .box:hover h6, 
.services--content ul li .box:hover p{
	color: var(--baseLight-color);
}

.services--content ul li .box>img {
    width: 60px;
    height: 60px;
}

.services--content ul li .box .arrow {
    margin-inline-start: auto;
    margin-block-start: 1.5rem;
    display: flex;
    justify-content: flex-end;
}

.services--content ul li .box .arrow img{
	filter: brightness(0) saturate(100%) invert(66%) sepia(8%) saturate(1805%) hue-rotate(34deg) brightness(98%) contrast(93%);
}

.services--content ul li .box:hover>img, 
.services--content ul li .box:hover .arrow img{
	filter: brightness(0)  invert(1);
}

/*********************
END: SERVICES
*********************/

/*********************
START: ABOUT US
*********************/
/* aboutUs--up */
.aboutUs--up {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.aboutUs--up__img {
    width: 30%;
}

.aboutUs--up__img img {
    width: 100%;
    filter: grayscale(1);
}

.aboutUs--up__text {
    width: 67%;
}

.aboutUs--up__text p{
	line-height: var(--line-height160);
}

/* aboutUs--down */
.aboutUs--down {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-start: 5rem;
}

.aboutUs--down__img {
    width: 58%;
}

.aboutUs--down__img img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 780 / 500;
    border-radius: var(--border-radius-20);
}

.aboutUs--down__text {
    width: 40%;
}

.aboutUs--down__text ul li {
    margin-block-end: 2.5rem;
    display: flex;
    align-items: center;
    column-gap: 1rem;
}

.aboutUs--down__text ul li p {
    font-weight: 500;
    line-height: var(--line-height140);
    font-family: var(--font-family-Morabba);
}

.aboutUs--down__text ul li img {
    width: 40px;
    height: 40px;
}

/*********************
END: ABOUT US
*********************/


/*********************
START: SET CONTRACT
*********************/


.setContract .swiper {
    width: 100%;
    height: auto;
    margin-block: 2.5rem;
}

.setContract .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    border-radius: var(--border-radius-20);
}

.setContract .swiper-slide img {
    display: block;
    width: 95%;
    height: auto;
    aspect-ratio: 1192 / 500;
    border-radius: var(--border-radius-20);
    object-fit: cover;
}

ul.setContract--items {
    display: flex;
    justify-content: space-between;
}

ul.setContract--items li {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 33.33%;
    position: relative;
}

ul.setContract--items li p {
    margin-block-end: 1rem;
    font-family: var(--font-family-Morabba);
}

ul.setContract--items li>div {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #94A2B8;
    position: relative;
}

ul.setContract--items li::before {
    position: absolute;
    content: "";
    height: 1px;
    bottom: 10px;
    background-color: #94A2B8;
}

ul.setContract--items li:nth-child(1)::before {
    width: 50%;
    left: 0;
}

ul.setContract--items li:nth-child(3)::before {
    width: 50%;
    right: 0;
}

ul.setContract--items li:nth-child(even)::before {
    width: 100%;
    left: 0;
}

ul.setContract--items li.active div::before {
    position: absolute;
    content: "";
    width: 24px;
    height: 24px;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("../img/icons/checked.svg");
}

.setContract a.btn {
    margin-inline: auto;
    margin-block: 3.75rem;
}

/*********************
END: SET CONTRACT
*********************/

/*********************
START: PLANS
*********************/
.plans {
    padding-block: 7.5rem;
    position: relative;
}

.plans::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url("../img/plans-bg.png");
    filter: grayscale(1);
}

.plans--title {
    position: relative;
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    justify-content: space-between;
    column-gap: 2rem;
    row-gap: 1rem;
    margin-block-end: 2.5rem;
}

.plans--title h4 {
    margin-block-end: 0;
}

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

.plans ul>li {
    padding: 2.5rem;
    margin: 16px;
    flex-basis: calc(33.33% - 32px);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border-radius: var(--border-radius-20);
    box-shadow: -6px 6px 10px 0px rgba(0, 0, 0, 0.3);
    background-color: rgba(62, 70, 81, 0.7);
}

.plans ul>li .type {
    display: flex;
    align-items: center;
    justify-content: space-between;
    row-gap: 0.75rem;
    column-gap: 0.75rem;
}

.plans ul>li .type p {
    font-weight: 400;
    line-height: var(--line-height140);
    font-family: var(--font-family-Morabba);
}

.plans ul>li .title {
    margin-block: 3.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family-Morabba);
}

.plans ul>li .title h5 {
    font-weight: 700;
    line-height: var(--line-height130);
    margin-block-end: 0.75rem;
    -moz-font-feature-settings: "ss01";
    -webkit-font-feature-settings: "ss01";
    font-feature-settings: "ss01";
}

.plans ul>li ol>li {
    position: relative;
    padding-inline-start: 1.5rem;
	color: #DFE6E8;
	text-align: justify;
}

.plans ul>li ol>li:not(:last-child) {
    margin-block-end: 1rem;
}

.plans ul>li ol>li::before {
    position: absolute;
    content: "";
    width: 12px;
    height: 16px;
    top: 5px;
    right: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("../img/icons/vector-supTitle-green.svg");
}

/*********************
END: PLANS
*********************/


/*********************
START: BLOGS
*********************/
.blogs--list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 1.5rem;
    column-gap: 1.5rem;
    margin-block-start: 2.5rem;
}

.blogs--item {
    display: flex;
    background-color: rgba(237, 245, 215, 0.1);
    border-radius: var(--border-radius-20);
    border: 1px solid rgba(148, 162, 184, 0.4);
    box-shadow: -6px 6px 10px 0px rgba(0, 0, 0, 0.3);
}

.blogs--item img.imageIndex {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--border-radius-20);
}


/* title */
.blogs--item .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 0.5rem;
    column-gap: 0.5rem;
}

.blogs--item .tag {
    padding: 0.3rem 0.75rem;
    border: 1px solid rgba(148, 162, 184, 0.6);
    color: var(--text-color-1);
    border-radius: var(--border-radius-60);
	display: flex;
	align-items: center;
    justify-content: center;
}

.blogs--item .tag >a{
	font-family: var(--font-family-Morabba);
	font-size: var(--text-xs);
    font-weight: 300;
}

.blogs--item .calendar {
    display: flex;
    column-gap: 0.45rem;
    align-items: center;
    color: var(--text-color-1);
}

.blogs--item h3 {
    font-weight: 500;
    font-family: var(--font-family-Morabba);
}

.blogs--item p {
    text-align: justify;
}

.blogs--item .info {
    border-top: 1px solid rgba(148, 162, 184, 0.4);
    border-bottom: 1px solid rgba(148, 162, 184, 0.4);
}

.blogs--item .info ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.blogs--item .info ol li {
    column-gap: 0.25rem;
    display: flex;
    align-items: center;
    color: var(--text-color-1);
}

.blogs--item .btn--item {
    color: var(--green-color-3);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    column-gap: 0.5rem;
}


/* div.blogs--item */
div.blogs--item {
    padding: 1.5rem;
    flex-direction: column;
}

li.blogs--item .blogs--img img.imageIndex {
    aspect-ratio: 610 / 440;
}

div.blogs--item .title {
    margin-block: 1rem;
}

div.blogs--item h3,
div.blogs--item p {
    color: var(--text-color-2);
    text-align: justify;
}

div.blogs--item p {
    margin-block: 0.75rem;
}

div.blogs--item .info {
    padding-block: 0.75rem;
    margin-block-end: 1.5rem;
}

div.blogs--item .info ol {
    column-gap: 1rem;
    row-gap: 1rem;
}

div.blogs--item .info ol li {
    font-size: var(--text-sm);
}

/* li.blogs--item */
li.blogs--item {
    padding: 1rem;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

li.blogs--item:not(:last-child) {
    margin-block-end: 1.5rem;
}

li.blogs--item .blogs--img {
    width: 30%;
}

li.blogs--item .blogs--img img.imageIndex {
    aspect-ratio: 220 / 205;
}

li.blogs--item .blogs--text {
    width: 68%;
}

li.blogs--item .title {
    margin-block-end: 1rem;
}

li.blogs--item h3,
li.blogs--item p {
    color: var(--baseDark-color);
}

li.blogs--item p {
    font-size: var(--text-xs);
    margin-block: 0.75rem;
}

li.blogs--item .info {
    padding-block: 0.75rem;
    margin-block-end: 0.75rem;
}

li.blogs--item .info ol {
    column-gap: 0.5rem;
    row-gap: 0.5rem;
}

li.blogs--item .info ol li {
    font-size: var(--text-xs);
}

li.blogs--item .info ol li img {
    width: 12px;
    height: 12px;
}

li.blogs--item .btn--item {
    font-size: var(--text-sm);
}

li.blogs--item .btn--item img {
    width: 12px;
}


.blogs a.btn--green__fill{
	margin-inline:auto;
	margin-block-start: 3.75rem;
}
/*********************
END: BLOGS
*********************/


/*********************
START: MEDIA
*********************/
@media screen and (min-width: 1440px) {
    .hero--text span {
        font-size: var(--text-3xl);
    }

    .services--content ul li .box h6,
    .aboutUs--down__text ul li p,
    .plans ul>li .title h5 {
        font-size: var(--text-3xl);
    }

    .plans ul>li .type p {
        font-size: var(--text-4xl);
    }

    .plans ul>li .title p {
        font-size: var(--text-2xl);
    }

    div.blogs--item h3 {
        font-size: var(--text-2xl);
    }

    div.blogs--item p {
        font-size: var(--text-lg);
    }

    li.blogs--item h3 {
        font-size: var(--text-lg);
    }
}

@media screen and (min-width: 1320px) and (max-width: 1439px) {
    .hero--text span {
        font-size: var(--text-3xl);
    }

    .services--content ul li .box h6,
    .aboutUs--down__text ul li p,
    .plans ul>li .title h5 {
        font-size: var(--text-2xl);
    }

    .plans ul>li .type p {
        font-size: var(--text-3xl);
    }

    .plans ul>li .title p {
        font-size: var(--text-xl);
    }

    div.blogs--item h3 {
        font-size: var(--text-xl);
    }

    li.blogs--item h3 {
        font-size: var(--text-base);
    }
}

@media screen and (max-width: 1319px) {
    .hero--text span {
        font-size: var(--text-3xl);
    }

    .services--content ul li .box h6,
    .aboutUs--down__text ul li p,
    .plans ul>li .title h5 {
        font-size: var(--text-xl);
    }

    .plans ul>li .type p {
        font-size: var(--text-2xl);
    }

    .plans ul>li .title p {
        font-size: var(--text-xl);
    }

    div.blogs--item h3 {
        font-size: var(--text-lg);
    }

    li.blogs--item .info ol li {
        font-size: 10px;
    }

    .blogs--item h3 {
        font-size: var(--text-base);
    }

    div.blogs--item .info ol li {
        font-size: var(--text-xs);
    }

    div.blogs--item .info ol {
        column-gap: 0.5rem;
        row-gap: 0.5rem;
    }
}

@media screen and (max-width: 1200px) {
	.hero {
		padding-block-end: 100px;
	}
	
    .hero--text span {
        font-size: var(--text-2xl);
    }

    .hero--text p,
    .services--content ul li .box p {
        font-size: var(--text-lg);
    }
	
	.services--content ul{
		width: 90%;
	}

    .services--content ul li .imageIndex {
        top: 50px;
    }

    .services--content ul li .box h6,
    .aboutUs--down__text ul li p {
        font-size: var(--text-lg);
    }

    .services--content ul li .box {
        padding: 1rem;
    }

    .plans ul>li {
        padding: 2rem;
        margin: 12px;
        flex-basis: calc(33.33% - 24px);
    }

    .plans ul>li .title {
        margin-block: 3rem;
    }
}

@media screen and (max-width: 992px) {
	.hero{
		padding-block-start: 130px;
		padding-block-end: 80px;
	}
	
    .hero--text span {
        font-size: var(--text-xl);
    }

	.services--content ul{
		width: 100%;
	}
	
    .services--content ul li .box {
        width: 100%;
    }

    .services--content ul li .box>img {
        width: 50px;
        height: 50px;
    }

    .aboutUs--down__text ul li {
        margin-block-end: 1.5rem;
    }

    .aboutUs--down__text ul li img {
        width: 35px;
        height: 35px;
    }

    .aboutUs--down__img,
    .aboutUs--down__text {
        width: 48%;
    }

    .plans ul>li {
        padding: 2rem 1rem 3rem 1rem;
        margin: 8px;
        flex-basis: calc(33.33% - 16px);
    }

    .plans ul>li .title {
        margin-block: 2rem;
    }

    .blogs--list {
        grid-template-columns: repeat(1, 1fr)
    }

    div.blogs--item {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 1rem;
    }

    div.blogs--item .blogs--img {
        width: 30%;
    }
	
	div.blogs--item .title{
		margin-block: 0 0.75rem;
	}

    div.blogs--item .blogs--img img.imageIndex {
        aspect-ratio: 220 / 205;
    }

    div.blogs--item .blogs--text {
        width: 68%;
    }

    div.blogs--item .info ol li {
        font-size: 10px;
    }

    li.blogs--item p,
    div.blogs--item p {
        font-size: var(--text-base);
    }

    div.blogs--item .info ol li img {
        width: 12px;
        height: 12px;
    }

    li.blogs--item h3,
    div.blogs--item h3 {
        font-weight: 700;
    }

}

@media screen and (max-width: 768px) {
	.hero{
		padding-block-start: 100px;
	}
	
	.hero:before{
		content: unset;
	}
	
    .hero--content {
        flex-direction: column;
    }

    .hero--img {
        width: 60%;
    }

    .hero--text {
        width: 100%;
        margin-block-end: 2rem;
    }

    .services--content ul li {
		margin: 12px;
    	flex-basis: calc(50% - 24px);
    }
	
	 .services--content ul li .box p {
        font-size: var(--text-base);
    }

    .services--content ul li .box>img {
        width: 50px;
        height: 50px;
    }

    .aboutUs--up,
    .aboutUs--down {
        flex-direction: column;
    }

    .aboutUs--up__text,
    .aboutUs--down__text {
        width: 100%;
        margin-block-start: 2rem;
    }

    .aboutUs--up__img,
    .aboutUs--down__img {
        width: 60%;
    }

    .aboutUs--down {
        margin-block-start: 2rem;
    }

    ul.setContract--items {
        flex-direction: column;
    }

    ul.setContract--items li {
        width: 100%;
        column-gap: 0.5rem;
        justify-content: center;
        flex-direction: row-reverse;
        margin-block-end: 1.5rem;
    }

    ul.setContract--items li p {
        margin-block-end: 0;
    }

    ul.setContract--items li::before {
        content: unset;
    }
	
	.setContract .swiper-slide img{
		aspect-ratio: 4 / 3;
	}

    .plans ul {
        flex-wrap: wrap;
    }

    .plans ul>li {
        flex-basis: calc(50% - 16px);
    }

    li.blogs--item,
    div.blogs--item {
        flex-direction: column;
    }

    li.blogs--item .blogs--text,
    div.blogs--item .blogs--text {
        width: 100%;
    }

    li.blogs--item .blogs--img,
    div.blogs--item .blogs--img {
        width: 70%;
        margin-block-end: 1.5rem;
    }
}

@media screen and (max-width: 576px) {
    .hero--img {
        width: 80%;
    }

    .hero--text span {
        font-size: var(--text-lg);
    }
	
	.hero--text .hero--btn{
		display: flex;
		 flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 1rem;
		margin-block-end: 1rem;
	}
	
	.hero--text .btn--white__fill, 
	.hero--text .btn--green__fill{
		 max-width: 300px;
	     width: 100%;
		 margin-inline: auto;
	}

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

    .services--content ul li .box>img {
        width: 40px;
        height: 40px;
    }

    .services--content ul li .box .arrow img {
        width: 30px;
        height: 30px;
    }

    .aboutUs--up__img,
    .aboutUs--down__img {
        width: 70%;
    }

    .plans ul>li {
        flex-basis: calc(100% - 16px);
    }

    li.blogs--item .blogs--img,
    div.blogs--item .blogs--img {
        width: 80%;
    }

    .blogs--item .info ol {
        justify-content: flex-start;
    }
}

@media screen and (max-width: 425px) {
	.hero:before{
		content: unset;
	}
	
    .hero--img {
        width: 90%;
    }
	
	.hero--text .btn--white__fill, 
	.hero--text .btn--green__fill{
		 max-width: 250px;
	}

    .services--content ul li .box h6,
    .aboutUs--down__text ul li p {
        font-size: var(--text-base);
    }

    .aboutUs--up__img,
    .aboutUs--down__img {
        width: 80%;
    }

    li.blogs--item .blogs--img,
    div.blogs--item .blogs--img {
        width: 90%;
    }
}

@media screen and (max-width: 375px) {
	.hero--text .btn--white__fill, 
	.hero--text .btn--green__fill{
		 max-width: unset;
	}
	
    .hero--img,
    .aboutUs--up__img,
    .aboutUs--down__img {
        width: 100%;
    }

    li.blogs--item .blogs--img,
    div.blogs--item .blogs--img {
        width: 100%;
    }

}

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