@import url("./components/Header.css");
@import url("./components/Nav.css");
@import url("./components/Inicio.css");
@import url("./components/Tabs.css");
@import url("./components/Door.css");
@import url("./components/Nosotros.css");
@import url("./components/Form.css");

*{
    text-decoration: none;
    scroll-behavior: smooth;
}
body{
    margin: 0px;
    cursor: default;
    font-family: 'Secular One', sans-serif;
}
section{
    position: relative;
}

 

@media only screen and (max-width:1242px){
   
    #Adiestramiento img , #Hotel-canino img , #Semana-extrema video {
        width: 90%;
    }

    /* nosotros section */
    .nosotrosMision p{
        font-size: 1em;
    }
    .nosotrosVision p{
        font-size: 1em;
    }
}

@media only screen and (max-width:1000px){
    .card{
        color: white;
        width: 95%;
        margin: 50px auto;
    }
    #Adiestramiento .photo , #Hotel-canino .H-photo, #Semana-extrema .video {
        height: 500px;
        display: flex;
        align-items: center;
    }
    #Adiestramiento img , #Hotel-canino img , #Semana-extrema video {
        width: 100%;
    }
    
    #nosotros .duenosText{
        width: 40%;
    }

    #form{
        background-attachment: none;
    }
}

@media only screen and (max-width:898px){
    .position h4{
        font-size: 2.5em;
    }
    
    .position p{
        font-size: 1.5em;
    }

    #Adiestramiento .button-pc , #Hotel-canino .button-pc , #Semana-extrema .button-pc{
        display: none;
    }

    #Adiestramiento .button-mobile , #Adiestramiento .button-mobile , #Hotel-canino .button-mobile , #Semana-extrema .button-mobile{
        display: flex;
    }

    #button{
        border-radius: 10px;
        padding: 5px 15px;
        margin: 5px;
    }

    #door img{
        width: 60%;
        margin: 10px 30px;
    }

    #nosotros .nosotrosDueno{
        flex-direction: column;
    }
    #nosotros .duenosImg{
        margin: auto;
    }
    #nosotros .duenosText{
        padding: 0px;
        width: 100%;
    }
    .mYv{
        width: 100px;
        height: 100px;
        margin: auto 0px;
    }

    #form .bgForm {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: 15px;
    }

    #form .contactForm{
        width: 30%;
        margin: 10px 15px 0px 0px;
    }

    #form .location_form p{
        font-size: 1.3em;
        line-height: 1.5em;
    }

    .profilePicture{
        width: 180px;
        height: 180px;
    }

    .profilePicture img{
        width: 180px;
        height: 180px;
    }

    .case p{
        width: 80%;
        font-size: 1em;
    }
    
    .case h5{
        font-size: 1.5em;
    }
}

@media only screen and (max-width:750px){
    #door img{
        width: 90%;
        margin: 10px 10px;
    }

    .nosotrosMision{
        width: 50%;
    }

    .nosotrosVision{
        width: 50%;
    }

    .nosotrosPaw{
        display: none;
    }

    .nosotrosMision p{
        padding: 10px;
        font-size: 1em;
    }
    
    .nosotrosVision p{
        padding: 5px;
        font-size: 1em;
    }

    #terminos_condiciones .terminosBg .terminosText{
        width: 50%;
    }
}

@media only screen and (max-width:650px){
    .services_mobile{
        display: block;
    }
    
    nav .nav{
        display: none;
    }
    
    .D-paw .paw-f .fa-paw, .D-paw .paw-b .fa-paw {
        display: none;
    }

    .paw{
        font-size: 0.3em;
    }
    
    nav .mobile-nav{
        display: initial;
        position: fixed;
        bottom: 20px;
        left: 5px;
        z-index: 16;
    }
    
    .bg-nav ul{
        display: none;
        background-color: skyblue;
        border-radius: 10px;
        list-style: none;
        padding: 5px;
        position: absolute;
        bottom: 50px;
        white-space: nowrap;
    }

    .bg-nav i{
        position: absolute;
        bottom: 20px;
        margin-left: 10px;
        background-color: skyblue;
        padding: 10px;
        border-radius: 50%;
    } 

    .bg-nav i:nth-of-type(2){
       display: none;
    }
    .position h4{
        font-size: 2em;
    }
    
    .position p{
        font-size: 1em;
    }

    .inicio{
        width: 80%;
        margin: 4.5em auto;
    }

    .card{
        display: none;
    }

    #nosotros .duenosImg{
        width: 80%;
    }

    #nosotros .duenosImg img{
        width: 100%;
    }

    #nosotros .duenosText{
        width: 100%;
    }

    #nosotros .nosotrosMisionVision{
        display: flex;
        flex-direction: column;
    }

    .nosotrosMision{
        width: fit-content;
        padding: 10px;
        box-shadow:none;
    }

    .nosotrosVision{
        width: fit-content;
        padding: 10px;
        box-shadow:none;
    }

    .mYv{
        width: 20%;
        margin: 0px 10px;
    }

    #form .contactForm{
        width: 60%;
        margin: 10px 15px 0px 0px;
    }

    .footer .footerIcons i{
        font-size: 2em;
    }
}

@media only screen and (max-width:600px){
    .slider .S-img{
        height: auto;
        position: relative;
        top: -27px;
    }

    .bgColor{
        top: -30px;
    }
    .position p{
        margin-top: 50px;
    }
    nav .nav{
        display: none;
    }
    
    .D-paw .paw-f .fa-paw, .D-paw .paw-b .fa-paw {
        display: none;
    }
    
    nav .mobile-nav{
        display: initial;
        position: fixed;
        bottom: 20px;
        left: 5px;
        z-index: 16;
    }
    
    .bg-nav ul{
        display: none;
        background-color: skyblue;
        border-radius: 10px;
        list-style: none;
        padding: 5px;
        position: absolute;
        bottom: 50px;
        white-space: nowrap;
    }

    .bg-nav i{
        position: absolute;
        bottom: 20px;
        margin-left: 10px;
        background-color: skyblue;
        padding: 10px;
        border-radius: 50%;
    } 

    .bg-nav i:nth-of-type(2){
       display: none;
    }


    .inicio{
        margin: 2em auto;
    }

    #Adiestramiento .photo , #Hotel-canino .H-photo , #Semana-extrema .video{
        display: none;
    }

    .card .image_mobile{
        display: initial;
    }

    #inicio .tabs{
        background: #00c3ff75;  
        background: -webkit-linear-gradient(to right, #ffff1c75, #00c3ff75);
        background: linear-gradient(to right, #ffff1c75, #00c3ff75); 
        border-radius: 0px 0px 10px 10px;
    }

    #Adiestramiento .A-info , #Hotel-canino .H-info, #Semana-extrema .S-info{
        width: 90%;
        text-shadow: 0px 0px 15px black;
    }

    #inicio .card{
        border-radius: 10px;
    }

    .tabs .container .image_mobile{
        display: initial;
    }

    #inicio .tabs-control{
        background-color:rgba(0, 0, 0, 0.746);
        border-radius:10px 10px 0px 0px ;
    }

    #door .door{
        display: none;
    }

    #door .textDoor{
        width: 100%;
    }

    #nosotros .nosotrosHeader{
        margin: 20px 0px 20px;
    }

    #form .contactForm{
        margin: 0px;
    }

    #form .location_form p{

        margin-left: 5px;
        font-size: 1em;
        line-height: 1.8em;
    }

    .profilePicture{
        width: 150px;
        height: 150px;
    }

    .profilePicture img{
        width: 150px;
        height: 150px;
    }
}

@media only screen and (max-width:480px){
    .position h4{
        font-size: 1.5em;
    }

    .position h5{
        font-size: 1em;
    }
    
    .position p{
        font-size: 1em;
        margin-top: 30px;
    }

    .inicio h4{
        font-size: 1.5em;
    }

    .card .tabs-control  a{
        padding: 0.7em;
        color:white;
        font-size: 0.5em;
    }

    #nosotros .nosotrosDueno{
        display: flex;
        flex-direction: column;
    }
    
    #nosotros .duenosImg{
        width: 100%;
        height: fit-content;
        margin: 10px auto;
    }
    
    #nosotros .duenosText{
        text-align: justify;
        margin: auto;
        width: 100%;
        font-size: 1em;
    } 

    .contactForm .check{
        font-size: 0.5em;
    }

    #terminos_condiciones .terminosBg .terminosText{
        width: 80%;
        padding: 1.5em;
    }
}

@media only screen and (max-width:320px){
    .position p{
        margin-top: 10px;
    }
}