/* @media all and (min-width:1024px) */

body {
background-image: url(./assets/Hero-image-lg.png);
}

nav{max-width: var(--site-contant-lg);
align-items:baseline;
margin:auto;}

ul{ display:flex;
gap:20px;
list-style:none;
padding-inline-start:0;
padding-inline-end:100px;
}

ul li {position: relative;
padding-block:5px;
}
  
ul li ul {position:absolute;
display: none;
}
 
ul li:hover ul {top: 27px;
display: block;
background-color:var(--classic-beige);
border-radius:10%;
max-width:70px;
}

.navbar-list li a{padding:5px 7px;
font-size:0.9em;
font-weight:bold;
}

li>a:hover {background-color:var(--sunny-yellow); 
border-radius:15px;
filter:opacity(40%);
}

.sidebarIconToggle{display:none;}
#sidebarMenu{display:none;}

.social-media { display:flex;
gap:10px;
}

a{text-decoration:none;
color:var(--night-blue);
}

.instagram,.youTube{
padding:5px 5px;
background-color:var(--sunny-yellow);
}

.instagram:hover{background-color:#e1306c;
}
.youTube:hover{background-color:#ff0000;
}

.logo{ 
font-size:2.5em;
color:var(--night-blue);     
}

.logo:hover{transform: scale(1.1);}

.hero-image{display:block;
 padding-top:45rem;
}

.hero-contant{display:flex;
  flex-direction:column;
  max-inline-size: 70ch;
}

footer{
flex-direction: row;
justify-content:space-between;
padding-inline:128px;
}

.mail:hover{font-weight: bolder;}

.footer-profile{padding-block-start: 0.7rem;}

.footer-contact{display:flex;
  flex-direction:column;
  padding-inline-start:48px;
}
.footer-social{gap:10px;
}

.footer-support{align-content:center;
}

.footer-support:hover{transform: scale(1.1);
}

.rounded-image{width:180px;
height:180px;
}

.rectangle-image{width:600px;
height:420px;
}

.square-image{width:200px;
height:200px;
}

.flex-row{display:flex;
  gap:25px;
}

.divider{display:flex;
  max-width:var(--site-contant-lg);
}
.row-reverse{flex-direction:row-reverse;
}

.grid-container{display:grid;
grid-template: repeat(2,280px)/ repeat(3,280px);
gap:10px;
padding:50px;
justify-content:center;
}

.info-container{display:flex;
flex-direction:row-reverse;
gap:60px;
padding:80px;}