.offer-details .textimg-container .image-container img,
.offers-list-container .img-container img,
.read-more-button {
    border-radius: 10px
}

.page1,
.page2,
.page3 {
    position: relative;
    display: flex
}

.offer-details-container {
    width: 100vw;
    overflow: hidden
}

.offer-details {
    width: 85%;
    max-width: 1600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--poppins-font);
    margin: auto
}

.page1,
.page2 {
    margin-top: 8rem;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem
}

.page1 .img-arrow-container {
    display: flex;
    gap: .2rem;
    align-items: center;
    justify-content: center
}

.page1 .img-arrow-container img {
    height: 20px;
    width: 20px
}

.page1 .img-arrow-container .offers-heading {
    font-size: 1rem;
    font-weight: 600;
    color: #282828
}

.page1 .offers-text,
.page2 .offers-text {
    font-size: 60px;
    font-weight: 600;
    line-height: 90px;
    text-align: center
}

.page1 .offers-para,
.page2 .offers-para {
    font-size: 24px;
    font-weight: 300;
    line-height: 48px;
    max-width: 800px;
    text-align: center;
    font-family: var(--poppins-font);
}

.page1 .bottom-pattern img,
.page1 .top-pattern img {
    width: 60%
}

.page1 .top-pattern {
    position: absolute;
    top: -55%;
    right: -18%;
    z-index: -1
}

.page1 .bottom-pattern {
    position: absolute;
    bottom: -225px;
    left: -8%;
    z-index: -1
}

.offer-details .textimg-container {
    display: flex;
    gap: 2rem;
    margin-top: 5rem;
    align-items: center;
    justify-content: center;
    z-index: 1;
    width: 100%
}

.offer-details .textimg-container .text-container,
.offers-list-container .text-container {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.offer-details .textimg-container .text-container .name-slots,
.offers-list-container .name-slots {
    display: flex;
    gap: .75rem;
    align-items: center;
    justify-content: flex-start
}

.offer-details .textimg-container .text-container .name-slots .offer-name,
.offers-list-container .name-slots .offer-name {
    color: #00000099
}

.offer-details .textimg-container .text-container .name-slots .offer-slots,
.offers-list-container .name-slots .offer-slots {
    color: red
}

.offer-details .textimg-container .text-container .title,
.offers-list-container .text-container .title {
    font-size: 2rem;
    font-weight: 400;
    line-height: 3rem;
    margin-bottom: 1rem
}

.offer-details .textimg-container .text-container .excerpt,
.offers-list-container .text-container .excerpt {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7rem;
    color: #00000099;
    margin-bottom: 1rem
}

.read-more-button {
    background: #0f1b4c;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 1.1px;
    padding: .8rem 2rem;
    border: none;
    cursor: pointer;
    transition: .3s ease-in-out;
    width: fit-content
}

.offer-details .offer-details-body {
    margin-top: 3rem;
    width: 100%;
    display: flex;
    gap: 2rem
}

.offer-details .offer-details-body .offer-description {
    width: 65%;
    align-self: flex-start;
    text-align: justify
}

.offer-details .offer-details-body .offer-description img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 10px
}

.offer-details .offer-details-body .contact-box {
    width: 35%;
    display: flex;
    flex-direction: column;
    gap: 2rem
}

.page3,
.page3-container .offers-list-container .img-container,
.page3-container .offers-list-container .img-container img,
.page3-container .offers-list-container .offer-box {
    width: 100%
}

.offer-details .offer-details-body .contact-box .about-webduniya,
.offer-details .offer-details-body .contact-box .get-a-quote {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    border: 1px solid #0000001A;
    padding: 1rem;
    border-radius: 10px;
    box-shadow: 0px 12.52px 28.17px 0px #00000009;
}

.offer-details .offer-details-body .contact-box .about-webduniya p {
    width: 90%;
    text-align: justify
}

.offer-details .offer-details-body .contact-box .about-webduniya img {
    width: 90% !important;
    height: 100% !important;
    border-radius: 10px;
    object-fit: cover
}

.page3 {
    align-items: center;
    justify-content: center;
    gap: 1rem
}

.page3-container {
    display: flex;
    gap: 2rem;
    margin-top: 3rem;
    align-items: center;
    justify-content: center;
    z-index: 1
}

.page3-container .offers-list-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 5rem;
    align-items: center;
    justify-content: center;
    z-index: 1
}

.page3-container .offers-list-container .text-container .title {
    font-weight: 400;
    font-size: 23px;
    line-height: 38px;
    color: var(--primary-blue);
    margin-bottom: 2rem
}

@media (max-width:1650px) {
    .page1 .offers-para {
        font-size: 20px;
        line-height: 43px;
        max-width: 615px;
    }

    .page1 .offers-text {
        font-size: 44px;
        line-height: 50px;
    }
}

@media (max-width:1150px) {
    .page1 .offers-para {
        font-size: 17px;
        line-height: 35px;
        max-width: 522px;
    }
}

@media screen and (max-width:1024px) {
    .offer-details .textimg-container {
        flex-direction: column
    }

    .offer-details .textimg-container,
    .offer-details .textimg-container .image-container,
    .offer-details .textimg-container .image-container img {
        width: 100%
    }

    .page1 .top-pattern {
        right: -26%
    }
}

@media screen and (max-width:768px) {

    .offer-details .offer-details-body,
    .page3-container {
        flex-direction: column
    }

    .offer-details .offer-details-body .contact-box,
    .offer-details .offer-details-body .offer-description {
        width: 100%
    }

    .page1 .top-pattern {
        right: -70%;
    }

    .page1 .bottom-pattern {
        left: -32%;
    }

    .page3-container .offers-list-container .text-container {
        align-items: center;
        justify-content: center
    }
}

@media (max-width:500px) {
    .page1 .img-arrow-container img {
        height: 16px;
        width: 16px;
    }

    .page1 .img-arrow-container .offers-heading {
        font-size: 14px;
    }

    .page1 .offers-para {
        font-size: 14px;
        line-height: 27px;
    }

    .page1 {
        margin-top: 6rem;
    }

    .page1 .offers-text {
        font-size: 40px;
    }
}