/*Mobile first*/
*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

html{
    font-size:16px;
}

p{
    font-family:'Quicksand';
}

h1{
    font-family:"Corinthia", cursive;
    font-weight: 700;
    font-size:4rem;
    margin-bottom:1rem;
}

h2{
    font-family: 'Cinzel';
    font-weight: 200;
    font-size: 2.25rem;
    text-align:center;
    margin-top:1rem;
    padding:1rem;
}

h3{
    font-family:'Cinzel';
    font-size:1.5rem;
    font-weight:400;
    margin-bottom:2rem;
}

header{
    background-color: #B2D16E;
    width:100vw;
    display:flex;
    padding:1rem;
    gap:5rem;
    align-items: center;
    justify-content: space-between;
}

header p{
    font-size:1.25rem;
    font-weight: 500;
}

.logo-image{
    width:60px;
    height:auto;
}

.logo{
    display:flex;
    align-items: center;
    gap:2rem;
    text-align: left;

}
.header-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    gap:1rem;
}

nav{
    text-align:center;
    display: flex;
    flex-direction: column;
    gap:1rem;
    font-family: 'Quicksand';
}

nav a{
    display:flex;
    justify-content: center;
    align-items: center;
    background-color: #839f46;
    border-radius: 0.8rem;
    padding:.5rem;
    color:rgb(221, 255, 226);
    text-decoration: none;
    font-size: .8rem;
    width:100px;
    height:40px;
    box-shadow: 0 4px 10px rgba(0,0,0,.15);
    /*border:1px solid rgba(255,255,255,.2);*/
    border:1px solid transparent;

    transition: all .3s ease;
}

nav a:hover{
    box-shadow: 0 8px 18px rgba(0,0,0,.2);
    border:1px solid rgb(221,255,226);
}

.hero{
    background-image:linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.2)), url(images/airplane-island\ 2.jpg);
    background-size:cover; /* Fills container with image and keeps the image proportions*/
    background-repeat:no-repeat;
    height:80vh;
    background-position: center; /* allows image to grow from center instead of left side*/

    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-content{
    color:white;
    text-align:left;
    padding:1rem;
}

.hero-content p{
    font-size:1rem;
    margin-bottom: 4rem;
}

.hero-btn{
    text-align: center;
    align-content: center;
    background-color: #B2D16E;
    border-radius: 0.8rem;
    padding:.5rem;
    font-family:'Quicksand';
    font-weight:500;
    color:rgb(0, 0, 0);
    text-decoration: none;
    font-size: 1rem;
    box-shadow: 0 4px 10px rgba(0,0,0,.15);
    border-radius:1rem;
    border:1px solid transparent;
    padding: 0.75rem;

    transition: all .3s ease;
}

.hero-btn:hover{
    background-color: #def4ad;
    box-shadow: 0 8px 18px rgba(0,0,0,.2);
    border:1px solid rgb(221,255,226);
}

.highlight-container{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    margin:1rem;
    gap:1rem;
}

#card-container{
    display:flex;
    flex-direction:column;
    gap:1rem;
}

.card{
    display:flex;
    flex-direction:column;
    justify-content: center;
    padding: 1rem;
    gap:2rem;
    background-color:#9AD2D9;
    border-radius: .5rem;
}

.highlight-btn{
    text-align: center;
    align-content: center;
    background-color: #3B8C8C;
    border-radius: 0.8rem;
    padding:.5rem;
    font-family:'Quicksand';
    font-weight:600;
    color:rgb(255, 255, 255);
    text-decoration: none;
    font-size: 1rem;
    box-shadow: 0 4px 10px rgba(0,0,0,.15);
    /*border:1px solid rgba(255,255,255,.2);*/
    border:1px solid transparent;
    margin-top:auto;

    transition: all .3s ease;
}

.highlight-btn:hover{
    background-color: #cfdddd;
    color:#3B8C8C;
    box-shadow: 0 8px 18px rgba(0,0,0,.2);
    border:1px solid rgb(221,255,226);
}

#alerts{
    background-color:rgb(232, 245, 255);
    display:flex;
    flex-direction: column;
    justify-content: center;
    margin:1rem;
    margin-top:4rem;
    padding:1rem;
    border-radius: .5rem;
}

.alert-head{
    display:flex;
    align-items: center;
    justify-content: space-between;
}

.alert-icon-black{
    width: min(200px, 13%);
    display: block;
    height: auto;
    border-radius: 12px;
}

#icon-text{
    display:flex;
    gap:1rem;
    align-items:center;
}

.alert-icon-red{
    width:2.25rem;
    height: 2.25rem;
    border-radius: 12px;
}

.alert-body{
    display:flex;
    gap:1.5rem;
    padding:1rem;
}

.date p{
    font-size:.75rem;
}
.alert-container2{
    display:none;
}

.alert-container3{
    display:none;
}

.alerts-btn{
    text-align: center;
    align-content: center;
    background-color: #FF6169;
    border-radius: 0.8rem;
    padding:.5rem;
    font-family:'Quicksand';
    font-weight:600;
    color:rgb(255, 255, 255);
    text-decoration: none;
    font-size: 1rem;
    box-shadow: 0 4px 10px rgba(0,0,0,.15);
    border:1px solid transparent;

    transition: all .3s ease;
}

.alerts-btn:hover{
    background-color: #8c0c0c;
    box-shadow: 0 8px 18px rgba(0,0,0,.2);
    border:1px solid rgb(221,255,226);
}

#testimonials{
    margin-top:3rem;
}
/*SLIDESHOW *WATCHED A YT VIDEO --> MAY NOT BE BEST WAY TO DO THINGS LOL!*/

#slider{
    overflow:hidden;
}

.slides{
    position:relative;
    width:500%;
    margin:0;
    padding:0;
    left:0;
    animation:20s slider infinite;
}

.slides figure{
    float:left;
    width:20%;
    margin:0;
    position:relative;
}

.slides img{
    width:100%;
    display:block;
    padding:2rem;
}

figcaption{
    position:absolute;
    bottom:1rem;
    left:40px;
    font-family:'Quicksand';
    font-weight:200;
    color:rgb(0, 0, 0);
    font-size:.85rem;
}

@keyframes slider {
    0% {
        left:0;
    }
    20%{
        left:0;
    }
    25%{
        left:-100%;
    }
    45%{
        left:-100%;
    }
    50%{
        left:-200%;
    }
    70%{
        left:-200%;
    }
    75%{
        left:-300%;
    }
    95%{
        left:-300%;
    }
    100%{
        left:-400%;
    }
}

@keyframes captionFade{
    0%,20%{opacity:1;}
    25%,100%{opacity:0;}
}

.visit{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content: center;
    gap:2rem;
}

footer{
margin-top:5rem;
display:flex;
flex-direction:column;
align-content:center;
gap:3rem;
background-color:#506425;
font-family: 'Quicksand';
}

.icons{
    display:flex;
    flex-direction:column;
    max-width: 1200px;
    margin:auto;
}

.gov-logo{
    display:flex;
    flex-direction:column;
    gap:1rem;
    align-items:center;
    justify-content: center;
    margin:2rem;
    font-weight:600;
    color: rgb(232, 245, 255);
    font-size:1rem;
}

.social-media{
    display:flex;
    justify-content: center;
    margin-left:4rem;
    
}

.footer-icon{
    width: 52%;
    height:auto;
}

.footer-icon-img{
    width:40%;
    height:auto;
}

.legal-info{
    display:flex;
    flex-direction:column;
    gap:1.5rem;
    margin:1.5rem;
    font-family:'quicksand';
    font-weight:100;
}

.footer-btn{
    display:flex;
    justify-content: left;
    align-items: center;
    border-radius: 1rem;
    padding:.5rem;
    color:rgb(221, 255, 226);
    text-decoration: none;
    font-size: .8rem;
    height:40px;
    box-shadow: 0 4px 10px rgba(0,0,0,.15);
    /*border:1px solid rgba(255,255,255,.2);*/
    border:1px solid transparent;

    transition: all .3s ease;
}

.footer-btn:hover{
    background-color: #839f46;
    box-shadow: 0 8px 18px rgba(0,0,0,.2);
    border:1px solid rgb(221,255,226);
}

.footer-btn2{
    color:rgb(221, 255, 226);
    text-decoration: none;
    text-shadow: 2px 2px 5px rgb(32, 50, 35);
    margin-bottom:3rem;
    margin-top:1rem;
}

.footer-btn2:hover{
    color:#71e4f3;
}


/*Tablet Version - 2 columns*/

@media (min-width:768px){

    html{
        font-size:18px;
    }

    nav{
        flex-direction:row;
    }

    .hero-content{
        text-align:center;
    }
    #card-container{
        display:grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: stretch;
        gap:1rem;
        margin:1rem;
    }

    .hero{
        height:90vh;
    }

    .alert-container2{
        display:flex;
        gap:1.5rem;
        padding:1rem;
    }

    .alert-container{
        display: flex;
        justify-content: center;
        gap:1rem;
        align-items: stretch;
        margin:auto;
    }

    figcaption{
        font-size:1rem;
        position:relative;
        margin-top:-.75rem;
    }
}


/*Desktop Version - 3 column*/

@media (min-width:1024px){

    html{
        font-size:21px;
    }

    nav a{
        padding-right:.25rem;;
        padding:1rem;
        margin:1.25rem;
        
    }

    nav a:first-child{
        font-size:.75rem;
    }

    main{
        max-width:1200px;
        margin:auto;
    }

    .hero{
        background-attachment: fixed;
    }

    .card{
        transition: transform .3s ease, box-shadow .3s ease;
    }

    .card:hover{
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.18);
    }

    #card-container{
        grid-template-columns: repeat(3,0.5fr);
        
    }

    .alert-body{
        min-height:300px;
    }

    .alert-container2{
        min-width:300px;
    }

    .alert-container3{
        display:flex;
        gap:1.5rem;
        padding:1rem;
        min-width:400px;
    }

    .alert-container{
        display:flex;
        justify-content:space-evenly;
    }

    .icons{
        align-content: center;
    }

    .gov-logo{
        flex-direction:row;
        justify-content:left;
    }

    .footer-icon{
        width: 15%;
        height:auto;
    }

    .footer-icon-img{
        width:20%;
        height:auto;
    }

    .legal-info{
        flex-direction: row;
        justify-content: space-evenly;
    }
}