/* 
     Author : Azhar Hussain Masum
     Email: azharhussain4647@gmail.com
     Website: http://azharmasum.com/
     Facebook: https://www.facebook.com/azhar.hussainmasum
*/

h4{
margin: 5px 0;
text-align: center;
}
@media(max-width:580px){
    .camera_caption{
        display: none!important;
    }
}

.modal {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(77, 77, 77, 0.7);
    transition: all 0.4s;
  }
  
  .modal:target {
    visibility: visible;
    opacity: 1;
  }
  
  .modal__content {
    border-radius: 4px;
    position: relative;
    display: flex; /* Make the modal content a flex container */
    flex-direction: row; /* Align the children horizontally */
    width: 80%;
    height: 60%;
    max-width: 900px;
    background: rgb(255, 253, 253);
    padding: 0.8em 0.8em;
    box-sizing: border-box;
    
  }
  
  /* .modal__left {
    flex: 2; 
    padding-right: 20px;
    
  } */
  
  /* .modal__image {
    width: 100%; 
    height: 100%;
    border-radius: 8px;
 
  } */
  
  .modal__right {
    flex: 1.1; /* Take up the other 50% width */
    padding-left: 10px;
    text-align: center;
    padding-top: 20px;
    font-family: 'Times New Roman', Times, serif;

    justify-content: flex-start; /* Keep content aligned at the top */
    height: 100%; /* Ensure the right section occupies full height */
  }
  .modal__right h1{
    font-size: 33px;
    text-align:center;
    font-family: 'Times New Roman', Times, serif;
  }
  .modal__right #h1{
    font-size: 28px;
    text-align:center;
    font-family: 'Times New Roman', Times, serif;
  }
  .modal__right p{
    font-size: 23px;
    padding-top: 20px;
    line-height: 45px;
    text-align:center;
    font-family: 'Times New Roman', Times, serif;
  }
  .modal__close {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #c00202;
    font-size: 2em;
    text-decoration: none;
    z-index: 1;
  }

  #a{
    top:50%;
    left:50%;
    transform: translate(-5%,170%);
    padding: 5px 5px;
    color: #9f0306;
    text-transform:uppercase;
    text-decoration:none;
    font-family: Arial, Helvetica, sans-serif;
    font-size:16px;
    overflow:hidden;
  }
  

.modal__left {
  flex: 2;
  padding-right: 20px;
  display: flex;
  justify-content: center; /* Center the image */
  align-items: center;
}

.modal__image {
  max-width: 100%; /* Ensure the image doesn't exceed the container width */
  max-height: 100%; /* Ensure the image doesn't exceed the container height */
  object-fit: cover; /* Cover the container without distortion */
  border-radius: 8px;
  /* Optionally, use object-fit: contain if you want to ensure the entire image fits */
}

@media screen and (max-width: 768px) {
  .modal__content {
    flex-direction: column; /* Stack the modal sections vertically on smaller screens */
    height: auto; /* Allow the height to adjust automatically */
  }
  
  .modal__left {
    flex: 2;
    margin-bottom: 5px; /* Add space below the image */
  }

  .modal__right {
    flex: 1;
    padding-left: 2px;
    padding-top: 0; /* Adjust padding for better mobile layout */
    
  }

  .modal__right h1, .modal__right #h1 {
    font-size: 23px; /* Adjust font size for mobile */
  }

  .modal__right #h1 {
    margin-top: -20px;  
    font-size: 23px; /* Adjust font size for mobile */
  }
  .modal__right p {
    margin-top: -20px;
    font-size: 17px; /* Adjust font size for mobile */
  }
  #a{
    top:50%;
    left:50%;
    transform: translate(-5%,15%);
    padding: 15px 15x;
    letter-spacing: 5px;
    font-size:16px;
  }
}
#a::before
{
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  bottom:2px;
  width:50%;
  background:rgba(255,255,255,0.05);
  
}
#a span:nth-child(1)
{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:2px;
  background:linear-gradient(to right, #c3a007 ,#a28108);
  animation: animate1 2s linear infinite;
  animation-delay:1s;
  
}
@keyframes animate1
{
  0%
  {
    transform:translateX(-100%);
}
  100%
  {
    transform:translateX(100%);
  }
}
#a span:nth-child(2)
{
  position:absolute;
  top:0;
  right:0;
  width:2px;
  height:100%;
  background:linear-gradient(to bottom, #c3a007 ,#a28108);
  animation: animate2 2s linear infinite;
  animation-delay:2s;
}
@keyframes animate2
{
  0%
  {
    transform:translateY(-100%);
}
  100%
  {
    transform:translateY(100%);
  }
}
#a span:nth-child(3)
{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:2px;
  background:linear-gradient(to left, #c3a007 ,#a28108);
   animation: animate3 2s linear infinite;
  animation-delay:1s;
  
}
@keyframes animate3
{
  0%
  {
    transform:translateX(100%);
}
  100%
  {
    transform:translateX(-100%);
  }
}
#a span:nth-child(4)
{
  position:absolute;
  top:0;
  left:0;
  width:2px;
  height:100%;
  background:linear-gradient(to top, #c3a007 ,#a28108);
   animation: animate4 2s linear infinite;
  animation-delay:2s;
  
}
@keyframes animate4
{
  0%
  {
    transform:translateY(100%);
}
  100%
  {
    transform:translateY(-100%);
  }
}

button {
  all: unset; /* This removes all default styles applied by the browser */
  cursor: pointer;
}
/* 
  @media (max-width: 900px) {
    .modal__close {
      position: absolute;
      top: 5px;
      right: 5px;
      color: #e40101;
    }
  
    .modal__content {
        flex-direction: column; /* Align the children horizontally 
        height: 80%;
        max-width: 900px;
        padding: 2em 0.3em;
      }
      .modal__left {
        flex: auto; /* Take up 50% width of the modal 
      }
      .modal__right {
        flex: auto;
        padding-top: 5px;
      }
      .modal__right p{
        font-size: 22px;
        padding-top: 5px;
        line-height: 25px;
      }
      .modal__right h1{
        font-size: 32px;
      }
      .modal__right #h1{
        font-size: 25px;
      }
      #a{
        top:50%;
        left:50%;
        transform: translate(-5%,90%);
        padding: 15px 15x;
        letter-spacing: 5px;
        font-size:16px;
      }
      
}
@media (max-width: 424px) {
  .modal__close {
    position: absolute;
    top: 1px;
    right: 5px;
    color: #e40101;
  }

  .modal__content {
    flex-direction: column; /* Align the children horizontally 
    height: 88%;
    max-width: 900px;
    padding: 2em 0.3em;
  }
  .modal__left {
    flex: auto; /* Take up 50% width of the modal 
  }
  .modal__right {
    flex: auto;
    padding-top: 5px;
  }
  .modal__right p{
    font-size: 22px;
    padding-top: 5px;
    line-height: 25px;
  }
  .modal__right h1{
    font-size: 32px;
  }
  .modal__right #h1{
    font-size: 25px;
  }
  .modal__image {
    width: 100%; /* Make image fill its container 
    height: 100%;
    border-radius: 8px;
 
  }
  }
  @media (max-width: 395px) {

    .modal__content {
      flex-direction: column; /* Align the children horizontally 
      height: 89%;
      max-width: 900px;
      padding: 1.7em 0.3em;
    }
    .modal__left {
      flex:1; /* Take up 50% width of the modal 
    }
    .modal__right {
      flex:1;
      padding-top: 5px;
    }
    .modal__right p{
      font-size: 22px;
      padding-top: 5px;
      line-height: 24px;
    }
    .modal__right h1{
      font-size: 31px;
    }
    .modal__right #h1{
      font-size: 25px;
    }
    .modal__image {
      width: 100%; /* Make image fill its container 
      height: 100%;
      border-radius: 8px;
   
    }
    }
@media (max-width: 380px) {
    .modal__content {
        flex-direction: column; /* Align the children horizontally 
        height: 80%;
        max-width: 900px;
        padding: 2em 0.3em;
      }
      .modal__left {
        flex: 1.6; /* Take up 50% width of the modal 
      }
      .modal__right {
        flex: auto;
        padding-top: 5px;
      }
      .modal__right p{
        font-size: 23px;
        padding-top: 5px;
        line-height: 25px;
      }
      .modal__right h1{
        font-size: 33px;
        
      }
      .modal__right #h1{
        font-size: 25px;
      }
      #a{
        top:50%;
        left:50%;
        transform: translate(-5%,50%);
        padding: 15px 15x;
        letter-spacing: 5px;
        font-size:16px;
      }
      
} */