* {
    font-family: 'Teko', sans-serif;

}

ul {
  color: #444343;
}

a {
  text-decoration: none !important;
}


/* Small devices (mobile phones, portrait mode) */
@media (max-width: 576px) {
  ul {
      font-size: 17px;
  }
}

/* Medium devices (tablets, landscape mode) */
@media (min-width: 577px) and (max-width: 768px) {
  ul {
      font-size: 17px;
  }
}

/* Large devices (small desktops) */
@media (min-width: 769px) and (max-width: 992px) {
  ul {
      font-size: 17px;
  }
}

/* Extra large devices (large desktops, wide screens) */
@media (min-width: 993px) and (max-width: 1200px) {
  ul {
      font-size: 17px;
  }
}

/* Ultra-wide screens */
@media (min-width: 1201px) {
  ul {
      font-size: 17px;
  }
}

/* Small devices (mobile phones, portrait mode) */
@media (max-width: 576px) {
  body p {
      font-size: 16px;
  }
}

/* Medium devices (tablets, landscape mode) */
@media (min-width: 577px) and (max-width: 768px) {
  body p {
      font-size: 16px;
  }
}

/* Large devices (small desktops) */
@media (min-width: 769px) and (max-width: 992px) {
  body p {
      font-size: 15px;
  }
}

/* Extra large devices (large desktops, wide screens) */
@media (min-width: 993px) and (max-width: 1200px) {
  body p {
      font-size: 15px;
  }
}

/* Ultra-wide screens */
@media (min-width: 1201px) {
  body p {
      font-size: 15px;
  }
}
/* General Header Styles */
nav {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: 0px 4px 8px rgb(0, 0, 0); /* Adds subtle shadow */
}

.navbar {
  background-color: #070707;
  transition: background-color 0.5s ease, box-shadow 0.5s ease;
}


/* Navigation Links */
.navbar-nav .nav-item.active {
  font-weight: 10px ;
}

.nav-item.active {
  font-weight: 10px;
}

.navbar-nav .nav-link {
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: color 0.3s ease;
}

.navbar-nav .nav-link :hover {
  color: #ff0000;
 
}

/* Default Background */
.default-bg {
  position: fixed;
  top: 0;
  background: rgb(0, 0, 0); /* Semi-transparent black */
  width: 100%;

}

/* Logo */
.navbar-brand img {
  height: 50px;
  transition: transform 0.3s ease;
}

.navbar-brand img:hover {
  transform: scale(1.1); /* Logo enlarges on hover */
}

/* Dropdown Styles */
/* Dropdown Menu Styles */
.dropdown-menu {
  background: #333333;
  border: none;
  border-radius: 5px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.521);
  scroll-behavior: smooth;
  max-height: auto; /* Limit the height of the dropdown */
  overflow-y: auto; /* Enable scrolling if content exceeds max height */
}
.dropdown-menu::-webkit-scrollbar {
  width: 4px; /* Set the width of the scrollbar */
}

/* Responsive Styles for Dropdown */

@media (min-width: 768px) and (max-width: 991.98px) {
  .dropdown-menu {
    max-height: 500px; /* Medium height for tablets */
  }
}

@media (min-width: 992px) {
  .dropdown-menu {
    max-height: 500px; /* Larger height for desktops */
  }
}
@media (min-width: 993px) and (min-width: 1024px){
  .dropdown-menu {
    max-height: 500px; /* Larger height for desktops */
  }
}

.dropdown-item {
  color: white ;
  transition: background-color 0.3s ease, color 0.3s ease;
  font-size: 16px;
}



/* Mobile Toggler Button */
.navbar-toggler {
  border-color: #ffffff;
}

.navbar-toggler-icon {
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath stroke="rgba%28255, 255, 255, 1%29" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/%3E%3C/svg%3E');
}

/* Responsive Design */
@media (max-width: 768px) {
  .navbar-collapse {
    background: rgba(0, 0, 0, 0.705); /* Dark background for mobile dropdown */
    padding: 10px;
    scroll-behavior: smooth;
  }

  .navbar-nav .nav-item {
    margin: 10px 0;
  }

  .navbar-nav .nav-link {
    font-size: 14px;
  }

  
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
  overflow-y: auto;
      
}

body {
    background: #eee;
}

.section-title {
    position: absolute;
    left: -2%;
    top: 0;
}


.center {
    text-align: center;
}

.bg-none {
    background: none;
    border: none;
}

.flex {
    display: flex;
    align-items: center;

}

.red {
    color: rgb(201, 2, 2);
    font-weight: 600;
    letter-spacing: 1px;
   
}

.text-left {
    text-align: left !important;
}

.default-family {
    color: #000000b0;
}



#callusa {
    background: linear-gradient(0deg, #ED1C24, rgb(164 47 47) 100%) !important;

}

/* custom values  */

/* button */
.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 30px;

}
.button-container-header{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;

}
button {
  font-size: 17px;
  padding: 0.5em 2em;
  border: transparent;
  background: rgb(201, 2, 2);
  color: white;
  border-radius: 4px;
  display: flex;
  justify-content: center;
}


button:active {
  transform: translate(0em, 0.2em);
}
/* button */


.clients {
  background: url('img/call center icon/new call centre image.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  margin-bottom: -30px;
  background-attachment: fixed;
  position: relative;
  }
  .clients::after{
  position:absolute;
  content:'';
  left:0;
  top:0;
  width:100%;
  height:100%;
  background:linear-gradient(45deg, black, #00000094);
  }
  .clients .owl-wrapper{
  position: relative;
  z-index: 1;
  }
 
  
  #owl-demo1 .item{
  width: 100%;
  }
  
 /* Responsive design */
 @media (max-width: 768px) {
   .clients {
     background-attachment: scroll; /* Disable fixed background on mobile for better performance */
   }

   #owl-demo1 .item {
     height: auto; /* Make the item height flexible */
     padding: 20px; /* Reduce padding for smaller screens */
   }
   #owl-demo .item {
     height: auto; /* Make the item height flexible */
     padding: 20px; /* Reduce padding for smaller screens */
   }
 }

 @media (max-width: 480px) {
   #owl-demo1 .item {
     padding: 10px; /* Reduce padding even more on very small screens */
   }
 } 
 @media (max-width: 480px) {
   #owl-demoz .item {
     padding: 10px; /* Reduce padding even more on very small screens */
   }
 } 
 .img-fluid {
                  height: auto;
                  width: 500px;
                  padding: 10px;
              }



              .photos {
  background: url('img/call center icon/new call centre image.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  margin-bottom: -30px;
  background-attachment: fixed;
  position: relative;
  }
  .photos::after{
  position:absolute;
  content:'';
  left:0;
  top:0;
  width:100%;
  height:100%;
  background:linear-gradient(45deg, black, #00000094);
  }
  .photos .owl-wrapper{
  position: relative;
  z-index: 1;
  }
 
/* Sidebar */
@media only screen and (max-width: 762px) { 
    #join-form{
      display:none;
    }
    #mySidenav {
    display:none
    }
    }    
    #mySidenav a {
      position: fixed;
      right: -330px;
      transition: all .8s ease;
      /* padding: 10px 10px 10px 10px; */
      width: 380px;
      text-decoration: none;
      font-size: 20px;
      color: white;
      border-radius: 5px 5px 5px 5px;
      vertical-align:middle;
      z-index:9999;
      font-size:20px;
      overflow:hideen;
    }
    #join-form a{
      position: fixed;
      right: -300px;
      transition: all .8s ease;
      padding: 10px 10px 10px 10px;
      width: 350px;
      text-decoration: none;
      font-size: 20px;
      color: white;
      border-radius: 5px 5px 5px 5px;
      vertical-align:middle;
      z-index:9999;
    }
    #mySidenav a i{
      padding:5px;
    }
    #mySidenav a:hover {
      right: 0;
    }
    
   
    #callin {
      margin-top: 60px;
      /* background: rgb(136,96,208);
      background: linear-gradient(90deg, rgba(136,96,208,1) 0%, rgba(90,184,235,1) 100%)0; */
      background: rgb(201, 2, 2);
    background: linear-gradient(90deg, rgb(201, 2, 2) 0%, rgb(0, 0, 0) 100%);
      display: flex;
      flex-direction: row;
    }
    #callusa span{
      padding:10px 15px;
    }
    #callin span{
      padding:10px 15px;
          
    }
    #blog {
      top: 300px;
      background-color: #2196F3;
      writing-mode: tb-rl;
      transform: rotate(-180deg);
      /* background: rgb(92,182,235);
    background: linear-gradient(0deg, rgba(92,182,235,1) 0%, rgba(133,102,210,1) 100%); */
    background: rgb(201, 2, 2);
    background: linear-gradient(0deg, rgb(201, 2, 2) 0%, rgb(0, 0, 0) 100%);
    }
    /* End Sidebar */

/* Service Card */
/* Keyframes for Bounce Animation */
@keyframes bounce-servi {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(0);
    }
    40% {
      transform: translateY(-10px);
    }
    60% {
      transform: translateY(-5px);
    }
  }

  /* Keyframes for Fade-In Animation */
  @keyframes fadeIn-servi {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

 

  .card-container-servi {
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeIn-servi 1s ease;
  }

  .card-servi {
    position: relative;

    background: #ffffff;
    border-left: 10px solid #000;
    border-radius: 15px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    transition: transform 0.5s ease, box-shadow 0.5s ease, background-color 0.5s ease;
  }

  /* Hover effects for the card */
  .card-servi:hover {
    transform: scale(1.1) rotate(2deg);
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
    background:linear-gradient(to bottom right, #ff0711, rgb(195 31 57) 100%);
 
  }

  /* Smooth color transition for the number box */
  .card-number-servi {
    position: absolute;
    top: -20px;
    left: 15px;
    background:linear-gradient(to bottom right, #ff0711, rgb(195 31 57) 100%);

    color: #ffffff;
    font-size: 34px;
    padding: 5px 15px;
    border-radius: 15px;
    text-align: center;
    animation: bounce-servi 1s ease infinite;
    transition: background-color 0.5s ease; /* Transition for background color */
  }

  .card-servi:hover .card-number-servi {
    background: rgb(0, 0, 0); 
  }

  .card-servi:hover h3,
.card-servi:hover p {
    color: #fff;  /* Change color to white on hover */
}

  .card-content-servi h3 {
    font-size: 25px;
    color: #000000;
    margin-bottom: 10px;
    margin-top: 40px;
  }

  .card-content-servi p {
    font-size: 16px;
    color: #666666;
    line-height: 1.5;
  }

  @media (min-width: 993px) and (max-width: 1024px) {
 
    .card-number-servi {
        font-size: 30px; /* Slightly smaller number size */
    }

    .card-content-servi h3 {
        font-size: 24px; /* Adjust heading size for medium screens */
    }

    .card-content-servi p {
        font-size: 14px; /* Slightly smaller paragraph font */
    }
}

/* End Service Card */

/* Call Center Feature */

.feature-item-dhs {
    display: flex;
    padding: 10px;
    height: 320px;
   
    align-items: center;
    background: #fff;
    border: none;
    margin-bottom: 15px;
    /* Replace with your image */
    
  
         border-radius: 10px;
         box-shadow: 0 8px 20px rgba(0, 0, 0, 0.555);
         transition: transform 0.4s ease, box-shadow 0.4s ease;
 }
 
 
 .feature-item-dhs img {
    width: 40px;
    height: 40px;
    margin-right: 15px;
 }
 
 .feature-content-dhs {
    display: flex;
    flex-direction: column;
 }
 
 .feature-content-dhs h3 {
    font-size:30px;
    margin: 0;
    color: #000000;
 }
 
 .feature-content-dhs p {
    font-size: 18px;
    margin: 5px 0 0;
    color: #666;
 }
 /* 2nd  */
 
 .feature-item-dhs2 {
    display: flex;
    height: 330px; 
    padding: 10px;
    align-items: center;
    border: none;
    margin-bottom: 15px;
    /* Replace with your image */
    background: linear-gradient(90deg, #ff070fea 0%,#c20505); 
        
         border-radius: 10px;
         box-shadow: 0 8px 20px rgba(0, 0, 0, 0.555);
         transition: transform 0.4s ease, box-shadow 0.4s ease;
 }
 
 
 .feature-item-dhs2 img {
    width: 40px;
    height: 40px;
    margin-right: 15px;
 }
 
 .feature-content-dhs2 {
    display: flex;
    flex-direction: column;
 }
 
 .feature-content-dhs2 h3 {
    font-size: 30px;
    margin: 0;
    color: #000000;
 }
 
 .feature-content-dhs2 p {
    font-size: 18px;
    margin: 5px 0 0;
    color: #ffffff;
 }
/* End Call Center Feature */

/* Team  */
 /* Original Styles (unchanged) */
 .teamdhhs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
    text-align: center;
    max-width: auto;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .teamdhhs .team-card {
    background: white;
    border-radius: 8px;

    
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: left;
    display: flex;
    gap: 20px;
    align-items: center;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  }
  .teamdhhs .team-card:hover {
    background-color: #f0f0f0;
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
  }
  .teamdhhs .team-card img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid transparent;
    transition: transform 0.3s ease;
  }
  .teamdhhs .team-card:hover img {
    transform: scale(1.1);
  }
  .teamdhhs .team-card .blue-border {
    border-color: #c20505;
  }
  .teamdhhs .team-card .yellow-border {
    border-color: #c20505;
  }
  .teamdhhs .team-card .green-border {
    border-color: #c20505;
  }
  .teamdhhs .team-card .red-border {
    border-color: #c20505;
  }
  .teamdhhs .team-content h2 {
    margin: 0;
    font-size: 20px;
    font-weight: bold;
    color: #333;
  }
  .teamdhhs .team-content h4 {
    margin: 5px 0 10px;
    font-size: 16px;
    font-weight: normal;
  }
  .teamdhhs .team-content h4.blue {
    color: #c20505;
  }
  .teamdhhs .team-content h4.yellow {
    color: #c20505;
  }
  .teamdhhs .team-content h4.green {
    color: #c20505;
  }
  .teamdhhs .team-content h4.red {
    color: #c20505;
  }
  .teamdhhs .team-content p {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
  }
  .teamdhhs .social-icons {
    margin-top: 15px;
  }
  .teamdhhs .social-icons a {
    margin-right: 10px;
    font-size: 18px;
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
  }
  .teamdhhs .social-icons a:hover {
    color: #d80303;
    transform: scale(1.2);
    text-shadow: 0 0 8px rgba(161, 37, 37, 0.8);
  }

  /* Additional Media Queries for Enhanced Responsiveness */
  @media (max-width: 768px) {
    .teamdhhs {
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
  }

  @media (max-width: 480px) {
    .teamdhhs {
      grid-template-columns: 1fr;
      gap: 15px;
    }

    .teamdhhs .team-card {
      flex-direction: column;
      text-align: center;
      padding: 15px;
    }

    .teamdhhs .team-card img {
      margin-bottom: 10px;
    }
  }
/* End Team */


  .navigation {
    position: absolute;
    top: 80%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
  }

  .navigation button {
    background-color: #c20707;
    color: #fff;
    border: none;
    padding: 15px;
    cursor: pointer;
    font-size: 1.2em;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  .navigation button:hover {
    background-color: #a10606;
  }


/* Footer */
.footerContainer {
    background-color: #000000;
    padding: 20px 0;
}
.footerbody h3, .footer-blog-sec h3 {
    color: #ffffff;
    margin-bottom: 15px;
}
.footerbody ul, .footer-blog-sec ul {
    list-style-type: none;
    padding: 0;
}
.footerbody ul li a {
    color: #bfc6cc;
    text-decoration: none;
}
.footerbody ul li a:hover {
    text-decoration: underline;
}
.footerbottom {
    background-color: #343a40;
    color: #fff;
    padding: 10px 0;
}
.privacyblock a {
    color: #ddd;
    margin: 0 5px;
    text-decoration: none;
}

.address li {
    margin-bottom: 10px;
}
/* End Footer */

/* It services */

/* From Uiverse.io by elijahwgummer-poc */ 
.Itservices {
    width: 330px;
    height: 400px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
  }
  
  .Itservices:before {
    content: "";
    position: absolute;
    top: -100%;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom right, #ff0711, rgb(195 31 57) 100%);
    transform: rotate(-45deg);
    transition: all 0.3s ease;
    z-index: -1;
  }
  
  .Itservices:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
  }
  
  .Itservices:hover:before {
    top: 0;
    left: 0;
  }
  
  .Itservices-content {
    padding: 20px;
    text-align: center;
    transition: color 0.3s ease; /* Add transition for color */
  }
  
  .Itservices-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
    color: black;
    transition: color 0.3s ease; /* Add transition for color */
  }
  
  .Itservices-description {
    font-size: 16px;
    color: black;
    margin-bottom: 20px;
    transition: color 0.3s ease; /* Add transition for color */
  }
  
  .Itservices-button {
    padding: 10px 20px;
    background-color: #000000;
    color: #FFF;
    border: none;
    border-radius: 4px;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .Itservices-button:hover {
    background-color: #FF3A4C;
  }
  
  .Itservices:hover .Itservices-title, 
  .Itservices:hover .Itservices-description {
    color: white; /* Change text color to white on hover */
  }
  
/* End IT Service */
/* it services card  */

 /* General Styles */


  /* Services Cards Section */
  .services-cards2 {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    margin-top: -90px;
    flex-wrap: wrap; /* Allow the cards to wrap */
  }

  

  .card2 {
    background-color: rgba(255, 255, 255, 0.747);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 30%; /* Default width */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .card2:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    background: linear-gradient(to bottom right, #ff0711, rgb(195 31 57) 100%);
  }


  .card2:hover p {
    color: #ffffff;
  }

  .icon2 img {
    width: 50px;
    height: 50px;
    margin-bottom: 15px;
  }

  h3 {
    font-size: px;
    margin: 15px 0;
    color: #000000;
  }

  p {
    font-size: 18px;
    color: #666;
    margin-bottom: 20px;
  }

  .more-button2 {
    background-color: black;
    text-align: center;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .more-button2:hover {
    background-color: white;
  }

  /* Media Query for smaller screens */
  @media (max-width: 768px) {
    .card2 {
      width: 45%; /* Make cards take up more space on smaller screens */
    }
  }

  /* Media Query for very small screens (e.g., mobile) */
  @media (max-width: 480px) {
    .card2 {
      width: 100%; /* Make each card take up full width on mobile screens */
      margin-bottom: 20px; /* Add space between cards */
    }
  }
/*  End IT Services Card */

/* Project */
/* Container Section */
.Project {
    background: url('https://www.vecteezy.com/video/47069284-white-and-black-color-slowly-rotating-3d-shiny-cubes-abstract-3d-background') repeat center center / cover; /* Replace with your image */
    color: white;
    text-align: center;
    padding: 40px;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    animation: backgroundMotion 30s linear infinite; /* Add background motion */
}

/* Background Animation */
@keyframes backgroundMotion {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}

.Project::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, #c71e37 0%, rgba(189, 109, 5, 0) 100%); /* Overlay with a gradient */
    z-index: 1;
    opacity: 0.9;
}

.Project h1 {
    font-size: 40px;
    margin-bottom: 30px;
    color: #000000;
    position: relative;
    z-index: 2; /* Ensure it appears above overlay */
    text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
    animation: fadeInDown 1.5s ease-in-out;
}

/* Stats Section */
.stats {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
    position: relative;
    z-index: 2; /* Ensure above background */
}

.stat {
    text-align: center;
    height: 250px;
    width: 200px;
    background: rgb(255 255 255 / 68%); /* Semi-transparent card */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.555);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.stat:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

.stat img {
    width: 80px;
    height: 80px;
    margin-bottom: 10px;
    transition: transform 0.4s ease, filter 0.4s ease;
}

.stat img:hover {
    transform: rotate(360deg) scale(1.2); /* Rotate on hover */
}

.stat h2 {
    font-size: 36px;
    margin: 10px 0;
    color: #000000;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
}

.stat p {
    font-size: 18px;
    margin: 0;
    color: #000000;
}

/* Keyframe Animations */
@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/* End Project */


/* call center card */
  /* Services Cards Section */
  .services-cards2 {
    display: flex;
    justify-content: space-around;
    gap: 20px;
  
    flex-wrap: wrap; /* Allow the cards to wrap */
  }

  .card2 {
    background-color: rgba(255, 255, 255, 0.747);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 30%; /* Default width */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .card2:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    background: linear-gradient(to bottom right, #ff0711, rgb(195 31 57) 100%);
  }

  .card2:hover h3,
  .card2:hover p {
    color: #ffffff;
  }

  .icon2 img {
    width: 50px;
    height: 50px;
    margin-bottom: 15px;
  }

  h3 {
    font-size: px;
    margin: 15px 0;
    color: #212529;
  }

  p {
    font-size: 18px;
    color: #666;
    margin-bottom: 20px;
  }

  .more-button2 {
    background-color: black;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .more-button2:hover {
    background-color: white;
  }

  /* Media Query for smaller screens */
  @media (max-width: 768px) {
    .card2 {
      width: 45%; /* Make cards take up more space on smaller screens */
    }
  }

  /* Media Query for very small screens (e.g., mobile) */
  @media (max-width: 480px) {
    .card2 {
      width: 100%; /* Make each card take up full width on mobile screens */
      margin-bottom: 20px; /* Add space between cards */
    }
  }

  /* call center end */

  /* Best Call Center text section */
  /* Main container */
  .container23 {
    display: flex;
    justify-content: space-between;
  
    background-color: none;
    margin: 20px;
    border-radius: 10px;
}
  .text-section {
    flex: 1;
    padding-right: 30px;
}

/* Right section: Images */
.image-section {
    flex: 1;
    display: flex;
    flex-direction: column; /* Stack images vertically */
    justify-content: center;
    align-items: center;
    gap: 20px; /* Space between images */
}

.image-section img {
    max-width: 450px;
    margin-left: 1110px;
    margin-bottom: -10px;
    margin-top: -350px;
    height: auto;
    border-radius: 10px;
   
    transition: transform 0.3s ease-in-out;
}

/* Image hover effect */
.image-section img:hover {
    transform: scale(1.05);
}
/* Basic styling for the call icon */
@media (max-width: 768px) {
  .callicon2 img {
     height: 100px; 
     width: 100px;
     /* Reduce height for smaller screens */
  }
}

.callicon {
  text-align: center; /* Centers the image horizontally */
  margin: 0 auto; /* Centers the figure itself */
  padding: 10px;
  margin-left: 100px;
  
}

.callicon img {
  width: 65%; /* Makes the image responsive */
  max-width: 70%; /* Sets a max width for the image */
  height: auto; /* Keeps the image's aspect ratio intact */
  display: block; /* Removes any unwanted space below the image */
}

/* Ensures responsiveness across different screen sizes */
@media (max-width: 768px) {
  .callicon img {
     max-width: 200px;
     height: 150px; /* Reduces the size of the image on smaller screens */
  }
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
    .container23 {
        flex-direction: column; /* Stack sections on small screens */
        padding: 20px;
    }

    .text-section {
        padding-right: 0;
        margin-bottom: 20px;
    }

    .image-section {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .container23 {
        padding: 15px;
    }

    .text-section h2 {
        font-size: 20px; /* Adjust font size for mobile */
    }

    .text-section p {
        font-size: 14px; /* Adjust font size for mobile */
    }

    .image-section img {
        max-width: 90%; /* Reduce image size for mobile */
    }
}

/* End Text Center  */

/* service slider */

.sliderservice {
      
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  
}
.cardservice {
  flex: 0 0 30%;
  box-sizing: border-box;
  padding: 20px;
  margin: 20px;
  background-color: #ffffff;
  border-radius: 15px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  scroll-snap-align: start;

}
.cardservice:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
background: linear-gradient(to bottom right, #ff0711, rgb(195 31 57) 100%);
}

.cardservice:hover h3,
.cardservice:hover p {
color: #ffffff;
}


.slider-btn {
background: none;
border: none;
padding: 0;
cursor: pointer;
display: inline-block;
}

.slider-btn img {
transition: transform 0.3s ease;
}

.slider-btn:hover img {
transform: scale(1.1); /* Slightly enlarges the image on hover */
}


/* Media Queries for Responsiveness */
@media (max-width: 768px) {
  .card {
      flex: 0 0 80%; /* Take up more space for smaller screens */
  }
}

@media (max-width: 480px) {
  .cardservice {
      flex: 0 0 100%; /* Full width on very small screens */
      padding: 15px;
      margin: 10px;
  }
 
}

/* modal form  */

input[type=button],
input[type=submit],
input[type="reset"] {
    background: radial-gradient(#ff000a6e, #fb000aa3);
    border: none;
    color: #FFF;
    padding: 0 80px;
    height: 50px !important;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
    font-size: 13px;
    box-shadow: 0 0 1px #ff0000;
    border-radius: 50px;
    margin: 5px 20px 40px 20px;
    transition: all 0.3s ease-in-out;
    position: relative;
}

.modal {
    background: #2c282878;
    text-decoration: none;
}

.modal .item {
    position: relative;
}

.modal ion-icon {
    position: absolute;
    right: 10px;
    top: 18px;
    background: #FFF;
    border: 1px solid #EEE;
    padding: 4px;
}

input[type=button]:hover,
input[type=submit]:hover,
input[type=reset]:hover {
    box-shadow: 0 0 10px 0 skyblue;
    cursor: pointer;
    color: #fff;
}

input[type=button]:active,
input[type=submit]:active,
input[type=reset]:active {
    transform: scale(0.95);
}

input[type=text],
input[type=email],
textarea,
input[type=number] {
    background: transparent;

    padding: 10px 32px;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 5px;
    width: 100%;
    border: none;
    box-shadow: 0 0 1px #e1000f;
    transition: all 0.5s ease-in-out;
    border-radius: 20px;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=number]:focus {
    box-shadow: 0 0 10px skyblue;
    color: #000;
}

.modal form {
    padding: 0;
}

.modal .modal-title {
    color: #000 !important;
    text-align: center;
    width: 100%;
}

#join-form a {
    top: 50%;
}

.modal input {
    height: 40px !important;
    border-radius: 4px !important;
    border: 1px solid #55555580;
    box-shadow: none;
    margin: 10px 0;
}

.modal textarea {
    border-radius: 4px !important;
    border: 1px solid #55555580;
    box-shadow: none;
    margin: 10px 0;
}

.modal.fade .modal-dialog {
    transform: translateY(130px) !important;
    transition: .5s ease-in-out;
}

#mySidenav a {
    top: 30%;
}

.modal .form-select {
    height: 40px !important;
    border-radius: 4px !important;
    border: 1px solid #55555580;
    box-shadow: none;
}

/* modal form section ends here  */



/* custom new btn  */

/* ### ### ### 11 */
.b11_3d_jumpback {
    perspective: 500px;
    -webkit-perspective: 500px;
    -moz-perspective: 500px;
}

.b11_3d_jumpback div {
    color: #000000;
    background-color: #ffffff;
    border: #000000 solid 1px;
    padding: 10px;
    /* position: absolute; */
    text-align: center;
    margin-left: -10px;
    width: 100%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.b11_3d_jumpback:hover div {
    color: #ffffff;
    background-color: #000000;
    animation: b11_3d_jump 0.3s ease-out;
    -webkit-animation: b11_3d_jump 0.3s ease-out;
    -moz-animation: b11_3d_jump 0.3s ease-out;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
}

@keyframes b11_3d_jump {
  from {
      transform: translateZ(0px) rotateX(0deg);
      background-color: #ffffff;
      color: #000000;
  }

  49.99% {
      transform: translateZ(100px) rotateX(90deg);
      background-color: #808080;
      color: #000000;
  }

  50% {
      transform: translateZ(100px) rotateX(-90deg);
      background-color: #000000;
      color: #808080;
  }

  to {
      transform: translateZ(0px) rotateX(0deg);
      background-color: #000000;
      color: #ffffff;
  }
}

/* custom new btn  */
.navbar-brand {
    width: 20%;
    display: flex;
    justify-content: center;
}

.navbar .button_base {
    height: 60%;
    width: 190%;
}

.button_base {
    height: 60%;
    width: 30%;
}

.navbar-expand-lg .navbar-collapse {
    justify-content: space-around;
}

.navbar .nav-item .dropdown-menu {
    line-height: 50px;
}

.navbar {
    background: #fd9a9d4f !important;
}


/* main-home section starts here  */

/* main-home section ends here  */

.main-home {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: url('./img/home-banner6.png');
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    /* background: #fd9a9d4f; */
    background-attachment: fixed;
    overflow: hidden;
    color: #FFF;
}

.main-home .right-side {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: end;
  align-items: center;
  text-align: right;
}

.main-home .right-side::before,
.main-home .right-side::after {
  content: '';
  position: absolute;
  right: 27px;
  width: 3px;
  background: #FFF;
}

.main-home .right-side::before {
  top: 0;
  height: 8%;
}

.main-home .right-side::after {
  bottom: 0;
  height: 8%;
}

.main-home .right-side ion-icon {
  font-size: 22px;
  padding: 5px;
}

.main-home .right-side li {
  list-style: none;
  color: #FFF;
}





/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1025px)  {
  .main-home .right-side {
      flex-direction: row;
      text-align: right;
      
  }

  .main-home .right-side::before,
  .main-home .right-side::after {
      right: 81px;
      height: 8%;
      
  }

  .main-home .right-side ion-icon {
      font-size: 22px;
      padding-right: 60px;
  }
}


.main-home .navbar {
    position: fixed;
    top: 0;
    width: 100%;
    left: 0;
    z-index: 101 !important;

    background: #0000001c !important;
}

.main-home .main-btn {
    position: relative;
    z-index: 10;
    margin: 20px 0;
}

.main-home .navbar a {
    color: #FFF !important;
}

.main-home .left-side {
    padding-top: 80px;
}

.main-home .left-side h1,
h5 {
    line-height: 40px;
    color: #FFF !important;
    position: relative;
    z-index: 10;

}

.main-home .left-side h1 {
    font-weight: 500;
    line-height: 60px;
  margin: 10px 0 0 10px;
    font-size: 50px;
    letter-spacing: 0px;
}

.main-home::after {
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #0000008c;
    z-index: 1;
}


/* main-home section ends here  */
.srvicess {
  width: 100%; 
  max-width: 1200px; 
  height: 200px; 
  border-radius: 15px; 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow */
  display: block; /* Center the image if needed */
  margin: 0 auto; /* Center the image horizontally */
  object-fit: cover;
  transition: opacity 0.3s ease;
  /* Ensure the image fills the rounded container */
}

/* -----------------------------------about-us section starts here----------------------------------- */
.about-us {
    margin: 40px 0;
    padding: 20px;
    position: relative;

}

.about-us h1 {
  font-size: 30px;

}

.about-us img {
    width: 100%;
    margin-top: 80px;
    border-radius: 10px;

    box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;

}

.about-us .right-side {
    padding: 40px 60px;
}

.about-us .left-side {
    position: relative;
    padding: 50px;
}

.about-us .left-side::after {
    position: absolute;
    content: '';
    right: 0;
    bottom: 0;
    bottom: 45px;
    width: 60%;
    height: 50%;
    background: url('./img/about-us.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
}

.about-us .left-side::before {
    position: absolute;
    content: '';
    left: 0;
    z-index: -1;
    top: 0;
    width: 40%;
    height: 30%;
    background: url('./img/about-us2.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
}

.about-us .flex {
    justify-content: space-around;
}

.about-us ul {
    font-size: 22px;
    line-height: 40px;
    font-weight: 100;
    color: #000000cc;
}

.about-us ul li {
    list-style: none;
    display: flex;
    align-items: center;
}

.about-us ul li ion-icon {
    padding: 0 10px 0 0;
}

.about-us .flex .right h4 {
    background: #000000;
    padding: 50px 40px;
    border-radius: 50%;
    color: #FFF;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

@media (min-width: 992px) and  (min-width: 1000px)  {
  .about-us {
      padding: 20px;
  }

  .about-us img {
      margin-top: 150px;
  }

  .about-us .left-side, 
  .about-us .right-side {
      padding: 40px 60px;
  }

  .about-us .left-side::after {
      width: 80%;
      height: 50%;
      bottom: 45px;
  }

  .about-us .left-side::before {
      width: 50%;
      height: 30%;
      top: 0;
  }

  .about-us ul {
      font-size: 22px;
  }

  .about-us .flex {
      flex-direction: row;
  }

  .about-us .flex .right h4 {
      padding: 30px 20px;
      font-size: 22px;
  }

  .about-us  h1  {
    font-size: 23px;
}
}
/* -----------------------------------about-us section ends here----------------------------------- */





/* our-services section starts here  */

.services-card-title {
    color: #f1f1f1;
    font-size: 1.5em;
    line-height: normal;
    font-weight: 700;
    margin-bottom: 0.5em;
  }
  
  .small-desc {
    font-size: 1em;
    font-weight: 400;
    line-height: 1.5em;
    color: #ffffff;
  }
  
  .small-desc {
    font-size: 1em;
  }
  
  .go-corner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 2em;
    height: 2em;
    overflow: hidden;
    top: 0;
    right: 0;
    background: linear-gradient(135deg, white, black);
    border-radius: 0 4px 0 32px;
  }
  
  .go-arrow {
    margin-top: -4px;
    margin-right: -4px;
    color: white;
    font-family: courier, sans;
  }
  
  .services-card {
    display: block;
    position: relative;
    max-width: 300px;
    max-height: 320px;
    background-color: #f2f8f9;
    border-radius: 10px;
    padding: 2em 1.2em;
    margin: 12px;
    text-decoration: none;
    z-index: 0;
    overflow: hidden;
    background: linear-gradient(to bottom,#e1000f,#e1000f);
    font-family: Arial, Helvetica, sans-serif;
  }
  
  .services-card:before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -16px;
    right: -16px;
    background: linear-gradient(135deg, rgb(2, 0, 0), black);
    height: 32px;
    width: 32px;
    border-radius: 32px;
    transform: scale(1);
    transform-origin: 50% 50%;
    transition: transform 0.35s ease-out;
  }
  
  .services-card:hover:before {
    transform: scale(28);
  }
  
  .services-card:hover .small-desc {
    transition: all 0.5s ease-out;
    color: rgba(241, 13, 13, 0.8);
  }
  
  .services-card:hover .number h1 {
    transition: all 0.5s ease-out;
    color: #ffffff;
  }
  .services-card .number h1 {
    color: #ffffff;
}


  
/* image container */



.form-section .form-select {
    position: relative;
}

.form-container .btn {
    position: relative;
    z-index: 10;
    background: #FFF;
    border-radius: 4px;
    margin: 0 auto;
    color: #ED1C24;
}


.footerContainer i {
    font-size: 23px;
    padding: 10px;
}

.footerbody a {
    font-size: 15px
}

.address li {
    font-size: 15px;
}

/* Team spotlight */

/* spotlight icon */
.social-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
   
    box-shadow: 0px 0px 15px #00000027;
    padding: 15px 10px;
    border-radius: 5em;
  }
  
  .social-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 0 10px;
    background-color: #fff;
    box-shadow: 0px 0px 4px #00000027;
    transition: 0.3s;
  }
  
  .social-button:hover {
    background-color: #f2f2f2;
    box-shadow: 0px 0px 6px 3px #00000027;
  }
  
  .social-buttons svg {
    transition: 0.3s;
    height: 20px;
  }
  
  .facebook {
    background-color: #3b5998;
  }
  
  .facebook svg {
    fill: #f2f2f2;
  }
  
  .facebook:hover svg {
    fill: #3b5998;
  }
  
  
  
  .linkedin {
    background-color: #0077b5;
  }
  
  .linkedin svg {
    fill: #f2f2f2;
  }
  
  .linkedin:hover svg {
    fill: #0077b5;
  }
  
  .instagram {
    background-color: #c13584;
  }
  
  .instagram svg {
    fill: #f2f2f2;
  }
  
  .instagram:hover svg {
    fill: #c13584;
  }

  /* end Icon */

body {
    font-family: Arial, sans-serif;
    margin: 0;

    background-color: #fff;
}
.container {
    /* display:flex; */
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 0px;

    
}

.team-member {
    position: relative;
    width: 250px;
    height: 250px;
    margin: 20px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgb(0, 0, 0);
    transform: scale(1);
    transition: transform 0.3s ease;
}
.team-member:hover {
    transform: scale(1.1);
}
.team-member img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.team-member .info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #900f25;
    color: #fff;
    padding: 10px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.team-member:hover .info {
    opacity: 1;
}
.social-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 10px;
}
.social-icons a {
    color: #fff;
    font-size: 20px;
    transition: transform 0.3s ease;
}
.social-icons a:hover {
    transform: scale(1.2);
}

/* End Spolight */



/* .we-provide section starts here  */



.we-provide {
    margin: 50px 0;
    padding: 10px;
}

.we-provide .button_base {
    margin: 15px auto;

}

.we-provide .left-side .cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    pointer-events: none;
}

.we-provide .left-side .card {
    max-width: 100%;
    height: auto;
    width: 100%;
    color: #747171b2;
    padding: 1.5rem;
    background-color: #000000;
    pointer-events: auto;
    /* transform: scale(1); */
    transform: rotate(358deg);
    opacity: 1;
    transition: all 150ms ease-in-out;
    display: flex;
    flex-direction: column;
}

.we-provide .left-side .card .card-title {
    position: relative;
}

.we-provide .left-side .card .card-title::before {
    content: "";
    height: 1rem;
    width: 1rem;
    border-radius: 50%;
    box-shadow: inset 0 0 3px #bb86fc;
    background-color: transparent;
    position: absolute;
    right: 0;
}

.we-provide .left-side .card .date {
    color: #bb86fc;
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
}

.we-provide .left-side.card .description {
    font-size: 0.9rem;
}

.we-provide .left-side.card:nth-child(even) {
    transform: translateY(8px);
}

.we-provide .left-side.card:nth-child(n) {
    transform: rotate(-5deg);
}

.cards:hover>.card:hover {
    transform: scale(1.15);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

.cards:hover>.card:not(:hover) {
    opacity: 0.5;
}

.we-provide .right-side .card {
    padding: 30px;
}

.we-provide .right-side img {
    width: 100%;
}

.we-provide .left-side a {
    color: #ED1C24;
    letter-spacing: 2px;
    margin-bottom: 4px;
}


.typing-text {
    color: lime;
    font-family: "Courier";
    font-size: 20px;
    margin: 10px 0 0 10px;
    white-space: nowrap;
    overflow: hidden;
    width: 30em;
    animation: type 4s steps(60, end);
}

.typing-text:nth-child(2) {
    animation: type2 8s steps(60, end);
}

.typing-text a {
    color: lime;
    text-decoration: none;
}

.blink {
    animation: blink 1s infinite;
}

@keyframes type {
    from {
        width: 0;
    }
}

@keyframes type2 {
    0% {
        width: 0;
    }

    50% {
        width: 0;
    }

    100% {
        width: 100;
    }
}

@keyframes blink {
    to {
        opacity: .0;
    }
}



.iam {
    color: white;
    padding-bottom: 15px;
    margin-left: 10px;
    padding-top: 15px;
    padding-right: 10px;
    font-family: sans-serif;
    position: relative;
    z-index: 10;
    font-size: 18px;
}


/* Extra small devices (phones, less than 576px) */


@media (max-width: 319px) {
  .iam {
    padding-right: 35px;
}
}


/* Small devices (phones, 320px to 479px) */
@media (min-width: 320px) and (max-width: 479px) {
  .iam {

    padding-right: 35px;
}
.websitelogo {
  width: 50px !important ;
  margin-left: 20px;
}

}

/* Small devices (phones, 320px to 479px) */
@media (min-width: 480px) and (max-width: 576px) {
  .iam {

    padding-right: 30px;
}
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .iam {
      
      font-size: 18px;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .iam {
    
      font-size: 17px;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .iam {
  
      font-size: 18px;
  }
}
.text {
    color: white;
    border-right: 2px solid rgb(223, 15, 15);
    font-size: 30px;
    /* font-family: sans-serif; */
    color: rgb(201, 2, 2);
            overflow: hidden;
            
}


.lets-discuss {
  margin: 40px 0;
  background-color: #ffffffb2 !important;
  padding: 20px; /* Added padding for smaller screens */
}

.lets-discuss h1 {
  text-align: center;
  font-size: 2rem; /* Responsive font size */
}

.lets-discuss .card {
  padding: 40px;
  box-sizing: border-box; /* Ensures consistent sizing */
}

.lets-discuss .left-side img {
  width: 100%;
  height: auto; /* Ensures proper aspect ratio */
}

.lets-discuss .right-side .card {
  margin: 10px;
  padding: 20px;
  height: auto; /* Removed fixed height for flexibility */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.521);
}

.lets-discuss .right-side h5 {
  color: #0009 !important;
  font-size: 1.2rem; /* Adjust font size for readability */
}

.lets-discuss .right-side .button_base {
  width: 100%;
}

.lets-discuss p {
  font-size: 18px; /* Adjust font size */
  line-height: 1.5; /* Improve readability */
}

.lets-discuss .right-side .card ion-icon {
  font-size: 25px;
  padding: 5px;
  border: 1px solid #0009;
  border-radius: 50%;
  margin: 0 auto;
}

/* Media Queries for Responsiveness */

/* For tablets and medium screens */
@media (max-width: 768px) {
  .lets-discuss .card {
      padding: 20px; /* Reduced padding */
  }

  .lets-discuss .right-side .card {
      margin: 10px 0; /* Adjust margin for stacking */
  }

  .lets-discuss h1 {
      font-size: 1.8rem; /* Reduce font size */
  }

  .lets-discuss p {
      font-size: 18px;
  }
}

/* For mobile and small screens */
@media (max-width: 480px) {
  .lets-discuss {
      margin: 20px 0; /* Reduce margin */
      padding: 10px; /* Reduce padding */
  }

  .lets-discuss h1 {
      font-size: 1.5rem; /* Adjust heading size */
  }

  .lets-discuss p {
      font-size: 18px; /* Smaller font size */
  }

  .lets-discuss .right-side .card {
      padding: 15px; /* Adjust padding */
      margin: 5px 0; /* Adjust margin for stacking */
  }

  .lets-discuss .right-side h5 {
      font-size: 1rem; /* Adjust heading size */
  }

  .lets-discuss .right-side .button_base {
      font-size: 0.9rem; /* Adjust button size */
  }

  .lets-discuss .right-side .card ion-icon {
      font-size: 20px; /* Adjust icon size */
  }
}

.combo-body li {
    font-size: 19px;
    color: #0000009e;
    font-family: 'Teko';
}

.form-container {
    margin-top: 10px;
    padding-top: 50px;
    background-color: #FFEBF1;
    background: url('./img/home-banner6.png') !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: c;
    padding-left: 50px;
    padding-bottom: 50px;
    color: black;
    position: relative;
}

.form-container::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #000000cc, #0000007a);
}

.form-container .form-left {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.form-container .form-left h1 {
    position: relative;
    z-index: 10;
    color: #FFF;

}

.form-container .form-left p {
    position: relative;
    z-index: 10;
    color: #FFF;
    font-size: 18px;
    line-height: 30px;

}

.form-container .right-side h2 {
    position: relative;
    z-index: 10;
    text-align: center;
    color: #FFF;
}

.form-section input {
    background: #FFFFFF;
    position: relative;
    z-index: 10;
    height: 40px !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

.form-section .form-select {
    height: 40px !important;
    border-radius: 0 !important;
}

textarea {
    height: 80px !important;
    margin: 0 !important;

}

.form-section .message {
    border-radius: 0 !important;
    margin: 0 !important;

}

.form-section::placeholder {
    color: red !important;
    position: relative;
    z-index: 10;
}


.map {
    margin: 50px 0;
    padding: 20px;

}

.map h5 {
    color: #000 !important;
    padding: 20px 0;
}





.main-home .slick-next {
    display: none !important;
}

.main-home .slick-prev {
    display: none !important;


}

.we-provide h5 {
    color: #000 !important;
}

.portfolio-content .head-box {
    text-align: left;
    padding: 0 9%;

}


button.slick-next.slick-arrow {
    display: none !important;
}


.footerbody .bio {
    color: #bfc6cc !important;
    margin: 10px 0;
    font-size: 16px;
}

/* packages-sect strts here  */
.packages-sect .head-box {
    text-align: left !important;
}

/* packages-sect ends here  */

/* page nav bar  */

.breadcrumbsection {
  display: flex;
  margin-right: -30px;
  align-items: center;
  list-style: none;
  padding: 10px 20px;
  margin: 0;
  font-size: 22px;
  overflow: hidden;
}

.breadcrumbsection li {
  margin-right: 10px;
  position: relative;
  animation: fadeIn 1s ease;
}

.breadcrumbsection li a {
  text-decoration: none;
  color: #cc0202ec;
  font-weight: 500;
  transition: color 0.3s ease, transform 0.3s ease;
}

.breadcrumbsection li a:hover {
  color: #cc0202ec;
  transform: scale(1.1);
}

.breadcrumbsection li:not(:last-child)::after {
  content: ">";
  margin-left: 10px;
  color: #6c757d;
  opacity: 0;
  animation: fadeIn 1s ease forwards;
  animation-delay: 0.3s;
}

.breadcrumbsection li:last-child {
  color: #6c757d;
  font-weight: normal;
  pointer-events: none;
}

/* Animation */
@keyframes fadeIn {
  from {
      opacity: 0;
      transform: translateY(10px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

/* End */

@media only screen and (min-width: 300px) and (max-width: 380px) {
  .main-home .left-side h1 {
      font-size: 40px;
      
  }
}

/* responsive for mobile view  */
@media (max-width:520px) {
    .main-home .left-side h1 {
        line-height: 50px;
        
    }

    .main-home .right-side {
        position: absolute;
        top: 27%;
    }

    .main-home .right-side::after {
        height: 20%;
        bottom: -25%;
    }

    .main-home .right-side::before {
        top: -35%;
        width: 3px;
        height: 20%;
    }

    .websitelogo {
        width: 150px !important;
        margin-left: 40px;
    }

    .we-work-on {
        margin: 0;
        padding: 0px 0;
        background: #eee;
    }

    .about-us {
        margin: 0;

    }

    .about-us .left-side {
        position: relative;
        padding: 20px;

    }

    .about-us .left-side::before {
        width: 50%;
    }

    .about-us .right-side {
        padding: 40px 0;
    }

    .about-us ul {
        padding-left: 0;
    }

    .about-us .flex .right h4 {
        background: #000000;
        padding: 30px 20px;
    }

    .our-services {
        margin: 0;
        padding: 0;
    }

    .our-services .bg-none {
        padding: 0 20px;
        height: auto;
    }

    .our-services .b11_3d_jumpback div {
        width: 70%;
        margin: 0 auto;
        float: none;
    }

    .we-provide {
        margin: 50px 0 0 0;
        padding: 10px;
    }

    .navbar .button_base {
        height: 60%;
        width: 100%;
    }

    .navbar-toggler:focus {
        box-shadow: none;
    }

    .we-provide p {
        font-size: 15px;
    }

    .we-provide .card-title {
        font-size: 20px;
    }

    .we-provide .right-side .card {
        padding: 20px 0;
    }

    .nav-pills .nav-link {
        font-size: 18px !important;
    }

    .portfolio-content .b11_3d_jumpback div {
        width: 60%;

    }

    .navbar-expand-lg .navbar-collapse {
        background: #878181d9;
        max-height: 600px; /* Set the maximum height */
        overflow-y: auto; /* Enable vertical scrolling */
        width: 100%; /* Ensure it spans the full width */
    }

    .lets-discuss {
        margin: 40px 0;
        padding: 00px 0;
        background-color: #000;
    }

    .lets-discuss .card {
        padding: 0 20px;
    }

    .lets-discuss .button_base {
        height: 60%;
        width: 60%;
        margin: 0 auto;
    }

    .packages-sec p {
        font-size: 18px;
    }

    .packages-sec .nav-pills .nav-link {
        font-size: 19px;
    }

    .packages-sec .nav-pills {
        padding-bottom: 0;
        padding: 10px;
    }

   

    body,
    html {
        overflow-x: hidden;
    }

    .websitelogo {
        margin-left: 100px;
    }

    .we-work-on .slick-slide .fb {
        left: 10px;
        width: 15%;
        top: 0;
    }

    .we-work-on .slick-slide .social-media-marketing {
        left: 10px;
        width: 27%;
        top: -18px;
    }

    .we-work-on .slick-slide .google-ad {
        left: 10px;
        width: 24%;
        top: -26%;
    }

    .we-work-on .slick-slide .gmail {
        left: 10px;
        width: 20%;
        top: 0%;
    }

    .we-work-on .slick-slide .seo {
        left: 0;
        width: 27%;
        top: -15%;
    }

    .we-work-on .slick-slide .wordpress {
        left: 7%;
        width: 18%;
        top: -9%;
    }

    .heading {
        padding: 10px 40px !important;
        font-size: 16px !important;
    }

    .about-us .mb-5 {
        margin-bottom: 10px !important;
    }

    .about-us ul li {
        font-size: 18px;
    }

    .we-provide .right-side h1 {
        font-size: 21px;
    }

    .portfolio-content h2 {
        font-size: 21px;
    }

    .portfolio-content .nav-pills {
        padding-bottom: 0 !important;
    }

    .portfolio-content .b11_3d_jumpback div {
        width: 80% !important;
        margin: 10px auto;
    }

    .combo-footer {
        padding: 0;
    }

    .navbar-dark .navbar-toggler {
        box-shadow: none;
        color: black !important; 
    .navbar .nav-item .dropdown-menu {
        background: black;
    }

    .navbar .default-bg {
        padding: 0;
    }

    .navbar-dark .navbar-toggler {
        border-color: none;
    }

    .navbar-nav {

        height: 100%;
        display: flex;
        justify-content: center;
        line-height: 50px;
    }

    .main-home .dropdown-menu ul {
        padding-left: 0;
    }

    .main-home .dropdown-menu li {
        color: #FFF !important;
        background: #646363de;
        margin: 4px 0;
    }

   
    .button_base {
        height: 60%;
        width: 60%;
        margin: 0 auto;
    }
    .websitelogo {
        margin-left: 90px;
    }
    
}

/* responsive for mobile view  */