/* Reset */
*{ 
    box-sizing:border-box; 
    margin:0; 
    padding:0; 
}

html, body{
  background:#fff; color:#0b0b0b;
}

body{ 
    font-family:"Urbanist", sans-serif; 
}

#contact-page{
  width:1440px;
  height:680px;
  margin:0 auto;
  padding:40px;
  position:relative;
}

/* Back strelica */
.back-home{
  position: fixed;
  top:16px; 
  right:16px;
  width:44px; 
  height:44px;
  display:grid; 
  place-items:center;
  background:rgba(255,255,255,0.75);
  backdrop-filter: blur(6px);
  border-radius:999px;
  box-shadow:0 6px 18px rgba(0,0,0,.14);
  color:#111; 
  text-decoration:none;
  z-index:120;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.back-home:hover{ 
    transform:translateY(-2px); 
    box-shadow:0 12px 28px rgba(0,0,0,.18); 
    background:#fff; 
}


.back-home:active{ 
    transform:translateY(0); 
}

.back-home,
.back-home:hover,
.back-home:focus,
.back-home:active {
  text-decoration: none;
}

.material-symbols-rounded{
  font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24;
  font-size:15px; line-height:1;
}

/* Intro */
.Intro{
  position:fixed; 
  inset:0;
  background:#fff; 
  z-index:9999;
  display:grid; 
  place-items:center;
}

.Intro .letters{ 
    position:relative; 
    width:120px; 
    height:120px; 
}

.Intro .letter{
  position:absolute; 
  top:50%; transform:translateY(-50%);
  font-family:"Urbanist", sans-serif;
  font-weight:300; 
  font-size:24px; 
  color:#111; opacity:0;
}

.Intro .letter.m{ 
    left:20px; 
}

.Intro .letter.g{ 
    right:20px; 
}

.Intro.fadeout{ 
    transition:opacity 500ms ease, visibility 500ms ease; 
    opacity:0; 
    visibility:hidden; 
}

/*Language switcher*/

.lang-switch {
  position: fixed;
  top: 16px;
  right: 70px; 
  display: flex;
  gap: 10px;
  z-index: 130;
}

.lang-switch .lang-btn {
  border: 1px solid rgba(0,0,0,0.2);
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(6px);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.lang-switch .lang-btn:hover { 
  transform: translateY(-1px); 
}


.lang-switch .lang-btn.is-active { 
  border-color: #111; 
  font-weight: 600; 
}

.header{ 
    margin-bottom:24px; 
}

#title{
  font-family:"Urbanist", sans-serif;
  font-weight:400;              
  font-size:60px;
  line-height:.95;
  letter-spacing:.01em;
  margin:0 0 16px 0;
}


.subtitle{
  font-family:"Outfit", sans-serif;
  font-weight:300;
  font-size:22px;              
  line-height:1.35;
  max-width:62ch;
  margin-top: 50px;
}


.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  column-gap:120px;
  row-gap:32px;
  align-items:start;
  margin-top:120px;
}

.col .block{
    margin-bottom:28px; 
}

.name{
  font-family:"Outfit", sans-serif;
  font-weight:400;             
  font-size:20px;
  margin-bottom:28px;
}


.label{
  font-family:"Outfit", sans-serif;
  font-weight:400;             
  font-size:20px;
  color:#0b0b0b;
  margin-bottom:6px;
}
.value{
  font-family:"Outfit", sans-serif;
  font-weight:300;              
  font-size:20px;
}


a{ 
    color:#0b0b0b; 
    text-decoration:none; 
}

a:hover{ 
    text-decoration:underline; 
}


.reveal{ 
    opacity:0; 
    transform:translateY(10px); 
}

.reveal.show{
  opacity:1; 
  transform:none;
  transition: opacity .5s ease, transform .5s ease;
}

/* Responsive*/
@media (max-width: 990px){

  #contact-page{
    width:100%;
    height:auto;
    min-height:100vh;
    padding:32px clamp(24px, 5vw, 40px);
  }

 
  #title{
    font-size:55px;
    margin:0 0 12px 0;
    font-weight:400; 
  }

  .subtitle{
    font-size:20px;
    line-height:1.45;
    margin-top:40px;
    max-width:60ch;
  }

 
  .contact-grid{
    grid-template-columns: 1fr 1fr; 
    column-gap:48px;
    row-gap:24px;
    margin-top:90px;
  }

  .col .block{ 
    margin-bottom:20px; 
}

  .name{  
    font-size:22px; 
}

  .label{ 
    font-size:18px; 
}

  .value{ 
    font-size:18px; 
}

  .back-home:hover{
    transform:none;
    box-shadow:0 6px 18px rgba(0,0,0,.14);
  }
}


@media (max-width: 755px){

  #contact-page{
    width:100%;
    height:auto;
    min-height:100vh;
    padding:20px clamp(16px, 4vw, 24px);
  }

 
  #title{
    font-size:clamp(28px, 7vw, 44px);
    margin:0 0 10px 0;
    font-weight:400;
  }

  .subtitle{
    font-size:18px;
    line-height:1.4;
    margin-top:40px;
    max-width:100%;
  }

  
  .contact-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;   
    column-gap:18px;                  
    row-gap:16px;
    margin-top:90px;
  }

  .col .block{ 
    margin-bottom:12px; 
}

 
  .name{  
    font-size:16px; 
}

  .label{ 
    font-size:16px; 
}

  .value{ 
    font-size:16px; 
}

  
  .back-home{
    width:36px; 
    height:36px;
  }

  .material-symbols-rounded{ 
    font-size:13px; 
}
}


@media (max-width: 635px){

  #contact-page{
    width:100%;
    height:auto;
    min-height:100vh;
    padding:16px clamp(12px, 4vw, 20px);
  }

 
  #title{
    font-size:clamp(24px, 7vw, 36px);
    margin:0 0 8px 0;
    font-weight:400;
  }

  .subtitle{
    font-size:16px;
    line-height:1.35;
    margin-top:40px;
    max-width:100%;
  }


  .contact-grid{
    grid-template-columns: 1fr 1fr;
    column-gap:12px;
    row-gap:16px;
    margin-top:80px;
  }

  .col .block{ 
    margin-bottom:10px; 
}

  
  .name{  
    font-size:16px; 
}

  .label{ 
    font-size:16px; 
}

  .value{ 
    font-size:16px; 
}

 
  .back-home{
    width:32px; 
    height:32px;
  }

  .material-symbols-rounded{ 
    font-size:12px; 
}
}


@media (max-width: 550px){

  #contact-page{
    width:100%;
    height:auto;
    min-height:100vh;
    padding:16px clamp(12px, 4vw, 20px);
  }

  
  #title{
    font-size:clamp(22px, 7vw, 32px);
    margin:0 0 8px 0;
    font-weight:400;
  }

  .subtitle{
    font-size:15px;
    line-height:1.35;
    margin-top:30px;
    max-width:100%;
  }

  
  .contact-grid{
    grid-template-columns: 1fr;
    column-gap:0;
    row-gap:18px;
    margin-top:60px;
  }

  .col{ 
    width:100%; 
}

  .col .block{ 
    margin-bottom:14px; 
}


  .name{  
    font-size:15px; 
}
  .label{ 
    font-size:15px; 
}

  .value{ 
    font-size:15px; 
}

 
  .back-home{
    width:30px; 
    height:30px;
  }

  .material-symbols-rounded{ 
    font-size:12px; 
}
}

/*Selekcija teksta*/
::selection {
  background: #c69fd5;
  color: #fdfdc9;
}
::-moz-selection {
  background: #c69fd5;
  color: #fdfdc9;
}