@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Raleway:wght@400;600&display=swap');
/* Reset */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
html, body{
  height:100%;
  overflow-x:hidden;
}
html{
  scroll-behavior:smooth;
}

body{
  font-family:'Raleway', sans-serif;
}

/* Typography */

h1,h2,h3{
  font-family:'Playfair Display', serif;
}

/* Layout */

.container{
  width:100%;
  max-width:1200px;
  margin:auto;
  padding:0 24px;
}

/* Header */

.site-header{
  background:white;
  padding:24px 40px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  box-shadow:0 1px 4px rgba(0,0,0,0.05);
}

/* Hero */

.hero-section{
  position:relative;
  min-height:100vh;
  padding:80px 24px;
  max-width:1200px;
  margin:auto;

  background-image:url("../images/main_room_green.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  display:grid;
  gap:40px;
}

.hero-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.35);
}

.hero-section{
  position:relative;
  z-index:1;
}

/* Reveal animation */

.reveal{
  opacity:0;
  transform:translateY(40px);
  transition:opacity 0.8s ease, transform 0.8s ease;
}

.reveal.active{
  opacity:1;
  transform:translateY(0);
}

/* Chatbot button */

#openAI{
  position:fixed;
  bottom:20px;
  right:20px;
  background:#2563eb;
  color:white;
  border:none;
  padding:12px 18px;
  border-radius:20px;
  cursor:pointer;
  z-index:1000;
}

#openAI:hover{
  background:#1d4ed8;
}

/* Chatbox */

#chatbox{
 display:none;
 position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:95%;
 max-width:900px;
  height:85vh;
  max-height:700px;
  flex-direction:column;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,0.2);
  pointer-events:auto;
  z-index:2000;
  transition:all .25s ease;
  backdrop-filter: blur(8px);
}

#chatbox iframe{
 flex:1;
  width:100%;
  height:100%;
  border:none;
  display:block;
  
}
#chat-header{
 position:relative;
 z-index:10;
  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:10px 14px;

  background:#2563eb;
  color:white;
  font-weight:600;
}

#closeChat{
  background:none;
  border:none;
  color:white;
  font-size:20px;
  cursor:pointer;
 pointer-events:auto;
}
#chat-wrapper{
  position:fixed;
  pointer-events:auto;
  z-index:1000;
}



@media (max-width:1020px){
#chatbox{
 right:10px;
 left:10px;
 width:auto;
 top:auto;
 bottom:20px;
 transform:none;
 height:70dvh;
 max-height:none;
 border-radius:10px;


}
}