@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

:root {
  --brand-orange: #f46900;
  --brand-bg: #f9f8f4;
  --brand-bg-two: grey;
  --brand-bg-white: #fff;
  --brand-tx-col: #000;
}

* {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  /* font-family: minion-pro, serif; */
  box-sizing: border-box;
}
.col-black {
  color: var(--brand-tx-col);
  /* border: 3px solid red; */
}
.col-white {
  color: var(--brand-bg-white);
}


.hero-img {
  border-radius: 50%;
  background-size: cover;
  background-position: bottom; /* focus on the bottom of the image */
   background-image: url('images/salvin-hero.jpeg');
    width: 400px;
  height: 450px;
  /* max-width: 350px;
  max-height: 450px; */
  overflow: hidden;
}


/* brand color - #F46900 and #fff */
/* Stop losing time on endless edits */
/* Invest your time in perfecting your craft */
/* My bestseller, “Ayoola of Lagos” is live 👇 */
/* No spam. Just the highest quality ideas you’ll find on the web. */
html {
  scroll-behavior: smooth;
}

body {
  background: var(--brand-bg);
  color: var(--brand-tx-col);
  font-family: "Poppins", sans-serif;
}

#header {
  width: 100%;
  /* height: 100%; */
}

.container {
  padding: 10px 10%;
}

/*
 0. make responsive right now DONE
 1. change to white and brand orange DONE
 2. create the join my newsletter section page DONE
 3. change services and write something quirky DOJE
 4.  add a favicon of "S" with his brand color DONE  
 5. display his book as the first landing screen then  have it as a background then his about page DONE
 6. add animation for about section and tab DONE
 7. making the page look finer DONE
 8. Adjust footer colors and links DONE
 9. create a popup join my newsletter notification unnecessary
 10.social header needs to change to books and color white DONE

 11. Books section based on the design of his books
 12. About page  section based on him
 13. add privacy policy and copyright, edit the pages to look okay DONE
 14. threads icon isnt showing , decided to remove it 
 15. add a border for book section to look better and where text can show
 16. book page with books without bg showing the books on the left on desktop with a divider line really slim and on the right a small writeup from what the book says

 17.testimonial section about what people say about you, Salvin
 18.view more testimonails page showing that lady smiling  while holding your book as bg and saying what she thinks about you
 19. view more on google button straight to google reviews
 20. disappearing notification when Submit is clicked and hover Effect for buttons and submitted effect that disables touching button when it is being submitted
 21. View more works Salvin would have to do a meet with u 4 that
 22. footer icons needs to look perfect
 23. edit the the header style .tab-links to make them look nice
 24. contact page showing Salvin and his linkedin copy writeup on his banner to encourage people to contact him
 25. Signup to newsletter showing some of the newsletters he has written over the years
 26. left to right for about me , skills, experience and ed needs to be move naturally
 27. if i click outside the menu, close my navbar
 28. about section should have "What AI says about me"
 29. font smaller on mobile for newsletter Email input
 30. Call to action for The bestseller book. Grab your copy here  DONE

*/
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.landing {
  /* position: relative; */
  display: flex;
  align-items: center;
  /* z-index: 99999; */
  padding: 70px 0;

  margin-bottom: 20px 0;
  justify-content: space-evenly;
}

.br {
  border: 2px solid red;
}
.logo {
  width: 140px;
}

nav ul li {
  display: inline-block;
  list-style: none;
  margin: 10px 20px;
  position: relative;
}

nav ul li a {
  color: var(--brand-tx-col);
  text-decoration: none;
  font-size: 18px;
}

nav ul li a::after {
  content: "";
  width: 0;
  height: 3px;
  background-color: #f46900;
  position: absolute;
  left: 0;
  bottom: -6px;
  transition: 0.5s;
}

nav h2 a {
  text-decoration: none;
  color: inherit;
}

nav ul li a:hover::after {
  width: 100%;
}

nav .tab-links {
  margin-right: 0;
  font-weight: 600;
}

.header-text {
  font-size: 30px;
}
.header-text h1 {
  margin-top: 15px;
  font-size: 60px;
}

.header-text h1 span {
  color: #f46900;
}

/* -------------about  section-------------- */

#about {
  padding: 80px 0;

  background-color: var(--brand-bg-white);
}

.row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.about-col-1 {
  flex-basis: 35%;
}
.about-col-1 img {
  width: 100%;
  border-radius: 15px;
}

.about-col-2 {
  flex-basis: 60%;
}

.sub-title {
  font-weight: 600;
  font-size: 60px;
  color: var(--brand-tx-col);
}

.tab-titles {
  display: flex;
  margin: 20px 0 40px;
}

.tab-links {
  font-size: 18px;
  margin-right: 50px;
  cursor: pointer;
  font-weight: 500;
  position: relative;
}

.tab-links::after {
  content: "";
  height: 3px;
  width: 0;
  position: absolute;
  bottom: -8px;
  left: 0;
  transition: 0.5;
  background: #f46900;
}

.tab-links.active-link::after {
  width: 50%;
}
.tab-contents ul li {
  list-style: none;
  margin: 10px 0;
  font-size: 14px;
}

.tab-contents li span {
  color: var(--brand-orange);
}

.tab-contents {
  display: none;
  opacity: 0;
  transition: opacity 1.5s ease;
  display: none;
  position: absolute;
  width: 100%;
}

.tab-contents.active-tab {
  display: block;
  opacity: 1;
  position: relative;
}

/* --- book section ------- */

.book-img {
  width: 400px;
  height: 500px;
  margin: 10px auto;
  overflow: hidden;
}

.book-img img {
  width: 100%;
}
.book-bestseller {
  background-color: rgb(51, 50, 50);
  background-image: url("images/bestseller.jpeg"); /* replace with your actual path */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  color: var(--brand-bg-white);
  justify-content: center;
  flex-direction: column;
}

/* -----------services */

#services {
  padding: 30px 0;
}

.services-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-top: 50px;
  grid-gap: 40px;
}

.services-list div {
  background-color: var(--brand-bg-white);
  padding: 40px;
  /* border: 1px solid; */
  color: var(--brand-tx-col);
  font-size: 13px;
  font-weight: 300;
  box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
  /* box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; */
  transition: background 0.5s, transform 0.5s;
}

.services-list div ul{
   list-style-type: disc; /* or 'circle' */
  padding-left: 20px; /* adds space for the bullet */
}


.services-list div i {
  font-size: 50px;
  margin-bottom: 30px;
}

.services-list div h2 {
  font-size: 30px;
  font-weight: 500;
  margin-bottom: 15px;
}

.services-list div a {
  color: var(--brand-tx-col);
  text-decoration: none;
  display: inline-block;
  margin-top: 20px;
  font-size: 12px;
}

.services-list div:hover {
  background: var(--brand-tx-col);
  color: var(--brand-bg-white);
  transform: translateY(-10px);
}

/* //--------------previous work */

.work {
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.work img {
  width: 100%;
  border-radius: 10px;
  display: block;
  transition: transform 0.5s;
}

.work-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin-top: 50px;
  grid-gap: 40px;
}

.layer {
  width: 100%;
  /* height: 100%; */
  height: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.6), #f46900);
  border-radius: 10px;
  position: absolute;
  color: var(--brand-bg-white);
  left: 0;
  bottom: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 14px;
  text-align: center;
  padding: 0 40px;
  transition: height 0.5s;
}

.layer h3 {
  font-weight: 500;
  margin-bottom: 20px;
}

.layer a {
  margin-top: 20px;
  color: #f46900;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 18px;
  line-height: 60px;
  background: var(--brand-bg);
  height: 60px;
  width: 60px;
  border-radius: 50%;
  text-align: center;
}

.work:hover img {
  transform: scale(1.1);
}

.work:hover .layer {
  height: 100%;
}

.btn {
  display: block;
  margin: 50px auto;
  border: 1px solid #f46900;
  text-decoration: none;
  /* color:var(--brand-bg-white); */
  width: fit-content;
  padding: 14px 50px;
  border-radius: 6px;
}

.btn:hover {
  color: var(--brand-bg-white);
  background-color: var(--brand-orange);
}

/* ---------- contact  */

#contact {
  margin-top: 70px;
}
.contact-left {
  flex-basis: 35%;
}
.contact-left p {
  margin-top: 30px;
}

.contact-left p i {
  color: #f46900;
  margin-right: 15px;
  font-size: 25px;
}

.social-icons {
  margin-top: 30px;
}

.social-icons a {
  text-decoration: none;
  color: #000;
  font-size: 30px;
  margin-right: 15px;
  /* color: #ababab; */
  display: inline-block;
  transition: all 0.3s ease;
}

.social-icons a:hover {
  color: #f46900;
  transform: translateY(-5px);
}

.btn.btn2 {
  display: inline-block;
  background: #f46900;
}
.btn2:hover {
  background-color: var(--brand-tx-col);
  color: var(--brand-bg-white);
  border: 1px solid var(--brand-tx-col);
}
.contact-right {
  flex-basis: 60%;
}

.contact-right form {
  width: 100%;
}

form input,
form textarea {
  width: 100%;
  border: 1px solid black;
  outline: 0;
  margin: 15px 0;
  padding: 15px;
  color: var(--brand-tx-col);
  background-color: var(--brand-bg-white);
  font-size: 18px;
  border-radius: 6px;
}

form .btn2 {
  font-size: 18px;
  margin-top: 20px;
  color: var(--brand-bg-white);
  cursor: pointer;
}

/*  ------ footer ------- */

#footer {
  background-color: var(--brand-tx-col);
  color: var(--brand-bg);
}

#footer p {
  font-size: 13px;
  padding: 10px;
}
#footer a {
  text-decoration: underline;
  color: var(--brand-bg);
}

#footer .flex {
  display: flex;
  justify-content: space-between;
}

/* copyright */

.copyright {
  width: 100%;
  height: calc(100vh - 100px);
  /* text-align: center; */
  margin-top: 20px;
  margin-bottom: 40px;
  font-weight: 300;
  /* padding: 20px; */
  line-height: 1.6;
}

.copyright h1,
.copyright h2 {
  color: #f46900;
}

/*   small screens */

nav .fas {
  display: none;
}

/* ------ newsletter-------- */

.subscribe .info {
  flex-basis: 40%;
  max-width: 400px;
}
.subscribe .newsletter {
  flex-basis: 40%;
  max-width: 400px;
  background-color: var(--brand-bg-white);
  padding: 40px 30px;
  border-radius: 15px;
}
.subscribe h3 {
  font-size: 25px;
}
.subscribe h2 {
  font-size: 35px;
}
.subscribe input {
  margin: 50px auto 0px;
  border: 1px solid var(--brand-orange);
}
.subscribe button {
  text-align: center;
  border-radius: 6px;
  /* margin: 0 auto; */
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.rotate-on-close {
  animation: rotate 0.5s ease;
}

/* ------------- books section -------- */

.books {
  background-color: var(--brand-bg-white);
}

.writeup {
  text-align: center;
  margin-bottom: 20px;
  background-color: var(--brand-bg);
  padding: 20px 0;
}

.writeup h2 {
  font-size: 36px;
  margin: 20px auto;
}
.books .shelf {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin: 20px auto 120px;
  padding: 20px;
}

.ltr {
  flex-direction: row;
}
.rtl {
  flex-direction: row-reverse;
}
.book-info {
  flex-basis: 35%;
  max-width: 450px;
}

.book-info h3 {
  font-size: 25px;
  padding-bottom: 20px;
}

.book-info p {
  font-size: 13px;
  margin-bottom: 15px;
}
.book-info a {
  /* border: 2px solid; */
  font-size: 20px;
  /* text-decoration: none; */
}

.book-cover {
  width: 400px;
  height: 500px;
  overflow: hidden;
  flex-basis: 50%;
}

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

.border-left {
  border-left: 1px solid rgb(22, 22, 22);
}
.border-right {
  border-right: 1px solid rgba(22, 22, 22, 0.13);
}

/* --------- about ------- */

.about-shelf {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin: 20px auto 120px;
  padding: 20px;
  flex-direction: row-reverse;
}

.about-info {
  flex-basis: 55%;
  max-width: 500px;
}

.about-info h1 {
  font-size: 35px;
  font-weight: 500;
  padding-bottom: 25px;
}

.about-info p {
  font-size: 18px;
  margin-top: 15px;
  line-height: 2;
  margin-bottom: 15px;
}
.about-info a {
  /* border: 2px solid; */
  font-size: 20px;
  /* text-decoration: none; */
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.points {
  font-weight: 600;
  font-size: 20px;
}
.points li {
  padding: 8px 0;
}

.other-things-about-me {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}
.check-icon {
  background-color: var(--brand-orange);
  color: white;
  border-radius: 50%;
  padding: 0 10px;
  margin: 0px 10px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  width: 20px;
  height: 20px;
}

/* ----- testimonial section */

.grid {
  display: grid;
  grid-gap: 10px;
  padding: 10px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  /* grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 300px); */
}

.grid-no-one {
  grid-column: span 2;
  grid-row: span 2;
}

.grid-no-two {
  grid-column: span 2;
  grid-row: span 1;
}

.grid-no-three {
  grid-column: span 1;
  grid-row: span 1;
}

.grid-no-four {
  grid-column: span 1;
  grid-row: span 3;
}

.grid-no-five {
  grid-column: span 1;
  grid-row: span 2;
}

.grid-no-six {
  grid-column: span 2;
  grid-row: span 2;
}
.cards {
  /* border-radius: 20px; */
  padding: 10px 5px;
  margin: 15px 5px 10px;
  display: flex;
  flex-direction: column;
  align-items: baseline;
}

.reviews .cards {
  box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
  border-radius: 20px;
  height: fit-content;
  background-color: #fff;
}

.reviews {
  margin: 10px auto 30px;
  /* border: 2px solid ; */
}

.divider {
  margin: 20px auto 90px;
  /* border: 2px solid red; */
}

.review-flex {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}
.review-img-container {
  width: 50px;
  height: 50px;
  border-radius: 200px;
  background: #ccc;
  border: 1px solid transparent;
}

.custom-controls {
  margin-top: 10px;
}

.custom-controls button {
  background-color: #222;
  color: white;
  padding: 6px 12px;
  border: none;
  margin-right: 10px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 14px;
}

.custom-controls button:hover {
  background-color: #444;
}


.review-hero {
  font-weight: 500;
}

.sm {
  font-size: 12px;
}

.cards p {
  font-size: 16px;
  margin: 20px 30px;
}

.book-bestseller::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* Black overlay with 60% opacity */
  z-index: 1;
}

.book-bestseller .container {
  position: relative;
  z-index: 2; /* Puts content above the overlay */
}

.book-bestseller .book-img img {
  max-width: 300px;
  width: 100%;
  margin: 20px 0;
}

.stats-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  margin-top: 40px;
}

.stat-box {
  display: flex;
  background-color: var(--brand-bg);
  flex-direction: column;
  align-items: center;
  /* border: 2px solid; */
  padding: 30px;
  width: 250px;
  text-align: center;
  font-family: Arial, sans-serif;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  border-radius: 12px; /* optional for softer edges */
}

.icon {
  font-size: 28px;
  color: #f97316; /* warm orange (similar to Tailwind's orange-500) */
  margin-bottom: 8px;
}

.stat-text strong {
  font-size: 22px;
  color: #333;
}

.brands {
  margin: 50px auto;
}
.brands img {
  height: 100px;

  object-fit: cover;
  /* border: 2px solid red; */
}

.brands .flex {
  display: flex;
  flex-wrap: wrap;
}
/* .grid-row-span-2 {
  grid-row: span 2;
}

.grid-col-2{
  grid-column: 2;
} */
/* ---- mobile responsive */
@media only screen and (max-width: 768px) {
  .brands .flex {
    display: flex;
    flex-wrap: wrap;
  }
  .brands img {
    height: 100px;
    width: 100px;
    object-fit: cover;
  }
  .book-img {
    width: 150px;
    height: 230px;
    overflow: hidden;
  }

  .border-left {
    border-left: none;
  }
  .border-right {
    border-right: none;
  }

  .books .shelf {
    flex-direction: column;
  }

  .about-shelf {
    flex-direction: column-reverse;
  }
  .book-info h3 {
    padding-top: 20px;
  }

  .email-input {
    font-size: 0.85rem; /* Smaller font on mobile */
  }

  .header-text h1 {
    margin-top: 0px;
  }

  .landing {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 10px 0 100px;
    background-color: var(--brand-bg);
  }

  .hero-img {
    width: 350px;
    height: 350px;
    margin: 20px 0 50px;
  }

  
  .header-text {
    font-size: 16px;
  }

  .header-text h1 {
    font-size: 30px;
  }

  nav .fas {
    display: block;
    font-size: 25px;
  }

  nav ul {
    background: #f46900;
    background: linear-gradient(135deg, #e47b2a 0%, #251104 40%, #ee8535d9);
    opacity: 1;
    color: var(--brand-bg-white);
    position: fixed;
    top: 0;
    right: -200px;
    width: 200px;
    height: 100vh;
    padding-top: 50px;
    z-index: 999;
    transition: right 0.5s ease-in-out;
  }

  nav ul li {
    display: block;
    color: var(--brand-bg-white);
    margin: 25px;
  }

  nav ul li a {
    color: inherit;
  }
  nav ul .fas {
    position: absolute;
    top: 25px;
    left: 25px;
    cursor: pointer;
  }

  .sub-title {
    font-size: 40px;
    text-align: center;
  }

  .about-col-1,
  .about-col-2 {
    flex-basis: 100%;
  }
  .about-col-1 {
    margin-bottom: 30px;
  }
  .about-col-2 {
    font-size: 14px;
  }
  .tab-links {
    font-size: 16px;
    margin-right: 20px;
    transition: all 0.5s ease-in-out;
  }
  nav .tab-links {
    margin-right: 0;
  }
  .social-icons {
    text-align: center;
  }

  .contact-left,
  .contact-right {
    flex-basis: 100%;
  }
  .copyright {
    font-size: 14px;
  }

  .subscribe .info {
    margin-bottom: 40px;
  }
}

#msg {
  margin-top: -30px;
  color: green;
}