/* ============================================
PRIMELAND AGENCY — CSS Code
انسخ هذا الكود في Custom CSS
============================================ */
/* CSS Variables */
:root {
--black-carbon: #0D0D0D;
--black-deep: #1A1A1A;
--black-soft: #2A2A2A;
--gold-primary: #C9A227;
--gold-light: #E5C158;
--gold-dark: #A08020;
--ivory: #F5F0E8;
--white: #FFFFFF;
--gray-text: #9A9A9A;
--gray-dark: #666666;
--font-arabic: 'Noto Sans Arabic', 'Tajawal', sans-serif;
--font-english: 'Space Grotesk', 'Poppins', sans-serif;
--transition-fast: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-medium: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Reset & Base */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
body {
font-family: var(--font-arabic);
background-color: var(--black-carbon);
color: var(--ivory);
line-height: 1.6;
overflow-x: hidden;
direction: rtl;
}
a {
text-decoration: none;
color: inherit;
transition: var(--transition-fast);
}
img {
max-width: 100%;
display: block;
}
ul {
list-style: none;
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--black-carbon);
}
::-webkit-scrollbar-thumb {
background: var(--gold-primary);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--gold-light);
}
/* Custom Cursor */
.custom-cursor {
position: fixed;
width: 40px;
height: 40px;
border: 2px solid var(--gold-primary);
border-radius: 50%;
pointer-events: none;
z-index: 9999;
transform: translate(-50%, -50%);
transition: width 0.3s, height 0.3s, border-color 0.3s;
mix-blend-mode: difference;
}
.custom-cursor.hover {
width: 60px;
height: 60px;
border-color: var(--gold-light);
background: rgba(201, 162, 39, 0.1);
}
.custom-cursor-dot {
position: fixed;
width: 8px;
height: 8px;
background: var(--gold-primary);
border-radius: 50%;
pointer-events: none;
z-index: 9999;
transform: translate(-50%, -50%);
}
/* Loading Screen */
.loading-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--black-carbon);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 10000;
transition: opacity 0.8s ease, visibility 0.8s ease;
}
.loading-screen.hidden {
opacity: 0;
visibility: hidden;
}
.aperture-loader {
width: 120px;
height: 120px;
position: relative;
}
.aperture-blade {
position: absolute;
width: 50%;
height: 50%;
background: var(--gold-primary);
transform-origin: 100% 100%;
animation: apertureOpen 2s ease-in-out infinite;
}
.aperture-blade:nth-child(1) { transform: rotate(0deg); animation-delay: 0s; }
.aperture-blade:nth-child(2) { transform: rotate(72deg); animation-delay: 0.1s; }
.aperture-blade:nth-child(3) { transform: rotate(144deg); animation-delay: 0.2s; }
.aperture-blade:nth-child(4) { transform: rotate(216deg); animation-delay: 0.3s; }
.aperture-blade:nth-child(5) { transform: rotate(288deg); animation-delay: 0.4s; }
@keyframes apertureOpen {
0%, 100% { transform: rotate(var(--rotation, 0deg)) scale(1); }
50% { transform: rotate(var(--rotation, 0deg)) scale(0.3); }
}
.loading-text {
margin-top: 30px;
font-family: var(--font-english);
font-size: 1.5rem;
font-weight: 700;
letter-spacing: 8px;
color: var(--gold-primary);
}
.loading-bar {
width: 200px;
height: 2px;
background: var(--black-soft);
margin-top: 20px;
border-radius: 1px;
overflow: hidden;
}
.loading-bar-fill {
height: 100%;
background: var(--gold-primary);
width: 0%;
transition: width 0.3s ease;
}
/* Header/Navigation */
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 20px 50px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000;
transition: var(--transition-medium);
}
.header.scrolled {
background: rgba(13, 13, 13, 0.95);
backdrop-filter: blur(20px);
padding: 15px 50px;
box-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
}
.logo {
display: flex;
align-items: center;
gap: 12px;
}
.logo-icon {
width: 45px;
height: 45px;
border: 2px solid var(--gold-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.logo-icon::before {
content: '';
width: 15px;
height: 15px;
background: var(--gold-primary);
border-radius: 50%;
}
.logo-text {
font-family: var(--font-english);
font-size: 1.5rem;
font-weight: 700;
color: var(--white);
letter-spacing: 3px;
}
.logo-text span {
color: var(--gold-primary);
}
.nav-links {
display: flex;
gap: 40px;
align-items: center;
}
.nav-link {
font-size: 0.95rem;
color: var(--gray-text);
position: relative;
padding: 5px 0;
transition: var(--transition-fast);
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 2px;
background: var(--gold-primary);
transition: var(--transition-fast);
}
.nav-link:hover {
color: var(--white);
}
.nav-link:hover::after {
width: 100%;
}
.cta-button {
padding: 12px 30px;
background: var(--gold-primary);
color: var(--black-carbon);
font-weight: 700;
border-radius: 30px;
border: 2px solid var(--gold-primary);
transition: var(--transition-fast);
cursor: pointer;
font-family: var(--font-arabic);
}
.cta-button:hover {
background: transparent;
color: var(--gold-primary);
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(201, 162, 39, 0.3);
}
.mobile-menu-btn {
display: none;
flex-direction: column;
gap: 6px;
cursor: pointer;
z-index: 1001;
}
.mobile-menu-btn span {
width: 30px;
height: 2px;
background: var(--white);
transition: var(--transition-fast);
}
/* Hero Section */
.hero {
position: relative;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--black-carbon) 0%, var(--black-deep) 50%, #1a0a0a 100%);
}
.hero-bg::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c9a227' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.5;
}
.hero-content {
position: relative;
z-index: 2;
text-align: center;
max-width: 900px;
padding: 0 20px;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 20px;
background: rgba(201, 162, 39, 0.1);
border: 1px solid rgba(201, 162, 39, 0.3);
border-radius: 30px;
margin-bottom: 30px;
font-size: 0.85rem;
color: var(--gold-primary);
animation: fadeInDown 1s ease 0.5s both;
}
.hero-badge .dot {
width: 8px;
height: 8px;
background: var(--gold-primary);
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.2); }
}
.hero-title {
font-size: clamp(2.5rem, 6vw, 5rem);
font-weight: 900;
line-height: 1.1;
margin-bottom: 20px;
animation: fadeInUp 1s ease 0.7s both;
}
.hero-title .highlight {
color: var(--gold-primary);
position: relative;
}
.hero-title .highlight::after {
content: '';
position: absolute;
bottom: 5px;
left: 0;
width: 100%;
height: 8px;
background: rgba(201, 162, 39, 0.3);
z-index: -1;
}
.hero-subtitle {
font-size: clamp(1rem, 2vw, 1.3rem);
color: var(--gray-text);
margin-bottom: 40px;
animation: fadeInUp 1s ease 0.9s both;
}
.hero-buttons {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
animation: fadeInUp 1s ease 1.1s both;
}
.btn-primary {
padding: 15px 40px;
background: var(--gold-primary);
color: var(--black-carbon);
font-weight: 700;
border-radius: 30px;
border: 2px solid var(--gold-primary);
transition: var(--transition-fast);
cursor: pointer;
font-family: var(--font-arabic);
font-size: 1rem;
display: inline-flex;
align-items: center;
gap: 10px;
}
.btn-primary:hover {
background: transparent;
color: var(--gold-primary);
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(201, 162, 39, 0.3);
}
.btn-secondary {
padding: 15px 40px;
background: transparent;
color: var(--white);
font-weight: 700;
border-radius: 30px;
border: 2px solid rgba(255, 255, 255, 0.3);
transition: var(--transition-fast);
cursor: pointer;
font-family: var(--font-arabic);
font-size: 1rem;
display: inline-flex;
align-items: center;
gap: 10px;
}
.btn-secondary:hover {
border-color: var(--gold-primary);
color: var(--gold-primary);
transform: translateY(-3px);
}
.hero-stats {
display: flex;
justify-content: center;
gap: 60px;
margin-top: 60px;
animation: fadeInUp 1s ease 1.3s both;
}
.stat-item {
text-align: center;
}
.stat-number {
font-family: var(--font-english);
font-size: 2.5rem;
font-weight: 700;
color: var(--gold-primary);
display: block;
}
.stat-label {
font-size: 0.9rem;
color: var(--gray-text);
margin-top: 5px;
}
.hero-scroll {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
animation: fadeIn 1s ease 1.5s both;
}
.hero-scroll-text {
font-size: 0.75rem;
color: var(--gray-text);
letter-spacing: 3px;
text-transform: uppercase;
}
.hero-scroll-line {
width: 1px;
height: 60px;
background: linear-gradient(to bottom, var(--gold-primary), transparent);
animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
0%, 100% { transform: scaleY(0); transform-origin: top; }
50% { transform: scaleY(1); transform-origin: top; }
51% { transform-origin: bottom; }
100% { transform: scaleY(0); transform-origin: bottom; }
}
/* Floating Elements */
.floating-element {
position: absolute;
border-radius: 50%;
filter: blur(60px);
opacity: 0.4;
animation: float 8s ease-in-out infinite;
}
.floating-element-1 {
width: 300px;
height: 300px;
background: var(--gold-primary);
top: 10%;
right: 10%;
animation-delay: 0s;
}
.floating-element-2 {
width: 200px;
height: 200px;
background: #8B4513;
bottom: 20%;
left: 10%;
animation-delay: -3s;
}
.floating-element-3 {
width: 150px;
height: 150px;
background: var(--gold-dark);
top: 50%;
left: 50%;
animation-delay: -5s;
}
@keyframes float {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(30px, -30px) scale(1.1); }
66% { transform: translate(-20px, 20px) scale(0.9); }
}
/* Section Styles */
.section {
padding: 120px 50px;
position: relative;
}
.section-header {
text-align: center;
margin-bottom: 80px;
}
.section-label {
display: inline-block;
padding: 5px 15px;
background: rgba(201, 162, 39, 0.1);
border: 1px solid rgba(201, 162, 39, 0.3);
border-radius: 20px;
font-size: 0.8rem;
color: var(--gold-primary);
margin-bottom: 15px;
letter-spacing: 2px;
}
.section-title {
font-size: clamp(2rem, 4vw, 3.5rem);
font-weight: 900;
margin-bottom: 15px;
}
.section-subtitle {
font-size: 1.1rem;
color: var(--gray-text);
max-width: 600px;
margin: 0 auto;
}
/* Services Section */
.services {
background: var(--black-deep);
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 30px;
max-width: 1200px;
margin: 0 auto;
}
.service-card {
background: var(--black-soft);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 20px;
padding: 40px;
position: relative;
overflow: hidden;
transition: var(--transition-medium);
cursor: pointer;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(201, 162, 39, 0.1), transparent);
opacity: 0;
transition: var(--transition-medium);
}
.service-card:hover {
transform: translateY(-10px);
border-color: rgba(201, 162, 39, 0.3);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}
.service-card:hover::before {
opacity: 1;
}
.service-icon {
width: 70px;
height: 70px;
background: rgba(201, 162, 39, 0.1);
border: 1px solid rgba(201, 162, 39, 0.3);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
margin-bottom: 25px;
position: relative;
z-index: 1;
}
.service-title {
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 15px;
position: relative;
z-index: 1;
}
.service-desc {
color: var(--gray-text);
font-size: 0.95rem;
line-height: 1.8;
margin-bottom: 20px;
position: relative;
z-index: 1;
}
.service-features {
display: flex;
flex-direction: column;
gap: 10px;
position: relative;
z-index: 1;
}
.service-feature {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.9rem;
color: var(--gray-text);
}
.service-feature::before {
content: '✦';
color: var(--gold-primary);
font-size: 0.7rem;
}
.service-card .arrow {
position: absolute;
bottom: 30px;
left: 30px;
width: 40px;
height: 40px;
background: var(--gold-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--black-carbon);
font-size: 1.2rem;
transform: translateX(-10px);
opacity: 0;
transition: var(--transition-fast);
}
.service-card:hover .arrow {
transform: translateX(0);
opacity: 1;
}
/* Portfolio Section */
.portfolio {
background: var(--black-carbon);
}
.portfolio-filter {
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 50px;
flex-wrap: wrap;
}
.filter-btn {
padding: 10px 25px;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 30px;
color: var(--gray-text);
font-family: var(--font-arabic);
cursor: pointer;
transition: var(--transition-fast);
}
.filter-btn:hover,
.filter-btn.active {
background: var(--gold-primary);
border-color: var(--gold-primary);
color: var(--black-carbon);
}
.portfolio-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
max-width: 1200px;
margin: 0 auto;
}
.portfolio-item {
position: relative;
border-radius: 15px;
overflow: hidden;
aspect-ratio: 4/3;
cursor: pointer;
}
.portfolio-item.tall {
aspect-ratio: 3/4;
grid-row: span 2;
}
.portfolio-item.wide {
aspect-ratio: 16/9;
grid-column: span 2;
}
.portfolio-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition-slow);
}
.portfolio-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(13, 13, 13, 0.95) 0%, transparent 60%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 30px;
opacity: 0;
transition: var(--transition-medium);
}
.portfolio-item:hover .portfolio-overlay {
opacity: 1;
}
.portfolio-item:hover .portfolio-img {
transform: scale(1.1);
}
.portfolio-category {
font-size: 0.8rem;
color: var(--gold-primary);
margin-bottom: 8px;
letter-spacing: 2px;
}
.portfolio-title {
font-size: 1.3rem;
font-weight: 700;
}
/* About Section */
.about {
background: var(--black-deep);
}
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
max-width: 1200px;
margin: 0 auto;
align-items: center;
}
.about-image {
position: relative;
}
.about-image-main {
border-radius: 20px;
overflow: hidden;
position: relative;
}
.about-image-main img {
width: 100%;
height: auto;
transition: var(--transition-slow);
}
.about-image:hover .about-image-main img {
transform: scale(1.05);
}
.about-image-frame {
position: absolute;
top: -20px;
right: -20px;
width: 100%;
height: 100%;
border: 2px solid var(--gold-primary);
border-radius: 20px;
z-index: -1;
}
.about-text h3 {
font-size: 2rem;
font-weight: 700;
margin-bottom: 20px;
}
.about-text p {
color: var(--gray-text);
line-height: 1.9;
margin-bottom: 20px;
}
.about-stats-inline {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 30px;
}
.about-stat-box {
background: var(--black-soft);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 15px;
padding: 25px;
text-align: center;
transition: var(--transition-fast);
}
.about-stat-box:hover {
border-color: rgba(201, 162, 39, 0.3);
transform: translateY(-5px);
}
.about-stat-box .number {
font-family: var(--font-english);
font-size: 2rem;
font-weight: 700;
color: var(--gold-primary);
}
.about-stat-box .label {
font-size: 0.85rem;
color: var(--gray-text);
margin-top: 5px;
}
/* Testimonials Section */
.testimonials {
background: var(--black-carbon);
}
.testimonials-slider {
max-width: 800px;
margin: 0 auto;
position: relative;
}
.testimonial-card {
background: rgba(42, 42, 42, 0.5);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 30px;
padding: 50px;
text-align: center;
position: relative;
}
.testimonial-quote {
font-size: 4rem;
color: var(--gold-primary);
opacity: 0.3;
line-height: 1;
margin-bottom: 20px;
}
.testimonial-text {
font-size: 1.2rem;
line-height: 1.9;
margin-bottom: 30px;
color: var(--ivory);
}
.testimonial-author {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.testimonial-avatar {
width: 70px;
height: 70px;
border-radius: 50%;
border: 3px solid var(--gold-primary);
object-fit: cover;
}
.testimonial-name {
font-weight: 700;
font-size: 1.1rem;
}
.testimonial-role {
font-size: 0.9rem;
color: var(--gray-text);
}
.testimonial-stars {
color: var(--gold-primary);
font-size: 1.2rem;
letter-spacing: 3px;
}
.testimonial-nav {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 40px;
}
.testimonial-nav button {
width: 50px;
height: 50px;
border-radius: 50%;
background: var(--black-soft);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--white);
cursor: pointer;
transition: var(--transition-fast);
display: flex;
align-items: center;
justify-content: center;
}
.testimonial-nav button:hover {
background: var(--gold-primary);
border-color: var(--gold-primary);
color: var(--black-carbon);
}
/* Contact Section */
.contact {
background: var(--black-deep);
}
.contact-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
max-width: 1200px;
margin: 0 auto;
}
.contact-info h3 {
font-size: 2rem;
font-weight: 700;
margin-bottom: 20px;
}
.contact-info > p {
color: var(--gray-text);
margin-bottom: 40px;
line-height: 1.8;
}
.contact-details {
display: flex;
flex-direction: column;
gap: 25px;
}
.contact-detail {
display: flex;
align-items: flex-start;
gap: 20px;
}
.contact-detail-icon {
width: 50px;
height: 50px;
background: rgba(201, 162, 39, 0.1);
border: 1px solid rgba(201, 162, 39, 0.3);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
flex-shrink: 0;
}
.contact-detail-text h4 {
font-size: 1rem;
margin-bottom: 5px;
}
.contact-detail-text p {
color: var(--gray-text);
font-size: 0.95rem;
}
.contact-form {
background: var(--black-soft);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 25px;
padding: 50px;
}
.form-group {
margin-bottom: 25px;
}
.form-group label {
display: block;
margin-bottom: 10px;
font-size: 0.9rem;
color: var(--gray-text);
}
.form-group input,
.form-group textarea,
.form-group select {
width: 100%;
padding: 15px 20px;
background: var(--black-deep);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
color: var(--white);
font-family: var(--font-arabic);
font-size: 1rem;
transition: var(--transition-fast);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
outline: none;
border-color: var(--gold-primary);
box-shadow: 0 0 20px rgba(201, 162, 39, 0.1);
}
.form-group textarea {
min-height: 120px;
resize: vertical;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.submit-btn {
width: 100%;
padding: 18px;
background: var(--gold-primary);
color: var(--black-carbon);
font-weight: 700;
font-size: 1.1rem;
border: 2px solid var(--gold-primary);
border-radius: 12px;
cursor: pointer;
font-family: var(--font-arabic);
transition: var(--transition-fast);
}
.submit-btn:hover {
background: transparent;
color: var(--gold-primary);
}
/* Footer */
.footer {
background: var(--black-carbon);
border-top: 1px solid rgba(255, 255, 255, 0.05);
padding: 80px 50px 30px;
}
.footer-content {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 60px;
max-width: 1200px;
margin: 0 auto 60px;
}
.footer-brand .logo {
margin-bottom: 20px;
}
.footer-brand p {
color: var(--gray-text);
line-height: 1.8;
margin-bottom: 25px;
}
.footer-social {
display: flex;
gap: 15px;
}
.footer-social a {
width: 40px;
height: 40px;
background: var(--black-soft);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition-fast);
}
.footer-social a:hover {
background: var(--gold-primary);
border-color: var(--gold-primary);
color: var(--black-carbon);
transform: translateY(-3px);
}
.footer-column h4 {
font-size: 1.1rem;
margin-bottom: 25px;
color: var(--white);
}
.footer-links {
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-links a {
color: var(--gray-text);
font-size: 0.95rem;
transition: var(--transition-fast);
}
.footer-links a:hover {
color: var(--gold-primary);
padding-right: 5px;
}
.footer-newsletter {
margin-top: 20px;
}
.footer-newsletter p {
color: var(--gray-text);
font-size: 0.9rem;
margin-bottom: 15px;
}
.newsletter-form {
display: flex;
gap: 10px;
}
.newsletter-form input {
flex: 1;
padding: 12px 15px;
background: var(--black-soft);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
color: var(--white);
font-family: var(--font-arabic);
}
.newsletter-form button {
padding: 12px 20px;
background: var(--gold-primary);
border: none;
border-radius: 10px;
color: var(--black-carbon);
font-weight: 700;
cursor: pointer;
transition: var(--transition-fast);
}
.newsletter-form button:hover {
background: var(--gold-light);
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.05);
padding-top: 30px;
text-align: center;
color: var(--gray-dark);
font-size: 0.9rem;
}
/* Animations */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Scroll Reveal */
.reveal {
opacity: 0;
transform: translateY(50px);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}
/* Responsive */
@media (max-width: 1024px) {
.about-content,
.contact-content {
grid-template-columns: 1fr;
gap: 50px;
}
.footer-content {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
.header {
padding: 15px 20px;
}
.nav-links {
display: none;
}
.mobile-menu-btn {
display: flex;
}
.section {
padding: 80px 20px;
}
.hero-stats {
gap: 30px;
flex-wrap: wrap;
}
.stat-number {
font-size: 2rem;
}
.services-grid {
grid-template-columns: 1fr;
}
.portfolio-grid {
grid-template-columns: 1fr;
}
.portfolio-item.wide,
.portfolio-item.tall {
grid-column: span 1;
grid-row: span 1;
aspect-ratio: 4/3;
}
.about-stats-inline {
grid-template-columns: 1fr;
}
.form-row {
grid-template-columns: 1fr;
}
.footer-content {
grid-template-columns: 1fr;
gap: 40px;
}
.custom-cursor,
.custom-cursor-dot {
display: none;
}
}
@media (max-width: 480px) {
.hero-buttons {
flex-direction: column;
align-items: center;
}
.btn-primary,
.btn-secondary {
width: 100%;
justify-content: center;
}
.testimonial-card {
padding: 30px 20px;
}
.contact-form {
padding: 30px 20px;
}
}
PRIMELAND
PRIMELAND
وكالة إعلان وتصوير احترافية
نُحوّل رؤيتك إلى
واقع بصري استثنائي
نحن فريق من 40 خبيراً مع أكثر من 12 عاماً من الخبرة في بناء الهويات البصرية والتسويق الرقمي لمساعدة عملك على النمو
0
خبير متخصص
0
سنة خبرة
0
مشروع ناجح
اسحب للأسفل
خدماتنا
اختر وضع التصوير
نقدم حلولاً متكاملة في التصوير والتصميم والتسويق الرقمي
تصوير احترافي
نلتقط لحظاتك بأعلى جودة باستخدام أحدث المعدات والتقنيات
تصوير المنتجات
تصوير الفعاليات
تصوير شخصي (بورتريه)
تصوير الطعام
→
تصميم إبداعي
نصمم هويتك البصرية بأسلوب فريد يعكس قيم علامتك التجارية
الهوية البصرية
تصميم المواقع
تصميم المطبوعات
تصميم السوشيال ميديا
→
تسويق رقمي
نصل بعلامتك التجارية إلى الجمهور المناسب باستراتيجيات مبتكرة
إدارة السوشيال ميديا
حملات إعلانية مدفوعة
تحسين محركات البحث (SEO)
إنتاج المحتوى
→
أعمالنا
معرض الأعمال
نماذج من مشاريعنا التي نفتخر بها
من نحن
قصة PrimeLand
نحن نصنع الفرق
PrimeLand هي وكالة إعلان وتصوير متكاملة تأسست في الكويت بهدف واحد: تحويل الأفكار إلى واقع بصري مذهل. نؤمن بأن كل علامة تجارية تستحق أن تُروى قصتها بأجمل صورة.
فريقنا المكون من 40 خبيراً في التصوير والتصميم والتسويق يعمل بشغف لإنتاج محتوى يترك أثراً. منذ 12 عاماً، نساعد الشركات على بناء حضور رقمي قوي يحقق نتائج ملموسة.
0
خبير متخصص
0
سنة خبرة
0
مشروع ناجح
0
رضا العملاء
آراء العملاء
ماذا يقولون عنا
"
PrimeLand حولت فكرتنا إلى هوية بصرية مذهلة. التصوير كان احترافياً والتسليم كان سريعاً جداً. أنصح بالتعامل معهم بشدة.
أحمد العلي
مدير شركة التقنية المتقدمة
★★★★★
تواصل معنا
لنبدأ مشروعك القادم
معلومات التواصل
نحن هنا لمساعدتك في تحقيق رؤيتك. تواصل معنا اليوم ودعنا نناقش كيف يمكننا النمو معاً.
العنوان
الكويت، شارع الخليج العربي، برج PrimeLand
البريد الإلكتروني
info@primelandkw.com
رقم الهاتف
+965 1234 5678
أوقات العمل
الأحد - الخميس: 9:00 ص - 6:00 م