/*HEADER */
header {max-width:100vw; position:sticky; top:0; z-index: 1000;font-family: "Exo 2", sans-serif;
font-weight: 300; text-transform: uppercase;color: white;padding: 0 0;}

bg-top {display:block; height: 90vh; width: 100vw;background-size: cover;background-color: #5ebadb;background-position: center;background-repeat: no-repeat;}

.glass-card {position: absolute; font-weight: 300;background: rgba(0, 0, 0, 0.06);
border-radius: 20px;border: 1px solid rgba(100, 100, 100, 0.18); box-shadow: 0 0px 15px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); 
padding: 40px 0px; color: #fff; height: auto;left:10%; right:10%;top:20px;overflow: hidden;
transition: left 0.6s ease, right 0.6s ease, background 0.6s ease;}

.glass-card.open {border-radius: 20px;}
.glass-card img {position:absolute;width:180px; left:50%;transform: translate(-50%, -50%);cursor:pointer;}
.glass-card lefft{Position:absolute;top:25px;left:6%;}
.glass-card rright{Position:absolute;top:25px;right:6%;}

body.scrolled .glass-card {background: rgba(0, 0, 0, 0.5); border-radius: 20px;box-shadow: 0 0px 20px rgba(0, 0, 0, 0.3); left:15%;right:15%;}

button {background: #5ebadb;color: white;cursor: pointer;transition: background 0.3s;}
button :hover {background: none;color: #fff;padding:0 0;}

footer { text-align: center; text-decoration:none; padding: 1.5rem; padding-bottom:5rem; 
background:  linear-gradient( -5deg, #5ebadb -25%, transparent 50% ); font-size: 0.9rem; color: #555; min-height:200px;}
footer a{text-decoration:none; color:#000;padding:0.7rem;border-radius:1.4rem;transition: box-shadow 0.5s, color 0.3s ease;}
footer a:hover{color:#00BCDD; box-shadow: inset 0 0 0 2px #00BCDD; transition: box-shadow 0.3s, color 0.3s ease;}
footer p{font-size: 0.9rem;}
footer ul{ padding:0;}
footer ul li {display: inline-flex;align-items: center;}
footer .mail{text-decoration:none;color:#000;transition: color 0.3s ease;}
footer .mail:hover{ color:#00BCDD;box-shadow: none;transition: color 0.3s ease;}

.mobile-menu { display:none;}

/*NAV(Desktop)*/
.navbar {display: flex;justify-content: space-between;align-items: center;border:none;padding:0;}
nav {position:relative;display: flex; z-index: 10;padding: 0 0;}
nav ul {display: flex;justify-content: center;list-style: none;padding: 0;margin: 0;gap: 2rem;}
nav a {display: inline-block;transform-origin: center;text-decoration: none;color: white;
font-size: 1.5rem; transition: color .25s ease, transform .25s ease; white-space: nowrap;}
nav a:hover {background: rgba(255, 255, 255, 0.1);border-radius:36px;padding:6px 18px;box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.3);
border-color:#000;transform: scale(0.98);color:#f7f7f7;margin:-6px -18px;}

.menu-toggle {position: absolute;display: none;font-size: 48px;background: none;border: none;color: #5ebadb;cursor: pointer;
right: 20px;top:-35px;z-index: 20;padding: 0;} 

.menu-phone {position: static;display: none;width: 32px; height: 32px;color: lightgreen;background: none;border: none;cursor: pointer;padding: 0;
  align-items: center;justify-content: center;margin-left: 20px;line-height: 0;}

.phone-icon {width: 100%;height: 100%;display: block;   fill: #7fc4eb;transition: fill 0.3s ease;}
.menu-phone:hover .phone-icon {fill: #9fe0ff;}

@media (max-width: 1100px) {
bg-top {height: 120vh; max-height: 650px;}
nav a {color: #ccc;font-size: 1.1rem;white-space: nowrap;transition: font-size 0.5s ease, color .25s ease, transform .25s ease;}
body.scrolled .glass-card {left:10%;right:10%;}

.glass-card img{width:150px;transition: width 0.5s ease;}
.glass-card lefft{top:28px;left:5%;}
.glass-card rright{top:28px;right:5%;}

}

@media (max-width: 768px) {
    
bg-top {height: 90vh;max-height: none;}
.glass-card {left:5%;right:5%;}  
body.scrolled .glass-card {left:12%;right:12%;}
body.scrolled .glass-card img{width: 130px;}
.menu-toggle { display: block; position: absolute; right: 20px;}
.menu-phone {display: block; position: absolute;}
.mobile-menu {display: flex;flex-direction: column;align-items: center;gap: 14px;max-height: 0;opacity: 0;padding: 0;background: none;transition: max-height .7s ease, opacity .4s ease, padding .3s ease;}
.mobile-menu.show {max-height: 320px; opacity: 1; padding: 40px 0 20px;}
.mobile-menu a {color: #fff;text-decoration: none;font-size: 1.5rem;padding: 12px 0;width: 100%;text-align: center;transition: color 0.25s ease;}
.mobile-menu a:hover { color: #5ebadb;}
nav ul {display: none;}
footer {padding: 0.5rem;}
footer a{padding:1rem;} 

}

@media (max-height: 750px) {    
bg-top {height: 120vh; min-height: 600px; max-height:650px;}
}

@media (max-width: 400px) {  
    html {font-size: 80%;}
}