/*****************************************
*
***********This is Style.CSS**************
*
*****************************************/

.container #first {background-image: url("../../../OneDrive/Desktop/mIZine/_images/BusinessPhotos.jpg");
    background-repeat: repeat-y;
    background-origin: border-box;}

nav ul li.current {background-color: yellow;border-radius: 5px;}

nav ul li.current a {color: black;font-weight: bold;}

nav ul li.portfolio {background-color: #FF6F0E;border-radius: 5px;}

nav ul li.portfolio a {color: white;font-weight: bold;}

.first {background-image: url(https://live.staticflickr.com/65535/54423126269_520bcb3bf5_b.jpg);
    background-size: 75% auto;background-position: center;background-repeat: no-repeat;
    padding-top: 300px;padding-bottom: 300px;height: 75vh;}

/* === CUSTOM HERO SECTION OVERRIDE === */
.portfolio_gallery {
    background-image: url('../_images/YOUR-IMAGE.jpg');background-size: contain;
    background-repeat: no-repeat;background-position: center;
    height: 600px;}

/* Portfolio Section */
.portfolio-section {
    padding: 40px 20px;background-color: #f8f8f8;text-align: center;}

.portfolio-section h1 {
    font-family: "Comic Sans MS", "Comic Sans", cursive;font-size: 2.25rem;
    margin-bottom: 30px;color: red;}

.portfolio-gallery {
    display: flex;flex-wrap: wrap;
    justify-content: center;gap: 20px;}

.portfolio-gallery img {
    width: 290px;height: 900px;
    object-fit: cover;border: 3px solid #ccc;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, border-color 0.3s ease;}

.portfolio-gallery img:hover {transform: scale(1.03);border-color: #0078FF;}

header, h1, h2, h3, p, section {margin: 0;padding: 0;}
.image-container {position: relative;display: inline-block; /* Or block, depending on your layout */}

.blurred-image {filter: blur(0px); /* Initially no blur */display: block;width: 100%;height: auto;
  object-fit: cover;transition: filter 0.3s  /* Smooth transition for the blur */
}

.image-container:hover .blurred-image {
  filter: blur(10px); /* Apply blur on hover */
}

.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 2em; /* Initial size */
  padding: 10px 20px;
  border-radius: 5px;
  font-weight: bold;
  text-align: center;
  opacity: 0; /* Initially hidden */
  transition: opacity 0.3s ease-in-out, font-size 0.3s ease-in-out; /* Added transition for font-size */
}
/*.overlay-subtitle {

  position: absolute;
  top: 5%;
  left: 5%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 0.1em; /* Initial size

  padding: 1px 5px;
  border-radius: 5px;
  font-weight: bold;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease-in-out, font-size 0.3s ease-in-out;

Added transition for font-size}*/

.image-container:hover .overlay {
  opacity: 1; /* Show overlay on hover */
  font-size: 8em; /* Four times the initial size (2em * 4) */
}
.text_column2 {
    width: 29%;
    text-align: justify;
    font-weight: normal;
    line-height: 21px;
    float: left;
    padding: 0 35px 0 20px;
    color: #FFFFFF;
}