:root {
    --bg-start: #2c35a2;
    --bg-end: #0f133b;
  
    --color-freshly-mint: #38ef7d;
    --color-freshly-mint-dark: #11998e;

    --color-enlightened-violet: #ff63CC;
    --color-enlightened-violet-dark: #9D19A9;

    --color-tenacious-indigo: #7C1DC8;
    --color-tenacious-indigo-dark: #451089;

    --logo:white; 
    --fg-color: white;
    /* --fg-color: rgba(255, 255, 255, 0.9); */
    --transition: 250ms ease-out;
  }

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

html {
    color: var(--fg-color);
  
    font-family: "Nunito", sans-serif;
    font-weight: 500;
    font-size: 5vw;
  }

header {
    position:fixed;
    top: 0;
    right: 20px;
    display: flex;
    align-items: center;
    height: 5vh;
    background-color: transparent;
    color: var(--color-tenacious-indigo-dark);
    /* background-color: rgba(ff,ff,ff, 0.3); */
    /* background-image: linear-gradient(to right, var(--color-freshly-mint-dark) , var(--color-freshly-mint)); */
    font-size: 1.7vw;
    z-index: 2;
}

.logo-left-corner {
  position: fixed;
  top: 0;
  left: 0;
  scale: 0.5;
  width: 20px;
  height: 20px;
}

.logo-left-corner img {
  animation: spinning 6s infinite linear;
}

.nav-item {
    display: inline-block;
    padding: 11px;
}

.nav-list {
  font-weight: 600;
}

ul .nav-item a {
  text-decoration: none;
  color:#000;
}

.container-video {
    position:relative;
    height: 100vh;
}

    .background-video {
        background-position: center;
        background-size: cover;
        width: 100vw;
        height: 100vh;
        filter: blur(4px);
        position: relative;
        z-index: 0;
        opacity: 0.7;
        object-fit: cover;
    }

    .logo {
        display: flex;
        align-content: center;
        justify-content: center;
        width: 100%;
        position: absolute;
        top:10vw;
        z-index: 1;
    
        animation-name: spinning;
        animation-duration: 2s;
        animation-iteration-count: 1;
        /* linear | ease | ease-in | ease-out | ease-in-out */
        animation-timing-function: ease-in-out;
        
    }

    .title {
        display: flex;
        align-content: center;
        justify-content: center;
        color:var(--logo);
        width: 100%;
        position: absolute;
        top:10vw;
        z-index: 1;
        font-size: 9vw;
    }

    

section {
    padding-top: 50px;
    border-top-style: solid;
    border-width: 5px;
    border-color: #451089;
    box-shadow: 0px -40px 70px -20px #451087, 0px 40px 40px -20px #451089;
    /* box-shadow: #451089 0px 22px 70px 44px; */
    /* box-shadow: inset 0px 11px 8px -10px #451087, inset 0px -11px 8px -10px #451089; */
}

.section-logo {
    display: flex;
    justify-content: center;
    gap: 50px;
    align-items: center;
    height: 500px;
    /* background-image: linear-gradient(to right, var(--color-enlightened-violet-dark) , var(--color-enlightened-violet)); */
    background-color: white; 
}

    .section-logo .item-logo {
        /* height: 30vh;
        width: 30vw; */
    }

    .section-logo .item-text {
        height: 30vh;
        /* width: 30vw; */
        font-size: 2vh;
        color: black;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

.section-pictures {
    /* background-image: linear-gradient(to right, var(--color-tenacious-indigo-dark) , var(--color-tenacious-indigo)); */
    /* background-color: var(--color-enlightened-violet); */
    background-color: white;
    display: grid;
    margin-top:35px;
    border-color: #ff63CC;
    border-style:groove;
    border-width: 5px 0px 5px 0px;
    filter: grayscale(80%);
    box-shadow: 0px 21px 40px -10px #451089, 0px -21px 30px -10px #ff63cc
    /* grid-template-columns: (3, 1fr);
    grid-template-rows: (2, 1fr); */
    /* filter: gray saturate(0%); */
    


    
}

    .section-pictures .item-one-pictures {
        grid-column: 1/3;
        grid-row:1/3;
    }
    
        .section-pictures .item-one-pictures img {
            max-width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .section-pictures .item-two-pictures {
        grid-column: 3/4;
        grid-row: 1/2;
    }

        .section-pictures .item-two-pictures img {
            max-width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .section-pictures .item-three-pictures {
        grid-column: 3/4;
        grid-row: 2/3;
    }   

        .section-pictures .item-three-pictures img {
            max-width: 100%;
            height: 100%;
            object-fit: cover;
        }

.section-news {
    height: 65px;
    margin-top:20px;
    margin-bottom:100px;
    /* background-image: linear-gradient(to right, var(--color-freshly-mint-dark) , var(--color-freshly-mint)); */

    /* background-color: var(--color-enlightened-violet); */
}
    .section-news .news-pictures img{
        filter: blur(3px);
        max-width: 100%;
        height: auto;
    }
    /* (A) FIXED WRAPPER */
    .hwrap {
        overflow: hidden; /* HIDE SCROLL BAR */
        background: transparent;
        /* position:absolute; */
        top:300px;
        /* border: white; */
        border-style: solid;
        /* border-left-style: none; */
        border-width: thin;
        font-size: 35px;
        height: 65px;

        /* background-color: #fff; */
        border-image: linear-gradient(to right, #7a1cc6, #006cf6, #0096f9, #00b6e1, #00cfc6, #3ad49b, #7dd362, #beca1e, #f7a81b, #ff7f51, #ff5f8d, #fc60ca);

        /* background: linear-gradient(
            to right,
            hsl(0, 0%, 0%) 0%,
            hsla(0, 0%, 0%, 0.964) 7.4%,
            hsla(0, 0%, 0%, 0.918) 15.3%,
            hsla(0, 0%, 0%, 0.862) 23.4%,
            hsla(0, 0%, 0%, 0.799) 31.6%,
            hsla(0, 0%, 0%, 0.73) 39.9%,
            hsla(0, 0%, 0%, 0.655) 48.2%,
            hsla(0, 0%, 0%, 0.577) 56.2%,
            hsla(0, 0%, 0%, 0.497) 64%,
            hsla(0, 0%, 0%, 0.417) 71.3%,
            hsla(0, 0%, 0%, 0.337) 78.1%,
            hsla(0, 0%, 0%, 0.259) 84.2%,
            hsla(0, 0%, 0%, 0.186) 89.6%,
            hsla(0, 0%, 0%, 0.117) 94.1%,
            hsla(0, 0%, 0%, 0.054) 97.6%,
            hsla(0, 0%, 0%, 0) 100%
            ); */


    }
    /* (B) MOVING TICKER WRAPPER */
    .hmove {
        display:flex;
        animation: tickerh linear 60s infinite;
    }

    .hmove:hover {animation-play-state: paused;}
    /* (C) ITEMS - INTO A LONG HORIZONTAL ROW */
    .hitem {
        flex-shrink: 0;
        width: 100%;
        box-sizing: border-box;
        padding: 10px;
        text-align: center;
    }    
    .hitem a {
      text-decoration: none;
      color: #11998e;
    }

    /* About US */

  .about-container {
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    margin-bottom: 100px;
    margin-top:150px;
  }
  .about-title-container {
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-style: solid;
    border-width: 5px;
    border-color: #451089;
    box-shadow: 0px -60px 50px -20px #451087, 0px 40px 40px -20px #451089;
  }
  .about-top-title{
    display: flex;
    justify-content: center;
    width: 200px;
    border-radius: 40px;
    background-color:  rgb(54, 234, 125);
    margin: 40px;
    color: rgb(122, 28, 198);
    font-size: 35px;
    font-weight: 600;
    border-color: rgb(252, 96, 202);
    border-width: 2px;
    border-style: groove;  
    box-shadow: 0 4px 8px 0 rgba(122, 28, 198, 0.2), 0 6px 20px 0 rgba(122, 28, 198, 0.19);
  }

  .about-wrapper {
    max-width: 1000px;
  }
  .about-image {
    /* background-size: cover;
    object-fit: fill; */
    width: 100%;
    height: 100%;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
  }
  .about-preview {
    border-radius: 15px;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
    margin-bottom: 40px;
  }
  .about-preview {
    color: #212529;
  }
  .about-preview .about-title {
    font-size: 30px;
    margin-top: 1.1rem;
    margin: 20px 20px 40px;
    text-align: center;
  }
  .about-preview .about-subtitle {
    margin: 10px;
    padding:20px;
    font-size: 21px;
    color:black;
    font-weight: 400;
  }
  .about-preview > .about-meta {
    font-size: 14px;
    font-style: italic;
    color: #404951;
    padding-left:12px;
  }
  

    /* footer */

footer {
    display: flex;
    justify-content: center;
    gap: 1vw;
    align-items: center;
    color:white;
    flex-direction: column;
    font-weight: 900;
    text-align: center;
    font-size:30px;
    background-color: black;
    border-top-right-radius: 50%;
    border-top-left-radius: 50%;
}

    footer .connect {
      /* background-color: rgb(122, 28, 198); */
      /* box-shadow: 0 4px 8px 0 rgba(122, 28, 198, 0.2), 0 6px 20px 0 rgba(122, 28, 198, 0.19); */
      width: 90%;
      border-radius: 7px;
      background-color: transparent;
    }

    footer .social {
      /* background-color: rgb(54, 234, 125); */
      /* width: 90%; */
      /* border-radius: 7px; */
      background-color: transparent;
    }

    footer .contact-us {
      /* background-color: rgb(252, 96, 202); */
      /* width: 90%; */
      /* border-radius: 7px; */
      background-color: transparent;
    }

    footer .maps {
      margin-bottom: 30px;
    }

    footer .copyright {
      display: flex;
      justify-content: center;
      color: white;
      height: 30px;
      font-size: small;
      font-weight: 400;
    }

/* blog */

  .blog-container {
    display: flex;
    justify-content: center;
    margin-bottom:100px;
  }

  .blog-title-container {
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-style: solid;
    border-width: 5px;
    border-color: #451089;
    box-shadow: 0px -60px 50px -20px #451087, 0px 40px 40px -20px #451089;
  }
  .blog-top-title {
    display: flex;
    justify-content: center;
    width: 200px;
    border-radius: 40px;
    background-color: #fff;
    margin: 40px;
    color: white;
    font-size: 35px;
    font-weight: 600;
    border-color: #000;
    border-width: 2px;
    border-style: groove;  
    box-shadow: 0 4px 8px 0 black;
    text-shadow: 2px 2px 4px #000000;
  }

  .post-container {
    display:flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 20px;
    max-width: 700px;
    margin-bottom:100px;
  }

  .post-preview {
    border-bottom-style: groove;
  }
  .post-preview > a {
    color: #212529;
  }
  .post-preview > a:focus, .post-preview > a:hover {
    text-decoration: none;
    color: #002ba1;
  }
  .post-preview > a > .post-title {
    font-size: 30px;
    margin-top: 1.875rem;
    margin-bottom: 0.625rem;
    text-align: center;
  }
  .post-preview .post-subtitle {
    margin-bottom: 10px;
    font-size: 25px;
    color:black;
    font-weight: 400;
    text-align: justify;
  }
  .post-preview > .post-meta {
    font-size: 14px;
    font-style: italic;
    margin-top: 0;
    color: #6c757d;
  }
  .post-preview > .post-meta > a {
    text-decoration: none;
  }

/* Single post preview / blogSinglePage */

.single-blog-container {
  display: flex;
  justify-content: center;
  margin-bottom: 100px;
}
.single-post-wrapper {
  width: 700px;
}
.single-post-preview {
  border-bottom-style: groove;
}
.single-post-preview {
  color: #212529;
}
.single-post-preview .single-post-title {
  font-size: 30px;
  margin-top: 1.875rem;
  margin-bottom: 0.625rem;

  display: flex;
    justify-content: center;
    /* width: 200px; */
    border-radius: 40px;
    background-color:  rgb(54, 234, 125);
    /* margin: 40px; */
    color: rgb(122, 28, 198);
    /* font-size: 0.7em; */
    font-weight: 600;
    border-color: rgb(252, 96, 202);
    border-width: 2px;
    border-style: groove;  
    box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
    padding-left: 15px;
    padding-right: 15px;
}
.single-post-preview .single-post-subtitle {
  margin-bottom: 0.625rem;
  font-size: 25px;
  color:black;
  font-weight: 400;
  text-align: justify;
}
.single-post-preview > .single-post-meta {
  font-size: 14px;
  font-style: italic;
  margin-top: 0;
  color: #6c757d;
}

/* News */

.news-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom:100px;
  margin-top: 150px;
  }

.news-title-container {
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-style: solid;
  border-width: 5px;
  border-color: #451089;
  box-shadow: 0px -60px 50px -20px #451087, 0px 40px 40px -20px #451089;
}

.news-top-title{
  display: flex;
  justify-content: center;
  width: 200px;
  border-radius: 40px;
  background-color: white;
  margin: 40px;
  color: black;
  font-size: 35px;
  font-weight: 600;
  border-color: black;
  border-width: 2px;
  border-style: groove;  
  box-shadow: 0 4px 8px 0 black;
}
.news-wrapper {
  max-width: 1000px;
}
.news-image {
  /* background-size: cover;
  object-fit: fill; */
  width: 100%;
  height: 100%;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
.news-preview {
  border-radius: 15px;
  background-color: #fff;
  /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
  box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
  margin-bottom: 40px;
}
.news-preview {
  color: #212529;
}
.news-preview .news-title {
  font-size: 30px;
  margin-top: 1.1rem;
  margin: 20px 20px 40px;
  text-align: center;
}
.news-preview .news-subtitle {
  margin: 10px;
  font-size: 21px;
  color:black;
  font-weight: 400;
}
.news-preview > .news-meta {
  font-size: 14px;
  font-style: italic;
  color: #404951;
  padding-left:12px;
}

/* Courses */

.courses-container {
  display: flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  margin-bottom:100px;
  margin-top:150px;
}
.courses-title-container {
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-style: solid;
  border-width: 5px;
  border-color: #451089;
  box-shadow: 0px -60px 50px -20px #451087, 0px 40px 40px -20px #451089;
}
.courses-top-title{
  display: flex;
  justify-content: center;
  width: 200px;
  border-radius: 40px;
  background-color:  rgb(54, 234, 125);
  margin: 40px;
  color: rgb(122, 28, 198);
  font-size: 35px;
  font-weight: 600;
  border-color: rgb(252, 96, 202);
  border-width: 2px;
  border-style: groove;  
  box-shadow: 0 4px 8px 0 rgba(122, 28, 198, 0.2), 0 6px 20px 0 rgba(122, 28, 198, 0.19);
}
.courses-wrapper {
  max-width: 90vw; 
  
}
.courses-image {
  /* background-size: cover;
  object-fit: fill; */
  width: 50%;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  object-fit: cover;
}

.courses-image-reverse {
  /* background-size: cover;
  object-fit: fill; */
  width: 50%;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  object-fit: cover;
}

.courses-preview {
  border-radius: 15px;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
  margin-bottom:1.4em;
  margin:10px;
  display: flex;
  flex-direction: row;
  margin-bottom: 30px;
  color: #212529;
}
.courses-preview-reverse {
  border-radius: 15px;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
  margin-bottom:1.4em;
  margin:10px;
  display: flex;
  flex-direction: row-reverse;
  margin-bottom: 30px;
}
.courses-text-wrapper {
  display:flex;
  flex-direction: column;
  justify-content: left;
  overflow-wrap: anywhere;
}

.courses-preview .courses-title {
  font-size: 30px;
  margin-top: 1.1rem;
  margin: 20px 20px 40px;
  text-align: center;
}
.courses-preview .courses-subtitle {
  margin: 10px;
  font-size: 21px;
  color:black;
  font-weight: 400;
}
.courses-preview .courses-meta {
  font-size: 14px;
  font-style: italic;
  color: #404951;
  padding-left:12px;
}

.courses-text-wrapper .courses-title {
  font-size: 30px;
  margin-top: 1.1rem;
  margin: 20px 20px 40px;
  text-align: center;
  color: #000;
}
.courses-text-wrapper .courses-subtitle {
  margin: 10px;
  font-size: 21px;
  color:black;
  font-weight: 400;
}
.courses-text-wrapper .courses-meta {
  font-size: 14px;
  font-style: italic;
  color: #404951;
  padding-left:12px;
}

/* gallery */

.gallery-title-container {
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-style: solid;
    border-width: 5px;
    border-color: #451089;
    box-shadow: 0px -60px 50px -20px #451087, 0px 40px 40px -20px #451089;
}
.gallery-top-title{
  display: flex;
  justify-content: center;
  width: 200px;
  border-radius: 40px;
  background-color:  rgb(54, 234, 125);
  margin: 40px;
  color: rgb(122, 28, 198);
  font-size: 35px;
  font-weight: 600;
  border-color: rgb(252, 96, 202);
  border-width: 2px;
  border-style: groove;  
  box-shadow: 0 4px 8px 0 rgba(122, 28, 198, 0.2), 0 6px 20px 0 rgba(122, 28, 198, 0.19);
}

.gallery-img {
  max-width: 100%;
  display: block;
  border-radius: 12px;
}

.gallery-figure {
  margin:0;
  display: grid !important;
  grid-template-rows: 1fr auto;
  margin-bottom: 10px;
  break-inside: avoid;
  padding: 5px;
}

.gallery-figure > .gallery-img {
  grid-row: 1 / -1;
  grid-column: 1;
}

.gallery-figure a {
  color:black;
  text-decoration: none;
}

/* .gallery-figcaption {
  grid-row: 2;
  grid-column: 1;
  background-color: rgba(255, 255, 255, 0.5);
  padding: .2em .5em;
  justify-self: start;
  font-size: small;
} */

.container-masonry {
  column-count: 3;
  column-gap: 1px;
  background-image: linear-gradient(to right, #7a1cc6, #006cf6, #0096f9, #00b6e1, #00cfc6, #3ad49b, #7dd362, #beca1e, #f7a81b, #ff7f51, #ff5f8d, #fc60ca);
  margin: 50px 20px 20px 20px;
  box-shadow: 0 4px 8px 0 rgba(122, 28, 198, 0.2), 0 6px 20px 0 rgba(122, 28, 198, 0.19);
  border-radius: 12px;
  margin-bottom:100px;
  margin-top:150px;
}


/* mobile resolution */

@media screen and (max-width:767px) {

  .courses-image {
    /* background-size: cover;
    object-fit: fill; */
    width: 100%;
    height: 100%;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 0px;
  }
  
  .courses-image-reverse {
    /* background-size: cover;
    object-fit: fill; */
    width: 100%;
    height: 100%;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 0px;
  }

  .courses-preview {
    flex-direction: column;
  }
  .courses-preview-reverse {
    flex-direction: column;
  }
  .single-post-preview .single-post-title {
    text-align: center;
  }
  .post-container {
    max-width: 90%;
  }

  .single-post-wrapper {
    max-width: 90%;
  }

  .news-wrapper {
    max-width: 90%;
  }

  .about-wrapper {
    max-width: 90%;
  }
  
  footer .maps {
    width: 90%;
  }

  footer iframe {
    width: 90%;
  }

  .logo {
    display: flex;
    align-content: center;
    justify-content: center;
    width: 100%;
    position: absolute;
    top:0.1vw;
    z-index: 1;

    animation-name: spinning;
    animation-duration: 2s;
    animation-iteration-count: 1;
    /* linear | ease | ease-in | ease-out | ease-in-out */
    animation-timing-function: ease-in-out;
    scale: 0.5;
  }

    .section-logo {
        display: flex;
        justify-content: center;
        gap: 50px;
        align-items:center;
        height: 670px;
        /* background-image: linear-gradient(to right, var(--color-enlightened-violet-dark) , var(--color-enlightened-violet)); */
        background-color: white; 
        flex-direction: column;
        margin: 220px 0px;
    }
    
        .section-logo .item-logo {
            /* height: 30vh;
            width: 30vw; */
            display: flex;
            justify-content: center;
            align-content: center;
            scale:0.8;
        }
    
        .section-logo .item-text {
            height: 30vh;
            /* width: 30vw; */
            font-size: 2vh;
            color: black;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding: 0px 15vw;
        }
        
        /* Menu */
        .wrapper{
            position: fixed;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            /*background: linear-gradient(-135deg, #c850c0, #4158d0);*/
            /* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
           /* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%);*/
            /* clip-path: circle(25px at calc(0% + 45px) 45px); */
            background: #000;
            clip-path: circle(25px at calc(100% - 45px) 45px);
            transition: all 0.3s ease-in-out;
          }
          #active:checked ~ .wrapper{
            clip-path: circle(75%);
          }
          .menu-btn{
            position: absolute;
            z-index: 2;
            right: 0px;
            /* left: 20px; */
            top: 20px;
            height: 50px;
            width: 50px;
            text-align: center;
            line-height: 50px;
            border-radius: 50%;
            font-size: 20px;
            color: #fff;
            cursor: pointer;
            /*background: linear-gradient(-135deg, #c850c0, #4158d0);*/
            /* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
           /* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */
            background: #000;
            transition: all 0.3s ease-in-out;
          }
          #active:checked ~ .menu-btn{
            color: #fff;
          }
          #active:checked ~ .menu-btn i:before{
            content: "\f00d";
          }
          .wrapper ul{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            list-style: none;
            text-align: center;
          }
          .wrapper ul li{
            margin: 15px 0;
          }
          .wrapper ul li a{
            color: none;
            text-decoration: none;
            font-size: 30px;
            font-weight: 500;
            padding: 5px 30px;
            color: #fff;
            border-radius: 50px;
            background: #000;
            position: relative;
            line-height: 50px;
            transition: all 0.3s ease;
          }
          .wrapper ul li a:after{
            position: absolute;
            content: "";
            background: #fff;
             background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);
            /*background: linear-gradient(375deg, #1cc7d0, #2ede98);*/
            width: 104%;
            height: 110%;
            left: -2%;
            top: -5%; /* if the font is 'Oswald'*/
            border-radius: 50px;
            transform: scaleY(0);
            z-index: -1;
            animation: rotate 1.5s linear infinite;
            transition: transform 0.3s ease;
          }
          .wrapper ul li a:hover:after{
            transform: scaleY(1);
          }
          .wrapper ul li a:hover{
            color: #fff;
          }
          input[type="checkbox"]{
            display: none;
          }
          .content{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: -1;
            text-align: center;
            width: 100%;
            color: #202020;
          }
          .content .title{
            font-size: 40px;
            font-weight: 700;
          }
          .content p{
            font-size: 35px;
            font-weight: 600;
          }
          
          @keyframes rotate {
            0%{
              filter: hue-rotate(0deg);
            }
            100%{
              filter: hue-rotate(360deg);
            }
          }
          
        /* end of Menu*/
}

@media screen and (min-width:768px) and (max-width:1023px) {

  .courses-image {
    /* background-size: cover;
    object-fit: fill; */
    width: 50%;
    height:auto;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-top-right-radius: 0px;
    object-fit: cover;
  }
  
  .courses-image-reverse {
    /* background-size: cover;
    object-fit: fill; */
    width: 50%;
    height:auto;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    border-top-left-radius: 0px;
    object-fit: cover;
  }
    .section-logo .item-logo {
      scale:0.9;
    }

    .section-logo .item-text {
        height: 30vh;
        width: 30vw;
        font-size: 2.3vh;
        color: black;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    /* Hide input and label for menu on bigger resolution */
    header #active {
        display: none !important;
    }

    header .menu-btn {
        display: none !important;
    }

    .logo {
      display: flex;
      align-content: center;
      justify-content: center;
      width: 100%;
      position: absolute;
      top:1vw;
      z-index: 1;
  
      animation-name: spinning;
      animation-duration: 2s;
      animation-iteration-count: 1;
      /* linear | ease | ease-in | ease-out | ease-in-out */
      animation-timing-function: ease-in-out;     
  }

  .title {
    display: flex;
    align-content: center;
    justify-content: center;
    color:var(--logo);
    width: 100%;
    position: absolute;
    top:20vw;
    z-index: 1;
    font-size: 9vw;
}
    
}

@media screen and (min-width:1024px) {
    
    .section-logo .item-text {
        height: 30vh;
        width: 30vw;
        font-size: 2vh;
        color: black;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    /* Hide input and label for menu on bigger resolution */
    header #active {
        display: none !important;
    }

    header .menu-btn {
        display: none !important;
    }
}

@keyframes spinning {
    from { transform: rotate(0deg) }
    to { transform: rotate(360deg) }
  }

/* (D) ANIMATION - MOVE ITEMS FROM RIGHT TO LEFT */
/* 4 ITEMS -400%, CHANGE THIS IF YOU ADD/REMOVE ITEMS */
@keyframes tickerh {
    0% { transform: translate3d(100%,0,0);}
    100% { transform: translate3d(-400%,0,0);}
}