/* hero section */
.Custom-Application-Development {
  padding: 80px 75px 80px 75px;
  height: 85vh;
  background-image: url("../src/photos/services-offerd/Custom-Application-Development.jpg"),
    linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: overlay;
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
}



.Networking-Solutions{
  padding: 80px 75px 80px 75px;
  height: 85vh;
  background-image: url("../src/photos/services-offerd/Networking-Solutions.jpg"),
    linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-blend-mode: overlay;
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
}



.Cloud-Services{
  padding: 80px 75px 80px 75px;
  height: 85vh;
  background-image: url("../src/photos/services-offerd/Cloud-Services.jpg"),
    linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: overlay;
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
}



/* hero section end */
/* sticky header */
.my-navbar {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 50;
  background-color: #fff;
  padding: 10px 75px;
  border-bottom: 1px solid black;
  transition: all 0.3s ease-in-out;
}

.my-navbar.sticky {
  position: fixed;
  top: 50%;
  width: 100%;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.my-navbar a {
  color: rgb(0, 0, 0);
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
  transition: color 0.3s, border-bottom 0.3s;
}

.my-navbar a:hover {
  border-bottom: 2px solid rgb(0, 0, 0);
  color: #000000;
}

/* sticky header end*/
/* second section start */
.second-bk {
  padding: 100px 75px 80px 75px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.second-bk img {
  height: 400px;
  width: 570px;
  object-fit: cover;
  border-radius: 20px;
}
.second-bk-row {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* second section end */
/* third section start */
.third-bk {
  background-color: #f6f6f6;
  padding: 100px 75px 80px 75px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.third-bk img {
  height: 450px;
  width: 500px;
  object-fit: cover;
  border-radius: 20px;
}
.third-bk-row {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.list li {
  font-size: 18px;
  margin-bottom: 15px;
}
.list strong {
  font-weight: 600;
}
/* third section end */
/* third section start */
.third-bk-1 {
  padding: 100px 75px 80px 75px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  background-color: #f6f6f6;
}

.technologies-container{
  /* background-color: #0671d8; */
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 60px;
  gap: 40px;

}
.technologies-container-box{
  height: 20vh;
  width: 20%;
  display: flex;
  gap: 20px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.1), 
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}
.technologies-container-box:hover{
  box-shadow: 
  0 10px 15px -3px rgba(0, 0, 0, 0.1), 
  0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.technologies-container-box svg{
  height: 50px;
  width: 50px;
  fill: #074582;
  /* color: #; */
}
.technologies-container-box .text{
  text-align: center;
}
/* third section end */
/* fourth section */
.fourth-bk {
  padding: 100px 75px 80px 75px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  gap: 20px;
}


.vertical-solutions {
  display: flex;
  justify-content: center;
  flex-direction: row;
  gap: 30px;
  }
  
  
  
  .vertical-solutions-card {
  background-color: #fff;
  border: 2px solid #a2c801;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 20px;
  height: 40%;
  }
  
  .vertical-solutions-card:hover{
    border: 2px solid #0671d8;
  }
  
  
  .vertical-solutions-card svg{
  width: 13%;
  height: 13%;
  fill: #A2C801;
  margin-bottom: 20px;
  margin-top: 20px;
  }
  .vertical-solutions-card:hover svg{
  
  fill: #0671d8;
  
  
  }


  /* fourth section end */
  
  
  
  .transparent-button-2{
  display:flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  width:100%;
  }
  .transparent-button-2 a{
  padding:0px 5px 5px 0px;
  color: black;
  font-size: 18px;
  text-decoration: none;
  }
  .transparent-button-2 i{
  height: 18px;
  width:18px !important;
  margin-top: -10px;
  }
  /* fifth section end */
  
/* fifth section */
.fifth-bk {
  background-color: #f7f9fe;
  padding: 100px 75px 80px 75px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  gap: 30px;
  overflow-x: hidden !important;
}
.swiper-container {
  width: 100%;
  padding: 20px 0;
}
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}
.swiper-slide img {
  width: 150px;
  height: auto;
}
.swiper-wrapper {
  transition-timing-function: ease-in-out !important;
}
/* fifth section end*/
/* sixth section */
.sixth-bk {
  padding: 100px 75px; /* Padding for the section */
}
.accordion {
  width: 100%; /* Set accordion width to 100% */
}
/* Custom styles for the accordion */
.accordion-button {
  background-color: white; /* Set background color to white */
  color: #000; /* Set text color */
  box-shadow: none; /* Remove box shadow */
}

.accordion-button:not(.collapsed) {
  background-color: white; /* Keep background white when active */
  color: #000; /* Set text color when active */
  border: 1px solid #000000; /* Keep border color */
  border-top: none;
  border-left: none;
  border-right: none; /* Remove bottom border when active */
}

.accordion-item {
  border: 1px solid #000000; /* Border for the accordion item */
  border-top: none;
  border-left: none;
  border-right: none; /* Remove bottom border for the last item */
}

.accordion-item:last-child {
  border-bottom: 1px solid #000000; /* Add bottom border for the last item */
}

/* Show bottom border only when all items are collapsed */
.accordion-button.collapsed {
  border-bottom: 1px solid #000000; /* Show bottom border when collapsed */
}

/* Remove box shadow when active */
.accordion-button:focus {
  box-shadow: none; /* Remove focus box shadow */
}
.accordion-container {
  margin-left: 10%;
}
/* sixth section end*/

/* seventh section */
.form-group {
  margin-bottom: 15px;
}

/* Input fields: full width for a better user experience */
input[type="text"],
input[type="email"],
input[type="tel"] {
  width: 100%; /* Full width for input fields */
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: white; /* White background for input fields */
}

/* Placeholder text: black for better readability */
input::placeholder {
  color: black; /* Black color for placeholder text */
}

/* Text area for the message */
textarea {
  width: 100%; /* Full width for the message textarea */
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: white; /* White background for textarea */
}

/* Styling for the side-by-side layout */
.side-by-side {
  display: flex;
  justify-content: space-between; /* Space between input fields */
}

.side-by-side .form-group {
  flex: 1; /* Allow equal width for both input fields */
  margin-right: 10px; /* Space between the fields */
}

.side-by-side .form-group:last-child {
  margin-right: 0; /* Remove margin for the last field */
}
.seventh-bk {
  background-color: #074582;
  padding: 100px 75px 80px 75px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.section-heading-white {
  background-color: #ffffff;
  color: black;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 16px;
}
.seventh-left-side {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 20px;
}

/* seventh section end */

@media only screen and (max-width: 800px) {
  /* hero section */
  .Custom-Application-Development {
    padding: 60px 20px 60px 20px;
    height: 50vh;
    
  }
  
  .Networking-Solutions{
    padding: 60px 20px 60px 20px;
    height: 50vh;
    
  }
  
  .Cloud-Services{
    padding: 60px 20px 60px 20px;
    height: 50vh;
    
  }




  .first-bk {
    padding: 60px 20px 60px 20px;
    height: 50vh;
  }
  /* hero section end */
  /* second section */
  .second-bk {
    padding: 60px 20px 60px 20px;
  }
  .second-bk img {
    height: 200px;
    width: auto;
    margin-bottom: 30px;
  }
  /* second section end */
  /* third section */
  .third-bk {
    background-color: #f6f6f6;
    padding: 60px 20px 60px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .third-bk img {
    height: 200px;
    width: auto;
    margin-bottom: 30px;
    object-fit: cover;
    border-radius: 20px;
  }
  .third-bk-1 {
    background-color: #f6f6f6;
    padding: 160px 20px 0px 20px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    height: 230vh;
  }
  .third-bk-1 img {
    height: 300px;
    width: 350px;
    object-fit: cover;
    border-radius: 20px;
  }
  .list li {
    font-size: 16px;
    margin-bottom: 10px;
  }
  /* third section end */

  /* fourth section */
  .fourth-bk {
    padding: 60px 20px 60px 20px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: 20px;
  }
  /* fourth section end */
  .vertical-solutions-card svg{
    width: 25%;
    height: 25%;
    fill: #A2C801;
    margin-bottom: 20px;
    margin-top: 20px;
    }
  

  /* sixth section */
  .sixth-bk {
    padding: 60px 20px 60px 20px;
  }
  .accordion-container {
    margin-left: 0%;
    margin-top: 30px;
    width: 100%;
  }
  /* sixth section end*/










  .technologies-container{
    /* background-color: #0671d8; */
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    margin-top:20px;
    gap: 20px;
  
  }
  .technologies-container-box{
    height: 20vh;
    width: 90%;
    display: flex;
    gap: 20px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 
      0 4px 6px -1px rgba(0, 0, 0, 0.1), 
      0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
  }
  .technologies-container-box:hover{
    box-shadow: 
    0 10px 15px -3px rgba(0, 0, 0, 0.1), 
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }
  .technologies-container-box svg{
    height: 50px;
    width: 50px;
    fill: #074582;
    /* color: #; */
  }
  .technologies-container-box .text{
    text-align: center;
  }
















  .seventh-bk {
    background-color: #074582;
    padding: 60px 20px 60px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}