@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&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');

*{
    margin: 0;
    padding: 0;
    /* font-family: Quicksand; */
    font-family: inter;
    font-weight: 700;
    color: var(--text-color);
}

html {
  scroll-behavior: smooth;
}


:root{
    --text-color: rgb(27, 27, 27);
    --bg-color: rgb(255, 255, 255);
}

body{
  padding-top: 80px;
    background-color:var(--bg-color) ;
}

.font900{
    font-weight: 900;
}



/* navbar start */
#navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: transform 0.3s ease-in-out;
  background-color: var(--bg-color);
}
.navbar-toggler {
    border: none; /* Removes the border */
    background: var(--bg-color); /* Removes background color, if any */
    padding: 0; /* Reduces any extra padding */
}

.navbar-toggler svg.hamburger-icon {
    width: 50px; /* Adjust container size */
    height: 30px; /* Maintain aspect ratio */
}


.navbar-toggler:focus {
    outline: none;
    box-shadow: none;
}

/* navbar end  */

/* hero section start  */

.custom-image {
    max-width: 60%; /* Scale down the image */
    height: auto; /* Maintain aspect ratio */
  }
  
  .hero-text {
    font-weight: 700;
    max-width: 70%;   
    height: auto;
    text-align: justify; /* Ensures full justification */
    text-justify: inter-character; /* Adds spacing between words for justification */
    margin-top: 100px;
}

  .about .btn {
    margin-top: 1rem; /* Add spacing above the button */
    font-weight: 700;
  }
  


  /* Cards section */

  .cards-posts .title-wrap {
    padding-bottom: 30px;
  }
  
  .content{
    /* width: 60%; */
  }

  .cards-posts .content-subtitle {
    font-size: 15px;
    margin-bottom: 10px;
    display: block;
    color: var(--default-color);
  }
  
  .cards-posts .content-title {
    color: var(--heading-color);
    font-size: 22px;
    margin-bottom: 30px;
  }
  
  .cards-posts .post-entry .thumb {
    margin-bottom: 20px;
  }
  
  .cards-posts .post-entry .thumb img {
    transition: 0.3s all ease;
  }
  
  .cards-posts .post-entry .thumb:hover img {
    opacity: 0.8;
  }
  
  .cards-posts .post-entry .meta {
    font-size: 12px;
    margin-bottom: 20px;
  }
  
  .cards-posts .post-entry .meta .cat {
    text-transform: uppercase;
    font-weight: normal;
    color: var(--heading-color);
  }
  
  .cards-posts .post-entry .meta .date {
    color: color-mix(in srgb, var(--default-color), transparent 25%);
  }
  
  .cards-posts .post-entry .post-content {
    padding-left: 30px;
    padding-right: 30px;
  }
  
  .cards-posts .post-entry .post-content h3 {
    font-size: 18px;
    line-height: 1.2;
  }
  
  .cards-posts .post-entry .post-content h3 a {
    color: var(--heading-color);
  }
  
  .cards-posts .post-entry .post-content h3 a:hover {
    color: var(--accent-color);
  }
  
  .cards-posts .author .pic {
    flex: 0 0 50px;
    margin-right: 20px;
  }
  
  .cards-posts .author .author-name {
    line-height: 1.3;
  }
  
  .cards-posts .author .author-name strong {
    color: var(--heading-color);
    font-weight: normal;
  }
  
  .cards-posts .author .author-name span {
    font-size: 14px;
    color: color-mix(in srgb, var(--default-color), transparent 25%);
  }

  /* timeline start  */


  body{margin-top:20px;}
  .timeline {
      border-left: 3px solid var(--text-color);
      border-bottom-right-radius: 4px;
      border-top-right-radius: 4px;
      background: var(--bg-color);
      margin: 0 auto;
      letter-spacing: 0.2px;
      position: relative;
      line-height: 1.4em;
      font-size: 1.03em;
      padding: 50px;
      list-style: none;
      text-align: left;
      max-width: 55%;
  }
  
  @media (max-width: 767px) {
      .timeline {
          max-width: 98%;
          padding: 25px;
      }
  }
  
  .timeline h1 {
      font-weight: 300;
      font-size: 1.4em;
  }
  
  .timeline h2,
  .timeline h3 {
      font-weight: 600;
      font-size: 1rem;
      margin-bottom: 10px;
  }
  
  .timeline .event {
      border-bottom: 1px dashed #e8ebf1;
      padding-bottom: 25px;
      margin-bottom: 25px;
      position: relative;
  }
  
  @media (max-width: 767px) {
      .timeline .event {
          padding-top: 30px;
      }
  }
  
  .timeline .event:last-of-type {
      padding-bottom: 0;
      margin-bottom: 0;
      border: none;
  }
  
  .timeline .event:before,
  .timeline .event:after {
      position: absolute;
      display: block;
      top: 0;
  }
  
  .timeline .event:before {
      left: -207px;
      content: attr(data-date);
      text-align: right;
      font-weight: 100;
      font-size: 0.9em;
      min-width: 120px;
  }
  
  @media (max-width: 767px) {
      .timeline .event:before {
          left: 0px;
          text-align: left;
      }
  }
  
  .timeline .event:after {
      -webkit-box-shadow: 0 0 0 3px var(--text-color);
      box-shadow: 0 0 0 3px var(--text-color);
      left: -55.8px;
      background: #fff;
      border-radius: 50%;
      height: 9px;
      width: 9px;
      content: "";
      top: 5px;
  }
  
  @media (max-width: 767px) {
      .timeline .event:after {
          left: -31.8px;
      }
  }
  
  .rtl .timeline {
      border-left: 0;
      text-align: right;
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
      border-bottom-left-radius: 4px;
      border-top-left-radius: 4px;
      border-right: 3px solid var(--text-color)
  }
  
  .rtl .timeline .event::before {
      left: 0;
      right: -170px;
  }
  
  .rtl .timeline .event::after {
      left: 0;
      right: -55.8px;
  }

.event{
  font-weight: 500;
}




.timeline .event::before {
  content: attr(data-date); /* Displays the value of data-date */
  font-family: 'Arial', sans-serif; /* Change the font */
  font-weight: 700; /* Make it bold */
  font-size: 14px; /* Adjust the size */
  color: #000; /* Change the color to black */
  display: block;
  margin-bottom: 10px; /* Add space below */
}





/* footer  */

footer {
  padding-top: 20px;
  padding-bottom: 20px;
}

footer .btn-floating {
  font-size: 1rem; /* Increase icon size */
}

footer .footer {
  background-color: var(--bg-color); /* Default fallback background color */
}

footer .email-link {
  font-size: 2.3rem; /* Increase font size */
  display: block;
  margin: 0 auto;
  /* width: 60%; Take up 60% of the width */
  text-decoration: none; /* Remove underline */
  /* padding: 10px 0; Add space above and below */
}

footer .email-link:hover {
  text-decoration: underline; /* Optional: underline on hover for clarity */
}

@media (max-width: 576px) {
  
}

  
 
  

/* For smaller screens like mobile devices */
@media (max-width: 768px) {
    .logo {
        width: 300px; /* Smaller size for phones */
        height: auto;
    }
    /* .post-entry .thumb img {
        max-width: 90%; 
        margin: 0 auto; 
        display: block;
      } */
      .cardwidth{
        max-width: 90%;
      }
      .experience-card {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
}


@media (max-width: 480px) {

  .body{
    margin-top: 70px;
  }

    .logo {
        width: 190px; /* Even smaller for very small phones */
        height: auto;
    }

    .hero-text{
      font-size: 1.2rem;
    
    max-width: 78%;   
        margin-top: 0px;
 
    }
    footer .email-link {
      font-size: 1.2rem; /* Adjust font size for smaller screens */
      width: 90%; /* Take up more space on smaller screens */
    }
  
    footer {
      padding-top: 30px; /* Add extra spacing on smaller screens */
      padding-bottom: 30px;
    }
    footer .btn-floating {
      font-size: 1rem; /* Increase icon size */
    }


    
}




/* bloggging  */

/* blog list  */

.blog-list-container {
  margin-top: 40px;
}

.blog-item {
  padding: 15px 0;
  transition: background-color 0.3s ease;
}

.blog-item:hover {
  background-color: #f9f9f9;
}

.blog-link {
  text-decoration: none;
  color: var(--text-color);
}

.blog-link h2 {
  margin-bottom: 10px;
  font-weight: 700;
}

.blog-link p {
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--text-color), transparent 50%);
}


/* blog page  */

/* Blog Page Styles */

/* Blog Container */
.blog-container {
  max-width: 60%; /* Limit width for centered content */
  margin: 0 auto; /* Center align */
  padding: 20px;
  background-color: var(--bg-color);
  color: var(--text-color);
}

/* Blog Title */
.blog-title {
  font-size: 2.5rem;
  font-weight: 900;
  margin-bottom: 10px;
  color: var(--text-color);
}

/* Blog Meta Information */
.blog-meta {
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 20px;
  font-style: italic;
}

/* Blog Headings */
.blog-heading {
  font-size: 1.8rem;
  font-weight: 700;
  margin-top: 30px;
  margin-bottom: 10px;
}

/* Blog Paragraphs */
.blog-paragraph {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 20px;
  text-align: justify;
}

/* Blog Images */
.blog-image {
  width: 100%; /* Full-width images */
  height: auto;
  margin: 20px 0;
  border-radius: 8px; /* Slightly rounded corners */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Back Button */
.back-button-container {
  text-align: center;
  margin-top: 40px;
}

.back-button {
  text-decoration: none;
  font-weight: 700;
  color: var(--accent-color); /* Accent color for buttons */
  padding: 10px 20px;
  border: 2px solid var(--accent-color);
  border-radius: 5px;
  transition: all 0.3s ease-in-out;
}

.back-button:hover {
  background-color: var(--accent-color);
  color: var(--bg-color); /* Reverse colors on hover */
}


@media (max-width: 768px) {
  .blog-container {
    max-width: 90%; /* Expand to fit mobile screens */
  }

  .blog-title {
    font-size: 1.5rem;
  }

  .blog-paragraph {
    font-size: 0.9rem;
  }

  .blog-heading {
    font-size: 1.5rem;
  }
}