#CTA{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--dark);
    overflow: hidden;
}

.CTAcontainer .Sectiontitle{
    font-family: "Playwrite US Trad", serif;
    text-align: center;
    font-size: 4rem;
    font-weight: 300;
    color: var(--primary-green);
}

.CTAcontainer{
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: var(--background);
    padding-block-end: 50px;
}
@media (max-width: 1000px) {
    .CTAcontainer{
        padding-block:50px;
    }
}
.bookingcontext{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 50px;
    position: relative;
}

.bookingdetails{
    font-family: "Playwrite US Modern", serif;
    color: var(--dark-green);
    font-weight: 300;
    font-size: 1.5rem;
    line-height: 1.7rem;
    text-align: center;
}

.billandbook{
    display: flex;
    gap: 50px;
    align-items: center;
}
#MainCTA{
    font-family: "Quicksand", serif;
    color: var(--primary-green);
    padding: 20px 40px;
    border: 2px solid var(--primary-green);
    border-radius: 999px;
    font-size: 1.5rem;
    line-height: 1.5rem;
    font-weight: 600;
    background-color: var(--light-green);
    box-shadow: 8px 8px 0 var(--primary-green);
    transition: all 0.2s;
}
#MainCTA:hover{
    transform: translate(5px, 5px);
    box-shadow: 3px 3px 0 var(--primary-green);
}

#billpage{
    font-family: "Playwrite US Modern", serif;
    border: 1px solid var(--dark-green);
    background-color: var(--white);
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 8px 8px 0 var(--dark-green);
    transform: rotate(-13deg);
    overflow: hidden;
    z-index: 2;
}
.billtitle,.totaltext{
    font-family: "Playwrite US Modern", serif;
    font-size: 1.5rem;
    line-height: 1.5rem;
    color: var(--dark-green);
}
.billdetails{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.billservice{
    display: flex;
    justify-content: space-between;
    width: 240px;
}
.billservice .service{
    font-family: "Playwrite US Modern", serif;
    font-size: 1rem;
    line-height: 1rem;
    color: var(--dark-green);
    white-space: nowrap;
    overflow: hidden;
    width: 170px;
}
.billservice .price{
    font-family: "Playwrite US Modern", serif;
    font-size: 1rem;
    line-height: 1rem;
    width: 65px;
    color: var(--dark-green);
}

.connectionlinks{
    position: absolute;
    left: 50px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 70px;
}

.connect{
    width: 64px;
    height: 64px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.socialtext{
    z-index: 3;
    font-family: "Montserrat", serif;
    color: var(--dark-green);
    padding: 10px 20px;
    border-radius: 0 20px 20px 20px;
    border: 1px solid var(--dark-green);
    position: absolute;
    left: 80px;
    top: 50%;
    pointer-events: none;
    opacity: 0;
    transition: all 0.4s;
}
.socialicon{
    z-index: 3;
    fill: var(--dark-green);
    transform: scale(4);
}

/*------------------------------------- footer links */

#FooterLinks{
    width: 100%;
    background-color: var(--primary-pink);
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 5px 10px;
}
@media (max-width: 1000px) {
    #FooterLinks{
        padding: 20px 10px;
    }
}
.footnav{
    font-family: "Playwrite US Modern", serif;
    font-size: 1.3rem;
    line-height: 1.3rem;
    font-weight: 400;
    color: var(--dark-pink);
}

/*------------------------------------- footer logo */


#FooterLogo{
    width: 100%;
    padding-top: 20px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: linear-gradient(to bottom, var(--primary-blue) 20%, var(--black));
    overflow: hidden;
}

#FooterLogo p{
    font-family: "Playwrite US Modern", serif;
    width: 100%;
    text-align: center;
    --ftsize: calc(calc(100vw - 15px) / 9.6);
    font-size: var(--ftsize);
    line-height: var(--ftsize);
    color: var(--white);
}


@media (min-width: 1000px) {
    .connect:hover .socialtext{
        opacity: 1;
        transform: translateY(-50%);
    }
}
@media (max-width: 1000px) {
    #FooterLogo{
        padding-top: 50px;
        background: linear-gradient(to bottom, var(--primary-blue) 20%, var(--black));
    }
    .CTAcontainer{
        padding-block-end: 70px;
    }
    .billandbook{
        flex-direction: column-reverse;
    }
    .bookingdetails{
        font-size: 1.3rem;
        line-height: 1.5rem;
    }
    .footnav{
        font-size: 1.1rem;
        line-height: 1.1rem;
    }
    .CTAcontainer .Sectiontitle{
        font-size: 2.5rem;
    }
}
@media (min-width: 600px) and (max-width: 1000px) {
    .connectionlinks{
        gap: calc(70px - calc(calc(1000px - 100vw) / calc(400/30)));
        left: calc(50px - calc(calc(1000px - 100vw) / calc(400/20)));
    }
    .connect{
        width: 56px;
        height: 56px;
    }
    .socialicon{
        transform: scale(3.5);
    }
}
@media (min-width: 400px) and (max-width: 600px) {
    .billandbook{
        transform: translateX(calc(calc(600px - 100vw) / calc(200/40)));
    }
}
@media (max-width: 400px) {
    .billandbook{
        transform: translateX(40px);
    }
}
@media (max-width: 600px) {
    .bookingdetails{
        font-size: 1.1rem;
        line-height: 1.3rem;
    }
    .CTAcontainer .Sectiontitle{
        font-size: 2rem;
    }
    .connectionlinks{
        gap: 40px;
        left: 30px;
        top: 60%;
    }
    .connect{
        width: 48px;
        height: 48px;
    }
    .socialicon{
        transform: scale(3);
    }
    #MainCTA{
        padding: 10px 20px;
        font-size: 1.2rem;
        line-height: 1.2rem;
    }
    #billpage{
        padding: 10px 8px;
        gap: 15px;
        box-shadow: 5px 5px 0 var(--dark-green);
    }
    .billtitle,.totaltext{
        font-size: 1.2rem;
        line-height: 1.2rem;
    }
    .billdetails{
        gap: 10px;
    }
    .billservice{
        display: flex;
        justify-content: space-between;
        width: 200px;
    }
    .billservice .service{
        font-size: 0.8rem;
        line-height: 0.8rem;
        width: 145px;
    }
    .billservice .price{
        font-size: 0.8rem;
        line-height: 0.8rem;
        width: 55px;
    }
}