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

        [Table of contents]

        0. General
        1. MAIN
        2. PROJECT
        3. TEAM
        4. NEWS/BLOG
        7. PUBLICATIONS

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

/* General styles */
    * {
        margin: 0;
        padding: 0;
        font-family: 'Montserrat', "proxima-soft", "Proxima Soft", "Proxima Nova Soft", Helvetica, Arial, sans-serif;
    }
    html,
    body {
        height: 100%;
        min-height: 100vh;
        width: 100%;
        font-size: 16px;
        background-color: #ffffff;
        color: #222;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    h1 {
        font-weight: bold!important;
        width:fit-content!important;
        margin-bottom: 50px;
    }
    hr {
        margin-top: 1em;
        margin-bottom: 1em;
    }

    a, a:hover {
        font-weight: 500;
        color: #00c89b;
        text-decoration: none;
    }
    main {
        background-image: url(http://localhost/MyFirstWebsite/images/website-background.png);
        padding-top: 50px;
        padding-bottom: 50px;
        color:#023047
    }
    section {
        margin-top: 50px;
        margin-bottom: 50px;
    }

/* Footer */
    .page-footer {
        background-color: #ffd352;
        color: #293241;
        padding-top: 0.5rem;
        border-top: 2px solid #ffc928;
    }
    .privacy-policy a, .privacy-policy a:hover, .footer-menu a:hover {
        font-weight: bold;
        color: #293241;
        text-decoration: none;
    }
    .footer-links {
        margin-top: 0.5rem;
    }
    hr.light {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        margin:auto;
        color: #293241;
    }

/* -------------navbar ---------- */
    .nav-item {
        padding: 0 0.5rem;
        font-size:22px
    }
    .navigation-bar li a {
        color: #293241;
    }
    .navigation-bar li::after {
        content: '';
        width: 0%;
        height: 2px;
        background: #00c89b;
        display: block;
        margin: auto;
        transition: 0.5s;
    }
    .navigation-bar li:hover::after, footer a > div:hover::after {
        width:100%;
    }
    a.active {
        color: #00c89b !important;
        font-weight:600;
    }

/*-----------MAIN-----------*/

    /* find out more button */
    .find-out-more-btn, .read-more-btn {
        border:2px solid #008c6c;
        color: #293241;
        width:fit-content;
        background: #ffffff

    }
    .find-out-more-btn:hover, .read-more-btn:hover {
        color: #293241;
        border:2px solid #293241;
        font-weight:500;
        background: #7fe3cd;
    }

    /* Page Header Image*/

    .jumbotron {
        color: white;
        background-color: #a6a6a6;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 500px;
    }

    .jumbotron .container p {
        font-size: 30px;
    }

    /* Blog Posts */
    
    .websiteHeaders::after {
        content: '';
        width: 100%;
        height: 5px;
        background: #00c89b;
        display: block;
        margin: auto;
        transition: 0.5s;
    }
    .section-container {
        width: 85%;
        margin-left: auto;
        margin-right: auto;
    }
    /* blog post background colours */
    .blog-Card1 {
        border:1px solid #ffb703;
    }
    .blog-Card2 {
        border:1px solid #00c89b;
    }
    .blog-Card3 {
        border:1px solid #ee6c4d;
    }
    .blog-Card4 {
        border:1px solid #023047;
    }
    .blog-Body1 {
        background:#FFF0CC;
    }
    .blog-Body2 {
        background:#CCF4EB;
    }
    .blog-Body3 {
        background:#F9D2C9;
    }
    .blog-Body4 {
        background:#CCD5DA;
    }
    /* blog post avatars */
    .blogImage {
        width: 20%
    }
    .img-left  {
        float: left;    
        margin: 0 15px 0 0;
    }
    .img-right  {
        float: right;    
        margin: 0 0 0 15px;
    }
    /* blog post header background */
    .blog-Card1 > .card-header {
        border-bottom: 1px solid #ffb703;
        background: #FFF0CC
    }
    .blog-Card2 > .card-header {
        border-bottom: 1px solid #00c89b;
        background: #CCF4EB
    }
    .blog-Card3 > .card-header {
        border-bottom: 1px solid #ee6c4d;
        background: #F9D2C9
    }
    .blog-Card4 > .card-header {
        border-bottom: 1px solid #023047;
        background: #CCD5DA
    }
    .blogHeaders {
        width:fit-content
    }
    .avatar-icon {
        width:15%
    }
    .blogHeaders::after {
        content: '';
        width: 100%;
        height: 3px;
        background: #00c89b;
        display: block;
        margin: auto;
        transition: 0.5s;
    }
    .blogPost {
        display:flex;
        margin:5px 0 5px 0
    }
    /* blog post footer background */
    .blog-footer1, .blog-footer2, .blog-footer3, .blog-footer4 {
        border-bottom-right-radius: 5%;
        border-bottom-left-radius: 5%;
    }
    .blog-footer1 {
        border-top: 1px solid #ffb703;
        background: #FFF0CC
    }
    .blog-footer2 {
        border-top: 1px solid #00c89b;
        background: #CCF4EB
    }
    .blog-footer3 {
        border-top: 1px solid #ee6c4d;
        background: #F9D2C9
    }
    .blog-footer4 {
        border-top: 1px solid #023047;
        background: #CCD5DA
    }

    /*-- Horizontal Line --*/
    .container .hr1 {
        margin: 70px 0 70px 0;
    }

    .magnifying-glass {
        border-radius:30%
    }

    /* Social Media */
    .social-media-row {
        align-items: center;
        margin-bottom: 50px;
    }
    /* scroll back to top button */
    #btn-back-to-top {
        position: fixed;
        bottom: 20px;
        right: 20px;
        /* display: none; */
        opacity: 0;
        transition: opacity 1s ease-in-out;
    }
    #btn-back-to-top > svg:hover {
        color:#008c6c !important;
        transition: color 0.8s ease;
    }
    /* Quote Carousel Slides */
    .carousel-item {
        background-image: url('../images/gallery/carouselquotations.png');
    }
    .width-auto {
        width: auto;
    }
    .text-lg {
        font-size: 2rem;
    }
    .carousel-indicators li {
        border: none;
        background: #ccc;
    }
    .carousel-indicators li.active {
        background: #008C6C;
    }
    .carousel-indicators [data-bs-target] {
        background-color: #999999
    }
    .carousel-control-next, .carousel-control-prev {
        opacity: 0.8
    }
    .rotateimg180 {
        -webkit-transform:rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    .carousel-quote {
        font-size: calc(1.325rem + .9vw)
    }
    .carousel-box {
        padding:3rem!important
    }

/*-----------ABOUT-----------*/

    .about-header, .resource-header {
        background:#66BAA6
    }

    /* --- RESOURCES --- */
    .resource-logo {
        width:50px
    }
    .resource-item {
        background: #d9d9d9
    }
    /* --------BLOG PAGE-------- */
    .blog-date1, .blog-date2, .blog-date3, .blog-date4 {
        font-size: small;
        font-weight: bold
    }
    .blog-date1 {
        color:#e5a402
    }
    .blog-date2 {
        color:#008c6c
    }
    .blog-date3 {
        color:#ee6c4d
    }
    .blog-date4 {
        color:#023047
    }
    .latest-box {
        display:flex
    }
    .latest-news-col1 {
        background:#FFF0CC;
        border: 1px solid #ffb703;
    }
    .latest-news-col2 {
        background:#BFF1E6;
        border: 1px solid #00c89b;
    }
    .latest-news-col3 {
        border: 1px solid #ee6c4d;
        background: #F9D2C9;
    }
    .latest-news-col4 {
        background:#CCD5DA;
        border: 1px solid #023047;
    }
    .return-btn {
        color: #00c89b;
        background:white;
        border:1px solid #34596b
    }
    .return-btn:hover {
        color: #34596b;
        background:#00c89b;
        border:1px solid #34596b
    }
 
/*-- Styles for different size devices --*/
/* large x-large */
@media only screen and (min-width: 1024px) and (max-width: 1250px) {
    .avatar-icon {
        width:20%
    }
}
/* medium large */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .jumbotron {
        text-align: center;
        height: 350px;
    }

    .jumbotron .container p {
        font-size: 30px;
    }

    main h1{
        font-size: 30px;
    }

    #about {
        margin-bottom: 100px;
    }
    .avatar-icon {
        width:35%
    }
    main {
        margin-top: 100px;
        margin-bottom: 50px;
    }

    section {
        margin-bottom: 20px;

    }

    hr.light {
        width: 80%;
    }
    .carousel-quote {
        font-size: calc(1.3rem + .6vw)
    }
    .carousel-box {
        padding:1rem!important
    }

}

/* medium */
@media only screen and (min-width: 580px) and (max-width: 760px) {

    .jumbotron {
        height: 200px;
    }

    #about .btn {
        margin-bottom: 20px;
    }

    #about {
        margin-bottom: 50px;
    }

    .jumbotron .container p {
        font-size: 25px;
    }
    .avatar-icon {
        width:15%
    }

    h4 {
        font-size: 20px;
    }

    hr.light {
        display: none;
    }
    .carousel-quote {
        font-size: calc(1.275rem + .3vw)
    }
    .carousel-box {
        padding:0.5rem!important
    }
}

/* small */
@media only screen and (max-width: 576px) {

    main {
        margin-top: 100px;
        margin-bottom: 50px;
    }

    .jumbotron {
        text-align: center;
        height: 250px;
    }

    #about .btn {
        font-size: 15px;
        margin-bottom: 20px;
    }

    .jumbotron .container p {
        font-size: 20px;
    }
    .avatar-icon {
        width:20%
    }
    section {
        margin-bottom: 20px;
    }

    h4 {
        font-size: 20px;
    }

    hr.light {
        display: none;
    }
    .carousel-quote {
        font-size: calc(1.275rem + .3vw)
    }
    .carousel-box {
        padding:0.5rem!important
    }

}