@font-face {
  font-family: 'ACaslonPro';
  src: url('fonts/ACaslonPro.otf') format('opentype');
}

body {
  font-family: 'Times', serif;
  background-color: #FFF;
  overflow-y: scroll;
  overflow-x: hidden;
  font-size: 15px;
}


/* image gallery */
.imageopen {
  position: fixed;
  width: 100vw !important;
  height: 100vh;
  top: 0 !important;
  left: 0;
  overflow-x: hidden;
  z-index: 1000;
  opacity: 1 !important;
  background-color: #FFF;
  overflow: hidden;
}

.imageopen > img {
  width: auto !important;
  height: auto !important;
  max-width: 100vw;
  max-height: 100vh;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  margin: auto;
}

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

div.open img {
  display: inline-block;
  margin: auto;
  width: 60%;
}

/* navigation bar */

.navbar {
            overflow: hidden;
            position:fixed;
        }
        .navbar a {
            float: left;
            display: block;
            text-align: center;
            padding: 10px 20px;
            text-decoration: none;
            font-size: 15px;
            color: #000;
        }
        .navbar a:hover {
            color:##FF5F1F;
        }
        .navbar a.active {
          color: ##FF5F1F;
        }

        /* D6ED17FFMagnifier CSS */

a           {  text-decoration: none;
color: black;}
a:hover {
    color:#FF5F1F;
}


        .img-container {
    cursor: zoom-in; /* Default cursor */
}

.img-container.full-screen {
    cursor: zoom-out; /* Cursor when in full-screen */
}


    /* Full-screen view */
    .img-container.full-screen {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000; /* Ensure it's above other content */
        background-color: rgba(0, 0, 0, 0.9); /* Semi-transparent black background */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .img-container.full-screen img {
        max-width: 95%;
        max-height: 95%;
        object-fit: contain;
    }

        .arrow, .zoom {
            position: absolute;
            top: 10px;
            right: 10px;
            border: none;
            padding: 5px;
            cursor: pointer;
            font-size: 16px;
        }



        /* Existing styles */
        .text {
            flex: 1 1 60%; /* Text takes 60% of the space */
            text-align: left; /* Align text to the left */
            display: flex; /* Use flexbox for vertical alignment */
            flex-direction: column; /* Stack text vertically */
            justify-content: flex-start; /* Align text at the top */
        }

        .meninas img {
            width: 100%; /* Ensure the image fits within its container */
        }

        .gallery {
            max-width: 100%;
            margin: 0 auto;
            padding: 20px;
        }

        /* New styles */
        .parent {
            display: flex; /* Use flexbox for side-by-side layout */
            align-items: flex-start; /* Align items at the top */
            width: 100%;
        }

        .meninas {
            flex: 1 1 40%; /* Image container takes 40% of the space */
            display: flex; /* Use flexbox for image alignment */
            justify-content: flex-end; /* Align image to the right */
            margin-right:7%;
        }


/* works */

.gallery {
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
}

.item {
    display: flex;
    justify-content: space-between; /* Ensure items are spaced evenly */
    margin-bottom: 40px;
}

.image {
    flex: 1 1 70%; /* Image takes half of the space */
    text-align: center; /* Center align image */
}



.image img {
    max-width: 100%;
    height: auto;
    display: block;
   max-height: 75vh; /* Set the maximum height to ensure vertical images fit */
align-items: right;
}

.text {
    flex: 1 1 30%; /* Text takes half of the space */
    text-align: left; /* Align text to the left */
    display: flex; /* Use flexbox for vertical alignment */
    flex-direction: column; /* Stack text vertically */
    justify-content: flex-start; /* Align text at the top */
}

.text h3 {
    margin-top: 0;
    font-size: 15px;
    line-height: 21px;
    font-weight: normal;
}

.text p {
    margin-bottom: 0;
    font-size: 15px;
    color: #000;
    line-height: 1.5;
}

.span  p{
    color: #FFF;
}


.image {
    position: relative; /* Position relative to place arrow button */
    flex: 1 1 70%;
    text-align: center;
}

.arrow {
    position: absolute; /* Position arrow button */
    top: 260px;
    right: 5px;
    cursor: pointer;
    font-size: 25px;
    background: none;


}

.arrow:hover {    color:#FF5F1F;
background: none;
}



h4 {
  font-size: 15px;
  font-weight: lighter;
  text-align: center;
}

/* phone */
::-webkit-scrollbar {
  display: none;
}

@media screen and (max-width: 800px) {
  .navbar a {
    font-size: 1.5vh; /* Smaller font size */
  }

  .text h3, .text p {
    font-size: 1.5vh; /* Smaller font size for text */
    line-height: 1.2; /* Adjust line height proportionally */

  }

  .arrow {
     position: absolute;
     top: auto;
     bottom: 10px; /* Stick to the bottom of the image */
     right: 10px; /* Slight padding from the edge */
     font-size: 4vh;
     z-index: 10;
   }

  .close {
    top: 2vh;
    right: 2vh;
    font-size: 5vh; /* Smaller font size for close button */
  }



}