:root {
    --prim-color: #e51c22;
  }

@font-face {
    font-family: logo;
    src: url(/assets/font/sushi.ttf);
}

@font-face {
    font-family: body-font;
    src: url(/assets/font/CircularStd-Book.woff);
}

@font-face {
    font-family: bold-font;
    src: url(/assets/font/CircularStd-Bold.woff);
}



body{
    font-family: body-font;
}

.logo{
    font-family: logo;
    font-size: 40px;
  }

  li{
    margin-left: 10px;
    margin-right: 10px;
}

.nav-link:hover{
    color: var(--prim-color)!important;
}


.bg-light{
    background-color: #fff!important;
   
}

h1, h2, h3, h4, h5{
    font-family: bold-font;
    color: black;
}

.button-red{
    background-color: var(--prim-color);
    color: white;
    width: 100px;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 40px;
}

.button-red:hover{
    box-shadow: 0px 10px 10px rgb(219, 219, 219);
    color: white;
}
.button-trans{
    
    color: rgb(129, 129, 129);
    width: 150px;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 40px;
}

.button-trans:hover{
    
    color: black;
}

.award{
    object-fit: contain;
    width: 30px;
    padding-right: 10px;
}

.cup{
    object-fit: cover;
    width: 100%;
}

.vert-align{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.crd{
    box-shadow: none;
    transition: ease-in-out 0.5s!important;
    -webkit-transition: ease-in-out 0.5s!important;
}

.crd:hover{
    box-shadow: 0px 10px 20px rgb(219, 219, 219);
}

.icon{
    object-fit: contain;
    width: 30px;
}

.event{
    object-fit: cover;
    width: 100%;
    border-top-right-radius: 100px;
    border-bottom-left-radius: 100px;
    height: 500px;
}
.rectangle {
    height: 50px;
    width: 100px;
    background-image: url(/assets/img/red_pattern.webp);
    background-size: cover;
    position: absolute;
   
    bottom: 0px;
    right: 0px;
  }

  .button-event1{
   background-color: var(--prim-color);

    color: white;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 40px;
}

.button-event1:hover{
    box-shadow: 0px 10px 10px rgb(219, 219, 219);
    color: white;
}

.button-event2{
    
    color: rgb(129, 129, 129);
  
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 40px;
}

.button-event2:hover{
    
    color: black;
}

.red{
    color: var(--prim-color)!important;
}

.illus{
    object-fit: contain;
    width: 100%;
}

.pellet-icon{
    object-fit: contain;
    width: 50px;
}

.pellet-white{
    background-color: transparent;
    border-radius: 20px;
    box-shadow: none;
    
    transition: ease-in-out 0.5s!important;
    -webkit-transition: ease-in-out 0.5s!important;
}

.pellet-white:hover{
    box-shadow: 0px 10px 20px rgb(219, 219, 219);
    background-color: white;
    
}

.pellet-red{
    background-image: url(/assets/img/expi.webp);
    background-size: cover;
    border-radius: 20px;
    box-shadow: 0px 10px 30px rgb(255, 59, 59);
    transition: ease-in-out 0.5s!important;
    -webkit-transition: ease-in-out 0.5s!important;
    color: white;
}

.pellet-red:hover{
    box-shadow: 0px 10px 10px rgb(255, 59, 59);
}


.footer{
    box-shadow: 0px -10px 40px rgb(219, 219, 219);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.book{
    object-fit: contain;
    width: 100%;
}

.map{
    object-fit: contain;
    width: 100%;
    height: 600px;
}

.music{
    object-fit: cover;
    width: 100%;
   
}

.gryscl{
    filter: grayscale(100%);
    box-shadow: none;
    transition: ease-in-out 0.5s!important;
    -webkit-transition: ease-in-out 0.5s!important;
}

.gryscl:hover{
    filter: grayscale(0%);
    box-shadow: 0px 10px 20px rgb(219, 219, 219);
}

.cont-round{
    background-color: rgb(255, 215, 215);
    border-radius: 20px;
}

.icon-aw{
    width: 60px;
    height: 60px;
    object-fit: contain;
}



.aw-white{
    background-image: url(/assets/img/aw_card2.webp);
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0px 10px 20px rgb(219, 219, 219);
}

.shadow{
    box-shadow: 0px 10px 20px rgb(219, 219, 219);
}



.button-red2{
    background-color: var(--prim-color);
    color: white;

    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 40px;
}

.button-red2:hover{
    box-shadow: 0px 10px 10px rgb(219, 219, 219);
    color: white;
}






.bk{
    object-fit: contain;
    width: 100%;
    max-height: 300px;
}

.play{
    object-fit: cover;
    width: 140px;
    height: 100%;
    border-radius: 7px;
}


.read-card{
    object-fit: cover;
    border-radius: 5px;
    width: 100%;
}

.arrow{
    
    width: 20px;
    height: 20px;
}

.fluid-grad{
    background: #c31432;
background: -webkit-linear-gradient(to right, #240b36, #c31432);
background: linear-gradient(to right, #240b36, #c31432);
}



.devo{
    background-image: url(/assets/img/develop.webp);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    min-height: 400px;
}

@media screen and (max-width:600px){
    .devo{
        background-image: url(/assets/img/dev-vert.webp);
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        
        min-height: 1200px;
    }
}


.dev_card{
    object-fit: cover;
    width: 100%;
    height: 200px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}


ul.timeline {
    list-style-type: none;
    position: relative;
  }
  ul.timeline:before {
    content: ' ';
    background: #d4d9df;
    display: inline-block;
    position: absolute;
    left: 29px;
    width: 2px;
    height: 100%;
    z-index: 400;
  }
  ul.timeline > li {
    margin: 20px 0;
    padding-left: 20px;
  }
  ul.timeline > li:before {
    content: ' ';
    background: white;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 3px solid var(--prim-color);
    left: 20px;
    width: 20px;
    height: 20px;
    z-index: 400;
  }
  
  .txt:hover{
      color: var(--prim-color)!important;
  }

  .disabled{
    filter: grayscale(100%);
  }