h1,

.h1 {

  font-family: "Poppins", serif;

  font-weight: 900;

  font-style: normal;

  color: #2b3857 !important;

}



h2,

h3,

.h2,

.h3 {

  font-family: "Poppins", serif;

  font-weight: 700;

  font-style: normal;

  color: #2b3857 !important;

}

h4,

h5,

h6,

.h4,

.h5,

.h6 {

  font-family: "Poppins", serif;

  font-weight: 500;

  font-style: normal;

  color: #2b3857 !important;

}



p {

  font-family: "Poppins", serif;

  font-weight: 400;

  font-style: normal;

  color: #2b3857 !important;

}



a {

  text-decoration: none !important;

  color: #2b3857 !important;

  font-family: "Poppins", serif;

  font-weight: 300;

}



/* Color Code */

.text-primary {

  color: #003378 !important;

}



.text-secondary {

  color: #5cb324 !important;

}



.text-dark {

  color: #2b3857 !important;

}



.bg-primary {

  background: linear-gradient(#cb2382, #691746) !important;

}



.bg-secondary {

  background: #003378 !important;

}



.text-blue{

  color: #003378 !important;

}



.btn-primary {

  background-color: #003378 !important;

  color: white !important;

  border: none !important;

  position: relative;

  overflow: hidden;

  z-index: 1;

}

.btn-primary::before {

  content: "";

  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 100%;

  background-color: #003378;

  z-index: -1;

  transition: left 0.7s ease;

}



.btn-primary:hover::before {

  left: 0;

}



.btn-primary {

  background-color: #003378 !important;

  color: white !important;

  border: none !important;

  position: relative;

  overflow: hidden;

  z-index: 1;

}

.btn-primary::before {

  content: "";

  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 100%;

  background-color: #003378;

  z-index: -1;

  transition: left 0.7s ease;

}



.btn-primary:hover::before {

  left: 0;

}



.btn-light {

  background-color: white !important;

  color: #2b3857 !important;

  border: none !important;

  position: relative;

  overflow: hidden;

  z-index: 1;

}

.btn-light::before {

  content: "";

  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.244);

  z-index: -1;

  transition: left 0.7s ease;

}



.btn-light:hover::before {

  left: 0;

}

.bg-light {

  background-color:#003278 !important;

}



.bg-secondary-subtle {

  background-color: rgb(94% 94% 94%) !important;

}



.btn-outline-primary {

  --bs-btn-color: #fff;

  --bs-btn-border-color: #a9226e;

  --bs-btn-hover-color: #a9226e;

  --bs-btn-hover-bg: white;

  --bs-btn-hover-border-color: #a9226e;

  --bs-btn-focus-shadow-rgb: 13, 110, 253;

  --bs-btn-active-color: #fff;

  --bs-btn-active-bg: #a9226e;

  --bs-btn-active-border-color: #a9226e;

  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

  --bs-btn-disabled-color: #a9226e;

  --bs-btn-disabled-bg: transparent;

  --bs-btn-disabled-border-color: #a9226e;

}

.btn-outline-primary1 {

  --bs-btn-color: #a9226e;

  border: 1px solid #a9226e !important;

  --bs-btn-hover-color: #a9226e;

  --bs-btn-hover-bg: white;

  --bs-btn-hover-border-color: #a9226e;

  --bs-btn-focus-shadow-rgb: 13, 110, 253;

  --bs-btn-active-color: #fff;

  --bs-btn-active-bg: #a9226e;

  --bs-btn-active-border-color: #a9226e;

  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

  --bs-btn-disabled-color: #a9226e;

  --bs-btn-disabled-bg: transparent;

  --bs-btn-disabled-border-color: #a9226e;

}



/* News Letter */

.newslatter {

  background-color: #003378;

}



.newslatter .card {

  background: rgba(255, 255, 255, 0.15);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(255, 255, 255, 0.3);

  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);

  border-radius: 1rem;

  color: #fff;

}



/* Header */

.contact-bar {

  padding: 10px 0;

}



.contact-bar a {

  text-decoration: none;

  margin-left: 10px;

}

.social-icons a {

  margin: 0 5px;

  font-size: 18px;

}

.icon-bg {

  background-color: rgba(255, 255, 255, 0.2);

  padding: 9px;

  border-radius: 50%;

  font-size: 17px;

  &:hover {

    color: #003378;

  }

}



.fab {

  width: 35px;

  height: 35px;

  display: flex;

  justify-content: center;

  align-items: center;

}

/* Color Code */

.navbar {

  z-index: 1000;

  /* background-color: #fff; */

  /* box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); Optional shadow */

}

.navbar.scrolled {

  top: 0;

  position: fixed;

  background-color: #fff;

  transition: all 1s ease-in-out;

  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);

}



/* Navbar */

#navbar-main .nav-link, .dropdown-menu .dropdown-item {

  font-size: 18px;

  font-weight: 500;

  text-decoration: none;

  position: relative;

  margin-right: 5px;



  &:hover {

    color: #a9226e !important;

  }

}



#navbar-main .nav-link{

  width: fit-content;

}



.dropdown-menu .dropdown-item{

  width: 100%;

}



#navbar-main .nav-link:hover::after {

  width: 100%;

}



#navbar-main .nav-link:focus,

#navbar-main .nav-link:hover {

  color: #a9226e;

}



.dropdown-menu{

  border: 0;

  box-shadow: 0 0 5px rgba(0, 0, 0, 0.151);

}



.dropdown-menu .dropdown-item{

  padding: 0.5rem 1rem;

  height: 50px;

  display: flex;

  justify-content: start;

  align-items: center;

  gap: 10px;

}



/* Show dropdown on hover */

.nav-item.dropdown:hover .dropdown-menu {

  display: block;

}



/* Remove Bootstrap default dropdown arrow */

.nav-link.dropdown-toggle::after {

  display: none !important;

}





.toggler-icon {

  width: 25px;

  cursor: pointer;

  margin-left: 15px;

  display: block;

  z-index: 99;

}



.toggler-icon span {

  display: block;

  width: 100%;

  height: 3px;

  border-radius: 50px;

  background-color: #a9226e;

  margin-bottom: 5px;

  transition: 0.3s ease-in-out;

}



.toggler-icon .hb-1 {

  width: 10px;

}

.toggler-icon .hb-3 {

  width: 18px;

}



.toggler-icon:hover .hb-1,

.toggler-icon:hover .hb-3 {

  width: 25px;

}



/* Contact Button */

.btn-hover-effect {

  position: relative;

  display: inline-block;

  padding: 10px 20px;

  font-size: 16px;

  font-weight: bold;

  border: none;

  cursor: pointer;

  overflow: hidden;

  z-index: 1;

  border-radius: 0;

  border-top-left-radius: 12px;

  border-bottom-right-radius: 12px;

  position: relative;

  animation: pulse 1.5s infinite;

}



@keyframes pulse {

  0% {

    box-shadow: 0 0 0 0px #aaa8a8;

  }

  100% {

    box-shadow: 0 0 6px 13px rgba(0, 0, 0, 0);

  }

}



.btn-hover-effect::before {

  content: "";

  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 100%;

  background-color: #b2337b;

  z-index: -1;

  transition: left 0.7s ease;

}



.btn-hover-effect:hover::before {

  left: 0;

}



.btn-hover-effect:hover {

  color: #fff;

}



/* Section 1 */

.card-img-overlay {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  color: white;

}



.card-img-overlay .btn {

  margin: 10px;

  padding: 12px 20px;

  font-size: 1.1rem;

  border-radius: 5px;

  font-weight: 700;

}



.btn-light {

  background: white;

  color: black;

}



.carousel-overlay {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.5);

}



@media (max-width: 768px) {

  .card-img-overlay h1 {

    font-size: 30px;

  }

  .card-img-overlay p {

    font-size: 16px;

  }

  .s1-btns .btn {

    font-size: 0.9rem;

    padding: 8px 16px;

  }

}



@media (max-width: 480px) {

  .card-img-overlay h1 {

    font-size: 24px;

  }

  .card-img-overlay p {

    font-size: 14px;

  }

  .s1-btns .btn {

    font-size: 0.8rem;

    padding: 6px 12px;

  }

}



/* Section 2 */





.list-style-one{

  position:relative;

}



.list-style-one li{

  position:relative;

  font-size:16px;

  line-height:26px;

  font-weight: 500;

  padding-left:35px;

  margin-bottom: 12px;

}



.list-style-one li:before {

    content: "\f058";

    position: absolute;

    left: 0;

    top: 0px;

    display: block;

    font-size: 18px;

    padding: 0px;

    color: #a9226e;

    font-weight: 600;

    -moz-font-smoothing: grayscale;

    -webkit-font-smoothing: antialiased;

    font-style: normal;

    font-variant: normal;

    text-rendering: auto;

    line-height: 1.6;

    font-family: "Font Awesome 5 Free";

}







/* Section 3 */



.col-xl-4 {

  overflow: hidden;

}



.col-xl-4 .ms-img {

  transition: transform 0.3s ease-in-out;

}



.col-xl-4 .ms-img:hover {

  transform: scale(1.1);

}



.s2-card .h3 {

  transition: color 0.5s ease-in-out;

}



.s2-card .h3:hover {

  color: #a9226e !important;

}

.read-more {

  transition: color 0.5s ease-in-out;

}



.read-more:hover {

  color: #a9226e !important;

}



.icon-box {

  width: 100px;

  height: 100px;

  background-color: #003378;

  margin-bottom: 10px;

  position: relative;

  display: flex;

  justify-content: center;

  align-items: center;

}



.icon-box img {

  color: #a9226e;

  width: 50px;

  height:50px;

  position: relative;

}



.icon-box::before {

  content: "";

  width: calc(100% - 20px);

  height: calc(100% - 20px);

  position: absolute;

  right: 10px;

  top: 10px;

  clip-path: path(

    "M1.53706 42.747C-1.0318 52.07 -0.891847 61.9909 5.9434 68.4693C17.2211 79.1562 37.0858 80.8704 50.7021 79.67C56.5261 79.1562 62.4087 77.8858 67.6187 74.6395C72.8286 71.3933 77.3343 65.9658 79.1176 59.1183C82.016 47.9877 77.3162 36.0583 71.6729 26.6653C66.9911 18.8743 61.4787 11.6905 54.7789 6.60865C41.0632 -3.79332 26.553 -2.1632 16.1286 13.2599C11.4694 20.1448 4.62963 31.5136 1.53706 42.747Z"

  );

  background-color: #fff;

}



/* Section 4 */



.work-process {

  display: inline-block; /* Ensures it takes the width of the content */

  line-height: 1;

  font-size: 20px;

  color: #003378;

  font-weight: 500;

  position: relative;

  text-align: center;

}



.work-process::before {

  content: "";

  height: 3px;

  width: 120px;

  position: absolute;

  background-color: #aaa8a8;

  bottom: -10px; /* Moves the line slightly below the text */

  left: 50%; /* Centers it */

  transform: translateX(-50%); /* Ensures it stays centered */

}



.work-process::after {

  content: "";

  height: 3px;

  width: 50px;

  position: absolute;

  background-color: #a9226e;

  bottom: -10px;

  left: 50%;

  transform: translateX(-50%);

}



.work-line {

  width: 4px;

  background-color: #003378;

  left: 50%;

  height: calc(100% + 60px);

  transform: translateX(-50%);

}



.work-line2 {

  width: 4px;

  background-color: #003378;

  left: 50%;

  height: calc(100% + 60px);

  transform: translateX(-50%);

}



.work-line3 {

  width: 4px;

  background-color: #003378;

  left: 50%;

  height: calc(100% + 20px);

  transform: translateX(-50%);

}



.work-line::before {

  content: "";

  position: absolute;

  width: 20px;

  height: 20px;

  background-color: #003378;

  border-radius: 50%;

  left: calc(0% - 8px);

  top: calc(0% - 5px);

}



.work-line3::before {

  content: "";

  position: absolute;

  width: 20px;

  height: 20px;

  background-color: #003378;

  border-radius: 50%;

  left: calc(0% - 8px);

  bottom: calc(0% - 5px);

}



.work-step {

  width: 70px;

  height: 70px;

  border-radius: 50%;

  background-color: #fff;

  border: 4px solid #003378;

  box-shadow: 0px 0px 10px 3px #aaa8a8;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 20px;

  font-weight: bold;

  color: black;

  position: relative;

  z-index: 1 !important;

}



/* First Outer Circle */

.work-step::before {

  content: "";

  position: absolute;

  width: 100px; /* Slightly larger */

  height: 100px;

  border-radius: 50%;

  background-color: transparent;

  box-shadow: 0px 0px 10px 3px #aaa8a8;

  border: 4px solid #003378;

  z-index: -1 !important;

}



.work-right-img {

  height: 300px; /* Default height for mobile */

  object-fit: cover;

}



@media (min-width: 992px) {

  /* lg and above */

  .work-right-img {

    height: 200px; /* Adjust height for large screens */

  }

}



.work-content .card {

  box-shadow: 0 2px 25px 0 #aaa8a8;

}



/* Section 5 */

.image-container {

  position: relative;

  overflow: hidden;

}



.image-container img {

  width: 100%;

  height: 350px;

  display: block;

  transition: transform 0.3s ease-in-out;

}



.image-container:hover img {

  transform: scale(1.1); /* Slight zoom effect */

}



.overlay {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  text-align: center;

  color: white;

  background: rgba(0, 0, 0, 0.5);

  width: 100%;

  height: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  opacity: 1;

  padding: 10px;

}



/* Hide text initially */



.overlay i,

.overlay h3 {

  transform: translateY(50px);

  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;

}



.image-container:hover .overlay i,

.image-container:hover .overlay h3 {

  transform: translateY(0);

  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;

}

.overlay p {

  opacity: 0;

  transform: translateY(50px);

  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;

}



/* On hover, bring text up */

.image-container:hover .overlay p {

  opacity: 1;

  transform: translateY(0);

}



/* Section 6 */



.internship-cards .card {

  width: 85%;

  box-shadow: 0 2px 25px 0 #aaa8a8;

}



/* Section 8 */



/* Owl Carousel Item Styling */



.testimonial-card {

  background-color: white;

  border-radius: 15px;

  padding: 30px;

  position: relative;

}

.quote-icon {

  font-size: 40px;

  font-weight: bold;

}

.quote-open {

  position: absolute;

  top: 15px;

  left: 15px;

}

.quote-close {

  position: absolute;

  bottom: 15px;

  right: 15px;

}

.author {

  margin-top: 15px;

  text-align: center;

}

.author-name {

  font-weight: bold;

}

.author-role {

  font-style: italic;

}



/* Section 9 */



/* .strength-cards{

  display: flex;

  justify-content: center;

  gap: 20px;

} */



.strength-cards .card {

  width: 100%;

  height: 100px;

   box-shadow: 0 2px 25px 0 #aaa8a8;

}



/* Footer */

ul {

  margin: 0px;

  padding: 0px;

}

.footer-section {

  position: relative;

}

.footer-cta {

  border-bottom: 1px solid #373636;

}

.single-cta i {

  color: #a9226e;

  font-size: 30px;

  float: left;

  margin-top: 8px;

}

.cta-text {

  padding-left: 15px;

  display: inline-block;

}

.cta-text h4 {

  color: #fff;

  font-size: 20px;

  font-weight: 600;

  margin-bottom: 2px;

}

.cta-text span {

  color: #757575;

  font-size: 15px;

}

.footer-content {

  position: relative;

  z-index: 2;

}

.footer-pattern img {

  position: absolute;

  top: 0;

  left: 0;

  height: 330px;

  background-size: cover;

  background-position: 100% 100%;

}

.footer-logo {

  margin-bottom: 30px;

}

.footer-logo img {

  max-width: 200px;

}

.footer-text p {

  margin-bottom: 14px;

  font-size: 14px;

  color: #7e7e7e;

  line-height: 28px;

}

.footer-social-icon span {

  color: #fff;

  display: block;

  font-size: 20px;

  font-weight: 700;

  font-family: "Poppins", sans-serif;

  margin-bottom: 20px;

}

.footer-social-icon a {

  color: #fff;

  font-size: 16px;

  margin-right: 15px;

}

.footer-social-icon i {

  height: 40px;

  width: 40px;

  text-align: center;

  line-height: 38px;

  border-radius: 50%;

}

.facebook-bg {

  background: #3b5998;

}

.twitter-bg {

  background: #55acee;

}

.google-bg {

  background: #dd4b39;

}

.footer-widget-heading h3 {

  color: #fff;

  font-size: 20px;

  font-weight: 600;

  margin-bottom: 40px;

  position: relative;

}

.footer-widget-heading h3::before {

  content: "";

  position: absolute;

  left: 0;

  bottom: -15px;

  height: 2px;

  width: 50px;

  background: #a9226e;

}

.footer-widget ul li {

  display: inline-block;

  float: left;

  width: 50%;

  margin-bottom: 12px;

}

.footer-widget ul li a:hover {

  color: #a9226e;

}

.footer-widget ul li a {

  color: #878787;

}

.subscribe-form {

  position: relative;

  overflow: hidden;

}

.subscribe-form input {

  width: 100%;

  padding: 14px 28px;

  background: #2e2e2e;

  border: 1px solid #2e2e2e;

  color: #fff;

}

.subscribe-form button {

  position: absolute;

  right: 0;

  background: #a9226e;

  padding: 13px 20px;

  border: 1px solid #a9226e;

  top: 0;

}

.subscribe-form button i {

  color: #fff;

  font-size: 22px;

  transform: rotate(-6deg);

}

.copyright-area {

  background: #202020;

  padding: 25px 0;

}



.footer-menu li {

  display: inline-block;

  margin-left: 20px;

}

.footer-menu li:hover a {

  color: #a9226e !important;

}

.footer-menu li a {

  font-size: 14px;

  color: #fff !important;

}





/* Chatbot */

.pulse i {

  position: relative;

  z-index: 20;

  top: 16px;

  font-size: 30px;

}

.pulse {

  cursor: pointer;

  width: 60px !important;

  height: 60px;

  bottom: 40px;

  right: 40px;

  background-color: rgba(0, 200, 0, 1);

  transition-duration: 0.5s;

  animation: pulse-btn 3s infinite;

  z-index: 9000;

}



.pulse:hover {

  background-color: rgba(0, 150, 0, 1);

  color: white;

}





@-webkit-keyframes pulse-btn {

  0% {

    -webkit-box-shadow: 0 0 0 0 rgba(0, 200, 0, 1);

  }

  70% {

    -webkit-box-shadow: 0 0 0 20px rgba(0, 200, 0, 0);

  }

  100% {

    -webkit-box-shadow: 0 0 0 0 rgba(0, 200, 0, 0);

  }

} 









.title-head{

  font-size: 150px

}

.sub-title-head{

  font-size: 100px

}









.tabs {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 25px;

  border-bottom: 2px solid #e0e0e0;

  margin-bottom: 30px;

}

.tab {

  cursor: pointer;

  padding: 10px 20px;

  font-weight: 500;

  color: #333;

  border-bottom: 3px solid transparent;

}

.tab.active {

  color: #cb2382;

  border-bottom-color: #b2337b;

}

.tech-grid {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-evenly;

  gap: 30px;

}

.tech-item {

  text-align: center;

}

.tech-item img {

  width: 100px;

  height: 100px;

  object-fit: contain;

  margin-bottom: 10px;

}

/* h2 {

  font-weight: bold;

  margin-bottom: 30px;

} */









/* ============================About us================================= */



.contentLeft,

.contentRight{

    width: 100%;

}

.lrow{

    width: 100%;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    grid-gap: 10px;

}

 .lrow .imgWrapper{

    width: 100%;

    height: 150px;

    overflow: hidden;

    border-radius: 10px;

    cursor: pointer;

    box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.15);

}

.lrow .imgWrapper img{

    width: 100%;

    height: 100%;

    object-fit: cover;

    user-select: none;

    transition: 0.3s ease;

}

 .lrow .imgWrapper:hover img{

    transform: scale(1.5);

}

.lrow .imgWrapper:nth-child(odd){

    transform: translateY(-20px);

}

.lrow .imgWrapper:nth-child(even){

    transform: translateY(20px);

}

.contentRight .content{

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 15px;

}

.contentRight .content h4{

    font-size: 22px;

    font-weight: 400;

    color: #d35400;

}

.contentRight .content h2{

    font-size: 40px;

    color: #1e272e;

}

.contentRight .content p{

    font-size: 16px;

    color: #343434;

    line-height: 28px;

    padding-bottom: 10px;

}

.contentRight .content a{

    display: inline-block;

    text-decoration: none;

    font-size: 16px;

    letter-spacing: 1px;

    padding: 13px 30px;

    color: #fff;

    background: #d35400;

    border-radius: 8px;

    user-select: none;

}

@media(max-width: 768px){

    /* .container{

        grid-template-columns: 1fr;

    } */

    .contentLeft .row{

        grid-template-columns: repeat(2, 1fr);

    }

    .contentLeft .row .imgWrapper{

        height: 150px;

    }

    .contentRight .content h4{

        font-size: 18px;

    }

    .contentRight .content h2{

        font-size: 30px;

    }

}





.about_icon i {

  font-size: 22px;

  height: 65px;

  width: 65px;

  line-height: 65px;

  display: inline-block;

  background: #fff;

  border-radius: 35px;

  color: #b2337b;

  box-shadow: 0 8px 20px -2px rgba(158, 152, 153, 0.5);

}



.about_header_main .about_heading {

  max-width: 450px;

  font-size: 24px;

}



.about_icon span {

  position: relative;

  top: -10px;

}



.about_content_box_all {

  padding: 28px;

}





/* =====================About image crousel================================ */

.carousel-container {

  width: 100%;

  /* max-width: 1000px; */

  overflow: hidden;

  /* border: 4px solid #333; */

  border-radius: 12px;

}



.carousel-track {

  display: flex;

  gap: 30px;

  animation: scroll 30s linear infinite;

}



.carousel-track img {

  width: 300px;

  height: 180px;

  border-radius: 10px;

  object-fit: cover;

}



.carousel-container:hover .carousel-track {

  animation-play-state: paused;

}



@keyframes scroll {

  0% {

    transform: translateX(0);

  }

  100% {

    transform: translateX(-50%);

  }

}







/* ====================Services=========================== */

/* @import url('https://fonts.googleapis.com/css?family=Lato:300,400,700');



$font: 'Lato', sans-serif;



$purple: #602566;

$lightpink: #F7E8F2;



*, 

html {

  padding: 0;

  margin: 0;

  text-align: center;

  font-family: $font;

}



body {

  background: $lightpink;

  box-sizing: border-box;

} */



.wrapper {

  padding: 60px auto; 

}



.page-title {

  margin: 80px auto;

  h1 {

    text-transform: lowercase;

    letter-spacing: 10px;

    font-size: 4em;

    font-weight: 300;

  }

  p {

    text-transform: uppercase;

    letter-spacing: 18px;

  }

}



.service-card {

  width: 100%;

  max-height: 280px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  flex-direction: column;

  align-items: space-between;

  align-self: stretch;

  justify-self: stretch;

  margin-bottom: 30px;

  overflow: hidden;

  transition: transform 0.3s;

  border-radius: 10px;

  

  svg {

    width: 100%;

    padding: 10px;

  }



  @media (max-width: 576px) {

    .service-card {

        display: none !important;

    }

}

  /* h2 {

    text-transform: uppercase;

    letter-spacing: 2px;

    font-size: 1.2em;

  } */

  

  /* a {

    /* font-family: $font; 

    text-transform: lowercase;

    letter-spacing: 2px;

    font-size: 1.2em;

    font-weight: 300;

    padding: 12px 20px;

    font-family: sans-serif;

    font-size: 16px;

    color: #DB6B86;

    border: 1px solid #DB6B86;

    text-decoration: none;

    transition: all .4s ease-in-out;

    background-color: #EFDFED; 



    &:hover {

      background-color: #DB6B86;

      color: #fff;

    }

  } */

}



.icon-wrap {

  display: flex;

  justify-content: space-around;

  flex-wrap: wrap;

  align-items: center;

  margin-bottom: 0px;

}



.icon-design {

  

  animation-play-state: running;

  

  .anchor-part {

    animation: move 2s linear infinite;

	}



  .anchor-part--2 {

	  animation: move2 2s linear infinite;

	}

  

  .pen-part {

    transform-origin: 140px 180px;

	  animation: bounce2 2s ease-in-out infinite;

  }

  

	.ruler-part {

    transform-origin: 140px 180px;

	  animation: bounce 1s ease-in-out infinite;

	}

  

  .circle-part {

    transform-origin: 139.8px 167.8px;

    animation: rotate 4s linear infinite;

  }



	.cursor-part {

	  animation: bounceBFt2 2s ease-in-out infinite;

	}



	@keyframes move {

	  0%, 100% {

	    transform: translate(1px, 1px);

	  }



	  50% {

	    transform: translate(-1px, -1px);

	  }

	}



	@keyframes move2 {

	  0%, 100% {

	    transform: translate(-1px, -1px);

	  }



	  50% {

	    transform: translate(1px, 1px);

	  }

	}

}



.icon-develop {

  

  animation-play-state: running;

  animation-iteration-count: infinite;

  animation-timing-function: linear;

  

  .gear-b {

    animation: rotate-reverse 6s;

  }



  .gear-s {

    animation: rotate 12s linear infinite;

  }



  #XMLID_87_,

  #XMLID_85_,

  #XMLID_83_ {

    animation: twinkle 3s ease-in-out infinite;

  }



  #XMLID_85_ {

    animation-delay: .4s;

  }



  #XMLID_83_ {

    animation-delay: .6s;

  }



  .line-t,

  .line-m,

  .line-b {

    animation: shrink 1.8s ease-in-out infinite;

  }



  .line-m {

    animation-delay: .3s;

  }



  .line-b {

    animation-delay: .6s;

  }

  

  .code {

    

    &-letter_o {

      animation: typingO 3s linear infinite;

    }

    

    &-letter_d {

      animation: typingD 3s linear infinite;

    }

    

    &-letter_e {

      animation: typingE 3s linear infinite;

    }

    

    @keyframes typingE {

      20.1%, 80% {

        fill: transparent;

     }

       

      20%, 80.1% {

        fill: #fff;

      }

    }

    

    @keyframes typingD {

      30.1%, 70% {

        fill: transparent;

     }

       

      30%, 70.1% {

        fill: #fff;

      }

    }

    

    @keyframes typingO {

      40.1%, 60% {

        fill: transparent;

     }

       

      40%, 60.1% {

        fill: #fff;

      }

    } 

  }



}



.icon-support {

  

  animation-play-state: running;

  animation-iteration-count: infinite;

  animation-timing-function: linear;



  .gear-s,

  .gear-m {

    animation: rotate;

    animation-duration: 6s;

  }



  .gear-b {

    animation: rotate-reverse 6s;

  }



  .clock {

    transform-origin: 223.6px 132.8px;

    animation: rotate 12s linear infinite;

  }

}



.icon-eComm {

  

  animation-play-state: running;



  .overlay {

    transform: translate(82px, -214px);

  }

  

  .bubble-b {

    animation: bubble-b 3.4s linear infinite;

  }



  .bubble-m {

    animation: bubble-m 3.4s linear infinite;

  }



  .bubble-t {

    animation: bubble-t 3.4s linear infinite;

  }

  

  .hand,

  .bag-f,

  .bag-b,

  .bag-f--tag {

    transform-origin: 320px 200px;

    animation: bounce2 1.6s ease-in-out infinite;

  }



  .bag-bb {

    animation-delay: .4s;

  }

  

  .bag-f--tag,

  .bag-bb {

    transform-origin: 200px 190px;

    animation: bounce 1.6s ease-in-out infinite;

  }

  

  .bag-b {

    transform-origin: 160px 160px;

    animation: bounce 1.6s ease-in-out infinite;

  }

  

  .credit-card {

    

    circle:nth-of-type(1) {

      animation: shift 6s ease-in-out infinite;

    }

    

    circle:nth-of-type(2) {

      animation: shift2 6s ease-in-out infinite;

    }

    

    @keyframes shift {

      0% {

        transform: translateX(0);

        opacity: 1;

      }

      

      25%, 75% {

        opacity: 0.7;

      }

      

      50% {

        transform: translateX(10px);

        opacity: 1;

      }

    }

    

    @keyframes shift2 {

      0% {

        transform: translateX(0);

        opacity: 1;

      }

      

      25%, 75% {

        opacity: 0.7;

      }

      

      50% {

        transform: translateX(-10px);

        opacity: 1;

      }

    }

  }

}



.icon-mobApps {

  animation-play-state: running;

  

  .gear {

    animation: rotate 30s linear infinite;

  }

  

  .line-t,

  .line-m,

  .line-b {

    animation: shrink 2.2s ease-in-out infinite;

  }

  

  .play-btn polygon {

    animation: twinkle 3s linear infinite;

  }



  .line-m {

    animation-delay: .3s;

  }



  .line-b {

    animation-delay: .6s;

  }

  

  .ruler {

    transform-origin: 300px 200px;

    animation: bounceBFt2 2s ease-in-out infinite;

  }

  

  .hook {

    transform-origin: 148px 24px;

    animation: bounce3 1.6s ease-in-out infinite;

  }

  

  .play-bar--play {

    opacity: 0;

  }



  .play-bar--pause {

    opacity: 1;

  }

}



.icon-wordpress {

  animation-play-state: running;

  width: 80%;

  

  .graph {

    animation: bounce 1.4s ease-in-out infinite;

  }

  

  .mouse {

    animation: bounceBFt2 1.6s ease-in-out infinite;

  }

  

  .wp-logo {

    animation: twinkle2 4s ease-in-out infinite;

  }

  

  .keyboard {

    

    $dur: 2.75s;

    

    [class*=key]{

      animation-play-state: running;

      animation: typing $dur linear infinite;

    }

    

    $steps: 1 2 3 4 5 6 7 8 9 10 11 12;

    @each $step in $steps {

      .key-#{$step} {

        animation-delay: ( $dur / 12 ) * $step;

      }

    }



    @keyframes typing {

      0%, 2% {

        opacity: 0.6;

      }

      

      4% {

        opacity: 1;

      }

    }

  }

  

  .code {

    

    &-line {

      animation: shrink 1s ease-in-out infinite;

    }

    

    &-line1 {

      animation-delay: .3s;

    }

    

    &-line2 {

      animation-delay: .9s;

    }

    

    &-line3 {

      animation-delay: .2s;

    }

    

    &-line5 {

      animation-delay: .5s;

    }

    

    &-line6 {

      animation-delay: .8s;

    }

    

    &-line8 {

      animation-delay: .4s;

    }

  }

  

}



.icon-webApps {

  

  animation-play-state: running;

  

  .ruler {

    animation: bounceBF 1.8s ease-in-out infinite;

  }

  

  .panel {

    animation: twinkle3 3s ease-in-out infinite;

    

    &2 {

      animation-delay: .5s;

    }

    

    &3 {

      animation-delay: 1s;

    }

    

    &4 {

      animation-delay: 1.5s;

    }

    

    &5 {

      animation-delay: 2s;

    }

  }

  

  .line-1 {

    transform-origin: 162px;

    animation: shrink 2s ease-in-out infinite;

  }



  .line-2,

  .line-3 {

    transform-origin: 144.3px 0;

    animation: shrink 2s ease-in-out infinite;

  }



  .line-2 {

    animation-delay: -.4s;

  }

  

  .blink1,

  .blink2,

  .blink3 {

    animation: 6s linear infinite;

  }

  

  .blink1 {

    animation-name: bubble-b; 

  }

  

  .blink2 {

    animation-name: bubble-m; 

  }

  

  .blink3 {

    animation-name: bubble-t; 

  }

  

  .play-btn {

    opacity: 1;

  }

  

  .pause-btn {

    opacity: 0;

  }

  

  &:hover {

    .play-btn {

      opacity: 0;

    }

    .pause-btn {

      opacity: 1;

    }

  }

}



.star {

  animation: twinkle 4s ease-in-out infinite;

  

  &-2 {

    animation-delay: 1s;

  }

}



@keyframes twinkle {

  0%, 50%, 100% {

    transform: scale(1);

  }

  

  25%, 75% {

    transform: scale(1.6);

  }

}



@keyframes twinkle2 {

  0%, 50%, 100%  {

    transform: scale(1);

  }



  25%, 75% {

    transform: scale(1.07);

  }

}



@keyframes twinkle3 {

  0%, 50%, 100%  {

    transform: scale(1);

  }



  25%, 75% {

    transform: scale(1.14);

  }

}



@keyframes bubble-t {

  26%, 80% {

    transform: scale(0);

 }



  20%, 86% {

    transform: scale(1);

  }

}



@keyframes bubble-m {

  36%, 70% {

    transform: scale(0);

 }



  30%, 76% {

    transform: scale(1);

  }

}



@keyframes bubble-b {

  46%, 60% {

    transform: scale(0);

 }



  40%, 66% {

    transform: scale(1);

  }

}



@keyframes bounce {

  50% {

    transform: rotate(-6deg);

  }

}



@keyframes bounce2 {

  50% {

    transform: rotate(6deg);

  }

}



@keyframes bounce3 {

  50% {

    transform: rotate(3deg);

  }

}



@keyframes bounceBF {

  0%, 100% {

   transform: rotate(1.6deg);

  }

  

  50% {

    transform: rotate(-1.6deg);

  }

}



@keyframes bounceBFt2 {

  0%, 100% {

   transform: rotate(4.6deg);

  }

  

  50% {

    transform: rotate(-4.6deg);

  }

}



@keyframes shrink {

  50% {

    transform: scaleX(0.3);

  }

}



@keyframes rotate {

  to {

    transform: rotate(1turn);

  }

}



@keyframes rotate-reverse {

  to {

    transform: rotate(-1turn);

  }

}







/* ==========================Service Details============================ */



.devops-section {

  color: #fff;

  padding: 60px 20px;

  text-align: center;

}



.section-title {

  font-size: 28px;

  margin-bottom: 10px;

}



.section-subtitle {

  font-size: 16px;

  color: #ccc;

  margin-bottom: 40px;

}



.container {

  max-width: 1100px;

  margin: 0 auto;

}



.devops-box {

  border: 2px dashed #555;

  border-radius: 20px;

  padding: 10px 10px;

  position: relative;

}



.devops-label {

  /* position: absolute; */

  width: 100%;

  font-size: 16px;

  color: #888;

  letter-spacing: 1px;

  padding: 10px;

}



.devops-label.top {

  margin-bottom: 20px;

  margin-top: 0px;

  text-align: center;

}



.devops-label.bottom {

  margin-top: 20px;

  margin-bottom: 0px;

  text-align: center;

}



.devops-flow {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 25px;

  z-index: 2;

  align-items: center;

}



.flow-step {

  /* background-color: #b2337b; */

  border-radius: 16px;

  padding: 20px 15px;

  width: 100px;

  height: 100px;

  transition: 0.3s ease;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  position: relative;

}



.flow-step img {

  width: 40px;

  height: 40px;

  margin-bottom: 10px;

}



.flow-step p {

  margin: 0;

  font-size: 14px;

}



.flow-step.activediv {

  border: 2px solid #b2337b;

  background-color: var(--bs-btn-active-color);

}





.devops-description {

  margin-top: 40px;

}



.devops-description h3 {

  /* color: #ff5500; */

  font-size: 22px;

  margin-bottom: 10px;

}



.devops-description p {

  font-size: 15px;

  color: #ccc;

  max-width: 700px;

  margin: 0 auto;

  line-height: 1.6;

}



/* Responsive */

@media (max-width: 768px) {

  .flow-step {

    width: 80px;

    height: 80px;

  }



  .flow-step p {

    font-size: 12px;

  }



  .devops-description p {

    font-size: 14px;

  }

}

















.tagline {

  color: #a9226f;

  font-weight: bold;

  text-transform: uppercase;

  letter-spacing: 1px;

}

/* 

.icon-circle {

  width: 120px;

  height: 120px;

  border: 2px solid #b2337b;

  border-radius: 50%;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

}



.icon-circle::before,

.icon-circle::after {

  content: "";

  position: absolute;

  width: 10px;

  height: 10px;

  background-color: #cb2382;

  border-radius: 50%;

}



.icon-circle::before {

  top: -6px;

  left: 50%;

  transform: translateX(-50%);

}



.icon-circle::after {

  bottom: -6px;

  right: 50%;

  transform: translateX(50%);

}



.icon-circle img {

  width: 48px;

  height: 48px;

  filter: grayscale(100%);

}
 */






/* =======================expertise=========================== */

/* 

    .expertise-section {

      display: flex;

      flex-wrap: wrap;

      align-items: stretch;

      min-height: 400px;

    }



    .expertise-left {

      background: linear-gradient(135deg, #b2337b, #cb2382);

      color: white;

      padding: 40px 30px;

      flex: 1;

    }



    .expertise-left h3 {

      font-weight: 700;

      margin-bottom: 20px;

      color: white !important;

    }



    .expertise-left p {

      font-size: 16px;

      margin-bottom: 30px;

      color: white !important;

    }



    .skill-circles {

      display: flex;

      gap: 20px;

      justify-content: center;

      flex-wrap: wrap;

    }



    .circle {

      width: 150px;

      height: 150px;

      border: 5px solid white;

      border-radius: 50%;

      display: flex;

      flex-direction: column;

      justify-content: center;

      align-items: center;

      font-weight: bold;

      font-size: 14px;

      text-align: center;

      padding: 50px;

      background-color: rgba(255, 255, 255, 0.1);

    }



    .circle span {

      font-size: 22px;

      display: block;

      margin-bottom: 5px;

    }



    .expertise-right img {

      width: 100%;

      height: 100%;

      object-fit: cover;

    }



    @media (max-width: 768px) {

      .expertise-section {

        flex-direction: column;

      }

    }
 */