/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
  line-height: 1.6;
  font-size: clamp(14px, 1.5vw, 16px); /* Auto-adjust font size */
}

/* Container Styling */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

/* Header Section */
h1, h2, h3, h4 {
  color: #333;
  margin-bottom: 15px;
}

h1.h3, h2.h3, h3.h3 {
  font-size: clamp(20px, 3vw, 24px); /* Auto-adjust font size */
}

h2.h5 {
  font-size: clamp(18px, 2.5vw, 20px); /* Auto-adjust font size */
}

/* Main Heading Styles */
div[align="center"] h2 {
  text-align: center;
  margin-bottom: 10px;
}

div[align="center"] h2 font {
  font-weight: bold;
}

div[align="center"] h2 font[size="5"] {
  font-size: clamp(24px, 4vw, 28px); /* Auto-adjust font size */
}

div[align="center"] h2 font[size="2"] {
  font-size: clamp(16px, 2.5vw, 18px); /* Auto-adjust font size */
  color: #ff0000;
}

/* Marquee Style */
.marquee {
  padding: 10px;
  background-color: #ffffff;
  margin: 10px 0;
  border-radius: 8px;
  border: 1px solid #ec0000;
}

.marquee span {
  color: #000000;
  font-weight: bold;
}

/* Social Media Button */
.twitter-follow-button {
  margin: 15px 0;
}

/* Image Grid Style */
.box-data {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.box-data td {
  padding: 15px;
  border: 1px solid #ddd;
  background-color: #d5d5d5;
}

.box-data div {
  padding: 10px;
  border-radius: 8px;
  text-align: center;
  background-color: #ffffff;
}

.box-data a {
  text-decoration: none;
  color: #0005ff;
}

.box-data a:hover {
  text-decoration: underline;
}



.col-sm-4 {
  flex: 0 0 32%;
}

.mt-3 {
  margin-top: 30px;
}

.mt-5 {
  margin-top: 50px;
}

/* Table Style */
.table {
  width: 100%;
  margin-bottom: 20px;
  border-collapse: collapse;
}

.table td {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: center;
}

/* FAQ Section */
.faq-question {
  font-weight: bold;
}

.faq-answer {
  margin-top: 10px;
}

ul {
  list-style-type: disc;
  margin-left: 20px;
}

li {
  margin-bottom: 10px;
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
  .col-sm-4 {
    flex: 0 0 48%;
  }
}

@media (max-width: 576px) {
  .col-sm-4 {
    flex: 0 0 100%;
  }

  .box-data td {
    display: block;
    width: 100%;
    margin-bottom: 10px;
  }

  .table td {
    display: block;
    width: 100%;
  }
}
/*end all this code */



/* Row and Column Spacing */
.row {
  margin-bottom: 20px; /* Add spacing between rows */
}

.g-1 > [class*='col-'] {
  padding: 10px; /* Adds inner spacing inside each column */
  background-color: #f0f0f0; /* Light background for columns */
  border-radius: 8px; /* Rounded corners for a modern look */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Add smooth transitions */
}

/* Column Hover Effects */
.g-1 > [class*='col-']:hover {
  transform: scale(1.02); /* Slightly enlarge the column on hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow effect */
}

/* Text Styling */
.g-1 > [class*='col-'] h2, .g-1 > [class*='col-'] p {
  color: #333; /* Darker text color for better readability */
  margin-bottom: 10px;
}

.g-1 > [class*='col-'] a {
  text-decoration: none; /* Remove underline from links */
  color: #391cff; /* Standard blue link color */
  font-weight: bold;
}

.g-1 > [class*='col-'] a:hover {
  color: #1895ff; /* Darken the link on hover */
  text-decoration: underline; /* Add underline on hover */
}

/* Additional Customizations */
.mt-3 {
  margin-top: 30px;
}

.br {
  margin-bottom: 15px; /* Add space between lists when using <br> */
}

/* Media Queries for Responsive Design */
@media (max-width: 768px) {
  .col-sm-4 {
    flex: 0 0 48%; /* Stack columns in two per row on medium screens */
    margin-bottom: 20px; /* Add spacing between rows */
  }
}

@media (max-width: 576px) {
  .col-sm-4 {
    flex: 0 0 100%; /* Stack columns full width on small screens */
  }
}
.viewmore-btn-secondary {
    display: inline-block; /* Ensures it behaves like a button */
    padding: 0.375rem 0.75rem; /* Adds padding */
    margin: 0.5rem; /* Margin around the button */
    font-size: 1rem; /* Adjust font size */
    font-weight: 400; /* Standard button weight */
    text-align: center; /* Centers text */
    text-decoration: none; /* Removes underline */
    color: #ffffff; /* Text color */
    background-color: #cac9fa; /* Background color */
    border: 1px solid #ff5c5c00; /* Border */
    border-radius: 0.25rem; /* Rounded corners */
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out; /* Smooth transitions */
    float: right; /* Aligns the button to the right */
}

.viewmore-btn-secondary:hover {
    background-color: #9897c5; /* Darker background on hover */
    border-color: #1b7fe4; /* Darker border on hover */
}

.viewmore-btn-secondary:focus {
    outline: none; /* Removes outline */
    box-shadow: 0 0 0 0.2rem rgb(207 26 255 / 50%); /* Adds a focus ring */
}