.content-section-hero
{
      width: 100%;
      height: auto;      
      margin-top: 20px;
      background-color: transparent;
      font-family: "Figtree", sans-serif;
}
.content-section-hero
.hero-background
{      
      width: 95%;
      height: 80vh;
      margin: 0 auto;
      position: relative;  
      border-radius: 25px;
      background-size: cover;
      background-position-y: 0;
      background-position-x: 50%;      
      background-repeat: no-repeat;
      background-image: url('img/hero/her-02.avif');
}
.content-section-hero
.hero-background::before 
{
      content: "";
      opacity: 0.3;     
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: block;
      position: absolute;
      border-radius: 25px;
      background-color: #222;      
}
.content-section-hero
.hero-overlay
{     
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;            
      position: absolute;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;      
}
.content-section-hero
.hero-heading
{
      width: 60%;
      margin: 0 auto;      
      margin-bottom: 100px;
}
.content-section-hero h4, 
.content-section-hero h5
{            
      color: #fff;
      font-weight: 800;      
}
.content-section-hero
h4
{                
      color: #eee;
      font-size: 70px;
      line-height: 1.0;      
      text-align: center;
      text-transform: uppercase;      
}
.content-section-hero
h5 
{            
      font-size: 30px;   
      color: #f2aa4c;
      font-weight: 700;
      text-align: center;         
}



.content-section-gallery
{      
      width: 95%;
      height: auto;	   
      margin: 0 auto;     
      margin-top: 20px;
      border-radius: 20px;
      background-color: #f3f1ee;
      font-family: "Figtree", sans-serif;
}
.content-section-gallery
.gallery-heading
{
      width: 95%;
      height: 10vh;
      display: flex;	
      margin: 0 auto;      	  
      align-items: center;
      border-radius: 30px;
      justify-content: center;                  
      background-color: transparent;
      /*
      box-shadow: 0 0 40px #0000001a;
      */	  
}
.content-section-gallery
h5
{            
      font-size: 30px;
      color: #242424;
      font-weight: 700;          
}
.content-section-gallery
p
{                  
      padding: 10px;      
      font-size: 15px;            
      margin-top: 5px;
      color: #4c4c4c;
      font-weight: 500;                       
}
.content-section-gallery
.gallery-container
{
      width: 95%;
      height: 70vh;
      margin: 0 auto;      
      margin-top: 50px;
}
.content-section-gallery
.gallery-navigation
{
      width: 100%;                  
      height: 40px;	  
      margin-bottom: 60px;       
}
.content-section-gallery
.gallery-list
{      
      margin: 0;
      padding: 0;                  
      display: block;                
      overflow: hidden;      
      position: relative;      
      text-align: center;        
      
      user-select: none;      
      -ms-user-select: none;
      -moz-user-select: none;
      -webkit-user-select: none;      
}
.content-section-gallery
.navigation-button
{      
      z-index: 2;        
      width: 120px;
      height: 50px;      
      cursor: pointer;
      font-size: 15px;            
      font-weight: 700;
      padding-top: 15px;      
      border-radius: 50px;      
      background-color: #fafafa;
      
      /*
      border: 1px solid #ccc;
      */
      position: relative;
      text-align: center;
      display: inline-block;       
      
      user-select: none;            
      -ms-user-select: none;
      -moz-user-select: none;
      -webkit-user-select: none;

      transition: color 250ms ease-in-out;
}
.content-section-gallery
.navigation-button:hover
{
      opacity: 0.5;
      transition: all 0.4s ease-in;
}
.content-section-gallery
.navigation-button.active 
{
      color: #0a5c36;
}
.content-section-gallery
.gallery-item
{
      margin-bottom: 20px;
}
.content-section-gallery
.gallery-grid 
{
      gap: 5px;
      padding: 5px;
      display: grid;
      margin: 0 auto;
      max-width: 100%;      
      grid-template-columns: 1fr;          
}
.content-section-gallery
.gallery-background
{     
      width: 100%;       
      position: relative;
}
.content-section-gallery
img
{      
      width: 95%;
      height: 450px;      
      display: block;
      object-fit: cover;
      border-radius: 15px;
      background-position: center;
      background-repeat: no-repeat;

      transition: 0.3s;
}
.content-section-gallery
img:hover 
{
      cursor: pointer;
      transform: scale(1.01);
}



.content-section-thumbnails
{
      width: 100%;
      height: auto;
      font-family: "Figtree", sans-serif;
}
.content-section-thumbnails
.thumbnails-heading
{
      width: 100%;
      height: auto;    
      padding-top: 50px;
}
.content-section-thumbnails
h5
{      
      font-size: 50px; 
      font-weight: 700;
      text-align: center;
      text-transform: uppercase;
      font-family: "Nanum Myeongjo", serif;
}
.content-section-thumbnails
h6
{      
      font-size: 50px; 
      color: #0c5c36;
      font-weight: 500;
      text-align: center;
      text-transform: uppercase;      
}
.content-section-thumbnails
.thumbnails-container
{
      width: 100%;
      height: 90vh;                     
}
.content-section-thumbnails
.thumbnails-box
{
      gap: 12px;
      width: 90%;
      height: auto;
      padding: 5px;
      display: grid;       
      margin: 0 auto;      
      margin-top: 20px;
      grid-template-columns: 1fr;     

      transition: 0.3s;
}
.content-section-thumbnails
.thumbnails-item
{            
      height: 350px;
      overflow: hidden;
      max-height: 350px;
      border-radius: 10px;
}
.content-section-thumbnails
img
{      
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;

      transition: 0.3s;
}
.content-section-thumbnails
img:hover 
{
      transform: scale(1.1);
}
.content-section-thumbnails
.thumbnails-item:hover
img
{
      filter: grayscale(0.8);
}



.content-section-thumb
{
      width: 100%; 
      height: auto;
      margin: 0 auto;            
      font-family: "Figtree", sans-serif;
}
.content-section-thumb
h5
{      
      padding: 0 10px;
      font-size: 15px;      
      color: #242424;
      font-weight: 700;
}
.content-section-thumb
p
{          
      font-size: 12px;    
      color: #4c4c4c;  
      font-weight: 700;
      padding: 5px 10px;      
}
.content-section-thumb
.thumb-container
{      
      width: 90%; 
      height: auto;      
      display: flex;
      margin: 0 auto;
      flex-wrap: wrap;      
      padding: 50px 0;    
      justify-content: space-between;
}
.content-section-thumb
.thumb-background
{          
      margin-bottom: 20px;         
      flex-basis: calc(50% - 5px);    
}
.content-section-thumb
.thumb-padding
{
      margin-top: 50px;
}
.content-section-thumb
img 
{
      width: 100%;
      height: 70vh;
      display: block;
      margin-top: 10px;
      object-fit: cover;
      border-radius: 10px;
      background-position: center;
      background-repeat: no-repeat;
}