body, html {
	font-family: "Raleway", sans-serif;
	font-size: 20px;
	height: 100%;
	color: #555;
	line-height: 1.8;	
}

button, a {
	text-decoration;
}

h3{
	font-family: "Libre Baskerville", serif; 
	font-weight: 700;
}

h4{
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
}

.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}

/*-- Padding for book nr --*/
.w3-padding-mine{padding:5px 10px!important}

#myNavbar a{
	font-size: 16px;
}

.mySlides {display: none}

.bgimg {
	background-position: center;
	background-size: 100% 300px;  
	width: 100%;
	height: 600px;
	opacity: 0.7;
	
}

/*── Thumbnail Grid ──────────────────────────────────────*/
    .swatch-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
      gap: 16px;
      max-width: 800px;
      margin: 40px auto;
    }
	
	.swatch {
      cursor: pointer;
      border-radius: 6px;
      overflow: hidden;
      box-shadow: 0 2px 6px rgba(0,0,0,0.2);
      transition: transform 0.2s ease;
    }
	
	.swatch:hover {
      transform: scale(1.05);
    }

    /*── Modal Base Styles (mobile-first = full-bleed) ────────*/
    .w3-modal-content.custom-modal-content {
      position: absolute !important;
      top: 0      !important;
      left: 0     !important;
      right: 0    !important;
      bottom: 0   !important;
      width: 100% !important;
      height: auto !important;
      max-width: 600px; !important;    /*-- change max-height: 110vh to max-width: 600px --*/
      margin: 0   !important;
      padding: 0  !important;
      border-radius: 0 !important;
      box-sizing: border-box !important;
      overflow: hidden !important;
    }
	
    /*── Constrain on Medium+ Screens ─────────────────────────*/
    @media (min-width: 769px) {
      .w3-modal-content.custom-modal-content {
        position: relative !important;
        width: 80%     !important;
        max-width: 400px !important;
        margin: 40px auto !important;
        height: auto    !important;
        max-height: none !important;
        border-radius: 8px !important;
      }
    }

    /*── Swing-Open Animation ────────────────────────────────*/
    @keyframes swingOpen {
      0% {
        transform: rotateY(-90deg);
        opacity: 0;
      }
      100% {
        transform: rotateY(0deg);
        opacity: 1;
      }
    }
    .w3-modal-content.swing {
      animation: swingOpen 0.6s ease-out;
      transform-origin: left center;
    }

    /*── Zoom & Pan Styles ───────────────────────────────────*/
    #modalImage {
      width: 100%;
      height: auto;
      max-height: 100vh;
      object-fit: contain;
      transform-origin: center center;
      transition: transform 0.1s ease-out;
      cursor: grab;
    }
    #modalImage.zoomed {
      cursor: move;
    }
	
	/*-- Remove the background of the closeBtn --*/
	#closeBtn {
	  background: none;         /* Removes white background */
	  border: none;             /* Removes any default border */
	  padding: 8px;             /* Optional: adjust spacing */
	  cursor: pointer;          /* Makes it feel clickable */
	}
	
	#closeBtn i {
	  font-size: 24px;          /* Adjust icon size */
	  color: #0000ff;              /* Icon color */
	  transition: color 0.3s ease;
	  transition: color 0.3s ease;
	}

	#closeBtn:hover i {
	  color: crimson;           /* Hover effect */
	}	
	
/*── Show mockup samples in 800px container ───────────────────────────────────*/	
	.mockup-wrapper {
		max-width: 800px;
		margin: auto;
		padding: 32px;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
	}

	.mockup-wrapper img {
		width: calc(25% - 8px); /* four images per row with gap */
		height: auto;
		display: block;
		border-radius: 8px;
	}

	@media (max-width: 600px) {
		.mockup-wrapper img {
		  width: 100%; /* Stack images vertically on small screens */
		}
	}
	
.tab-button.active {
  background-color: #2196F3 !important;
  color: white !important;
}

#ContactFrame {
  transition: height 0.3s ease;
}

iframe {
  max-width: 100%;
  display: block;
  margin: 0 auto;
}