@charset "UTF-8";
/* CSS Document */
/* Tom Hunter Photography © */


/* OVERLAY CSS FOR 360 PANORAMA */
/* 1. Make the container relative so absolute children align to it */
.dogtrainer {
    position: relative;
    width: 100%;
    /* Adjust as needed */
    margin: 0 auto;
}

/* 2. Center your existing iframe layout */
.catcenter {
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Adjust to your iframe's height */
.thebox-iframe {
  position: relative;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 225px;
  border: none;
  outline: none; 
}
@media (max-width: 750px)  {
.thebox-iframe{
height: 320px;
}    
    
}

/* 3. Style and position the text overlay perfectly in the center */
.bigbox-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10; /* Ensures it sits on top of the iframe */
    color: white; /* Choose a contrasting color */
	font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 2.0rem;
    font-weight: bold;
    text-shadow: 1.5px 1.5px 1px rgba(0, 0, 0, 0.5); /* Adds readability */
    pointer-events: none; /* Allows clicks to pass through the text onto the iframe */
}