/******************** GENERAL********************/
    html {
        scroll-behavior: smooth; /*smooth scrolling when press link*/
        font-display: swap; /* ensures text is visible immediately and swaps in web fonts when ready */
        overflow-x:hidden; /*need for phone */
        
    }

    * {
       margin: 0; 
         /*padding: 0;*/
        font-family: Book Antiqua, Palatino, 'Palatino Linotype', 'Palatino LT STD', 'URW Palladio L', serif;
        box-sizing: border-box; /* includes padding and border in element's total width and height */
    }

    body {
        background-color: #ffffff;
        overflow-x: hidden;
        
    }

    

    
    
/*********** TRANSITION on all button and links *********/
    a, .btn {
        transition: all 0.3s ease;
    }

/******************** TOP NAV BAR **********************/

.top_nav_container {
    top: 0; 
    width: 100%;
    height: 7rem;
}

 .top_nav {
  display: flex;               /* use flexbox */
  justify-content: space-between; /* push items to opposite ends */
  align-items: center;         /* vertically center items */
  padding: 0px 100px;          /* optional padding */
}

/***********************LOGO ***************************/
    .logo img {
        height: 130px; 
        width: 230px;
    }

    .logo:hover {
        cursor: default; /*makes cursor a pointer*/
    }

/*************** GENERAL PRIMARY BUTTON *****************/
    /* Primarybutton style*/
    .btn {
        padding: 10px 30px;
        
        border-radius: 8px;
        transition: all 0.3s ease;
        text-decoration: none;
        color: white;
        border: none;
        text-decoration: none;
        font-size: 1.2rem;
       
    }
   
    /* Primary button color*/
    .btn-color-1 {
        background-color: #699BB7;
    }

    /* Secondary button color*/
    .btn-color-2 {
        background-color: #2E5668;
    }

    .btn:hover {
        background-color: #2E5668;
        color: white;
        transform: translateY(1px);
    }




/****************** DESKTOP NAV ************************/
    nav {
        background-color: #699BB7;
        height: 70px; /* 10% of viewport height, 100 takes whole page */

    } 

    nav, .nav-links {  /*apply to both*/
        display: flex; 
        align-items: center; /*vertically center items*/
        justify-content: space-around;
        padding: 0 20px;
    }


/*between clickable links*/
.nav-links {
    gap: 10rem;  /*parent needs to be flex to use*/
    list-style: none; /*remove style from html lists (bullets)*/
    font-size: 1.5rem; /*1.5 times the normal size*/
}

/*on all links*/
a {
    color: rgb(255, 255, 255); 
    text-decoration: none; /*removes underline*/
}

.nav-links > li > a:hover {
    text-decoration: underline;
    text-underline-offset: 0.5rem; /*distance between text and underline*/
    text-decoration-color: rgb(255, 255, 255) /*apply on underline*/
}



/***DESKTOP***/
/*********** DROPDOWN LANGUAGE CONTAINER *****************/
/*********** DROPDOWN SERVICES CONTAINER *****************/
    .dropbtn {
        cursor: pointer;
    }

    /*arrow icon*/
    .dropbtn img {
        width: 30px;
        height: 20px;
        vertical-align: -3px; /* moves only the icon down */
    }


/* Dropdown Language/services container*/
@media (min-width: 300px) {
    .dropdown-content {
        display: none;  /*Hides dropdown content by default !!!!!!*/
        position: absolute;
        border-radius: 6px;
        z-index: 1; 
        
    }
}

/* Just Show Dropdown on Hover*/
.dropdown:hover .dropdown-content {
  display: block;
}


.dropdown-content a { 
    display: block; /* use display:flex if have icon + text*/
    font-size: 20px; 
    padding: 10px 18px;
    transition: background 0.2s, border-radius 0.2s, transform 0.2s;
    border-radius: 6px; 
    background-color: #699BB7;
}


.dropdown-content a:hover {
 background-color: #2E5668;
  transform: translateY(1px);
}


/***********on mobile************/

/* On mobile, dropdown inside hamburger is always visible when parent li is clicked
.mobile-dropdown .dropdown-content {
    display: block; 
    position: relative;
    background-color: #fff
} 


.mobile-dropdown .dropdown-content {
    display: none;
}

.mobile-dropdown .dropdown-content.show {
    display: flex;
}

.dropdown-content-size-mobile {
    width: 150px;
}

*/

/*******************HAMBURGER MENU 3 lines******************/

    #hamburger-nav {
        display: none; /*hidden on desktop*/
    }

    /*whole hamburger container*/
    .hamburger-menu {
        position: relative; 
        display: block;
        z-index: 1;
        position:absolute; 
        right: 10%;
   
    }

    /*3 lines container*/
    .hamburger-icon {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 27px;
        width: 30px; 
        cursor: pointer;
        margin-top: 20px;

    }

    /*3 lines*/
    .hamburger-icon span {
        height: 5px; 
        border-radius: 5px;
        background-color: rgb(255, 255, 255);
        transition: all 0.3 ease-in-out
    }


/***************** MENU LINKS MOBILE********************/

/* Hide the menu off-screen initially */
.menu-links {
  position: fixed;
  top: 0;
  right: -50%; /* start hidden off the right side */
  width: 50%; /* how far it slides in (half the screen) */
  height: 100vh;
  background-color: rgb(255, 255, 255);
  box-shadow: -2px 0 8px rgba(0,0,0,0.3);
  transition: right 0.4s ease; /* smooth slide */

  overflow-y: auto; /* if content is long */
}

/*Makes the icons black*/
.menu-links a img {
     filter: brightness(0) saturate(100%);
}

/* When menu is open */
.menu-links.open {
  right: 0; /* slide in halfway */
}

.menu-links{
    display: flex;
    justify-content: center;
  
}

/* Basic styles for menu items */
.menu-links ul {
  list-style: none;
  padding: 20px 20px;
}

.menu-links li {
  margin: 20px 0;
}

.menu-links a {
  text-decoration: none;
  color: black;
  font-size: 1.5rem;
  
}

.dropdown-content-size-mobile {
    width: 180px;
    text-align: center;
    position: relative;
    
}

/* the services*/
.dropdown-content-size-mobile span{
    font-size: 1.2rem;
    color:white;
}

.dropdown-content a {
    font-size: 1.2rem;
    color: white;
}

.close-btn {
    position: absolute;
    top: 15px;
    right: 50px;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
}

.close-btn img {
    width: 15px;
    height: 15px;
}



    /****************** MEDIA QUERIES ********************/

@media screen and (max-width: 1200px) {
    .nav-links {
        gap: 5rem;
    }    
}

@media screen and (max-width: 768px) {
     .nav-links {
        gap: 2rem;
        padding: 0 ;
    }    

 
}

@media screen and (max-width: 600px) {
    .top_nav {
        padding: 0px 20px;          
    }
    .logo img {
        height: 120px; 
        width: 200px;
    }
     .book_appoint_container a {
        padding: 10px 10px;            
    }

    #hamburger-nav {
        display: block; /*show on mobile*/
    }

    #desktop-nav {
        display: none; /*hide on mobile*/
    }

    
}

@media (max-width: 400px) {

    .logo img {
        width: 150px;
        height: 100px;
    }

    .book_appoint_container a {
        font-size: 1rem;
    }
}