@charset "utf-8";
/* CSS Document */

.banner-wrapper {background: url("../images/banner/did-you-know-banner.jpg") no-repeat top center #79CEEA;}

.text-wrapper{ margin:150px auto 0; text-align: center;}
.main-text{ width:280px; margin: 0 auto 20px;}
.quotes {display: none; color: #d45075; padding:5px 15% 0; width: 60%; margin: 0 auto; line-height: 33px;}
/*----------------------------------    */
    
.box{ margin: 0 auto 40px; width:100%;  border-radius: 15px; cursor: pointer;}   
.box .box-img{display: block; height: auto; width: 100%; margin: 0px auto 10px; border-radius: 15px; border:1px #c8c8c8 solid; /*transition: 0.25s;*/
  transition-duration: 1s;}  

.box .title-wrapper{padding: 0 10px; display: flex; justify-content: space-between; align-items: center;} 

.box .title{font-size: 18px; line-height: 30px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 
.box a {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 85%;}

.box .title-wrapper .share{width:15px; border: none;}
.box .title-wrapper .share img{vertical-align: middle; cursor: pointer;}

.box .box-img:hover {transform: scale(0.97);}

/* ------------------------------------ */

.modal {
    position: fixed;
    width: 100vw;
    /*height: 100vh;*/
    bottom: calc(10px + (100vh - 100%));
    background: rgba(0,0,0,0.5);
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(8px);
    transition: all 140ms ease-in-out;
    pointer-events: none;
    opacity: 0;
  }
  
  .modal.open {
    opacity: 1;
    pointer-events: auto;
  }
  
  .modal-content-two {
    width:90%;
    height: fit-content;
    padding: 5px;
    /* padding: 30px 30px 10px; */
    border-radius:20px;
    border: 1px solid #cbd5e1;
    background-color: #ffffff;
    position: relative;
    opacity: 0;
    transform: translateY(24px);
    transition: all 300ms ease-in-out;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }
  
  .modal-content-two  .matter{padding:5px 20px;}

  .modal-content-two h3,   .modal-content-two img
  .modal-content-two p {
    opacity: 0;
    transform: translateY(20px);
    transition: all 300ms ease-out;
  }
  


  /* .modal-content-two img{margin:30px auto; display: block;} */
  .modal-content-two h3 { text-align: center;
    transition-delay: 50ms;
  }
  
  .modal-content-two p {
    transition-delay: 100ms;
    margin-bottom: 20px;
  }

  center img{margin: 10px 0 12px;}
  
  .modal-content-two.open h3{margin-top: 8px;}

  .modal-content-two.open h3{color: var(--red); margin-bottom: 10px;}
  .modal-content-two.open h3, .modal-content-two.open img
  .modal-content-two.open p {
    opacity: 1;
    transform: translateY(0px);
  }
  
  .modal-content-two.open {
    transform: translateY(0px);
    opacity: 1;
  }
  
  /* --below code for close-- */
  .close-button {
    /* position: absolute;
    right:10px;
    top:10px; */
    position: sticky;
    top: 0px;
    display:flex;
    justify-content: flex-end;
    margin-left: auto;
  }
  
  .close-button img{width:30px;}

  

  /* ------------------------responsive----------------------------- */
  @media screen and (min-width:1600px){  .modal-content-two {width: 50%;}}
  @media only screen and (max-width: 1599px) and (min-width: 1200px){.modal-content-two {width:70%;}}

  @media screen and (max-width:768px){  .text-wrapper{ margin-top: 130px;}
  .main-text{ width:210px; margin: 0 auto 20px;}
  .quotes {width:100%;}
  .modal-content-two.open h3{font-size: 24px; line-height: 26px;}
  .modal-content-two{width: 95%;}
}