.carousel-item h1 {

    text-align: start;

    font-size: 48px;

    color: #fff;

    font-family: "Baskervville", serif;

    position: absolute;

    bottom: 36%;

    margin: 1px 10%;

    width: 100%;

}

#projects{

    width: 100%;

    float: left;

    font-family: "Baskervville", serif;

    position: relative;

    background: url(../images/bg.png) #fffbef no-repeat right top;

    background-size: 305px auto;

    background-repeat: no-repeat;

}



.new_projects{

    background: #fff;

    position: absolute;

    bottom: 0;

    width: 100%;

    z-index: 0;

    height: 300px;



}



  

  .projects-title {

    font-family: "Baskervville", serif;

    color: #600028;

  }

  

  .project-card {

    transition: transform 0.3s ease;

  }

  

  .project-card:hover {

    transform: translateY(-5px);

  }

  

  .project-name {

    font-family: "Baskervville", serif;

    color: #600028 !important;

    text-align: start;

    font-size: 28px;

  }

  

  .project-location {

    font-size: 14px;

    color: #600028 !important;

    text-align: start;

  }



  

  .project-image {

    object-fit: cover;

  }

  

  .card{

    z-index: 99;

  }



  @media only screen and (min-width: 301px) and (max-width: 400px) {

    .logo {

        width: 70%;

        object-fit: contain;

        margin-left: 14px;

    }

    .navbar-toggler {

        margin-right: 14px;

    }



    .project-name {

               font-size: 17px;

    }

    .project-location {

        font-size: 12px;

    }

    .new_projects {

        background: unset !important;

        position: absolute;

        bottom: 0;

        width: 100%;

        z-index: 0;

        height: 300px;

    }  

    

    .carousel-item h1 {

      text-align: start;

      font-size: 21px;

      color: #fff;

      font-family: "Baskervville", serif;

      position: absolute;

      bottom: 46%;

      margin: 0;

      width: 100%;

      left: 25px;

  }



}



@media only screen and (min-width: 0px) and (max-width: 1000px) {

  

  

    .divider{

        display: none !important;

    }



    .project-name {

        font-size: 17px;

}

.project-location {

 font-size: 12px;

}

.card-body{

    background-color: #fffbef !important;

    }

}



@media only screen and (min-width: 1001px) and (max-width: 1100px) {



    .project-name {

        font-size: 21px;

}

.project-location {

 font-size: 14px;

}



}

@media only screen and (min-width: 401px) and (max-width: 500px) {

  

  .logo {

    width: 70%;

    object-fit: contain;

    margin-left: 14px;

}

.navbar-toggler {

    margin-right: 14px;

}

.carousel-item h1 {

  text-align: start;

  font-size: 21px;

  color: #fff;

  font-family: "Baskervville", serif;

  position: absolute;

  bottom: 46%;

  margin: 0;

  width: 100%;

  left: 25px;

}

}



@media only screen and (min-width: 501px) and (max-width: 600px) {

  .logo {

    width: 70%;

    object-fit: contain;

    margin-left: 14px;

}

.navbar-toggler {

    margin-right: 14px;

}

.carousel-item h1 {

  text-align: start;

  font-size: 21px;

  color: #fff;

  font-family: "Baskervville", serif;

  position: absolute;

  bottom: 46%;

  margin: 0;

  width: 100%;

  left: 25px;

}

}



@media only screen and (min-width: 601px) and (max-width: 700px) {

  .logo {

    width: 70%;

    object-fit: contain;

    margin-left: 14px;

}

.navbar-toggler {

    margin-right: 14px;

}

}







@media only screen and (min-width: 701px) and (max-width: 800px) {

  .logo {

    width: 70%;

    object-fit: contain;

    margin-left: 14px;

}

.navbar-toggler {

    margin-right: 14px;

}

}





@media only screen and (min-width: 801px) and (max-width: 900px) {

  .logo {

    width: 70%;

    object-fit: contain;

    margin-left: 14px;

}

.navbar-toggler {

    margin-right: 14px;

}

}





@media only screen and (min-width: 901px) and (max-width: 1000px) {

  .logo {

    width: 70%;

    object-fit: contain;

    margin-left: 14px;

}

.navbar-toggler {

    margin-right: 14px;

}

}



@media only screen and (min-width: 1401px) and (max-width: 1500px) {



  .carousel-item h1 {

    text-align: start;

    font-size: 32px;

  }

}



@media only screen and (min-width: 1301px) and (max-width: 1400px) {



  .carousel-item h1 {

    text-align: start;

    font-size: 32px;

  }

}





@media only screen and (min-width: 1201px) and (max-width: 1300px) {



  .carousel-item h1 {

    text-align: start;

    font-size: 32px;

  }

}









@media only screen and (min-width: 1101px) and (max-width: 1200px) {



  .carousel-item h1 {

    text-align: start;

    font-size: 32px;

  }

}









@media only screen and (min-width: 1001px) and (max-width: 1100px) {



  .carousel-item h1 {

    text-align: start;

    font-size: 32px;

  }

  .logo {

    width: 70%;

    object-fit: contain;

    margin-left: 14px;

}

}