body{
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background: rgb(232, 232, 232);
}










/*************************
  THIS IS MY NAVBAR STUFF.
**************************/
  .navbar{
      /*centers the stuff*/
      position: fixed;
      top: 20px;
      width: 80%;
      left: 50%;
      transform: translateX(-50%);
      /*end of center*/

      background:#ffffff;
      color:rgb(0, 0, 0);
      border-radius:50px;
      padding: 10px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      /*makes it on top of everyhting else*/
      z-index: 100;
      border: 1px solid #dadada;

    /*united ri on the left of navbar*/
    .navtitle{
      font-size:22px;
      font-weight:bold;
      text-decoration: none;
      color: black;
    }

    /*perhaps change color of hover? boring*/
    .navtitle:hover{
      font-size:22px;
      font-weight:bold;
      text-decoration: none;
      color: #8d8d8d;
    }

    .logo{
      width: 25px;
      height: 20px;
    }

    /*my cute hamburger*/
    .hamburger{
      font-size:30px;
      cursor:pointer;
      user-select:none;
    }

  
    .hamburger:hover{
      font-size:30px;
      cursor:pointer;
      user-select:none;
      color: #8d8d8d;
    }

    /*dropdown for my page links*/
    .dropdown{
      position:absolute;
      top:70px;
      right:20px;
      background :#ffffff;
      border-radius:20px;
      width :200px;
      display :none;
      flex-direction :column;
      overflow:hidden;
      border: 1px solid #dadada;
    }


    /*the dropdown itself*/
    .dropdown a{
      color:rgb(0, 0, 0);
      padding:12px 18px;
      text-decoration:none;
      transition:0.2s;
    }

    /*the color of the menu item when the user hovers over it*/
    /*potentially change from gray to match cutesy site theme color*/
    .dropdown a:hover{
      background:#dadada;
    }



    .dropdown.show{
      display:flex;
    }

    @media(max-width:700px){
      .navbar{
          width:95%;
      }
    }
  }
/*************************
  END END END of navbar
**************************/













/*****************************
  START of banner stuff
**************************/

/*if ur reading this sorry this is not the most efficient!! but it works*/
.home-banner{
    position: relative;
    /*vh is percent of screen, can pot. change */
    height:80vh;
    width: 100%;
    background-image: url("pics/providence-skyline.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bristol-banner{
  position: relative;
  height:80vh;
  width: 100%;
  background-image: url("pics/bristol.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kent-banner{
  position: relative;
  height:80vh;
  width : 100%;
  background-image: url("pics/warwick.jpg");
  background-size : cover;
  background-position: center;
  background-attachment: fixed;
  display : flex;
  align-items: center;
  justify-content: center;
}

.newport-banner{
    position : relative;
    height:80vh;
    width: 100%;
    background-image : url("pics/newport.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display : flex;
    align-items: center;
    justify-content: center;
}

.providence-banner{
  position: relative;
  height:80vh;
   width: 100%;
  background-image : url("pics/providence-river.jpg");
  background-size : cover;
  background-position: center;
  background-attachment: fixed;
   display :  flex;
  align-items: center;
  justify-content: center;
}

.washington-banner{
  position : relative;
  height:80vh;
  width: 100%;
  
  background-image:url("pics/narragansett.jpg");
  background-size:cover;
  background-position: center;
  background-attachment: fixed;
  display : flex;
  align-items:center;
  justify-content: center;
}



.reference-banner{
  position : relative;
  height:80vh ;
  width: 100%;
  background-image: url("pics/handheart.jpg");
  background-size:cover;
   background-position : center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content:center;
}
  .banner-overlay{
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    display: flex;
    justify-content: center;
    align-items: center;
  }



  .banner-stuff{
    color :white;
    font-size:20px;
    margin: 20px;
    padding-top:80px;
    z-index:11;
  }
/*************************
  END of banner stuff
**************************/











/**********************
  START of gen page stuff
***********************/

.page-content{
  padding: 50px;
}

.page-content h1{
  text-align : center;
}

.page-content-navytheme{
  background-color: rgb(52, 68, 122);
  color : white;
  margin: 0;
  padding : 50px;
}

/*the seocnd half of my index pg*/
  .page-content-navytheme h1{
    background-color : rgb(52, 68, 122);
    color: white;
    margin: 0;
    padding: 20px;
    text-align: center;
  }

  .page-content-navytheme h2{
    background-color : rgb(52, 68, 122);
    color : rgb(191, 210, 235);
    margin:0;
    padding:20px;
     text-align : center;
  }

  .page-content-navytheme img{
     width: 100%;
     max-width: 500px;
    border-radius: 20px;
    display: block;
    margin: auto;
  }

/******************
END of page content
******************/










/*****
 BUTTONS for counties
 *****/
.county-buttons{
  display: flex;
  justify-content: center;
  gap: 20px;
   max-width: 600px;
  margin: 30px auto;
  padding: 0 20px;
}

.county-button{
   font-family: 'Poppins', sans-serif;
   font-size: 18px;
   flex :1;
   text-align:center;
  padding: 12px 20px;
  background-color:#ffffff;
  color: rgb(52, 68, 122);
  text-decoration: none;
  border-radius :16px;
  flex : 1 1 10;
  /*bday month*/
  min-width:126px;
  max-width:200px;
  transition: background-color 0.2s;
}

.county-button:hover{
  background-color:rgb(191, 210, 235);
}


@media(max-width:800px){
  .county-buttons{
      flex-direction:  column;
      align-items: center;
  }
  .county-button{
      width: 100%;
      flex: 1 1 10;
  min-width: 126px;
  max-width: 300px;

  }

}
/*** 
end of buttons for counties
***/








/*************************
  my carousel
**************************/
.carousel{
    position: relative;
    width : 80%;
    max-width: 800px;
    height : 600px;
    margin:50px auto;
    overflow: hidden;
    border-radius: 10px;
}

.carousel-pics{
  display : flex;
  transition : transform 0.2s ease-in-out;
  height : 100%;
}

/*controls the whoel sldie, including captions and stuff*/
.slide{
  min-width: 100%;
  display: none;

  position: relative;
  height: 100%;
}

.slide.active{
  display:block;
}

.slide img{
  width: 100%;
  border-radius: 10px;
  height : 100%;

  object-fit: cover;
}

.caption{
    position: absolute;
    bottom: 0;
    left :0;
    width : 100%;
    background: rgba(0,0,0,0.5);
    color: white;
    padding: 10px;

    text-align: center;
    font-size:15px;

    z-index: 5;

    box-sizing: border-box;
}
/* end to slide controls*/

/*button controls*/
.carouselbutton {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
   border : none;
  color: white;
  font-size: 2rem;
  padding: 10px 20px;
  cursor: pointer;
  z-index: 10;
  border-radius: 50%;
}

.carouselbutton.left{
  left: 10px
}

.carouselbutton.right{
  right: 10px
}
/*************************
  END carousel
**************************/










/********************************
  START services
**************************/

/*mi filter buttons*/
.filter-buttons{
  text-align:center;
  margin : 30px 0;
}

.filterbutton{
  padding: 8px 20px;
  margin: 0 5px;
  border : none;
  background: #f0f0f0;
  color: black;
  cursor: pointer;

  border-radius: 20px;
}

.filterbutton.active{
  background : rgb(166, 166, 166);

  color: rgb(255, 255, 255);
  cursor: pointer;
  border-radius: 20px;
}

/*the grid istelf*/
.services-grid{
  display:  grid;
  grid-template-columns : repeat(3, 1fr);
  gap : 20px;
  max-width : 999px;
  margin:0 auto;
  padding : 20px;
}

.service-card{
  background: white;
  border-radius: 10px;
  overflow: hidden;

  color : black;
  box-shadow : 0 2px 5px rgba(0,0,0,0.1);

  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.service-card pic{

  width: 100%;
  height: 144px;
  object-fit: cover;


}


.card-content{
  padding: 14px;
  flex-grow:1;

}

.card-content h3{
  margin: 0 0 5px 0;
  font-size: 18px;
  color: black;

}

.card-content p{

  margin: 0;
  font-size: 14px;
  color: black;
}



/*for phones :PPPPPP*/
@media(max-width: 777px){

  .services-grid{
    grid-template-columns: 1fr;
  }

}

/*************************
  END services
**************************/












/****** FOOTER *****/
.footer{

  background-color:#dadada;
  color: black;
  padding: 30px 20px;
  text-align: center;
  padding-bottom: 70px;

}
/****** END OF MY FOOTER *****/