:root {
  --color-primary: #be9e44;
  --color-complimentary-light: #d8c690;
  --color-complimentary-dark:#CBB26A;
  --color-white-first:#F5F5F5;;
  --color-white-second:#dcdcdc;
  --color-white-third:#f6f6f6;
  --color-white-four:#f2f2f2;
  --color-white-pure:#ffffff;
  --color-black-pure:#000000;

/* At the time of adding or changing font also update google url of fonts */
--font-family-heading-abril : 'Abril Fatface', serif;
--font-family-heading-Cantata : 'Cantata One', serif;
--font-family-heading-Gravitas : 'Gravitas One', serif;
--font-family-heading-DM : 'DM Serif Display', serif;
--font-family-heading-Russo : 'Russo One', sans-serif;
--font-family-heading-Shrikhand : 'Shrikhand', serif;
--font-family-heading-Racing : 'Racing Sans One', sans-serif;
--font-family-heading-Pirata  : 'Pirata One', system-ui;

--font-family-stylish-Lobster : 'Lobster', sans-serif;
--font-family-stylish-Pacifico : 'Pacifico', cursive;
--font-family-stylish-Courgette : 'Courgette', cursive;
--font-family-stylish-Alegreya : 'Alegreya', serif;
--font-family-stylish-Ubuntu : 'Ubuntu', sans-serif;
--font-family-stylish-Lora : 'Lora', serif;
--font-family-stylish-Dancing  : 'Dancing Script', cursive;
--font-family-stylish-Oleo : 'Oleo Script', system-ui;
--font-family-stylish-Cookie : 'Cookie', cursive;

--font-family-regular-Domine:'Domine', serif;
--font-family-regular-Roboto:'Roboto', sans-serif;
--font-family-regular-Lato:'Lato', sans-serif;
--font-family-regular-Squada:'Squada One', sans-serif;
--font-family-regular-Patua:'Patua One', serif;
--font-family-regular-Oswald:'Oswald', sans-serif;

}
.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;
  }
  h1{
    font-family: var(--font-family-stylish-Lora);
  }
  p,h2,h3 {
    font-family: var(--font-family-stylish-Lora);
   
    }
    p{
      font-size: 18px;
    }
    ol li {
      font-size: 20px; /* Specify the desired font size */
    }
    
    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:var( --color-white-first);
      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;
        }
        .abc{
          padding: 20px 140px 0px 140px;
          }
          
          .custom-image {
            width: 50%; /* specify desired width */
            height: 50%; /* specify desired height */
        }
        
          /* Responsive styles */
@media only screen and (max-width: 600px) {
  .abc{
    padding: 20px;
  
  }
  .custom-image {
    width: 90%; /* specify desired width */
    height: 500px; /* specify desired height */
}
  }
  .article-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    }
    
    .article-card {
    position: relative;
    width: 900px;
    margin: 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;
    
    }
    
    .title-above-image {
    margin-bottom: 10px;
    }
    
    .article-card img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    }
    
    .article-content {
    /* Add styles for article content (description) */
    }
    
    .article-content p {
    margin-bottom: 10px;
    }

    .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;
      }
      .container {
        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 {
          background-color: var(--color-white-third); /* Background color for the table of contents */
          padding: 10px;
          border-radius: 10px;
          }
          
          .table-of-contents li {
          padding: 10px;
          }
          .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 */
          }
          }