* {
 box-sizing: border-box;
 scroll-behavior:smooth;
}

:root {
  --night-blue: #1A2A44;    /* Derin Gece Mavisi */
  --sunny-yellow: #FFD700;  /* Güneş Sarısı Dikkat Çekici*/
  --classic-beige: #Fafafa; /* Arka Plan Bej */
  --charcoal-black: #333333;/* Footer Arka Plan */
  --white: #FFFFFF;
  --site-contant-lg:1390px;
  --site-contant-md:700px;
  --site-contant-sm:370px;
}

html {
  font-size: clamp(0.5rem, 0.65rem + 1.5vw, 1rem);}

body {
margin: 0;
font-family:quicksand, sans-serif;
background-color: var(--classic-beige);
background-image:url(./assets/Hero-image.png);
background-repeat: no-repeat;
background-size:auto;
}

.tab-body{background-image:none;}

h1,h2,h3,h4,.logo{font-family:'Caveat', sans-serif;
color:var(--night-blue);}

h2{font-size:1.7em;
  margin-block: 0;
}

h3{font-size:1.6em;
}

h3,h4,p{margin-block-start:10px;
margin-block-end: 0;
}

p{color:var(--night-blue);}

nav { display:flex;
justify-content:space-between;
align-items:center;
padding-block-start: 40px;
max-width: var(--site-contant-sm);
margin:auto;
}

#sidebarMenu {display:flex;
max-height:fit-content;
position: fixed;
right: 0;
max-width:fit-content;
transform: translateX(250px);
transition: transform 0.5s ease-in-out;
background: var(--charcoal-black);
opacity: 0.8;
border-radius:90px 0px 0px 90px;
top:90px;
}

.sidebarMenuInner li a{color:var(--white); 
}

.sidebarMenuInner li{
list-style: none;
padding:10px; 
}

.sidebarMenuInner{
display:block;
margin:0;
padding:20px 20px;  
}

input[type="checkbox"]:checked ~ #sidebarMenu {
transform: translateX(0);
}

input[type=checkbox] {
display: none;
}

.sidebarIconToggle {
background-color:var(--sunny-yellow);
position: relative; 
padding:10px 10px;
border-radius:50px 50px;
}

ul{display:none;}

li>a{padding:5px 7px;
  font-weight:400;
}

.social-media {display:none;
}
  
a{text-decoration:none;
color:var(--night-blue);
}

.logo{ 
font-size:40px;
color:var(--night-blue);     
}

.hero-image{display:block;
 padding-block-start:38rem;
}

.hero-contant{ 
text-align:center;
margin:auto;
max-inline-size: 30ch;
padding-block-end:38px;
}

.hero-paragraph{font-size:0.8em;
font-weight: bold;
line-height: 18px;
margin-bottom:0;
}

footer{display:flex;
  flex-direction:column;
  align-items:center;
  background-color:var(--charcoal-black);
  padding-block:10px; 
}

.footer-contact{display:flex;
  flex-direction:column;
  align-items:center;
  gap:15px; 
}

.footer-social{display:flex;
flex-direction:row;
gap:12px;
}

.footer-support{display:flex;
flex-direction:column;
align-items:center;
padding-block-start: 15px;  
}

.beige-text{color:var(--classic-beige);
}

.mail{font-size:large;}

.instagram,.youTube{
padding:8px 8px;
border-radius:50px 50px;
background-color:var(--sunny-yellow);
}

.rounded-image{width:150px;
height:150px;
border-radius:50%;
object-fit:cover;
border:5px solid var(--sunny-yellow);
}

.rectangle-image{width:385px;
height:260px;
border-radius:10%;
object-fit:cover;
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}

.square-image{width:180px;
height:180px;
border-radius:10%;}

.article-container{ display:flex;
flex-direction:column;
gap:25px;
padding:25px;
justify-content:center;
}

.article-container{align-items:center;
}

.divider{border-bottom: 1px solid var(--sunny-yellow);
max-width:var(--site-contant-sm);
}

article:nth-child(2){text-indent:20px;
}

span.hastag{color:var(--sunny-yellow);
font-weight:bold;}

p>a{font-style: italic;
font-weight: bold;}

.grid-container{display:grid;
grid-template: repeat(1,1fr)/ repeat(1,1fr);
gap:10px;
padding:30px;
justify-items:center;
}

.InnerGrid{display:flex;
flex-direction:column;
align-items:center;
padding:5px;
border-radius:10%;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
text-align:center;
max-height:fit-content;
max-width:fit-content;
}

.InnerGrid:hover{transform:scale(1.1)}

.info-container{display:flex;
  flex-direction:column;
gap:40px;
padding:20px;}

.presentation-container{display:flex;
  width:90%;
  height: 85%;
  margin: auto;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  scroll-snap-type: x mandatory;
  padding-block:90px;
}

.presentation{text-align:center;
padding:5px;}