/* @import url("fonts/stylesheet.css"); */



@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");



body {

  /* min-height: 100vh; */

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

  font-size: 16px;

  /* font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; */

  margin: 0;

  padding: 0;

  overflow-y: auto;

  /*background-color: red; */

}



body::-webkit-scrollbar {

  width: 10px;

}

body::-webkit-scrollbar-thumb {

  background-color: #fa9800 !important;

  border-radius: 5px;

}

body::-webkit-scrollbar-track {

  background-color: black;

  

}



body.dark-mode {

  background-color: #121212;

  color: #ffffff;

}

/* body.dark-mode .navbar, */

body.dark-mode .dropdown-menu,

body.dark-mode .modal-content,

body.dark-mode header,

body.dark-mode .custom-submenu-list,

body.dark-mode .services,

body.dark-mode .aboutus,

body.dark-mode .dc-user-support,

/* adding new classes */

body.dark-mode .card-body {

  background-color: #121212;

  color: #ffffff;

}



body.dark-mode a,

body.dark-mode .nav-link,

body.dark-mode .text-white,

body.dark-mode .services .heading-decor h3,

body.dark-mode .services .heading-decor p,

body.dark-mode .aboutus .heading-decor h2,

body.dark-mode .aboutus .heading-decor p,

body.dark-mode .carousel-item .lead,

body.dark-mode .carousel-item .text-muted,

body.dark-mode input::placeholder {

  color: #ffffff !important;

}

body.dark-mode a.more-info {

  color: #0056b3 !important;

}

body.dark-mode .feature-card .fw-bold body.dark-mode input::placeholder {

  color: #0056b3 !important;

}

body.dark-mode .feature-card .fw-bold,

body.dark-mode .dc-home-section .dc-user-support .support-box > div > div b {

  color: #fa9800 !important;

}

body.dark-mode .btn,

body.dark-mode .form-control {

  background-color: #121212;

  color: #ffffff;

  border-color: #444;

}

body.dark-mode .dc-you-get .feature-box {

  background-color: #000 !important;

  color: #fff !important;

  border: 1px solid #444;

}

body.dark-mode .dc-user-support p,

body.dark-mode .dc-user-support b,

body.dark-mode .testimonial-wrapper .card-content.default h1,

body.dark-mode .testimonial-wrapper .card-content.default p,

body.dark-mode .testimonial-wrapper .card-content.new p,

body.dark-mode #backToTopBtn > div i::before {

  color: #121212 !important;

}



/* adding new classes */

body.dark-mode .btn-custom,

body.dark-mode .submit-container button,

body.dark-mode .partners-container,

body.dark-mode .plan-card-container .card-items .card-body .button-container a,

body.dark-mode .gen-ai .card-title {

  background-color: #fff;

  color: #111 !important;

}

body.dark-mode .feature-card,

body.dark-mode .dc-home-section .dc-user-support .support-box > div > div,

body.dark-mode .dc-home-section .dc-user-support .support-box > div > div,

body.dark-mode .devOps-tools .devOps-card {

  background: #111 !important;

  border: 1px solid #fff;

}

body.dark-mode .feature-card .text-muted,

body.dark-mode .dc-home-section .dc-user-support .support-box > div > div p,

body.dark-mode .dc-home-section .dc-user-support .support-box > div > div p,

body.dark-mode .CompanyNames .homeCompanies-container p,

body.dark-mode .plan-text {

  color: #fff !important;

}



body.dark-mode .accordion-body,

body.dark-mode .architect-cards .card,

body.dark-mode .our-features .feature-container .support-box > div > div,

body.dark-mode .certified-devOps .card-container .card,

body.dark-mode

  .our-features-section

  .feature-section-container

  .feature-support-box

  > div

  > div,

body.dark-mode .architect-cards .nested-list {

  background: black;

  color: #fff;

}

body.dark-mode .accordion-button {

  background: black !important;

  color: #fff !important;

}

body.dark-mode .contactus-wrapper,

body.dark-mode .our-features .feature-container::before,

body.dark-mode .our-features-section .feature-section-container::before {

  background: #333;

}

body.dark-mode .contactus-title,

body.dark-mode .radio-item,

body.dark-mode .form-consent span,

body.dark-mode .contactus-form .form-note body.dark-mode .plan-text,

body.dark-mode .gpu-server-features .server-text,

body.dark-mode .gpu-server-plan .server-text,

body.dark-mode .vdi-server-features .server-text,

body.dark-mode .vdi-server-plan .server-text,

body.dark-mode .backup-server-features .server-text,

body.dark-mode .backup-server-plan .server-text,

body.dark-mode .server-text,

body.dark-mode .plan-card-container .card-items .card-body .plan-features li,

body.dark-mode .finops-container .custom-card p,

body.dark-mode .finops-container .custom-card li,

body.dark-mode .migration-cards .card li {

  color: #fff;

}

body.dark-mode .contactus-form input,

body.dark-mode .contactus-form .form-select {

  background: black;

  color: #fff;

}

body.dark-mode .rounded-box {

  background-color: #2c2c2c !important;

  color: #ffffff;

}

body.dark-mode .core-services,

body.dark-mode .colocation-offerings {

  background: #111;

}

body.dark-mode .hexagon {

  background: black;

  color: #fff;

}

body.dark-mode .hexagon b,

body.dark-mode .finops-container .custom-card b {

  color: #fa9800;

}

body.dark-mode .gen-ai .bg-light {

  background: #111 !important;

}

body.dark-mode .gen-ai p {

  color: #fff !important;

}

body.dark-mode .gen-ai .card {

  background: black;

  border: 1px solid #fff !important;

}

body.dark-mode .migration-cards .card {

  background-color: black;

  color: #fff;

  border: 1px solid #fff;

}

body.dark-mode .security-svg {

  color: #fff !important;

}

body.dark-mode .about-usNavigation > section > div {

  background-color: #111 !important;

}

/* body.dark-mode .about-usNavigation > section > div:hover {

  background-color: #112 !important;

} */

body.dark-mode .about-usNavigation .intro-decription,

body.dark-mode .intro-text {

  color: #fff !important;

}

body.dark-mode .about-usNavigation .section-title,

body.dark-mode .about-usNavigation .story-description {

  color: #fff;

}

body.dark-mode .about-usNavigation svg text {

  fill: #fff;

}

body.dark-mode .about-usNavigation .story-cta-link {

  background-color: black;

  color: #fff;

}

body.dark-mode .about-usNavigation .box-text {

  fill: black;

}

body.dark-mode .section-aboutus .cardContent::after {

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

  color: #fff;

}

/* body.dark-mode .about-usNavigation > section > div:hover {

  background-color: #f4f3f9 !important;

} */

/* Dark Mode End Here */

h1,

h2 {

  font-size: 30px;

}

h3 {

  font-size: 28px;

}

h4 {

  font-size: 24px;

}

h5 {

  /* font-family: 'Open Sans Condensed', sans-serif;  */

  /* font-family: "Roboto", sans-serif; */

  font-size: 20px;

}

h6 {

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

  font-size: 16px;

}

p {

  font-size: 14px;

}







.header-loading {

  display: flex;

  justify-content: center;

  align-items: center;

  min-height: 80px;

}

.custom-spinner {

  width: 2rem;

  height: 2rem;

}

.logo-img-homepage {

  width: 60px;

}

.contact-map-link {

  text-decoration: none;

  color: inherit;

}

.btn-save-preferences {

  background-color: #fa9800;

  color: black;

  border: none;

}

.modal-preline {

  white-space: pre-line;

}



.dropdown-divider {

  background-color: #fa9800 !important;

  height: 2px;

  border: none;

  margin: 0.5rem 0;

}



.dropdown-custom-link {

  color: #fa9800 !important;

  transition: color 0.3s ease-in-out;

}

.dropdown-custom-link:hover {

  color: #fa9800 !important;

}



/* Show dropdown on hover */

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

  display: block;

  margin-top: 0;

  font-size: 14px;

}

.nav-item.dropdown.stuck .dropdown-menu {

  display: block;

  margin-top: 0;

  font-size: 14px;

}



.btn-orange {

  background-color: #fa9800;

  /* color: white; */

  color: black;

  text-align: center;

  font-size: 14px;

  font-weight: 400;

  border-radius: 50px;

  transition: 0.3s ease-in-out;

  display: inline-block;

  padding: 6px 18px; /* Add padding for space inside the button */

  white-space: nowrap; /* Prevent text from wrapping */

  overflow: hidden; /* Hide overflow if needed */

  text-decoration: none;

}

.btn-orange:hover {

  background-color: #fa9800;

  color: black;

}



/* Languages Dropdown  */

.dropdown .btn {

  background-color: #fa9800 !important;

  font-size: 14px;

}



.text-color {

  color: #fa9800 !important;

  font-weight: bold;

}



/* Profile modal*/

.position-absolute-custom {

  position: absolute !important;

  top: var(--top);

  left: var(--left);

  margin: 0 !important;

  z-index: 1055;

}

.top-left-modal {

  max-width: 300px;

}

.custom-modal-content {

  padding: 1rem;

  border-radius: 1rem;

  box-shadow: 0 0 25px rgba(231, 228, 228, 0.9);

}

.custom-login-btn {

  background-color: #fa9800 !important;

  border: none;

  color: #000;

  font-weight: 600;

  transition: background-color 0.3s ease;

}

.custom-login-btn:hover {

  background-color: #fa9800 !important;

  color: #000;

}



/* Cart Page Styles */

.card-custom,

.summary-box {

  border: 1px solid #dee2e6;

  border-radius: 10px;

  padding: 20px;

  background-color: #fff;

  box-shadow: 0 0 25px rgba(231, 228, 228, 0.9);

}

.summary-box {

  position: sticky;

  top: 20px;

}

.cart-divider {

  width: 100%;

  border-top: 3px solid #fa9800;

  margin: 10px auto;

  opacity: 0.4;

}



.countdown {

  background-color: #fa9800;

  color: black;

  padding: 10px 20px;

  display: flex;

  align-items: center;

  justify-content: center;

}



/* second person css */

.countdown > div {

  display: flex;

  align-items: center;

}

.countdown .save-text {

  font-size: 1.1rem;

  font-weight: bold;

  margin-bottom: 8px;

}



.countdown .expire-timer {

  display: flex;

  align-items: flex-start;

  gap: 20px;

}



.countdown .expire-timer > div {

  display: flex;

  flex-direction: column;

  align-items: center;

  margin: 0 5px;

}



.countdown .expire-timer > div h2 {

  font-size: 1.8rem;

  margin: 0;

  line-height: 1;

}



.countdown .expire-timer > div p {

  margin: 2px 0 0 0;

  font-size: 0.85rem;

  line-height: 1;

}

#timer {

  font-weight: bold;

  letter-spacing: 1px;

}

.custom-call-icon {

  fill: white;

  width: 18px;

  height: 18px;

}

/* third party payment logo section */

.third-partyLogo {

  display: flex;

  align-items: center;

  gap: 12px;

  justify-content: center;

  flex-wrap: wrap;

  padding: 10px;

}

.third-partyLogo > div {

  width: 70px;

  height: 40px;



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

  display: flex;

  align-items: center;

  justify-content: center;

  transition: transform 0.3s ease;

  border: 1px solid #e0e0e0;

}

.third-partyLogo .payment-cards {

  width: 70px;

  height: 40px;

  background-color: #fff;

  border-radius: 5px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 6px;

  box-sizing: border-box;

}

.third-partyLogo > div > button {

  border: none;

  outline: none;

  padding: 0;

  margin: 0;

}

.third-partyLogo > div img {

  max-width: 100%;

  max-height: 100%;

  display: block;

  object-fit: contain;

}

/* Five star rating */

.star-rating {

  font-size: 1.2rem;

  color: #fa9800;

}

/* End here second person Css */

.spec-list,

.spec-list-card {

  list-style: none;

  padding: 0;

  margin: 0;

}

.spec-list li {

  display: flex;

  /* justify-content: space-between; */

  align-items: flex-start;

  font-size: 12px;

  /* gap: 10px; */

  /* padding: 5px 0; */

}

.spec-list-card li {

  font-size: 12px;

}

.spec-list li::before {

  content: "»";

  color: #fa9800;

  margin-right: 8px;

  flex-shrink: 0;

}



.spec-list-card li::before {

  content: "+";

  color: #fa9800;

  margin-right: 8px;

  flex-shrink: 0;

}

.spec-price {

  margin-left: 108px;

}

.spec-price-os {

  margin-left: 116px;

}

.spec-price-cp {

  margin-left: 124px;

}

.spec-price-click-installer,

.spec-price-server,

.spec-price-backup {

  margin-left: 10px;

}

.spec-price-suite {

  margin-left: 100px;

}

.spec-price-monitor {

  margin-left: 135px;

}

.sticky-bottom-right {

  position: fixed;

  bottom: 10px;

  right: 10px;

  padding: 8px 12px;

  z-index: 999;

  font-size: 14px;

}

.send-btn {

  background-color: #fa9800;

  border: none;

  color: #000;

  font-weight: bold;

  padding: 12px;

  border-radius: 10px;

  transition: background-color 0.3s ease-in-out;

}

.send-btn:hover {

  background-color: #e78900;

  color: #000;

}

#totalPrice {

  color: #000;

  font-weight: bold;

  transition: color 0.3s ease;

}

#originalPrice {

  text-decoration: line-through;

  color: #333;

  background-color: #fff;

  white-space: nowrap;

}

#finalPrice {

  font-weight: bold;

  font-size: 24px;

  white-space: nowrap;

}

#discountBtn {

  font-size: 0.8rem;

  padding: 0.15rem 0.4rem;

  white-space: nowrap;

  border-radius: 50px;

}



/* Thank You page */

.thank-you-body {

  background: #e9ecef;

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

  font-size: 16px;

  padding: 20px;

}

.thank-you-box {

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

  padding: 40px 30px;

  border-radius: 20px;

  backdrop-filter: blur(10px);

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

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);

  color: #000;

  max-width: 500px;

  width: 100%;

}

.thank-you-box h1 {

  font-size: 2.5rem;

  margin-bottom: 15px;

  font-weight: 700;

}

.thank-you-box p {

  font-size: 1.1rem;

  margin-bottom: 20px;

  color: #000;

}

.icon-box i {

  font-size: 3.5rem;

  color: #28a745;

}

.btn-home {

  background-color: #fa9800;

  color: #000;

  font-weight: 600;

  padding: 12px 28px;

  border-radius: 50px;

  transition: all 0.3s ease-in-out;

  text-decoration: none;

}

.btn-home:hover {

  background-color: #fa9800 !important;

  color: #000;

}



/* Floating buttons */



.floating-buttons {

  position: fixed;

  bottom: 20px;

  left: 20px;

  display: flex;

  flex-direction: column;

  gap: 10px;

  z-index: 1050;

}

.floating-buttons button {

  width: 30px;

  height: 30px;

  font-size: 1.4rem;

  display: flex;

  align-items: center;

  justify-content: center;

  border: none;

  border-radius: 50%;

  cursor: pointer;

  box-shadow: 0 0 25px rgba(231, 228, 228, 0.9);

  transition: background-color 0.3s ease;

  background-color: #fa9800;

  color: #000;

}



#backToTopBtn {

  position: fixed;

  bottom: 20px;

  right: 20px;

  display: none;

  z-index: 9999;

}

#backToTopBtn > div {

  display: flex;

  align-items: center;

  justify-content: center;

  height: 32px;

  width: 30px;

  border-radius: 50%;

  background-color: rgb(250, 152, 0) !important;

}

#backToTopBtn > div i::before {

  font-size: 16px;

  font-weight: 700;

}

/* Chat button specific style */

#floatingChatBtn button {

  background-color: #fa9800 !important;

  color: #000000;

}

#floatingChatBtn button:hover {

  background-color: #fa9800 !important;

}

/* Contact button specific style */

#floatingContactBtn button {

  background-color: #fa9800 !important;

  color: #000000;

}

#floatingContactBtn button:hover {

  background-color: #fa9800 !important;

}

#floatingThemeToggleBtn button {

  background-color: #fa9800 !important;

  color: #000000;

}

#floatingThemeToggleBtn button:hover {

  background-color: #fa9800 !important;

}



.custom-slightly-small {

  max-width: 400px;

}



/* Support dropdown submenu */

.dropdown-submenu {

  position: relative;

}

.dropdown-submenu > .dropdown-menu {

  top: 0;

  left: 100%;

  margin-top: -1px;

  display: none;

}

.dropdown-submenu:hover > .dropdown-menu {

  display: block;

}



/* Show dropdown on hover */

.dropdown:hover > .custom-dropdown-menu {

  display: block;

}



/* Main dropdown menu */

.custom-dropdown-menu {

  display: none;

  position: absolute;

  top: 100%;

  left: -40px;

  z-index: 1000;

  min-width: fit-content;

  padding: 10px 0;

  background-color: #fff;

  border: 1px solid #ddd;

  border-radius: 0.25rem;

  font-size: 14px;

}



/* Submenu wrapper */

.custom-submenu {

  position: relative;

  padding: 5px 15px;

}



/* Submenu list that opens to the right */

.custom-submenu > .custom-submenu-list {

  display: none;

  position: absolute; /* Key for positioning */

  top: 0; /* Align top with parent */

  left: 100%; /* Position to the right */

  margin: 0;

  padding: 10px 0;

  min-width: 220px;

  background: #f9f9f9;

  border: 1px solid #ddd;

  border-radius: 0.25rem;

  z-index: 1001;

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

}



/* Show submenu on hover */

/* .custom-submenu:hover > .custom-submenu-list {

  display: block;

} */

.nav-item.dropdown:hover .custom-submenu.stuck {

  display: block;

}

.custom-submenu.stuck .custom-submenu-list {

  display: block !important;

}

/* Dropdown items styling */

.custom-dropdown-menu .dropdown-item {

  padding: 5px 20px;

  color: #333;

  text-decoration: none;

  font-size: 14px;

}



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

  background-color: #f0f0f0;

  color: black;

}



/* Optional: Style submenu links */

.custom-submenu-list .dropdown-item {

  font-size: 14px;

}



/* Make Account dropdown items hover  */

.dropdown-hover-red:hover {

  background-color: #fa9800 !important;

}

.custom-account-dropdown {

  color: black !important;

  background-color: #fa9800 !important;

  text-decoration: none !important;

  box-shadow: none !important;

  border: none !important;

}

.custom-account-dropdown:hover,

.custom-account-dropdown:focus,

.custom-account-dropdown:active {

  color: black;

  background-color: #fa9800 !important;

  text-decoration: none !important;

  box-shadow: none !important;

  outline: none !important;

}

a.custom-account-dropdown:hover {

  color: black !important;

}



/* GPU Server */

.top-button {

  background-color: #fa9800 !important;

  color: black !important;

  border: none;

  padding: 10px 20px;

  font-weight: bold;

  border-radius: 30px;

  cursor: pointer;

}



.rounded-box {

  background-color: #f8f9fa;

  padding: 10px 15px;

  margin-bottom: 10px;

  border-radius: 8px;

  font-weight: 600;

}



/* Card */

.custom-card {

  width: 100%;

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

  transition: transform 0.3s ease, box-shadow 0.3s ease;

}

.custom-card-header {

  background-color: #072437;

  padding: 20px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  height: 160px;

}

.logo-img {

  width: 160px;

  height: 160px;

  margin-bottom: 0;

}

.logo-img-home {

  max-width: 100%;

  width: 80px;

  object-fit: contain;

  display: block;

  height: auto;

  margin-bottom: 10px;

}

.cloud-name,

.price {

  margin: 0;

  font-size: 16px;

  color: white;

  font-weight: bold;

}

.custom-card-body {

  padding: 1rem;

}

.cardfeatures-list {

  display: flex;

  flex-direction: column;

  align-items: center;

}

.cardfeature {

  font-weight: bold;

  text-align: center;

  padding: 10px 0;

  width: 100%;

  border-bottom: 2px solid #fa9800;

}

.free_trial {

  border-bottom: none;

  padding-top: 5px;

  font-size: 16px;

  font-weight: 600;

  color: #0056b3;

  /*color: #007fff;*/

}

/* testimonial-section */

.testimonial-images-feature {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 15px;

}

.top-images-feature {

  display: flex;

  gap: 15px;

  justify-content: center;

}

.circle-image-feature {

  /* width: 100px;

  height: 100px; */

  width: 80px;

  height: 80px;

  border-radius: 50%;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: #ddd;

  transition: transform 0.3s ease, box-shadow 0.3s ease;

}

.circle-img-feature {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.3s ease;

}

.circle-image-feature:hover {

  transform: scale(1.05);

  box-shadow: 0 0 15px rgba(0, 123, 255, 0.7);

}

.circle-image-feature:hover .circle-img-feature {

  transform: scale(1.1);

}



#ts-carousel .ts-control-prev,

#ts-carousel .ts-control-next {

  width: 5%;

  opacity: 1;

  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;

  z-index: 2;

}

#ts-carousel .ts-control-prev-icon,

#ts-carousel .ts-control-next-icon {

  background: none;

  display: block;

  width: 50px;

  height: 50px;

  border: 2px solid rgba(0, 183, 255, 0.8);

  border-radius: 50%;

  box-shadow: 0 0 15px rgba(0, 183, 255, 0.8);

  position: relative;

}

#ts-carousel .ts-control-prev-icon::before,

#ts-carousel .ts-control-next-icon::before {

  content: "‹";

  font-size: 2rem;

  color: rgba(0, 183, 255, 0.9);

  line-height: 50px;

  display: block;

  text-align: center;

  margin-top: -4px;

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

}

#ts-carousel .ts-control-next-icon::before {

  content: "›";

}

#ts-carousel .ts-control-prev:hover,

#ts-carousel .ts-control-next:hover {

  transform: scale(1);

  box-shadow: none;

  /* transform: scale(1.2);

  box-shadow: 0 0 30px rgba(0, 183, 255, 1); */

}

#ts-carousel .ts-control-prev:active,

#ts-carousel .ts-control-next:active {

  transform: scale(1);

  box-shadow: none;

  /* transform: scale(0.9);

  box-shadow: 0 0 30px rgba(0, 183, 255, 1); */

}



/* OUR Features- GPU */

.our-features-section .feature-section-container {

  position: relative;

  margin-top: 2rem;

}

.our-features-section .feature-section-container::before {

  content: "";

  position: absolute;

  top: 0;

  width: 100%;

  height: 100%;

  background: linear-gradient(170deg, #fff, #fe9a00);

  z-index: -1;

  clip-path: polygon(100% 0, 0 0, 0 100%);

}

.our-features-section .feature-section-container .feature-support-box {

  padding-bottom: 6rem;

  color: #000;

}

.our-features-section

  .feature-section-container

  .feature-support-box

  > div

  > div {

  position: relative;

  display: flex;

  height: 100%;

  flex-direction: column;

  background-color: #fff;

  justify-content: center;

  max-width: 530px;

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

  transition: transform 0.3s ease, box-shadow 0.3s ease;

  cursor: pointer;

}

.our-features-section

  .feature-section-container

  .feature-support-box

  > div

  > div:hover {

  transform: translateY(-10px);

  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15);

}

.our-features-section

  .feature-section-container

  .feature-support-box

  .fav-icons {

  color: gray;

}

.our-features-section

  .feature-section-container

  .feature-support-box

  > div:hover

  .fav-icons {

  color: #000;

}

.our-features-section

  .feature-section-container

  .feature-support-box

  > div

  > div

  > h4 {

  font-weight: 600;

  font-size: 20px;

}



.nav-link {

  font-size: 16px;

  padding: 10px 15px;

}

.nav-link-home {

  display: inline-block;

  font-size: 22px;

  text-decoration: none;

  margin-right: 16px;

  position: relative;

  bottom: -12px;

}

.nav-link:hover,

.nav-link-home:hover {

  color: #fa9800 !important;

}

.navbar-brand img {

  max-height: 90px;

}



.btn-custom {

  background-color: #fa9800 !important;

  color: black;

  display: inline-block;

  padding: 5px 15px;

  border-radius: 5px;

  text-decoration: none;

  border: none;

  outline: none;

  font-weight: bold;

}

.btn-custom:hover {

  background-color: #fa9800 !important;

  color: black !important;

  text-decoration: none;

  border: none;

  outline: none;

}



/* Search Container */

.search-container {

  position: relative;

  display: inline-block;

}

.search-input {

  position: absolute;

  top: 100%;

  right: 0;

  width: 0;

  opacity: 0;

  padding: 0.375rem 0.75rem;

  font-size: 1rem;

  border: 2px solid #fa9800;

  border-radius: 5px;

  transition: width 0.3s ease, opacity 0.3s ease;

  z-index: 1;

}

.search-input.active {

  width: 150px;

  opacity: 1;

}

.search-input:focus {

  border-color: #fa9800;

  box-shadow: 0 0 5px #fa9800;

  outline: none;

}

#searchIcon i {

  font-size: 18px;

  cursor: pointer;

  margin-left: -20px;

}



.text-center {

  text-align: center;

}

#aboutus {

  scroll-margin-top: 150px;

}

#services {

  scroll-margin-top: 250px;

}

#faqs {

  scroll-margin-top: 170px;

}

#contact-section {

  scroll-margin-top: 1150px;

}



.services,

.aboutus {

  /* padding: 60px 20px; */

  background-color: #ffffff;

  text-align: center;

}

.service-text,

.aboutus-text,

.server-text {

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

  font-size: 16px;

  text-align: justify;

  /* word-spacing: 2px; */

  word-spacing: 0.3px;

  line-height: 1.6;

  /* color: #444; */

  color: #111;

  font-weight: 400;

  max-width: 900px;

  margin: 0 auto;

  /* margin: 20px auto; */

}

.aboutus h1:hover,

.chooseus h1:hover {

  color: #fa9800;

}



.accordion-item {

  /* background: black; */

  /* border: 2px solid black;  */

  border-radius: 10px;

  box-shadow: 0 0 25px rgba(231, 228, 228, 0.9);

  transition: box-shadow 0.3s ease-in-out;

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

}

.accordion-button {

  background: white;

  font-weight: bold;

  font-size: 14px;

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.accordion-button::after {

  display: none !important;

}

.icon {

  font-size: 22px;

  transition: transform 0.3s ease;

}

.accordion-body {

  background: white;

  font-size: 14px;

  border-radius: 0 0 10px 10px;

}



/* Modal Container */

.contact-modal {

  border-radius: 20px;

  border: none;

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

}



/* Gradient Header */

.contact-header {

 background-color: #fa9800 !important;

  border-top-left-radius: 20px;

  border-top-right-radius: 20px;

}

.contact-header .modal-title {

  color: #000 !important;

}

.contact-header .btn-close {

  filter: none;

  opacity: 1;

}

.modalcontact-link {

  text-decoration: none;

  color: #000;

  font-weight: 600;

}



.modalcontact-link:hover {

  color: #fa9800;      

}





/* Inner Card */

.contact-card {

  background: #f8f9ff;

  padding: 30px;

  border-radius: 16px;

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

}



/* Icons */

.contact-icon-primary {

  font-size: 24px;

  color: #4FACFE;

}



.contact-icon-success {

  font-size: 24px;

  color: #28a745;

}



/* Logo slider */

.logo-slider {

  overflow: hidden;

  white-space: nowrap;

  background: #f6f6f6;

  padding: 20px 0;

  position: relative;

}

.logo-slider .logos {

  display: flex;

  align-items: center;

  animation: scroll 10s linear infinite;

}

.logo-item {

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0 50px;

  text-align: center;

  gap: 15px;

}

.logo-item img {

  width: 100px; /* Logo size */

  height: auto;

  filter: grayscale(100%);

  transition: 0.3s;

}

.logo-item p {

  font-size: 30px;

  font-weight: bold;

  color: #333;

  margin: 0;

  text-transform: uppercase;

}

.logo-item:hoverimg {

  filter: grayscale(0%);

  transform: scale(1.1);

}



.CompanyNames h4,

.CompanyNames p {

  font-size: 1.5rem;

}

.CompanyNames img {

  margin-bottom: 15px;

}



.divider {

  /* border: none; */

  border-top: 2px solid #fa9800;

  margin: 10px 0;

}

.divider1 {

  width: 15%;

  border-top: 3px solid #fa9800;

  margin: 10px auto;

  opacity: 0.4;

}

.divider-aboutUs {

  width: 10%;

  border-top: 3px solid #fa9800;

  margin: 10px auto;

  opacity: 0.4;

}

.divider2 {

  width: 60%;

  border-top: 3px solid #fa9800;

  margin: 10px auto;

  opacity: 0.4;

}

.divider3 {

  width: 3%;

  border-top: 3px solid #fa9800;

  margin: 10px auto;

  opacity: 0.4;

  /* box-shadow: 0px 4px 8px rgba(247, 149, 30, 0.916); */

}

.clients-divider {

  width: 30%;

  border-top: 3px solid #fa9800;

  margin: 10px auto;

  opacity: 0.4;

  /* box-shadow: 0px 4px 8px rgba(247, 149, 30, 0.916); */

}



/* #chatbox {

  height: 100px;

  overflow-y: auto;

  background: #f8f9fa;

  padding: 10px;

  border-radius: 5px;

} */

#chatbox {

  height: 250px;

  overflow-y: auto;

  background: #f8f9fa;

  padding: 10px;

  border-radius: 5px;

}

.msg {

  margin: 5px 0;

  padding: 8px 12px;

  border-radius: 15px;

  max-width: 80%;

  clear: both;

  word-wrap: break-word;

}

.user {

  background-color: #d1e7dd;

  color: #0f5132;

  float: right;

  text-align: right;

}

.bot {

  background-color: #e2e3e5;

  color: #41464b;

  float: left;

  text-align: left;

}

.send-btn {

  background-color: #fa9800 !important;

  color: #000 !important;

}



/* Positioning the modal on the right side */

.contact-modal-dialog {

  position: fixed;

  top: 0;

  right: 0;

  margin: 0;

  height: 100%;

  max-width: 400px;

  width: 100%;

  padding: 15px;

  display: flex;

  flex-direction: column;

}

.contact-modal-content {

  height: 100%;

  overflow-y: auto;

  display: flex;

  flex-direction: column;

}

.contact-modal-body {

  padding: 20px;

  flex-grow: 1;

}



.footer {

  background-color: #0b3852;

  /* padding: 30px 0; */

  color: white;

  /* font-family: Arial, sans-serif; */

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

}

.footer h5 {

  font-weight: bold;

}

.footer-column {

  /* text-align: center; */

  text-align: left;

  font-size:14px;

}

.footer-links {

  list-style: none;

  padding: 0;

}

.footer-links li {

  margin: 5px 0;

}

.footer-links a {

  text-decoration: none;

  color: white;

  font-weight: bold;

  font-size: 12px;

}

.footer-links a:hover {

  text-decoration: underline;

  color: #fa9800;

}



.social-icons {

  display: grid;

  grid-template-columns: repeat(4, auto);

  gap: 5px 10px;

  justify-content: left;

  /* justify-content: center; */

  /* padding: 5px 0; */

}

.social-icons a {

  text-decoration: none;

  /*font-size: 1.6rem;*/

   font-size: 20px;

  width: 18px;

  height: 26px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  transition: background-color 0.3s ease;

}

.social-icons .facebook i {

  /* color: #1877f2; */

  color: white;

}

.social-icons .twitter i {

  color: white;

  /* color: #000000; */

  /* color: #1DA1F2; */

}

.social-icons .instagram i {

  color: white;

  /* background: radial-gradient(

    circle at 30% 107%,

    #fdf497 0%,

    #fdf497 5%,

    #fd5949 45%,

    #d6249f 60%,

    #285aeb 90%

  );



  background-clip: text;

  -webkit-background-clip: text;



  color: transparent;

  -webkit-text-fill-color: transparent;



  display: inline-block; */

}

.social-icons .linkedin i {

  /* color: #0077b5; */

  color: white;

}

.social-icons .whatsapp i {

  /* color: #25d366; */

  color: white;

}

.social-icons .youtube i {

  /* color: #ff0000; */

  color: white;

}

.social-icons .podcast i {

  /* color: #9933cc; */

  color: white;

}

.social-icons .email i {

  /* color: #D44638;  */

  color: white;

}



.contact-icon {

  color: white;

  margin-right: 10px;

  transition: color 0.3s ease;

}

.contact-link,

.contact-address {

  color: white;

  text-decoration: none;

  transition: color 0.3s ease;

  font-size: 14px;

}

.contact1-link {

  margin-left: 36px;

  color: white;

  text-decoration: none;

  transition: color 0.3s ease;

  font-size: 16px;

}

.contact-icon:hover,

.contact-link:hover,

.contact-address:hover,

.contact1-link:hover,

.heading-decor:hover,

.heading:hover,

.choose-us:hover,

.clients:hover {

  color: #fa9800;

}

.fav1-icons i {

  color: black !important;

  font-size: 1.5rem;

}



/* Companyy Logo*/

.second-row {

  display: flex;

  justify-content: center;

  align-items: center;

  flex-wrap: wrap;

  gap: 15px;

}

.image-container {

  text-align: center;

  flex: 1 1 140px;

  max-width: 140px;

}

.image-container img {

  width: 100px;

  height: 100px;

  object-fit: contain;

}

.image-container p {

  margin-top: 10px;

}



.sticky-contact-form {

  position: fixed;

  bottom: 0px;

  right: 20px;

  /* width: 285px;

  height: 750px; */

  width: clamp(245px, 285px, 320px);

  height: clamp(500px, 750px, 85vh);

  background-color: #fff;

  border: 1px solid #ccc;

  /* border-radius: 12px; */

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

  z-index: 1050;

  padding: 15px;

  font-size: 14px;

  display: flex;

  flex-direction: column;

  overflow-y: auto;

  box-sizing: border-box;

}

.form-wrapper {

  flex: 1;

  display: flex;

  flex-direction: column;

  justify-content: center;

}

.sticky-contact-form .sticky-header {

  font-weight: bold;

  font-size: 16px;

  margin-bottom: 10px;

  display: flex;

  justify-content: space-between;

  align-items: center;

}

.sticky-contact-form .close-btn {

  background: none;

  border: none;

  font-size: 20px;

  line-height: 1;

  cursor: pointer;

}

.sticky-contact-form .form-check {

  margin-bottom: 5px;

}



nav ul {

  display: flex;

  list-style: none;

  gap: 25px;

  margin: 0;

}



nav ul li a {

  text-decoration: none;

  color: #fff;

  font-weight: 500;

  transition: color 0.3s ease;

}



nav ul li a:hover {

  color: #fa9800;

}



.herodigicloudsdigiclouds {

  /* background: linear-gradient(to right, #64b0d6, #2b6174, #50c0f0); */

  background: linear-gradient(to right, #0f2027, #203a43, #2c5364);

  color: #fff;

  /* color:black; */

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 150px 80px 40px 80px;

  flex-wrap: wrap;

  gap: 40px;

}

.herodigicloudsdigiclouds-text {

  max-width: 500px;

  flex: 1 1 300px;

}

.herodigicloudsdigiclouds-text h1 {

  font-size: 3rem; /* 48px */

  margin-bottom: 20px;

}

.herodigicloudsdigiclouds-text p {

  font-size: 1.125rem; /* 18px */

  line-height: 1.6;

}

.herodigicloudsdigiclouds-img {

  width: 100%;

  max-width: 400px;

  flex: 1 1 300px;

  perspective: 1000px;

  margin: 0 auto;

}

.floating-video {

 position: relative; 

  right: 20px;

  max-width: 400px;

  width: 100%;

  aspect-ratio: 16 / 9;

  height: auto;  

  box-shadow: 0 2px 8px rgba(63, 69, 81, 0.16);

  border-radius: 10px;

  overflow: hidden;

  flex-shrink: 0;  

}



.floating-video video {

  width: 100%;

  height: 100%;

  object-fit: cover;

  border: none;

  display: block;

}

.floatingwhychoose-video {

  margin-left: 10px;

  width: 500px;

  aspect-ratio: 16 / 9;

  box-shadow: 0 2px 8px rgba(63, 69, 81, 0.16);

  border-radius: 10px;

  overflow: hidden;

  right: 4px;

}

.floatingwhychoose-video video {

  width: 100%;

  height: 100%;

  object-fit: cover;

  border: none;

}



.tilt-image {

  width: 100%;

  border-radius: 20px;

  transition: transform 0.2s ease;

}



.feature-card {

  background: linear-gradient(145deg, #ffffff, #f2f2f2);

  border-radius: 20px;

  transition: all 0.4s ease;

  border: none;

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);

}



.feature-card:hover {

  transform: translateY(-8px);

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);

}



.feature-icon-glow {

  background: radial-gradient(circle at center, #fa9800, #fa9800);

  color: white;

  font-size: 28px;

  width: 60px;

  height: 60px;

  line-height: 60px;

  margin: 0 auto;

  border-radius: 50%;

  display: flex;

  justify-content: center;

  align-items: center;

  box-shadow: 0 0 18px rgba(246, 169, 98, 0.849);

  transition: transform 0.3s;

}



.feature-card:hover .feature-icon-glow {

  transform: rotate(10deg) scale(1.05);

}



.choose-video-container {

  position: relative;

  border-radius: 20px;

  overflow: hidden;

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

}



.choose-video-container video {

  width: 100%;

  height: auto;

  border-radius: 20px;

}



.video-container {

  position: relative;

  display: inline-block;

  width: 100%;

}



.video-container video {

  width: 100%;

  display: block;

}



.video-play-btn {

  position: absolute;

  top: 50%;

  left: 50%;

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

  /* background-color: rgba(255, 255, 255, 0.8); */

  background-color: #fa9800 !important;

  color: white;

  border: none;

  border-radius: 50%;

  width: 60px;

  height: 60px;

  font-size: 24px;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  z-index: 10;

  transition: background-color 0.3s ease;

}



.video-play-btn:hover {

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

}



.video-play-btn::before {

  content: "▶"; /* Play icon */

}



.video-container.paused .video-play-btn::before {

  content: "▶";

}



.video-container.playing .video-play-btn::before {

  content: "❚❚"; /* Pause icon */

}



.choose-text:hover {

  color: #fa9800;

  transition: color 0.3s ease;

  cursor: pointer;

}

.choose1-text {

  font-size: clamp(22px, 4vw, 32px);

  font-weight: 700;

  line-height: 1.3;

  text-align: center !important;  /* force center alignment */

  width: 100%;                    /* ensures full row width */

  display: block;                 /* prevents inline alignment issues */

}





.mobile-friendly-text {

  font-size: clamp(14px, 2.8vw, 17px);

  line-height: 1.7;

  padding: 0 10px;

  text-align: center;  /* always centered */

}



.text-block {

  max-width: 600px;

  margin-left: auto;

  margin-right: auto;

  text-align: center !important;  /* force center everywhere */

}



/* Remove desktop left alignment completely */

@media (min-width: 992px) {

  .text-block {

    margin-left: auto;

    margin-right: auto;

    text-align: center !important;

  }

}

@media (max-width: 768px) {

  .mobile-friendly-text {

    text-align: left !important;

  }

}







header {

  background: linear-gradient(to right, #0f2027, #203a43, #2c5364);

  /* background: linear-gradient(

    to right,

    #64b0d6,

    #2b6174,

    #50c0f0

  ); */

  /* background: linear-gradient(to right, #6ab6d6, #e3eaed, #c3dae4); */

  color: #fff;

  padding: 10px 10px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  flex-wrap: wrap;

}

.dropdown:hover .dropdown-menu {

  display: block;

  margin-top: 0;

}

.dropdown-item:active,

.dropdown-item.active,

.dropdown-item:focus {

  background-color: #fa9800 !important;

  color: #000 !important;

}



.dropdown-item:hover {

  background-color: #fa9800 !important;

  color: #000;

}



.partner-icon {

  width: 1000px;

  height: 1000px;

  object-fit: contain;

}



.form-check-input {

  opacity: 1 !important;

  border: 2px solid #000 !important;

  background-color: #fff !important;

}



.form-check-input:checked {

  background-color: #000 !important;

  border-color: #000 !important;

}



header nav.navbar {

  display: flex;

  align-items: center;

  width: 100%;

  padding: 0.3rem 1rem;

}



.navbar .container-fluid {

  display: flex;

  align-items: center;

  justify-content: flex-start !important;

  gap: 20px; /* reduce or increase as you like */

}



.navbar-brand {

  margin-right: 10px !important;

  padding-right: 0 !important;

}



.navbar-collapse {

  flex-grow: 0 !important; /* prevents auto stretching */

}



.navbar-nav {

  display: flex;

  align-items: center;

  gap: 15px; /* control spacing between menu items */

}



/* ✅ Ensure toggler works properly */



.navbar-toggler {

  margin-left: auto;

  border: 2px solid #f39c12 !important;

  border-radius: 8px;

  padding: 6px 10px;

  background: white !important;

  transition: all 0.3s ease;

}

.navbar-toggler:hover {

  background: #f39c12 !important;

  border-color: #f39c12 !important;

}



/* ✅ Correct responsive collapse behavior */

@media (max-width: 991px) {

  .navbar-collapse {

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

    padding: 15px;

  }



  /* Make sure menu items align center in mobile view */

  .navbar-nav {

    align-items: center;

  }

}









/* Media queries */



@media (max-width: 768px) {

  header {

    flex-direction: column;

    align-items: flex-start;

    padding: 20px;

  }



  header img {

    width: 80px;

    height: auto;

  }



  nav ul {

    flex-direction: column;

    gap: 10px;

    margin-top: 15px;

    padding-left: 0;

  }



  .tilt-image {

    width: 100%;

    max-width: 100%;

  }



  .video-play-btn {

    width: 50px;

    height: 50px;

    font-size: 20px;

  }



  .feature-icon-glow {

    width: 50px;

    height: 50px;

    font-size: 22px;

  }



  .feature-card h6 {

    font-size: 16px;

  }



  .feature-card p {

    font-size: 13px;

  }



  .floatingwhychoose-video {

    width: 100%;

    margin-left: 0;

    right: 0;

  }

}





@media (max-width: 760px) {

  .custom-col {

    flex: 0 0 50%;

    max-width: 50%;

    display: flex;

    justify-content: center; 

  }

  .partners-container {

    width: 100px;

    height: 100px;

    align-items: center;

    justify-content: center;

    text-align: center;

    margin-left: 38px; 

    margin-right: auto;

  }

  .partners-container .partnerImage-container {

    width: 60px;

    height: 60px;

  }

  .partners-container p {

    font-size: 16px;

  }

  .partners-container1 {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: flex-start;

  margin-left: 20px;

  width: 120px;

  height: 120px;

}

.partners-container1 .partnerImage-container1 {

  width: 70px;

  height: 70px;

  overflow: hidden;

}

.partners-container .partnerImage-container img {

  max-width: 100%;

  height: 100%;

  display: block;

  object-fit: contain;



}



.partners-container1 p {

  font-weight: 600;

  margin-top: 8px;

  font-size: 1rem;

  line-height: 1.4rem;

  letter-spacing: 0.03125rem;

  color: #333;

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

}

}





@media (max-width: 576px) {

  .search-input.active {

    width: 140px;

  }

}



@media (max-width: 480px) {

  .social-icons {

    grid-template-columns: repeat(2, auto);

    justify-content: left;

  }

}

@media (max-width: 380px) {

  .custom-col {

    flex: 0 0 100%;

    max-width: 100%;

    justify-content: center;

  }



  .partners-container, .partners-container {

    width: 80px;

    height: 80px;

    margin-left: auto;

    margin-right: auto;

  }



  .partners-container p, .partners-container p {

    font-size: 14px;

  }



  .partnerImage-container, .partnerImage-container {

    width: 50px;

    height: 50px;

  }

}







@media (max-width: 768px) {

  .sticky-contact-form {

    width: 90%;

    right: 5%;

    bottom: 15px;

    height: 75vh;

    font-size: 13px;

  }

  .second-row {

    flex-wrap: wrap;

  }

  .partners-containergif {

    padding-right: 50px;

    padding-top: 20px;

  }

  .image-container {

    flex: 1 1 45%;

    max-width: 45%;

  }

  .footer-column {

    margin-bottom: 20px;

    text-align: left;

  }

  .social-icons a {

    font-size: 20px;

    width: 20px;

    height: 30px;

  }

  .social-icons {

    grid-template-columns: repeat(4, auto);

  }

  .footer h5 {

    font-size: 20px;

  }

  p,

  .footer-links a {

    font-size: 14px;

  }

  .contact-modal-dialog {

    width: 100%;

  }

}

@media (max-width: 991px) {

  /*#navbarNav {*/

  /*  max-height: 30vh;*/

  /*  overflow-y: auto;*/

  /*  padding-bottom: 10px;*/

  /*}*/

  #ts-carousel .ts-control-prev,

  #ts-carousel .ts-control-next {

    display: none !important;

  }

  

  .carousel-control-prev-icon,

  .carousel-control-next-icon {

   display: none !important; 

  }

  

  /* .dc-home-section .dc-hero-carousel-container .carousel-control-prev,

  .dc-home-section .dc-hero-carousel-container .carousel-control-next {

    display: none !important;

  } */

}



@media (max-width: 992px) {

  .herodigicloudsdigiclouds {

    flex-direction: column;

    text-align: center;

    margin-top: 5rem;

  }



  .herodigicloudsdigiclouds-text,

  .herodigicloudsdigiclouds-img {

    flex: 1 1 100%;

    max-width: 100%;

  }



  .herodigicloudsdigiclouds-text h1 {

    font-size: 2.5rem;

  }



  .herodigicloudsdigiclouds-text p {

    font-size: 1rem;

  }



  .herodigicloudsdigiclouds-img {

    margin-top: 30px;

  }

  .floating-video {

    right: 0px;

    width: 100%;

  }

}



@media (max-width: 576px) {

  .herodigicloudsdigiclouds-text h1 {

    font-size: 2rem;

  }



  .herodigicloudsdigiclouds-text p {

    font-size: 0.95rem;

  }



  .herodigicloudsdigiclouds {

    padding: 60px 20px 30px;

  }

  

  /* .carousel-control-prev-icon,*/

  /*.carousel-control-next-icon {*/

  /* display: none !important; */

  /*}*/

}



.list-group-item {

  border: none;

  border-radius: 0;

  padding: 12px 16px;

  font-weight: 500;

  color: #555;

}



.list-group-item.active {

  background-color: #f0f4ff;

  color: #0d6efd;

  border-left: 3px solid #0d6efd;

}



.modal-content {

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

}



.modal-body h6 {

  color: #222;

}



.modal-body ul li {

  margin-bottom: 6px;

}



/* Second CSS/ Team member CSS */

.dc-home-section {

  display: flex;

  flex-direction: column;

  box-sizing: border-box;

}

/* banner section styling */

.dc-home-section .dc-hero-carousel-container .banner-container {

  width: 100%;

  /* background: radial-gradient(

      circle at center,

      rgba(0, 183, 255, 0.6) 0%,

      rgba(0, 50, 90, 0.8) 20%,

      rgba(0, 0, 0, 0.95) 80%

    ),

    linear-gradient(

      45deg,

      rgba(0, 150, 255, 0.3),

      rgba(255, 0, 150, 0.2),

      rgba(0, 255, 150, 0.2)

    ),

    #0a0a0a; */

  box-shadow: 0 0 25px rgba(174, 198, 207, 0.9),

    0 0 50px rgba(146, 159, 172, 0.7);

  /*  box-shadow: 0 0 25px rgb(231, 212, 163), 0 0 50px rgb(173, 159, 123),

  0 0 35px #e68900;*/

  overflow: hidden;

  /* height: 300px; */

}

.dc-home-section .dc-hero-carousel-container .banner-img {

  filter: drop-shadow(0 0 20px rgba(0, 183, 255, 0.8));

  width: 100%;

  height: 300px;

  transition: 0.5s all ease;

}



.dc-home-section .dc-hero-carousel-container .banner-img:hover {

  transform: scale(1.08);

  filter: drop-shadow(0 0 35px rgba(0, 183, 255, 1));

}



.dc-home-section .dc-hero-carousel-container .carousel-control-prev,

.carousel-control-next {

  width: 5%;

  opacity: 1;

  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;

}

.carousel-control-prev-icon,

.carousel-control-next-icon {

  background: none;

  display: block;

  width: 50px;

  height: 50px;

  border: 2px solid rgba(0, 183, 255, 0.8);

  border-radius: 50%;

  box-shadow: 0 0 15px rgba(0, 183, 255, 0.8);

  position: relative;

}

.carousel-control-prev-icon::before,

.carousel-control-next-icon::before {

  content: "‹";

  font-size: 1.5rem;

  color: rgba(0, 183, 255, 0.9);

  line-height: 50px;

  display: block;

  text-align: center;

  margin-top: -10px;

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

}

.carousel-control-next-icon::before {

  content: "›";

}



/*  Hover effects - bigger, brighter, better */

.carousel-control-prev:hover,

.carousel-control-next:hover {

  transform: scale(1.2);

  box-shadow: 0 0 25px rgba(0, 183, 255, 1), 0 0 45px rgba(0, 150, 255, 0.8);

}



/* Active click effect */

.carousel-control-prev:active,

.carousel-control-next:active {

  transform: scale(0.9);

  box-shadow: 0 0 30px rgba(0, 183, 255, 1);

}

.dc-home-section .dc-our-services > div {

  display: flex;

  flex-direction: column;

  align-items: center;

  max-width: 540px;

  margin: 0 auto;

  box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.2);

}

.dc-home-section .dc-our-services > div > h1 {

  font-size: 30px;

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

  border-radius: 10px;

  display: inline-block;

  font-weight: 500;

  transition: all 0.3s ease;

}

.dc-home-section .dc-our-services > div > span {

  height: 2px;

  width: 15%;

  position: relative;

  left: -5px;

  background-color: #fa9800;

}

.dc-home-section .dc-our-services > div > p {

  font-size: 15px;

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

  font-weight: 400;

  margin-left: 33px;

}

/* About us */

.dc-home-section .dc-about-us {

  position: relative;

  width: 100%;

  /*background-image: url("/Images/bgimg.png");*/

  background-size: cover;

  background-position: center;

  background-attachment: fixed;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

}

.bg-img {

  position: absolute;

  width: 100%;

  height: 100%;

  object-fit: cover;

  z-index: -1;

}

.dc-home-section .dc-about-us::before {

  content: "";

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

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

  z-index: 1;

}

.dc-home-section .dc-about-us .content {

  z-index: 2;

}

.dc-home-section .dc-about-us .content > .content-section {

  display: flex;

  flex-direction: column;

  align-items: center;

  /* max-width: 540px; */

  margin: 0 auto;

  /*box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.2);*/

}

.dc-home-section .dc-about-us .content > .content-section > h1 {

  font-size: 30px;

  /* font-family: "Rubik", sans-serif; */

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

  border-radius: 10px;

  display: inline-block;

  font-weight: 500;

  transition: all 0.3s ease;

}

.dc-home-section .dc-about-us .content > .content-section > span {

  height: 2px;

  width: 15%;

  position: relative;

  left: -5px;

  background-color: #fa9800;

}

.dc-home-section .dc-about-us .content > .content-section > p {

  font-size: 15px;

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

  font-weight: 400;

  margin-left: 33px;

}

.dc-home-section .dc-about-us .content > .card-section .modern-card {

  background-color: #fff;

  position: relative;

  cursor: pointer;

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

  transition: transform 0.4s ease, box-shadow 0.4s ease;

  border: none;

  border-radius: 15px;

  overflow: hidden;

  /* height:400px; */

}

.dc-home-section .dc-about-us .content > .card-section .modern-card:hover {

  transform: translateY(-8);

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

}

.dc-home-section .dc-about-us .content > .card-section .fav-icons {

  position: absolute;

  top: 50%;

  left: 50%;

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

  background: radial-gradient(

    circle at 50% 50%,

    rgba(0, 150, 255, 0.5) 0%,

    rgba(0, 0, 0, 0.9) 80%

  );

  display: flex;

  justify-content: center;

  color: #fff;

  padding: 15px;

  border-radius: 50%;

  width: 100%;

  font-size: 24px;

  box-shadow: 0 0 15px rgba(0, 183, 255, 0.8);

  z-index: 2;

}

.dc-home-section .dc-about-us .content > .card-section .modern-card img {

  background: radial-gradient(

    circle at 50% 50%,

    rgba(0, 150, 255, 0.5) 0%,

    rgba(0, 0, 0, 0.9) 80%

  );

  background-color: #0a0a0a; /* Fallback for older browsers */

  padding: 10px; /* Optional padding to make the effect more pronounced */

  border-radius: 10px; /* Smooth edges */

  box-shadow: 0 0 20px rgba(0, 150, 255, 0.8);

  transition: transform 0.3s ease-in-out;

  /* height: 250px; */

  height: 180px;

}

.dc-home-section .dc-about-us .content > .card-section .modern-card:hover img {

  transform: scale(1.1);

  filter: brightness(1);

}

.dc-home-section .dc-about-us .content > .card-section .modern-card .card-body {

  display: flex;

  flex-direction: column;

  align-items: center;

}

.dc-home-section

  .dc-about-us

  .content

  > .card-section

  .modern-card

  .card-body

  > p {

  font-size: 15px;

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

}

.dc-home-section

  .dc-about-us

  .content

  > .card-section

  .modern-card

  .card-body

  > h5 {

  font-size: 16px;

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

  font-weight: bold;

  color: #000;

}

.dc-home-section

  .dc-about-us

  .content

  > .card-section

  .modern-card:hover

  .card-body

  > h5 {

  color: #fa9800;

}

/* New Css for About us Cards */

.section-aboutus .card-grid {

  display: grid;

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

  gap: 20px;

  padding: 40px;

}



/* Wrapper controls spacing & smooth animation */

.section-aboutus .card-wrapper {

  position: relative;

  transition: all 0.4s ease-in-out;

}



/* Card styling */

.section-aboutus .card {

  position: relative;

  background: #fff;

  border-radius: 10px;

  border: 1px solid #ccc;

  overflow: hidden;

  transition: all 0.6s ease-in-out;

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

  height: auto;          /* ✅ Allow content to define height */

  max-height: none;      /* ✅ Prevent cutting text */

}



/* On hover - subtle lift effect */

.section-aboutus .card-wrapper:hover .card {

  transform: translateY(-5px);

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);

}



/* Image */

.section-aboutus .card img {

  max-width: 100%;

  /* width: 100%; */

  /* height: 180px; */



  height: auto;

  object-fit: cover;

  border-radius: 10px 10px 0 0;

  padding: 10px;

  background: radial-gradient(

    circle at 50% 50%,

    rgba(0, 150, 255, 0.5) 0%,

    rgba(0, 0, 0, 0.9) 80%

  );

  background-color: #0a0a0a;

}



/* Card Body */

.section-aboutus .card-body {

  padding: 10px 15px;

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

}

.section-aboutus .card-body .card-title {

  font-size: 16px;

  font-weight: 600;

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

  display: flex;

  align-items: center;

  width: fit-content;

  margin: 0 auto;

}

/* Collapsible Content */

.section-aboutus .cardContent {

  max-height: 4.5em; /* collapsed by default */

  overflow: hidden;

  position: relative;

  transition: max-height 0.6s ease-in-out;

}



/* Expand inner content on hover */

.section-aboutus .card-wrapper:hover .cardContent {

  max-height: 1000px; /* ✅ reveal full text smoothly */

}



/* Gradient fade & arrow effect */

.section-aboutus .cardContent::after {

  content: "\f282";

  font-family: "bootstrap-icons";

  font-size: 20px;

  color: #007fff;

  display: flex;

  align-items: flex-end;

  justify-content: center;

  position: absolute;

  bottom: -5px;

  left: 0;

  width: 100%;

  height: 2em;

  background: linear-gradient(to bottom, transparent, white);

  transition: opacity 0.3s ease;

}



.section-aboutus .card-wrapper:hover .cardContent::after {

  opacity: 0; /* hide arrow when expanded */

}

/* More Info link */

.section-aboutus .more-info {

  display: inline-block;

  font-weight: bold;

  color: #007bff;

  text-decoration: none;

  margin-top: 10px;

  position: relative;

  z-index: 5; /* ✅ ensures it's above overlays */

  pointer-events: auto; /* ✅ ensures click works */

}

/* Hover Expansion */

.section-aboutus .card-wrapper:hover .cardContent {

  transition: all 2.5s ease-in-out;

  max-height: 1000px;

}

.section-aboutus .card-wrapper:hover .cardContent::after {

  opacity: 0;

}

.section-aboutus .card-wrapper:hover .more-info {

  display: inline-block;

}

/* End Here */

/* About Us cards title */

.index-navigationAboutus {

  text-decoration: none;

}

.card-title {

  background-color: #fa9800;

  display: inline-block;

  padding: 5px 15px;

  border-radius: 5px;

  color: black !important;

  border: none;

  outline: none;

  text-decoration: none;

}



.card-title:hover,

.card-title:focus,

.card-title:active {

  background-color: #fa9800 !important;

  color: black !important;

  text-decoration: none !important;

  border: none !important;

  outline: none !important;

  box-shadow: none !important;

}



.connect {

  color: #fa9800;

}



.dc-home-section .dc-choose-us .content-section {

  width: fit-content;

  margin: 0 auto;

}

.dc-home-section .dc-choose-us .content-section .heading {

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

  font-size: 25px;

}



.dc-home-section .dc-choose-us .line {

  display: inline-block;

  height: 2px;

  background: #fa9800;

  position: relative;

  top: -5px;

  left: 35%;

  width: 60px;

}



.dc-home-section .dc-choose-us .card-section img {

  /* background: radial-gradient(

    circle at 50% 50%,

    rgba(0, 150, 255, 0.5) 0%,

    rgba(0, 0, 0, 0.9) 80%

  ); */

  object-fit: contain;

  /* height: 200px; */

  height: 150px;

  width: 100%;

  display: block;

  object-fit: contain;

  transition: filter 0.3s ease;

  filter: grayscale(70%);

  /* box-shadow: 0 0 20px rgba(0, 150, 255, 0.8); */

}

.dc-home-section .dc-choose-us .card-section .card-body {

  display: flex;

  flex-direction: column;

  align-items: center;

}

.dc-home-section .dc-choose-us .card-section .choose-card {

  position: relative;

  box-shadow: 0 4px 15px rgba(194, 180, 103, 0.1);

  overflow: hidden;

  border-radius: 12px;

  transition: transform 0.4s ease-in-out;

}

.dc-home-section .dc-choose-us .card-section .choose-card::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 60px;

  height: 60px;

  background: linear-gradient(135deg, #ddd 50%, #fff 50%, #ddd 100%);

  clip-path: polygon(0% 0%, 100% 0%, 0% 100%);

  box-shadow: -3px -3px 6px rgba(0, 150, 255, 0.8);

  z-index: 2;

}

.dc-choose-us .card-section .choose-card .heading {

  display: -webkit-box;

  -webkit-line-clamp: 1;

  line-clamp: 4;

  -webkit-box-orient: vertical;

  overflow: hidden;

  text-overflow: ellipsis;

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

  font-size: 25px;

  position: relative;

}

.dc-home-section .dc-choose-us .card-section .limted-text {

  display: -webkit-box;

  -webkit-line-clamp: 5;

  line-clamp: 5;

  -webkit-box-orient: vertical;

  overflow: hidden;

  text-overflow: ellipsis;

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

}



.dc-home-section .dc-user-support {

  position: relative;

  overflow: hidden;

}

.dc-home-section .dc-user-support::before {

  content: "";

  position: absolute;

  top: 0;

  width: 100%;

  height: 100%;

  /*background: linear-gradient(170deg, #fff, rgba(0, 150, 255, 0.8));*/

  background: linear-gradient(170deg, #fff, #fe9a00);

  z-index: -1;

  clip-path: polygon(100% 0, 0 0, 0 100%);

}

.dc-home-section .dc-user-support .support-box > div > div {

  z-index: 1;

  display: flex;

  height: 100%;

  flex-direction: column;

  background-color: #fff;

  justify-content: center;

  border-radius: 25px 25px 0 0;

  box-shadow: 0 0 25px rgba(231, 228, 228, 0.9);

  /* box-shadow: -1px -1px 8px rgba(0, 150, 255, 0.8); */

}

.dc-home-section .dc-user-support .support-box .abs-btn a {

  outline: none;

  text-decoration: none;

  color: #fff;

  font-size: 15px;

  font-weight: 400;

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

}

.dc-home-section .dc-user-support .support-box .abs-btn:hover a {

  color: #fe9a00;

}

.dc-home-section .dc-user-support .support-box > div > div {

  height: 100%;

}

/* Contact Form */

.contactus-section {

  /* padding: 80px 20px; */

  padding: 0 20px 40px 20px;

  background-color: #ffffff;

  font-family: "Segoe UI", sans-serif;

}



.contactus-wrapper {

  background: #ffffff;

  max-width: 800px;

  margin: 0 auto;

  border-radius: 16px;

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);

  padding: 40px;

}



.contactus-title {

  text-align: center;

  font-size: 28px;

  font-weight: 600;

  color: #333;

  margin-bottom: 30px;

}



/* Intent Section */

.intent-label {

  font-weight: 500;

  margin-bottom: 10px;

}



.radio-options {

  display: flex;

  gap: 20px;

  margin-bottom: 10px;

}



.radio-item {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 15px;

  color: #333;

}



.form-warning {

  color: #b00020;

  /*color: #d9534f;*/

  font-size: 14px;

  font-weight: 500;

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

  margin-bottom: 20px;

}



/* Form Grid */

.contactus-form .form-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 16px;

  margin-bottom: 24px;

}



.contactus-form input[type="text"],

.contactus-form input[type="email"],

.contactus-form input[type="tel"] {

  width: 100%;

  padding: 12px 14px;

  border: 1px solid #ccc8c8;

  border-radius: 8px;

  font-size: 15px;

  transition: border-color 0.3s ease;

  background-color: #fefefe;

}



.contactus-form input:focus {

  border-color: #ccc;

  outline: none;

}



/* Consent */

.form-consent {

  margin-bottom: 20px;

}



.checkbox-label {

  display: flex;

  align-items: flex-start;

  gap: 10px;

  font-size: 14px;

  color: #444;

}



.checkbox-label input[type="checkbox"] {

  margin-top: 4px;

}



.form-note {

  font-size: 13px;

  color: #6c757d;

  margin-top: 8px;

}



/* Button */

.submit-container {

  display: flex;

  justify-content: center;

}

.btn-submit {

  width: 20vw;

  padding: 14px;

  background-color: #fa9800;

  color: black;

  font-size: 16px;

  font-weight: 600;

  border: none;

  border-radius: 10px;

  cursor: pointer;

  transition: background-color 0.3s;

  transition: all 0.5s ease;

}



.btn-submit:hover {

  background-color: #fa9800;

  transform: scale(1.1);

}



/* Companies logo Home page */

.homeCompanies-container {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 0;

}

.homeCompanies-container > div {

  height: 80px;

  width: 90px;

}

.homeCompanies-container img {

  max-width: 100%;

  height: 100%;

  display: block;

  object-fit: cover;

}

.homeCompanies-container p {

  margin-top: 8px;

  font-size: 1rem;

  font-weight: 600;

  line-height: 1.4rem;

  letter-spacing: 0.03125rem;

  color: #333;

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

}

/* .duns-image {

  width: 170px;

  height: 130px;

  object-fit: cover;

} */

/* Partners Logos */

.custom-col {

  flex: 0 0 14.2857%;

  max-width: 14.2857%;

}

.partners-container {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  width: 120px;

  height: 120px;

}

.partners-container .partnerImage-container {

  width: 70px;

  height: 70px;

  overflow: hidden;

}

/* .partners-containergif {

  width: 120px;

  height: 110px;

} */

.partners-container .partnergif {

  height: 110px;

  width: 120px;

  object-fit: cover;

}

.partners-container .partnerImage-container img {

  max-width: 100%;

  height: 100%;

  display: block;

  object-fit: contain;

}



.partners-container p {

  font-weight: 600;

  margin-top: 8px;

  font-size: 1rem;

  line-height: 1.4rem;

  letter-spacing: 0.03125rem;

  color: #333;

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

}



.partners-container1 {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  width: 120px;

  height: 120px;

}

.partners-container1 .partnerImage-container1 {

  width: 70px;

  height: 70px;

  overflow: hidden;

}

.partners-container1 .partnerImage-container1 img {

  max-width: 100%;

  height: 100%;

  display: block;

  object-fit: contain;

}



.partners-container1 p {

  font-weight: 600;

  margin-top: 8px;

  font-size: 1rem;

  line-height: 1.4rem;

  letter-spacing: 0.03125rem;

  color: #333;

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

}



/* VPS PROJECT PAGE */

.vps-main-container {

  display: flex;

  flex-direction: column;

  padding: 0 !important;

}

.dedicated-main-conatiner {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

.cloud-migration {

  display: flex;

  flex-direction: column;

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

/* Banner Header Images */



/* Common CSS for Small Small components */

/* banner */

.banner-header {

  margin-top: 90px;

}

.banner-header .rounded-box {

  font-size: 15px;

  font-weight: 600;

}

.first-layer {

  background: url("/assets/Images/dedicatedbg.png");

  width: 100%;

  height: 70vh;

  background-repeat: no-repeat;

  filter: drop-shadow(0 0 20px rgba(0, 183, 255, 0.8));

  background-position: center;

  z-index: 1;

}



/* Header Content */

.header-container {

  margin: 0 auto;

  width: fit-content;

  display: flex;

  flex-direction: column;

  align-items: center;

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

  box-sizing: border-box;

}



.header-container > h1 {

  font-size: 25px;

  /* text-transform: uppercase; */

  border-radius: 10px;

  display: inline-block;

  font-weight: 600;

  transition: all 0.3s ease;

}

.header-container > h1:hover {

  color: #fe9a00;

}

.header-container > span {

  height: 3px;

  width: 60%;

  position: relative;

  left: -5px;

  opacity: 0.4;

  background-color: #fe9a00;

  box-shadow: 0px 4px 8px rgba(247, 149, 30, 0.916);

}

/* Dedicated, VPS, Cloud Migration Server Plans */

.plan-text {

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

  font-size: 16px;

  text-align: justify;

  word-spacing: 0.3px;

  line-height: 1.6;

  color: #111;

  font-weight: 400;

  max-width: 900px;

  margin: 0 auto;

}



/* Server plans */

.plan-card-container .card-items {

  width: 100%;

}

.plan-card-container .card-items > .plan-header {

  background-color: #072437;

  color: #fff;

  padding: 13px 5px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  height: 150px;

}

.plan-card-container .card-items > .plan-header > img {

  width: 120px;

  height: 100px;

  margin-bottom: 5px;

  object-fit: contain;

}

.plan-card-container .card-items .content-container {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

}

.plan-card-container .card-items .content-container > h3,

h4 {

  margin: 0;

  font-size: 16px;

  font-weight: 600;

}



.plan-card-container .card-items .card-body .plan-features {

  margin: 0;

  padding: 1px 0;

  list-style: none;

}

.plan-card-container .card-items .card-body .plan-features li {

  padding: 8px 0;

  border-bottom: 2px solid #fa9800;

  font-size: 13px;

  font-weight: 600;

  color: #111;

}



.plan-card-container .card-items .card-body .button-container button {

  background-color: #fa9800;

  color: #333;

  display: inline-block;

  font-size: 15px;

  font-weight: 600;

  padding: 7px 25px;

  border-radius: 5px;

  text-decoration: none;

  text-transform: uppercase;

  border: none;

  outline: none;

  transition: 0.5s all ease;

}



/* FEATURES CONTAINER */

.our-features .feature-container {

  position: relative;

  margin-top: 2rem;

}



.our-features .feature-container::before {

  content: "";

  position: absolute;

  top: 0;

  width: 100%;

  height: 100%;

  background: linear-gradient(170deg, #fff, #fe9a00);

  /* rgba(0, 150, 255, 0.8) */

  z-index: -1;

  clip-path: polygon(100% 0, 0 0, 0 100%);

}

.our-features .feature-container .support-box {

  margin-bottom: 3rem;

  color: #000;

}

.our-features .feature-container .support-box > div > div {

  position: relative;

  display: flex;

  height: 100%;

  flex-direction: column;

  background-color: #fff;

  justify-content: center;

  max-width: 530px;

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

  transition: transform 0.3s ease, box-shadow 0.3s ease;

  cursor: pointer;

}



.our-features .feature-container .support-box > div > div:hover {

  transform: translateY(-10px);

  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15);

}

/* .our-features .feature-container .support-box .fav-icons {

  color: gray;

}



.our-features .feature-container .support-box > div:hover .fav-icons {

  color: #000;

} */

.our-features .feature-container .support-box > div > div > h4 {

  font-weight: 600;

  font-size: 18px;

  margin-bottom: 10px;

}

/* Why Choose DCS  */

.dc-choose-us .card-section .choose-card {

  height: 100%;

  position: relative;

  box-shadow: 0 4px 15px rgba(194, 180, 103, 0.1);

  overflow: hidden;

  border-radius: 12px;



  transition: transform 0.4s ease-in-out;

}

.dc-choose-us .card-section .choose-card::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 60px;

  height: 60px;

  background: linear-gradient(135deg, #ddd 50%, #fff 50%, #ddd 100%);

  clip-path: polygon(0% 0%, 100% 0%, 0% 100%);

  box-shadow: -3px -3px 6px rgba(0, 150, 255, 0.8);

  z-index: 2;

}

.dc-choose-us .card-section .card-body {

  display: flex;

  flex-direction: column;

  align-items: center;

}

.dc-choose-us .card-section img {

  object-fit: contain;

  height: 150px;

  width: 100%;

  display: block;

  object-fit: contain;

  transition: filter 0.3s ease;

  filter: grayscale(70%);

}



.dc-choose-us .card-section .choose-card .top-heading {

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

  font-size: 18px;

  font-weight: 600;

  position: relative;

  text-align: center;

}

.dc-choose-us .card-section .choose-card .top-heading:hover {

  color: #fe9a00;

}

.dc-choose-us .card-section .limted-text {

  /* display: -webkit-box;

  -webkit-line-clamp: 6;

  line-clamp: 6; */

  text-overflow: ellipsis;

  -webkit-box-orient: vertical;

  overflow: hidden;

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

  word-spacing: 0.3px;

  word-break: break-word;

  overflow-wrap: break-word;

  hyphens: auto;

}

/* DevOps page devOps toolchain*/

.devOps-tools .devOps-card {

  background-color: #fff;

  position: relative;

  cursor: pointer;

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

  transition: transform 0.4s ease, box-shadow 0.4s ease;

  border: none;

  border-radius: 15px;

  overflow: hidden;

  height: 350px;

  transition: all 0.3s ease;

}



.devOps-tools .tools-image {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  background: radial-gradient(

    circle at 50% 50%,

    rgba(0, 150, 255, 0.5) 0%,

    rgba(0, 0, 0, 0.9) 80%

  );

  height: 180px;

  overflow: hidden;

  background-color: #0a0a0a;

}

.devOps-tools .tools-image > img {

  height: 160px;

  object-fit: contain;

}

.devOps-tools .tools-image > img {

  filter: drop-shadow(0 0 20px rgba(0, 183, 255, 0.8));



  transition: all 0.3s ease;

  object-fit: cover;

}

.devOps-tools .data-management {

  height: 300px;

}

.devOps-tools .devOps-card:hover .tools-image > img {

  transform: scale(1.2);

}

.devOps-tools .tools-image > p {

  color: #fff;

  font-size: 20px;

}

.devOps-tools .card-body p {

  text-align: justify;

}

/* Why devOps matter */

.dg-devOps .why-devOps .devOps-container {

  display: flex;

  justify-content: center;

  align-items: center;

  overflow: hidden;

}

.dg-devOps .why-devOps .devOps-container img.devOps-img {

  width: 70vw;

  height: 60vh;

  object-fit: contain;

}

.dg-devOps .why-devOps .devOps-container > div img {

  display: flex;

  align-items: center;

  justify-content: center;

  object-fit: cover;

}

/* what you will get */

.dc-you-get .background-overlay {

  /* background: url("/assets/Images/getbg.png"); */

  position: absolute;

  top: 0;

  opacity: 0.2;

  height: 100%;

  width: 100%;

  background-position: center;

  background-repeat: no-repeat;

  background-attachment: fixed;

  pointer-events: none;

  z-index: 0;

}



.dc-get-container .feature-box {

  background: white;

  padding: 30px 20px;

  border-radius: 20px 20px 0 0;

  text-align: justify;

  height: 100%;

  box-shadow: 6px -1px 14px rgba(13, 110, 253, 0.05);

  transition: all 0.3s ease;

  position: relative;

  transition: transform 0.3 ease, box-shadow 0.3s ease;

}

.dc-get-container .feature-box h3 {

  font-size: 18px;

  font-weight: 600;

}

.dc-get-container .feature-box .get-contact {

  margin-top: 3px;

  color: #fa9800;

}

/* .dc-get-container .feature-box::before {

  content: "";

  position: absolute;

  bottom: 0;

  left: 50%;

  transform: translateX(-50%);

  width: 60%;

  height: 4px;

  background: #fe9a00;

  border-radius: 2px;

  transition: width 0.3s ease;

  opacity: 0;

}

.dc-get-container .feature-box:hover::before {

  width: 100%;

  opacity: 1;

} */

/* Certified DevOps */

.certified-devOps .card-container .card {

  display: flex;

  align-items: center;

  justify-content: center;

  box-sizing: border-box;

  cursor: pointer;

  transition: all 0.3s ease;

  height: 300px;

}

.certified-devOps .card-container .card:hover {

  transform: translateY(-5px);



  background-color: #f9f9f9;

}



.certified-devOps .card-container .card .img-container {

  width: 110px;

  height: 110px;

}

.certified-devOps .card-container .card .img-container img {

  height: 100%;

  width: 100%;

  object-fit: contain;

}

.certified-devOps .card-container .card .text-container {

  display: flex;

  flex-direction: column;

  align-items: center;

}

.certified-devOps .card-container .card .text-container p {

  font-size: 15px;

  line-height: 1.6;

}

/*-- Reason Why migrate public cloud to DCS Cloud */

.reason-migration .migration-cards .security-svg {

  height: 120px;

  width: 120px;

}

.reason-migration .migration-cards > div > div {

  display: flex;

  align-items: center;

}

.reason-migration .migration-cards .card {

  height: 350px;

}

.reason-migration .migration-cards .text-container ul {

  list-style-type: disc;

  padding-left: 20px;

  font-size: 15px;

  color: #444;

}

.reason-migration .migration-cards .text-container ul li {

  margin-top: 8px;

  /* list-style-type: square; */

  list-style: none;

}

.reason-migration .migration-cards .text-container ul li::before {

  content: "✔";

  margin-right: 8px;

  color: #198754; /* Bootstrap success green */

  font-weight: bold;

}



/* WHat Clients are Saying */

.clients-container {

  overflow: hidden;

}

.clients-container .testimonial-logo {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 1px;



  height: 350px;

}

.clients-container .testimonial-logo .logo-container-1 {

  display: flex;

  gap: 15px;

}

.testimonial-wrapper {

  width: 190px;

  height: 350px;

  position: relative;

  perspective: 1200px;

  margin: 50px auto;

  cursor: pointer;

}



.card-inner {

  width: 100%;

  height: 100%;

  transition: transform 1s;

  transform-style: preserve-3d;

  position: relative;

}



.testimonial-wrapper:hover .card-inner {

  transform: rotateY(180deg) rotateX(10deg); /* unique diagonal rotation */

}



.card-content {

  position: absolute;

  width: 100%;

  height: 100%;

  backface-visibility: hidden;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 20px;

  border-radius: 12px;

  background: linear-gradient(135deg, #d8eaff, #e6f2ff);

  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.2);

  transition: all 0.6s ease-in-out;

  overflow: hidden;

}

.card-content img {

  max-width: 100%;

  height: auto;

  display: block;

  object-fit: contain;

}

/* .card-content h1 {

  font-size: 28px;

  font-weight: 600;

  text-align: start;

} */

.dotted-heading {

  font-size: 28px;

  font-weight: 600;

  text-align: start;

}



.dotted-heading span {

  border-bottom: 2px dotted #111;

  padding-bottom: 2px;

}

.card-content.default {

  transform: rotateY(0deg);

  z-index: 2;

}



.card-content.new {

  transform: rotateY(180deg);

  background: linear-gradient(135deg, #d8eaff, #e6f2ff);

}



/* .border-cover.top,

.border-cover.bottom {

  position: absolute;

  width: 100%;

  height: 2px;

  background: #fa9800;

  transform: scaleX(0);

  opacity: 0;

  transform-origin: center;



  transition: transform 0.4s ease, opacity 0.4s ease;

} */



.border-cover.top {

  top: 0;

  border-radius: 15px;

}

.border-cover.bottom {

  border-radius: 15px;

  bottom: 0;

}

.testimonial-wrapper.flipped .card-inner {

  transform: rotateY(180deg) rotateX(10deg);

}

/* .testimonial-wrapper:hover .border-cover.top,

.testimonial-wrapper:hover .border-cover.bottom {

  animation: pulse 0.6s ease;

} */

.testimonial-wrapper:hover .border-cover.top,

.testimonial-wrapper:hover .border-cover.bottom {

  transform: scaleX(1);

  opacity: 1;

}

/* Optional slight delay to stagger top and bottom animation */

.testimonial-wrapper:hover .border-cover.bottom {

  animation-delay: 0.1s;

}



/* @keyframes pulse {

  0% {

    transform: scaleX(0);

    opacity: 0.3;

  }

  50% {

    transform: scaleX(1);

    opacity: 1;

  }

  100% {

    transform: scaleX(0);

    opacity: 0.3;

  }

} */

.clients-container .testimonial-logo .logo-container-1 > div,

.clients-container .testimonial-logo .logo-container-2 > div {

  height: 80px;

  width: 80px;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  border: 5px solid #ddd;

  border-radius: 50%;

}

.clients-container .testimonial-logo .logo-container-1 > div img,

.clients-container .testimonial-logo .logo-container-2 > div img {

  width: 100%;

  height: 100%;

  border-radius: 50%;

  padding: 0;

  margin: 0;

  object-fit: cover;

  transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.clients-container .testimonial-logo .logo-container-1 > div img:hover,

.clients-container .testimonial-logo .logo-container-2 > div img:hover {

  transform: scale(1.1);

  box-shadow: 0 0 15px rgba(0, 123, 255, 0.7);

}

.clients-container .testimonial-slides .header-container > h1 {

  margin-top: 2rem;

  font-size: 17px;

}



.clients-container .testimonial-slides .carousel-inner {

  height: 300px;

  display: flex;

  align-items: center;



  /* margin-top: 1rem; */

}

#testimonialCarousel .carousel-inner .slide-imgs {

  max-width: 150px;

  height: 80px;

  margin-bottom: 20px;

}



#testimonialCarousel .carousel-item .top-section {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  margin-top: -3rem;

}



.image-text-flex {

  display: flex;

  align-items: center;

  gap: 1rem;

  flex-wrap: wrap;

}



.lastImage {

  width: 60px;

  height: 60px;

  border-radius: 50%;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: #f4f4f4;

}



.slide-imgsLast {

  max-width: 100%;

  /* width: 100%; */

  height: 100%;

  object-fit: cover;

  display: block;

  border-radius: 50%;

}

.slide-imgsLast.default {

  border: 3px solid black;

}

#testimonialCarousel .carousel-item .top-section .lead {

  max-width: 400px;

}

#testimonialCarousel .carousel-item .star-rating {

  display: flex;

  justify-content: start;

}

#testimonialCarousel .carousel-item .star-rating i {

  font-size: 1.1rem;

  color: #ffc107;

}

#testimonialCarousel .carousel-inner .lead {

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

  line-height: 1.6;

  font-size: 16px;

  font-weight: 500;

}

.clients-container #testimonialCarousel .carousel-control-prev,

.clients-container #testimonialCarousel .carousel-control-next {

  width: 6%;

  opacity: 1;

  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;

}



/* (Optional) */

.clients-container #testimonialCarousel .carousel-control-prev:hover,

.clients-container #testimonialCarousel .carousel-control-next:hover {

  box-shadow: none;

}



.accordion-common {

  margin-bottom: 1rem;

}

.accordion-common .accordion-item button {

  font-size: 16px;

  font-weight: 600;

}

.accordion-common .accordion-item .accordion-body {

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

  font-size: 15px;

  line-height: 1.6;

  font-weight: 500;

}

/*Common CSS for Small Small components  End Here */



/* Cloud Architect Review Optimization */

.architect-cards .card {

  transition: transform 0.3s ease, box-shadow 0.3s ease;

  background: linear-gradient(145deg, #ffffff, #f4f8fb);

  border-radius: 1.5rem;

}

.architect-cards .card:hover {

  transform: translateY(-3px);

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);

}

.architect-cards .bootstrap-icons {

  font-size: 6rem;

  color: #fa9800;

}

.architect-cards .custom-list {

  list-style: none;

  padding-left: 0;

  font-size: 0.95rem;

  line-height: 1.7;

}

.architect-cards .custom-list > li {

  margin-bottom: 1rem;

  position: relative;

  padding-left: 1.5rem;

}

.architect-cards .custom-list > li::before {

  content: "✔";

  position: absolute;

  left: 0;

  color: #fa9800;

  font-weight: bold;

  font-size: 1rem;

}

.architect-cards .nested-list {

  list-style: disc;

  padding-left: 1.5rem;

  margin-top: 0.5rem;

  background: #ffffff;

  border-left: 3px solid #fa9800;

  border-radius: 0.5rem;

  padding: 0.5rem 1rem;

  list-style-type: disc;

}

.architect-cards .nested-list li {

  margin-bottom: 0.2rem;

  margin-left: 10px;

  list-style-type: circle;

}

/* Database management */

/* .data-management .devOps-card {

  height: 320px;

}

.data-management .tools-image {

  height: 200px;

} */



/* Network Testing */

.core-services {

  background: linear-gradient(135deg, #ffffff, #f3f5f7);

}



.hex-tile {

  display: flex;

  justify-content: center;

}



.hexagon {

  width: 300px;

  aspect-ratio: 1 / 0.866;

  background: linear-gradient(145deg, #ffff, #ffff);

  color: #111;

  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 1.5rem;

  text-align: center;

  transition: 0.3s;

  cursor: default;

  border: 1px solid #fa9800;

  box-shadow: -1px 8px 20px rgba(17, 16, 16, 0.1);

}



.hexagon:hover {

  background: linear-gradient(145deg, #fff, #dbd1d1);

  transform: scale(1.05);

}



.hex-content h5 {

  font-size: 1.3rem;

  margin-bottom: 0.5rem;

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

  font-weight: 600;

}



.hex-content p {

  font-size: 1.2rem;

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

  margin-bottom: 0;

  font-weight: 500;

}

/* what we offer or Our services in Gen AI Page */

.our-offers .card {

  display: flex;

  flex-direction: column;

  align-items: center;

}

.our-offers .card img {

  height: 150px;

  width: 90%;

  object-fit: contain;

  border-radius: 6px;

  background: radial-gradient(

    circle at 50% 50%,

    rgba(0, 150, 255, 0.5) 0%,

    rgba(0, 0, 0, 0.9) 80%

  );

  background-color: #0a0a0a;

}

.our-offers .card .card-body {

  display: flex;

  flex-direction: column;

  align-items: center;

}

.our-offers .card .card-title {

  font-size: 15px;

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

}



/* Cart Page */

.cart-page {

  background: linear-gradient(135deg, #eeecec, #f3f2f2);

}

.cart-page .advertise-banner {

  margin: 0;

  height: 70px;

  width: 100%;

  background-color: #fa9800;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 0px 0px 10px 10px;

}

.cart-page .advertise-banner p {

  font-size: 18px;

  font-weight: 600;

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

}

.selectedPlan-section {

  background: #fff;

  padding: 20px;

}

.selectedPlan-section .plan-name {

  border-bottom: 1px solid #4b4a4a;

}

.selectedPlan-section .no-planSelect {

  font-size: 17px;

  font-weight: 600;

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

}

.selectedPlan-section .plan-name h2 {

  font-size: 20px;

  font-weight: 500;

}

.details-section {

  background-color: #ffffff;

  border-radius: 16px;

  padding: 24px;

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

  margin-bottom: 30px;

  transition: all 0.3s ease-in-out;

}

.details-section:hover {

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.09);

}

.first-section {

  display: flex;

  justify-content: space-between;

  gap: 20px;

  flex-wrap: wrap;

}

.plan-duration {

  display: flex;

  flex-direction: column;

}

.plan-duration .text {

  font-size: 15px;

  font-weight: 550;

  color: #e78900;

}

.plan-duration .styled-select {

  width: 14rem;

  height: 3rem;

  padding-left: 15px;

  font-size: 16px;

  font-weight: 600px;

  border: 1.9px solid lightgray;

  border-radius: 8px;

  color: #39325a;

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

  outline: none;

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

  cursor: pointer;

  background: #fff;

}

.plan-duration .styled-select option {

  background-color: rgb(255, 255, 255);

  color: #111;

  font-size: 14px;

  font-weight: 500;

}

.plan-duration .styled-select option:hover {

  background-color: gray;

  color: #fff;

}



.plan-duration .plan-title {

  position: relative;

  color: #908d92;

}

.plan-duration .plan-icon {

  position: relative;

  font-size: 13px;

  color: #908d92;

  left: -33px;

  pointer-events: none;

}

.plan-duration .plan-title::before {

  position: absolute;

  content: "Plans";

  top: -26px;

  left: -216px;

  background-color: #fff;

  width: 66px;

  height: 22px;

  text-align: center;

  font-size: 15px;

  font-weight: 600;

}

.plan-price {

  display: flex;

  justify-content: space-around;

}

.plan-price .badge-btn {

  background-color: #e78900;

  height: 2.3rem;

  width: 6rem;

  color: #fff;

  outline: none;

  border: none;

}



.plan-price .price-values h3 {

  font-size: 17px;

}

.plan-price .price-values del {

  font-size: 15px;

  font-weight: 550;

}

.details-section .renews-text {

  font-size: 14px;

  font-weight: 500;

}

.choose-options {

  display: flex;

  flex-direction: column;

  background-color: #fff;

  justify-content: center;



  gap: 4px;

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

}

.choose-options .text {

  font-size: 15px;

  font-weight: 550;

  color: #e78900;

}

.form-select {

  font-size: 16px;

  font-weight: 600px;

  border: 1.9px solid lightgray;

  border-radius: 8px;

  color: #39325a;

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

  cursor: pointer;

}

.form-select:focus {

  box-shadow: none;

  border: 1px solid #e78900;

  outline: none;

}

.form-select option {

  padding: 20px 8px;

  background-color: rgb(231, 231, 231);

  font-size: 15px;

  font-weight: 500;

}

.addons-container .text {

  font-size: 15px;

  font-weight: 550;

  color: #e78900;

}



.addons-container .box {

  display: flex;

  background-color: #ffffff;

  border-radius: 16px;

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

  height: 280px;

}

.addons-container .input-checkbox {

  transform: scale(1.4);

}

.addons-container .monitoring-feature h3 {

  font-size: 15px;

  font-weight: 600;

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

  color: #444;

}

.addons-container .monitoring-feature h4 {

  font-size: 15px;

  font-weight: 500;

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

  color: #0e0e0e;

}

.addons-container .monitoring-feature p {

  font-size: 12px;

  font-weight: 500;

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

}

.addons-container .box .icons {

  font-size: 24px;

}



#subtotal-price .money-back {

  display: flex;

  align-items: center;



  justify-content: center;

  gap: 6px;

}

#subtotal-price .money-back i {

  color: #d48105;

}

#subtotal-price .money-back p {

  margin: 0;

  font-weight: 16px;

  font-weight: 600;

  color: #d48105;

}

.subtotal-container {

  background-color: #ffffff;

  border-radius: 16px;

  position: sticky;

  top: 20px;

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



  transition: all 0.3s ease-in-out;



  width: 450px;

  padding: 8px 6px;

  box-sizing: border-box;

}

.subtotal-container.sticky-active {

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);

  transform: scale(0.98);

  background-color: #f9f9f9;

}

.subtotal-container .summery {

  font-size: 18px;

  font-weight: 600;

  color: #e78900;

}

.subtotal-container .plan-name {

  font-size: 12px;

  font-weight: 600;

}

.section-detail > .selected-items {

  display: flex;

  justify-content: space-between;

}

.selected-items > div {

  display: flex;

  gap: 4px;

}

.selected-items #plan-name {

  font-size: 16px;

  font-weight: 600;

}

.selected-items > div p {

  font-size: 12px;

  font-weight: 600;

}

.subtotal-el > div {

  display: flex;

  /* justify-content: space-between; */

}

.subtotal-el .tax-content {

  font-size: 13px;

  font-weight: 600;

}

.subtotal-el .total {

  font-size: 17px;

  font-weight: 600;

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

}

.subtotal-el #grand-subtotal {

  font: 16px;

  font-weight: 600;

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

}

.subtotal-el button {

  width: 100%;

  height: 45px;

  outline: none;

  border: none;

  background: #d48105;

  color: #fff;

  font-size: 17px;

  font-weight: 600;

  border-radius: 9px;

  transition: all 0.3s ease;

}

.subtotal-el button:hover {

  background: #ad741e;

  color: #ffffff;

}



/* Financial and Operation (finops) */

.finops-container .custom-card {

  background: #ffffff;

  border-radius: 16px;

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

  overflow: hidden;

  transition: transform 0.3s ease, box-shadow 0.3s ease;

}

.finops-container .custom-card:hover {

  transform: translateY(-5px);

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);

}

.finops-container .image-box img {

  width: 100%;

  height: 220px;

  object-fit: contain;

  /* transition: filter 0.3s ease;

  filter: grayscale(70%); */

}

.finops-container .custom-card h3 {

  font-size: 17px;

  margin-bottom: 15px;

  font-weight: 600;

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

}

.finops-container .custom-card p {

  color: #111;

  font-size: 15px;

  font-weight: 500;

  line-height: 1.4;

  margin-bottom: 20px;

  text-align: justify;

}

.finops-container .custom-card ul {

  list-style: none;

  padding-left: 0;

  margin: 0;

}



.finops-container .custom-card ul li {

  position: relative;

  padding-left: 28px;

  margin-bottom: 12px;

  font-size: 14.5px;

  color: #111;

}



.finops-container .custom-card ul li::before {

  content: "✔";

  position: absolute;

  left: 0;

  color: #fa9800;

  font-weight: bold;

}

/* Colocation Offerings Section */

.colocation-offerings {

  background-color: #fff;

  color: #111;

}



.section-header h1,

.section-header h2 {

  color: #111;

  font-weight: 600;

}



.divider-line {

  display: inline-block;

  width: 60px;

  height: 4px;

  background-color: #fe9a00;

  margin-top: 10px;

  border-radius: 10px;

}



.offer-box,

.benefit-box {

  background-color: #f8f9fa;

  border-left: 4px solid #fe9a00;

  padding: 25px;

  border-radius: 12px;

  transition: all 0.3s ease-in-out;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);

  text-align: left;

}



.offer-box:hover,

.benefit-box:hover {

  background-color: #dfe7ec;

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

  transform: translateY(-4px);

}



.offer-box i,

.benefit-box i {

  font-size: 2rem;

  color: #fe9a00;

  margin-bottom: 15px;

  display: block;

}



.offer-box h4,

.benefit-box h5 {

  font-weight: 600;

  color: #333;

}



.offer-box p,

.benefit-box p {

  color: #555;

  font-size: 15px;

}



/* Fortified Page */

.about-usNavigation {

  height: 100%;

  width: 100%;

  margin-top: 7.3rem;

}

.about-usNavigation > section > div {

  background-color: #fff;

  transition: all 0.3s ease;

}

.about-usNavigation > section > div:hover {

  background-color: #f4f3f9;

  /* cursor: pointer; */

}

.about-usNavigation .top-section {

  /* background-color: #f4f3f9; */

  width: 100%;

  /* box-shadow: 0 0 25px rgba(231, 228, 228, 0.9); */

}

.about-usNavigation .top-section .image-containerNav {

  height: 280px;

  width: 500px;

  display: flex;

  justify-content: center;

  align-items: center;

}



/* .about-usNavigation .top-section .image-containerNav img {

  width: 100%;

  object-fit: cover;

} */

.about-usNavigation .top-section .intro-decription {

  font-size: 2rem;

  line-height: 2.4rem;

  color: #000;

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

  margin-bottom: 2rem;

}

.about-usNavigation .top-section .intro-text {

  font-size: 1.125rem;

  line-height: 2rem;

  letter-spacing: 0.03125rem;

  color: #444;

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

}

.about-usNavigation .middle-section {

  background-color: #ffffff;

  box-shadow: 0 0 25px rgba(231, 228, 228, 0.9);

}

.about-usNavigation .middle-section .middleImage-container {

  display: flex;

  align-items: center;

  justify-content: center;

  height: 500px;

  width: 600px;

}

/* .about-usNavigation .middle-section .middleImage-container img {

  height: 100%;

  width: 100%;

  object-fit: cover;

} */



.story-cta-list-item {

  margin-bottom: 1rem;

  position: relative;

  list-style: none;

}



.compliance-section .story-cta-link {

  font-size: 1rem;

  line-height: 2rem;

  letter-spacing: 0.03125rem;

  color: #000;

  text-decoration: none;

  padding: 0.75rem 2rem 0.75rem 2.75rem;

  border: 1px solid #e0e0e5;

  border-radius: 8px;

  background-color: #fafafa;

  display: block;

  transition: all 0.3s ease;

  position: relative;

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

}



.compliance-section .story-cta-link:hover {

  background-color: #f0f8ff;

  border-color: #c6cfd8;

  color: #fa9800;

}



.icon-left {

  position: absolute;

  left: 1rem;

  top: 50%;

  transform: translateY(-50%);

  font-size: 1.2rem;

  color: #fa9800;

}

.story-description {

  font-size: 1rem;

  line-height: 1.4rem;

  letter-spacing: 0.03125rem;

  color: #333;

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

}

.section-title {

  font-size: 2rem;

  line-height: 2.4rem;

  color: #000;

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

  margin-bottom: 2rem;

}

.about-usNavigation .bottom-section {

  background-color: #ffffff;

}

.about-usNavigation .bottom-section .bottomImage-container {

  width: 500px;

  height: 400px;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

}

.bottomImage-container img {

  max-width: 100%;

  max-height: 100%;

  width: auto;

  height: auto;

  object-fit: unset;

}

.story-cta-link {

  display: block;

  padding: 0.75rem 2rem 0.75rem 2.75rem;

  border: 1px solid #e0e0e5;

  background-color: #fafafa;

  border-radius: 8px;

  color: #000;

  text-decoration: none;

  font-size: 1.125rem;

  position: relative;

  transition: 0.3s ease;

}



.story-cta-link:hover {

  background-color: #eef6ff;

  color: #fa9800;

  border-color: #007bff;

}

/* Medium device reponsive */

@media (min-width: 768px) and (max-width: 991px) {

  .clients-container #testimonialCarousel .carousel-control-prev,

  .clients-container #testimonialCarousel .carousel-control-next {

    width: 50px;

  }

  #testimonialCarousel .carousel-item .top-section {

    margin-top: 1rem;

  }

  #testimonialCarousel .carousel-item .top-section .lead {

    margin-top: 2rem;

    max-width: 400px;

  }

  .section-aboutus .card-grid {

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

  }

  /* Clients are saying card */

  .testimonial-wrapper {

    width: 170px;

    height: 350px;

    position: relative;

    perspective: 1200px;

    margin: 50px auto;

    cursor: pointer;

  }

}

/* Media Query */

@media (max-width: 768px) {

  .our-services-dropdown:hover > .custom-dropdown-menu {

    display: block;

    margin-left: -120px;

    width: fit-content;

  }



  /* Main dropdown menu */

  .custom-dropdown-menu {

    display: none;

    position: absolute;

    top: 100%;

    left: 0;

    z-index: 1000;

    min-width: fit-content;

    padding: 10px 0;

    background-color: #fff;

    border: 1px solid #ddd;

    border-radius: 0.25rem;

    font-size: 14px;

  }

  .custom-submenu > .custom-submenu-list {

    display: none;

    position: absolute; /* Key for positioning */

    top: 20px; /* Align top with parent */



    min-width: fit-content;

  }

  .dc-home-section .dc-hero-carousel-container .banner-container {

    display: flex;

    justify-content: center;

    align-items: center;

    width: 100%;

    height: 150px;

  }

  .dc-home-section .dc-hero-carousel-container .carousel-control-prev,

  .carousel-control-next {

    width: 16%;

  }

  .carousel-control-prev-icon,

  .carousel-control-next-icon {

    display: none;

    width: 100px;



    position: relative;

    top: -4rem;

  }

  .carousel-control-prev:hover,

  .carousel-control-next:hover {

    transform: scale(1);

    box-shadow: none;

  }

  .dc-home-section .dc-our-services > div {

    width: 100%;

  }

  .dc-home-section .dc-our-services > div > h1 {

    margin-top: 5px;

    font-size: 20px;



    font-weight: 500;

  }

  .dc-home-section .dc-our-services > div > span {

    width: 20%;

    left: -8px;

  }



  /* About us Card section fortified, versitile, scaleable, etc */

  .about-usNavigation .top-section .image-containerNav {

    height: 350px;

    width: 100%;

  }



  .about-usNavigation .top-section .intro-decription {

    font-size: 1.7rem;

    line-height: 2.1rem;

    margin-bottom: 1rem;

  }

  .section-title {

    font-size: 1.7rem;

    line-height: 2.1rem;

    margin-bottom: 0px;

  }

  .about-usNavigation .middle-section .middleImage-container {

    height: 400px;

    width: 100%;

  }

  .about-usNavigation .bottom-section .bottomImage-container {

    width: 100%;

  }

  .dc-home-section .dc-about-us .content > .content-section {

    max-width: 100%;

  }

  .dc-home-section .dc-about-us .content > .content-section > h1 {

    margin-top: 5px;

    font-size: 20px;

  }

  .dc-home-section .dc-about-us .content > .content-section > span {

    height: 2px;

    width: 15%;

    left: -5px;

  }

  /* Media Query for About Us Cards */

  .section-aboutus .card-grid {

    display: flex;

    flex-direction: column;

  }



  /* Contack Form */

  .contactus-title {

    text-align: center;

    font-size: 17px;

    font-weight: 600;

    color: #333;

    margin-bottom: 30px;

  }

  .contactus-form .form-grid {

    grid-template-columns: 1fr;

  }

  .btn-submit {

    width: 100%;

  }

  .custom-col {

    flex: 0 0 48.2857%;

    max-width: 48.2857%;

  }

  .partners-containergif {

    display: flex;

    align-items: center;

    justify-content: center;

    margin-left: 1.2rem;



    padding-top: 20px;

  }

  .partners-containergif > img {

    margin-left: 62px;

  }

  /*Common media max-width:992px CSS for Small Small components  Start Here */

  /* Header Content */



  .header-container > h1 {

    font-size: 20px;

  }

  /* Dedicated, VPS Server Plans */

  .plan-text {

    font-size: 15px;

    text-align: justify;

    word-spacing: 1px;

  }

  .plan-card-container > div > div > div {

    margin-bottom: 5px;

  }

  /* what clients are saying */

  .clients-container #testimonialCarousel .carousel-control-prev,

  .clients-container #testimonialCarousel .carousel-control-next {

    width: 50px;

  }

  #testimonialCarousel .carousel-item .top-section {

    margin-top: 1rem;

  }

  #testimonialCarousel .carousel-item .top-section .lead {

    margin-top: 2rem;

    max-width: 400px;

  }

  /*  Why devOps matter or In Action */



  .dg-devOps .why-devOps .devOps-container img.devOps-img {

    width: 90vw;

    height: 100vh;

    max-height: 500px;

    object-fit: contain;

  }

  /* Certified DevOps */



  .certified-devOps .card-container .card:hover {

    transform: translateY(-5px);



    background-color: #f9f9f9;

  }

  .certified-devOps .card-container .card .img-container {

    width: 110px;

    height: 110px;

  }

  .certified-devOps .card-container .card .text-container p {

    font-size: 15px;

    line-height: 1.6;

    max-width: 300px;

  }

  .reason-migration .migration-cards .card {

    height: 400px;

  }

  /* Network Testing */



  .hexagon {

    width: 350px;



    padding: 1.2rem;

  }



  .hex-content h5 {

    font-size: 1.1rem;

    margin-bottom: 0.5rem;

    font-weight: 600;

  }



  .hex-content p {

    font-size: 16px;

    margin-bottom: 0;

    font-weight: 500;

  }



  /* Cart Page */

  .selectedPlan-section {

    background: #fff;

    padding: 0px;

  }

  .details-section {

    background-color: #ffffff;



    padding: 2px;

    box-shadow: none;

  }

  .details-section:hover {

    box-shadow: none;

  }



  .addons-container .box {

    height: auto;

  }

  .addons-container .monitoring-feature h3 {

    font-size: 18px;

  }

  .addons-container .monitoring-feature h4 {

    font-size: 18px;

  }

  .addons-container .monitoring-feature p {

    font-size: 15px;

  }

  .addons-container .box .icons {

    font-size: 28px;

  }

  .subtotal-container {

    background-color: #ffffff;

    border-radius: 16px;



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



    transition: all 0.3s ease-in-out;



    width: auto;

    padding: 8px 6px;

    box-sizing: border-box;



    overflow-y: auto;

  }

  .subtotal-container .summery {

    font-size: 18px;

    font-weight: 600;

    color: #e78900;

  }

  .subtotal-container .plan-name {

    font-size: 12px;

    font-weight: 600;

  }

  .section-detail > .selected-items {

    display: flex;

    justify-content: space-between;

  }

  .selected-items > div {

    display: flex;

    gap: 4px;

  }

  .selected-items #plan-name {

    font-size: 16px;

    font-weight: 600;

  }

  .selected-items > div p {

    font-size: 12px;

    font-weight: 600;

  }

}



/* Animation */

@keyframes scroll {

  from {

    transform: translateX(0);

  }

  to {

    transform: translateX(-100%);

  }

}