+
خیابان ناوک
diff --git a/public/images/Map.png b/public/images/Map.png
deleted file mode 100644
index 1eb7a3d..0000000
Binary files a/public/images/Map.png and /dev/null differ
diff --git a/public/images/Map4X.png b/public/images/Map4X.png
new file mode 100644
index 0000000..5c9763c
Binary files /dev/null and b/public/images/Map4X.png differ
diff --git a/src/assets/css/contactus-responsive.css b/src/assets/css/contactus-responsive.css
index bc80544..f091679 100644
--- a/src/assets/css/contactus-responsive.css
+++ b/src/assets/css/contactus-responsive.css
@@ -120,15 +120,6 @@
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;
diff --git a/src/assets/css/contactus.css b/src/assets/css/contactus.css
index 1250a2c..4ff92a6 100644
--- a/src/assets/css/contactus.css
+++ b/src/assets/css/contactus.css
@@ -31,7 +31,6 @@ main {
justify-content: center;
}
-
.hero-content {
position: relative;
z-index: 1;
@@ -71,11 +70,26 @@ main {
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); }
-
+.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;
@@ -86,14 +100,14 @@ main {
top: 75%;
transform: translateY(-50%);
pointer-events: none;
- filter: blur(250px);
+ filter: blur(250px);
}
-.hero-hollow--left {
+.hero-hollow--left {
left: -290px;
}
-.hero-hollow--right {
+.hero-hollow--right {
right: -290px;
- }
+}
.hero-dot-pattern {
position: absolute;
@@ -103,15 +117,13 @@ main {
pointer-events: none;
opacity: 0.4;
}
-.contactus-hands{
- position: absolute;
+.contactus-hands {
+ position: absolute;
top: 50%;
right: 50%;
transform: translate(50%, -50%);
}
-
-
/* ═══════════════════════════════════════════════════════
CONTACT SECTION
═══════════════════════════════════════════════════════ */
@@ -199,7 +211,6 @@ main {
overflow: hidden;
}
-
.contact-item__body {
flex: 1;
display: flex;
@@ -262,7 +273,7 @@ main {
display: flex;
flex-direction: column;
gap: 16px;
- align-items:flex-start ;
+ align-items: flex-start;
}
.contact-social__label {
@@ -345,21 +356,20 @@ main {
.form-input input:focus,
.form-text textarea:focus {
border-color: var(--color-primary);
- background-color: #EAF7FF;
+ background-color: #eaf7ff;
}
.error-message {
- color: #DC2626;
+ color: #dc2626;
font-size: 13px;
margin-top: 6px;
display: block;
}
.input-error {
- background-color: #FFEBEB !important;
+ background-color: #ffebeb !important;
border-color: #ef4444 !important;
}
-
/* ── Brands logos scroll ── */
.form-brands {
display: flex;
@@ -393,22 +403,10 @@ main {
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%
- );
+ 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 {
@@ -429,26 +427,16 @@ main {
}
@keyframes logos-scroll {
- from { transform: translateX(-1%); }
- to { transform: translateX(50%); }
+ from {
+ transform: translateX(-1%);
+ }
+ to {
+ transform: translateX(50%);
+ }
}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
form {
- display: flex;
+ /* display: flex; */
flex-wrap: wrap;
gap: 16px;
}
@@ -476,7 +464,7 @@ textarea {
font-weight: 400;
line-height: 1.8;
color: var(--color-title);
- background-color: #f9f9f9;
+ background-color: #ffffff;
}
textarea {
min-height: 114px;
@@ -485,6 +473,7 @@ textarea {
.form-input {
flex-basis: 48%;
position: relative;
+ margin-bottom: 16px;
}
.label {
display: block;
@@ -536,7 +525,7 @@ textarea {
.option {
padding: 0px 12px;
height: 38px;
- font-size: 17px;
+ font-size: 13px;
transition: 0.2s;
background-color: #f9f9f9;
display: flex;
@@ -548,12 +537,14 @@ textarea {
}
.form-text {
flex-basis: 98%;
+ font-size: 14px;
+ margin-bottom: 16px;
}
.form-btn {
background-color: var(--color-primary);
border: none;
border-radius: 10px;
- padding: 10px 12px 10px 10px;
+ padding: 10px 24px 10px 20px;
display: flex;
align-items: center;
justify-content: center;
@@ -657,13 +648,11 @@ textarea {
text-align: center;
}
-
/* ═══════════════════════════════════════════════════════
PROCESS STEPS
═══════════════════════════════════════════════════════ */
.steps-section {
padding-bottom: 100px;
-
}
.steps-header {
@@ -711,7 +700,9 @@ textarea {
border-radius: 16px;
overflow: hidden;
text-align: right;
- transition: background-color 0.3s ease, color 0.3s ease;
+ transition:
+ background-color 0.3s ease,
+ color 0.3s ease;
background-image: url(/src/img/Vector\(1\).png);
z-index: 1;
}
@@ -731,8 +722,8 @@ textarea {
.step-card:hover::before {
clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
} */
- .step-card::before {
- content: "";
+.step-card::before {
+ content: '';
position: absolute;
width: 400%;
@@ -755,7 +746,6 @@ textarea {
transform: scale(1);
}
-
.step-card > * {
position: relative;
z-index: 2;
@@ -773,7 +763,7 @@ textarea {
border: 1px solid var(--color-primary);
color: var(--color-primary);
white-space: nowrap;
- transition: border-color 0.3s ease, color 0.3s ease;
+ /* transition: border-color 0.3s ease, color 0.3s ease; */
}
.step-card__icon {
@@ -803,7 +793,7 @@ textarea {
line-height: 28px;
color: var(--color-text);
white-space: nowrap;
- transition: color 0.3s ease;
+ /* transition: color 0.3s ease; */
}
.step-card__desc {
@@ -811,7 +801,7 @@ textarea {
font-weight: 400;
line-height: 26px;
color: var(--color-body-text);
- transition: color 0.3s ease;
+ /* transition: color 0.3s ease; */
}
/* ─── Hover: ALL cards turn blue ────────────────── */
@@ -820,7 +810,29 @@ textarea {
opacity: 0.15; /* dim the pattern so it doesn't clash with the blue bg */
}
.step-card__meta svg {
- color: var(--color-primary) ;
+ color: var(--color-primary);
+}
+/* .step-card {
+ color: var(--color-text);
+} */
+
+.step-card:hover {
+ color: #fff;
+}
+
+.step-card__title,
+.step-card__desc,
+.step-card__badge,
+.step-card__meta svg {
+ transition:
+ color ease 0.3s,
+ border-color ease 0.3s;
+}
+.step-card:hover .step-card__title,
+.step-card:hover .step-card__desc,
+.step-card:hover .step-card__badge,
+.step-card:hover .step-card__meta svg {
+ transition-delay: 0.3s;
}
.step-card:hover .step-card__meta svg {
color: #ffffff;
@@ -867,7 +879,28 @@ textarea {
border-radius: 48px;
pointer-events: none;
}
+.map-txt {
+ position: absolute;
+ top: 43%;
+ left: 56%;
+ transform: translate(-50%, -50%);
+ color: #556574;
+ font-size: 12px;
+ z-index: 10;
+ text-shadow:
+ -1px 0 #fff,
+ 1px 0 #fff,
+ 0 -1px #fff,
+ 0 1px #fff,
+ -1px -1px #fff,
+ 1px -1px #fff,
+ -1px 1px #fff,
+ 1px 1px #fff;
+}
+.map-txt::before {
+ -webkit-text-stroke: 2px #fff;
+}
.map-card__location {
position: absolute;
left: 56%;
@@ -878,22 +911,21 @@ textarea {
display: flex;
align-items: center;
justify-content: center;
-
}
.map-location-dot {
position: relative;
display: block;
- width: 12px;
- height: 12px;
- background-color: #0274B3;
+ width: 18px;
+ height: 18px;
+ background-color: #0274b3;
border-radius: 50%;
border: 2.2px solid #ffffff;
z-index: 100;
}
.map-card__location::before,
.map-card__location::after {
- content: "";
+ content: '';
position: absolute;
left: 50%;
top: 50%;
@@ -901,7 +933,7 @@ textarea {
height: 12px;
border-radius: 50%;
transform: translate(-50%, -50%);
- background: #0274B3;
+ background: #0274b3;
z-index: -1;
animation: locationPulse 2s infinite ease-out;
filter: blur(2px);
@@ -926,7 +958,7 @@ textarea {
.map-card__nav {
position: absolute;
right: 40px;
- bottom: 40px;
+ bottom: 24px;
display: flex;
gap: 16px;
align-items: center;