@import "./partials/general.css";
@import "./partials/nav.css";
@import "./partials/home.css";
@import "./partials/button.css";
@import "./partials/logos.css";
@import "./partials/popular.css";
@import "./partials/value.css";
@import "./partials/contact.css";
@import "./partials/appointment.css";
@import "./partials/footer.css";
@import "./partials/scroll.css";

.btn-primary {
background: var(--first-color-lighten);
padding: 0.85rem 1rem;
display: block;
width: 100%;
border-radius: 0.4rem;
resize: none;
appearance: none;
border: none;
font-family: var(--body-font);
outline: none;
border: none;
cursor: pointer;
}

.btn-primary:hover {
    background: hsl(197, 55%, 24%);
    color: white;
    
}

.back-bo {
    z-index: -1;
    background-color: black;
}

@media (max-width: 440px) {
    #frame {
        width: ;
        height: ;
    }
}

@media (min-width: 992px) {
    #frame {
        width: ;
        height: ;
    }
}

@media only screen and (max-width:1370px) {
   #frame {
    height: 1450px;
    }
}

@media only screen and (min-width:1440px) {
    #frame {
        height: 1600px;
    }
}

@media only screen and (min-width:1650px) {
    #frame {
        height: 2000px;
    }
}

@media only screen and (min-width:1920px) {
    #frame {
        height: ;
    }
}

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
    #frame {
        width: ;
        height: ;
    }
}


@media all and (device-width: 300px) and (device-height: 990px) and (orientation:portrait) {
    #frame {
        width: ;
        height: ;
    }
}