/* Global Variables */
:root {
  --gk-primary1: #336699;
  --gk-primary2: #86bbd8;
  --gk-primary3: #2f4858;
  --gk-secondary1: #9ee493;
  --gk-secondary2: #daf7dc;
  --gk-white: #fff;
  --gk-gray: #333;
}

/* Reset & base */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Roboto', sans-serif; line-height: 1.6; background: var(--gk-secondary2); color: var(--gk-gray); }
a { color: inherit; text-decoration: none; }

/* Header */
gkheader {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100dvh;
  background: linear-gradient(135deg, var(--gk-primary2), var(--gk-primary1));
  color: var(--gk-white);
  padding: 0 20px;
}
gkheader h1 {
  font-size: clamp(1.8rem, 6vw, 3.25rem);
  margin-bottom: -.9rem;
}
gkheader p {
  font-size: 1.35rem;
  margin-bottom: 1.5rem;
}

gkheader .cta-btn {
  padding: 0.8rem 2rem;
  background: var(--gk-secondary1);
  color: var(--gk-gray);
  border-radius: 5px; 
  font-weight: bold; 
  transition: transform 0.2s;
}
gkheader .cta-btn:hover { 
    transform: scale(1.05);
    background: var(--gk-secondary2);
    cursor: pointer;
}

/* Contact */
section.contact {
  padding: 20px 20px;
  text-align: center;
  background: var(--gk-primary3);
  color: var(--gk-white);
}
section.contact h2 { margin-bottom: 20px; }
.icon-buttons {
    display: flex;
    justify-content: center;
    gap: .6rem;
    flex-wrap: wrap;
}
.contact-title {
  font-size: 2.1rem;
  text-align: center;
  font-weight: bold;
}
.icon-buttons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px; 
  height: 60px;
  background: var(--gk-secondary1);
  color: var(--gk-gray);
  border-radius: 8px;
  font-size: 1.6rem;
  text-decoration: none;
  transition: transform 0.2s;
}
.icon-buttons a:hover {
  transform: scale(1.1);
  background: var(--gk-secondary2);
}

footer { text-align: center; 
    padding: 20px; 
    font-size: 0.9rem; 
    color: var(--gk-primary3); 
}

/* Responsive */
@media(max-width: 600px){
  header h1 { font-size: 2.2rem; }
  header p { font-size: 1rem; }
}

html {
  scroll-behavior: smooth;
}

/* Scrollbar */
/* Target whole page scrollbars */
html, body {
  scrollbar-width: thin;
  scrollbar-color: var(--gk-secondary1) var(--gk-primary3);
}