@font-face {
    font-family: Mukta;
    src: url(fonts/Mukta-Light.ttf);
    font-display: swap;
}

@font-face {
    font-family: Mukta Light;
    src: url(fonts/Mukta-ExtraLight.ttf);
    font-display: swap;
}

@font-face {
    font-family: Pacifico;
    src: url(fonts/Pacifico-Regular.ttf);
    font-display: swap;
}

html {
  scroll-behavior: smooth;
}

body {
    padding:0;
    margin:0;
}

* {
    -webkit-tap-highlight-color: transparent;
}

@media screen and (min-width:769px){

.navbar-small {
    position: fixed;
    top:10px;
    left:10px;
}

.navbar-small a {
    list-style-type: none;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    gap:0.5em;
    font-weight: 500;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
}

.navbar-small a::before {
    content: "\2190";
}

.hero {
    background-image: url('../img/fewo8.jpeg');
    background-size: cover;
    background-position: center;
    width: 100%;
    font-family: "Mukta Light";
    min-height: 100vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
    color: white;
    text-align: center;
}

.hero-content {
    background-color: rgba(0, 0, 0, 0.8);
    padding:1em;
    font-size: 1em;
    border-radius: 10px;
    width: fit-content;
    margin-left:10%;
    max-width: 30%;
    line-height:1.5;
    text-align: left;
}

.hero-content h1 {
    font-family: "Mukta";
    font-weight: 500;
}

.hero-content p {
    font-size: 1em;
    font-family: "Mukta";
    line-height:1.5;
}

.images-area-a {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem; 
    padding: 1rem;
}

.images-area img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: transform 0.2s ease-in;
}

.images-area img:hover {
    transform: scale(1.03);
}

.gap-images {
    gap:1em;
    display: flex;
    flex-direction: column;
}

.general-area, .equipment-area, .contact-area {
    margin:100px 0;
    padding:3em;
}

.general-content{
    width:100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap:1em;
    padding:1em;
    box-sizing: border-box;
}

.equipment-content {
    width:100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap:1em;
    padding:1em;
    box-sizing: border-box;
} 

.general-area h2, .equipment-area h2, .contact-area h2 {
    font-family: "Pacifico";
    display: flex;
    align-items: center;
    gap:0.5em;
    font-weight: 200;
    justify-content: center;
    margin-bottom: 3em;
}

.general-area h2 i, .equipment-area h2 i, .contact-area h2 i {
    font-size: 2em;
}

.general-kachel {
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    width:100%;
    box-sizing: border-box;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.equipment-kachel {
  background: linear-gradient(135deg, #6A4C93, #8C6AC2);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.general-kachel:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.15)
}

.equipment-kachel:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
  background: linear-gradient(135deg, #5C3D84, #7A58B8);
}

.general-kachel h3, .equipment-kachel h3 {
    font-family: "Mukta";
    font-weight: 100;
    color:#086A87;
}

.general-kachel i {
    color:black;
}

.general-kachel p {
    line-height: 1.6;
    font-family: "Mukta";
    color:#555;
}

.equipment-kachel p {
    font-size: 1.1rem;
    font-family: "Mukta Light";
    color:#ffffff;
    line-height: 1.4;
    margin: 0.5rem 0 0;
}

.equipment-kachel i {
    color:green;
}

.equipment-kachel span {
    font-size: 0.925em;
    font-family: "Mukta Light";
    color:#e8e8e8;
    margin:10px 0 0 10px;
    display: inline-block;
}

.contact-splitter {
    width:100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.contact-part, .contact-part-b {
    padding:2em;
    line-height: 1.8;
    font-size: 1.1em;
    box-sizing: border-box;
    width:100%;
    font-family: "Mukta Light";
}

.contact-part-b p{
    display:flex;
    gap:0.5em;
    align-items: center;
}

.contact-part a, .contact-part-b a {
    text-decoration: none;
    color:inherit;
}

.notice {
    font-size: 0.95em;
    font-family: "Mukta";
    margin-top:3em;
}

.footer-area {
  background-color: #333333;
  color: #fff;
  font-family: "Mukta Light";
  padding: 1em;
  font-size: 0.95rem;
}

.footer-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}

.footer-flatname h3 {
  font-weight: 300;
}

.footer-contact p, .footer-links ul {
  margin: 0.3rem 0;
}

.footer-links ul {
  list-style: none;
  padding: 0;
}

.footer-links a, .footer-contact a {
  color: #fff;
  text-decoration: none;
  transition: color 0.2s;
}

.footer-links a:hover {
  color: #FFD93D;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.3);
  padding-top: 1rem;
  text-align: center;
  font-size: 0.85rem;
}

.footer-bottom p {
    padding:0;
    margin:0;
}

.footer-bottom a {
  color: #FFD93D;
  text-decoration: none;
}

.footer-bottom a:hover {
  text-decoration: underline;
}

.cookie-banner {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Mukta Light";
  background-color: #333; 
  color: #fff;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  gap: 1rem;
  z-index: 1000;
  max-width: 600px;
  font-size: 0.95rem;
}

.cookie-banner button {
  background-color: #FFD93D; 
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.95rem;
  color: #333;
}

.cookie-banner button:hover,
.cookie-banner button:focus {
  background-color: #FFC107;
  outline: none;
}

}




@media screen and (max-width:768px){

.navbar-small {
    position: fixed;
    top:10px;
    left:10px;
}

.navbar-small a {
    list-style-type: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #333;
    gap:0.5em;
    font-weight: 500;
    padding:0.5em;
    font-size: 1em;
    border-radius: 10px;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
}

.navbar-small a::before {
    content: "\2190";
}

.hero {
    background-image: url('../img/fewo8.jpeg');
    background-size: cover;
    background-position: center;
    width: 100%;
    font-family: "Mukta Light";
    min-height: 100vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
    color: white;
    text-align: center;
}

.hero-content {
    background-color: rgba(0, 0, 0, 0.8);
    padding:1em;
    font-size: 1em;
    border-radius: 10px;
    width: 80%;
    margin:auto;
    line-height:1.5;
    text-align: left;
}

.hero-content h1 {
    font-family: "Mukta";
    font-weight: 500;
}

.hero-content p {
    font-size: 1em;
    font-family: "Mukta";
    line-height:1.5;
}

.images-area-a {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem; 
    padding: 1rem;
}

.images-area img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: transform 0.2s ease-in;
}

.images-area img:hover {
    transform: scale(1.03);
}

.gap-images {
    gap:1em;
    display: flex;
    flex-direction: column;
}

.general-area, .equipment-area, .contact-area {
    margin:100px 0;
}

.general-content{
    width:100%;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap:1em;
    padding:1em;
    box-sizing: border-box;
}

.equipment-content {
    width:100%;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap:1em;
    padding:1em;
    box-sizing: border-box;
} 

.general-area h2, .equipment-area h2, .contact-area h2 {
    font-family: "Pacifico";
    display: flex;
    align-items: center;
    gap:0.5em;
    font-weight: 200;
    justify-content: center;
    margin-bottom: 3em;
}

.general-area h2 i, .equipment-area h2 i, .contact-area h2 i {
    font-size: 2em;
}

.general-kachel {
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    width:100%;
    box-sizing: border-box;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.equipment-kachel {
  background: linear-gradient(135deg, #6A4C93, #8C6AC2);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.general-kachel:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.15)
}

.equipment-kachel:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
  background: linear-gradient(135deg, #5C3D84, #7A58B8);
}

.general-kachel h3, .equipment-kachel h3 {
    font-family: "Mukta";
    font-weight: 100;
    color:#086A87;
}

.general-kachel i {
    color:black;
}

.general-kachel p {
    line-height: 1.6;
    font-family: "Mukta";
    color:#555;
}

.equipment-kachel p {
    font-size: 1.1rem;
    font-family: "Mukta Light";
    color:#ffffff;
    line-height: 1.4;
    margin: 0.5rem 0 0;
}

.equipment-kachel i {
    color:green;
}

.equipment-kachel span {
    font-size: 0.925em;
    font-family: "Mukta Light";
    color:#e8e8e8;
    margin:10px 0 0 10px;
    display: inline-block;
}

.contact-splitter {
    width:100%;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
}

.contact-part, .contact-part-b {
    padding:1em;
    line-height: 1.8;
    font-size: 1.1em;
    box-sizing: border-box;
    width:100%;
    font-family: "Mukta Light";
}

.contact-part-b p{
    display:flex;
    gap:0.5em;
    align-items: center;
}

.contact-part a, .contact-part-b a {
    text-decoration: none;
    color:inherit;
}

.notice {
    font-size: 0.95em;
    font-family: "Mukta";
    margin-top:3em;
}

.footer-area {
  background-color: #333333;
  color: #fff;
  font-family: "Mukta Light";
  padding: 1em;
  font-size: 0.95rem;
}

.footer-container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}

.footer-flatname h3 {
  font-weight: 300;
}

.footer-contact p, .footer-links ul {
  margin: 0.3rem 0;
}

.footer-links ul {
  list-style: none;
  padding: 0;
}

.footer-links a, .footer-contact a {
  color: #fff;
  text-decoration: none;
  transition: color 0.2s;
}

.footer-links a:hover {
  color: #FFD93D;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.3);
  padding-top: 1rem;
  text-align: center;
  font-size: 0.85rem;
}

.footer-bottom p {
    padding:0;
    margin:0;
}

.footer-bottom a {
  color: #FFD93D;
  text-decoration: none;
}

.footer-bottom a:hover {
  text-decoration: underline;
}

.cookie-banner {
  position: fixed;
  bottom: 1rem;
  left: 5%;
  font-family: "Mukta Light";
  background-color: #333; 
  color: #fff;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  gap: 1rem;
  z-index: 1000;
  width:90%;
  font-size: 0.95rem;
}

.cookie-banner p {
    padding:0;
    margin:0;
}

.cookie-banner button {
  background-color: #FFD93D; 
  border: none;
  padding: 0.5em;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  width:100%;
  color: #333;
}

.cookie-banner button:hover,
.cookie-banner button:focus {
  background-color: #FFC107;
  outline: none;
}

}


.contact-button {
  padding:0.7em 1em;
  border-radius: 25px;
  font-size: 1em;
  color:#212121;
  margin-top:2em;
  background-color: #FFC107;
  border:1px solid #FFC107;
  transition: transform 0.1s ease-in;
}

.contact-button:hover {
  transform: translateY(-3px);
  border:1px solid #ddb103;
  color:#212121;
}