body{
    margin: 0px;
    padding: 0px;
    font-family: 'Roboto', sans-serif;
}

.site_load{
    opacity: 0;
    transition: opacity 1s ease-in-out;
}


.site_load.loaded{
    opacity: 1;

}


.bars{
    display: none;
}

nav div:nth-of-type(5) .nav_buttons{
    display: none;
}




.bg-color{
    background-color: rgb(180, 212, 221);
}

.container{
    background-color: rgb(180, 212, 221);
    /* margin: 0 auto; */
    /* display: grid; */
    /* grid-template-columns:repeat(12, 1fr); */
}
 
header{
    display: flex;
    /* grid-column: 1/13; */
    justify-content: space-between;

}

#aside_img{
    background-color: rgb(180, 212, 221);
    padding-top: 35px;
    padding-left: 10px;
}

nav{
    /* background-color: rgb(180, 212, 221); */
    display:flex ;
    gap: 10px;
    padding-top: 35px;
    /* padding-right: 30px; I think this pushed outside of bondries on tablet*/
}


.nav_buttons{
border: none;
color: white;
padding: 7px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 4px 2px;
cursor: pointer;
border-radius: 16px;
font-family: 'Roboto', sans-serif;
transition: all 0.3s ease-in-out;
}


.nav_buttons:hover{
    background-color: rgb(41, 77, 136);
    color: white;
}

.active{
    background-color: rgb(41, 77, 136);
}


.login{
border: none;
color: rgb(41, 77, 136);
background-color: rgb(180, 212, 221);
font-size: 16px;
width: fit-content;
margin-left: -10px;
margin-right: 30px;
margin-top: -7px;
}


.login .pro{
    vertical-align: middle;
    /* margin-right: -8px; */
    text-align: center;
}

.login:hover{
    opacity: 75%;
}

.login span {
    vertical-align: middle;
    text-align: center;
  }


.big{
    
    grid-column: 1/8;

    /* grid-row: 2/6; */
    grid-row: 1/6;

    text-align: left;
    font-family: 'Roboto', sans-serif;
    /* font-size: 60px; same as 3.75rem */
    /* font-size: 3.75rem; */
    font-size: 3rem;
    padding-left: 50px;
    color: rgb(41, 77, 136);
    line-height: 125px;
    /* margin-top: -30px; getting rid of this matches other pages, or perhaps I should add it too all pages to make consistent */
    width: fit-content;

}

.big p{
    font-size: 25px;
    font-weight:375;
    margin-top: -75px;
}


#cat_and_dog{
    grid-column:6/13 ;

    /* grid-row: 3/8; */
    grid-row: 2/7;


    margin-top:-15px ;
    max-width: 950px;
    width: 100%;
}

.white{
    grid-column:1/13 ;

    /* grid-row:7/8 ; */
    grid-row: 6/7;


    background-color: white;
}


.atagbtn{
    /* grid-column:11/13 ; */
    grid-column:11/12 ; 
    /* grid-row:7 ; */
    grid-row: 6;
    margin-right: 50px;
    height: fit-content;
    margin-top: -30px;
}

 #chat{
    text-align: center;
    border-radius: 10px;
    border-style: none;
    cursor: pointer;
    height: 60px;
    width: 200px;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    font-size: larger;
    background-color:  rgb(216, 245, 254);
    color: rgb(41, 77, 136);
    /* margin-left: 50px;  */
}

#chat:hover{
    background-color:  rgb(180, 212, 221);
}

.container-1{
    /* background-color: rgb(180, 212, 221); */
    margin: 0 auto;
    display: grid;
    grid-template-columns:repeat(12, 1fr);
    /* grid-template-rows: repeat(7, 1fr); */
    grid-template-rows: repeat(6,1fr);
}


.container-2{
    text-align: center;
    background-color: white;
    padding-top: 25px ;
    padding-bottom: 50px;
}

 .container-2 h2{
    font-family: 'Roboto', sans-serif;
    color: rgb(41, 77, 136);
    font-size: 4rem;
    padding-inline: 15px;
}

.perks{
    display: flex;
    font-family: 'Roboto', sans-serif;
    color: rgb(41, 77, 136);
    gap: 40px;
    justify-content: center;
    margin-bottom: 4rem;
    padding: 0px;
}


.perks_img{
    display: flex;
    gap:5px;  
    list-style: none;
}

.perks_img img{
    margin-top:-15px; /*There's gotta be a better way to achieve this*/
}


#book_appointment{
    background-color: rgb(41, 77, 136);
    padding: 12px 30px;
    border-radius: 100px;
    color:white;
    transition: all 0.3s ease-in-out;
    border: none;
}

#book_appointment:hover{
    background-color: rgb(1, 30, 75);
}

.zoom_box{
    margin-top: 75px;
    display: flex;
    gap:12px;
    justify-content: center;
    width: 90%;
    margin-inline:auto;
}

.zoom_container{
    overflow: hidden;
    border-radius: 10px;
}

.zoom_effect{
    transition: all 1s ease-in-out;
    border-radius: 10px;
    width:100%;
}

.zoom_effect:hover{
    transform: scale(1.1);
    border-radius: 20px;
}


.container-3{
    background-color: rgb(180, 212, 221);
    font-family: 'Roboto', sans-serif;
    padding-bottom: 100px;
}

.container-3 h2{
    text-align: center;
    font-family: 'Roboto', sans-serif;
    color: rgb(41, 77, 136);
    font-size: 4rem;
    padding-block: 5rem 2rem;
    margin-inline:25px;
}


.client_section{
    display: flex;
    justify-content: space-around;
    padding-bottom: 7rem;
    gap: 200px;
}



.client_card{
    background-color: white;
    width:25%;
    max-width: 300px;
    border-radius: 10px;
}

.card{
    position: relative;
}


.offset{
   position:absolute;
   margin-top: 100px;
}


.card_img{
    width:25%;
    min-width: 100px;
    margin-top: 30px;
    margin-left: 30px;
    margin-bottom: 10px;

}

.p_alignment{
    padding-inline: 30px;
    line-height: 30px;
    color:rgb(41, 77, 136); 

}

.blue_color{
    color:rgb(41, 77, 136); 
    padding-top: 30px;
    font-size: 1.25rem;
    
}

.container-4{
    background-color:rgb(41, 77, 136);
    text-align: center;
    padding: 50px 0 30px 0;
}

.container-4 h2{
    color: white;
    font-family: 'Roboto', sans-serif;
    font-size: 4rem;
    margin-inline: 5px;
}

#follow_button{
    background-color: white;
    padding: 12px 45px;
    border-radius: 100px;
    color: rgb(41, 77, 136);
    margin-bottom: 50px;
    transition: all 0.3s ease-in-out;
    border: none;
    
}

#follow_button:hover{
    background-color: rgb(180, 212, 221);
}

.carousel-container {
    overflow: hidden;
    position: relative;
    width: 93%;
    margin:0 auto;
  }
  
  .carousel {
    display: flex;
    transition: transform 0.5s ease;
    gap:5px;

  }
  
  .carousel-item {
    flex: 0 0 20%; 
    max-width: 20%;
    /* justify-content: center; */
  }
  
  .slides {
    max-width: 100%;
    /* width: 93%; */
    height: auto;
  }
  
  .prev-btn,
  .next-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 10px 20px;
    border: none;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    cursor: pointer;
  }
  
  .prev-btn {
    left: 10px;
  }
  
  .next-btn {
    right: 10px;
  }

footer{
    font-family: 'Roboto', sans-serif;
    color: rgb(41, 77, 136);
    padding-top: 30px;
    background-color: white;
}

#footer_icon{
    align-self: center;
}

.contact_info{
    display: flex;
    justify-content: space-evenly;
}

.info{
    line-height: 25px;

}

.info ul{
    list-style-type: none;
}

footer p{
    text-align: center;
}

.social{
    text-decoration: none;
    color: rgb(41, 77, 136);
}

.social:hover{
    opacity: 75%;
}

p a {
    color: rgb(41, 77, 136);
}

p a:hover{
    opacity: 75%;
}

hr{
    width:95%; 
    background-color: rgb(41, 77, 136);
    height: 1px;
    border: 0;
    
}

/* footer ul{
    padding-inline:0;
    margin-inline:25px;
} */

.footer_note{
    font-size: small;
    margin-block: 30px;
}





@media screen and (max-width: 1153px){

    .big h1{
        /* font-size: 4rem; */
        font-size: 3.5rem;
        line-height:65px;

    }

    .big br{
        display: none;
    }

    .big p{
        margin-top: -50px;
    }


}
    







@media screen and (max-width: 1045px){

    .zoom_box{
        display: grid;
        grid-template-columns: 1fr 1fr;
        max-width: 750px;
    }

    .container-3{
        padding-bottom: 0;
    }

    .client_section{
        flex-direction: column;
        gap:25px;
        margin-inline:50px;
    }

    .client_card{
        margin-inline:auto;
        width:100%;
        max-width:750px;
    }

    .offset{
        position: static;
        margin-top: 0px;
    }
}



@media screen and (max-width: 950px){


    .bars{

        position: fixed;
        z-index:3; 
        top:0;
        right:0;
        display:inline-block;
        margin-top:25px;
       
    }
    
    
    nav{
        flex-direction: column;
        z-index: 3;
        position:fixed;
        top:0;
        right:0;
        padding-top:0;
        padding-inline:25px;
        margin-top: 75px;
        background-color: rgb(41, 77, 136);
        transition: 0.3 ease;
    }

    .nav_buttons{
       background-color: none;
       border-radius: 0;
       padding:0;
       margin-block: 5px ;
    }

    .nav_buttons:hover{
        color:rgb(180, 212, 221);
    }

    nav div:nth-of-type(5) .nav_buttons{
        display: inline-block;
    }

    .pro{
        display: none;
    }

    nav div:nth-of-type(6) .nav_buttons, .login, .login span{
        display: none;

    }
   

    .active{
        background-color: transparent;
        /*This is a bandaid solution. Find a way to get rid of this class, not hide it*/
    }



    #navbar.hidden {
        display: none;
    }

    

}













@media screen and (max-width: 925px){




    .container-1{
        display: flex;
        flex-direction: column;
    }

    .big{
        padding-right:50px ;
        width: 75%;
    }


    .white{
        order:3;
        margin-top: -12vw;
    }

    

    .atagbtn , #chat{
        display: none;
    }

    .container-2{
        padding-top: 75px;

    }

    .container-4 h2 br{
        display: none;

    }

    .carousel-container{
        width:95%;
    }

    
    .carousel {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        /* gap:25px; */
        gap:3.5vw;
    }

    .carousel-item{
         max-width:100%;
         margin-inline:auto;
         flex:0 0 0;
         
    }

    .prev-btn, .next-btn{
        display:none ;
    }


}





@media screen and (max-width: 650px){

    .container-2 h2{
        font-size: 3rem;

    }

    .container-2 h2 br{
        display: none;
    }

    .perks{
        flex-direction: column;
        width: fit-content;   
        margin-inline:auto;     
        padding-inline:25px;
    }

    .perks_img{
        align-self: start;
        /* align-items: center; */
        width:fit-content;
    }


    .container-3 h2{
        font-size: 3rem;
        padding-inline: 5px;
        margin-top:0;
    }

    .container-4 h2{
        font-size: 3rem;
    }


    .carousel-container{
        width: 100%;
    }

    .carousel {
        grid-template-columns: 1fr 1fr;
        /* row-gap:0px; */
    }




    footer .contact_info{
        display: inline-block;
    }

   

}

@media screen and (max-width: 500px){

    #aside_img{
        margin-inline:-15px ;
        padding-inline: 0;
    }




    .container-1 .big h1{
        font-size: 2.5rem;
        line-height: 50px;
    }

    .big p{
        font-size: 1.5rem;
        line-height: 40px;
        padding-top: 30px;
    }
    .big{
        padding-inline: 15px;
    }

    .container-2 h2{
        font-size: 2.5rem;

    }

    .container-4 h2{
        font-size: 2.5rem;
    }



}



@media screen and (max-width: 400px){

   

    .client_section{
        margin-inline:10px;
    }

    .container-3 h2{
        font-size: 2rem;
    }

    .zoom_box{
        display: inline-block ;
    }

    .zoom_container{
        margin-top: 15px;
    }



    .carousel{
        display: inline-block;
    }

    .carousel-item{
        margin-top: 15px;
    }
}


  



  


  





font-family: 'Roboto', sans-serif;