contactus

src/assets/css/contactus-responsive.css

@@ -0,0 +1,174 @@
+/* ═══════════════════════════════════════════════════════
+   xxl — 1400px
+═══════════════════════════════════════════════════════ */
+@media screen and (max-width: 1400px) {
+}
+
+/* ═══════════════════════════════════════════════════════
+   xl — 1200px
+═══════════════════════════════════════════════════════ */
+@media screen and (max-width: 1200px) {
+  .hero-content {
+    width: 90%;
+    max-width: 673px;
+  }
+
+  .contact-info {
+    width: 460px;
+  }
+}
+
+/* ═══════════════════════════════════════════════════════
+   lg — 992px
+═══════════════════════════════════════════════════════ */
+@media screen and (max-width: 992px) {
+  .hero-card {
+    height: auto;
+    min-height: 240px;
+    padding: 40px 24px;
+  }
+
+  .hero-h1 {
+    font-size: 28px;
+    line-height: 42px;
+  }
+
+  .contact-grid {
+    flex-direction: column;
+    gap: 32px;
+  }
+
+  .contact-info {
+    width: 100%;
+  }
+
+  .contact-form-wrapper {
+    width: 100%;
+  }
+
+  .steps-row {
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .step-card__title {
+    white-space: normal;
+  }
+}
+
+/* ═══════════════════════════════════════════════════════
+   md — 768px
+═══════════════════════════════════════════════════════ */
+@media screen and (max-width: 768px) {
+  .hero-h1 {
+    font-size: 22px;
+    line-height: 36px;
+  }
+
+  .hero-sub {
+    font-size: 14px;
+  }
+
+  .contact-form-title__h2 {
+    font-size: 20px;
+    line-height: 30px;
+  }
+
+  .form-row {
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .steps-header__title {
+    font-size: 20px;
+  }
+
+  .map-card {
+    height: 300px;
+    border-radius: 24px;
+  }
+
+  .map-card__img {
+    border-radius: 24px;
+  }
+
+  .map-card__nav {
+    right: 16px;
+    bottom: 16px;
+    gap: 8px;
+  }
+
+  .map-nav-btn {
+    padding: 6px 10px;
+  }
+}
+
+/* ═══════════════════════════════════════════════════════
+   sm — 576px
+═══════════════════════════════════════════════════════ */
+@media screen and (max-width: 576px) {
+  .hero-section {
+    padding-top: 24px;
+    padding-bottom: 32px;
+  }
+
+  .hero-content {
+    width: 100%;
+  }
+
+  .hero-h1 {
+    font-size: 20px;
+    line-height: 32px;
+  }
+
+  .contact-item__label {
+    font-size: 13px;
+  }
+
+  .contact-item__value {
+    font-size: 12px;
+  }
+
+  .contact-social__icons {
+    flex-wrap: wrap;
+    justify-content: flex-start;
+  }
+
+  .form-submit-btn {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .form-submit-row {
+    justify-content: stretch;
+  }
+
+  .steps-grid {
+    gap: 16px;
+  }
+
+  .step-card {
+    padding: 16px;
+  }
+
+  .map-card {
+    height: 240px;
+    border-radius: 16px;
+  }
+
+  .map-card__img {
+    border-radius: 16px;
+  }
+
+  .map-nav-btn span {
+    display: none;
+  }
+
+  .map-card__nav {
+    gap: 6px;
+  }
+
+  .map-nav-btn {
+    padding: 8px;
+  }
+}

src/assets/css/contactus.css

@@ -0,0 +1,960 @@
+/* ═══════════════════════════════════════════════════════
+   CONTAINER OVERRIDE
+═══════════════════════════════════════════════════════ */
+.container {
+  max-width: 1240px;
+  padding: 0 20px;
+  margin: 0 auto;
+}
+
+main {
+  padding-bottom: 80px;
+}
+
+/* ═══════════════════════════════════════════════════════
+   HERO
+═══════════════════════════════════════════════════════ */
+.hero-section {
+  padding-top: 80px;
+  padding-bottom: 50px;
+}
+
+.hero-card {
+  position: relative;
+  width: 100%;
+  height: 303px;
+  background-color: #eff6ff;
+  border-radius: 10px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+
+.hero-content {
+  position: relative;
+  z-index: 1;
+  width: 673px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  text-align: center;
+}
+
+.hero-h1 {
+  font-size: 36px;
+  font-weight: 700;
+  line-height: 54px;
+  color: var(--color-primary);
+}
+
+.hero-sub {
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 26px;
+  color: var(--color-text);
+}
+
+.hero-circles {
+  position: absolute;
+  top: -59%;
+  right: 50%;
+  transform: translate(50%, -50%);
+  pointer-events: none;
+}
+
+.circle {
+  position: absolute;
+  border-radius: 50%;
+  top: 50%;
+  right: 50%;
+  transform: translate(50%, -50%);
+}
+.circle--1 { width: 698px; height: 698px; background-color:rgba(216, 233, 255, 0.2);}
+.circle--2 { width: 616px; height: 616px; background-color: rgba(216, 233, 255, 0.4); }
+.circle--3 { width: 534px; height: 534px; background-color: rgba(216, 233, 255, 0.6); }
+.circle--4 { width: 452px; height: 452px; background-color: rgba(216, 233, 255, 0.8); }
+
+
+.hero-hollow {
+  position: absolute;
+  width: 403px;
+  height: 403px;
+  border-radius: 50%;
+  background-color: rgba(2, 116, 179, 0.12);
+  top: 75%;
+  transform: translateY(-50%);
+  pointer-events: none;
+    filter: blur(250px);
+}
+.hero-hollow--left  {  
+  left: -290px;
+}
+.hero-hollow--right { 
+  right: -290px;
+ }
+
+.hero-dot-pattern {
+  position: absolute;
+  inset: 0;
+  background-image: radial-gradient(circle, var(--color-pastel-main) 1px, transparent 1px);
+  background-size: 24px 24px;
+  pointer-events: none;
+  opacity: 0.4;
+}
+.contactus-hands{
+    position: absolute;
+  top: 50%;
+  right: 50%;
+  transform: translate(50%, -50%);
+}
+
+
+
+/* ═══════════════════════════════════════════════════════
+   CONTACT SECTION
+═══════════════════════════════════════════════════════ */
+.contact-section {
+  margin-bottom: 100px;
+}
+
+.contact-grid {
+  display: flex;
+  gap: 32px;
+  align-items: flex-start;
+}
+
+/* ── Contact Info (left column) ── */
+.contact-info {
+  width: 550px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding-top: 24px;
+}
+
+.contact-info__header {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  text-align: right;
+}
+
+.contact-info__title {
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 34px;
+  color: var(--color-title);
+}
+
+.contact-info__subtitle {
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 26px;
+  color: var(--color-text);
+}
+
+.contact-items {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding-bottom: 16px;
+  border-bottom: 1px dashed #bdbdbd;
+}
+
+.contact-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background-color: #f0f5fe;
+  border-radius: 10px;
+  text-decoration: none;
+  color: inherit;
+  transition: opacity 0.2s;
+  overflow: hidden;
+  min-height: 64px;
+}
+
+.contact-item:hover {
+  opacity: 0.85;
+}
+
+.contact-item--tall {
+  align-items: flex-start;
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+
+.contact-item__link-btn {
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  border-radius: 1000px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+
+.contact-item__body {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.contact-item__body--top {
+  align-items: center;
+}
+
+.contact-item__texts {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  text-align: right;
+  min-width: 0;
+}
+
+.contact-item__label {
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 22px;
+  color: var(--color-title);
+}
+
+.contact-item__value {
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 24px;
+  color: var(--color-body-text);
+}
+
+.contact-item__value strong {
+  font-weight: 700;
+}
+
+.contact-item__icon {
+  flex-shrink: 0;
+  width: 48px;
+  height: 48px;
+  background-color: var(--color-primary);
+  border-radius: 11px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.contact-item__icon img {
+  width: 32px;
+  height: 32px;
+  object-fit: contain;
+}
+
+/* ── Social Media ── */
+.contact-social {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  align-items:flex-start ;
+}
+
+.contact-social__label {
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 22px;
+  color: var(--color-text);
+  text-align: right;
+}
+
+.contact-social__icons {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.social-icon {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  background-color: #f3f8ff;
+  border-radius: 150px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: background-color 0.2s;
+}
+
+.social-icon:hover {
+  background-color: var(--color-pastel-main);
+}
+
+.social-icon img {
+  width: 24px;
+  height: 24px;
+  object-fit: contain;
+}
+
+/* ── Contact Form (right column) ── */
+.contact-form-wrapper {
+  flex: 1;
+  min-width: 0;
+  background-color: #fafcff;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.contact-form-title {
+  display: flex;
+  flex-direction: column;
+  gap: 9px;
+  text-align: right;
+}
+
+.contact-form-title__h2 {
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 36px;
+  color: var(--color-primary);
+}
+
+.contact-form-title__sub {
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 26px;
+  color: var(--color-text);
+}
+
+.form-input input,
+.form-text textarea {
+  border: 1px solid #ccc;
+  outline: none;
+  transition: all 0.3s ease;
+}
+
+.form-input input:focus,
+.form-text textarea:focus {
+  border-color: var(--color-primary);
+ background-color: #EAF7FF;
+}
+.error-message {
+  color: #DC2626;
+  font-size: 13px;
+  margin-top: 6px;
+  display: block;
+}
+
+.input-error {
+  background-color: #FFEBEB !important;
+  border-color: #ef4444 !important;
+}
+
+
+/* ── Brands logos scroll ── */
+.form-brands {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.form-brands__header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 24px;
+}
+
+.form-brands__line {
+  flex: 1;
+  height: 1px;
+  background-color: #e0e0e0;
+}
+
+.form-brands__label {
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 22px;
+  color: var(--color-text);
+  white-space: nowrap;
+  text-align: right;
+}
+
+.form-brands__logos {
+  height: 32px;
+  overflow: hidden;
+  position: relative;
+  
+  mask-image: linear-gradient(
+    90deg,
+    transparent 0%,
+    black 8%,
+    black 92%,
+    transparent 100%
+  );
+
+  -webkit-mask-image: linear-gradient(
+    90deg,
+    transparent 0%,
+    black 8%,
+    black 92%,
+    transparent 100%
+  );
+}
+
+.logos-track {
+  display: flex;
+  align-items: center;
+  gap: 40px;
+  justify-content: right;
+  animation: logos-scroll 18s linear infinite;
+  white-space: transform;
+  width: max-content;
+}
+
+.logos-track img {
+  width: auto;
+  object-fit: contain;
+  flex-shrink: 0;
+  filter: grayscale(0.3);
+}
+
+@keyframes logos-scroll {
+  from { transform: translateX(-1%); }
+  to   { transform: translateX(50%); }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+form {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+.form-input label,
+.required-label {
+  font-size: 14px;
+  margin-bottom: 8px;
+  display: block;
+  color: #1a1a2e;
+}
+.required-label::after {
+  content: '*';
+  color: #ff0000;
+  margin-left: 4px;
+}
+input,
+.select-box,
+textarea {
+  width: 100%;
+  border: 1px solid #dbdbdb;
+  border-radius: 8px;
+  padding: 0px 12px;
+  height: 38px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.8;
+  color: var(--color-title);
+  background-color: #f9f9f9;
+}
+textarea {
+  min-height: 114px;
+  resize: vertical;
+}
+.form-input {
+  flex-basis: 48%;
+  position: relative;
+}
+.label {
+  display: block;
+  margin-bottom: 10px;
+  font-size: 18px;
+  font-weight: 500;
+  color: #222;
+}
+.custom-select {
+  position: relative;
+  width: 100%;
+  user-select: none;
+}
+.select-box {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  transition: 0.25s;
+}
+.selected-text {
+  font-size: 14px;
+  color: #222;
+  font-weight: 500;
+}
+.arrow {
+  display: flex;
+  transition: 0.25s;
+}
+.custom-select.active .arrow {
+  transform: rotate(180deg);
+}
+.options {
+  position: absolute;
+  right: 0;
+  width: 100%;
+  border-radius: 8px;
+  overflow: hidden;
+  list-style: none;
+  border: 1px solid #dbdbdb;
+  opacity: 0;
+  visibility: hidden;
+  z-index: 100;
+}
+.custom-select.active .options {
+  opacity: 1;
+  visibility: visible;
+}
+.option {
+  padding: 0px 12px;
+  height: 38px;
+  font-size: 17px;
+  transition: 0.2s;
+  background-color: #f9f9f9;
+  display: flex;
+  align-items: center;
+}
+.option.active {
+  background: var(--color-primary);
+  color: #fff;
+}
+.form-text {
+  flex-basis: 98%;
+}
+.form-btn {
+  background-color: var(--color-primary);
+  border: none;
+  border-radius: 10px;
+  padding: 10px 12px 10px 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  cursor: pointer;
+  transition: 0.3s ease;
+}
+.form-btn-icon {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  color: #000;
+}
+.form-btn.loading .btn-icon-default {
+  display: none;
+}
+.form-btn.loading .btn-icon-loading {
+  display: flex;
+}
+.btn-icon-default {
+  display: flex;
+}
+.spinner {
+  width: 24px;
+  height: 24px;
+  border: 4px solid #c5d7ec;
+  border-top-color: transparent;
+  border-radius: 50%;
+  box-sizing: border-box;
+  animation: spin 300ms linear infinite;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.btn-text {
+  color: #ffffff;
+  font-size: 16px;
+  font-weight: 400;
+}
+.form-section-right {
+  flex: 0 1 45%;
+}
+.form-section-text h2 {
+  margin-bottom: 16px;
+}
+.form-section-text p {
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 1.7;
+  color: var(--color-body-text);
+}
+.form-img {
+  position: relative;
+}
+.form-img p {
+  position: absolute;
+  top: 28%;
+  right: 16%;
+  font-size: 56px;
+  font-weight: 700;
+  color: #c8dff9;
+}
+.form-img img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+.end-form-img {
+  left: 184px;
+  top: -28px;
+}
+.success-message {
+  display: none;
+}
+.success-message p {
+  margin-top: 16px;
+}
+.success-message h3 {
+  margin-top: 24px;
+}
+.success-btn {
+  margin-top: 24px;
+  border: none;
+  border-radius: 10px;
+  background-color: var(--color-primary);
+  color: #ffffff;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  padding: 10px 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.success-message.visible {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+
+/* ═══════════════════════════════════════════════════════
+   PROCESS STEPS
+═══════════════════════════════════════════════════════ */
+.steps-section {
+  padding-bottom: 100px;
+
+}
+
+.steps-header {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  text-align: center;
+  margin-bottom: 32px;
+}
+
+.steps-header__title {
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 36px;
+  color: var(--color-title);
+}
+
+.steps-header__sub {
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 26px;
+  color: var(--color-body-text);
+}
+
+.steps-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+}
+
+.steps-row {
+  display: flex;
+  gap: 24px;
+}
+
+/* ─── Card base ─────────────────────────────────── */
+.step-card {
+  flex: 1;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 24px;
+  background-color: #f0f4fd;
+  border-radius: 16px;
+  overflow: hidden;
+  text-align: right;
+  transition: background-color 0.3s ease, color 0.3s ease;
+  background-image: url(/src/img/Vector\(1\).png);
+  z-index: 1;
+}
+/* .step-card::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+
+  background: var(--color-primary);
+
+  clip-path: polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%);
+  transition: clip-path 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+
+  z-index: 0;
+}
+
+.step-card:hover::before {
+    clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
+} */
+ .step-card::before {
+  content: "";
+  position: absolute;
+
+  width: 400%;
+  height: 400%;
+
+  right: -200%;
+  bottom: -200%;
+
+  background: var(--color-primary);
+  border-radius: 50%;
+
+  transform: scale(0);
+  transform-origin: bottom right;
+
+  transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
+  z-index: 0;
+}
+
+.step-card:hover::before {
+  transform: scale(1);
+}
+
+
+.step-card > * {
+  position: relative;
+  z-index: 2;
+}
+/* ─── Badge (default) ───────────────────────────── */
+.step-card__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5px 10px;
+  border-radius: 32px;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 24px;
+  border: 1px solid var(--color-primary);
+  color: var(--color-primary);
+  white-space: nowrap;
+  transition: border-color 0.3s ease, color 0.3s ease;
+}
+
+.step-card__icon {
+  width: 32px;
+  height: 32px;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+
+/* ─── Top wrapper ───────────────────────────────── */
+.step-card__top {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.step-card__meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+/* ─── Title & description (default) ────────────── */
+.step-card__title {
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 28px;
+  color: var(--color-text);
+  white-space: nowrap;
+  transition: color 0.3s ease;
+}
+
+.step-card__desc {
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 26px;
+  color: var(--color-body-text);
+  transition: color 0.3s ease;
+}
+
+/* ─── Hover: ALL cards turn blue ────────────────── */
+
+.step-card:hover::after {
+  opacity: 0.15; /* dim the pattern so it doesn't clash with the blue bg */
+}
+.step-card__meta svg {
+  color: var(--color-primary) ;
+}
+.step-card:hover .step-card__meta svg {
+  color: #ffffff;
+}
+.step-card:hover .step-card__badge {
+  border-color: #ffffff;
+  color: #ffffff;
+}
+
+.step-card:hover .step-card__title {
+  color: #ffffff;
+}
+
+.step-card:hover .step-card__desc {
+  color: #ffffff;
+}
+
+/* ═══════════════════════════════════════════════════════
+   MAP
+═══════════════════════════════════════════════════════ */
+.map-section {
+  padding-bottom: 80px;
+}
+
+.map-card {
+  position: relative;
+  width: 100%;
+  height: 428px;
+  border-radius: 48px;
+  overflow: hidden;
+  box-shadow:
+    0px 9.5px 15.8px 6.3px rgba(255, 255, 255, 0.05),
+    0px 3.2px 4.7px 0px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.02);
+}
+
+.map-card__img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+  border-radius: 48px;
+  pointer-events: none;
+}
+
+.map-card__location {
+  position: absolute;
+  left: 56%;
+  top: 50%;
+  transform: translate(-40%, -50%);
+  width: 44px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  
+}
+
+.map-location-dot {
+  position: relative;
+  display: block;
+  width: 12px;
+  height: 12px;
+  background-color: #0274B3;
+  border-radius: 50%;
+  border: 2.2px solid #ffffff;
+  z-index: 100;
+}
+.map-card__location::before,
+.map-card__location::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  background: #0274B3;
+  z-index: -1;
+  animation: locationPulse 2s infinite ease-out;
+  filter: blur(2px);
+}
+.map-location-dot::after {
+  animation-delay: 0s;
+}
+.map-card__location::after {
+  animation-delay: 0s;
+}
+@keyframes locationPulse {
+  0% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 0.9;
+  }
+
+  100% {
+    transform: translate(-50%, -50%) scale(5);
+    opacity: 0;
+  }
+}
+.map-card__nav {
+  position: absolute;
+  right: 40px;
+  bottom: 40px;
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+
+.map-nav-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background-color: #ffffff;
+  border-radius: 10px;
+  text-decoration: none;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 24px;
+  color: var(--color-primary);
+  transition: box-shadow 0.2s;
+  white-space: nowrap;
+}
+
+.map-nav-btn:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+}
+
+.map-nav-btn img {
+  width: 20px;
+  height: 20px;
+  object-fit: contain;
+  flex-shrink: 0;
+}

src/assets/icons/portfolioGallery.svg

@@ -0,0 +1,77 @@
+<svg>
+  <symbol id="expand" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M28 28L20 20M21.6 28H28V21.6M10.4 28H4V21.6M4 28L12 20M21.6 4H28V10.4M28 4L20 12M10.4 4H4V10.4M4 4L12 12"
+      stroke="#1A1A2E"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </symbol>
+  <symbol id="eye" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M2.06202 12.348C1.97868 12.1235 1.97868 11.8765 2.06202 11.652C2.87372 9.68385 4.25153 8.00103 6.02079 6.81689C7.79004 5.63275 9.87106 5.00061 12 5.00061C14.129 5.00061 16.21 5.63275 17.9792 6.81689C19.7485 8.00103 21.1263 9.68385 21.938 11.652C22.0214 11.8765 22.0214 12.1235 21.938 12.348C21.1263 14.3161 19.7485 15.999 17.9792 17.1831C16.21 18.3672 14.129 18.9994 12 18.9994C9.87106 18.9994 7.79004 18.3672 6.02079 17.1831C4.25153 15.999 2.87372 14.3161 2.06202 12.348Z"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M12 15C13.6569 15 15 13.6568 15 12C15 10.3431 13.6569 8.99999 12 8.99999C10.3432 8.99999 9.00002 10.3431 9.00002 12C9.00002 13.6568 10.3432 15 12 15Z"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </symbol>
+  <symbol id="play" viewBox="0 0 11 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M0.75001 2.12914C0.749322 1.88513 0.809349 1.64531 0.92393 1.43432C1.03851 1.22332 1.20352 1.04874 1.40201 0.928505C1.6005 0.808269 1.82533 0.746706 2.05341 0.750136C2.2815 0.753566 2.50462 0.821866 2.69987 0.948024L9.12272 5.06888C9.31394 5.19079 9.47227 5.36374 9.58223 5.57079C9.69219 5.77783 9.75 6.01187 9.75 6.25C9.75 6.48812 9.69219 6.72217 9.58223 6.92921C9.47227 7.13626 9.31394 7.3092 9.12272 7.43112L2.69987 11.552C2.50453 11.6782 2.28129 11.7465 2.05309 11.7499C1.8249 11.7532 1.59998 11.6916 1.40145 11.5712C1.20291 11.4508 1.03793 11.276 0.923441 11.0648C0.808953 10.8536 0.749093 10.6136 0.75001 10.3695V2.12914Z"
+      fill="white"
+      stroke="white"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </symbol>
+  <symbol id="t-blank" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M17 7H7V17M7 7L17 17"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </symbol>
+  <symbol xmlns="http://www.w3.org/2000/svg" id="pause" viewBox="0 0 24 24">
+    <path d="M6.5,0A3.5,3.5,0,0,0,3,3.5v17a3.5,3.5,0,0,0,7,0V3.5A3.5,3.5,0,0,0,6.5,0Z" />
+    <path d="M17.5,0A3.5,3.5,0,0,0,14,3.5v17a3.5,3.5,0,0,0,7,0V3.5A3.5,3.5,0,0,0,17.5,0Z" />
+  </symbol>
+  <symbol id="left" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10 12L6 8L10 4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+  </symbol>
+  <symbol id="chevrons-left" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M7.33333 11.3332L4 7.99984L7.33333 4.6665M12 11.3332L8.66667 7.99984L12 4.6665"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </symbol>
+  <symbol id="chevrons-right" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M4 11.3332L7.33333 7.99984L4 4.6665M8.66667 11.3332L12 7.99984L8.66667 4.6665"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </symbol>
+  <symbol id="right" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6 12L10 8L6 4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+  </symbol>
+  <symbol id="arrow-left" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M10.0001 4.16675L4.16675 10.0001L10.0001 15.8334M4.16675 10.0001H15.8334"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </symbol>
+</svg>

src/assets/js/contactus.js

@@ -0,0 +1,109 @@
+// ===================================فرم==================================
+
+const form = document.getElementById('contactForm');
+const submitBtn = document.getElementById('submitBtn');
+const backBtn = document.getElementById('backBtn');
+const successMessage = document.getElementById('successMessage');
+const submitBtnText = submitBtn.querySelector('.btn-text');
+
+form.addEventListener('submit', function (event) {
+  event.preventDefault();
+
+  submitBtn.classList.add('loading');
+  submitBtnText.textContent = 'درحال ارسال فرم';
+  submitBtn.disabled = true;
+
+  setTimeout(() => {
+    form.style.display = 'none';
+
+    successMessage.classList.add('visible');
+  }, 1500);
+});
+
+backBtn.addEventListener('click', function () {
+  successMessage.classList.remove('visible');
+
+  form.style.display = 'flex';
+
+  submitBtn.disabled = false;
+  submitBtn.classList.remove('loading');
+  submitBtnText.textContent = 'ثبت درخواست';
+
+  form.reset();
+});
+
+const customSelect = document.getElementById('customSelect');
+const selectBox = customSelect.querySelector('.select-box');
+const options = customSelect.querySelectorAll('.option');
+const selectedText = customSelect.querySelector('.selected-text');
+
+selectBox.addEventListener('click', () => {
+  customSelect.classList.toggle('active');
+});
+
+options.forEach((option) => {
+  option.addEventListener('click', () => {
+    options.forEach((item) => {
+      item.classList.remove('active');
+    });
+
+    option.classList.add('active');
+    selectedText.textContent = option.textContent;
+    customSelect.classList.remove('active');
+  });
+});
+
+document.addEventListener('click', (e) => {
+  if (!customSelect.contains(e.target)) {
+    customSelect.classList.remove('active');
+  }
+});
+
+const nameInput = document.getElementById('name');
+const nameError = document.getElementById('nameError');
+
+nameInput.addEventListener('input', function () {
+  const hasNumber = /\d/.test(this.value);
+
+  if (hasNumber) {
+    this.classList.add('input-error');
+    nameError.textContent = '* فقط حروف فارسی و انگلیسی مجاز است';
+  } else {
+    this.classList.remove('input-error');
+    nameError.textContent = '';
+  }
+});
+
+const phoneInput = document.getElementById('phone');
+const phoneError = document.getElementById('phoneError');
+
+phoneInput.addEventListener('input', function () {
+  const hasLetter = /[a-zA-Zآ-ی]/.test(this.value);
+
+  if (hasLetter) {
+    this.classList.add('input-error');
+    phoneError.textContent = 'فقط عدد مجاز است';
+  } else {
+    this.classList.remove('input-error');
+    phoneError.textContent = '';
+  }
+  this.value = this.value.replace(/\D/g, '');
+});
+
+const emailInput = document.getElementById('email');
+const emailError = document.getElementById('emailError');
+
+emailInput.addEventListener('input', function () {
+  if (this.value !== '' && !this.value.includes('@')) {
+    this.classList.add('input-error');
+    emailError.textContent = 'ایمیل باید شامل @ باشد';
+  } else {
+    this.classList.remove('input-error');
+    emailError.textContent = '';
+  }
+});
+
+// ==================اسکرول لوگو=======================
+
+  const track = document.querySelector('.logos-track');
+  track.innerHTML += track.innerHTML;

src/core/stylesheet/core.css

@@ -0,0 +1,232 @@
+@font-face {
+  font-family: Yekan Bakh FaNum;
+  font-style: normal;
+  font-weight: 100;
+  src:
+    url('../fonts/yekanbakhpro/woff/YekanBakhFaNum-thin.woff') format('woff'),
+    url('../fonts/yekanbakhpro/woff2/YekanBakhFaNum-thin.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Yekan Bakh FaNum;
+  font-style: normal;
+  font-weight: 300;
+  src:
+    url('../fonts/yekanbakhpro/woff/YekanBakhFaNum-Light.woff') format('woff'),
+    url('../fonts/yekanbakhpro/woff2/YekanBakhFaNum-Light.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Yekan Bakh FaNum;
+  font-style: normal;
+  font-weight: normal;
+  src:
+    url('../fonts/yekanbakhpro/woff/YekanBakhFaNum-Regular.woff') format('woff'),
+    url('../fonts/yekanbakhpro/woff2/YekanBakhFaNum-Regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Yekan Bakh FaNum;
+  font-style: normal;
+  font-weight: 600;
+  src:
+    url('../fonts/yekanbakhpro/woff/YekanBakhFaNum-SemiBold.woff') format('woff'),
+    url('../fonts/yekanbakhpro/woff2/YekanBakhFaNum-SemiBold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Yekan Bakh FaNum;
+  font-style: normal;
+  font-weight: bold;
+  src:
+    url('../fonts/yekanbakhpro/woff/YekanBakhFaNum-Bold.woff') format('woff'),
+    url('../fonts/yekanbakhpro/woff2/YekanBakhFaNum-Bold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Yekan Bakh FaNum;
+  font-style: normal;
+  font-weight: 800;
+  src:
+    url('../fonts/yekanbakhpro/woff/Yekan Bakh FaNum-ExtraBold.woff') format('woff'),
+    url('../fonts/yekanbakhpro/woff2/Yekan Bakh FaNum-ExtraBold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Yekan Bakh FaNum;
+  font-style: normal;
+  font-weight: 900;
+  src:
+    url('../fonts/yekanbakhpro/woff/Yekan Bakh FaNum-Black.woff') format('woff'),
+    url('../fonts/yekanbakhpro/woff2/Yekan Bakh FaNum-Black.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Yekan Bakh FaNum;
+  font-style: normal;
+  font-weight: 950;
+  src:
+    url('../fonts/yekanbakhpro/woff/Yekan Bakh FaNum-ExtraBlack.woff') format('woff'),
+    url('../fonts/yekanbakhpro/woff2/Yekan Bakh FaNum-ExtraBlack.woff2') format('woff2');
+}
+:root {
+  --color-primary: #0274b3;
+  --color-title: #1a1a2e;
+  --color-text: #505068;
+  --color-body-text: #6a6a6a;
+  --bg-gray: #f9f9f9;
+  --color-pastel-main: #c5d7ec;
+
+  --blue-50: #eaf7ff;
+  --blue-100: #c5eaff;
+  --blue-150: #a1ddff;
+  --blue-200: #7cd0ff;
+  --blue-300: #57c3ff;
+  --blue-400: #32b6ff;
+  --blue-500: #1796dc;
+  --blue-600: #0274b3; /* همان primary */
+  --blue-700: #00598a;
+  --blue-800: #003f61;
+
+  /* Breakpoints */
+  /* --breakpoint-sm: 576px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 992px;
+  --breakpoint-xl: 1200px;
+  --breakpoint-xxl: 1400px; */
+}
+* {
+  margin: 0;
+  padding: 0;
+  direction: rtl;
+  box-sizing: border-box;
+  font-family: 'Yekan Bakh FaNum', sans-serif;
+  font-weight: normal;
+}
+html {
+  scroll-behavior: smooth;
+  /* scrollbar-gutter: stable; */
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: bold;
+  line-height: 1.5;
+  color: var(--color-title);
+}
+h1 {
+  font-size: 36px;
+}
+h2 {
+  font-size: 24px;
+}
+h3 {
+  font-size: 22px;
+}
+h4 {
+  font-size: 20px;
+}
+h5 {
+  font-size: 15px;
+}
+p {
+  line-height: 1.75;
+  font-size: 15px;
+  color: var(--color-text);
+}
+a {
+  text-decoration: none;
+  line-height: 1.75;
+  color: var(--blue-500);
+}
+div,
+span,
+button,
+a,
+li {
+  line-height: inherit;
+}
+i {
+  font-style: normal;
+}
+/* برای Chrome، Edge و Safari */
+
+@media (max-width: 767px) {
+  h1 {
+    font-size: 24px;
+  }
+  h2 {
+    font-size: 22px;
+  }
+  h3 {
+    font-size: 18px;
+  }
+  h4 {
+    font-size: 16px;
+  }
+  h5 {
+    font-size: 14px;
+  }
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  *::-webkit-scrollbar {
+    width: 10px;
+  }
+
+  *::-webkit-scrollbar-track {
+    background: #fff;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background-color: var(--color-primary);
+    border-radius: 10px;
+    border: 3px solid #fff;
+  }
+}
+
+/* برای Firefox */
+@-moz-document url-prefix() {
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-primary) #fff;
+  }
+}
+
+::selection {
+  background: var(--color-primary);
+  color: #fff;
+}
+
+/* Hide number arrows */
+
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type='number'] {
+  -moz-appearance: textfield;
+}
+button {
+  border: none;
+  outline: none;
+  background: none;
+  cursor: pointer;
+}
+/* Hide scrollbar for Chrome, Safari and Opera */
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.no-scrollbar {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}