.carousel-container {
  max-width: 100%; /* Ensure the carousel container doesn't exceed the width of its parent */
  overflow: hidden; /* Hide overflow, if any */
  position: relative; /* Position relative to contain absolutely positioned elements */
  margin-top: 45px;
}

.carousel {
  display: flex; /* Display the slides in a horizontal line */
  transition: transform 1s ease-in-out;
}

.carousel-slide {
  position: relative; /* Make each slide take up full width of the carousel container */
  min-width: 100%; /* Make each slide take up full width of the carousel container */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.carousel-slide img {
  width: 100%; /* Make images take up the full width of their container */
  height: 400px; /* Set a fixed height to ensure all images are the same size */
  object-fit: cover; /* Ensure the images cover the element without stretching */
}

.carousel-text {
  position: absolute;
  bottom: 40px; /* Adjust as needed */
  width: 100%;
  text-align: center;
  color: white;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7); /* Add text shadow */
  font-family: "Raleway", sans-serif;
  font-weight: bold;
}

.carousel-text h2{
  font-family: "Audiowide", sans-serif;
}

.carousel-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  border: none;
  color: white;
  font-size: 2em;
  cursor: pointer;
  z-index: 1;
  transition: transform 0.3s ease; /* Smooth animation */
}

.carousel-button.left {
  left: 10px;
  background-color: rgba(255, 255, 255, 0);
}

.carousel-button.right {
  right: 10px;
  background-color: rgba(255, 255, 255, 0);
}

.carousel-button.left:hover {
  transform: translate(-8px, -50%); /* Moves left horizontally, stays vertically centered */
}

.carousel-button.right:hover {
  transform: translate(8px, -50%); /* Moves right horizontally, stays vertically centered */
}


.carousel-dots {
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 20px; /* Place the dots directly below the text or button */
  width: 100%;
}

.carousel-dot {
  width: 30px; /* Set a fixed width for the rectangle */
  height: 3px; /* Set a fixed height for the rectangle */
  border: none;
  margin: 0 5px;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background-color 0.3s ease;
  border-radius: 5px;
}

.carousel-dot.active {
  background-color: rgba(255, 255, 255, 0.8);
}

.carousel-dot:hover {
  background-color: rgba(255, 255, 255, 0.6);
}

/* Add the media query for responsive width 360px */
@media (max-width: 100px) {
  .horizontal-grid {
    flex-direction: column;
  }
}

/* Responsive Styling for Carousel Buttons and Dots */
@media (max-width: 1169px) {
  .carousel-button {
    font-size: 1.5em; /* Reduce button size */
  }

  .carousel-button.left {
    left: 10px; /* Adjust position */
  }

  .carousel-button.right {
    right: 10px; /* Adjust position */
  }

  .carousel-text {
    bottom: 120px; /* Adjust position for even smaller screens */
  }
  .carousel-dot {
    width: 20px; /* Reduce dot size */
    height: 3px; /* Maintain height */
  }
}

@media (max-width: 550px) {
  .carousel-button {
    font-size: 1em; /* Further reduce button size */
    padding: 5px; /* Adjust padding */
  }

  .carousel-button.left {
    left: 3px; /* Further adjust position */
  }

  .carousel-button.right {
    right: 3px; /* Further adjust position */
  }

  .carousel-text {
    bottom: 120px; /* Adjust position for even smaller screens */
  }

  .carousel-dot {
    width: 15px; /* Further reduce dot size */
    height: 2px; /* Adjust height */
  }
}

/* Learn-more button styling */
.learn-more-button {
  background-color: white;/* Button background color */
  color: #412B6C; /* Button text color */
  border: none; /* Remove border */
  padding: 10px 15px; /* Add padding */
  font-size: 1em; /* Font size */
  cursor: pointer; /* Pointer cursor */
  transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for both background and text color */
  margin-top: 10px; /* Margin at the top */
  border-radius: 50px; /* Rounded corners */
  font-family: "Quicksand", sans-serif;
  font-weight: bold;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5); /* Enhance shadow effect */
}

.learn-more-button:hover {
  color: white !important; /* Force text color to change on hover */
  background-color: #412B6C; /* Background color on hover */
}


/* Horizontal grid container */
.horizontal-grid {
  display: flex;
  justify-content: space-between;
  margin-top: 0px; /* Margin from the carousel */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  /* padding-left: 50px;
  padding-right: 50px; */
}

@media (max-width: 1040px) {
  .horizontal-grid {
    flex-direction: column;
  }

  .news-section2 {
    flex-direction: column;
  }

  .news-section2 .news-item {
    width: 100%; /* Make each news item take the full width */
    margin-bottom: 0px; /* Ensure there is some spacing between items */
  }

  /* Handle the images and content */
  .news-item img {
    width: 100%;
    height: auto;
    margin: 0 auto; /* Center the images */
  }

  .news-content {
    width: 100%;
    padding: 10px 0; /* Adjust padding for better spacing */
  }

  .news-content2 {
    width: 100%;
    padding: 10px 0; /* Adjust padding for better spacing */
  }


  .read-more-button {
    width: 180px;
    margin: 0 auto 10px; /* Center the button horizontally and add spacing */
  }
}

/* Ensure the horizontal-grid does not become more than 2 rows at any width less than 1240px */
@media only screen and (max-width: 1240px) {
  .horizontal-grid {
    flex-direction: column;
    padding-left: 0px;
    padding-right: 0px;
  }
  
  .news-section {
    flex-direction: column;
  }

  .news-section2 {
    flex-direction: column;
    padding-right: 0px;
  }

  .news-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 10px;
    box-shadow: none;
  }

  .news-item img {
    margin-left: 20px;
  }

  .news-image1 {
    width: 50%;
    height: auto;
    margin-right: 20px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .news-image2 {
    max-width: 50%;
    max-height: 80%;
    margin-right: 20px;
    border-radius: 20px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .news-content {
    flex: 1;
  }

  .news-content2 {
    flex: 1;
  }

  .read-more-button {
    width: 180px;
    height: 40px;
    margin-top: 10px;
    display: inline-block;
  }
}

.grid-item {
  flex: 1;
  margin-top: 15px; /* Margin between the grid items */
  padding-right: 15px;
  padding-left: 15px;
  background-color: #DADAE8; /* Background color for contrast */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Box shadow for a bit of depth */
  border-radius: 5px; /* Rounded corners */
  text-align: center;
  position: relative; /* Ensure grid items are positioned relative for attribution positioning */
}

.grid-item h2 {
  color: #411252; /* Heading color */
  font-family: "Quicksand", sans-serif;
  font-weight: bold;
}

.grid-item p {
  color: #333; /* Paragraph text color */
  font-family: "Quicksand", sans-serif;
  /* font-weight: bold; */
  text-align: left; /* Add this style */
}

/* Our Solutions button styling */
  .btn {
    position:relative;
    background: #DADAE8;
    color: #412B6C;
    width: 8rem;
    margin-bottom: 1rem;
    padding: 0.5rem 0;
    border: none;
    outline: none;
    font-size: 1rem;
    font-weight: bold;
    /* box-shadow: 
    0 0.7px 4px rgba(0,0,0,0.045),
    0 1.9px 11.1px rgba(0,0,0,0.065),
    0 4.5px 26.8px rgba(0,0,0,0.085),
    0 15px 89px rgba(0,0,0,0.13); */
    /* border-radius: 4px; */
    font-family: "Quicksand", sans-serif;
}

.btn::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 0.15rem;
    left: 0;
    bottom: 0;
    background: #412B6C;
}
.our-solutions-button{
  overflow: hidden;
}

.our-solutions-button::after{
  transform: translateY(3px);
  transition: transform 0.3s ease;
}

.our-solutions-button:hover::after{
  transform: translateY(0);
}

.learn-more-button2 {
  overflow: hidden;
}

.learn-more-button2::after{
  transform: translateY(3px);
  transition: transform 0.3s ease;
}

.learn-more-button2:hover::after{
  transform: translateY(0);
}

/* Bold Line Styles */
.bold-line {
  height: 55px;  /* Thickness of the line */
  background-color: #412B6C;  /* Background color of the line */
  margin-top: 20px;  /* Margin from the horizontal grid */
  display: flex;  /* Use flexbox to center items */
  align-items: center;  /* Center items vertically */
  justify-content: center;  /* Center items horizontally */
  font-family: "Raleway", sans-serif;
}

.bold-line h2 {
  color: white;  /* Set text color to white */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);  /* Add some shadow */
  margin: 0;  /* Remove default margins */
  font-size: 1.5em;  /* Adjust font size if necessary */
}

/* Horizontal Logos Container */
.horizontal-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Center the logos horizontally */
  align-items: center; /* Center the logos vertically */
  gap: 20px; /* Space between logos */
  padding: 20px 0; /* Padding above and below the logos */
  background-color: #DADAE8; /* Set background color */
}

.logo-box {
  background-color: white; /* White background for each logo */
  padding: 20px; /* Padding inside the white box */
  border-radius: 5px; /* Rounded corners for the boxes */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for the logo containers */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px; /* Adjusted height for uniform size */
  width: 100px; /* Adjusted width for uniform size */
}

.logo-box img {
  max-height: 100%; /* Adjust maximum height of the logos */
  max-width: 100%; /* Adjust maximum width of the logos */
  object-fit: contain; /* Contain the logos within the box without stretching */
}

.logo-box img[src="cisco.png"]{
  max-height:200%;
  max-width: 170%;
}

.logo-box img[src="ibm.png"]{
  max-height:100%;
  max-width: 170%;
}

.logo-box img[src="hp.png"]{
  max-height:100%;
  max-width: 100%;
}

.logo-box img[src="microsoft.png"]{
  max-height:100%;
  max-width: 115%;
}

.logo-box img[src="vmware.png"]{
  max-height:100%;
  max-width: 115%;
}

.logo-box img[src="altiris.png"]{
  max-height:100%;
  max-width: 115%;
}

.logo-box img[src="cisco.png"]{
  max-height:200%;
  max-width: 100%;
}

.logo-box img[src="apc.png"]{
  max-height:100%;
  max-width: 200%;
}

.logo-box img[src="autodesk.png"]{
  max-height:150%;
  max-width: 400%;
}

.logo-box img[src="avaya.png"]{
  max-height:110%;
  max-width: 200%;
}

.logo-box img[src="brocade.png"]{
  max-height:200%;
  max-width: 200%;
}

.logo-box img[src="citrix.png"]{
  max-height:100%;
  max-width: 105%;
}

.logo-box img[src="lenovo.png"]{
  max-height:130%;
  max-width: 200%;
}

.logo-box img[src="lantronix.png"]{
  max-height:100%;
  max-width: 140%;
}

.logo-box img[src="riverbed.png"]{
  max-height:100%;
  max-width: 115%;
}

.logo-box img[src="silver-peak.png"]{
  max-height:100%;
  max-width: 115%;
}

.logo-box img[src="juniper.png"]{
  max-height:100%;
  max-width: 125%;
}

.logo-box img[src="palo-alto.png"]{
  max-height:100%;
  max-width: 170%;
}

.logo-box img[src="infoblox.png"]{
  max-height:100%;
  max-width: 120%;
}

.logo-box img[src="systimax.png"]{
  max-height:100%;
  max-width: 110%;
}

.logo-box img[src="aruba1.png"]{
  max-height:100%;
  max-width: 115%;
}

.logo-box img[src="panduit.png"]{
  max-height:100%;
  max-width: 130%;
}

.logo-box img[src="polyhp.png"]{
  max-height:200%;
  max-width: 200%;
}

.logo-box img[src="jabra.png"]{
  max-height:150%;
  max-width: 115%;
}

/* Responsive Styles for logo-box */
@media only screen and (max-width: 800px) {
  .logo-box {
    height: 50px; /* Smaller height for smaller screens */
    width: 80px; /* Smaller width for smaller screens */
  }
}

@media only screen and (max-width: 600px) {
  .logo-box {
    height: 40px; /* Smaller height for smaller screens */
    width: 60px; /* Smaller width for smaller screens */
  }
}

/* See More Button Container */
.see-more-container {
  width: 100%; 
  display: flex;
  justify-content: center;
  padding-top: 20px; /* Space above the button */
}

.see-more-button {
  background-color: #5050FF; /* Button background color */
  color: white; /* Button text color */
  border: none; /* Remove border */
  padding: 10px 20px; /* Add padding */
  font-size: 1em; /* Font size */
  cursor: pointer; /* Pointer cursor */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Text shadow */
  transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
  border-radius: 5px; /* Rounded corners */
}

.see-more-button:hover {
  color: #412B6C; /* Text color on hover */
}

/* News Section */
.news-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px; /* Margin from the see more button */
}

.news-section h3{
  font-weight: normal;
}

.news-section > div {
  flex: 1;
  margin: 10px;
}

.news-section2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 15px; /* Margin from the see more button */
}

.news-section2 h3{
  font-weight: normal;
}

.news-section2 > div {
  flex: 1;
  margin: 10px;
}

.news-item {
  display: flex;
  flex-direction: column; /* Stack image and text vertically */
  align-items: center;
  margin-bottom: 20px;
  box-sizing: border-box; /* Ensure padding and border are included in width calculations */
  overflow: hidden; /* Hide any overflow content */
  background-color: #ebebeb;
  border-radius: 50px;
}

.news-item:hover{
  box-shadow: 0 0 15px rgba(65, 43, 108, 0.9), 0 0 30px rgba(65, 43, 108, 0.6); /* Fluorescent effect */
}

.news-item a {
  text-decoration: none;
}

.news-image1 {
  width: 65%; /* Adjust the width as needed */
  height: 35%;
  border-radius: 5px; /* Rounded corners for images */
  margin-bottom: 20px; /* Space between image and content */
  padding-top: 20px;
  padding-bottom: 30px;
}

.news-image1[src="cisco2.png"]{
  width: 200px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 40px;
}

.news-image2 {
  width: 100%; /* Adjust the width as needed */
  height: 60%;
  border-radius: 5px; /* Rounded corners for images */
  margin-bottom: 0px; /* Space between image and content */
}

.news-image2[src="aruba1.png"]{
  width: 200px; /* Adjust the width as needed */
  height:60px;
  padding-left: 100px;
  padding-right: 100px;
  padding-top: 60px;
  padding-bottom: 70px;
  border-radius: 5px; /* Rounded corners for images */
  margin-bottom: 0px; /* Space between image and content */
}

.news-image2[src="news2.jpg"]{
  width: 100%; /* Adjust the width as needed */
  height: 40%;
  border-radius: 0px; /* Rounded corners for images */
}

.news-image2[src="Ekahau-image.png"]{
  width: 120%; /* Adjust the width as needed */
  height: 40%;
  padding-bottom: 20px;
  border-radius: 5px; /* Rounded corners for images */
  margin-bottom: 0px; /* Space between image and content */
}

.news-image2[src="news1.jpg"]{
  width: 100%; /* Adjust the width as needed */
  height: 40%;
  border-radius: 0px; /* Rounded corners for images */
}

@media (min-width: 1706px){
  .news-image2[src="aruba1.png"]{
    padding-bottom: 75px;
  }
}

@media (min-width: 1036px){
  .news-content{
    padding-top: -10px;
  }
}

.news-content {
  padding:0px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
  font-family: "Quicksand", sans-serif;
  padding-bottom: 8%;
}

.news-content h3 {
  color: #412B6C; /* Title color */
  margin-top: 0;
  font-weight: normal;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: bold;
}

.news-content2 {
  padding:0px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
  font-family: "Quicksand", sans-serif;
  padding-bottom: 0px;
}

.news-content2 h3 {
  color: #412B6C; /* Title color */
  margin-top: 0;
  font-weight: normal;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: bold;
}

@media (max-width: 1169px) {
  .news-content h3 {
    font-size: 15px;
  }

  .news-content p {
    font-size: 12px;
  }
  .news-content2 h3 {
    font-size: 15px;
  }

  .news-content2 p {
    font-size: 12px;
  }
}

@media (max-width: 970px) {
  .news-content h3 {
    font-size: 14px;
  }

  .news-content p {
    font-size: 12px;
  }

  .news-content2 h3 {
    font-size: 14px;
  }

  .news-content2 p {
    font-size: 12px;
  }
}

.news-content p {
  color: #412B6C; /* Text color */
}

.news-content2 p {
  color: #412B6C; /* Text color */
}

.btn2 {
  position:relative;
  background: #292734;
  color: #DADAE8;
  margin-bottom: 2rem;
  padding: 1rem 0;
  border: none;
  outline: none;
  font-size: 1.2rem;
  font-weight: bold;
  /* box-shadow: 
  0 0.7px 4px rgba(0,0,0,0.045),
  0 1.9px 11.1px rgba(0,0,0,0.065),
  0 4.5px 26.8px rgba(0,0,0,0.085),
  0 15px 89px rgba(0,0,0,0.13); */
  font-family: "Quicksand", sans-serif;
}

.btn2::after{
  content: '';
  position: absolute;
  width: 100%;
  height: 0.175rem;
  left: 0;
  bottom: 0;
  background: #DADAE8;
}

.btn3 {
  position: relative;
  background: #412B6C;
  color: white;
  margin-bottom: 2rem;
  padding: 1rem 0;
  border: none;
  outline: none;
  font-size: 1.2rem;
  font-weight: bold;
  font-family: "Quicksand", sans-serif;
  box-shadow: 
    0 0.7px 4px rgba(0,0,0,0.045),
    0 1.9px 11.1px rgba(0,0,0,0.065),
    0 4.5px 26.8px rgba(0,0,0,0.085),
    0 15px 89px rgba(0,0,0,0.13);
}

.btn3::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 0.175rem;
  left: 0;
  bottom: 0;
  background: #00e1ff;
}

.more-news-button {
  overflow: hidden;
  padding: 10px 30px; /* Add padding */
  font-size: 1em; /* Font size */
  border-radius: 0px; /* Rounded corners */
}

.more-news-button::after {
  transform: scale(0,1);
  transition: transform 0.3s ease;
}

.more-news-button:hover::after {
  transform: scale(1,1);
}

.read-more-button::after {
  transform: translateY(4px);
  transition: transform 0.3s ease;
}

.read-more-button:hover::after {
  transform: translateY(0);
  border-radius: 5px; /* Rounded corners */
}

.read-more-button {
  display: block; /* Ensure block-level for centering with margin auto */
  padding: 10px 30px; /* Add padding */
  font-size: 1em; /* Font size */
  border-radius: 5px; /* Rounded corners */
  margin: 0 auto; /* Center the button */
  overflow: hidden;
  /* margin-bottom: -50px; */
}

/* Logo Slider Container */
.logo-slider-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #DADAE8; /* Set background color */
  padding: 20px 0; /* Padding above and below the logos */
}

.logo-slider {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.logo-slide {
  display: flex;
  justify-content: center; /* Center the logos horizontally */
  align-items: center; /* Center the logos vertically */
  gap: 20px; /* Space between logos */
  min-width: 100%;
  box-sizing: border-box;
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.logo-slider-button {
  position: absolute;
  top: 82%;
  transform: translateY(-50%);
  background-color: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 15px;
  cursor: pointer;
  font-size: 20px;
  transition: transform 0.3s ease;
}

.logo-slider-button.left:hover {
  transform: translate(-10px, -50%);
}

.logo-slider-button.right:hover {
  transform: translate(10px, -50%);
}

.logo-slider-button.left {
  left: 20px;
  background-color: #412B6C;
  border-radius: 30px;
  color: white;
}

.logo-slider-button.right {
  right: 20px;
  background-color: #412B6C;
  border-radius: 30px;
  color: white;
}

.logo-slider-button:hover {
  background-color: white;
  color: #412B6C;
}

.button-container {
  display: flex; /* Make the container a flex container */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically if needed */
  margin-top: 0.5%;
}

.see-more-button2 {
  width: 200px;
  height: 40px;
  border: none;
  color: #412B6C;
  background-color: #dadae800;
  border-radius: 4px;
  transition: all 0.3s ease-out; /* Transition effect added */
  font-size: 1rem;
  outline: none;
  position: relative;
  z-index: 1;
  margin-top: 0.5%;
  font-family: "Quicksand", sans-serif;
  font-weight: bold;
  animation: moveUpDown 2s infinite; /* Apply the animation */
}

@keyframes moveUpDown {
  0%, 100% {
      transform: translateY(0); /* Initial and ending state */
  }
  50% {
      transform: translateY(10px); /* Move the button down by 10px at the midpoint */
  }
}

/* Pause the animation on hover */
.see-more-button2:hover {
  animation-play-state: paused;
}

.see-more-button2::before {
  transition: 0.5s all ease;
  position: absolute;
  top: 0;
  left: 50%;
  right: 50%;
  bottom: 0;
  content: "";
  /* background-color: #DADAE8; */
  border-radius: 4px;
}

.see-more-button2:hover::before {
  transition: 0.5s all ease;
  left: 0;
  right: 0;
  opacity: 1;
  z-index: -1;
}



/* Responsive Styles */
/* @media only screen and (max-width: 940px) {
  .horizontal-grid:not(.news-section) {
    flex-direction: column; 
  }
} */

/* Responsive Styles */
@media only screen and (max-width: 900px) {
  .logo-slider-button {
    padding: 8px; /* Decrease padding for slider buttons */
  }

  .see-more-button2 {
    padding: 8px 16px; /* Decrease padding for the see more button */
  }

  .bold-line h2 {
    font-size: 1.2em; /* Decrease font size for smaller screens */
  }
}


@media only screen and (max-width: 1365px) {

  .news-section {
    flex-direction: column;
    padding-right: 0px;
  }

  .news-section2 {
    flex-direction: column;
    padding-right: 0px;
  }

  .news-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 10px;
    box-shadow: none; 
  }

  .news-item img{
    margin-left:20px;
  }

  .news-image1 {
    width: 50%; 
    height: auto;
    margin-right: 20px; 
    padding-left: 10px;
    padding-right: 10px;
  }

  .news-image2 {
    max-width: 50%; 
    max-height: 80%;
    margin-right: 20px; 
    border-radius: 20px;
    padding-left: 10px;
    padding-right: 10px;
  }
  
  .news-image1[src="cisco2.png"] {
    width: 30%;
     height: 10%;
     padding-left: 8%;
     padding-right: 2%;
     padding-bottom: 6%;
     padding-top: 6%;
   } 

  .news-image2[src="Ekahau-image.png"] {
   width: 40%;
    height: 10%;
    padding-top: 2.5%;
    padding-bottom: 2.5%;
  }

  .news-image2[src="news2.jpg"] {
    width: 40%;
    height: auto;
    padding-top: 3%;
    padding-bottom: 3%;
   }

   .news-image2[src="aruba1.png"] {
    width: 40%;
     height: 0%;
     padding-left: 0%;
     padding-right: 0%;
     padding-top: 9%;
     padding-bottom: 9%;
   }

   .news-image2[src="news1.jpg"] {
    width: 40%;
    height: 0%;
    padding-top: 3%;
    padding-bottom: 3%;
   }

  .news-content {
    flex: 1;
  }

  .news-content2 {
    flex: 1;
  }


  .read-more-button {
    width: 180px; 
    height: 40px; 
    margin-top: 10px;
    display: inline-block;
  }
}

@media only screen and (max-width: 1040px) {

  .news-section2 {
    padding-right: 20px;
  }
}

/* Responsive Styles for 539px or less */
@media only screen and (max-width: 687px) {
  .news-item {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    text-align: left; /* Keep text left-aligned */
  }

  .news-image {
    width: 80% !important; /* Increase the size of the image */
    max-width: none !important; /* Remove any max-width restrictions */
    height: auto !important; /* Maintain aspect ratio */
    margin: 10px 10px 10px 10px!important; /* Center the image */
    display: block; /* Ensure it is a block element */
  }

  .news-content {
    width: 100% !important; /* Make the content take full width */
  }

  .news-content2 {
    width: 100% !important; /* Make the content take full width */
  }

  /* Ensure the read-more button is aligned with the text */
  .read-more-button {
    margin: 10px auto 0; /* Center the button horizontally */
    display: block;
  }

  .news-image1[src="cisco2.png"] {
    width: 30%;
     height: 10%;
     padding-left: 30%;
   } 

   .news-image2[src="aruba1.png"] {
    width: 30%;
     height: 10%;
     padding-left: 30%;
   } 

   .news-image2[src="Ekahau-image.png"] {
    width: 100%;
     height: 10%;
     padding-left: 20%;
   } 

   .news-image2[src="news2.jpg"] {
    width: 100%;
     height: 10%;
     padding-left: 20%;
     padding-bottom: 0%;
   } 

   .news-image2[src="news1.jpg"] {
    width: 100%;
     height: 10%;
     padding-left: 20%;
     padding-bottom: 0%;
   } 
}

@media only screen and (max-width: 587px) {
  .news-image1[src="cisco2.png"] {
    width: 30%;
     height: 10%;
     padding-left: 30%;
   } 

   .news-image2[src="aruba1.png"] {
    width: 30%;
     height: 10%;
     padding-left: 30%;
   } 

   .news-image2[src="Ekahau-image.png"] {
    width: 100%;
     height: 10%;
     padding-left: 20%;
   } 

   .news-image2[src="news2.jpg"] {
    width: 100%;
     height: 10%;
     padding-left: 20%;
     padding-bottom: 0%;
   } 

   .news-image2[src="news1.jpg"] {
    width: 100%;
     height: 10%;
     padding-left: 20%;
     padding-bottom: 0%;
   } 
}

@media only screen and (max-width: 512px) {
  .news-image1[src="cisco2.png"] {
    width: 30%;
     height: 10%;
     padding-left: 27%;
   } 

   .news-image2[src="aruba1.png"] {
    width: 30%;
     height: 10%;
     padding-left: 27%;
   } 

   .news-image2[src="Ekahau-image.png"] {
    width: 100%;
     height: 10%;
     padding-left: 17%;
   } 

   .news-image2[src="news2.jpg"] {
    width: 100%;
     height: 10%;
     padding-left: 17%;
     padding-bottom: 0%;
   } 

   .news-image2[src="news1.jpg"] {
    width: 100%;
     height: 10%;
     padding-left: 17%;
     padding-bottom: 0%;
   } 
}

.carousel-text h2 {
  font-size: 30px;
}

.carousel-text p {
  font-size: 21px;
}

/* Media query for small screens */
@media (max-width: 1169px) {
  .carousel-text {
    bottom: 30px; /* Adjust bottom spacing for smaller screens */
  }

  .carousel-text h2 {
    font-size: 20px; /* Reduced font size for smaller screens */
  }

  .carousel-text p {
    font-size: 14px; /* Reduced font size for smaller screens */
  }

  .carousel-text button {
    font-size: 0.8em; /* Reduced font size for buttons on smaller screens */
    padding: 8px 12px; /* Adjust padding */
  }
}

/* Media query for screens smaller than 550px */
@media (max-width: 550px) {
  .carousel-text {
    bottom: 100px; /* Adjust bottom spacing for smaller screens */
    padding: 0 0px; /* Add some padding if required */
  }

  .carousel-text h2 {
    font-size: 20px; /* Further reduced font size for even smaller screens */
  }

  .carousel-text p {
    font-size: 10px; /* Further reduced font size for even smaller screens */
  }

  .carousel-text button {
    font-size: 0.5em; /* Reduced font size for buttons on even smaller screens */
    padding: 2px 10px; /* Adjust padding */
  }
}

@media (max-width: 447px) {
  .carousel-text {
    bottom: 100px; /* Adjust bottom spacing for smaller screens */
    padding: 0 0px; /* Add some padding if required */
  }

  .carousel-text h2 {
    font-size: 18px; /* Further reduced font size for even smaller screens */
  }

  .carousel-text p {
    font-size: 8px; /* Further reduced font size for even smaller screens */
  }

  .carousel-text button {
    font-size: 0.5em; /* Reduced font size for buttons on even smaller screens */
    padding: 2px 10px; /* Adjust padding */
  }
}

.carousel-text button {
  border: none;
  padding: 10px 15px;
  font-size: 1em;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
  margin-top: 10px;
}

.carousel-text button:hover {
  color: #412B6C;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}
/* Base styles for the news-header-box */
.news-header-box {
  flex: 1;
  color: white;
  margin: 10px;
  padding: 0px;
  padding-top: 5%;
  background-color: #292734; /* Background color for the box */
  border-radius: 50px; /* Rounded corners */
  text-align: center; /* Center the text inside the box */
  transition: transform 0.3s ease; /* Default transition */
  font-family: "Quicksand", sans-serif;
}

/* Animation keyframes for a less intense elastic bounce effect */
@keyframes elasticBounce {
  0% {
      transform: scale(1);
  }
  30% {
      transform: scale(1.1); /* Reduced maximum scale */
  }
  50% {
      transform: scale(0.95); /* Reduced minimum scale */
  }
  70% {
      transform: scale(1.05); /* Slightly less than maximum scale */
  }
  100% {
      transform: scale(1);
  }
}

/* Apply the hover effect using animation */
.news-header-box:hover {
  animation: elasticBounce 0.9s ease-in-out;
  animation-fill-mode: forwards; /* Ensure it retains the end state */
}

.news-header-box h3{
  font-size: 40px;
}

.news-header-box p{
  font-size: 18px;
}

@media only screen and (max-width: 900px) {
  .news-header-box {
    padding-top: 0;
  }
}

.attribution-link {
  position: absolute; /* Position the text */
  bottom: 5px; /* Adjust position from the bottom */
  right: 5px; /* Adjust position from the right */
  color: white; /* Text color */
  background: rgba(0, 0, 0, 0); /* Semi-transparent background */
  padding: 5px 10px; /* Padding around the text */
  border-radius: 5px; /* Rounded corners */
  font-size: 6px; /* Font size */
  text-decoration: none; /* Remove underline */
  z-index: 2; /* Ensure it appears above the image */
}

.attribution-link4 {
  position: absolute; /* Position the link absolutely within the container */
  top: 135px; /* Position it 10px from the bottom */
  right: 5px; /* Position it 10px from the right */
  color: white; /* Text color */
  background: rgba(0, 0, 0, 0); /* Semi-transparent background for contrast */
  padding: 3px 5px; /* Padding around the text */
  border-radius: 3px; /* Rounded corners */
  font-size: 6px; /* Font size */
  text-decoration: none; /* Remove underline */
  z-index: 2; /* Ensure it appears above the image */
}

@media (max-width: 4000px){
  .attribution-link4{
    top: 38%;
  }
}

@media (max-width: 3000px){
  .attribution-link4{
    bottom: 41%;
  }
}

@media (max-width: 2363px){
  .attribution-link4{
    top:36%;
  }
}

@media (max-width: 1518px){
  .attribution-link4{
    bottom: 182px;
  }
}

@media (max-width: 1433px){
  .attribution-link4{
    top: 35%;
  }
}

@media (max-width: 1364px){
  .attribution-link4{
    top: 78%;
    left:45px
  }
}

@media (max-width: 900px){
  .attribution-link4{
    top: 76%;
  }
}


@media (max-width: 800px){
  .attribution-link4{
    top: 72%;
  }
}

@media (max-width: 720px){
  .attribution-link4{
    top: 70%;
  }
}


@media (max-width: 686px){
  .attribution-link4{
    top: 10%;
    left: 58%;
    font-size: 3px;
  }
}

@media (max-width: 574px){
  .attribution-link4{
    top: 8%;
    left: 50%;
    font-size: 3px;
  }
}

@media (max-width: 283px){
  .attribution-link4{
    bottom: 190px;
    left: 27%;
  }
}

.attribution-link4b {
  position: absolute; /* Position the link absolutely within the container */
  top: 135px; /* Position it 10px from the bottom */
  right: 5px; /* Position it 10px from the right */
  color: white; /* Text color */
  background: rgba(0, 0, 0, 0); /* Semi-transparent background for contrast */
  padding: 3px 5px; /* Padding around the text */
  border-radius: 3px; /* Rounded corners */
  font-size: 6px; /* Font size */
  text-decoration: none; /* Remove underline */
  z-index: 2; /* Ensure it appears above the image */
}

@media (max-width: 4000px){
  .attribution-link4b{
    top: 38%;
  }
}

@media (max-width: 3000px){
  .attribution-link4b{
    bottom: 41%;
  }
}

@media (max-width: 2363px){
  .attribution-link4b{
    top:36%;
  }
}

@media (max-width: 1518px){
  .attribution-link4b{
    bottom: 182px;
  }
}

@media (max-width: 1433px){
  .attribution-link4b{
    top: 35%;
  }
}

@media (max-width: 1365px){
  .attribution-link4b{
    top: 82%;
    left:45px
  }
}

@media (max-width: 900px){
  .attribution-link4b{
    top: 80%;
  }
}

@media (max-width: 720px){
  .attribution-link4b{
    top: 78%;
  }
}


@media (max-width: 686px){
  .attribution-link4b{
    top: 10%;
    left: 65%;
    font-size: 3px;
  }
}

@media (max-width: 574px){
  .attribution-link4b{
    top: 8%;
    left: 60%;
    font-size: 3px;
  }
}

@media (max-width: 283px){
  .attribution-link4b{
    bottom: 190px;
    left: 27%;
  }
}

.attribution-link5 {
  position: absolute; /* Position the link absolutely within the container */
  top: 135px; /* Position it 10px from the bottom */
  right: 5px; /* Position it 10px from the right */
  color: white; /* Text color */
  background: rgba(0, 0, 0, 0); /* Semi-transparent background for contrast */
  padding: 3px 5px; /* Padding around the text */
  border-radius: 3px; /* Rounded corners */
  font-size: 6px; /* Font size */
  text-decoration: none; /* Remove underline */
  z-index: 2; /* Ensure it appears above the image */
}

@media (max-width: 4000px){
  .attribution-link5{
    top: 38%;
  }
}

@media (max-width: 3000px){
  .attribution-link5{
    bottom: 41%;
  }
}

@media (max-width: 2363px){
  .attribution-link5{
    top:36%;
  }
}

@media (max-width: 1518px){
  .attribution-link5{
    bottom: 186px;
  }
}

@media (max-width: 1433px){
  .attribution-link5{
    top: 35%;
  }
}

@media (max-width: 1365px){
  .attribution-link5{
    top: 80%;
    left:45px
  }
}

@media (max-width: 900px){
  .attribution-link5{
    top: 78%;
  }
}

@media (max-width: 850px){
  .attribution-link5{
    top: 78%;
    left: 8%;
  }
}

@media (max-width: 805px){
  .attribution-link5{
    top: 73%;
    left: 8%;
  }
}

@media (max-width: 720px){
  .attribution-link5{
    top: 70%;
    left: 10%;
  }
}

@media (max-width: 686px){
  .attribution-link5{
    top: 10%;
    left: 65%;
    font-size: 3px;
  }
}

@media (max-width: 574px){
  .attribution-link5{
    top: 8%;
    left: 60%;
    font-size: 3px;
  }
}

@media (max-width: 283px){
  .attribution-link5{
    bottom: 190px;
    left: 27%;
  }
}

/*  */
/* Default horizontal grid container */
.horizontal-grid1 {
  display: flex;
  justify-content: space-between;
  margin-top: 0px; /* Margin from the carousel */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  padding-left: 10px;
  padding-right: 10px;
}

/* Media query for responsiveness */
@media (max-width: 769px) {
  .horizontal-grid1 {
    flex-direction: column; /* Change to vertical stack */
  }

  .horizontal-grid1 .grid-item {
    width: 100%; /* Adjust width of items */
    margin-bottom: 20px; /* Adjust as necessary for spacing between items */
  }
}

@media (max-width: 1040px) {
  .news-image1[src="cisco2.png"]{
    padding-right: 7%;
  }

  .news-image2[src="aruba1.png"]{
    padding-right: 7%;
  }
}