/*white navbar styling*/
*{
  font-family: 'Plus Jakarta Display', sans-serif;
}
body{
  overflow-x: hidden;
}
.navButton {
  border-radius: 30px;
  border: 1px;
  color: #fff;
  background-color: #f02f30;
  padding: 10px 30px 10px 30px;
}
a.nav-link {
  color: #000;
  text-decoration: none;
}
a.nav-link:hover {
  color: #000;
}
nav ul li {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.lastList {
  margin-left: 50px;
}
.navbarItems {
  margin-left: 5rem;
  gap: 15px;
}

.mission {
  font-size: 40px;
  font-weight: 800;
}
.missionVision {
  display: flex;
  gap: 45px;
  margin-bottom: 50px;
}
.missionDiv {
  text-align: center;
}
.missionImgs {
  width: 100%;
}
.missionIcons {
  gap: 10px;
}
.text-start {
  width: 100%;
}

.aboutImages {
  display: flex;
  gap: 10px;
}
.aboutImg {
  width: 25%;
}

.storyTitle,
.valuesTitle {
  color: #f02f30;
  font-size: 20px;
}
.storyText,
.valuesText {
  font-size: 40px;
  font-weight: 700;
}
.storyText2 {
  font-size: 20px;
}
.storyImage {
  width: 100%;
}

/*footer*/
footer {
  background-color: #000;
  color: white;
  padding-bottom: 20px;
}
.footer {
  text-align: center;
  margin-left: 25%;
  margin-right: 25%;
}
.footerTitle {
  font-size: 36px;
  font-weight: 800px;
}
.footerText {
  font-size: 14px;
  font-weight: 400;
}
.footerBtn {
  border: 1px;
  border-radius: 30px;
  color: #fff;
  background-color: #f02f30;
  padding: 15px 40px 15px 40px;
}
.footerContact {
  font-size: 20px;
  font-weight: 600;
}
.footerContactTexts {
  font-size: 14px;
  font-weight: 400;
}
.footerLinks {
  text-decoration: none;
  color: white;
}
.socialIcons {
  display: flex;
  margin-left: 30px;
  gap: 20%;
  margin-top: 50px;
}
.contactDetails {
  display: flex;
  gap: 116px;
}
.copyright {
  margin-left: 50px;
}

@media screen and (max-width: 480px) {
  /*mission section*/

  .aboutContainer {
    padding: 1rem;
    align-items: center;
  }

  .mission {
    font-size: 30px;
    text-align: center;
    font-weight: 700;
  }
  .aboutImages {
    display: flex;
  }

  /*Values Section*/
  .valuesTitle,
  .storyTitle {
    font-size: 10px;
    font-weight: 500;
  }
  .valuesText,
  .storyText {
    font-size: 18px;
    font-weight: 700;
  }
  .missionVision {
    flex-direction: column;
    width: 100%;
    gap: 20px;
  }
  .textCard {
    background-color: #fafafa;
  }
  /*Footer*/
  footer {
    padding: 1rem 1rem 1rem 1rem;
  }
  div.footer.col-6.mb-5 {
    width: 100%;
  }
  p.footerTitle {
    font-size: 24px;
    font-weight: 700;
    margin-top: 20px;
  }
  p.footerContactTexts {
    line-height: 4px;
  }
  .footerBtn {
    width: 100%;
  }
  .footer {
    margin: 0 auto;
  }
  div.row.mx-5.contactDetails {
    display: block;
  }
  div.col-4.footerDiv {
    width: 100%;
  }
  div.col-4.footerDiv.clientImages,
  div.row.mx-5.contactDetails,
  div.col-9.copyright,
  div.col-3.socials {
    width: 100%;
  }
  .socialIcons {
    flex-direction: column;
    margin-left: 15px;
  }
  .contactDetails {
    flex-direction: column;
    gap: 5px;
    padding: 0px;
  }
  .copyright {
    margin-left: 0px;
  }
}
/*works styling*/
.projectsTitle {
  font-size: 40px;
  font-weight: 800;
}

.projectsText {
  font-size: 16px;
  font-weight: 400;
}
.photographyBtn,
.videosBtn {
  border-radius: 30px;
  border: 1px;
  color: #000;
  background-color: #f1f1f1;
  padding: 10px 30px 10px 30px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.photographyBtn:hover,
.videosBtn:hover {
  background-color: #f02f30;
}
.babyPic {
  margin-top: -250px;
}
.hatPic {
  margin-top: -80px;
}
#videos {
  display: none;
}
.container.pictures {
  margin-inline: auto;
}
.projectsDiv {
  margin-right: 50%;
  margin-left: auto;
}
#pictures {
  display: flex;
}
/*Media Queries for works*/
@media screen and (max-width: 480px) {
  .hatPic {
    margin-top: 0px;
  }
  .babyPic {
    margin-top: 0px;
  }
  .projectsDiv {
    width: 100%;
  }
}

/*styling for rates*/
.ratesTitle {
  font-size: 40px;
  font-weight: 700;
}
.ratesText {
  font-size: 20px;
  font-weight: 400;
}
.rates {
  margin-bottom: 20%;
}
.rate {
  margin-top: 6%;
  margin-bottom: 6%;
}

/*Blog Styling*/
.blogHeader {
  margin-top: 10%;
  width: 50%;
  align-items: center;
  text-align: center;
  margin-left: 25%;
  margin-right: 25%;
}
.blogTitle {
  font-size: 40px;
  font-weight: 700;
}
.blogText {
  font-size: 20px;
  font-weight: 400;
}
.red-btn{
        border: 1px;
            border-radius: 30px;
            color: #fff;
            background-color: #f02f30;
            padding: 15px 40px 15px 40px;
}
.blogButtons {
  display: flex;
  gap: 10px;
}
.allBtn,
.newsBtn,
.resourcesBtn,
.articlesBtn {
  border: 1px;
  border-radius: 30px;
  color: #000;
  background-color: #f1f1f1;
  padding: 15px 40px 15px 40px;
  margin-top: 5%;
}
.allBtn:hover,
.newsBtn:hover,
.resourcesBtn:hover,
.articlesBtn:hover {
  background-color: #f02f30;
}
/*dark-bg*/
section.dark-bg {
  background-image: url("../images/darkbg.png");
  background-repeat: no-repeat;
  background-size: cover;
  padding: 100px;
  width: 100%;
  color: white;
}
.red-btn2 {
  border-radius: 30px;
  color: #fff;
  background-color: #f02f30;
  width: 150px;
  padding: 15px;
  border: #f02f30;
}
.bookPodcast{
    width: 50%;
}
.contents2{
          padding: 100px;
}

/*media queries for blog*/
@media screen and (max-width: 480px) {
  div.blogContents {
    margin-top: 10px;
  }
  .contents {
    gap: 30px;
  }
  .blogButtons {
    flex-direction: column;
    width: 40%;
  }
  .allBtn,
  .newsBtn,
  .resourcesBtn,
  .articlesBtn {
    border: 1px;
    border-radius: 10px;
    color: #000;
    background-color: #f1f1f1;
    padding: 15px 40px 15px 40px;
    margin-top: 5%;
  }
  .blogTitle {
    font-size: 24px;
    font-weight: 700;
  }

  .blogText {
    font-size: 14px;
    font-weight: 400;
  }
    section.dark-bg {
    background-image: url("../images/darkbg.png");
    background-repeat: no-repeat;
    background-size: cover;
    padding: 100px;
    width: 100%;
    color: white;
  }
  .bookPodcast{
    width: 100%;
    margin-left: -90px;
}
.contents2{
          padding: 0;
          margin-bottom: 50px;
}
  
}

/*blog2*/
.camImg{
    width: 100%;
}
/*Contact Information*/
.contactInformation{
    
    border-radius: 10px;
    margin-top: 5%;
    margin-bottom: 5%;
    display: flex;
    gap: 20px;
    
    
}
.container.contactHeader{
    margin-left: 6%;
    margin-right: 6%;

}
h1.contactHeading{
    font-size: 30px;
    font-weight: 700;
}
p.contactHeadingText{
    font-size: 14px;
    font-weight: 400;
}
.email,
.phone,
.address{
    background-color: #f1f1f1;
    margin: 10px 10px 10px 10px;
    padding: 10px;
    border-radius: 10px;
    width: 33.5%;
}
.submitBtn{
    border: 1px;
        border-radius: 30px;
        color: #fff;
        background-color: #f02f30;
        padding: 10px 30px 10px 30px;
}
div.contents2{
    margin-inline: auto;
}

@media screen and (max-width: 480px) {
  .lastList{
  margin-left: 0px;
}
 .blogButtons {
    flex-direction: column;
    width: 40%;
  }

    /*contact header*/
    .contactInformation{
        display: flex;
        flex-direction: column;
    }
    .contactHeader{
        width: 100%;
    }
    .email,
    .phone,
    .address{
        border-radius: 10px;
        margin-top: 5px;
        margin-bottom: 5px;
        width: 100%;
    
    }
    .container.contactHeader{
    margin-left: 0;
    margin-right: 0;

}
  }


@media (max-width: 768px){
    .lastList{
  margin-left: 0px;
}
.email,
.phone,
.address{
  display: block;
}
  footer {
    padding: 1rem 1rem 1rem 1rem;
  }
  div.footer.col-6.mb-5 {
    width: 100%;
  }
  p.footerTitle {
    font-size: 24px;
    font-weight: 700;
    margin-top: 20px;
  }
  p.footerContactTexts {
    line-height: 4px;
  }
  .footerBtn {
    width: 100%;
  }
  .footer {
    margin: 0 auto;
  }
  div.row.mx-5.contactDetails {
    display: block;
  }
  div.col-4.footerDiv {
    width: 100%;
  }
  div.col-4.footerDiv.clientImages,
  div.row.mx-5.contactDetails,
  div.col-9.copyright,
  div.col-3.socials {
    width: 100%;
  }
  .socialIcons {
    flex-direction: column;
    margin-left: 15px;
  }
  .contactDetails {
    display: block;
    gap: 5px;
    padding: 0px;
  }
  .copyright {
    margin-left: 0px;
  }


}