@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

:root {
	--primary-color         : #003165;        /* Calming teal */
	--secondary-color       : #f2fafb;        /* Lighter tint of primary */
	--text-color            : #2c3e50;        /* Deep, readable slate blue */
	--accent-color          : #4db5be;        /* Warm coral accent */
	--white-color           : #ffffff;
	--divider-color         : #ffffff33;      /* Slightly stronger white divider */
	--dark-divider-color    : #2c3e501a;      /* Muted overlay divider */
	--error-color           : #f44336;        /* Material red for errors */
	--accent-font           : "Archivo", sans-serif;
	--default-font          : "DM Sans", sans-serif;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 16px; /* Base font size */
  line-height: 1.5; /* Better readability */
  color: #333; /* Dark gray text for better contrast */
  background-color: #f9f9f9; /* Light background */
  margin: 0;
  padding: 0;
}

/*------------------------------------------------------------------
 # header style
-------------------------------------------------------------------*/

.header-nav {
  background-color: #fdfdfd; /* Dark blue-gray background for contrast */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Light black shadow */
  position: fixed !important; /* Makes the navbar fixed at the top */
  top: 0; /* Aligns it at the top */
  left: 0;
  width: 100%; /* Stretches the navbar across the screen */
  z-index: 1000; /* Ensures it stays above other elements */
  }
  .navbar {
    display: flex;
    justify-content: center; /* Center-align all content */
    align-items: center; /* Center vertically */
    padding: 1rem;
    margin-left: 40px;
    background-color: #fff; /* Navbar background */
    border-bottom: 1px solid #ddd; /* Optional: Divider line */
  }
  .navbar .container {
    display: flex;
    justify-content: center; /* Center-align */
    align-items: center; /* Center items vertically */
    flex-wrap: wrap; /* Allows items to wrap on smaller screens */
    max-width: 1200px; /* Optional: limit container width */
    width: 100%;
  }
  #navlinks{
    margin-left: 100px;
    justify-content: end;
  }
  .header-nav .nav-item .nav-link {
    font-weight: 600;
    font-size: 15px;
    color: #111111 ;
    padding-left: 17px ;
    padding-right: 17px;
    text-decoration: none; /* Ensures no underline */
    
    
  }
  
  .header-nav .nav-item:hover .nav-link, .header-nav .nav-item.active .nav-link {
    color: #ffa200 !important;
  }
  
  @media (min-width: 1200px) {
    .navbar .dropdown-menu {
      display: block;
      height: 0;
      overflow: hidden;
      width: 430px;
      transition: 0.2s;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 0;
      background-color: transparent;
      z-index: 1;
      margin-left: 165px;
    }
    .navbar .dropdown-menu::after {
      position: absolute;
      content: "";
      height: 0;
      width: 100%;
      background-color: #ffffff;
      top: 0;
      left: 0;
      z-index: -1;
      transition: 0.3s ease-out;
      box-shadow: 0 10px 30px rgba(22, 28, 45, 0.1);
      transition-delay: padding 0.25s;
    }
    .navbar .dropdown-menu li {
      opacity: 0;
      visibility: hidden;
      transform: translateY(-5px);
    }
    .navbar .dropdown-menu li:first-child {
      margin-top: 15px;
    }
    .navbar .dropdown-menu li:last-child {
      margin-bottom: 15px;
    }
    .navbar .dropdown:hover .dropdown-menu {
      height: auto;
      overflow: visible;
    }
    .navbar .dropdown:hover .dropdown-menu::after {
      height: 100%;
    }
    .navbar .dropdown:hover .dropdown-menu li {
      opacity: 1;
      visibility: visible;
      transform: translateY(0px);
      transition: 0.25s;
      transition-delay: 0.2s;
    }
    .navbar .sub-dropdown {
      position: relative;
    }
    .navbar .sub-dropdown .dropdown-submenu {
      position: absolute;
      display: block;
      z-index: 2;
      width: 90%;
      left: 100%;
      top: -10px;
      height: 0;
      overflow: hidden;
      transition: 0.3s;
      background-color: transparent;
    }
    .navbar .sub-dropdown .dropdown-submenu::after {
      position: absolute;
      content: "";
      height: 0;
      width: 100%;
      background-color: #ffffff;
      top: 0;
      left: 0;
      z-index: -1;
      transition: 0.3s ease-out;
      box-shadow: 0 10px 30px rgba(22, 28, 45, 0.1);
      transition-delay: padding 0.25s;
    }
    .navbar .sub-dropdown .dropdown-submenu li {
      opacity: 0 !important;
      visibility: hidden !important;
      transform: translateY(-5px) !important;
      transition: 0s !important;
      transition-delay: 0s !important;
    }
    .navbar .sub-dropdown .dropdown-submenu li:first-child {
      margin-top: 10px;
    }
    .navbar .sub-dropdown .dropdown-submenu li:last-child {
      margin-bottom: 10px;
    }
    .navbar .sub-dropdown:hover .dropdown-submenu {
      height: auto;
      overflow: visible;
    }
    .navbar .sub-dropdown:hover .dropdown-submenu::after {
      height: 100%;
    }
    .navbar .sub-dropdown:hover .dropdown-submenu li {
      opacity: 1 !important;
      visibility: visible !important;
      transform: translateY(0px) !important;
      transition: 0.25s !important;
      transition-delay: 0.2s !important;
    }
  }
  .dropdown-menu {
    border: 0;
    margin-top: 0;
    padding: 0 8px;
  }
  
  .dropdown-submenu {
    list-style: none;
    display: none;
    padding: 0 8px;
    background-color: #ffffff;
  }
  
  .dropdown-item {
    padding: 6px 12px;
    font-weight: 600;
    font-size: 15px;
  }
  
  .sub-dropdown.active,
  .sub-dropdown.active > .dropdown-item,
  .sub-dropdown:hover > .dropdown-item,
  .dropdown-item.active,
  .dropdown-item:active,
  .dropdown-item:focus,
  .dropdown-item:hover {
    color: #096c6c;
    background-color: rgba(9, 108, 108, 0.08);
    border-radius: 5px;
  }
  
  .sub-dropdown.active > .dropdown-item {
    background-color: rgba(9, 108, 108, 0.02);
  }
  
  .dropdown-toggle::after {
    display: none;
  }
  
  @media (max-width: 1199px) {
    .dropdown-menu {
      border: 0;
      padding: 0;
      text-align: left !important;
      background: rgba(9, 108, 108, 0.05);
      border-radius: 6px;
    }
    .navbar .navbar-nav {
      margin-top: 15px;
      width: 280px;
      max-width: 100%;
      margin-right: auto;
      align-items: initial !important;
    }
    .navbar .nav-item {
      display: block;
      text-align: left;
    }
    .navbar .nav-link {
      padding: 8px 4px !important;
    }
    .navbar .dropdown-menu li:first-child {
      padding-top: 10px;
    }
    .navbar .dropdown-menu li:last-child {
      padding-bottom: 10px;
    }
    .navbar-collapse {
      position: fixed;
      justify-content: flex-end;
      background-color: #09212f;
      width: calc(100% - 30px);
      height: auto;
      max-height: calc(100% - 100px);
      z-index: 9999;
      border-radius: 3px;
      box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.1);
      padding: 5px 20px 28px;
      text-align: center;
      top: 90px;
      left: 15px;
    }
    .navbar-collapse.collapsing,
    .navbar-collapse.show {
      transition: all 0.2s ease-in-out;
      transition-property: opacity, transform;
      transform-origin: top;
    }
    .navbar-collapse.show {
      overflow-x: hidden;
      overflow-y: auto;
      opacity: 1;
      transform: scale(1);
    }
    .navbar-collapse.collapsing {
      opacity: 0;
      transform: scale(0.95);
    }
    .navbar-button {
      width: 280px;
      max-width: 100%;
      margin: 15px auto 0;
    }
    .dropdown-item {
      padding: 6px 18px;
      color: #fff;
    }
  }
  .navbar-toggler .nav-toggle-icon {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.4s;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
  .navbar-toggler .nav-toggle-icon .top {
    stroke-dasharray: 40 121;
  }
  .navbar-toggler .nav-toggle-icon .bottom {
    stroke-dasharray: 40 121;
  }
  .navbar-toggler .nav-toggle-icon.active {
    transform: rotate(45deg);
  }
  .navbar-toggler .nav-toggle-icon.active .top {
    stroke-dashoffset: -68px;
  }
  .navbar-toggler .nav-toggle-icon.active .bottom {
    stroke-dashoffset: -68px;
  }
  .navbar-toggler .nav-toggle-icon .line {
    fill: none;
    transition: stroke-dasharray 0.4s, stroke-dashoffset 0.4s;
    stroke: #333333;
    stroke-width: 5.5;
    stroke-linecap: round;
  }
  .logo{
    width: 140px;
  }
  .call-us-button {
    display: inline-block;
    padding: 5px 30px;
    font-size: 14px;
    font-weight: 600;
    color: #0c0c0c;
    background-color: #ffffff; /* Bright orange color */
    border-radius: 5px; /* Rounded edges for button */
    text-decoration: none;
    border: 1px solid black;
    margin-left: 20px; /* Add spacing between the nav items and button */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth hover effect */
  }
  
  .call-us-button:hover {
    background-color: #ffffff; /* Slightly darker orange on hover */
    transform: scale(1.05); /* Slight zoom effect */
    text-decoration: none;
  
  }

/* Hero Section */
.hero {
     margin-top: 70px;
    text-align: center;
    /* background-color: #e8fefb; */
    background-color: #f8ffff;
    /* background-image:url('../images/index/land_bc.avif'); */
    height: 90vh; /* Full viewport height */
    width: 100%;
    background-size: cover; /* Ensures the image covers the entire section */
    background-position: center center; /* Center the image */
    background-repeat: no-repeat; /* Prevent tiling */
    display: flex;
    align-items: center; /* Vertically center content */
    justify-content: center; /* Horizontally center content */
    position: relative;
    overflow: hidden;
    color: #000;
}

.hero h3{
  margin-top: 20px;
}

/* get a quote button */
/* Button Container */
.quote-button-container {
  text-align: center;
  margin-top: 20px;
}

/* Button Styling */
.quote-button {
  display: inline-block;
  background-color: #272626; /* Primary Blue Color */
  color: #fff; /* White Text */
  text-decoration: none; /* Remove underline */
  font-size: 16px; /* Font size */
  padding: 8px 16px; /* Button Padding */
  border-radius: 30px; /* Rounded edges */
  transition: all 0.3s ease; /* Smooth transition */
  font-family: 'Arial', sans-serif; /* Font style */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  font-weight: bold;
  margin-top: 20px;
}

/* Hover and Focus Effects */
.quote-button:hover,
.quote-button:focus {
  background-color: #ffffff;

  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
  text-decoration: none;
  outline: none;
}

/* Active State */
/* .quote-button:active {
  transform: translateY(0); 
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
} */
.quote-button i {
  margin-left: 8px;
  font-size: 16px;
}

.form-container {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Light shadow for a modern look */
  padding: 20px;
  max-width: 340px;
  width: 100%;
  text-align: center;

}

.form-container h2 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 5px;
  color: #333333;
}

.form-container p {
  font-size: 14px;
  color: #555555;
  margin-bottom: 7px;
}

/* Form Styling */
.hero-form .form-group {
  margin-bottom: 10px;
  text-align: left;
  
}
.col-4 img {
  width: 100%; /* Makes the image fit the full width of the column */
  height: auto; /* Maintains the image's aspect ratio */
  display: block; /* Removes any extra whitespace below the image */
  object-fit: contain; /* Ensures the entire image is visible within the column */
}


.hero-form label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: #555555;
  margin-bottom: 5px;
}

.hero-form input,
.hero-form select,
.hero-form textarea {
  width: 100%;
  padding: 5px 10px;
  font-size: 16px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  outline: none;
  transition: border-color 0.3s ease;
}

.hero-form input:focus,
.hero-form select:focus,
.hero-form textarea:focus {
  border-color: #ffa200; /* Focus color */
}

.hero-form textarea {
  resize: none; /* Disable resizing */
}

.submit-btn {
  background-color: #000000;
  color: #ffffff;
  padding: 6px 2px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
  display: inline-block;
  width: 100%;
}

.submit-btn:hover {
  transform: scale(1.05); /* Slight zoom effect */
}

/* General Styling for Hero Section */


/* Responsive Design for Tablet */
@media (max-width: 1024px) {
  .hero {
      flex-direction: column;
      padding: 50px 15px;
  }
  .hero .row {
      display: flex;
      flex-direction: column;
      justify-content: center;
  }

  .hero {
      width: 100%;
      text-align: center;
  }

  .hero .col-4 img {
      width: 80%;
      margin-top: 20px;
  }

  .form-container {
      width: 90%;
      max-width: 400px;
      margin-top: 20px;
      text-align: center;
  }

  .form-container h2 {
      font-size: 22px;
  }

  .form-container p {
      font-size: 14px;
  }

  .quote-button-container {
      text-align: center;
  }

  .quote-button {
      font-size: 14px;
      padding: 10px 20px;
  }
}

/* Mobile View (768px & below) */
@media (max-width: 768px) {
  .hero {
      flex-direction: column;
      padding: 40px 10px;
  }

  .hero h1 {
      font-size: 24px;
      margin-top: 10px;
  }

  .hero h5 {
      font-size: 16px;
  }

  .hero .col-4 {
      width: 100%;
      text-align: center;
  }

  .hero .col-4 img {
      width: 80%;
      margin-top: 20px;
  }

  .form-container {
      width: 100%;
      max-width: 90%;
      margin-top: 20px;
  }

  .form-container h2 {
      font-size: 20px;
  }

  .form-container p {
      font-size: 12px;
  }

  .hero-form .form-group {
      margin-bottom: 12px;
  }

  .hero-form input, .hero-form select, .hero-form textarea {
      font-size: 14px;
  }

  .submit-btn {
      font-size: 14px;
      padding: 12px;
  }
}



.transform{
  background-color: #fff;
}

/* Home about us */
.about-sec {
  padding: 30px 0;
  /* background-color: #f8f9fa; */
  background: url('../images/img1.png');
  /* background-size: cover; */
  background-size: 100%;
  background-repeat: no-repeat;
  
}

.about-sec .sub-heading {
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #080808; /* Gold color for sub-heading */
  margin-bottom: 10px;
}

.about-sec .heading {
  font-size: 36px;
  font-weight: 700;
  color: #0b0b0b; /* Bright text for heading */
  line-height: 1.5;
}

.about-sec .heading span {
  color: #0b0b0b; /* Bright text for heading */

  font-weight: bold;
}

.about-sec .text {
  font-size: 16px;
  line-height: 1.8;
  margin-top: 15px;
  color: #070707; /* Light gray text */ 
}

/* About Cards Styling */
.our-about-sec {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 10px 20px 10px 20px;
}

.about-card {
  background: #f1f1f1; /* Dark gray background */
  border-radius: 10px;
  padding: 20px 10px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.about-card:hover {
  transform: translateY(-10px);
  box-shadow: 0px 6px 20px rgba(14, 14, 14, 0.5); /* Golden glow on hover */
}

.about-card a {
  text-decoration: none;
  color: inherit;
}

.about-card .image-holder {
  width: 80px;
  height: 70px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background-color: #f5fffd; /* Gold circle */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36px;
  color: #000; /* Icon color */
  transition: background-color 0.3s ease-in-out;
}

.about-card:hover .image-holder {
  background-color: #d8d8d8; /* White background for icon on hover */
  color: #000001; /* Gold icon color */
}

.about-card-heading {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #131313;
  text-transform: capitalize;
}

.about-card-detail {
  font-size: 15px;
  line-height: 1.6;
  color: #1d1d1d; /* Light gray for details */
}

/* Responsive Styling */
@media (max-width: 768px) {
  .about-sec .heading {
      font-size: 28px;
  }

  .our-about-sec {
      margin-top: 30px;
  }

  .about-card {
      margin-bottom: 20px;
  }

  .about-card .image-holder {
      width: 70px;
      height: 70px;
      font-size: 30px;
  }
}

  /* background: linear-gradient(135deg, #fdfdfd, #f5f5f5); */

/* why choose Us */
/* Section Styling */
.how-we-help-sec {
  padding: 60px 0;
  /* background-color: #F9F4EE; */
  /* background-color: #ffffff; */
  background: url('../images/img.png');
  background-repeat: no-repeat;
  background-size: cover;
}

.how-we-help-sec .section-heading {
  font-size: 32px;
  font-weight: bold;
  color:#022f40;
}

.how-we-help-sec .section-description {
  font-size: 16px;
  color: #022f40;
}


.help-container {
  display: flex;
  flex-wrap: wrap; /* Allows wrapping of boxes if they don't fit in one row */
  gap: 20px; /* Space between boxes */
  justify-content: space-between; /* Evenly distributes space between boxes */
  margin: 20px 0;
  padding: 20px 40px 20px 40px;
}

.help-box {
  flex: 1 1 calc(25% - 20px); /* Four boxes side by side, accounting for gaps */
  max-width: calc(25% - 20px); /* Ensures they don't exceed 25% width */
  background: #f9f9f9; /* Light gray background */
  border: 1px solid #ddd; /* Subtle border */
  border-radius: 8px;
  text-align: center; /* Centers the text inside */
  padding: 20px; /* Adds spacing inside each box */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.help-box:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Increases shadow intensity */
}
/* Content Item Styling */
.help-item {
  margin-bottom: 20px;
}

.help-heading {
  font-size: 18px;
  font-weight: bold;
  color: #000275;
  
}

.how-we-help-sec .quote-button
{
  border-radius: 3px;

}
/* Button Styling */
.btn-primary {
  /* background-color: #007bff; */
  background: #003165;
    border-color: #eef1f3;
}

.btn-primary:hover {
  background-color: #ffffff;
  border-color: #1667bc;
}

/* Image Styling */
img.img-fluid {
  max-width: 100%;
  height: auto;
}

/* Responsive Design */
@media (max-width: 768px) {
  .section-heading {
      font-size: 28px;
  }

  .section-description {
      font-size: 16px;
  }

  .help-heading {
      font-size: 22px;
  }

  .help-description {
      font-size: 14px;
  }
}
@media (max-width: 768px) {
  .help-box {
    flex: 1 1 calc(50% - 20px); /* Two boxes per row on smaller screens */
    max-width: calc(50% - 20px);
  }
}

@media (max-width: 480px) {
  .help-box {
    flex: 1 1 100%; /* Stacks all boxes vertically on the smallest screens */
    max-width: 100%;
  }
}
/* what we do */
#what-we-do {
  /* background-color: #f9f9f9; */
  /* background: linear-gradient(to bottom, #f8f9fa, #e9ecef); */
  padding: 3rem 1rem;
  background-image: linear-gradient(45deg, rgba(28,46,66,1) 0%, rgba(21,103,121,1) 69%, rgba(0,128,128,1) 100%);
}


#what-we-do .section-heading {
  font-size: 2rem;
  font-weight: bold;
  /* color: #333; */
  color: white;
}

#what-we-do  .section-description {
  font-size: 0.8rem;
  /* color: #555; */
  max-width: 800px;
  margin: 0 auto 1rem;
  color: white;
}

.services-container {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.services-wrapper {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 1rem 0;
}

.service-card {
  flex: 0 0 calc(33.333% - 1rem); /* Show 3 cards at a time */
  background: #f5fafa;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.scroll-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #494949;
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 10;
  border-radius: 50%;
}

.scroll-button.left {
  left: 10px;
}

.scroll-button.right {
  right: 10px;
}

.scroll-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* softwares */
/* General Section Styling */
.sponsor-sec {
  padding-top: 60px;
  padding-bottom: 60px;
  background-color: #ffffff;

}

/* Heading and Subheading */
.sub-heading {
  font-size: 18px;
  color: #e74c3c;
  font-weight: 700;
  margin-bottom: 20px;
}

.heading {
  font-size: 36px;
  font-weight: 700;
  color: #333;
  margin-bottom: 15px;
}

.para_text {
  font-size: 18px;
  color: #777;
  max-width: 800px;
  margin: 0 auto 30px;
}

/* Standalone Row (Individual Products) */
.standalone-area {
  margin-top: 50px;
}

.standalone-row {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.stand-img-des {
  padding-left: 30px;
  padding-right: 30px;
}

.heading-text {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
}

.para_text {
  font-size: 16px;
  color: #777;
}

.btn-red {
  background-color: #e74c3c;
  color: white;
  padding: 10px 25px;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 30px;
  text-decoration: none;
}

.btn-red:hover {
  background-color: #c0392b;
}

/* Product Image Styling */
.blog-image img {
  max-width: 90%;
  height: auto;
  transition: transform 0.3s ease;
}

.blog-image:hover img {
  transform: scale(1.05); /* Slight zoom effect on hover */
}

/* Responsive Design */
@media (max-width: 767px) {
  .standalone-row {
      flex-direction: column-reverse;
  }

  .stand-img-des {
      padding-left: 0;
      padding-right: 0;
  }

  .heading {
      font-size: 30px;
  }

  .para_text {
      font-size: 14px;
  }

  .heading-text {
      font-size: 22px;
  }

  .btn-red {
      font-size: 14px;
      padding: 8px 20px;
  }
}


/* Testimonals */
/*Brand Item*/
.overflow-hidden {
    overflow: hidden; /* Ensures no overflow from the container */
}
/* Brand Carousel Items */
.brand-carousel {
    display: flex; /* Makes all items in a row */
    flex-wrap: wrap; /* Allows wrapping to the next line if necessary */
    justify-content: center; /* Centers the items horizontally */
    gap: 30px; /* Adds space between items */
}

.brand-item {
    width: 150px; /* Adjust the width of each brand item */
    height: 150px; /* Adjust the height of each brand item */
    background-color: #fff; /* White background for logos */
    display: flex; /* Align content inside */
    align-items: center; /* Vertically center the image */
    justify-content: center; /* Horizontally center the image */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
}

.brand-item:hover {
    transform: scale(1.1); /* Slight zoom on hover */}

/* Brand Icons */
.brand-icon {
    max-width: 80%; /* Ensures the logo fits properly */
    max-height: 80%; /* Maintains proper aspect ratio */
    object-fit: contain; /* Makes sure the logo scales proportionally */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .brand-item {
        width: 120px; /* Smaller width for mobile devices */
        height: 120px; /* Smaller height for mobile devices */
    }
}
@media (max-width: 576px) {
    .brand-carousel {
        gap: 15px; /* Reduce the gap on smaller screens */
    }
}

/* Services Section */
.services {

    padding: 40px 100px;
    text-align: center;
}

.service-cards {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.card {
    background: #fff;
    padding: 20px;
    width: 300px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.card i {
    font-size: 40px;
    color: #4caf50;
}

/* Footer */
/* Footer General Styling */
/* Footer Styles */
footer {
    background-color: #f8fcfc; /* Dark blue-gray background for contrast */
    color: #ffffff; /* White text for readability */
    padding-top: 60px;
}

footer a {
    color: #000102; /* Bright blue for links */
    text-decoration: none;
    transition: color 0.3s ease;
    font-weight: 400;
    font-size: 16px !important;
}

footer a:hover {
    color: #002c43; /* Darker blue on hover */
    text-decoration: none;
}

footer h5 {
    color: #2a2a2a; /* White for headings */
    font-weight: 600;
    margin-bottom: 20px;
}

footer p {
    color: #434343; /* Light gray for paragraph text */
    line-height: 1.8;
}

/* Social Icons */
footer .social-icon-outline {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border: 2px solid #035883;
    border-radius: 50%;
    text-align: center;
    color: #005179;
    margin-right: 10px;
    transition: all 0.3s ease;
}

footer .social-icon-outline:hover {
    background-color: #ffffff;
    color: #ffffff;
    border-color: #1edabb;
}

/* Footer Links */
footer .footer-links li {
    margin-bottom: 10px;
}


footer .footer-links li a {
    font-size: 14px;
    color: #003149;
    transition: color 0.3s ease;
}

footer .footer-links li a:hover {
    color: #006394;
}

/* Contact Info Icons */
footer .footer-links li i {
    color: #005c8a;
    margin-right: 2px;
    font-size: 24px;  
   
   
}

/* Footer Bottom */
footer .footer-bottom {
    background-color: #003165; /* Slightly darker footer bottom */
    color: #ffffff; /* Light gray text */
    padding: 20px 0;
    border-top: 1px solid #2a3144; /* Subtle top border */
    text-align: center;
}

footer .footer-bottom a {
    color: #00aaff;
    font-weight: 500;
}

footer .footer-bottom a:hover {
    color: #0088cc;
}

  .scroll-to-top-btn {
    bottom: 20px;
    right: 33px;
    z-index: 9999;
    padding: 3px;
    border-radius: 2px;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease-out;
  }
  @media (max-width: 575px) {
    .scroll-to-top-btn {
      right: 15px;
    }
    .scroll-to-top-btn svg {
      height: 25px;
      width: 25px;
    }
  }
  
  .scroll-to-top-btn.show {
    opacity: 1;
    visibility: visible;
    bottom: 33px;
  }
  @media (max-width: 575px) {
    .scroll-to-top-btn.show {
      bottom: 15px;
    }
  }
  /*# sourceMappingURL=style.css.map */
  


  /* General Styles */
  .blog-image {
    position: relative;
    z-index: 2;
}

.blog-image a {
    position: relative;
    z-index: 3;
}


/* Heading Box */
.heading-box {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  color: #1E3A8A;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  height: 100%; /* Ensure height consistency */
}

.heading-box h2 {
  font-size: 1.8rem;
  font-weight: bold;
  margin: 0;
}

/* Reason Item */
.webdesign_reason {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 15px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  height: 100%; /* Ensure equal height */
  margin-bottom: 0px; /* Remove extra margin */
  border: 1px solid #003165;
}

.webdesign_reason:hover {
  transform: translateY(-5px);
}

/* Icon Styling */
.webdesign_reason .icon {
  font-size: 1.8rem;
  color: #1E3A8A;
}

/* Text Styling */
.webdesign_reason h4 {
  font-size: 1.2rem;
  color: #333;
  margin-bottom: 5px;
}

.webdesign_reason p {
  font-size: 1rem;
  color: #666;
}

/* Add Space Between Rows */
.mt-4 {
  margin-top: 1.5rem; /* Adjust as needed */
}
.faq_btn-primary{
  background-color: #003165 !important;
  color: #fff;
  border: 1px solid #003165;
}
.faq_btn-primary:hover{
  color: #003165;
  background-color: #ffffff !important;
  border: 1px solid #003165;

}
/* Responsive */
@media (max-width: 768px) {
  .webdesign_why-choose-us-section {
    padding: 40px 20px;

  }
  .heading-box h2 {
      font-size: 1.5rem;
  }

  .webdesign_reason h4 {
      font-size: 1.1rem;
  }

  .webdesign_reason p {
      font-size: 0.9rem;
  }
}

/* Services Section */
.webdesign_services-section {
  display: flex;
  justify-content: space-around;
  background: #eff8f8;
  padding: 20px;
  text-align: center;
}

.webdesign_service {
  display: flex;
  align-items: center;
  gap: 10px;
}

.webdesign_service img {
  width: 40px;
  height: 40px;
}

.webdesign_service p {
  font-size: 1.1rem;
  color: #333;
  font-weight: bold;
}

/* Responsive */
@media (max-width: 768px) {
  .webdesign_services-section {
      flex-direction: column;
      gap: 15px;
      
      
  }
}

/* Types Section */
.webdesign_types-section {
  padding: 60px 0;
  background: linear-gradient(to bottom right, #0072bb, #0d1d41);
}

.webdesign_types-section h2 {
  font-size: 2.5rem;
  font-weight: bold;
  color: white;
  margin-bottom: 30px;
}
.top-bar{
  background-color: #002c43 !important;
}
.social-icons a{
  padding: 10px !important;
}

/* Card Styling */
.webdesign_type-card {
  text-align: center;
  padding: 20px;
  background: rgb(236 245 245);
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  margin-bottom: 20px;
  height: 220px;
}

.webdesign_type-card img {
  width: 60px;
  height: auto;
  margin-bottom: 15px;
}

.webdesign_type-card h3 {
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.webdesign_type-card p {
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
}

/* Hover Effect */
.webdesign_type-card:hover {
  transform: translateY(-5px);
  border-color: #4c6daf;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
  .col-md-4 {
      width: 50%; /* Show 2 in a row on tablets */
      margin-bottom: 20px;
  }

}

@media (max-width: 768px) {
  .col-md-4 {
      width: 100%; /* Show 1 in a row on smaller screens */
      margin-bottom: 20px;
  }
  .webdesign_types-section {
    padding: 40px 20px;
  }
}


.webdesign_section {
  padding: 80px 20px;
  background-color: #e7e6e6;
}

.webdesign_container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: auto;
  gap: 40px;
}

.webdesign_image img {
  width: 500px;
  height: auto;
  border-radius: 8px;
}

.webdesign_content {
  max-width: 600px;
}

.webdesign_content h2 {
  font-size: 2.5rem;
  color: #333;
  margin-bottom: 15px;
}

.webdesign_services-list {
  list-style-type: none;
  padding: 0;
}

.webdesign_services-list li {
  font-size: 1.2rem;
  color: #555;
  margin-bottom: 8px;
  padding-left: 20px;
  position: relative;
}

.webdesign_services-list li::before {
  content: '✔';
  color: #00b894;
  position: absolute;
  left: 0;
  top: 0;
}

.webdesign_highlights {
  margin-top: 20px;
}

.webdesign_highlights span {
  display: inline-block;
  background-color: #eee;
  padding: 8px 12px;
  font-size: 1rem;
  margin-right: 10px;
  border-radius: 4px;
  color: #333;
}

.webdesign_cta {
  margin-top: 20px;
}

.webdesign_btn {
  display: inline-block;
  padding: 12px 24px;
  background-color: #4caf50;
  color: #fff;
  text-decoration: none;
  font-size: 1.2rem;
  border-radius: 6px;
  margin-right: 10px;
  transition: background 0.3s ease;
}

.webdesign_btn:hover {
  background-color: #43a047;
}

.webdesign_btn.whatsapp {
  background-color: #25d366;
}

.webdesign_btn.whatsapp:hover {
  background-color: #1ebe57;
}

/* Responsive */
@media (max-width: 768px) {
  .webdesign_container {
      flex-direction: column;
      text-align: center;
  }
  
  .webdesign_image img {
      max-width: 80%;
      margin-bottom: 20px;
  }
  
  .webdesign_highlights span {
      display: block;
      margin-bottom: 8px;
  }
}

/* Discover Section */
.webdesign_discover-section {
  padding: 80px 40px;
  background-color: #e1eaebba;
}

.webdesign_container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: auto;
  gap: 40px;
}

/* Left Side Content */
.webdesign_left-content {
  max-width: 500px;
}

.webdesign_left-content h2 {
  font-size: 2.5rem;
  color: #333;
  margin-bottom: 15px;
}

.webdesign_left-content p {
  font-size: 1.2rem;
  color: #555;
  line-height: 1.5;
  margin-bottom: 20px;
}

.webdesign_image {
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Right Side Cards */
.webdesign_right-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.webdesign_card {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  text-align: left;
  border-left: 4px solid #33b097;
}

.webdesign_card h3 {
  font-size: 1.4rem;
  color: #333;
  margin-bottom: 10px;
}

.webdesign_card p {
  font-size: 1rem;
  color: #666;
}

.webdesign_card:hover {
  transform: translateY(-5px);
  border-left-color: #80c0ff;
}

/* Responsive */
@media (max-width: 992px) {
  .webdesign_container {
      flex-direction: column;
      text-align: center;
  }

  .webdesign_left-content,
  .webdesign_right-cards {
      max-width: 100%;
  }

  .webdesign_image {
      width: 80%;
      margin-bottom: 20px;
  }

  .webdesign_right-cards {
      grid-template-columns: 1fr;
  }
}

/* CTA Section */
.webdesign_cta-section {
  padding: 60px 20px;
  background: url('../images/webdesign/cta.png');
  color: #edfafd;
  text-align: center;
}

.webdesign_cta-content h2 {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 15px;
}

.webdesign_cta-content p {
  font-size: 1.2rem;
  margin-bottom: 25px;
  line-height: 1.5;
}



/* Responsive */
@media (max-width: 768px) {
  .webdesign_cta-section {
      padding: 40px 20px;
  }

  .webdesign_cta-content h2 {
      font-size: 2rem;
  }

  .webdesign_cta-btn {
      padding: 12px 24px;
      font-size: 1rem;
  }
}


/* General Section Styling */
.webdesign_faq-section {
  padding: 60px 0;
  background-color: #f9f9f9;
}

.webdesign_section-heading {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: #333;
  font-weight: bold;
}

/* FAQ Styling */
.faq-item {
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  overflow: hidden;
  background-color: #ffffff;
  transition: background-color 0.3s ease;
}

.faq-item.active {
  background-color: #e9f5ff; /* Highlight background when active */
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  font-size: 1.2rem;
  font-weight: bold;
  color: #0056b3;
  cursor: pointer;
  background-color: #f1f1f1;
  transition: background-color 0.3s ease;
}

.faq-question:hover {
  background-color: #e3e3e3;
}

.faq-answer {
  font-size: 1rem;
  color: #666;
  padding: 15px;
  display: none;
}

.faq-item i {
  font-size: 1rem;
  transition: transform 0.3s ease;
}

.faq-item.active i {
  transform: rotate(180deg);
}

/* Form Styling */
.form-heading {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: #333;
  font-weight: bold;
}

.contact-form .form-control {
  margin-bottom: 15px;
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 10px;
}

.faq_btn-primary {
  background-color: #0056b3;
  /* background: linear-gradient(45deg, #ff8c00, #ff0080); */
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s ease;
  width: 100%;
  margin-top: 20px;
}

.btn-primary:hover {
  background-color: #003d82;
}

/* Responsive Design */
@media (max-width: 768px) {
  .faq-section {
    padding: 40px 0px;
  }
}

/* Section Styling */
.webdesign_projects-section {
  padding: 60px 0;
  background-color: #f9f9f9;
}

.webdesign_section-heading {
  text-align: center;
  font-size: 2.5rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 40px;
}

/* Project Item Styling */
.webdesign_project-item {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: 20px;
  transition: transform 0.3s ease;
}

.webdesign_project-item img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 10px;
  transition: transform 0.3s ease;
}

/* Hover Effect */
.webdesign_project-item:hover img {
  transform: scale(1.1);
}

.webdesign_project-item:hover {
  transform: translateY(-5px);
}

/* Project Info Overlay */
.webdesign_project-info {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 15px;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  color: #ffffff;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.webdesign_project-item:hover .webdesign_project-info {
  opacity: 1;
}

.webdesign_project-info h3 {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 5px;
}

.webdesign_project-info p {
  font-size: 1rem;
  margin-bottom: 0;
}

/* Responsive Styling */
@media (max-width: 992px) {
  .webdesign_project-item img {
      height: 180px;
  }
}

@media (max-width: 768px) {
  .webdesign_project-item img {
      height: 200px;
  }
  .webdesign_hero {
    flex-direction: column;
    text-align: center;
    padding: 80px 20px 100px 20px !important;
}
.why-social{
    padding: 20px !important;
}
.why-content h2{
   font-size: 24px !important; 
}


}
.industry-item img{
  width: 80px;
}
/* Why Social Media Section */
.why-social {

  flex-direction: row;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 50px 160px; 

}
.why-content {
  text-align: left;
  padding: 20px;
  max-width: 600px;
}
.why-content h2 {
  font-size: 2.5rem;
  color: #002266;
  margin-bottom: 20px;
  font-weight: 600;
}
.why-content p {
  font-size: 1.2rem;
  margin-bottom: 10px;
  line-height: 1.6;
}
.why-image {
  flex: 1;
  text-align: center;
}
.why-image img {
  max-width: 90%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Custom Blue CTA Button */
.cta-btn{
  background-color: #003165; /* Deep Blue */
  color: #ffffff;
  padding: 12px 30px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.2s ease;
  box-shadow: 0 4px 12px rgba(30, 58, 138, 0.5);
}

/* Hover Effect */
.cta-btn:hover {
  background-color: #1E3A8A;/* Lighter Blue */
  transform: translateY(-2px);
  color: whitesmoke;
  text-decoration: none;
}

/* Responsive */
@media (max-width: 768px) {
  .webdesign_cta-btn.custom-blue {
      padding: 10px 24px;
      font-size: 0.9rem;
  }
}
/* Industry Section Styling */
.industry-section {
  padding: 80px 0;
  background-color: #e6f9ff;
  text-align: center;
}


/* Heading Styling */
.industry-section h2 {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 30px;
}

.industry-section h2::after{
  content: '';
    display: block;
    width: 50px;
    height: 3px;
    background: #0056b3;
    margin: 8px auto 0;
    border-radius: 2px;
}

/* Industries List */
.industries {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 0;
  margin: 0;
}



/* Individual Industry Item */
.industry-item {
  display: flex;
  align-items: center;
  padding: 25px;
  border-radius: 8px;
  transition: transform 0.3s ease-in-out;
}

/* Icon Styling (Left Side) */
.industry-item img {
  width: 60px;  /* Adjust size */
  height: 60px;
  margin-right: 15px;
}

/* Text Styling (Right Side) */
.industry-item p {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  text-align: left;
}

/* Hover Effect */
.industry-item:hover {
  transform: translateY(-5px);
}

/* .industry-section{
  padding: 60px;
  background-color: #ddd;
}
.industry-section h2{
    font-size: 34px;
    text-align: center;
    margin-bottom: 20px;
} */

@media (max-width: 768px) {
  .navbar{
    justify-content: space-between;
  }
  #navlinks{
    margin-left: 0px;
  }
  .header-nav .nav-item .nav-link {
    color: white;
  }
  nav ul li {
    padding: 0px;
}
.dropdown-menu .col-6{
  max-width: 100% !important;
}
.call-us-button {
  display: none;
}
header{
  padding-top: 0px !important;
}
.navbar{
  padding: 5px !important;
}
.banner{
  margin-top: 0px;
  padding: 10px;
}
.display-4{
  font-size: 2.4rem !important;
}
.form-container{
  display: none;
}
.who_we_are {
  padding: 40px 10px;
}
.who_we_are h1::after{
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  background: rgb(148, 239, 231);
  margin: 8px auto 0px;
  border-radius: 2px;
}
img.img-fluid{
  margin-top: 10px;
}
.excellence{
  padding: 40px 0px !important;
}
.section-title{
  font-size: 20px;
}
.industry-item{
  padding: 10px;
}
.icon-box{
  padding: 15px;
}
.col-md-4 {
  margin-top: 0px;
  margin-bottom: 0px;
}
.webdesign_why-choose-us-section .col-md-4{
  margin-bottom: 20px;
}

.why-content h2{
  text-transform: none;
}

.webdesign_discover-section {
  padding: 40px 20px;
}
.blue-section{
  border-radius: 0px;
}
}
@media (max-width: 768px) {
  .flip-card-inner {
      transform: none !important; /* Ensures no flipping */
  }

  .flip-card:hover .flip-card-inner {
      transform: none !important; /* Prevents flip on hover */
  }

  .flip-card-back {
      display: none; /* Hides the back side on mobile */
  }
  .know_more_button{
    display: block !important;
    color: #fff;
    cursor: pointer;
    border-color: #007bff;
    font-weight: 400;
    text-align: center;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    background-color: rgb(0, 56, 116) !important;
    text-decoration: none !important;
  }
}

/* Common Styles */
.know_more_button{
  display: none;
}
.quote-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #003165; /* Professional Blue */
  color: white;
  font-size: 24px;
  font-weight: bold;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 0px;
  position: fixed;
  z-index: 1000;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease-in-out;
}

/* Desktop Version: Fixed Right (Middle) */
@media (min-width: 992px) {
  .quote-button {
      right: -10px;
      top: 50%;
      transform: translateY(-50%);
      writing-mode: vertical-rl; /* Vertical Text */
      text-orientation: mixed;
      padding: 40px 15px;
  }
}

/* Mobile Version: Fixed Bottom */
@media (max-width: 991px) {
  .quote-button {
      bottom: 0px;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      text-align: center;
  }
  footer{
    padding-bottom: 50px;
  }
  .whats-app{
    bottom: 60px !important;
  }
  .webdesign_types-section h2 {
    font-size: 2rem;
  }
}

/* Hero Section */
.webdesign_hero {
  display: flex;
  text-align: center;
  justify-content: center !important;
  padding: 140px 100px 222px 140px;
  margin-top: 80px;
  background: rgba(137, 136, 136, 0.65);
  background-blend-mode: overlay;  
  background-size: cover;
}

/* Text Content */
.webdesign_hero-content {
  max-width: 100%;
  text-align: left;
}

.webdesign_hero h1 {
  font-size: 3rem;
  margin-bottom: 20px;
  color: #fff;
}

.webdesign_hero p {
  font-size: 1.4rem;
  margin-bottom: 20px;
  color: #fff;

}



.webdesign_hero {
  position: relative;
  width: 100%;
  height: 100vh; /* Full viewport height */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: white;
  display: flex;
  align-items: center; /* Vertically center content */
}

.webdesign_hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(220, 220, 234, 0.2); /* Black overlay */
  z-index: 1;
}

.webdesign_hero-content {
  position: absolute;
  left: 8%; /* Force content to the left */
  max-width: 550px; /* Limit width */
  z-index: 2;
}

.webdesign_hero-content h1 {
  font-size: 2.8rem;
  margin-bottom: 20px;
  color: #74d2e7;
}

.webdesign_hero-content p {
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 20px;
}

.cta-btn {
  display: inline-block;
  padding: 12px 24px;
  background: #003165; /* CTA button color */
  color: white;
  font-size: 1rem;
  text-decoration: none;
  border-radius: 5px;
  transition: background 0.3s ease;
}

.cta-btn:hover {
  background: rgb(236 245 245);
  color: #003165;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .webdesign_hero-content {
      left: 5%; /* Keep content to the left on small screens */
      max-width: 90%;
  }
}

.col-lg-5 {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}

.section-title1 {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

.gradient-text {
  background: #003165;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-left {
  text-align: left;
  /* Adjust left padding for better alignment */
}

iframe {
  width: 100%;
  height: 450px;
  border: 0;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .section-title1 {
      font-size: 24px;
  }

  iframe {
      height: 350px;
  }
}

@media (max-width: 480px) {
  .section-title1 {
      font-size: 20px;
  }

  iframe {
      height: 300px;
  }
}


/* Video Section */
.video-editing {
  text-align: center;
}

/* Video Wrapper */
.video-wrapper {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.video-thumbnail {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  transition: 0.3s ease-in-out;
}

.video-wrapper:hover .video-thumbnail {
  filter: brightness(0.7);
}

/* Play Button */
.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s ease-in-out;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

/* Play Icon - Triangle */
.play-icon::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 20px solid white;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}

/* Hover Effect */
.video-wrapper:hover .play-icon {
  background: rgba(28, 141, 175, 0.8);
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
  transform: translate(-50%, -50%) scale(1.1);
}

.video-wrapper:hover .play-icon::after {
  border-left-color: white;
}

/* Modal Video */
.centered-video {
  width: 70%;
  height: auto;
  display: block;
  margin: auto;
  border-radius: 10px;
}

/* Remove Extra Video Controls */
video::-webkit-media-controls-fullscreen-button,
video::-webkit-media-controls-toggle-closed-captions-button,
video::-webkit-media-controls-volume-slider {
  display: none !important;
}

.festival-posters {
  text-align: center;
  padding: 60px 20px;
  background-color: #f9f9f9;
}

.section-title {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 30px;
  color: #333;
}

.posters-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.poster {
  background: #fff;
  border-radius: 15px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease-in-out;
  cursor: pointer;
}

.poster:hover {
  transform: translateY(-5px);
}

.poster img {
  width: 100%;
  height: auto;
  display: block;
}

/* Lightbox Styles */
.lightbox {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.lightbox-content {
  max-width: 60vw;  /* Image takes up to 60% of viewport width */
  max-height: 70vh; /* Image takes up to 70% of viewport height */
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(255, 255, 255, 0.2);
}

.close {
  position: absolute;
  top: 20px;
  right: 40px;
  font-size: 35px;
  color: white;
  cursor: pointer;
  transition: 0.3s;
}

.close:hover {
  color: #f00;
}

@media (max-width: 768px) {
  .lightbox-content {
      max-width: 90vw; /* Larger size for smaller screens */
      max-height: 80vh;
  }
}

/* General Styles */
.poster-section {
  text-align: center;
  padding: 80px;
}

.section-title {
  font-size: 2rem;
  margin-bottom: 20px;
}

/* Flexbox Container */
.poster-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* Individual Poster Styles */
.poster {
  width: 30%; /* Each poster takes 30% of the row */
  max-width: 350px; /* Maximum width to prevent too large posters */
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
}

.poster:hover {
  transform: scale(1.05);
}

.poster-img {
  width: 100%;
  display: block;
  cursor: pointer;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .poster {
      width: 45%; /* 2 in a row for medium screens */
  }
}

@media (max-width: 768px) {
  .poster {
      width: 100%; /* 1 in a row for small screens */
  }
}

/* Lightbox */
.lightbox {
  display: none ;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.lightbox-content {
  max-width: 60vw;
  max-height: 70vh;
  border-radius: 10px;
}

.close {
  position: absolute;
  top: 20px;
  right: 40px;
  font-size: 35px;
  color: white;
  cursor: pointer;
  transition: 0.3s;
}

.close:hover {
  color: #f00;
}

.whatsapp-icon {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 50px;
  height: 50px;
  background-color: #25D366; /* WhatsApp green */
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.whatsapp-icon:hover {
  transform: scale(1.1);
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .footer {
      flex-direction: column;
      text-align: center;
  }

  .footer-logo,
  .footer-content {
      width: 100%;
      margin-bottom: 15px;
  }
}

.social-icon-outline i {
  font-size: 24px;  /* Adjust icon size */
  width: 30px;
  height: 20px;
  line-height: 40px;
  /* text-align: center; */
  border-radius: 50%; /* Make it circular */
 /* WhatsApp green */
  /* color: white; */
  /* display: inline-flex; */
  justify-content: center;
  align-items: center;
}