:root {
    --color-primary:#ffffff;;
  --color-complimentary-light: #6fa4fc;
  --color-complimentary-dark:#006bb6;
  --color-white-first:#F5F5F5;;
  --color-white-second:#dcdcdc;
  --color-white-third:#f6f6f6;
  --color-white-four:#f2f2f2;
  --color-white-pure:#ffffff;
  --color-black-pure:#000000;

  --menu-icon-color: #000000; /* black */

.image-container img {
  display: block; /* Make sure the image fills the container */
  max-width: 100%; /* Ensure the image doesn't exceed the container width */
  height: auto; /* Maintain the aspect ratio */
  background-color: var(--color-white-pure);
  }
  body {
  margin: 0;
  overflow-x: hidden !important;

  font-family: "Lora", serif; /* Elegant but readable bofdy text */
  font-size: 14px; /* Slightly smaller than Medium for dense tech content */
  line-height: 1.6;
  color: #2d3748; /* Soft black (better than pure #000) */
  }
  h1, h2, h3, h4 {
    font-family: "Inter", sans-serif; /* Clean, bold headings */
    font-weight: 500;
    color: #1a202c; /* Darker for contrast */
  }
  p {
    font-family: "Lora", serif; /* Elegant yet readable */
    font-size: 16px;                    /* Slightly smaller than Medium (21px) for dense tech content */
    line-height: 1.6;                   /* Improves readability */
    color: #2d3748;                     /* Soft black (easier on eyes than pure #000) */
    margin-bottom: 1.5em;               /* Spacing between paragraphs */
  }
  ol li {
      
    font-family: "Lora", serif; /* Elegant yet readable */
    font-size: 16px;                    /* Slightly smaller than Medium (21px) for dense tech content */
    line-height: 1.6;                   /* Improves readability */
    color: #2d3748;                     /* Soft black (easier on eyes than pure #000) */
    margin-bottom: 1.5em; 
    }
 ul li {
   /* padding-left: 20px;   */
    font-family: "Lora", serif; /* Elegant yet readable */
    font-size: 16px;                    /* Slightly smaller than Medium (21px) for dense tech content */
    line-height: 1.6;                 
    color: #2d3748;                  /* Soft black (easier on eyes than pure #000) */
    margin-bottom: 1.5em; 
    }
  a {
    color: #3182ce; /* Tech-blue links */
    text-decoration: underline;
  }
    
    hr.new5 {
    border: 2px solid gray;
    border-radius: 5px;
    }
    input[type=text], select, textarea {
      width: 100%; /* Full width */
      padding: 12px; /* Some padding */ 
      border: 1px solid #ccc; /* Gray border */
      border-radius: 4px; /* Rounded borders */
      box-sizing: border-box; /* Make sure that padding and width stays in place */
      margin-top: 6px; /* Add a top margin */
      margin-bottom: 16px; /* Bottom margin */
      resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
      }
      
      /* Style the submit button with a specific background color etc */
      input[type=submit] {
      background-color: #04AA6D;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      }
      
      /* When moving the mouse over the submit button, add a darker green color */
      input[type=submit]:hover {
      background-color: #45a049;
      }
      
      footer {
      background-color:#98D381;
      color: #000000;
      padding-top: 20px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center; 
      }
      
      .footer-logo img {
      max-width: 100px; /* Adjust the maximum width as needed */
      height: auto; /* Maintain aspect ratio */
      }
      
      .footer-links {
      margin-top: 20px;
      }
      
      .footer-links a {
      color: #000000;
      text-decoration: none;
      margin: 0 10px;
      font-family: var(--font-family-stylish-Lora);
      }
      
      .footer-copyright {
      margin-top: 20px;
      color: #ffffff;
      background-color: #000000;
      font-size: 15px; 
      }
      
      .social-icons {
      background-color: var(--color-white-pure);
      border-radius: 10px;
      border: 0px solid #333; 
      padding: 10px;
      display: flex;
      align-items: center; /* Center content vertically */
      margin-top: 10px; /* Adjust as needed */
      }
      
      .social-icons a,img {
      font-size: 32px; /* Adjust icon size as needed */
      padding-right: 10px;
      }
      .dropdown-menu {
        display: none;
        position: absolute;
        background-color: var(--color-complimentary-dark);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        
        .dropdown:hover .dropdown-menu {
        display: block;
        }
        
        .dropdown-menu li {
        display: block;
        padding: 10px;
        }
        
        .dropdown-menu a {
        color: #fff;
        text-decoration: none;
        }
        .maincontainer{
          padding: 0% 20% 3% 20%;
          }
          
          .custom-image {
            width: 50%; /* specify desired width */
            height: 50%; /* specify desired height */
        }
        
          /* Responsive styles */
@media only screen and (max-width: 600px) {
  .maincontainer{
    padding: 0% 10% 3% 10%;
  
  }
  .custom-image {
    width: 90%; /* specify desired width */
    height: 500px; /* specify desired height */

}
  }
  .article-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}



.title-above-image {
    margin-bottom: 10px;
}

.article-card img {
    width: 300px;
    height: auto;
    margin-bottom: 10px;
    max-width: 100%; /* Ensures the image doesn't exceed its container's width */
}

.article-content p {
    margin-bottom: 10px;
}

/* Responsive Design */



    .published-date {
      position: absolute;
      position: absolute;
      bottom: 0;
      right: 0;
      }
      
      .time-to-read {
      position: absolute;
      top: 0;
      right: 0;
      color: #999;
      font-size: 0.9rem;
      padding: 5px;
      }
      .ƒ {
        margin: 0;
        padding: 0;
        background-size: cover;
        background-position: center;
        }


        .card {
          position: relative;
          padding: 20px;
          border-radius: 20px; /* Adjust the value based on your preference */
          overflow: hidden; /* Ensure the border-radius is applied to the background image */
          text-align: center;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          }
          
          .background-img {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          z-index: -1;
          opacity: 0.2; /* Hide the image */
          }
          
          
          
          .website-name {
          color: #333; /* Text color */
          font-size: 24px;
          margin-bottom: 20px;
          }
          
          .url {
          position: absolute;
          bottom: 0px;
          right: 10px;
          color: #555; /* Text color */
          font-size: 14px;
          }
          
          
          .table-of-contents li {
          padding: 10px;

    font-family: "Lora", serif; /* Elegant yet readable */
    font-size: 16px;                    /* Slightly smaller than Medium (21px) for dense tech content */
    line-height: 1.6;                   /* Improves readability */
    color: #2d3748;                     /* Soft black (easier on eyes than pure #000) */
    margin-bottom: 1.5em; 
          }
          .textcontainer {
          display: flex;
          flex-wrap: wrap; /* Allow items to wrap to the next line on smaller screens */
          justify-content: space-between;
          align-items: center;
          }
          
          .left-text,
          .right-text {
          display: inline-block; /* or display: inline; */
          text-align: left;
          }
          
          /* Media query for smaller screens (adjust max-width as needed) */
          @media (max-width: 768px) 
          {
          .textcontainer {
              flex-direction: column; /* Stack items vertically on smaller screens */
              text-align: center; /* Center text on smaller screens */
          }
          
          .left-text,
          .right-text {
              width: 100%; /* Full width on smaller screens */
              text-align: center; /* Center text on smaller screens */
              margin-bottom: 10px; /* Add space between text blocks on smaller screens */
          }
          }
         
          .social-container {
            display: flex;
            justify-content:space-between; /* Centers horizontally */
            align-items: center; /* Centers vertically */
            background-color: #eded48; /* Background color */
            
            padding: 20px;
            gap: 10px; /* Space between text and icon */
            border-radius: 20px; /* Optional rounded corners */
            width:fit-content; /* Adjust width to fit content */
            margin: 0 auto; /* Centers the div itself */
            margin-bottom: 20px;
            margin-top: 20px;
        }
        
        /* Style the text */
        .social-text {
            font-size: 16px;
            font-weight: bold;
            color: #333; /* Dark gray text */
        }
        
        /* Social Icon Styling */
        .social-icon {
          padding: 0px;
            
        }
        
        /* Center the image inside the icon */
        .social-icon img {
background-color: rgb(255, 255, 255);
border-radius: 20px;
margin-top: 5px;
          padding:20px;
            width: 30px;
            height: 30px;
            
        }
        
        /* Hover effect */
        .social-icon img:hover {
            background-color: #e5e2e3;
        }

        .content-wrapper {
          display: flex;
          grid-template-columns: 250px 1fr; /* Sidebar width and flexible content area */
          gap: 20px; /* Space between ToC and content */
padding-top: 10px;
  flex-direction: row;
      }
      
      .table-of-contents {
          position: sticky;
          top: 20px; /* Adjust as needed */
          align-self: start;
          background-color: #89ABE3; /* Light background for distinction */
          padding: 15px;
          border-radius: 8px;
          border: 1px solid #ddd;
          width: 300px;
      }
      
      .table-of-contents h2 {
          font-size: 1.2em;
          margin-top: 0;
          color: white;
      }
      
      .table-of-contents ol {
          list-style: none;
          padding-left: 0;

      }
      
      .table-of-contents li {
          margin-bottom: 10px;
          
      }
      
      .table-of-contents a {
          text-decoration: none;
          color: #fbfbfc;
      }
      
      .table-of-contents a:hover {
          text-decoration: underline;
      }
      
      .article-content {
          line-height: 1.6;
      }
      
      .article-content h2 {
          margin-top: 1.5em;
      }
      
      .article-content img {
          max-width: 100%;
          height: auto;
          border-radius: 8px;
      }

.article-content {
  flex: 1;
}

/* Responsive layout for iPads and mobile devices */
@media only screen and (max-width: 1444px) {
  .content-wrapper {
      flex-direction: column;
  }

  .table-of-contents {
      width: 90%;
      position: static;
      padding-right: 8%;
      padding-top: 10px;
  }
}


.content-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #E1CF79;
  padding-left: 5px;
  padding-bottom: 5px;
  color: white;
  width: 100vw; /* Ensures the container spans the full viewport width */
  box-sizing: border-box;
  overflow: hidden; /* Prevents overflow causing white space */
  position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.text-section {
  flex: 1;
  /* margin-right: 20px; */
  /* padding: 0% 20% 3% 20%; */
  padding-left: 20%;
}

.image-section {
  flex: 1;
  /* display: flex; */
  justify-content: flex-end;
  /* Ensure the image doesn't exceed its container */
  overflow: hidden;
padding: 0;
  display: block;
  /* padding-right: 10%; */
}

.custom-images {
  max-width: 80%;
  height: auto;
  /* Optional: Add a border or shadow for better visualization */
  border: 2px solid #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 0;
border-radius: 10px;
  display: block;
  
}

.author-card {
  display: flex;
  align-items: center;
  background-color: #B4B4B4; /* Set your desired background color */
  border-radius: 15px; /* Adjust the radius for desired roundness */
  padding: 10px;
  width: fit-content; /* Adjust based on your layout needs */
  margin-top: 10px;
  margin-bottom: 10px;

}

.author-image {
  width: 150px; /* Set the desired width */
  height: 150px; /* Set the desired height */
  border-radius: 20%; /* Makes the image circular */
  object-fit: cover; /* Ensures the image covers the area without distortion */
  margin-right: 10px; /* Space between image and name */
}

.author-name {
  font-size: 16px; /* Adjust the font size as needed */
  
  
}
.author-name p{
  color: rgb(255, 255, 255);
}
@media (max-width: 1024px) {
  .author-card {
    flex-direction: column; /* Stacks the image above the text */
    align-items: center; /* Centers the content horizontally */
    padding: 5px; /* Adds more padding for touch-friendly spacing */
    width: 100%; /* Ensures the card takes full width on mobile */
    
  }

  .author-image {
    width: 100px; /* Reduces the image size for smaller screens */
    height: 100px; /* Matches the width for a square aspect ratio */
    margin-right: 0; /* Removes the right margin */
    margin-bottom: 10px; /* Adds space between the image and the name */
  }

  .author-name {
    font-size: 14px; /* Slightly reduces the font size */
    text-align:center; /* Centers the text */
    
  }
  .content-container {
    flex-direction: column;
    align-items: center;
    
  }

  .text-section {
    display: flex;
    flex-direction: column;
    align-items:flex-start; /* Center horizontally */
    justify-content: center; /* Center vertically */
    /* margin-right: 0; */
    margin-bottom: 20px;
    text-align: left; /* Center text within the section */
    margin-left: -20%;
  }

  .image-section {
    display: flex; /* Ensure this is a flex container */
    justify-content: center; /* Center contents horizontally */
   width: 80%;
  }

  .custom-images {
    max-width: 80%; /* Ensure image scales within its container */
    height: auto; /* Maintain aspect ratio */
  }
}
.table-of-contents {
  border: none;           /* Optional: Adjusts padding */
}
.table-of-contents a:link {
  color: #ffffff;
}

.table-of-contents a:visited {
  color: rgb(0, 110, 255);
}

.table-of-contents a:hover {
  color: rgb(218, 247, 0);
  text-decoration: underline;
}

.table-of-contents a:active {
  color: white;
}
  }

  .highlight {
    background-color: rgb(247, 255, 3); /* Sets the background color */
    color: black;             /* Sets the text color */
    padding: 2px;             /* Adds space around the text */
    border-radius: 3px;       /* Optional: Rounds the corners */
  }
  article-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%; /* Ensure it spans the full width */
}
.article-card {
  position:relative;
  width: calc(45% - 20px); /* Reduce width slightly to fit two cards */
  margin-top: 20px; /* Margin on all sides */
  margin-bottom: 20px;
  padding: 15px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  text-align: center; /* Center text in the card */
  border-radius: 10px;
}
@media (max-width: 600px) {
  .article-card {
      width: calc(100% - 40px); /* Full width for smaller screens */
  }
}

.highlight-site {
  color: #007BFF; /* Or any color you prefer */
  font-weight: bold;
}