- الريـاض 2025
التسجيل
!حدد مسارك
أكبر حدث لاستكشاف المسارات المستقبلية.
Single Growth Animation Test
.hero-animation-container .shape-top-inner, .hero-animation-container .shape-bottom-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 0px;
position: relative;
width: 100%;
z-index: 999;
}
.hero-text{
text-align: center;
position: relative;
z-index: 5;
margin: 50px 0;
}
.hero-text h3{
font-size: 48px;
margin: 0;
padding: 0;
color: #8179FF;
text-align: center;
font-weight: bold;
font-family: “ManchetteModern”, “nano-serif”;
line-height: 1;
}
.hero-text p{
font-size: 20px;
margin: 10px 0 20px 0;
padding: 0;
color: #fff;
text-align: center;
font-weight: 500;
font-family: “ManchetteModern”, “nano-serif”;
line-height: 1;
}
.hero-text a{
display: inline-block;
padding: 8px 40px;
color: #8179FF;
border: 2px solid #8179FF;
text-decoration: none;
border-radius: 5px;
font-size: 16px;
font-weight: bold;
font-family: “ManchetteModern”, “nano-serif”;
transition: background-color 0.3s ease;
}
!حدد مسارك
أكبر حدث لاستكشاف المسارات
المستقبلية.
التسجيل المسبق
من أبرز الجامعات والاكاديميات و الشركات
أكثر من ٥٠٠ جهة
أكثر من ٥٠٠ جهة
من مختلف القطاعات
مسار أكبر ملتقى لاكتشاف المسارات المستقبلية
مبادرة من مزواد تهدف إلى تمكين الشباب وإلهامهم ، بمشاركــــة
مسار أكبر ملتقى لاكتشاف المسارات المستقبلية
مبادرة من مزواد تهدف إلى تمكين الشباب وإلهامهم ، بمشاركــــة
أكثر من ٥٠٠ جهة
من مختلف القطاعات
أكثر من ٥٠٠ جهة
من أبرز الجامعات والاكاديميات و الشركات
من خلال مسارات ومناطق تفاعلية وورش عمل ومحطات معرفية ومنصّة رئيسية
Single Growth Animation Test
.bottom-section {
background-color: #004225;
position: relative;
height: 450px;
overflow: hidden;
}
.parallax-bg-wrapper, .parallax-text {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
}
.parallax-block { position: absolute; }
.green-stripe {
background-color: #50C878;
width: 8.1%;
left: 84%;
height: 100%;
bottom: 80px;
transform-origin: bottom;
transform: scaleY(0);
}
.purple-stripe-1, .purple-stripe-2 {
background-color: #A9A4FF;
width: 8%;
height: 18%;
bottom: 0;
}
.purple-stripe-1 { right: 16%; }
.purple-stripe-2 { right: 0%; }
.parallax-text {
display: flex;
font-size: 21px;
color: #fff;
line-height: 1.6;
opacity: 0;
text-align: left;
width: 273px;
padding-left: 5%;
top: 15%;
font-family: “ManchetteModern”, “nano-serif”;
font-weight: bold;
}
المسارات
TRACKES
3D Carousel with Mouse Rotation (Arabic Counting)
body {
background: #000;
margin: 0;
padding: 0;
overflow-x: hidden;
touch-action: pan-y;
}
.slider-wrapper {
width: 100%;
height: 70vh;
position: relative;
perspective: 1200px;
overflow: hidden;
margin-top:-40% !important;
}
.carousel {
position: absolute;
width: 150px;
height: 230px;
top: 40%;
left: 50%;
transform-style: preserve-3d;
transform: translateX(-50%) rotateY(0deg);
transition: transform 1s ease;
z-index: 10;
}
.carousel-item {
position: absolute;
width: 180px;
height: 180px;
transform: rotateY(calc((var(–position) – 1) * (360 / var(–quantity)) * 1deg)) translateZ(300px);
transform-style: preserve-3d;
text-align: center;
transition: transform 0.5s ease;
user-select: none;
}
.carousel-content {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 1s ease;
}
.carousel-item img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
backface-visibility: hidden;
}
.carousel-caption {
position: absolute;
bottom: -40px;
left: 0;
color: white;
font-size: 10px;
font-weight: bold;
border: 1px solid #155034;
border-radius: 10px;
padding: 5px 10px;
background-color: rgba(0, 0, 0, 0.5);
white-space: nowrap;
width: auto;
max-width: 100%;
}
@media (max-width: 430px) {
.carousel {
width: 120px;
height: 130px;
top: 37%;
}
.carousel-item {
width: 120px;
height: 130px;
transform: rotateY(calc((var(–position) – 1) * (360 / var(–quantity)) * 1deg)) translateZ(220px);
}
.carousel-item img {
border-radius: 15px;
}
.carousel-caption {
font-size: 8px;
bottom: -40px;
}
.slider-wrapper {
perspective: 700px;
margin-top:-20% !important;
margin-bottom: -300px !important;
}
}
@media (max-width: 425px) {
.carousel {
width: 120px;
height: 120px;
top: 33%;
}
.carousel-item {
width: 120px;
height: 120px;
transform: rotateY(calc((var(–position) – 1) * (360 / var(–quantity)) * 1deg)) translateZ(200px);
}
.carousel-item img {
border-radius: 12px;
}
.carousel-caption {
font-size: 8px;
bottom: -40px;
}
.slider-wrapper {
perspective: 510px;
margin-top:-20% !important;
margin-bottom: -200px !important;
}
}
@media (max-width: 375px) {
.carousel {
width: 110px;
height: 110px;
top: 33%;
}
.carousel-item {
width: 110px;
height: 110px;
transform: rotateY(calc((var(–position) – 1) * (360 / var(–quantity)) * 1deg)) translateZ(180px);
}
.carousel-caption {
font-size: 8px;
bottom: -40px;
}
.slider-wrapper {
perspective: 490px;
margin-top:-20% !important;
margin-bottom: -200px !important;
}
}
@media (max-width: 320px) {
.carousel {
width: 100px;
height: 100px;
top: 30%;
}
.carousel-item {
width: 100px;
height: 100px;
transform: rotateY(calc((var(–position) – 1) * (360 / var(–quantity)) * 1deg)) translateZ(160px);
}
.carousel-caption {
font-size: 8px;
bottom: -35px;
}
.slider-wrapper {
perspective: 500px;
margin-top:-20% !important;
margin-bottom: -350px !important;
}
}
التعليم
التطوير
الإرشاد المهني
ريـادة الأعمال
خطوة تجاوب على كل الأسئلة اللي تتراود بذهن أي طموح، يرغب بتشكيل مساره ويعاني من الضبابية ,من خلال مُلتقى تفاعلي مُختلف.
المجالات
FIELSDS
3D Slider with Mouse Rotation (Arabic Counting)
body {
background: #000;
margin: 0;
padding: 0;
overflow-x: hidden;
touch-action: pan-y;
}
.unique-banner {
width: 100%;
height: 100vh;
position: relative;
perspective: 1200px;
overflow: hidden;
margin-top: -20% !important;
}
.unique-slider {
position: absolute;
width: 150px;
height: 230px;
top: 40%;
left: 50%;
transform-style: preserve-3d;
transform: translateX(-50%) rotateY(0deg);
transition: transform 1s ease;
z-index: 10;
}
.unique-item {
position: absolute;
width: 190px;
height: 190px;
transform: rotateY(calc((var(–position) – 1) * (360 / var(–quantity)) * 1deg)) translateZ(300px);
transform-style: preserve-3d;
text-align: center;
transition: transform 0.5s ease;
user-select: none;
}
.unique-item-content {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 1s ease;
}
.unique-item img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
backface-visibility: hidden;
}
.unique-item .unique-caption {
position: absolute;
bottom: -40px;
left: 0;
color: white;
font-size: 10px;
font-weight: bold;
border: 1px solid #155034;
border-radius: 10px;
width: 50%;
text-align: left;
padding: 5px 10px;
background-color: rgba(0, 0, 0, 0.5);
white-space: nowrap; /* Prevent text wrapping /
width: auto; / Let the width adjust to content /
max-width: 100%; / Ensure it doesn’t overflow the item /
}
@media (max-width: 430px) {
.unique-slider {
width: 120px;
height: 130px;
top: 37%;
}
.unique-item {
width: 120px;
height: 130px;
transform: rotateY(calc((var(–position) – 1) * (360 / var(–quantity)) * 1deg)) translateZ(220px);
}
.unique-item img {
border-radius: 15px;
}
.unique-item .unique-caption {
font-size: 8px;
bottom: -40px;
}
.unique-banner {
width: 100%;
height: 80vh;
position: relative;
perspective: 700px;
overflow: hidden;
margin-top:-40% !important;
margin-bottom: -300px !important;
}
}
@media (max-width: 425px) {
.unique-slider {
width: 110px;
height: 110px;
top: 38%;
}
.unique-item {
width: 110px;
height: 110px;
transform: rotateY(calc((var(–position) – 1) * (360 / var(–quantity)) * 1deg)) translateZ(200px);
}
.unique-item img {
border-radius: 12px;
}
.unique-item .unique-caption {
font-size: 8px;
bottom: -40px;
}
.unique-banner {
width: 100%;
height: 80vh;
position: relative;
perspective:500px;
overflow: hidden;
/margin-top:-20% !important;/
/margin-bottom: -250px !important;/
}
}
@media (max-width: 375px) {
.unique-slider {
width: 110px;
height: 110px;
top: 33%;
}
.unique-item {
width: 110px;
height: 110px;
transform: rotateY(calc((var(–position) – 1) * (360 / var(–quantity)) * 1deg)) translateZ(180px);
}
.unique-item .unique-caption {
font-size: 8px;
bottom: -40px;
}
.unique-banner {
width: 100%;
height: 90vh;
position: relative;
perspective: 490px;
overflow: hidden;
margin-top:-20% !important;
margin-bottom: -250px !important;
}
}
@media (max-width: 320px) {
.unique-slider {
width: 100px;
height: 100px;
top: 30%;
}
.unique-item {
width: 100px;
height: 100px;
transform: rotateY(calc((var(–position) – 1) * (360 / var(–quantity)) * 1deg)) translateZ(160px);
}
.unique-item .unique-caption {
font-size: 8px;
bottom: -35px;
}
.unique-banner {
width: 100%;
height: 80vh;
position: relative;
perspective: 490px;
overflow: hidden;
margin-top:-20% !important;
margin-bottom: -250px !important;
}
}
الفنتك
الثقافة
السياحة
الصحة
الإعلام
يهدف “مسار” إلى تسليط الضوء على أبرز المجالات التي تشهد تطوّرًا كبيرًا. وذلك لدعم الطموحين ومساعدتهم في اختيار شغفهم، من خلال تجربة تفاعلية تُحاكي مستقبلهم بصورة واقعية
المتحدثون الرئيسيون
SPEAKERS & HEADLINERS
أ. روبرت آدم
Mr. Robert Adam
مدرب تطوير مهني
Marketing Professor
أ. روبرت آدم
Mr. Robert Adam
مدرب تطوير مهني
Marketing Professor
عرض الكل
أبرز الفعاليات
PROGRAM HIGHLIGHTS
Program highlight Animation
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.highlight-card {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
.card-img, .curtain-wrapper, .text-wrapper {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
}
.card-img { z-index: 1; object-fit: cover; }
.curtain-wrapper { z-index: 2; display: flex; }
.text-wrapper {
z-index: 3;
display: flex;
flex-direction: column;
justify-content: center;
font-family: “ManchetteModern”, “nano-serif”;
}
.text-wrapper span{
color: #fff;
font-size: 1.5rem;
}
.text-wrapper h3{
color: #fff;
font-size: 2.2rem;
margin: 0;
padding-bottom: 0.5rem;
}
.text-wrapper p{
color: #D3E176;
margin: 0;
line-height: 1;
}
.text-wrapper .p1{
font-size: 1.5rem;
}
.text-wrapper .p2{
font-size: 1.2rem;
padding-bottom: 0.5rem;
direction: ltr;
}
.highlight-card .text-right {
margin-left: -5%;
text-align: right;
}
.highlight-card .text-left {
text-align: left;
margin-left: 5%;
}
.curtain-piece {
width: 10%;
height: 100%;
}
@media screen and (max-width: 1024px) {
.highlight-card {
height: 300px;
}
.text-wrapper span{
font-size: 1.4rem;
}
.text-wrapper h3{
font-size: 2rem;
}
.text-wrapper p{
line-height: 1;
}
.text-wrapper .p1{
font-size: 1.5rem;
}
.text-wrapper .p2{
font-size: 1.2rem;
}
}
@media screen and (max-width: 767px) {
.highlight-card {
height: 190px;
}
.text-wrapper span{
font-size: 1rem;
}
.text-wrapper h3{
font-size: 1.3rem;
}
.text-wrapper p{
line-height: 1;
}
.text-wrapper .p1{
font-size: 1rem;
}
.text-wrapper .p2{
font-size: 0.8rem;
}
.highlight-card .text-right {
margin-left: -5%;
}
.highlight-card .text-left {
text-align: left;
margin-left: 5%;
}
}
تطوير مهارات القيادة
الشخصية
أ. سعد عبدالرحمن
4:00 – 6:00 pm
معرفة المزيد
ورشة عمل
تطوير مهارات القيادة
الشخصية
أ. سعد عبدالرحمن
4:00 – 6:00 pm
معرفة المزيد
الشركاء والرعاة
PARTNERS & SPONSORS
لا تفوّت الفرصة!
عن مـزواد:
مزواد شركة سعودية تساهم في تحسين جودة الحياة من خلال تقديم خدماتها المتخصصة في مجال الاستشارات وإنشاء المبادرات وإدارة البرامج والمشاريع
هـل لديك أسئلة
راسلنا على Info@mizwad.net
.info-text {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
position: relative;
}
.reveal-text {
transform-origin: right;
background: #8179FF;
padding: 10px;
text-align: center;
font-size: 25px;
font-weight: bold;
font-family: “ManchetteModern”, “nano-serif”;
}
.reveal {
visibility: hidden;
width: 80%;
height: 80%;
max-width: 500px;
overflow: hidden;
margin: auto;
}
.speaker-section {
display: flex;
flex-direction: column;
align-items: center;
}
/ speaker card */
.speaker-card {
position: relative;
width: 100%;
height: 500px;
display: flex;
justify-content: space-between;
direction: ltr;
}
.bg-blocks-wrapper {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
overflow: hidden;
}
.bg-block {
position: absolute;
height: 100%;
}
.purple-1 { background-color: #8179FF; width: 50%; height: 500px;}
.green-1 { background-color: #004423; width: 5%; height: 500px; }
.green-2 { background-color: #004423; width: 7%; height: 500px;}
.green-3 { background-color: #2E8B57; width: 7%; height: 500px; }
.green-4 { background-color: #2E8B57; width: 30%; height: 350px; bottom: 0; }
.green-5 { background-color: #004423; width: 7%; height: 350px; bottom: 0; }
.green-6 { background-color: #2E8B57; width: 7%; height: 150px; bottom: 0; }
.b1-1 { left: 0%; }
.b1-2 { left: 5%; }
.b1-3 { left: 50%; }
.b1-4 { left: 57%; }
.b1-5 { right: 10%; }
.b1-6 { right: 7%; }
.b1-7 { right: 0%; }
.b2-1 { right: 0%; }
.b2-2 { right: 5%; }
.b2-3 { right: 50%; }
.b2-4 { right: 57%; }
.b2-5 { left: 10%; }
.b2-6 { left: 7%; }
.b2-7 { left: 0%; }
.bg-block {
visibility: hidden;
}
.speaker-image, .speaker-info > * {
opacity: 0;
}
.speaker-content {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 20px;
width: 100%;
overflow: hidden;
justify-content: space-between;
}
.speaker-image {
width: 40%;
height: auto;
object-fit: cover;
}
.speaker-info h3 {
margin: 0 0 5px 0;
}
.speaker-info p {
margin: 0;
font-size: 0.9em;
opacity: 0.8;
}
.speaker-info{
gap: 8px;
display: grid;
}
.speaker-info.pl{
padding-left: 90px;
}
.speaker-info.pr{
padding-right: 100px;
}
.speaker-name{
text-align: center;
}
.speaker-name h3{
font-size: 5em;
margin-bottom: 5px;
font-weight: bold;
font-style: italic;
font-family: “ManchetteModern”, “nano-serif”;
}
.speaker-name p{
font-size: 3em;
opacity: 0.8;
font-style: italic;
}
.speaker-name h3, .speaker-name p {
color: #D3E4D9;
margin: 0;
}
.speaker-inner {
display: flex;
justify-content: space-between;
}
.speaker-inner img {
height: 40px;
margin-left: 10px;
}
.speaker-skill span {
display: block;
font-size: 1.2;
color: #D3E4D9;
font-family: “ManchetteModern”, “nano-serif”;
}
@media screen and (max-width: 1024px) {
.speaker-card {
height: 350px;
}
.speaker-image {
width: 45%;
height: auto;
object-fit: cover;
}
.purple-1 { background-color: #8179FF; width: 50%; height: 350px;}
.green-1 { background-color: #004423; width: 5%; height: 350px; }
.green-2 { background-color: #004423; width: 7%; height: 350px;}
.green-3 { background-color: #2E8B57; width: 7%; height: 350px; }
.green-4 { background-color: #2E8B57; width: 30%; height: 250px; bottom: 0; }
.green-5 { background-color: #004423; width: 7%; height: 250px; bottom: 0; }
.green-6 { background-color: #2E8B57; width: 7%; height: 100px; bottom: 0; }
.speaker-name h3{
font-size: 5em;
}
.speaker-info p {
margin: 0;
font-size: 0.9em;
opacity: 0.8;
}
.speaker-info{
gap: 8px;
display: grid;
}
.speaker-info.pl{
padding-left: 60px;
}
.speaker-info.pr{
padding-right: 80px;
}
.speaker-name h3{
font-size: 3.2em;
margin-bottom: 5px;
font-weight: bold;
font-style: italic;
font-family: “ManchetteModern”, “nano-serif”;
}
.speaker-name p{
font-size: 2.2em;
opacity: 0.8;
font-style: italic;
}
.speaker-inner img {
height: 30px;
margin-left: 10px;
}
.speaker-skill span {
display: block;
font-size: 1.5;
color: #D3E4D9;
font-family: “ManchetteModern”, “nano-serif”;
}
}
@media screen and (max-width: 767px) {
.speaker-card {
height: 200px;
}
.speaker-image {
width: 50%;
height: auto;
object-fit: cover;
}
.purple-1 { background-color: #8179FF; width: 50%; height: 200px;}
.green-1 { background-color: #004423; width: 5%; height: 200px; }
.green-2 { background-color: #004423; width: 7%; height: 200px;}
.green-3 { background-color: #2E8B57; width: 7%; height: 200px; }
.green-4 { background-color: #2E8B57; width: 30%; height: 150px; bottom: 0; }
.green-5 { background-color: #004423; width: 7%; height: 150px; bottom: 0; }
.green-6 { background-color: #2E8B57; width: 7%; height: 70px; bottom: 0; }
.speaker-info.pl{
padding-left: 25px;
}
.speaker-info.pr{
padding-right: 20px;
}
.speaker-name{
text-align: center;
}
.speaker-name h3{
font-size: 2em;
margin-bottom: 5px;
}
.speaker-name p{
font-size: 1.2em;
}
.speaker-name h3, .speaker-name p {
color: #D3E4D9;
margin: 0;
}
.speaker-inner {
display: flex;
}
.speaker-inner img {
height: 22px;
margin-left: 10px;
}
.speaker-skill span {
font-size: 0.5em;
}
}
.text-right{
direction: ltr;
}
.trackes-contect{
color: #8179FF;
font-weight: bold;
}
.margin-bottom{
margin-bottom: -110px;
}
.direction-ltr{
direction: direction-ltr;
}