/* reuseable styled below */



html {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  overflow-x: hidden;
  font-family: "Spartan", sans-serif;
  height: 100%;
  background-color: #f5f7fa; /* ljus, ren bakgrund istället för #e0e0e0 */
}

/* REUSABLE STYLES BELOW*/

.flex {
  display: flex;
}
.align-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}

.column {
  flex-direction: column;
}

/* GENERAL STYLES BELOW */

.main {
  width: 100%;
  height: 80%;
  display: flex;
  flex-direction: column;
}

.pages {
  min-height: 60rem;
  overflow: hidden;
  border-bottom: solid 0.5px #d6d6d6; /* lite mjukare än #cecdcd */
  justify-content: center;
  display: flex;
}

.hidden-scroll-div {
  top: 0;
  visibility: hidden;
  height: 0;
  width:0;
}

/* PAGE one STYLES BELOW*/

#menu{
  display: none;
}

.hamburger-icon{
  display: none;
}

.header {
  width: 100%;
  height: 4rem;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  background-color: #f5f7fa; /* ljusare än #e0e0e0 */
  color: #1f1f1f; /* mörkare text än #181818 */
  overflow: hidden;
  align-items: center;
  z-index: 2;
  box-shadow: 0 -6px 10px 5px rgba(0,0,0,0.15);
}

.header-list {
  display: flex;
  width: 100%;
  justify-content:center
}
.header ul {
  display: flex;
  margin: 0;
}

.header ul li {
  display: flex;
  list-style: none;
  margin: 2rem;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 1rem;
  align-items: center;
}

.header ul li:hover {
  color: #0d6efd; /* bootstrap-blå */
}

.logo img {
  height: 100%;
  width: 100%;
}

.logo {
  height: 3rem;
  margin: 1.5rem;
}

.info-box-page-one {
  display: flex;
  left:0;
  height:100%;
  width:33rem;
  bottom:0;
  font-size: .9rem;
  color: rgb(0, 0, 0);
  background-color: #ffffffcc;  /* renare än #f0f0f0be */
  box-shadow: 0 -6px 10px 5px rgba(59, 59, 59, 0.1);
}

.välkommen {
  margin-top:1.2rem; 
  font-family: 'Spartan';
  font-size: 1.8rem;
  font-weight: 200;
  color: #0a4fa3; /* djupare blå */
  margin-left:1rem;
}

.title-page-one{
  line-height: 2rem;
  font-weight: 500;
  margin-top:2rem;
  margin-bottom: 0;
}

.boka-tid-knapp{
 border-style: none;
 background-color: #0d6efd; /* ny blå */
 color: #ffffff;
 padding:1rem;
 width:10rem;
 height: 4rem;
 cursor: pointer;
 margin-top:2rem;
 font-family: "Spartan", sans-serif;
 margin-left:1rem;
}

.text-div-page-one{
 width:29rem;
 margin-top: 4rem;
 height:100%;
 align-self: center;
 display: flex;
  flex-direction: column;
}

.boka-tid-knapp:hover{
  background-color: #0a4fa3; /* mörkare blå hover */
  color: #ffffff;
  border: none;
}

.page-one {
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), 
    url("bild.jpg");
  background-position: bottom;
  background-size: cover;
  display: flex;
  justify-content: flex-start;
}

.logo2 {
 height:11rem;
 margin-top:10rem;
 align-self: center;
}

/* PAGE THREE STYLES BELOW */

.om-mig-div{
  align-items: center;
}

.text-segment-om-mig{
  width:40rem;
}

.om-mig-text{
  margin-bottom:3rem;
}

.text-segment-om-mig h1{
  color: #0d6efd;
  font-size: 1.5rem;
  align-self: flex-start
}

.bild-div{
  margin-left:5rem;
}

.johnny-bild{
 height:30rem;
 border-radius: 3px;
}

.text-segment-om-mig span{
  font-size: 1.2rem;
}

/* PAGE FOUR STYLES BELOW */

.behandlings-lista{
  justify-items: center;
  display: flex;
  align-items: center;
}

.behandlings-texter{
  flex-direction: row;
  width: 100%;
  margin-top: 2rem;
  width: 50rem;
}

.behandlings-lista h1{
 font-size: 2rem;
 color: #0d6efd;
}

.behandlings-text-1,
.behandlings-text-2,
.behandlings-text-3 {
 margin-bottom: 1rem;
}

.behandlings-texter{
  display: flex;
  flex-wrap: wrap;
}

.nålar{
  height:38rem;
  margin-left:3rem;
}

.titel-texter{
  width:45rem;
}

.titel-texter p{
  margin-top: 1.5rem;
}

.booking-div{
  align-items: center;
  justify-content: center;
  display: flex;
  width:100%
}

.footer{
  width: 100%;
  background-color: #2b2b2b; /* mörkare footer */
  min-height:40rem;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-direction: column;  
  color: #e8e8e8; /* lite ljusare text */
}

.listor{
  width:16rem;
  margin:2rem;
  justify-content: center;
}

footer-div{
  width:100%;
}

footer a{
  text-decoration: none;
  color: #8ecaff; /* ljusblå länkar */
}

.footer span{
  font-weight: bolder;
}

.logga img{
  height:5rem;
}

.small-footer-text{
  bottom:0;
  display: flex;
  position: relative;
  font-size: 0.6rem;
  margin-bottom: 0;
}

.small-footer-text a {
  text-decoration: none;
}