@charset "utf-8";
/* CSS Document */
/* --- Variables for easy color adjustments --- 
:root {*/
 /* --button-color: #cc0001;  Gold/Yellow from image */
 /* --text-color: #ffffff;  Dark text for contrast */
   /*--accent-separator: #707070; Darker gray/maroon separator */
  /*--go-back-text: #ffffff;  Reddish text for "Go Back" 
}*/

.insight-nav {
	/*position: sticky;*/
	top: 0;
	z-index: 1000;
	background-color: #fff;
  width: 1220px;
  margin: 10px 0;
}

.insight-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; /* Key for horizontal layout */
  border-bottom: 5px solid #707070; /* Horizontal separator */
  gap: 5px; /* Space between buttons */
  align-items: flex-end; /* Aligns items to the bottom border */
}

.insight-nav li {
  /* Set position for the mobile-only items to be hidden by default */
  display: flex;
}

/* Hide the vertical items by default on larger screens 
.insight-nav .mobile-only {
  display: none;
}*/

.insight-nav a {
  display: block;
  padding: 5px 10px;
  background-color: #cc0001;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1em;
  border-radius: 8px 8px 0 0; /* Rounded corners only on top */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s;
  white-space: nowrap; /* Prevents text wrap in buttons */
}

/* Styling for the "Go Back" button's specific text color */
.insight-nav a.go-back {
  color: #fff;
}

/* Hover effect */
.insight-nav a:hover {
  background-color: #cc0001; /* Slightly darker yellow on hover */
}

/* --- Mobile Responsiveness (Vertical Stacked Layout) --- */

@media (max-width: 768px) {
  .insight-nav ul {
    flex-direction: row; /* Stacks items vertically */
    border-bottom: none; /* Remove the horizontal separator */
    /*gap: 8px;  Reduce gap for stacked buttons */
    align-items: left; /* Center the stack of buttons */
    width: 200px; /* Optional: Constrain the width for the stacked items */
    margin: 0 auto; /* Center the entire nav block */
  }

  .insight-nav a {
    width: 100%; /* Make buttons full width of the ul container */
    padding: 12px 20px;
    border-radius: 8px; /* Full rounded corners for mobile stack */
    text-align: center;
  }

  .insight-nav li {
    width: 100%; /* Ensure list items take full width */
  }

  /* Hide the horizontal items on smaller screens
  .insight-nav li:not(.mobile-only) {
    display: none;
  } */

  /* Show the vertical items on smaller screens 
  .insight-nav .mobile-only {
    display: flex;*/
    /* Special styling for the separator on the last item of the mobile stack 
  }*/

  /* Adding the dark separator line to the last item, as shown in the image */
  .insight-nav ul li:last-of-type a {
      border-radius: 8px 8px 0 0; /* Rounded top corners */
  }
  .insight-nav ul li:last-of-type {
      margin-bottom: 5px; /* Create space for the separator */
      border-bottom: 5px solid #707070;
      border-radius: 0 0 8px 8px; /* Rounded bottom corners on the separator area */
  }
}


 /* -------------------------------------------------- */
        /*                   YELLOW BUTTON                    */
        /* -------------------------------------------------- */

        .btn-yellow {
            background-color: #ffcc00;
            color: #000;
            padding: 10px 16px;
            border-radius: 6px;
            border: none;
            font-weight: 600;
            font-size: 2rem;
            cursor: pointer;
            text-align: center;
            display: inline-block;
			gap: 20;
        }

        .btn-yellow:hover {
            background-color: #ffb300;
        }



/*-- block 2 colum responsive grid---*/
				 
				 .two-column-grid-with-image {
 					 display: grid;
  					 grid-template-columns: repeat(2, 1fr);
					 padding-bottom: 24px;
					/*gap: 20px;*/
					}

				.column {
					text-align: center;
				  padding: 20px;
				  background-color: #fff;
				  /*border-radius: 8px;*/
				  box-sizing: border-box; 
				}
				 
				 .column-wh {
				  padding: 20px;
				  background-color: #fff;
				  /*border-radius: 8px;*/
				  box-sizing: border-box; 
				}

				/* --- Responsive Image Rule --- */
				.responsive-image {
				  max-width: 100%; 
				  height: auto; 
				  display: block;
				  margin: 0; 
				}
				 
				 
				 /* --- H1 and Paragraph Styles (Standard Text) --- */
				.feature-title {
				  font-size: 2em; /* Large heading */
				  color: #333;
				  margin-top: 0;
				  margin-bottom: 0.5em;
					text-align: left;
				}

				/* --- Button Styling: Red Background, White Text --- */
				.action-button {
				  background-color: #cc0001; /* Red color */
				  color: #fff; /* White text */
				  padding: 12px 25px;
				  border: 2px solid #e74c3c; /* Red border for consistency */
				  border-radius: 5px;
				  cursor: pointer;
				  font-size: 1em;
				  font-weight: bold;
				  /*transition: all 0.3s ease;  Smooth transition for hover effect */
				  margin-top: 15px;
				}

				/* --- Button Hover Style: Black Background, White Text --- */
				.action-button:hover {
				  background-color: #313131; /*Black color on hover */
				  border-color: #000000; /* Black border on hover */
				  color: white; /* Keep text white */
				}

				@media (max-width: 600px) {
				  .two-column-grid-with-image {
					grid-template-columns: 1fr;
				  }
				}
				 


 /* --- 1. Base Styles and Typography 


/* Style for the container of the announcement text */
.announcement-text {
    max-width: 600px;
    margin-bottom: 20px;
}

/* Style for the text content that needs the red line (like your main paragraph) */
.red-line-content {
    /* The line itself */
    border-left: 5px solid #cc0001;

    /* Add spacing between the line and the text */
    padding-left: 15px;

    /* Styles to match your image's bold, large text */
    font-size: 2em;
    font-weight: bold;
    line-height: 1.3;
    color: #333;
}

/* Style for secondary paragraphs, like the "Supply Chain" text */
.secondary-content {
    font-size: 18px;
    font-weight: normal;
    line-height: 1.5;
    color: #333;
    margin-top: 20px;
	text-align: left!important;
}

.tritary-content {
    font-size: 20px;
    font-weight: normal;
    line-height: 1.5;
    color: #333;
    margin-top: 20px;
	text-align: left!important;
}

.divider {
	width: 1px;
	background-color: #ccc;
}


/* --- 2. Flexbox Column Layout --- */
.two-column-layout {
    display: flex; /* Enables Flexbox for columns */
    flex-direction: row; /* Default to columns */
    /*gap: 30px;  Space between the two columns */
    max-width: 1200px;
    margin: 0 auto; /* Center the entire layout */
}

.column {
    flex: 1; /* Makes both columns grow equally */
    padding: 20px;
    background-color: white;
    border-radius: 8px; /* Slightly rounded corners */
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  Subtle shadow for depth */
}

/* Specific styling for the image column to align the image/text */
.image-column {
    text-align: left;
}

/* Style for the product image */
.product-image {
    max-width: 100%; /* Ensures image shrinks on small screens */
    height: auto;
    display: block;
    margin: 0 auto 15px; /* Center the image */
}

/* Style for the small text near the image */
.product-note {
    font-size: 1em;
    color: #666;
    margin-top: 10px;
    text-align: left;
}

/* --- 3. Responsiveness (Mobile First Approach) --- */

/* When the screen width is 768px or smaller, stack the columns */
@media (max-width: 768px) {
    .two-column-layout {
        flex-direction: column; /* Stacks items vertically on smaller screens */
    }

    .column {
        padding: 15px; /* Adjust padding for smaller screens */
    }
}
				 
			
 /* --- Base Styling --- */
.feature-grid {
  display: grid;
  /* 4 columns: 'repeat(4, 1fr)' creates 4 equal-width columns */
  grid-template-columns: repeat(4, 1fr);
  gap: 20px; /* Space between the columns/items */
  padding: 20px;
  max-width: 1220px; /* Optional: Constrain max width */
  margin: 0 auto; /* Center the grid */
}

.feature-item {
  display: flex;
  flex-direction: column; /* Stacks the image on top of the content */
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden; /* Ensures image corners are contained */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.feature-item:hover {
  transform: translateY(-5px); /* Simple hover effect for polish */
}

/* --- Image Styling --- */
.feature-item img {
  width: 100%;
  height: auto; /* Maintain aspect ratio */
  display: block;
  /* Optional: Set a max-height or aspect-ratio for uniform sizing */
  aspect-ratio: 16 / 9; /* Example aspect ratio */
  object-fit: cover; /* Ensures image covers the area without distortion */
}

/* --- Content Styling --- */
.feature-content {
  padding: 15px;
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Allows the content to fill the remaining space */
}

.feature-content h3 {
  margin-top: 0;
  color: #333;
}

.feature-content p {
  color: #666;
  margin-bottom: 15px;
}

.feature-content a {
  margin-top: auto; /* Pushes the button to the bottom of the content area */
  padding: 8px 15px;
  background-color: #007bff; /* Example link color */
  color: white;
  text-decoration: none;
  border-radius: 4px;
  align-self: center; /* Centers the button horizontally */
  transition: background-color 0.3s;
}

.feature-content a:hover {
  background-color: #0056b3;
}

/* --- Responsive Layout (Media Queries) --- */

/* Tablet View: Collapse from 4 columns to 2 columns */
@media (max-width: 992px) {
  .feature-grid {
    /* Changes to 2 columns that take up half the width each */
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile View: Collapse from 2 columns to 1 column (full width) */
@media (max-width: 576px) {
  .feature-grid {
    /* Changes to a single column */
    grid-template-columns: 1fr;
    gap: 30px; /* More space between stacked items */
    padding: 15px;
  }
  
  .feature-item {
      max-width: 400px; /* Optional: Cap the width of the item on very small screens */
      margin: 0 auto;
  }
}
		


/* --- 1. Grid Container Setup (3 Equal Columns) --- */
.feature-grid-container {
  display: grid;
  /* Creates three columns of equal width */
  grid-template-columns: repeat(3, 1fr);
  gap: 30px; 
  max-width: 1200px;
  margin: 40px auto; 
  padding: 0 20px;
}

/* --- 2. Feature Block Styling --- */
.feature-block {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden; 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* Use Flexbox to ensure the content area pushes the button to the bottom */
  display: flex;
  flex-direction: column;
}

/* --- 3. Image Styling (Top) --- */
.feature-image {
  /* Makes the image fully responsive within its column */
  max-width: 100%;
  height: auto; 
  display: block;
}

/* --- 4. Content Styling (Text & Button Container) --- */
.feature-content {
  padding: 20px;
  text-align: center;
  /* Important: Allows the content area to grow and push the button down */
  display: flex;
  flex-direction: column;
  flex-grow: 1; 
}

/* --- 5. Title & Paragraph Styling --- */
.feature-title {
  font-size: 1.5em;
  color: #333;
  margin-top: 0;
  margin-bottom: 10px;
}

.feature-para {
  font-size: 1em;
  color: #666;
  line-height: 1.5;
  margin-bottom: 20px;
  /* Pushes the button to the bottom when combined with flex-grow: 1 on .feature-content */
  flex-grow: 1; 
}

/* --- 6. CTA Button Styling (Bottom) --- */
.cta-button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1em;
  font-weight: bold;
  transition: background-color 0.3s ease;
  width: 100%; /* Make button full width */
}

.cta-button:hover {
  background-color: #0056b3;
}

/* --- 7. Responsiveness: Media Query --- */
@media (max-width: 992px) {
  /* On medium screens (tablets), switch to 2 columns */
  .feature-grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  /* On small screens (phones), switch to 1 column (stacking) */
  .feature-grid-container {
    grid-template-columns: 1fr;
  }
}

.red-text-28 {
	padding: 0px 10px;
	font-size: 28px;
	color: #cc0001;
}

.blue-text-28 {
	color: #061B6C;
	font-size:28px; 
	padding: 0px 10px;
}

.black-text-28 {
	color: #000;
	font-size:28px;
	padding: 0px 10px;
}
				
.red-text-24 {
	padding: 0px 10px;
	font-size: 24px;
	color: #cc0001;
}

.blue-text-24 {
	color: #061B6C;
	font-size:24px; 
	padding: 0px 10px;
}

.black-text-24 {
	color: #000;
	font-size:24px;
	padding: 0px 10px;
}

.red-text-20 {
	padding: 0px 10px;
	font-size: 20px;
	color: #cc0001;
}

.blue-text-20 {
	color: #061B6C;
	font-size:20px; 
	padding: 0px 10px;
}

.black-text-20 {
	color: #000;
	font-size:20px;
	padding: 0px 10px;
}

.red-text-18 {
	padding: 0px 10px;
	font-size: 18px;
	color: #cc0001;
}

.blue-text-18 {
	color: #061B6C;
	font-size:18px; 
	padding: 0px 10px;
}

.black-text-18 + ul {
	
	padding-left: 25px;
}

.black-text-20 + ul {
	
	padding-left: 35px;
}

.black-text-18 {
	color: #000;
	font-size:18px;
	padding: 0px 10px;
}