/* The background track */
::-webkit-scrollbar-track {
  background: transparent;       /* Color of the track */      /* Roundness of the track */
}

.ServiceTabContainer {
    width: 80%;
    margin-top: 22vh;
}

.PropertySelectionDiv {
    width: 70%;
}

.TopText{
    background: linear-gradient(90deg, #fd9275, #fe84a3, #939deb, #3aaeff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    transition: 0.3s;
    font-size: 5vh;
    width: 40%;
    margin-bottom: 0;
}

.Describ{
    font-size: 2vh;
    color: white;
    font-weight: 400;
    width: 50%;
}

.SelectionHolder {
    margin-top: 2vh;
    height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-color: #555555 transparent;
}

.Selection {
    width: 90%;
    display: flex;
    flex-direction: row;
    height: 20vh;
    justify-content: center;
    align-items: center;
     background-color: rgb(19, 19, 19);
    border: 4px solid rgb(26, 26, 26);
    box-shadow: 0 0 20px rgb(0, 0, 0);
    padding: 3%;
    border-radius: 2vh;
    margin-top: 3vh;
}

.LongPropertyImgDiv {
    width: 35%;
    height: 100%;
    margin: 0;
}

.LongPropertyImgDiv img{
    height:  100%;
    object-fit: cover;
    width: 100%;
    border-radius: 3vh;
}

.LongPropertyImgDivSecondary {
    display: flex;
    flex-direction: column;
    margin-left: 6vh;
}

.NameAndPriceDiv {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

.LongPropertyLocationDiv h1{
    font-size: 4vh;
    width: 100%;
    font-weight: 600;
    color: white;
    margin: 0;
}

.LongPropertyLocationDiv h3{
    font-size: 1.5vh;
    width: 100%;
    font-weight: 400;
    color: rgb(238, 238, 238);
    display: flex;
    align-items: center;
    margin-top: 0.4vh;
}

.NameAndPriceDiv h2{
    color: #fe84a3;
    font-size: 2.5vh;
    font-weight: 600;
}

.PropertyDescrib {
    color: rgb(216, 216, 216);
    font-weight: 400;
    font-size: 1.5vh;
    height: 4vh;
    margin: 0;
    width: 75%;
}

.BottomLongPropertyDiv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1vh;
}

.BottomLongPropertyDiv p{
    font-size: 1.5vh;
    color: rgb(216, 216, 216);
}

.BottomLongPropertyDiv button {
    font-size: 1.9vh;
     background: 
    linear-gradient(to right, #fe84a3, #fd9275) border-box;
    color: rgb(19, 19, 19);
    border: 0;
    padding: 1.3vh;
    padding-left: 3vh;
    padding-right: 3vh;
    border-radius: 100vh;
    font-weight: 600;
    transition: 0.2s;
}

.BottomLongPropertyDiv button:hover {
     font-size: 2vh;
     box-shadow: 0 0 20px rgb(0, 0, 0);
     cursor: pointer;
}


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

.WaiverAndContact {
    width: 28%;
}

.WaiverDiv {
     display: flex;
     flex-direction: column;
    justify-content: center;
    align-items: center;
     background-color: rgb(19, 19, 19);
    box-shadow: 0 0 20px rgb(0, 0, 0);

     border: 5px solid transparent;
     border-radius: 15px;
    background-image: 
    linear-gradient(rgb(19, 19, 19), rgb(19, 19, 19)), 
    linear-gradient(to right, #3aaeff, #939deb);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    width: 100%;
    padding: 10%;
}

.WarningLable {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
}

.WarningLable h1{
    text-align: center;
    font-size: 2.5vh;
    background: linear-gradient(90deg, #3aaeff, #939deb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.WarningLable span{
    font-family: 'Material Symbols Outlined';
    font-size:5vh;
    transition: 0.3s;
    margin: 0;
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 48;
        color: #3aaeff;
}

.WaiverDiv p{
    color: white;
    font-weight: 400;
    font-size: 1.7vh;
    margin-top: 8vh;
}

.WaiverDiv button{
    margin-top: 5vh;
    background: linear-gradient(90deg, #3aaeff, #939deb);
    border-radius: 100vh;
    border: 0;
    font-size: 2.2vh;
    font-weight: 550;
    padding: 0.7vh;
    padding-right: 5vh;
    padding-left: 5vh;
    color: rgb(19, 19, 19);
    display: flex;
    align-items: center;
    transition: 0.2s;
}

.WaiverDiv button:hover {
    font-size: 2.4vh;
    box-shadow: 0 0 20px rgb(0, 0, 0);
    cursor: pointer;
}

.WaiverDiv button span {
    font-family: 'Material Symbols Outlined';
    font-size:5vh;
    transition: 0.3s;
    margin: 0;
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 48;
        color: rgb(19, 19, 19);
}

.WaiverContactDiv{
      display: flex;
     flex-direction: column;
    justify-content: center;
    align-items: center;
     background-color: rgb(19, 19, 19);
    box-shadow: 0 0 20px rgb(0, 0, 0);

     border: 5px solid transparent;
     border-radius: 15px;
    background-image: 
    linear-gradient(rgb(19, 19, 19), rgb(19, 19, 19)), 
    linear-gradient(to right, #fe84a3, #fd9275);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    width: 100%;
    padding: 10%;
    margin-top: 5vh;
    margin-bottom: 10vh;
}

.ContactTitle h1{
    text-align: center;
    font-size: 4vh;
    margin: 0;
    background: linear-gradient(90deg, #fe84a3, #fd9275);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.WaiverContactDiv p{
    color: white;
    font-size: 1.7vh;
}

.ContactWaiver {
     display: flex;
    flex-direction: column;
    margin-bottom: 3.5vh;
}

.ContactWaiver h1 {
    color: white;
    font-weight: 600;
    font-size: 4vh;
}

.ContactWaiver h3 {
    color: white;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 1vh;
    font-size: 2vh;
    margin: 1.3vh;
    text-align: center;
    display: flex;
    align-items: center;
}

@media (max-width: 600px) {
    .ServiceTabContainer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 14vh;
        width: 100%;
    }

    .PropertySelectionDiv {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .Phone80Div {
        width: 80%;
    }

    .TopText {
        width: 100%;
    }

    .Describ {
        width: 90%;
    }

    .SelectionHolder {
         margin-top: 2vh;
        height: fit-content;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        overflow-y: visible;
        overflow-x: visible;
        scrollbar-color: #555555 transparent;
        width: 90%;
    }

    .Selection {
        height: fit-content;
        display: flex;
        flex-direction: column;
    }

    .LongPropertyImgDiv {
        width: 100%;
        height: 100%;
        margin: 0;
    }

    .LongPropertyImgDiv img{
        height:  100%;
        object-fit: cover;
        width: 100%;
        border-radius: 3vh;
    }

    .LongPropertyImgDivSecondary {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0;
        width: 100%;
    }

    .LongPropertyImgDivSecondary p {
        font-size: 1.55vh;
        margin-top: 0;
        margin: 0;
    }
    

    .LongPropertyImgDivSecondary p:nth-child(2) {
        display: none;
        width: 0;
        height: 0;
    }

    .LongPropertyLocationDiv h1{
        font-size: 2.4vh;
        width: 100%;
        text-align: center;
    }

    .NameAndPriceDiv h2{
        font-size: 2vh;
    }

    .BottomLongPropertyDiv{
        display: flex;
         align-items: center;
    }

    .BottomLongPropertyDiv button{
        width: 50%;
        font-size: 1.7vh;
    }

    .BottomLongPropertyDiv button:hover{
        width: 55%;
        font-size: 1.4vh;
    }

    .WaiverAndContact {
        width: 90%;
        margin: 0%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 10vh;
    }

    .WaiverDiv {
        width: 75%;
    }

    .WaiverContactDiv {
        width: 75%;
    }

    .ContactWaiver {
        margin: 0;
    }
}