/* Start - Common Elements In Multiple Pages */

/* Section Heading */
.Heading h1 {
    text-align: center;
    font-weight: var(--weight-medium);
}

/* Section Sub-Heading */
.Heading p {
    text-align: center;
}



/* Start - Floating Call To Action Button */
.btn-Float {
    position: fixed;
    z-index: 12;
    top: 200px;
    right: 0;

    transform: rotate(270deg);
    transform-origin: 100% 100%;
    transition: all 0.25s ease-out;
}
    @media (max-width: 1400px) {
        .btn-Float {
            top: 160px;
        }
    }
    @media (max-width: 1200px) {
        .btn-Float {
            padding: 9px 35px 6px 35px;
        }
    }
    @media (max-width: 1000px) {
        .btn-Float {
            display: none;
        }
    }

.btn-Float p {
    color: var(--white);
    letter-spacing: 10px;
    font-size: var(--size-small);
    font-weight: var(--weight-medium);

    background-color: var(--black);
    padding: 15px 40px 8px 40px;
    border-radius: 3px 3px 0 0;
    cursor: pointer;
}
    .btn-Float p:hover {
        background-color: var(--orange);
    }
/* End - Floating Call To Action Button */



/* Start - Get A Callback Form */
.Callback-Form-BG {
    position: fixed;
    z-index: 11;
    top: 0;
    left: 0;
}
.Callback-Form-BG.Active {
    width: 100%;
    height: 100%;
    background-color: hsla(0, 0%, 0%, 0.8);
}


.Callback-Form {
    position: fixed;
    z-index: 12;
    top: 100px;
    right: -600px;


    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 17px;

    background-color: var(--white);
    box-shadow: -10px 0 80px hsla(0, 0%, 0%, 0.2);
    border-radius: 7px 0 0 7px;
    padding: 50px 50px 60px 50px;

    transition: all 0.25s ease-out;
}
    @media (max-width: 768px) {
        .Callback-Form {
            top: 10px;
            padding: 30px 40px;
        }
    }
    @media (max-width: 768px) {
        .Callback-Form {
            padding: 30px;
        }
    }

.Callback-Form .Input {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
}

.Callback-Form input {
    font-family: var(--font-primary);
    font-size: var(--size-small);

    width: 400px;
    height: 44px;
    border-radius: 3px;
    padding: 10px;

    background-color: var(--bg-blue);
    border: none;
}
    .Callback-Form input:focus {
        outline: 3px solid var(--green);
    }
    @media (max-width: 768px) {
        .Callback-Form input {
            width: 300px;
        }
    }
    @media (max-width: 500px) {
        .Callback-Form input {
            width: 250px;
        }
    }


.Callback-Form .Input h4 {
    font-weight: var(--weight-medium);
}

.Callback-Form .Buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 20px 0 10px 0;
}
    @media (max-width: 500px) {
        .Callback-Form .Buttons {
            flex-direction: column;
            gap: 8px;

            padding: 0;
        }
    }

.Callback-Form .Submit,
.Callback-Form .Close {
    display: flex;
    align-items: center;
    justify-content: center;

    font-family: var(--font-primary);
    font-size: var(--size-small);
    color: var(--white);

    border: none;
    border-radius: 3px;
    padding: 10px 40px;
}
    @media (max-width: 768px) {
        .Callback-Form .Submit,
        .Callback-Form .Close  {
            padding: 10px 25px;
        }
    }
    @media (max-width: 500px) {
        .Callback-Form .Submit,
        .Callback-Form .Close  {
            width: 250px;
            height: 40px;
            padding: 0;
        }
    }

    .Callback-Form .Submit {
        cursor: pointer;
        background-color: var(--green);
    }
    .Callback-Form .Close {
        cursor: pointer;
        background-color: var(--orange);
    }
    .Callback-Form .Submit:hover {
        background-color: var(--orange);
    }
    .Callback-Form .Close:hover {
        background-color: var(--red);
    }
/* End - Get A Callback Form */



/* Start - Intro Section Details */
.Intro-Details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    padding: 0 var(--page-pad) 65px var(--page-pad);
    margin: 65px 0 0 0;
}
    @media (max-width: 1400px) {
        .Intro-Details {
            gap: 25px;
        }
    }
    @media (max-width: 1200px) {
        .Intro-Details {
            padding: 0 var(--page-pad) 60px var(--page-pad);
        }
    }
    @media (max-width: 1000px) {
        .Intro-Details {
            align-items: center;
            gap: 15px;
        }
    }
    @media (max-width: 768px) {
        .Intro-Details {
            padding: 40px var(--page-pad);
            margin: 0;
        }
    } 


/* Intro Text */
.Intro-Details h1 {
    font-weight: var(--weight-semi-bold);
    color: var(--white);
    line-height: 60rem;

    padding: 0 35% 0 0;
}
    @media (max-width: 1200px) {
        .Intro-Details h1 {
            line-height: 55rem;
        }
    }
    @media (max-width: 1000px) {
        .Intro-Details h1 {
            padding: 0;
            line-height: 50rem;
            text-align: center;
        }
    }
    @media (max-width: 768px) {
        .Intro-Details h1 {
            line-height: 45rem;
        }
    }
    @media (max-width: 500px) {
        .Intro-Details h1 {
            line-height: 40rem;
        }
    }


.Intro-Details > p {
    font-weight: var(--weight-medium);
    padding: 0 45% 0 0;
}
    @media (max-width: 1000px) {
        .Intro-Details > p {
            padding: 0;
            text-align: center;
            margin: 0 0 25px 0;
        }
    }


/* CTA Links In Small Screens (Below 1000px) */
@media (min-width: 1001px) {
    .CTA-Links-Small {
        display: none;
    }
}

@media (max-width: 1000px) {
    .CTA-Links-Small {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 35px;
    }
    @media (max-width: 768px) {
        .CTA-Links-Small {
            flex-direction: column;
            gap: 15px;
        }
    }
    @media (max-width: 500px) {
        .CTA-Links-Small {
            gap: 10px;
        }
    }
    
    .CTA-Links-Small img {
        width: 55px;
    }
    @media (max-width: 768px) {
        .CTA-Links-Small img {
            width: 50px;
        }
    }
    @media (max-width: 500px) {
        .CTA-Links-Small img {
            width: 45px;
        }
    }
    
    
    .CTA-Links-Small a,
    .CTA-Links-Small p {
        font-size: var(--size-xs);
        font-weight: var(--weight-medium);
        color: var(--white);
    }
    
    .CTA-Links-Small .Callback {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 270px;
        height: 55px;
        background-color: var(--orange);
        border-radius: 100px;
        cursor: pointer;
    }
        .CTA-Links-Small .Callback:hover {
            background-color: var(--red);
        }
        @media (max-width: 768px) {
            .CTA-Links-Small .Callback {
                width: 260px;
                height: 50px;
            }
        }
        @media (max-width: 500px) {
            .CTA-Links-Small .Callback {
                width: 250px;
                height: 45px;
            }
        }
    
    .CTA-Links-Small .Payment {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
    
        width: 270px;
        background-color: var(--till-light);
        border-radius: 100px;
    }
        .CTA-Links-Small .Payment:hover {
            background-color: var(--till);
        }
        @media (max-width: 768px) {
            .CTA-Links-Small .Payment {
                width: 260px;
            }
        }
        @media (max-width: 500px) {
            .CTA-Links-Small .Payment {
                width: 250px;
            }
        }
}


/* Mobile Only Links */
@media (min-width: 769px) {
    .Intro-Details .Mobile-Only {
        display: none;
    }
}
@media (max-width: 768px) {
    .Intro-Details .Mobile-Only {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 35px;

        padding: 30px 0 0 0;
    }
}


.Intro-Details .Mobile-Only div:nth-of-type(2) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}


.Intro-Details .Mobile-Only .Login {
    font-weight: var(--weight-medium);

    padding: 10px 35px;
    border: 3px solid var(--orange);
    border-radius: 100px;
    background-color: var(--white);
}
    .Intro-Details .Mobile-Only .Login:hover {
        color: var(--white);
        background-color: var(--orange);
    }
    @media (max-width: 500px) {
        .Intro-Details .Mobile-Only .Login {        
            padding: 9px 35px;
        }
    }
/* End - Intro Section Details */



/* Start - Intro Section Contact Details */
.Intro-Contact {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 60px;

    width: fit-content;
    background-color: white;
    padding: 40px 50px;
    border-radius: 10px;
    box-shadow: 0 5px 20px var(--shadow-black);

    margin: -70px var(--page-pad) 0 var(--page-pad);
}
    @media (max-width: 1400px) {
        .Intro-Contact {
            gap: 45px;
            padding: 35px 45px;
        }
    }
    @media (max-width: 1200px) {
        .Intro-Contact {
            gap: 40px;
            padding: 33px 40px;
        }
    }
    @media (max-width: 1000px) {
        .Intro-Contact {
            padding: 30px 30px;
            margin: -60px auto 0 auto;
        }
    }
    @media (max-width: 768px) {
        .Intro-Contact {
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            gap: 20px;
            
            padding: 25px;
            margin: -80px auto 0 auto;
        }
    }
    @media (max-width: 500px) {
        .Intro-Contact {
            gap: 10px;
            
            padding: 10px;
            margin: -70px auto 0 auto;
        }
    }

.Intro-Contact div {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 30px;
}
    @media (max-width: 1400px) {
        .Intro-Contact div {
            gap: 20px;
        }
    }
    @media (max-width: 500px) {
        .Intro-Contact div {
            gap: 15px;
        }
    }

.Intro-Contact div img {
    width: 58px;
}
    @media (max-width: 1400px) {
        .Intro-Contact div img {
            width: 54px;
        }
    }
    @media (max-width: 1200px) {
        .Intro-Contact div img {
            width: 52px;
        }
    }
    @media (max-width: 768px) {
        .Intro-Contact div img {
            width: 48px;
        }
    }
    @media (max-width: 500px) {
        .Intro-Contact div img {
            width: 45px;
        }
    }

.Intro-Contact div p {
    font-weight: var(--weight-regular);
    color: var(--grey);
}
/* End - Intro Section Contact Details */

/* End - Common Elements In Multiple Pages */