.services {}

.banner .swiper-slide .containerSlide {
    padding-block: 100px;

}

.services .container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding-block: 53px;
    column-gap: 65px;
    row-gap: 30px;
}

.services .container .cardService {
    padding: 31px 28px;
    display: flex;
    flex-direction: column;
    align-items: start;
    border: 1.12px dashed var(--text-yellow);
    border-radius: 16.57px;
    -webkit-border-radius: 16.57px;
    -moz-border-radius: 16.57px;
    -ms-border-radius: 16.57px;
    -o-border-radius: 16.57px;
    min-width: 370px;
}

.services .container .cardService .titleCard {
    font-size: clamp(22px, 2.4vw, 27.49px);
    font-weight: 400;
    line-height: clamp(26px, 2.4vw, 34.47px);
    color: var(--text-yellow);
    margin-block: 24px 12px;
}

.services .container .cardService .descriptionCard, .services .container .cardService p {
    font-size: clamp(15px, 2.4vw, 17px);
    font-weight: 400;
    line-height: 21.32px;
    color: #FFF;
    margin-bottom: 0;
}

.services .container .cardService .linkCard {
    background-color: var(--main-yellow);
    color: #FFF;
    text-decoration: none;
    width: 106px;
    padding-block: 10px;
    text-align: center;
    font-size: clamp(15px, 2.4vw, 18px);
    font-weight: 400;
    line-height: 22.57px;
    border-radius: 40px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
    transition: .5s all ease;
    -webkit-transition: .5s all ease;
    -moz-transition: .5s all ease;
    -ms-transition: .5s all ease;
    -o-transition: .5s all ease;
    margin-top: 45px;
}

.services .container .cardService .linkCard:hover {
    background-color: var(--hover-yellow);
}

.lineImage {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

@media (max-width:778px) {
    .services .container .cardService {
        align-items: center;
        text-align: center;
    }

    .services .container .cardService .linkCard {
        margin-top: 24px;
    }

    .lineImage {
        margin-top: 0;
    }
}

/* Tenders Section */

.tenders {}

.tenders .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1466px;
}

.tenders .container h2 {
    font-size: clamp(24px, 4.4vw, 40px);
    font-weight: 400;
    line-height: clamp(32px, 4.4vw, 50.16px);
    color: var(--text-yellow);
}

.tenders .container a {
    background-color: var(--main-yellow);
    color: #FFF;
    border-radius: 40px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
    width: 164px;
    text-decoration: none;
    text-align: center;
    padding-block: 10px;
    font-size: clamp(16px, 2.4vw, 18px);
    font-weight: 400;
    line-height: 22.57px;
    transition: .5s all ease;
    -webkit-transition: .5s all ease;
    -moz-transition: .5s all ease;
    -ms-transition: .5s all ease;
    -o-transition: .5s all ease;
}

.tenders .container a:hover {
    background-color: var(--hover-yellow);
}


.swiperTenders {}

.swiperTenders {}

.swiperTenders .swiper-wrapper {
    height: 250px;
    display: flex;
    overflow-y: visible;
    align-items: center;
}

.swiperTenders .swiper-slide {
    flex: 1;
    transition: .5s width ease, .5s opacity ease, .5s scale ease;
    -webkit-transition: .5s width ease, .5s opacity ease, .5s scale ease;
    -moz-transition: .5s width ease, .5s opacity ease, .5s scale ease;
    -ms-transition: .5s width ease, .5s opacity ease, .5s scale ease;
    -o-transition: .5s width ease, .5s opacity ease, .5s scale ease;
    display: flex;
    align-items: center;
    padding-inline: 10px;
}

.swiperTenders .swiper-slide:not(.swiper-slide-active) {
    opacity: .5;
    scale: .9;
}

.swiperTenders .swiper-slide.swiper-slide-active {}

.swiperTenders .swiper-slide .containerSlide {
    background: #FFFFFF1A;
    border: 2px dashed var(--text-yellow);
    padding: 25px 21px 25px 26px;
    border-radius: 16.57px;
    -webkit-border-radius: 16.57px;
    -moz-border-radius: 16.57px;
    -ms-border-radius: 16.57px;
    -o-border-radius: 16.57px;
    width: 527px;
}

.swiperTenders .swiper-slide.swiper-slide-active .containerSlide {
    width: 720.69px;
    max-width: 100%;
}

.swiperTenders .swiper-slide .dateTender {
    font-size: clamp(15px, 2.4vw, 16.52px);
    font-weight: 400;
    line-height: 22.4px;
    color: var(--main-yellow);
    display: none;
}

.swiperTenders .swiper-slide.swiper-slide-active .dateTender {
    display: block;
}

.swiperTenders .swiper-slide .descriptionTender {
    font-size: clamp(16px, 2.4vw, 16.52px);
    font-weight: 400;
    line-height: 22.4px;
    color: #FFF;
    margin-bottom: 19px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.swiperTenders .swiper-slide .containerButtons {
    display: flex;
    align-items: center;
    gap: 16px;
}

.swiperTenders .swiper-slide .containerButtons .purchaseBTN,
.swiperTenders .swiper-slide .containerButtons .viewDetails {
    color: #FFF;
    border-radius: 40.14px;
    -webkit-border-radius: 40.14px;
    -moz-border-radius: 40.14px;
    -ms-border-radius: 40.14px;
    -o-border-radius: 40.14px;
    width: 158.54px;
    outline: none;
    border: none;
    padding-block: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: .5s all ease;
    -webkit-transition: .5s all ease;
    -moz-transition: .5s all ease;
    -ms-transition: .5s all ease;
    -o-transition: .5s all ease;
}

.swiperTenders .swiper-slide .containerButtons .purchaseBTN {
    background-color: var(--main-yellow);

}

.swiperTenders .swiper-slide .containerButtons .viewDetails {
    background-color: var(--main-blue);
}

.swiperTenders .swiper-slide .containerButtons .purchaseBTN:hover {
    background-color: var(--hover-yellow);
}

.swiperTenders .swiper-slide .containerButtons .viewDetails:hover {
    background-color: #2f4f88;
}

.tenders .containerNavigation {
    justify-content: center;
    margin-bottom: 62px;
}

.tenders .lineImage {
    margin-bottom: 62px;
}

/* Contact Us  */

.contactUs {}

.contactUs .container {
    display: flex;
    gap: 20px;
    padding-block: 57px;
}


.contactUs .container .reachUs {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
}

.contactUs .container h2 {
    font-size: clamp(20px, 4.4vw, 30px);
    font-weight: 400;
    line-height: clamp(28px, 4.4vw, 37.62px);
    color: var(--text-yellow);
}

.contactUs .container p {
    font-size: clamp(16px, 2.4vw, 22px);
    font-weight: 400;
    line-height: clamp(24px, 2.4vw, 35.76px);
    color: #CBCBCB;
    margin-bottom: 57px;
}

.contactUs .container .reachUs ul {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 52px;
    margin-bottom: 0;
    flex: 1;
    justify-content: flex-end;
}

.contactUs .container .reachUs ul a,
.contactUs .container .reachUs ul div,
.contactUs .container .reachUs ul span {
    font-family: Marcellus;
    font-size: clamp(16px, 2.4vw, 22px);
    font-weight: 400;
    line-height: clamp(24px, 2.4vw, 35.76px);
    text-align: left;
    color: #CBCBCB;
    text-decoration: none;
    transition: .5s all ease;
    -webkit-transition: .5s all ease;
    -moz-transition: .5s all ease;
    -ms-transition: .5s all ease;
    -o-transition: .5s all ease;
    .emailIcon{
        height:50px;
        width:50px;
        background:var(--main-yellow);
        border-radius:50%;
        overflow:visible;
        padding:8px
    }
}

.contactUs .container .reachUs ul li:has(.locationDetails),
.contactUs .container .reachUs ul a {
    display: flex;
    align-items: center;
    width: fit-content;
    gap: 17px;
}

.contactUs .container .reachUs ul a:hover span {
    color: var(--main-yellow);
}

.contactUs .container .reachUs ul li .locationDetails {
    display: flex;
    flex-direction: column;
}

.contactUs .container .complaintsForm {
    display: flex;
    flex-direction: column;
    max-width: 533.75px;
}


.contactUs .container .complaintsForm p {
    font-size: clamp(16px, 2.4vw, 20px);
    line-height: clamp(24px, 2.4vw, 35.76px);
    font-weight: 400;

}

.contactUs .container .complaintsForm p {
    margin-bottom: 14px;
}

.contactUs .container .complaintsForm .formComplaints {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.contactUs .container .complaintsForm .formComplaints :is(input, textarea) {
    flex: 1 1 100%;
    width: 100%;
    background-color: #FFFFFF1A;
    border: 1.12px dashed #A29060;
    border-radius: 16.57px;
    -webkit-border-radius: 16.57px;
    -moz-border-radius: 16.57px;
    -ms-border-radius: 16.57px;
    -o-border-radius: 16.57px;
    padding: 15px 19px;
    font-size: clamp(16px, 2.4vw, 22px);
    font-weight: 400;
    line-height: 35.76px;
    outline: none;
    caret-color: #FFF;
    color: #CBCBCB;
}

.contactUs .container .complaintsForm .formComplaints :is(input, textarea)::placeholder {
    color: #CBCBCB;
}

.contactUs .container .complaintsForm .formComplaints textarea {
    height: 188.44px;
    resize: none;
}

.contactUs .container .complaintsForm .formComplaints button[type="submit"] {
    background-color: var(--main-yellow);
    color: #FFF;
    padding-block: 10px;
    outline: none;
    border: none;
    border-radius: 40px;
    -webkit-border-radius:;
    -moz-border-radius:;
    -ms-border-radius:;
    -o-border-radius:;
    transition: .5s all ease;
    -webkit-transition: .5s all ease;
    -moz-transition: .5s all ease;
    -ms-transition: .5s all ease;
    -o-transition: .5s all ease;
    font-size: clamp(16px, 2.4vw, 22px);
    font-weight: 400;
    line-height: 27.59px;
}

.contactUs .container .complaintsForm .formComplaints button[type="submit"]:hover {
    background-color: var(--hover-yellow);
}

@media (max-width:1024px) {
    .contactUs .container {
        flex-direction: column;
        row-gap: 40px;
    }

    .contactUs .container .complaintsForm {
        max-width: 100%;
    }

    .contactUs .container h2,
    .contactUs .container p {
        text-align: center;
    }

    .contactUs .container .complaintsForm .formComplaints button[type="submit"] {
        width: 300px;
        max-width: 100%;
        margin-inline: auto;
        
    }
}