/* Google Fonts Import */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

body {
  font-family: "Inter", sans-serif;
}

/* utilties Classes */
.btn-custom {
  background-image: linear-gradient(to right in oklab, #ea580c, #c2410c);
  color: white;
}

.btn-custom:hover {
  background-image: linear-gradient(to right in oklab, #ea580c, #c2410c);
  color: white;
}

.sr-only {
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.color-primary {
  color: #ea580c;
}

.color-primary-hover:hover {
  color: #c2410c !important;
}

/* Section header */
.section-header {
  margin-bottom: 80px;
}

.section-header .section-type {
  color: #ea580c;
  background-color: #ea580c1a;
  padding: 8px 16px;
  width: fit-content;
  font-size: 14px;
  margin-bottom: 24px;
}

.section-header .title {
  font-size: 48px;
  margin-bottom: 24px;
  font-weight: 900;
}

.section-header .title.join-title {
  font-size: 72px;
}

.section-header .title span {
  color: #7c2d12;
}

.section-header .title span.special-words {
  background-image: linear-gradient(to right, #ea580c, #c2410c);
  background-clip: text;
  color: transparent;
}

.section-header .desc {
  color: #4a5565;
  font-size: 20px;
  max-width: 768px;
  margin-inline: auto;
}

section {
  padding-block: 96px;
}

/* nav bar */

.navbar {
  background-color: #fffffffa;
  border-bottom: 1px solid #f6f3f4;
  padding-block: 16px;
}

.navbar .container {
  padding-inline: 24px;
}

/* Logo  */
.navbar-brand {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-right: 48px;
}

.navbar-brand .fa-cube {
  background-image: linear-gradient(to bottom right, #ea580c, #c2410c);
  color: white;
  height: 40px;
  width: 40px;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.navbar-brand .title-brand {
  background-image: linear-gradient(to right, #ea580c, #c2410c);
  background-clip: text;
  font-size: 24px;
  color: transparent;
  margin: 0;
  font-weight: bold;
}

/* Links List  */
.navbar .navbar-nav .nav-link {
  font-weight: 500;
  color: #364153;
  transition: color 0.2s;
  cursor: pointer;
  padding: 0;
}

.navbar .navbar-nav .nav-item:not(:last-child) {
  padding-right: 32px;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
  color: #ea580c;
}

.navbar .dropdown-menu {
  left: 50%;
  transform: translateX(-50%);
  top: 60px;
}

/* buttons group */
.buttons-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.buttons-group .btn-custom {
  padding: 12px 32px;
}

.buttons-group .btn-hover {
  transition: color 0.2s;
  font-weight: 500;
  color: #364153;
  padding: 8px 24px;
}

.buttons-group .btn-hover:hover {
  color: #ea580c;
}

/*  Dropdown */
.dropdown-menu {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.dropdown-menu .hover-bg:hover {
  background: linear-gradient(to right,
      rgba(255, 68, 0, 0.08),
      rgba(255, 130, 0, 0.08));
  transition: 0.2s;
}

.dropdown-menu .hover-bg:hover .icon-box {
  scale: 1.1;
}

.dropdown-menu .hover-bg:hover .col-title {
  color: #ea580c !important;
}

.dropdown-menu .icon-box {
  width: 40px;
  height: 40px;
  background: linear-gradient(to bottom right,
      rgba(255, 68, 0, 0.1),
      rgba(255, 130, 0, 0.1));
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: scale 0.2s;
}

.dropdown-menu .cta-box {
  background: linear-gradient(to bottom right,
      rgba(255, 68, 0, 0.1),
      rgba(255, 130, 0, 0.1));
  border-color: rgba(255, 68, 0, 0.2) !important;
}

/* Hero Section */
#hero-section {
  background-image: linear-gradient(to bottom right in oklab, #fff7ed, #fff7ed);
  min-height: 100vh;
  padding-top: 96px;
  padding-bottom: 64px;
}

#hero-section .hero-header {
  color: #ea580c;
  background-color: #ea580c1a;
  padding: 8px 16px;
  width: fit-content;
  font-size: 14px;
}

#hero-section .title {
  font-size: 60px;
  font-weight: 900;
  line-height: 1.25;
  margin-top: 24px;
}

#hero-section .title .first-word {
  background-image: linear-gradient(to right in oklab,
      #7c2d12 0%,
      #ea580c 50%,
      #c2410c 100%);
  background-clip: text;
  color: transparent;
}

#hero-section .title .second-word {
  color: #7c2d12;
}

#hero-section .title .last-word {
  background-image: linear-gradient(to right in oklab, #fb923c, #ea580c);
  background-clip: text;
  color: transparent;
}

#hero-section .desc {
  color: #4a5565;
  font-size: 20px;
  line-height: 1.625;
  max-width: 672px;
}

#hero-section .btn-actions .btn {
  padding: 16px 40px;
  border-radius: 32px;
}

#hero-section .btn-actions .btn.btn-hover {
  background-image: linear-gradient(to right in oklab, #ea580c, #c2410c);
  color: white;
  transition: transform 0.2s, box-shadow 0.2s;
}

#hero-section .btn-actions .btn.btn-hover:hover {
  box-shadow: 0 20px 25px -5px #ea580c40, 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  transform: translateY(-4px);
}

#hero-section .btn-actions .btn.btn-border {
  background-image: none;
  background-color: transparent;
  border: 2px solid #d1d5dc;
  color: #364153;
  transition: color 0.2s, border-color 0.2s;
}

#hero-section .btn-actions .btn.btn-border:hover {
  border-color: #ea580c;
  color: #ea580c;
}

#hero-section .text-primary {
  color: #ea580c !important;
}

#hero-section .image-inner {
  margin-left: auto;
}

#hero-section .image-inner::before {
  content: "";
  position: absolute;
  background-image: linear-gradient(to right in oklab, #ea580c33, #c2410c33);
  inset: 0;
  width: 100%;
  height: 100%;
  rotate: 3deg;
  z-index: 2;
  border-radius: 24px;
}

#hero-section .image-box {
  background-color: white;
  padding: 32px;
  border-radius: 24px;
  z-index: 5;
}

#hero-section .image-inner .top-icon {
  position: absolute;
  top: -24px;
  right: -24px;
  background-image: linear-gradient(to bottom right, #fb923c, #ea580c);
  width: 96px;
  height: 96px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  z-index: 10;
}

#hero-section .image-inner .bottom-icon {
  position: absolute;
  bottom: -24px;
  left: -24px;
  background-image: linear-gradient(to bottom right, #c2410c, #ea580c);
  width: 80px;
  height: 80px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  z-index: 10;
}

/* Our Service  */

#services .card-item {
  padding: 32px;
  border: 1px solid #f6f3f4;
  border-radius: 16px;
  transition: transform 0.2s, box-shadow 0.2s;
}

#services .card-item .icon {
  width: 64px;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(to bottom right, #ea580c, #c2410c);
  color: white;
  font-size: 24px;
  border-radius: 16px;
  margin-bottom: 24px;
  transition: scale 0.2s;
}

#services .card-item .icon.bg-bootom-right {
  background-image: linear-gradient(to bottom right, #fb923c, #c2410c);
  color: white;
}

#services .card-item .icon.bg-right-bootom {
  background-image: linear-gradient(to bottom right, #c2410c, #fb923c);
  color: white;
}

#services .card-item h3 {
  margin-bottom: 24px;
  font-size: 20px;
  font-weight: 700;
  color: #7c2d12;
}

#services .card-item .desc {
  margin-bottom: 24px;
  color: #4a5565;
  line-height: 1.625;
}

#services .card-item ul {
  list-style: none;
  padding: 0;
}

#services .card-item ul li:not(:last-child) {
  margin-bottom: 8px;
}

#services .card-item ul li {
  font-size: 14px;
  color: #4a5565;
}

#services .card-item ul li .fa-solid {
  color: #ea580c;
  margin-right: 8px;
}

#services .card-item button {
  color: #ea580c;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  transition: color 0.2s;
}

#services .card-item button .fa-solid {
  transition: transform 0.2s;
}

#services .card-item button:hover {
  color: #c2410c;
}

#services .card-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px -12px #ea580c1a;
}

#services .card-item:hover .icon {
  scale: 1.1;
}

#services .card-item:hover button .fa-solid {
  transform: translateX(4px);
}

/* Technology Stack */

#technology .filters-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #ebe6e7;
  margin-bottom: 48px;
}

#technology .filters-list li {
  padding: 16px 32px;
  cursor: pointer;
  color: #4a5565;
  font-weight: 600;
  font-size: 18px;
  border-bottom: 2px solid transparent;
  transition: color 0.3s, border-color 0.3s;
}

#technology .filters-list li .fa-solid {
  margin-right: 8px;
}

#technology .filters-list li:hover,
#technology .filters-list li.active {
  border-color: #ea580c;
  color: #ea580c;
}

#technology .cards .cards-title {
  margin-bottom: 48px;
  text-align: center;
}

#technology .cards .cards-title h4 {
  color: #7c2d12;
  font-weight: 700;
  font-size: 24px;
  margin-bottom: 16px;
}

#technology .cards .cards-title p {
  font-size: 18px;
  color: #4a5565;
}

#technology .cards .row .card-item {
  padding: 32px;
  border-radius: 16px;
  transition: transform 0.3s, box-shadow 0.3s;
}

#technology .cards .row .card-item.bg-blue {
  background-image: linear-gradient(to bottom right, #eff6ff, #dbeafe);
}

#technology .cards .row .card-item.bg-gray {
  background-image: linear-gradient(to bottom right, #fbf9fa, #f6f3f4);
}

#technology .cards .row .card-item.bg-green {
  background-image: linear-gradient(to bottom right, #f0fdf4, #dcfce7);
}

#technology .cards .row .card-item.bg-orange {
  background-image: linear-gradient(to bottom right, #fff7ed, #ffedd4);
}

#technology .cards .row .card-item.bg-cyan {
  background-image: linear-gradient(to bottom right, #ecfeff, #cefafe);
}

#technology .cards .row .card-item.bg-purple {
  background-image: linear-gradient(to bottom right, #faf5ff, #f3e8ff);
}

#technology .card-item .icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px;
  font-size: 24px;
  color: white;
}

#technology .card-item.bg-blue .icon {
  background-color: #2b7fff;
}

#technology .card-item.bg-gray .icon {
  background-color: #000;
  font-size: 18px;
}

#technology .card-item.bg-green .icon {
  background-color: #00c951;
}

#technology .card-item.bg-orange .icon {
  background-color: #ff6900;
}

#technology .card-item.bg-cyan .icon {
  background-color: #00b8db;
}

#technology .card-item.bg-purple .icon {
  background-color: #ad46ff;
}

#technology .card-item h4 {
  font-size: 20px;
  font-weight: 700;
  color: #7c2d12;
  margin-bottom: 12px;
}

#technology .card-item p {
  margin-bottom: 16px;
  color: #4a5565;
}

#technology .card-item .hash-tags span {
  display: block;
  padding: 4px 12px;
  border-radius: 150px;
  font-size: 12px;
  font-weight: 500;
}

#technology .card-item.bg-blue .hash-tags span {
  background-color: #dbeafe;
  color: #193cb8;
}

#technology .card-item.bg-gray .hash-tags span {
  background-color: #f6f3f4;
  color: #1e2939;
}

#technology .card-item.bg-green .hash-tags span {
  background-color: #dcfce7;
  color: #016630;
}

#technology .card-item.bg-orange .hash-tags span {
  background-color: #ffedd4;
  color: #9f2d00;
}

#technology .card-item.bg-cyan .hash-tags span {
  background-color: #cefafe;
  color: #005f78;
}

#technology .card-item.bg-purple .hash-tags span {
  background-color: #f3e8ff;
  color: #6e11b0;
}

#technology .cards .row .card-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
    0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* testimonials */
#testimonials {
  background-image: linear-gradient(to right, #fbf9fa, #fbf9fa);
}

#testimonials .card {
  max-width: 1024px;
  margin-inline: auto;
}

#testimonials .icon-box {
  width: 64px;
  height: 64px;
  background-image: linear-gradient(to right, #c2410c1a, #ea580c1a);
  color: #ea580c;
  font-size: 24px;
}

#testimonials .badge {
  background-image: linear-gradient(to right, #ea580c1a, #c2410c1a);
  border-radius: 500px;
  padding: 10px 18px;
  color: #ea580c;
  font-size: 16px;
  font-weight: 600;
}

#testimonials .badge .fa-solid {
  font-size: 13px;
}

#testimonials .desc {
  color: #4a5565;
}

#testimonials .image img {
  border: 2px solid #fa5a0433;
  padding: 3px;
  width: 80px;
  height: 80px;
}

#testimonials .name {
  color: #7c2d12;
  font-size: 20px;
  font-weight: bold;
}

#testimonials .fa-linkedin,
#testimonials .percentage {
  color: #c2410c;
}

#testimonials .image .fa-circle-check {
  position: absolute;
  bottom: 5px;
  left: 58px;
  font-size: 24px;
  color: #c2410c;
}

#testimonials .carousel-inner {
  overflow: hidden !important;
  padding-block: 3px;
}

#testimonials .carousel-indicators {
  bottom: -55px;
  display: flex;
  align-items: center;
}

#testimonials .carousel-indicators [data-bs-target] {
  background-color: #d1d5dc;
  width: 8px;
  height: 8px;
  border-radius: 534px;
  border: none;
  opacity: 1;
  transition: background-color 0.3s;
  transition: width 0.5s, height 0.5s, border-raduis 0.3s;
}

#testimonials .carousel-indicators [data-bs-target]:hover {
  border-radius: 50px;
  width: 25px;
  height: 8px;
  background-color: #ea5a0c7d;
}

#testimonials .carousel-indicators .active {
  background-color: #ea580c;
}

/* questions */
#questions .accordion {
  max-width: 896px;
  margin-inline: auto;
}

#questions .accordion .accordion-item {
  border: 1px solid #ebe6e7;
  border-radius: 16px;
  background-color: white;
  transition: border-color 0.3s;
}

#questions .accordion .btn {
  border: none;
  padding: 24px;
  border-radius: 16px;
}

#questions .accordion .btn .question {
  color: #7c2d12;
  font-size: 18px;
  font-weight: 600;
}

#questions .accordion .btn .fa-chevron-down {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background-image: linear-gradient(to bottom right, #ea580c1a, #c2410c1a);
  border-radius: 500px;
  color: #ea580c;
}

#questions .accordion .accordion-text {
  padding: 8px 24px 24px;
  color: #4a5565;
}

#questions .accordion .accordion-text .fa-check {
  color: #c2410c;
}

#questions .accordion .accordion-text p {
  margin-bottom: 0;
}

#questions .accordion .accordion-item:not(:last-child) {
  margin-bottom: 16px;
}

#questions .accordion .accordion-item:hover .btn {
  background-color: #f9fafbfe;
}

#questions .accordion .accordion-item:hover {
  border-color: #c2410c;
}

/* Join Section */
#Join {
  background-color: #fffefd;
}

#Join .row {
  border-radius: 16px;
  background-color: white;
}



#Join .form {
  padding: 48px;
}

#Join .form h3 {
  color: #7c2d12;
  font-weight: 700;
  font-size: 24px;
  margin-bottom: 16px;
}

#Join .form p {
  font-size: 18px;
  color: #4a5565;
  margin-bottom: 32px;
}


#Join .form .form-label {
  color: #1e2939;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}

#Join .form .form-control,
#Join .form .form-select {
  padding: 16px 20px;
  background-color: #F3F4F6;
  border: 2px solid transparent;
  border-radius: 16px;
  transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}

#Join .form textarea {
  height: 160px;
  resize: none;
}

#Join .form .form-control:focus,
#Join .form .form-select:focus {
  background-color: white;
  border-color: #ea580c;
  box-shadow: 0 0 0 4px #ea580c1a;
}

#Join .form .check-box #rememberMe {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 2px solid #d1d5dc;
  color: #ea580c;
  accent-color: #ea580c;
}

#Join .form .check-box #rememberMe:focus {
  border-color: #ea580c;
  box-shadow: 0 0 0 4px #ea580c1a;
}

#Join .form .check-box label {
  cursor: pointer;
  font-size: 14px;
  color: #4a5565;
}

#Join .form .check-box label a {
  color: #ea580c;
  text-decoration: none;
}

#Join .form .check-box label a:hover {
  text-decoration: underline;

}


#Join .budget-range .budget-range-item {
  border: 2px solid #ebe6e7;
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
}

#Join .budget-range .peer:checked+.budget-range-item {
  border-color: #EA5A2A;
  background-color: #ea580c0d;
  color: #EA5A2A;
}

#Join button.btn {
  background-image: linear-gradient(to right, #ea580c 0%, #c2410c 50%, #fb923c 100%);
  font-size: 18px;
  font-weight: 700;
  color: white;
  border-radius: 16px;
  padding-block: 20px;
  width: 100%;
  transition: transform 0.3s, box-shadow 0.3s;
}

#Join button.btn .fa-arrow-right {
  transition: transform 0.3s;
}

#Join button.btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px #ea580c40, 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

#Join button.btn:hover .fa-arrow-right {

  transform: translateX(4px);
}



#Join .col-lg-4.bg-linear {
  background-image: linear-gradient(to bottom right, #ea580c, #c2410c);
  position: relative;
  z-index: 1;
  border-radius: 0 16px 16px 0;
}

#Join .col-lg-4 .inner {
  padding: 48px;
  color: white;
}

#Join .col-lg-4 .inner::after {
  content: "";
  border-radius: 0 16px 16px 0;
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: linear-gradient(to bottom right, #00000033, transparent);
}

#Join .col-lg-4 .inner h3 {
  margin-bottom: 32px;
  font-size: 24px;
  font-weight: 700;
}

#Join .col-item {
  display: flex;
  align-items: start;
  margin-bottom: 48px;
}

#Join .col-item:not(:last-child) {
  margin-block-end: 32px;
}

#Join .col-item .icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff33;
  border-radius: 12px;
  width: 80px;
  height: 48px;
  margin-right: 16px;
}

#Join .col-item h5 {
  font-weight: 600;
  margin-bottom: 8px;
}

#Join .col-item p {
  color: #ffffffcc;
  font-size: 14px;
  margin-bottom: 0;
}

#Join .direct-contact {
  border-top: 1px solid #ffffff33;
  padding-top: 32px;
}

#Join .direct-contact h5 {
  font-weight: 500;
  margin-bottom: 16px;
}

#Join .direct-contact .item:not(:last-child) {
  margin-block-end: 12px;
}


/* Footer */
footer {
  border-top: 1px solid #ebe6e7;
  background-color: #fff;
}

footer .row {
  padding: 48px;

}

footer .icon {
  margin-bottom: 12px;
}

footer .navbar-brand {
  justify-content: start;
}

footer .navbar-brand .title-brand {
  color: #101828;
  font-size: 20px;
  font-weight: 700;
}

footer .desc {
  max-width: 448px;
  font-size: 14px;
  color: #4a5565;
}

footer .col-12 .inner div {
  height: 45px;
  width: 45px;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #F3F4F6;
  color: #4a5565;
  font-size: 18px;
  transition: background-color 0.3s, color 0.3s;
}

footer .col-12 .inner div:hover {
  background-color: #c2410c;
  color: #fff;
}


.bottom-footer {
  padding-block: 24px;
  border-top: 1px solid #ebe6e7;
  font-size: 14px;
  color: #4a5565;
}

.bottom-footer p {
  margin-bottom: 0;
}

.bottom-footer span {
  color: #c2410c;
  font-weight: bold;
}