/*define color palette*/
:root{
    /*primary colors*/
    --primary-teal: #076F78;
    --primary-black: #000000;
    --primary-white: #FFFFFF;

    /*darker colors*/
    --teal-darker-1: #065960;
    --teal-darker-2: #044348;
    --teal-darker-3: #032C30;

    /*lighter colors*/
    --teal-lighter-1: #398C93;
    --teal-lighter-2: #6AA9AE;
    --teal-lighter-3: #9CC5C9;

    /*other general settings*/
    --site-header-height: 80px;
    --max-site-width: 1920px;
  }

/*define general font*/ 
*{
    font-family: 'Jost', sans-serif;
}

.align-left{
    text-align: left;
}

html{
    background: var(--primary-white);
    width: 100%;
    height: 100%;
    scroll-behavior: smooth;
}

body{
    background: var(--primary-white);
    max-width: var(--max-site-width);
    margin-left:auto;
    margin-right:auto;
    width: 100%;
    height: 100%;
}

h1{
    font-size: 48px;
    font-weight: bold;
}
h2{
    font-size: 36px;
    font-weight: bold;
}
h3{
    font-size: 24px;
    font-weight: bold;
}
h4{
    font-size: 24px;
    font-weight: normal;
}

p{
    font-size: 20px;
    font-weight: normal;
}

a{
    color: inherit; 
    text-decoration: inherit; 
 }

a.anchor {
   display: block;
   position: relative;
   top: -50px;
   visibility: hidden;
}

.black{
    color: black;
}
 
.header-container{
    display: inline-block;
    position: fixed;
    top:0;
    width: 100%;
    max-width: var(--max-site-width);
    margin: 0 auto;
    overflow-x: hidden;
    z-index: 999;
}
.header{
    display: inline-block;
    top: 0;
    left: 0;
    min-height: var(--site-header-height);
    width: 100%;
    background: transparent;
}
.header-bg{
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
    min-height: var(--site-header-height);
}

.logo{
    position: absolute;
    top: 10%;
    left:1.5%;
    height:65%
}

/*Navigation Header*/

.navbar{
    position: absolute;
    left: 18%;
    width:80%;
    display:inline-block;
    color: var(--primary-white);
    margin:0;
    padding-right: 20%;
    z-index: 100;
}

.navitem{
    position: relative;
    float: left;
    list-style-type: none;
    width:10%;
    min-width:115px;
    padding-top: 1%;
    text-align: center;
    font-weight: 600;
}

.navitem:hover{
    cursor: pointer;
}

.navitem:after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--primary-teal);
    transition: transform 0.25s ease-out;
}
  
.navitem:hover:after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.body-container{
    width: 100%;
}

/*Welcome Section*/

.welcome{
    display: inline-block;
    width:100%;
    padding-bottom: 30%;
    background: radial-gradient(transparent 0%, transparent 40%, black 100%),url('../assets/store1.jpg');
    background-size: cover;
    z-index: 0;
}


.welcome-box{
    width:60%;
    margin-left: 20%;
    margin-top: 5%; 
    padding:2%; 
    text-align:center;
    background: var(--primary-teal);
    background: linear-gradient(135deg, var(--teal-darker-1) 0%, var(--primary-teal) 35%, var(--teal-lighter-2) 100%);
    color: var(--primary-white);
    border: none;
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));

}

/*News Sectiion*/

.news{
    width:100%;
    padding-top:1%;
    padding-bottom: 2%;
    text-align: center;
    background: linear-gradient(135deg, var(--teal-darker-1) 0%, var(--primary-teal) 35%, var(--teal-lighter-2) 100%);
}

.section-name-news{
    margin-bottom: -1%;
    color: var(--primary-white);
}

.line-section-news{
    display: inline-block;
    width:75%;
    margin-left: 12.5%;
    margin-right: 12.5%;
    border-bottom: 10px solid;
    border-image-slice: 1;
    border-width: 2px;
    color: var(--primary-white);
    border-image-source: linear-gradient(90deg, transparent 0%, var(--primary-white) 10%, var(--primary-white) 90%, transparent 100%);;
    
}

.news-card{
    display: inline-block;
    width:20%;
    margin: 2% ;
    min-height: 600px;
    background: var(--primary-white);
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
}

.news-heading-container{
    position: relative;
    height: 100px;
}

.news-heading{
    font-size: 24px;
    font-weight: bold;
    color: black;
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width:100%;
}

.line-news-card{
    display: inline-block;
    width:90%;
    border-top: 2px solid var(--primary-black);
}

.news-text-container{
    position: relative;
    height: 300px;
    width: 95%;
}

.news-text{
    font-size: 20px;
    color: var(--primary-black);
    padding: 2.5%;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width:100%;
}

.news-text a{
    font-weight: bold;
}


/*Store Sectiion*/

.store{
    width:100%;
    padding-top:1%;
    padding-bottom: 2%;
    text-align: center;
    color: var(--primary-white);
    background: white;
}

.section-name-store{
    margin-bottom: -1%;
    color: var(--primary-black);
}

.line-section-store{
    display: inline-block;
    width:75%;
    margin-left: 12.5%;
    margin-right: 12.5%;
    border-bottom: 10px solid;
    border-image-slice: 1;
    border-width: 2px;
    color: var(--primary-black);
    border-image-source: linear-gradient(90deg, transparent 0%, var(--primary-black) 10%, var(--primary-black) 90%, transparent 100%);
    
}

.store-card-right{
    display: inline-block;
    width: 90%;
    margin-top: 2%;
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
}

.store-text-right{
    position: absolute;
    left:10%;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 60%;
    padding: 1%;
    margin-right: -2%;
    background: linear-gradient(135deg, var(--teal-darker-1) 0%, var(--primary-teal) 35%, var(--teal-lighter-2) 100%);
    z-index: 1;
}

.store-pic-right{
    position: relative;
    float: left;
    left:65%;
    width: 40%;
    width: 40%;
    height: 600px;
    max-width: 600px;
    max-height: 600px;
    padding: auto;
    display: flex;
    justify-content: center;
    overflow: hidden;
    z-index: 0;
    background: radial-gradient(transparent 0%, transparent 75%, black 100%),url('../assets/store2.jpg');
    background-size: cover;
}

.store-card-left{
    display: inline-block;
    width: 90%;
    margin-top: 2%;
    margin-right: 5%;
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
}

.store-text-left{
    position: absolute;
    right:5%;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 60%;
    padding: 1%;
    margin-right: -2%;
    background: linear-gradient(135deg, var(--teal-darker-1) 0%, var(--primary-teal) 35%, var(--teal-lighter-2) 100%);
    z-index: 1;
}

.store-pic-left{
    position: relative;
    float: right;
    right:60%;
    width: 40%;
    width: 40%;
    height: 600px;
    max-width: 600px;
    max-height: 600px;
    padding: auto;
    display: flex;
    justify-content: center;
    overflow: hidden;
    z-index: 0;
    background: radial-gradient(transparent 0%, transparent 75%, black 100%),url('../assets/store2.jpg');
    background-size: cover;
}


/*Calendar Sectiion*/

.calendar{
    width:100%;
    padding-top:1%;
    padding-bottom: 2%;
    text-align: center;
    background: linear-gradient(135deg, var(--teal-darker-1) 0%, var(--primary-teal) 35%, var(--teal-lighter-2) 100%);
}

.section-name-calendar{
    margin-bottom: -1%;
    color: var(--primary-white);
}

.line-section-calendar{
    display: inline-block;
    width:75%;
    margin-left: 12.5%;
    margin-right: 12.5%;
    border-bottom: 10px solid;
    border-image-slice: 1;
    border-width: 2px;
    color: var(--primary-white);
    border-image-source: linear-gradient(90deg, transparent 0%, var(--primary-white) 10%, var(--primary-white) 90%, transparent 100%);;
    
}

.calendar-container{
    position: relative;
    height: 600px;
    margin-top: 2%;
    margin-left: 17.5%;
    margin-bottom: 2%;
    width: 65%;
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
}


/*Contact Sectiion*/

.contact{
    width:100%;
    padding-top:1%;
    padding-bottom: 2%;
    text-align: center;
    background: white;
}

.section-name-contact{
    margin-bottom: -1%;
    color: var(--primary-black);
}

.line-section-contact{
    float: left;
    width:75%;
    margin-left: 12.5%;
    margin-right: 12.5%;
    border-bottom: 10px solid;
    border-image-slice: 1;
    border-width: 2px;
    color: var(--primary-black);
    border-image-source: linear-gradient(90deg, transparent 0%, var(--primary-black) 10%, var(--primary-black) 90%, transparent 100%);
    
}

.contact-hours{
    float: left;
    margin-top: 3%;
    margin-left: 10%;
    width:20%;
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
}

.contact-hours table{
    border-collapse: collapse;
    background: linear-gradient(135deg, var(--teal-darker-1) 0%, var(--primary-teal) 35%, var(--teal-lighter-2) 100%);
    color: var(--primary-white);
    font-weight: bold;
}

.contact-hours td{
    border-bottom: 1px solid var(--primary-white);
}

.contact-hours tr:last-child td{
    border-bottom: none;
}

.contact-hours td{
    padding: 1%;
    width: 10%;
}

.contact-information{
    background: linear-gradient(135deg, var(--teal-darker-1) 0%, var(--primary-teal) 35%, var(--teal-lighter-2) 100%);
    color: var(--primary-white);
    margin-top: 10%;
    padding: 0.5%;
}

.social-box{
    width: 100%;
    height: 100px;
    margin-top: 10%;
    font-size: 70px ;
    color: var(--primary-white);
    background: linear-gradient(135deg, var(--teal-darker-1) 0%, var(--primary-teal) 35%, var(--teal-lighter-2) 100%);
}


.contact-map-container{
    display: inline-block;
    position: relative;
    height: 600px;
    margin-top: 2%;
    margin-left: 0%;
    width: 50%;
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
}

.footer{
    padding: 1%;
    background: linear-gradient(135deg, var(--teal-darker-1) 0%, var(--primary-teal) 35%, var(--teal-lighter-2) 100%);
    color: var(--primary-white);
    text-align: center;
}

@media screen and (min-width: 0px) {
    .navitem {
      font-size: 20px;
    }
  }
@media screen and (min-width: 1950px) {
    .navitem {
      font-size: 20px;
    }
}