* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}
.wrapper{
    margin:0 auto;
    max-width: 3440px;
    background-color: #E5F2F2;
}
#myBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 28px;
    border: none;
    outline: none;
    background-color: #112750;
    color: #FFF;
    cursor: pointer;
    padding: 15px;
    border-radius: 4px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

  }
  
  #myBtn:hover {
    background-color: #FCC025;
    color: #112750;  
}

#banner {
    position: fixed;
    bottom: 15px;
    left: 10px;
    z-index: 500;
}

#banner img{
    width: 45%;
    mix-blend-mode: color-burn;
}
#banner img:hover{
        filter: drop-shadow(0px 0px 3px #FCC025);

}

.nav{
    position: fixed;
    display: flex;
    width: 100%;
    margin: auto;
    height: 4em;
    align-items: center;
    z-index: 1;
    background-color: #1326462f;
}
.scrolling-active{
    background-color: #132646e3;
    filter: none;

}
.logo{
    flex: 1;
}
.logo img{
    padding-left: 3em;
    color: white;
    width: 100px;
}
.navigation{
    flex: 1;
    margin: auto;
    padding: auto 0;
}
.navigation .navLink{
    text-decoration: none;
    list-style-type: none;
    color: white;
    letter-spacing: 0.5px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0 1em;

}
.navigation ul li::after{
    content: '';
    width: 0;
    height: 3px;
    background: #FCC025;
    display: block;
    margin: auto;
    transition: 0.2s;
    margin-top: 1px;
}
.navigation ul{
    margin: 0;
}
.navigation ul li:hover::after {
    width: 4em;
}
.navigation .navLink:hover{
    color: #fcbf2577;
}
.navigation ul{
    list-style-type: none;
    display: flex;
}
.navLinks{
    margin: 0 auto;
    float: right;
    margin: 0 2em;

}
nav .fa{
    display: none;
    flex: 1;
}






/* Hero-sekcija */

.hero-section{
    height: 100vh;
    padding-top: 250px;
    background: linear-gradient(0deg, #0b1528b3, #0c1629b3), url(images/thisisengineering-raeng-0l2PPgrHXX4-unsplash.jpeg);
    background-size: cover;
    background-position: center center;

}
.hero-section .hero-container{
    max-width: 1800px;
}
.hero-section .hero-content{
    padding-left: 50px;
}
.hero-content .hero-container{
    width: 50%;
    text-align: center;
}
.hero-section .hero-content h1{
    color: #fff;
    font-family: 'Bebas Neue', cursive;
    font-size: 80px;
    letter-spacing: 2px;
}
.line{
    width: 70%;
    height: 3px;
    color: #FCC025;
    border: solid;
    margin: 0 auto;

}
.hero-section .hero-content h2{
    padding-top: 40px;
    color: #fff;
    font-family: 'Source Sans Pro', sans-serif;    
    font-style: italic;
    font-size: 30px;
}


/* O nama-sekcija */

.about-us-section{
    height: auto;
    margin: 30px 0;
}
.about-us-section h2{
    text-align: center;
    font-family: 'Bebas Neue', cursive;
    font-size: 50px;
    color: #112750;
}
.about-us-section .line{
    width: 600px;
    height: 3px;
    color: #FCC025;
    margin: 0 auto;
    border: solid;
}
.about-us-section .ims{
    margin: 0 auto;
    margin-top: 80px;
    display: flex;
    column-gap: 10px;
    max-width: 80%;
}
.about-us-section .ims .idea{
    flex: 1;
    text-align: center;
    font-family: 'Source Sans Pro', sans-serif;    
    background-color: #FCC025;
    border-radius: 40px;
    height: 430px;
    -webkit-box-shadow: -45px 45px 0px -12px rgba(217,217,217,1);
    -moz-box-shadow: -45px 45px 0px -12px rgba(217,217,217,1);
    box-shadow: -45px 45px 0px -12px rgba(217,217,217,1);
    transition: 0.2s ease-out;
}
.about-us-section .ims .idea:hover{
    transform: translateY(-12px);
}
.about-us-section .ims .idea h3{
    text-align: center;
    font-family: 'Bebas Neue', cursive;
    font-size: 40px;
    padding-top: 20px;
    letter-spacing: 2px;

}
.about-us-section .ims .idea p{
    padding-top: 30px;
    width: 80%;
    margin: 0 auto;
    letter-spacing: 0.2px;
}
.about-us-section .ims .mission{
    flex: 1;
    margin: 0 50px;
    text-align: center;
    font-family: 'Source Sans Pro', sans-serif;    
    background-color: #FCC025;
    border-radius: 40px;
    height: 430px;
    -webkit-box-shadow: -45px 45px 0px -12px rgba(217,217,217,1);
    -moz-box-shadow: -45px 45px 0px -12px rgba(217,217,217,1);
    box-shadow: -45px 45px 0px -12px rgba(217,217,217,1);
    transition: 0.2s ease-out;

}
.about-us-section .ims .mission:hover{
    transform: translateY(-12px);
}
.about-us-section .ims .mission h3{
    text-align: center;
    font-family: 'Bebas Neue', cursive;
    font-size: 40px;
    padding-top: 20px;
    letter-spacing: 2px;

}
.about-us-section .ims .mission p{
    padding-top: 30px;
    width: 80%;
    margin: 0 auto;
    letter-spacing: 0.2px;

}
.about-us-section .ims .chance{
    flex: 1;
    text-align: center;
    font-family: 'Source Sans Pro', sans-serif;    
    background-color: #FCC025;
    border-radius: 40px;
    height: 430px;
    -webkit-box-shadow: -45px 45px 0px -12px rgba(217,217,217,1);
    -moz-box-shadow: -45px 45px 0px -12px rgba(217,217,217,1);
    box-shadow: -45px 45px 0px -12px rgba(217,217,217,1);
    transition: 0.2s ease-out;

}
.about-us-section .ims .chance:hover{
    transform: translateY(-12px);
}
.about-us-section .ims .chance h3{
    text-align: center;
    font-family: 'Bebas Neue', cursive;
    font-size: 40px;
    padding-top: 20px;
    letter-spacing: 2px;
}
.about-us-section .ims .chance p{
    padding-top: 30px;
    width: 80%;
    margin: 0 auto;
    letter-spacing: 0.2px;

}

.us{
    margin-top: 15vh;
    background-image: url(images/struja\ 1.png);
    background-size: cover;
    background-position: center center;
}
.us .us-image{
    max-width: 75vh;    
    margin: 0 auto;
    padding-top: 10px;
}
.us .us-image img{
    width: 100%;
}


/* Clanovi-sekcija */

.members-section{
    height: auto;
}
.members-section .line{
    margin-bottom: 20px;
}
.line-left{
    margin-left: 0;
}
.line-right{
    margin-right: 0;
}
.lblue{
    color: #112750;
}
.become-a-member{
    max-height: 25vh;
    max-width: 75%;
    margin: 20px auto;
    text-align: center;
}
.become-a-member h3{
    font-family: 'Bebas Neue', cursive;
    color: #112750;
    font-size: 45px;
    text-align: center;
    margin-bottom: 20px;
}
.become-a-member h3 span{
    color: #FCC025;
}
.sign-in{
    background-color: #FF0000;
    color: #fff;
    text-decoration: none;
    font-family: 'Bebas Neue', cursive;
    font-size: 30px;
    padding: 5px 30px;
    border-radius: 20px;
    letter-spacing: 1px;
    transition: 0.2s ease-in;
}
.sign-in:hover{
    border: 2px solid #ff0000;
    background-color: #ff0000da;
    color: #fff;
}


/* Mi u brojevima-sekcija */

.numbers{
    height: auto;
    width: 100%;
    margin: 0 auto;
    background-color: #d9d9d956;
    text-align: center;
}
.achievements{
    display: flex;
    width: 80%;
    margin: 0 auto;
    align-items: center;
    column-gap: 10px;
    padding: 10vh 0;
}
.achievement{
    flex: 1;
    height: 100px;
    transition: 0.5s;
}

.achievement h4{
    font-size: 50px;
    color: #FCC025;
    font-family: 'Bebas Neue', cursive;
    padding-bottom: 1vh;
}
.achievement h3{
    font-size: 30px;
    font-family: 'Bebas Neue', cursive;
    color: #112750;
}


/* Projekti-sekcija */

.projects-section{
    margin-top: 20px;
    height: auto;
}
.projects-section h2{
    text-align: center;
    font-family: 'Bebas Neue', cursive;
    font-size: 50px;
    color: #112750;
}
.projects{
    width: 50%;
    margin: 50px auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

.project-1{
    background-image: url(images/Screenshot\ 2022-10-20\ at\ 15.57\ 1.png);
    background-size: cover;
    background-position: center;
    height: 40vh;
    position: relative;
}
.project-1 .vector-background{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    background-image: url(images/Vector.png);
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 40%;
}
.project-1 h3{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Bebas Neue', cursive;
    font-size: 30px;
    color: #FCC025;
    letter-spacing: 1px;
    z-index: 20;
}
.project-2{
    background-image: url(images/Screenshot\ 2022-10-20\ at\ 15.57\ 2.png);
    background-size: cover;
    background-position: center;
    position: relative;
    height: 40vh;
}
.project-2 .vector-background{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    background-image: url(images/Vector2.png);
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 40%;
}
.project-2 h3{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Bebas Neue', cursive;
    font-size: 30px;
    color: #FCC025;
    letter-spacing: 1px;
}
.project-3{
    background-image: url(images/Screenshot\ 2022-10-20\ at\ 15.57\ 3.png);
    background-size: cover;
    background-position: center;
    position: relative;
    height: 40vh;
}
.project-3 .vector-background{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    background-image: url(images/Vector.png);
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 40%;
}
.project-3 h3{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Bebas Neue', cursive;
    font-size: 30px;
    color: #FCC025;
    letter-spacing: 1px;
}
.project-4{
    background-image: url(images/Screenshot\ 2022-10-20\ at\ 15.57\ 4.png);
    background-size: cover;
    background-position: center;
    position: relative;
    height: 40vh;
}
.project-4 .vector-background{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    background-image: url(images/Vector2.png);
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 40%;
}
.project-4 h3{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Bebas Neue', cursive;
    font-size: 30px;
    color: #FCC025;
    letter-spacing: 1px;
}
.projects h3 span{
    color: #112750;
}


/* Rec profesora-sekcija */

.professors-section{
    margin-top: 20px;
    height: auto;
    padding-top: 30px;
}
.professors-section h2{
    text-align: center;
    font-family: 'Bebas Neue', cursive;
    font-size: 50px;
    color: #112750;
}

.professors-section .professors{
    width: 80%;
    margin: 50px auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 20px;
}
.professor-1{
    position: relative;
    height: 40vh;
    margin-bottom: 5vh;

}
.professors-word{
    background-color: #D9D9D9;
    max-width: 600px;
    min-height: 280px;
    text-align: center;
}
.professors-word p{
    font-family: 'Times New Roman', Times, serif;
    padding-top: 30px;
    font-size: 15px;
    width: 80%;
    height: 200px;
    margin: 0 auto;
}
.professors-word h3{
    font-family: 'Bebas Neue', cursive;
    letter-spacing: 0.3px;
    font-size: 25px;
    padding-top: 20px;

}
.professor-1 img{
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translate(-10%, 40%);
}
.professor-2{
    position: relative;
    height: 40vh;
    margin-bottom: 5vh;
}
.professor-2 img{
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translate(10%, 40%);
}


/* Nasi partneri-sekcija */

.partners-section{
    margin-top: 20px;
    height: auto;
    padding-top: 30px;
    padding-bottom: 20px;
}
.partners-section h2{
    text-align: center;
    font-family: 'Bebas Neue', cursive;
    font-size: 50px;
    color: #112750;
}


h2{
    text-align:center;
    padding: 20px;
  }
  /* Slider */
  

  .partners-container{
      width: 80%;
      margin: 50px auto;
      background-color: #fff;
      overflow: hidden;
      
  }
  .slick-slide {
      margin: 0px 20px;
  }
  
  .slick-slide img {
      width: 100%;
  }
  
  .slick-slider
  {
      position: relative;
      display: block;
      box-sizing: border-box;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
              user-select: none;
      -webkit-touch-callout: none;
      -khtml-user-select: none;
      -ms-touch-action: pan-y;
          touch-action: pan-y;
      -webkit-tap-highlight-color: transparent;
  }
  
  .slick-list
  {
      position: relative;
      display: block;
      overflow: hidden;
      margin: 0;
      padding: 0;
  }
  .slick-list:focus
  {
      outline: none;
  }
  .slick-list.dragging
  {
      cursor: pointer;
      cursor: hand;
  }
  
  .slick-slider .slick-track,
  .slick-slider .slick-list
  {
      -webkit-transform: translate3d(0, 0, 0);
         -moz-transform: translate3d(0, 0, 0);
          -ms-transform: translate3d(0, 0, 0);
           -o-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
  }
  
  .slick-track
  {
      position: relative;
      top: 0;
      left: 0;
      display: block;
  }
  .slick-track:before,
  .slick-track:after
  {
      display: table;
      content: '';
  }
  .slick-track:after
  {
      clear: both;
  }
  .slick-loading .slick-track
  {
      visibility: hidden;
  }
  
  .slick-slide
  {
      display: none;
      float: left;
      height: 100%;
      min-height: 1px;
  }
  [dir='rtl'] .slick-slide
  {
      float: right;
  }
  .slick-slide img
  {
      display: block;
      width: 50%;
      margin: 0 auto;
  }
  .slick-slide.slick-loading img
  {
      display: none;
  }
  .slick-slide.dragging img
  {
      pointer-events: none;
  }
  .slick-initialized .slick-slide
  {
      display: block;
  }
  .slick-loading .slick-slide
  {
      visibility: hidden;
  }
  .slick-vertical .slick-slide
  {
      display: block;
      height: auto;
      border: 1px solid transparent;
  }
  .slick-arrow.slick-hidden {
      display: none;
  }




/* Stranica novosti */

.nh-l{
    min-height: 100vh;
}

.news-heading{
    padding-top: 70px;
}
.news-heading h2{
    text-align: center;
    font-family: 'Bebas Neue', cursive;
    font-size: 50px;
    margin-bottom: -10px;
    color: #112750;

  }
  .news-line {
    width: 300px;
    height: 3px;
    color: #FCC025;
    border: solid;
    margin: 0 auto;
}

.latest{
    margin: 0 auto;
    padding-top: 100px;
    width: 80%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 20px;
    margin-bottom: 20px;
    justify-content: center;
    justify-items: center;
}
.news-card{
    width: 350px;
    background-color: #fff;
    text-align: center;
    font-family: Bebas Neue;
    border: 1px solid rgb(0, 0, 0, 0.2);
    box-shadow:  5px 5px 26px #c7c7c7,
             -5px -5px 26px #ffffff;
    padding: 10px;
    color: #112750;
}

.news-card .cta{
    float: right;
}

.news-card .cta .read_more{
    border: none;
    color: #F9c439;
    background-color: #fff;
    margin-left: 10px;
}
.news-card .cta .read_more:hover{
    border: none;
    text-decoration: none;
    color: #112750;
    background-color: none;
    margin-left: 10px;
}
.news-card p{
    float: right;
}
.news-card h2{
    text-align: left;
}

.news-card img{
    padding-top: 10px;
    width: 300px;
}



.wrapper-news{
    margin:0 auto;
    max-width: 3440px;
    min-height: 100vh;
    background-color: #E5F2F2;
    background: linear-gradient(0deg, rgba(206, 206, 206, 0.3), rgba(206, 206, 206, 0.3)), url(images/wowpatterns-export-pattern.png);
    background-size: cover;
}

.footer-news{
    background-color: rgba(35,31,31,1);
    text-align: center;
    margin: 0 auto;
    position: absolute;
    bottom: 0;
    width: 100%;


}

.footer-news .footer-text h1{
    color: #fff;
    font-family: 'Bebas Neue', cursive;
    letter-spacing: 2px;
    font-weight: 100;
    opacity: 50%;
    font-size: 15px;
    text-align: center;
    padding: 30px 0;
    margin: 0;

}


@media (max-width: 1330px){
    .latest{
        margin: 0 auto;
        padding-top: 100px;
        width: 80%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 2px;
        row-gap: 20px;
        margin-bottom: 20px;
        justify-content: center;
        justify-items: center;
    }
    .news-card img{
        padding-top: 10px;
        width: 300px;
    }


}
@media (max-width: 1070px){
    .latest{
        margin: 0 auto;
        padding-top: 100px;
        width: 80%;
        display: grid;
        grid-template-columns: repeat(2, 0.5fr);
        column-gap: 10px;
        row-gap: 20px;
        margin-bottom: 20px;
        justify-content: center;
        justify-items: center;
    }
    .news-card img{
        padding-top: 10px;
        width: 300px;
    }


}

@media (max-width: 750px){
    .latest{
        margin: 0 auto;
        padding-top: 100px;
        width: 80%;
        display: grid;
        grid-template-columns: repeat(1, 0.5fr);
        column-gap: 10px;
        row-gap: 20px;
        margin-bottom: 20px;
        justify-content: center;
        justify-items: center;
    }
    .news-card img{
        padding-top: 10px;
        width: 300px;
    }


}




/* Novosti-read-more */
.news-one{
    min-height: 120vh;
}
.heading .back-btn{
    padding-left: 20px;
    width: fit-content;
}
.heading .back-btn img{
    transition: 0.5s;
}
.heading .back-btn img:hover{
    border-bottom: solid 2px #F9C439;
}
.news-one .heading{
    height: 40vh;
    padding-top: 70px;

}
.news-one .heading h1{
    text-align: center;
    font-family: 'Bebas Neue', cursive;
    font-size: 60px;
    color: #fff;
    letter-spacing: 1px;
    padding: 0 30px;

}

.news-details{
    padding-top: 20px;
    background-color: #fff;
    width: 90%;
    margin: 0 auto;
    margin-top: -20px;
    margin-bottom: 50px;
    border-radius: 10px;
    border: 1px solid rgb(0, 0, 0, 0.2);
    box-shadow:  5px 5px 26px #c7c7c7,
             -5px -5px 26px #000;

}

.desc-images{
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 0.2fr);
    column-gap: 5px;  
    justify-content: center;
    justify-items: center;
    overflow: hidden;
}

.news-details .description{
    padding: 40px;
    font-family: Source Sans Pro;
    width: 80%;
    margin: 0 auto;
    font-size: 1.2em;
}



.news-date{
    float: right;
    color: #787E7E;
    padding-top: 10px;
}

.footer-section-rm .footer-news{
    position: relative;
}



@media (max-width: 900px){
    .news-one .heading h1{
    text-align: center;
    font-family: 'Bebas Neue', cursive;
    padding-bottom: 5px;
    font-size: 30px;
    color: #fff;
    letter-spacing: 1px;
    padding: 0 30px;

    }
    .desc-images img{
        width: 200px;
        height: 150px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(3, 0.2fr);
        column-gap: 5px;  
        justify-content: center;
        justify-items: center;
        overflow: hidden;
    }
    .news-details .description{
        padding: 20px;
        font-family: Source Sans Pro;
        width: 100%;
        margin: 0 auto;
        font-size: 1em;
        word-wrap: break-word;
    }

}

@media (max-width: 600px){
    .desc-images{
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(1, 0.2fr);
    row-gap: 5px;  
    justify-content: center;
    justify-items: center;
    overflow: hidden;
    }
    .desc-images img{
        width: 70vw;
        height: 200px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(3, 0.2fr);
        column-gap: 5px;  
        justify-content: center;
        justify-items: center;
        overflow: hidden;
    }

}




  /***** Stranica-projekata ******/








.projects-main {
    padding-top: 0;
}

.wrapper-projekti {
  margin: 0 auto;
  max-width: 3440px;
  min-height: 100vh;
  background-color: #e5f2f2;
  background: linear-gradient(
      0deg,
      rgba(206, 206, 206, 0.3),
      rgba(206, 206, 206, 0.3)
    ),
    url(images/project-pattern2.png);
  background-size: cover;
}

.projects-heading {
  width: 70%;
  margin: 0 auto;
}
.projects-heading h2 {
  text-align: center;
  font-family: "Bebas Neue", cursive;
  font-size: 50px;
  margin-bottom: 10px;
  color: #112750;
}

.project-cards {
  width: 80%;
  margin: 20px auto;
  display: grid;
  grid-template-columns: repeat(2, 0fr);
  justify-content: center;
  align-content: center;
  column-width: 100%;
  grid-gap: 0;
}

.card {
  position: relative;
  width: 350px;
  height: 250px;
  background-color: #000;
  overflow: hidden;
}
.add-mesh {
  width: 700px;
}
.card__image {
  height: 100%;
  width: 100%;
  object-fit: cover;
  scale: 1.1;
  transition: opacity 0.25s, scale 0.35s;
}
.card:hover .card__image {
  opacity: 0.5;
  scale: 1;
}
.card__body {
  position: absolute;
  inset: 0;
  padding: 50px;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 15px;
  justify-content: center;
}
.card__body::before {
  content: "";
  position: absolute;
  inset: 20px;
  border: 2px solid #f9c439;
  opacity: 0;
  scale: 1.25;
  transition: opacity 0.25s, scale 0.25s;
}
.card:hover .card__body::before {
  opacity: 1;
  scale: 1;
}
.card__title {
  letter-spacing: 2px;
  font-size: 35px;
  text-transform: uppercase;
  font-family: "Bebas Neue", cursive;
  font-style: italic;
  text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
}
.add-pr {
  margin-top: 0;
}
.card__description {
  font-size: 14px;
  opacity: 0;
  translate: -25px;
  transition: opacity 0.25s, translate 0.25s;
  color: rgba(255, 255, 255, 0.8);
}
.pr-cta {
  width: 100px;
  margin: 0 auto;
}
.card__description p {
  padding-bottom: 5px;
  max-width: 300px;
  margin: 0 auto;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.card__description a {
  margin: 0 auto;
  font-size: 18px;
  font-style: italic;
  font-weight: 800;
  color: #f9c439;
  font-family: Source Sans Pro;
  transition: 0.2s ease-in;
}
.card__description a::after {
  content: "";
  width: 0;
  height: 3px;
  background: #fcc025;
  display: block;
  margin: auto;
  transition: 0.2s;
  margin-top: 1px;
}
.card__description a:hover::after {
  width: 80%;
}
.admin-cta {
  display: flex;
  border-top: 1px solid #f9c439;
  margin-top: 5px;
  font-size: 15px;
}
.admin-cta .cta-edit {
  font-size: 15px;
}

.del-btn {
  font-style: italic;
  font-weight: 800;
  color: #f9c439;
  font-family: Source Sans Pro;
  background: none;
  border: none;
  margin-left: 25px;
}
.del-btn:hover {
  color: #112750;
}
.del-btn::after {
  content: "";
  width: 0;
  height: 3px;
  background: #fcc025;
  display: block;
  margin: auto;
  transition: 0.2s;
  margin-top: 1px;
}
.del-btn:hover::after {
  width: 80%;
}
.card__description a:hover {
  text-decoration: none;
  color: #112750;
}
.card:hover .card__description {
  opacity: 1;
  translate: 0;
}



/* ==================================== */

.error-message {
  font-family: Source Sans Pro;
  font-style: italic;
  color: #a94442;
  letter-spacing: 1px;
}

.remove-image-field {
  background-color: #e5e5e5;
  border: none;
  padding: 4px 8px;
  color: #112750;
  margin-left: 20px;
}
.remove-image-field:hover {
  color: #e5e5e5;
  background-color: #f9c439;
}

#add-image-field {
  background-color: #e5e5e5;
  border: none;
  padding: 10px 20px;
  color: #112750;
  margin-left: 20px;
  margin-top: 10px;
  display: inline;
}
#add-image-field:hover {
  color: #e5e5e5;
  background-color: #f9c439;
}
.image-inputs {
  display: block;
}
.image-field.filed {
  display: grid;
  border-top: 2px dotted #112750;
}
.image-field.filed img {
  grid-column: 1 / span 2;
}

.image-field {
  display: block;
  margin-top: 10px;
  border-top: 2px dotted #112750;
  padding-top: 10px;
}
.image-field.empty-field {
  display: flex;
  border-top: 2px dotted #112750;
  padding-top: 10px;
  margin-left: 10%;
}

.p-photo {
  flex: 1;
  width: 50%;
  margin: 0 auto;
}

#image-fields {
  display: block;
  text-align: center;
}
.inline-inputs {
  display: flex;
  margin-left: 10%;
}
.image-input {
  width: 100%;
}

.project-wrapper {
  background-color: #fff;
}

/* Slider */
.wrapper-project {
  margin: 0 auto;
  max-width: 3440px;
  min-height: 100vh;
  background-color: #e5f2f2;
  background: linear-gradient(
      0deg,
      rgba(206, 206, 206, 0.3),
      rgba(206, 206, 206, 0.3)
    ),
    url(../images/project-pattern2.png);
  background-size: cover;
}
.nav.nav-pr {
  position: fixed;
}
.logo.pr h1 {
  color: #fff;
}
.nh-l {
  min-height: 100vh;
}
.heading-pr {
  font-family: "Bebas Neue", cursive;
  padding-top: 10vh;
  padding-left: 40px;
  letter-spacing: 1px;
  font-size: 50px;
  color: #112750;
  background-repeat: no-repeat;
}
.heading-pr .back-btn {
  padding-left: 20px;
  width: fit-content;
}
.heading-pr .back-btn img {
  transition: 0.25s;
}
.heading-pr .back-btn img:hover {
  border-bottom: solid 2px #f9c439;
}

.news-heading {
  padding-top: 70px;
}
.wrapper-project .heading-pr h1 {
  text-align: center;
  font-family: "Bebas Neue", cursive;
  font-size: 50px;
  margin-bottom: -5px;
  color: #fff;
}
.news-line {
  width: 300px;
  height: 3px;
  color: #fcc025;
  border: solid;
  margin: 0 auto;
}
.naslov {
  padding-bottom: 2vh;
}
.project-description {
  font-family: "Times New Roman", Times, serif;
  font-size: 1.5rem;
  margin: 0 auto;
  margin-top: 3em;
  font-weight: 900;
}
.short-desc {
  font-size: 1.7em;
  text-align: center;
  padding-bottom: 10px;
  margin: 0 auto;
}
.full-desc {
  width: 85%;
  margin: 0 auto;
  margin-top: 20px;
  min-height: 30vh;
  background: rgb(255, 255, 255);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1.5px);
  box-shadow: 5px 5px 26px #707070, -5px -5px 26px #c7c7c7;
  border-radius: 30px;
}
.desc-pr {
  border-top: 1px solid rgba(125, 125, 125, 0.3);
  width: 90%;
  margin: 0 auto;
  padding: 10px;
  padding-top: 20px;
  font-family: Source Sans Pro;
  font-weight: normal;
  font-size: 1.1em;
  word-wrap: break-word;
}
.slider-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%; /* Adjust the width as needed */
  margin: 0 auto;
}

.customer-logos.slider {
  width: 100%;
  height: 100%;
}

.slick-list {
  height: 100%;
}

.slick-slide {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

.slick-slide img {
  max-width: 80%;
  max-height: 100%;
  object-fit: contain;
}

/* Rest of your CSS code */

.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0 auto;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
}

.slick-track:before,
.slick-track:after {
  display: table;
  content: "";
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}

[dir="rtl"] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

.splide {
  width: 90%;
  text-align: center;
  margin: 0 auto;
  height: auto;
}
.splide__track {
  width: 100%;
}
.splide__slide {
  width: 100%;
  padding: 0 10px;
}
.splide__slide img {
  height: 50vh;
}

/* Custom arrow styles */
.splide .splide__arrows .splide__arrow {
  background: none !important;
  padding: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.splide__arrow--next {
  right: 0em !important;
}
.splide__arrow--prev {
  left: 0em !important;
}


@media (max-width: 750px) {
  /* ============= Project cards ============= */
  .project-cards {
    width: 90vw;
    margin: 20px auto;
    display: block;
  }
  .card {
    width: 90vw;
  }

  /*============= Detailed project =============*/
  .slick-slide {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .slick-slide img {
    padding: 0 10px;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  /* Dots below slider */
  /* Remove the default numbers */
  .slick-dots li button {
    font-size: 0;
    line-height: 0;
    background-color: transparent;
    border: none;
    cursor: pointer;
  }

  /* Add custom styling for the dots */
  .slick-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
  }

  /* Styling for individual dots */
  .slick-dots li {
    margin: 0 5px;
    list-style: none;
  }

  /* Styling for dot indicators */
  .slick-dots li button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #1127508e;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  /* Styling for active dot */
  .slick-dots li.slick-active button {
    background-color: #f9c439; /* Change this to your desired color */
  }
}












  
  .projects-heading{
      width: 70%;
      margin: 0 auto;
  }
  .projects-heading h2{
    text-align: center;
    font-family: 'Bebas Neue', cursive;
    font-size: 50px;
    margin-bottom: -10px;
    color: #112750;

  }
  .projects-main .project{
      max-width: 80%;
      margin: 20px auto;
      background-color: #fff;
      border-radius: 100px;
      padding-bottom: 20px;
  }
  .project-tumbnail{
      display: flex;
      width: 80%;
      margin: 0 auto;
      padding: 20px 0;
  }
  .project-tumbnail .project-image{
      flex: 1;
      width: 50%;
      margin: 0 auto;
  }
  .project-tumbnail .blue{
    text-align: right;
  }
  .project-image img{
      width: 80%;
      height: 100%;
      margin: 0 auto;
  }
  .project-name{
      flex: 1;
      height: auto;
      width: 80%;
      padding-top: 10vh;
  }
  .project-tumbnail h2{
      text-align: center;
      font-family: 'Bebas Neue', cursive;
      font-size: 50px;
      color: #112750;
      background-color: #FCC025;
      margin: 0;
      padding: 10px 50px;
      border-radius: 40px;
  }
  .project-tumbnail .blue h2{
    text-align: center;
    font-family: 'Bebas Neue', cursive;
    font-size: 50px;
    color: #fff;
    background-color: #112750;
    margin: 0;
    padding: 10px 50px;
    border-radius: 40px;
}
  .project p{
    font-family: 'Source Sans Pro', sans-serif;    
    width: 80%;
    text-align: center;
    font-size: 15px;
    margin: 0 auto;
    color: #112750;
    background-color: #FCC025;
    border-radius: 40px;
    padding: 40px 90px;

  }
  .project span{
    text-decoration: underline;
    font-style: italic;
}
  .project .blue-text{
    font-family: 'Source Sans Pro', sans-serif;    
    width: 80%;
    text-align: center;
    font-size: 15px;
    margin: 0 auto;
    color: #fff;
    background-color: #112750;
    border-radius: 40px;
    padding: 40px 90px;

  }

#igrica .game{
    width: 100%;
    margin: 10px auto;
    text-align: center;
}

  

  /***** Stranica-zaposlenih ******/


.employees-main{
    padding-top: 10vh;
    padding-bottom: 10vh;
}
.employees-heading{
    width: 70%;
    margin: 0 auto;
}
.employees-heading h2{
  text-align: center;
  font-family: 'Bebas Neue', cursive;
  font-size: 50px;
  margin-bottom: -10px;
  color: #112750;

}
.employees{
    max-width: 90%;
    margin: 50px auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 40px;
}
.employee img{
    max-width: 80%;
}
.employee{
    width: 100%;
    margin: 0 auto;
    text-align: center;
    background-color: #fff;
    border-radius: 70px;
    transition: 0.5s ease;
}
.employee:hover{
    transform: translateY(-12px);
}
.employee-description{
    width: 100%;
    margin: 0 auto;
    font-family: 'Source Sans Pro', sans-serif;    
    padding: 10px 10px;
}
.employee-description h3{
    font-size: 30px;
    font-weight: 600;
}
.employee-description h4{
    font-size: 20px;
    font-weight: 500;
    color: #112750;
}
.employee-description p{
    font-size: 15px;
    font-weight: 500;
    max-width: 250px;
    margin: 0 auto;
    padding-top: 15px;
    color: #112750;
    min-height: 120px;
}
.employee .social-media{
    padding-bottom: 20px;
}
.employee .social-media a{
    padding: 0 3px;
}
.employee .social-media a:hover{
    filter: drop-shadow(0px 0px 3px #4444DD);
}


/***** Kontakt stranica ******/
.contact-main{
    padding-top: 20vh;
    min-height: 100vh;
    background-image: url(images/Group\ 58.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}

.contact{
    width: 90%;
    margin: 0 auto;
    text-align: center;
    padding-bottom: 5vh;
}
.contact-content{
    display: flex;
    width: 100%;
    margin: 0 auto;
}
.contact-info{
    flex: 1;
}

.con-information{
    max-width: 600px;
    font-family: 'Times New Roman', Times, serif;
    color: #112750;
    margin: 0 auto;
    display: grid;
    place-items: center;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 10px;
}



/*-------cartica za mejl------*/
.contact-mail{
    width: 300px;
    height: 180px;
    overflow: hidden;
    border-radius: 42px;
    background: linear-gradient(145deg, #f5ffff, #cedada);
    box-shadow:  19px 19px 22px #a0a9a9,
             -19px -19px 22px #ffffff;
    
}
.contact-mail img{
    width: 70px;
    padding: 50px 0;
    transition: 0.5s ease;


}
.contact-mail .detail{
    text-align: center;
    font-size: 18px;
    margin: 0 auto 10px;
    padding-bottom: 30px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s;
}

.contact-mail:hover .detail{
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
    padding-top: 10px;
    padding-bottom: 30px;
}
.contact-mail:hover img{
    width: 50px;
    padding: 30px 0 0;
}



/*-------cartica za broj telefona------*/
.contact-phone{
    width: 180px;
    height: 180px;
    overflow: hidden;
    border-radius: 42px;
    background: linear-gradient(145deg, #f5ffff, #cedada);
    box-shadow:  19px 19px 22px #a0a9a9,
             -19px -19px 22px #ffffff;
    
}
.contact-phone img{
    width: 70px;
    padding: 50px 0;
    transition: 0.5s ease;

}
.contact-phone .detail{
    text-align: center;
    font-size: 20px;
    margin: 0 0 10px;
    padding-bottom: 30px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s;

}
.contact-phone:hover img{
    width: 50px;
    padding: 30px 0 0;

}
.contact-phone:hover .detail{
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
    padding-top: 10px;
    padding-bottom: 30px;
}


/*-------cartica za adresu------*/
.contact-address{
    width: 180px;
    height: 180px;
    overflow: hidden;
    border-radius: 42px;
    background: linear-gradient(145deg, #f5ffff, #cedada);
    box-shadow:  19px 19px 22px #a0a9a9,
             -19px -19px 22px #ffffff;
    
}
.contact-address img{
    width: 70px;
    padding: 50px 0;
    transition: 0.5s ease;
}
.contact-address .detail{
    text-align: center;
    font-size: 20px;
    margin: 0 0 10px;
    padding-bottom: 30px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s;

}

.contact-address:hover img{
    width: 50px;
    padding: 30px 0 0;
}
.contact-address:hover .detail{
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
    padding-top: 10px;
    padding-bottom: 30px;
}


/*-------cartica sa ikonicama za drustvenu mrezu------*/
.contact-social{
    border-radius: 42px;
    background: linear-gradient(145deg, #f5ffff, #cedada);
    box-shadow:  19px 19px 22px #a0a9a9,
             -19px -19px 22px #ffffff;
    max-width: 300px;
    margin: 0 auto;
             
}
.contact-social h2{
    font-weight: bold;
    font-style: italic;
    font-size: 15px;
    padding-bottom: 2px;
}



.detail{
    font-style: italic;
}
.con-information .social-media{
    padding-bottom: 20px;
    overflow: hidden;
}
.social-media a img{
    width: 15%;
    padding-bottom: 8px;
}
.social-media a{
    padding: 0 4px;
}
.social-media a:hover{
    filter: drop-shadow(0px 0px 3px #4444DD);
}
.map{
    margin-top: 30px;
    filter: grayscale(30%);
}



.quote{
    flex: 1;
    z-index: 10;
    
    
}

.quote img{
    max-height: 300px;
}
.quote h3{
    font-family: 'Times New Roman', Times, serif;
    font-weight: 600;
    font-size: 20px;
    text-align: left;
    max-width: 400px;
    margin: 0 auto;
    letter-spacing: 1px;
}
.quote h2{
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;
    font-size: 25px;
    text-align: right;
    max-width: 400px;
    margin: 0 auto;
}



/* FOOTER */
.footer{
    background-color: rgba(35,31,31,1);
    text-align: center;
    margin: 0 auto;
    margin-bottom: 0;

}
.footer .social{
    display: inline;
    text-align: center;
}
.footer .social img{
    display: inline-block;
    margin: auto;
    opacity: 80%;
    padding-top: 1%;
}

.footer .footer-text h1{
    color: #fff;
    font-family: 'Bebas Neue', cursive;
    letter-spacing: 2px;
    font-weight: 100;
    opacity: 50%;
    font-size: 15px;
    text-align: center;
    padding: 30px 0;
    margin: 0;

}





@media (max-width: 1360px){
    .about-us-section .ims .idea p {
        padding-top: 30px;
        width: 80%;
        margin: 0 auto;
        letter-spacing: 0.2px;
        font-size: 12px;
    }
    .about-us-section .ims .mission p {
        padding-top: 30px;
        width: 80%;
        margin: 0 auto;
        letter-spacing: 0.2px;
        font-size: 12px;
    }
    .about-us-section .ims .chance p {
        padding-top: 30px;
        width: 80%;
        margin: 0 auto;
        letter-spacing: 0.2px;
        font-size: 12px;
    }

    .professors-word h3 {
        font-family: 'Bebas Neue', cursive;
        letter-spacing: 0.3px;
        font-size: 25px;
        padding-top: 0;
        margin: 0;
    }
    .professors-word p {
        font-family: 'Times New Roman', Times, serif;
        padding-top: 30px;
        font-size: 12px;
        width: 80%;
        height: 200px;
        margin: 0 auto;
    }
}
@media (max-width: 1040px){
    .navigation ul{
        margin-right: auto;
        display: block;

    }
    .navLinks{
        position: absolute;
        background: #132646;
        height: 100vh;
        width: 200px;
        top: 0px;
        right: -200px;
        overflow-x: hidden;
        text-align: left;
        z-index: 2;
        transition: 1s; 
        margin: auto;
    }
    .navLink{
        margin: auto;
    }
    .navigation .navLink{
        margin: auto;
    }
    .navLinks ul li{
        text-align: center;
        padding: 20px;
    }
    .navLink::after {
        content: '';
        width: 0%;
        height: 2px;
        background: rgba(51, 51, 51);
        display: block;
        margin: auto;
        transition: 0.2s;
        margin-top: 2px;
        filter: none;
    }
    .navLink{
        font-size: 15px;
    }
    nav .fa{
        display: block;
        color: #fff;
        margin: 5px;
        font-size: 22px;
        cursor: pointer;
    }
    nav .fa-bars{
        float: right;
        margin-right: 10%;
    }
    
    .about-us-section .ims .idea h3 {
        text-align: center;
        font-family: 'Bebas Neue', cursive;
        font-size: 30px;
        padding-top: 20px;
        letter-spacing: 2px;
    }
    .about-us-section .ims .mission h3 {
        text-align: center;
        font-family: 'Bebas Neue', cursive;
        font-size: 30px;
        padding-top: 20px;
        letter-spacing: 2px;
    }
    .about-us-section .ims .chance h3 {
        text-align: center;
        font-family: 'Bebas Neue', cursive;
        font-size: 30px;
        padding-top: 20px;
        letter-spacing: 2px;
    }
    .about-us-section .ims .idea p {
        padding-top: 30px;
        width: 80%;
        margin: 0 auto;
        letter-spacing: 0.2px;
        font-size: 10px;
    }
    .about-us-section .ims .mission p {
        padding-top: 30px;
        width: 80%;
        margin: 0 auto;
        letter-spacing: 0.2px;
        font-size: 10px;
    }
    .about-us-section .ims .chance p {
        padding-top: 30px;
        width: 80%;
        margin: 0 auto;
        letter-spacing: 0.2px;
        font-size: 10px;
    }
    .us .us-image img {
        max-width: 70%;
        margin: 0 auto;
    }
    .us .us-image {
        text-align: center;
    }

    .professors-word h3 {
        font-family: 'Bebas Neue', cursive;
        letter-spacing: 0.3px;
        font-size: 20px;
        padding-top: 0;
        margin: 0;
    }
    .professors-word p {
        font-family: 'Times New Roman', Times, serif;
        padding-top: 30px;
        font-size: 11px;
        width: 80%;
        height: 200px;
        margin: 0 auto;
    }
    




    .employee img{
        max-width: 70%;
    }
    .employee{
        max-width: 100%;
        margin: 0 auto;
        text-align: center;
        background-color: #fff;
        border-radius: 70px;
        transition: 0.5s ease;
    }
    .employee-description h3{
        font-size: 20px;
        font-weight: 600;
    }
    .employee-description h4{
        font-size: 15px;
        font-weight: 500;
        color: #112750;
    }
    .employee-description p{
        font-size: 12px;
        font-weight: 500;
        max-width: 250px;
        margin: 0 auto;
        padding-top: 15px;
        color: #112750;
    }
}
@media (max-width: 900px){
    .hero-section .hero-content {
        padding-left: 0;
    }
    .hero-content .hero-container {
        width: 100%;
        text-align: center;
    }
    .hero-section .hero-content h1 {
        color: #fff;
        font-family: 'Bebas Neue', cursive;
        font-size: 60px;
        letter-spacing: 2px;
    }
    .hero-section .hero-content h2 {
        padding-top: 40px;
        color: #fff;
        font-family: 'Source Sans Pro', sans-serif;
        font-style: italic;
        font-size: 20px;
    }
    .about-us-section .line {
        max-width: 600px;
        height: 3px;
        color: #FCC025;
        margin: 0 auto;
        border: solid;
    }
    .about-us-section .ims{
        display: block;
    }
    .about-us-section .ims .mission {
        margin: 50px 0;
    }
    .about-us-section .ims .idea{
        height: auto;
    }
    .about-us-section .ims .idea h3 {
        text-align: center;
        font-family: 'Bebas Neue', cursive;
        font-size: 40px;
        padding-top: 20px;
        letter-spacing: 2px;
    }
    .about-us-section .ims .mission h3 {
        text-align: center;
        font-family: 'Bebas Neue', cursive;
        font-size: 40px;
        padding-top: 20px;
        letter-spacing: 2px;
    }
    .about-us-section .ims .chance h3 {
        text-align: center;
        font-family: 'Bebas Neue', cursive;
        font-size: 40px;
        padding-top: 20px;
        letter-spacing: 2px;
    }
    .about-us-section .ims .idea p {
        padding-top: 30px;
        width: 80%;
        margin: 0 auto;
        letter-spacing: 0.2px;
        font-size: 15px;
        padding-bottom: 15px;
    }
    .about-us-section .ims .mission p {
        padding-top: 30px;
        width: 80%;
        margin: 0 auto;
        letter-spacing: 0.2px;
        font-size: 15px;
    }
    .about-us-section .ims .chance p {
        padding-top: 30px;
        width: 80%;
        margin: 0 auto;
        letter-spacing: 0.2px;
        font-size: 15px;
    }

    .achievements{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-column-gap: 20px;
        grid-row-gap: 40px;
        width: 80%;
        margin: 0 auto;
        align-items: center;
        column-gap: 10px;
        padding: 15vh 0;
    }

    .become-a-member {
        max-height: 50%;
        max-width: 75%;
        margin: 20px auto;
        text-align: center;
    }

    .projects{
        width: 80%;
        margin: 50px auto;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(1, 1fr);
        grid-column-gap: 0px;
        grid-row-gap: 0px;
    }




    .professors-section .professors{
        width: 90%;
        margin: 50px auto;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(1, 1fr);
        grid-column-gap: 10px;
        grid-row-gap: 20px;
    }
    .professor-1 img {
        position: absolute;
        left: 50;
        bottom: 0;
        
    }
    .professor-2 img {
        position: absolute;
        left: 0;
        bottom: 0;
        transform: translate(-50%, 40%);
    }
    .professors-word h3 {
        font-family: 'Bebas Neue', cursive;
        letter-spacing: 0.3px;
        font-size: 25px;
        padding-top: 0;
        margin: 10px;
    }
    .professors-word p {
        font-family: 'Times New Roman', Times, serif;
        padding-top: 30px;
        font-size: 14px;
        width: 80%;
        height: 200px;
        margin: 0 auto;
    }
    .slick-slide img{
        width: 80%;
    }

    .project-tumbnail h2{
        text-align: center;
        font-family: 'Bebas Neue', cursive;
        font-size: 40px;
        color: #112750;
        background-color: #FCC025;
        margin: 0;
        padding: 10px 50px;
        border-radius: 40px;
    }
    .project-tumbnail .blue h2{
        text-align: center;
        font-family: 'Bebas Neue', cursive;
        font-size: 40px;
        color: #fff;
        background-color: #112750;
        margin: 0;
        padding: 10px 50px;
        border-radius: 40px;
    }
    .project-name.blue{
        padding-bottom: 2vh;
    }
    .project p{
        font-family: 'Source Sans Pro', sans-serif;    
        width: 80%;
        text-align: center;
        font-size: 12px;
        margin: 0 auto;
        color: #112750;
        background-color: #FCC025;
        border-radius: 40px;
        padding: 40px 90px;
    
      }
      .project .blue-text{
        font-family: 'Source Sans Pro', sans-serif;    
        width: 80%;
        text-align: center;
        font-size: 12px;
        margin: 0 auto;
        color: #fff;
        background-color: #112750;
        border-radius: 40px;
        padding: 40px 20px;
    
      }
    .employees{
        max-width: 70vw;
        margin: 50px auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-column-gap: 20px;
        grid-row-gap: 40px;
    }
    .employee{
        max-width: 100%;
        margin: 0 auto;
        text-align: center;
        background-color: #fff;
        border-radius: 70px;
        transition: 0.5s ease;
        overflow: hidden;
    }
    .contact-content{
        display: block;
    }
    .quote{
        padding: 100px 0 0;
    }
    .quote h3{
        font-size: 15px;
    }
    .quote h2{
        font-size: 20px;
    }
}
@media (max-width: 700px){
    .about-us-section .line {
        max-width: 300px;
        height: 3px;
        color: #FCC025;
        margin: 0 auto;
        border: solid;
    }
    .professors-word {
        background-color: #D9D9D9;
        max-width: 600px;
        min-height: 250px;
        text-align: center;
    }
    .professors-word h3 {
        font-family: 'Bebas Neue', cursive;
        letter-spacing: 0.3px;
        font-size: 20px;
        padding-top: 0;
        margin: 25px;
    }
    .professors-word p {
        font-family: 'Times New Roman', Times, serif;
        padding-top: 30px;
        font-size: 12px;
        width: 80%;
        height: 150px;
        margin: 0 auto;
    }
    .professor-1 img {
        position: absolute;
        left: 0;
        bottom: 20%;
        transform: translate(-10%, 40%);

    }
    .professor-2 img {
        position: absolute;
        left: 0;
        bottom: 0;
        transform: translate(-10%, -10%);
    }


    .project-tumbnail{
        display: block;
        width: 80%;
        margin: 0 auto;
        padding: 20px 0;
    }
    .project-tumbnail .project-image{
        flex: 1;
        width: 80%;
        margin: 0 auto;
        text-align: center;
    }
    .project-name{
        flex: 1;
        height: auto;
        width: 100%;
        padding-top: 2vh;
    }
    
    .project p {
        font-family: 'Source Sans Pro', sans-serif;
        width: 80%;
        text-align: center;
        font-size: 12px;
        margin: 0 auto;
        color: #112750;
        background-color: #FCC025;
        border-radius: 40px;
        padding: 40px 20px;
    }
    .project .blue-text{
        font-family: 'Source Sans Pro', sans-serif;    
        width: 80%;
        text-align: center;
        font-size: 12px;
        margin: 0 auto;
        color: #fff;
        background-color: #112750;
        border-radius: 40px;
        padding: 40px 20px;
    
      }
      .con-information{
        max-width: 600px;
        font-family: 'Times New Roman', Times, serif;
        color: #112750;
        margin: 0 auto;
        display: grid;
        place-items: center;
        grid-template-columns: repeat(1, 1fr);
        grid-row-gap: 20px;
    }



    .contact-mail{
        width: 300px;
        height: 180px;
        overflow: hidden;
        border-radius: 42px;
        background: linear-gradient(145deg, #f5ffff, #cedada);
        box-shadow:  19px 19px 22px #a0a9a9,
                 -19px -19px 22px #ffffff;
        
    }
    .contact-phone{
        width: 300px;
    }
    .contact-address{
        width: 300px;
    }
    .map iframe{
        max-width: 350px;
    }
}
@media (max-width: 610px){




    .professors-word h3 {
        font-family: 'Bebas Neue', cursive;
        letter-spacing: 0.3px;
        font-size: 18px;
        padding-top: 0;
        margin: 25px;
    }
    .professors-word p {
        font-family: 'Times New Roman', Times, serif;
        padding-top: 30px;
        font-size: 10px;
        width: 80%;
        height: 130px;
        margin: 0 auto;
    }

    .employees{
        max-width: 70vw;
        margin: 50px auto;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-column-gap: 20px;
        grid-row-gap: 40px;
    }
    .employee-description h3{
        font-size: 25px;
        font-weight: 600;
    }
    .employee-description h4{
        font-size: 20px;
        font-weight: 500;
        color: #112750;
    }
    .employee-description p{
        font-size: 18px;
        font-weight: 500;
        max-width: 250px;
        margin: 0 auto;
        padding-top: 15px;
        color: #112750;
    }
}
@media (min-width: 320px) and (max-width: 480px){

    .professors-word p {
        font-family: 'Times New Roman', Times, serif;
        padding-top: 30px;
        font-size: 8px;
        width: 80%;
        height: 130px;
        margin: 0 auto;
    }
    .projects-main .project {
        max-width: 80%;
        margin: 20px auto;
        background-color: #fff;
        border-radius: 50px;
        padding-bottom: 20px;
    }
    .project p {
        font-family: 'Source Sans Pro', sans-serif;
        width: 80%;
        text-align: center;
        font-size: 10px;
        margin: 0 auto;
        color: #112750;
        background-color: #FCC025;
        border-radius: 40px;
        padding: 40px 20px;
    }
    .project .blue-text{
        font-family: 'Source Sans Pro', sans-serif;    
        width: 80%;
        text-align: center;
        font-size: 10px;
        margin: 0 auto;
        color: #fff;
        background-color: #112750;
        border-radius: 40px;
        padding: 40px 20px;
    
      }
      .project-tumbnail h2{
        text-align: center;
        font-family: 'Bebas Neue', cursive;
        font-size: 30px;
        color: #112750;
        background-color: #FCC025;
        margin: 0;
        padding: 10px 50px;
        border-radius: 40px;
    }
    .project-tumbnail .blue h2{
        text-align: center;
        font-family: 'Bebas Neue', cursive;
        font-size: 30px;
        color: #fff;
        background-color: #112750;
        margin: 0;
        padding: 10px 50px;
        border-radius: 40px;
    }


    .employees{
        max-width: 70vw;
        margin: 50px auto;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-column-gap: 20px;
        grid-row-gap: 40px;
    }
    .employee-description h3{
        font-size: 20px;
        font-weight: 600;
    }
    .employee-description h4{
        font-size: 15px;
        font-weight: 500;
        color: #112750;
    }
    .employee-description p{
        font-size: 12px;
        font-weight: 500;
        max-width: 250px;
        margin: 0 auto;
        padding-top: 15px;
        color: #112750;
    }



    input[type=submit] {
        background-color: #112750;
        color: white;
        width: 30%;
        padding: 12px 20px;
        border: none;
        border-radius: 60px;
        cursor: pointer;
        font-size: 15px;
        letter-spacing: 1px;
        font-family: 'Times New Roman', Times, serif;
        margin-top: 30px;
    }
    .quote img {
        max-height: 200px;
    }

}
@media (max-width: 320px){
    .professors-word p {
        font-family: 'Times New Roman', Times, serif;
        padding-top: 30px;
        font-size: 8px;
        width: 80%;
        height: 130px;
        margin: 0 auto;
    }
    .project p {
        font-family: 'Source Sans Pro', sans-serif;
        width: 80%;
        text-align: center;
        font-size: 7px;
        margin: 0 auto;
        color: #112750;
        background-color: #FCC025;
        border-radius: 40px;
        padding: 40px 20px;
    }
    .project .blue-text{
        font-family: 'Source Sans Pro', sans-serif;    
        width: 80%;
        text-align: center;
        font-size: 7px;
        margin: 0 auto;
        color: #fff;
        background-color: #112750;
        border-radius: 40px;
        padding: 40px 20px;
    
      }
      .project-tumbnail h2{
        text-align: center;
        font-family: 'Bebas Neue', cursive;
        font-size: 20px;
        color: #112750;
        background-color: #FCC025;
        margin: 0;
        padding: 10px 50px;
        border-radius: 40px;
    }
    .project-tumbnail .blue h2{
        text-align: center;
        font-family: 'Bebas Neue', cursive;
        font-size: 20px;
        color: #fff;
        background-color: #112750;
        margin: 0;
        padding: 10px 50px;
        border-radius: 40px;
    }
    .projects-main .project {
        max-width: 80%;
        margin: 20px auto;
        background-color: #fff;
        border-radius: 20px;
        padding-bottom: 20px;
    }


    .employees{
        max-width: 70vw;
        margin: 50px auto;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-column-gap: 20px;
        grid-row-gap: 40px;
    }
    .employee {
        max-width: 100%;
        margin: 0 auto;
        text-align: center;
        background-color: #fff;
        border-radius: 40px;
        transition: 0.5s ease;
        overflow: hidden;
    }
    .employee-description h3{
        font-size: 15px;
        font-weight: 600;
    }
    .employee-description h4{
        font-size: 10px;
        font-weight: 500;
        color: #112750;
    }
    .employee-description p{
        font-size: 8px;
        font-weight: 500;
        max-width: 250px;
        margin: 0 auto;
        padding-top: 15px;
        color: #112750;
    }




    input[type=submit] {
        background-color: #112750;
        color: white;
        width: 40%;
        padding: 12px 20px;
        border: none;
        border-radius: 60px;
        cursor: pointer;
        font-size: 15px;
        letter-spacing: 1px;
        font-family: 'Times New Roman', Times, serif;
        margin-top: 30px;
    }
    .quote img {
        max-height: 200px;
    }
}