:root {
    --dark-color: #001a29;
    --light-color: #d8e0e9;
    --main-light-color: #93b1dd;
    --main-color: #4b79b6;
    --main-dark-color: #003b8d;
    --main-dark-2-color: #004871;
    --sec-color: #005555;
}

.cursor-hand {
    cursor: pointer;
}

body {
    font-family: 'Roboto', sans-serif;
}
.typo-advent {
    font-family: 'Advent Pro', sans-serif;
}
.typo-quicksand {
    font-family: 'Quicksand', sans-serif;
}
.typo-roboto {
    font-family: 'Roboto', sans-serif;
}
.typo-wire-one {
    font-family: 'Wire One', sans-serif;
}
.bright-50 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}
.bright-50 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}
.bg-black-transparent-25 {
    background-color: hsla(0, 0%, 0%, 0.25)
}
.bg-black-transparent-50 {
    background-color: hsla(0, 0%, 0%, 0.5)
}
.bg-black-transparent-75 {
    background-color: hsla(0, 0%, 0%, 0.75)
}
.bg-white-transparent-25 {
    background-color: hsla(0, 0%, 100%, 0.25)
}
.bg-white-transparent-50 {
    background-color: hsla(0, 0%, 100%, 0.5)
}
.bg-white-transparent-75 {
    background-color: hsla(0, 0%, 100%, 0.75)
}
.text-capitalize {
    text-transform: capitalize;
}
.text-upper {
    text-transform: uppercase;
}
.text-lower {
    text-transform: lowercase;
}

#btn-scroll-to-top {
    position: fixed;
    display: none;
}

.section-title {
    text-decoration: none; 
    position: relative; 
}   

.section-title:after {
    position: absolute;
    content: '';
    height: 1px;
       /* adjust this to move up and down. you may have to adjust the line height of the paragraph if you move it down a lot. */
    bottom: -10px; 


    /****** 
    optional values below 
    ******/
     
    /* center - (optional) use with adjusting width   */
    margin: 0 auto;
    left: 0;
    right: 0;
    width: 10%;
    
    /* optional animation */
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;

    /* background: #d8e0e9; */
    background-image: -webkit-linear-gradient(left, rgba(200, 200, 200, 0), rgb(130, 130, 130), rgba(60, 60, 60, 0));
    background-image: -moz-linear-gradient(left, rgba(200, 200, 200, 0), rgb(130, 130, 130), rgba(60, 60, 60, 0));
    background-image: -ms-linear-gradient(left, rgba(200, 200, 200, 0), rgb(130, 130, 130), rgba(60, 60, 60, 0));
    background-image: -o-linear-gradient(left, rgba(200, 200, 200, 0), rgb(130, 130, 130), rgba(60, 60, 60, 0));
}

/* optional hover classes used with anmiation */
.section-title:hover:after {
    width: 15%;
    /* background: #4b79b6; */
    background-image: -webkit-linear-gradient(left, rgba(230, 230, 230, 0), rgb(180, 180, 180), rgba(120, 120, 120, 0));
    background-image: -moz-linear-gradient(left, rgba(230, 230, 230, 0), rgb(180, 180, 180), rgba(120, 120, 120, 0));
    background-image: -ms-linear-gradient(left, rgba(230, 230, 230, 0), rgb(180, 180, 180), rgba(120, 120, 120, 0));
    background-image: -o-linear-gradient(left, rgba(230, 230, 230, 0), rgb(180, 180, 180), rgba(120, 120, 120, 0));
}

.image-overlay-container {
    position: relative;
    width: 50%;
}
  
.image-overlay-image {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
}
  
.image-overlay-middle {
    background-color: #00000084;
    opacity: 0;
    transition: .5s ease;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}
  
.image-overlay-container:hover .image-overlay-image {
    opacity: 1;
}
  
.image-overlay-container:hover .image-overlay-middle {
    opacity: 1;
}

/* .image-overlay-container:has(.image-overlay-middle:hover) {
} */
  
.image-overlay-text {
    padding: 16px 32px;
}