/* Fonts */ :root { --default-font: sans-serif; --heading-font: 'Nunito', sans-serif; --nav-font: 'Inter', sans-serif; } /* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */ :root { --background-color: #ffffff; --organge-color: #ff7901; --default-color: #212529; --black-color: #000000; --heading-color: #2d465e; --accent-color: #0d83fd; --surface-color: #ffffff; --contrast-color: #ffffff; --text-gradient: linear-gradient(90deg, #ffa901 0%, #ff7901 100%); } /* Smooth scroll */ :root { scroll-behavior: smooth; } * { box-sizing: border-box; margin: 0; padding: 0; } /*-------------------------------------------------------------- # General Styling & Shared Classes --------------------------------------------------------------*/ body { font-family: 'Arial', sans-serif; } p, span, h1, h2, h3, h4, h5, h6 { line-height: 120%; } .display_show { display: block; } .display_hide { display: none !important; } p { margin: 0px; } .wrapper { width: 100%; } .spinner-section { position: fixed; width: 100%; z-index: 9999; background: var(--background-color); height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .spinner-section span { font-family: 'arial'; font-size: 15px; } .desktop { display: block; } .mobile { display: none; } .trading_info.mobile { visibility: hidden; } button { cursor: pointer; border: none; } .container, .container-md { margin: 0 auto; width: 100%; } .decoration { background: linear-gradient(90deg, #ffa802 8.49%, #ff7a01 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .original_price { font-size: 16px; font-weight: 400; line-height: 24px; color: #898989; text-decoration: line-through; } .container { max-width: 1226px !important; } .container-md { max-width: 1040px !important; } .row { justify-content: space-between; display: flex; align-items: center; } .banner { display: flex; flex-direction: column; gap: 13px; position: relative; background: url('https://landing.investing.com/mobile_html/prod//web-landing/Challenge/assets/img/challenge_desktop_top_bg.webp'); background-size: cover; padding: 0px 0px 100px 0px; } html[lang='sa'] .banner { background: url('https://landing.investing.com/mobile_html/prod//web-landing/Challenge/assets/img/challenge_desktop_top_bg_ar.png'); background-size: cover; } .header { margin-top: 15px; height: 70px; transition: all 0.5s; display: flex; align-items: center; } .header img { width: 182px; } .banner .banner-left { display: flex; flex-direction: column; gap: 40px; width: 56.25%; } .challenge_tag { max-width: 637px; margin-top: 40px; border: 1px solid #ffe8ca4d; background: #ffffff1a; padding: 8px 18px; border-radius: 100px; backdrop-filter: blur(15px); display: flex; justify-content: center; align-items: center; align-self: flex-start; } html[lang='sa'] .challenge_tag { direction: ltr; } .challenge_subtag { display: flex; justify-content: space-between; align-items: center; font-style: italic; color: #ffe8ca; gap: 10px; font-weight: 700; border-left: 1px solid #ffffff2f; padding-left: 15px; } .challenge_subtag .left { text-align: center; font-size: 10px; text-transform: uppercase; line-height: 11px; color: #ffe8ca; } .challenge_subtag .right { font-size: 22px; line-height: 24px; color: #ffe8ca; } .challenge_tag .tag_title { margin-right: 15px; font-weight: 700; font-style: italic; font-size: 12px; line-height: 24px; background: linear-gradient(90deg, #ffe8ca 0%, #de9a22 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .banner .banner-right { display: flex; justify-content: end; align-self: baseline; width: 36.6%; } html[lang='sa'] .banner-right .box_info { display: none; } .banner .banner-left .main-content { display: flex; flex-direction: column; gap: 36px; } .banner .banner-left .main-content .title { color: #ffffff; font-size: 72px; font-weight: 600; line-height: 79px; } .dark_bg { width: 419px; background: #00000033; border-radius: 12px; padding: 0px 8px 8px 8px; } .timer-container { margin-bottom: 10px !important; position: relative; width: fit-content; margin: 0 auto; } #timer-title { font-size: 12px; text-align: center; font-family: Arial; font-weight: 700; letter-spacing: 0.75px; text-transform: uppercase; line-height: 30px; text-decoration: none; background: linear-gradient(90deg, #ffe8ca 0%, #de9a22 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .timer { display: flex; align-items: center; justify-content: center; color: #ffffff; } .timer div { margin: 0 6px; text-align: center; } .timer .countdown { font-size: 24px; font-weight: 510; } .timer div span { display: block; font-size: 10px; text-transform: uppercase; color: #fff; font-weight: 400; } .btn { font-weight: 700; font-size: 16px; border-radius: 4px; } .dark_bg button { color: #000000; background: linear-gradient(90deg, #ffe8ca 0%, #de9a22 100%); height: 56px; border: none; width: 404px; padding: 16px; } .edu { color: #ffffff; background: transparent; height: 47px; border: 1px solid #898989; padding: 12px; width: 404px; margin-left: 7px; margin-top: -27px; } html[lang='sa'] .edu { margin-right: 7px; margin-left: unset; } .banner-right .box_info { background: linear-gradient(90deg, rgba(0, 0, 0, 0.048) 0%, rgba(0, 0, 0, 0.16) 100%); border: 1px solid #ffffff4d; backdrop-filter: blur(52px); box-shadow: 0px 14px 20px 0px #2929291a; padding: 13px 16px; border-radius: 12px; width: 212px; position: relative; } .banner-right .box_info span { color: #ffffff80; font-size: 12px; font-weight: 400; } .banner-right .box_info p { color: #ffffff; font-size: 28px; font-weight: 600; margin: 14px 0px; } .banner-right .box_info a { display: flex; align-items: center; font-weight: 600; gap: 4px; position: absolute; top: 14px; right: 11px; font-size: 11px; } .banner-right .box_info a span { color: #48de8e !important; font-size: 11px; font-weight: 600; } .banner-right .review_info { gap: 15px; margin-top: 10px; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 100%); display: flex; backdrop-filter: blur(24px); align-items: center; position: absolute; padding: 8px 37px; right: 0; bottom: 110px; justify-content: center; } html[lang='sa'] .banner-right .review_info { right: unset; left: 0; } .banner-right .review_info span { font-size: 14px; font-weight: 700; color: #ffffffe5; } .banner-right .review_info a { text-decoration: none; display: flex; justify-content: center; align-items: center; gap: 5px; } /* initial section */ .initial { padding: 100px 0px; display: flex; gap: 40px; background: #f4f5fa; } .initial .row { display: flex; align-items: center; gap: 81px; } .initial_left { display: flex; flex-direction: column; gap: 20px; } .initial_left h1 { color: #000000; font-size: 48px; font-weight: 700; line-height: 58px; } .initial_left h1 span, .tradding_left h1 span, .master h1 span { background: linear-gradient(90deg, #ffa901, #ff7901); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; } .initial_left div { width: 500px; } .initial_left div img { margin-right: 6px; margin-top: 2px; vertical-align: sub; } .initial_left div span { color: #0f1412; font-weight: 400; font-size: 18px; line-height: 24px; } .initial button { color: #ffffff; background: linear-gradient(90deg, #ffa400 0%, #ff6e00 100%); height: 56px; border: none; width: fit-content; border-radius: 4px; padding: 12px 60px; box-shadow: 0px 8px 18px -10px #7732001f; } .initial_right { align-items: center; height: 100%; padding: 0px 10px 10px 10px; box-shadow: 0px 4px 36px 0px #00000014; background: #ffffff; flex-direction: column; justify-content: flex-start; gap: 12px; } #ani_column_graph_container { width: 410px; } .option-group { width: 100%; justify-content: center; display: flex; gap: 20px; font-family: Arial, sans-serif; align-items: center; } .option { display: flex; align-items: center; } .box_1 { border: 1.5px solid #727272; background: #72727233; } .box_2 { border: 1.5px solid #119907; background: #11990733; } .box_1, .box_2 { width: 14px; height: 14px; border-radius: 4px; margin-right: 8px; transition: border-color 0.2s ease, background-color 0.2s ease; } html[lang='sa'] .box_1, html[lang='sa'] .box_2 { margin-left: 8px; margin-right: unset; } /* edu section */ .education { background: #fff; display: flex; flex-direction: column; gap: 55px; padding: 100px 15px; } .title-large { color: #0f1412; padding: 0px 10px; font-size: 48px; font-weight: 700; text-align: center; line-height: 53px; width: 100%; } .education .row { display: flex; align-items: center; gap: 81px; width: 100%; margin-top: 55px; } .education_left { padding-right: 76px; gap: 20px; display: flex; flex-direction: column; } .tri_list_info { display: flex; padding: 7px 10px; align-items: flex-start; gap: 15px; position: relative; } html[lang='sa'] .tri_list_info { align-items: baseline; } .tri_list_info .no { flex-shrink: 0; width: 40px; height: 40px; background: linear-gradient(360deg, #ff7a01 0%, #ffa802 100%); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; margin-right: 8px; } .tri_list_info span { color: #6b6b6b; font-size: 18px; font-weight: 400; line-height: 27px; } .tri_list_info .content { font-size: 16px; color: #0f1412; line-height: 27px; font-weight: 400; display: block; } .step-line { position: absolute; top: 53px; left: 30px; width: 1px; height: 36px; background-color: orange; } html[lang='sa'] .step-line { left: unset; right: 38px; height: 25px; } .education_right { height: 82%; border-radius: 10px; display: flex; align-items: baseline; position: relative; } .video-container { background: #212121; position: relative; height: 283px; width: 500px; overflow: hidden; border-radius: 12px; } .video-container iframe { width: 100%; height: 100%; border: none; } .video-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; background-size: cover; justify-content: center; align-items: center; cursor: pointer; z-index: 2; } .play-button { width: 50px; height: 50px; background: rgb(0, 0, 0); border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); } .play-button::after { content: ''; width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent rgb(255, 255, 255); margin-left: 4px; } /* trading section */ .tradding { background: linear-gradient(180deg, #16232c 0%, #23323d 100%); padding: 100px 15px; } .tradding .row { align-items: unset; } .tradding_left { gap: 20px; display: flex; flex-direction: column; } .tradding_left h1, .master h1 { color: var(--background-color); font-size: 48px; font-weight: 700; line-height: 53px; } .tradding_left p { color: #c9c9c9; font-size: 18px; font-weight: 400; padding-right: 160px; line-height: 21.78px; } html[lang='sa'] .tradding_left p { padding-left: 160px; padding-right: unset; } .tradding_left button, .tradding_right .btn { color: #ffffff; background: linear-gradient(90deg, #ffa400 0%, #ff6e00 100%); height: 56px; width: fit-content; border-radius: 4px; padding: 12px 60px; box-shadow: 0px 8px 18px -10px #7732001f; } .tradding_right { flex-direction: column; justify-content: flex-start; gap: 12px; border-radius: 10px; display: flex; align-items: baseline; position: relative; } .challenge_size_text { color: #d4d7d9; font-size: 20px; align-self: flex-start; font-weight: 400; line-height: 24px; text-align: center; text-decoration-skip-ink: none; } .challenge_size_select { display: flex; justify-content: center; align-items: center; gap: 16px; } .challenge_size_select > button.active { color: #f2a93b; border-color: #ffa802; } .challenge_size_select > button { width: 132px; color: #ffffff; background: #ffffff14; font-size: 20px; padding: 20px; border: none; border: 1px solid transparent; border-radius: 12px; transition: border-color 0.5s ease, color 0.5s ease, background-color 0.3s ease; font-weight: 600; } html[lang='sa'] .challenge_size_select > button { font-size: 16px; } html[lang='sa'] .challenge_size_select > button > span { font-size: 15px; } .challenge_size_select > button > span { color: #ffffff; font-size: 16px; font-weight: 400; } .challenge_circle { position: relative; margin-top: 10px; } .challenge_circle img { display: none; } .challenge_circle img.visible { display: block; transition: opacity 1s ease-in-out; } html[lang='sa'] .challenge_circle img.visible { transform: scaleX(-1); } .challenge_circle .infographic { display: none; } .challenge_circle .infographic.visible { display: block; transition: opacity 1s ease-in-out; } .challenge_circle .power_title { color: #d4d7d9; font-weight: 400; font-size: 18px; position: absolute; left: 22px; top: 68px; width: 70px; } html[lang='sa'] .challenge_circle .power_title { left: unset; right: 22px; } .position_1 { width: 95px; height: 95px; left: 15px; bottom: 21px; } html[lang='sa'] .position_1 { left: unset; right: 15px; } .position_2 { right: 25px; bottom: 31px; height: 246px; width: 246px; } html[lang='sa'] .position_2 { right: unset; left: 25px; } .position_3 { width: 85px; height: 85px; left: 15px; bottom: 26px; } html[lang='sa'] .position_3 { left: unset; right: 15px; } .position_4 { height: 266px; width: 266px; right: 15px; bottom: 22px; } html[lang='sa'] .position_4 { right: unset; left: 15px; } .position_5 { height: 75px; width: 75px; left: 19px; bottom: 31px; } html[lang='sa'] .position_5 { left: unset; right: 19px; } .position_6 { height: 282px; width: 282px; right: 7px; bottom: 15px; } html[lang='sa'] .position_6 { right: unset; left: 7px; } .infographic_small { background-color: #069df3; color: #ffffff; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; position: absolute; border-radius: 9999px; transition-duration: 0.3s; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition: border-color 0.5s ease, color 0.5s ease, background-color 0.3s ease; } .infographic_big { background-color: #ffa802; color: #ffffff; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; position: absolute; border-radius: 9999px; transition-duration: 0.3s; transition-property: all; transition: border-color 0.5s ease, color 0.5s ease, background-color 0.3s ease; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .challenge_circle .label { display: flex; justify-content: center; align-items: center; position: absolute; left: 22px; top: 33px; } html[lang='sa'] .challenge_circle .label { left: unset; right: 22px; } .challenge_circle .label .trading_info { cursor: pointer; display: flex; justify-content: center; align-items: center; } .challenge_circle .label .label_title { color: #ff8e02; font-weight: 600; font-size: 20px; } .challenge_circle .label .label_img { display: block !important; width: 30px !important; } .popuptext { visibility: hidden; width: 410px; background: #1a232c; box-shadow: 0px 8px 26px 0px #00000047; backdrop-filter: blur(200px); color: #fff; text-align: center; border-radius: 6px; padding: 22px 23px; position: absolute; z-index: 1; border: 1px solid #ffffff1a; left: 164px; margin-left: -80px; } .label .show { visibility: visible; -webkit-animation: fadeIn 1s; animation: fadeIn 1s; } .popuptext::before { content: ''; position: absolute; top: 250px; left: -15px; border-width: 5px; border-style: solid; border-color: transparent #1a232c transparent transparent; } .popup_content { margin: auto; width: 100%; display: flex; flex-direction: column; gap: 24px; } .popup_content p { margin: 0px; } .modal_button { font-weight: 600; font-style: normal; text-decoration: none; font-size: 16px; color: #ffffff; background: linear-gradient(90deg, #ffa400 0%, #ff6e00 100%); height: 47px; cursor: pointer; width: 100%; align-self: center; z-index: 9000; border: none; position: relative; border-radius: 8px; padding: 12px; box-shadow: 0px 8px 18px -10px #7732001f; display: inline-flex; justify-content: center; align-items: center; text-align: center; } .card-content p, .popup_content p { font-size: 16px; font-weight: 400; line-height: 24px; text-align: left; margin: 15px 0px; color: #d4d7d9; } .tradding_right .option { color: #bdbfc2; } .tradding_right .option .box_1 { background: #48a0de !important; border: none; border-radius: 50%; } .tradding_right .option .box_2 { background: #f2a93b !important; border: none; border-radius: 50%; } /* testimonial */ .testimonial { padding: 100px 0px; background: var(--background-color); } .testimonial .row { flex-direction: column; gap: 32px; align-items: center; } .testimonial__wrapper { padding: 0px 10px; width: 1200px; height: max-content; } .testimonial .title-large { width: 650px; } .carousel { width: 100%; margin: 0px auto; display: flex; justify-content: center; gap: 20px; } .box { display: flex; flex-direction: column; justify-content: space-between; width: 100%; margin-top: 16px; background: #ffffff; border: 1px solid #216ec329; border-radius: 16px; padding: 25px; box-shadow: 0px 4px 36px 0px #00000014; } .box .testimonial_content { color: #0f1412; font-size: 16px; font-weight: 500; line-height: 24.76px; align-items: center; padding: 0px 0px 15px 0px; } .box .testimonial_data { border-top: 1px solid #1256a029; padding-top: 17px; display: flex; justify-content: space-between; align-items: center; } .testimonial_data .info { display: flex; justify-content: flex-start; gap: 15px; align-items: center; } .testimonial_data .info img { width: 56px; height: 56px; } .testimonial_data .info p { font-weight: 700; line-height: 21.78px; font-size: 16px; color: #333333; margin: 0px 0px 3px 0px !important; } .testimonial_data .info div img { height: auto; width: 110px; margin-top: 4px; } .testimonial button, .master button { color: #ffffff; background: linear-gradient(90deg, #ffa400 0%, #ff6e00 100%); height: 56px; margin-top: 16px; width: fit-content; border: none; border-radius: 4px; padding: 12px 30px; box-shadow: 0px 8px 18px -10px #7732001f; } .master button { padding: 14px 32px !important; } /* master */ .master { padding: 45px 15px; background-image: url('https://landing.investing.com/mobile_html/prod//web-landing/Challenge/assets/img/master_bg.webp'); background-size: cover; } html[lang='sa'] .master { background-image: url('https://landing.investing.com/mobile_html/prod//web-landing/Challenge/assets/img/master_bg_ar.webp'); } .master .row { width: 46%; flex-direction: column; gap: 20px; align-items: baseline; } html[lang='sa'] .master .row { align-items: flex-start; } .master .badge { display: flex; gap: 10px; align-items: center; justify-content: center; background: #ffa8021a; border: 1px solid #ff7901; padding: 8px 16px 8px 12px; backdrop-filter: blur(15px); border-radius: 100px; } .master .badge span { font-weight: 700; font-style: italic; font-size: 12px; background: linear-gradient(90deg, #ffa901, #ff7901); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .master p { color: #ffffff; font-weight: 700; font-size: 20px; line-height: 150%; } .master .description2, .description1 { font-weight: 400; font-size: 18px; line-height: 150%; color: #ffffff; } .master .description2 { opacity: 0.7; } /* objec section */ .objc { background: var(--background-color); padding: 100px 0px; } .objc .container { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; } .objc .row { gap: 48px; justify-content: space-between; width: 100%; align-items: center; border: 1px solid #1256a029; background: #ffffff; width: 100%; margin-top: 16px; border-radius: 16px; padding: 60px 50px 60px 80px; } .objc_left { display: flex; flex-direction: column; gap: 20px; } .objc_left .tri_list_info { padding: 0px; display: block; } .tri_list_info p { color: #0f1412; font-weight: 600; font-size: 28px; line-height: 36px; margin-bottom: 24px; } .trading_box { box-shadow: 0px 2px 20px 0px #0000000a; background: #ffffff; padding: 16px; border-radius: 12px; display: flex; align-items: baseline; gap: 10px; border: 1px solid #1256a029; } .trading_box:last-of-type { margin-bottom: 24px; margin-top: 8px; } .objc_left .tri_list_info .no { width: 40px; height: 40px; background: linear-gradient(360deg, #ff7a01 0%, #ffa802 100%); } .trading_box div { align-self: end; padding: 5px 0px; } .trading_box p { margin: 0px 0px 3px 0px; color: #f2a93b !important; width: 114px; font-size: 18px !important; line-height: 19.6px !important; } .trading_box span { color: #0f1412; font-weight: 400; font-size: 16px; line-height: 24px; } .tri_list_info span { color: #6b6b6b; font-size: 18px; font-weight: 400; line-height: 27px; } .objc_right { flex-direction: column; justify-content: flex-start; gap: 1px; height: 82%; border-radius: 10px; display: flex; align-items: center; position: relative; } .objc_right span { display: none; } html[lang='th'] .objc_right span { display: block; } #ani_trading_container { width: 485px; } /* portal section */ .portal { background: #f4f5fa; padding: 100px 10%; } .portal .row { flex-direction: column; gap: 30px; } .portal .description { color: #696969; font-size: 18px; font-weight: 400; line-height: 21.78px; text-align: center; } .tri_box_content { width: 1200px; display: flex; justify-content: space-between; gap: 26px; align-items: center; } .tri_box { width: 100%; position: relative; height: 200px; background: #ffffff; border: 1px solid #ffffff1a; padding: 23px; border-radius: 16px; box-shadow: 0px 1.7px 13.63px 0px #0000000f; } html[lang='sa'] .tri_box { direction: ltr; } .tri_box p { margin: 0px 0px 15px 0px; color: #000000; width: 146px; font-weight: 600; font-size: 16px; line-height: 19.6px; } html[lang='sa'] .tri_box p { direction: rtl; width: 130px; } .tri_box_common { position: absolute; z-index: 10; background: #ffffff; box-shadow: 0px 2.02px 18.2px 0px #00000014; padding: 6.28px 11.6px 7.44px 11.6px; border-radius: 8.9px; display: flex; } html[lang='sa'] .tri_box_common { direction: rtl; } .tri_box_1 { gap: 1px; justify-content: center; bottom: 13px; align-items: start; flex-direction: column; } .tri_box_1 .top { border-bottom: 1px solid #e9e9e9; width: 100%; padding-bottom: 2px; } .tri_box_1 .top .text_1 { font-size: 10px; font-weight: 500; line-height: 15px; text-align: left; text-underline-position: from-font; text-decoration-skip-ink: none; font-size: 10px; color: #0f1412; font-weight: 500; } .tri_box_1 .top .text_2 { background: #a5a5a51a; padding: 2.22px 4.45px; font-size: 6px; font-weight: 600; border-radius: 1160px; } .tri_box_1 .bottom { display: flex; justify-content: center; align-items: center; gap: 18px; line-height: 18.75px; } .tri_box_1 .bottom .cell { display: flex; flex-direction: column; } .tri_box_1 .bottom span { line-height: 18px; } .tri_box_1 .bottom .cell .first { font-weight: 400; color: #888888; font-size: 8px; } .tri_box_1 .bottom .cell .cell_content { font-size: 9px; color: #0f1412; font-weight: 500; } .tri_box_1 .bottom .cell .cell_tag { border-radius: 94px; color: #347ae0; font-size: 9px; font-weight: 500; background: #42b0ff1f; box-shadow: 0px 0px 34.46px 0px #42a0ec38; padding: 0.16px 6.96px; } .tri_box .screen_2 { width: 208px; position: absolute; bottom: 0px; right: 0px; } .tri_box_2 { width: 177px; justify-content: space-between; bottom: 30px; align-items: center; } .tri_box_2_left { display: flex; justify-content: center; align-items: center; gap: 5px; } .tri_box_2_left div { display: flex; justify-content: center; flex-direction: column; gap: 2px; } .tri_box_2_left div .text_1 { color: #0f1412; font-size: 8px; font-weight: 600; line-height: 11.2px; text-align: left; } .tri_box_2_left div .text_2 { color: #585757; font-size: 8px; font-weight: 500; line-height: 11.2px; text-align: left; } .tri_box_2_right { display: flex; flex-direction: column; gap: 2px; align-items: end; } .tri_box_2_right .text_1 { color: #0f1412; font-size: 8px; font-weight: 600; line-height: 11.2px; text-align: left; } .tri_box_2_right .text_2 { color: #4bb324; font-size: 8px; font-weight: 500; line-height: 11.2px; text-align: left; } .tri_box .screen_2 { width: 208px; position: absolute; bottom: 0px; right: 0px; } .tri_box_3 { width: 177px; gap: 4px; bottom: 30px; align-items: center; } .tri_box_3_left { display: flex; justify-content: center; align-items: center; gap: 5px; } .tri_box_3_right { display: flex; flex-direction: column; gap: 2px; } .tri_box_3_right .text_1 { color: #585757; font-size: 8.34px; font-weight: 600; line-height: 11.2px; text-align: left; } .tri_box_3_right .text_2 { color: #000000; font-size: 15px; font-weight: 600; line-height: 18px; text-align: left; } .tri_box .screen_2 { width: 208px; position: absolute; bottom: 0px; right: 0px; } /* plans section */ .plans { padding: 100px 0px; background-size: cover; position: relative; background-image: url('https://landing.investing.com/mobile_html/prod//web-landing/Challenge/assets/img/challenge_desktop_bottom_bg_without.svg'); } .plans .row { align-items: center; flex-direction: column; gap: 56px; } .header-BF-banner { text-align: center; padding: 0px 30px; } .tick-container { display: none; } .plans h1 { background: var(--NYs_2025_Headline, linear-gradient(129deg, #cc8621 11.71%, #fdda7b 31.7%, #ffecd3 46.3%, #fdda7b 62.72%, #dea451 75.51%, #ffd383 98.22%, #903d07 114.61%)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-align: center; font-size: 60px; font-weight: 700; } .text-main-content { padding: 10px; text-align: left; color: rgb(255, 255, 255); font-size: 18px; font-weight: 400; text-transform: uppercase; padding-bottom: 3px; align-self: center; } .discount_off { color: rgb(255, 255, 255); font-size: 68px; font-weight: bold; text-align: center; line-height: 38px; } .bottom_price_boxes { display: flex; width: 100%; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 24px; } .challenge_plan { border: 1px solid #ffffff14; backdrop-filter: blur(35px); height: 100%; display: flex; justify-content: space-between; font-size: 24px; color: #c7cacd; line-height: 20px; width: 26%; cursor: pointer; flex-direction: column; background-color: #ffffff0a; align-items: center; z-index: 9000; gap: 24px; position: relative; border-radius: 12px; padding-left: 20px; padding: 20px; } .challenge_plan.active { border: 1px solid #ff7a01; background-color: #171f28 !important; transition: border-color 0.5s ease, color 0.5s ease, background-color 0.3s ease; } .challenge_plan.active .getStarted { background: linear-gradient(90deg, #ffa802 0%, #ff7a01 100%); border: unset; } .challenge_plan.active .pricing-subtitle { color: #ffffff; } .discount_block { margin-top: -10px; } .challenge_plan__top { display: flex; flex-direction: column; width: 100%; gap: 15px; justify-content: center; } .challenge_plan__top--size { align-items: baseline; display: flex; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid #ffffff1f; } .challenge_plan__top--size .price { font-size: 28px; font-weight: 500; line-height: 33.6px; color: #fff; } .challenge_plan__top--size .onetime_fee { font-size: 16px; } .devide-line { border-bottom: 1px solid #ffffff1f; } .challenge_plan__top--account { display: flex; justify-content: space-between; color: #d4d7d9; font-weight: 500; font-size: 16px; } .challenge_plan__top--account .subPrice { display: flex; gap: 12px; align-items: center; justify-content: center; } .pricing-subtitle .subPrice { display: flex; gap: 12px; align-items: center; justify-content: center; } .challenge_plan .getStarted { font-weight: 700; text-align: center; font-size: 16px; color: #ffffff; width: 100%; height: 47px; cursor: pointer; z-index: 9000; border-radius: 4px; padding: 15px; box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15); border-radius: 4px; background: transparent; border: 1px solid #d4d7d9; } .view_more { color: #d4d7d9; font-weight: 500; font-size: 16px; line-height: 24px; text-decoration: unset; cursor: pointer; display: flex; align-items: center; gap: 5px; justify-content: center; } .view_more span { display: none; } .visible_block { display: block !important; max-height: 700px; } .card-content { display: none; margin: auto; width: 100%; border-top: 1px solid #ffffff14; padding-top: 20px; transition: max-height 0.5s ease-out; } .phase_group { display: flex; flex-direction: column; gap: 13px; } .pricing-subtitle { display: flex; justify-content: space-between; color: #d4d7d9; font-weight: 500; font-size: 16px; } .pricing-subtitle .subPrice { display: flex; gap: 12px; align-items: center; justify-content: center; } .phase_select { display: flex; justify-content: center; align-items: center; gap: 10px; border: 1px solid #404a53; border-radius: 10px; padding: 6px; margin: 20px 0px; } .phase_select > button.active { color: #f2a93b; background: #f2a93b1a; } .phase_select > button { width: 29vw; color: #d4d7d9; background: transparent; font-size: 14px; padding: 6px 8px; border: none; border-radius: 8px; font-weight: 600; } .phase_group { display: flex; flex-direction: column; gap: 13px; } .most-popular { position: absolute; top: -14px; left: -1px; background-color: #313b44; border-radius: 8px 16px 16px 0px; padding: 7px 12px; color: #bababa; font-weight: 700; font-size: 11px; display: flex; gap: 3px; } .active .most-popular, #plan_3 .most-popular { background: linear-gradient(90deg, #ffa802 0%, #ff7a01 100%) !important; color: #ffffff !important; } .plans .decoration_left { position: absolute; top: 0; left: 0; } .plans .decoration_right { position: absolute; top: 0; right: 0; } .footer { justify-content: center; padding-top: 100px; padding-bottom: 100px; padding-left: 20px; position: relative; padding-right: 20px; min-height: 10px; background-size: cover; background: url('https://landing.investing.com/mobile_html/prod//web-landing/Challenge/assets/img/challenge_footer_bg.svg'); background-position: 0px 0px; } .footer .row { align-items: baseline; } .footer-left { width: 45%; gap: 16px; display: flex; flex-direction: column; } .footer-logo { align-items: center; display: flex; width: 100%; justify-content: space-between; gap: 10px; } .footer-logo div { align-self: flex-start; color: black; display: block; } .footer-logo div img { width: 182px; } .footer-left p.text1 { margin-top: 24px; font-weight: 500; font-size: 14px; line-height: 21px; color: #ffffff; } .footer-left p.text2 { font-weight: 400; font-size: 12px; line-height: 18px; color: #898989; } .footer-links { margin-top: 24px; display: flex; gap: 28px; } .footer-links a { text-transform: capitalize; text-decoration: unset; font-weight: 400; font-size: 14px; line-height: 19.6px; color: #bdbfc2; } .footer-right { width: 30%; gap: 32px; display: flex; flex-direction: column; } .footer-right p { font-weight: 500; font-size: 16px; line-height: 24px; } .footer-right p.text3 { color: #898989; } .footer-right p.text4 { color: #ffffff; } .footer-right p.text5 { color: #bdbfc2; } .footer-right .footer-logo { display: none; } /* The Modal (background) */ .modal { display: none; position: fixed; z-index: 10000; left: 0; top: 0; align-items: center; justify-content: center; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.7); } .modal-title { font-size: 18px; font-weight: 500; line-height: 25.2px; text-align: left; text-decoration-skip-ink: none; color: #ffffff; } #close_button { cursor: pointer; width: 35px; height: 35px; border-radius: 9999px; background-color: #000000; position: absolute; right: -17px; top: 5px; display: flex; justify-content: center; } #close_button img { width: 20px; } #vimeo-popup { border: none; width: 600px; height: 400px; } /* Modal Content */ .modal-content { margin: auto; width: 600px; transition: max-height 0.5s ease-out; } #upgradeBS .modal-content { z-index: inherit; width: 560px; position: relative; background-color: #fff; padding: 48px 40px; border-radius: 12px; box-shadow: 0px 8px 24px 0px #1617171f; } .upgradeBS-section { display: flex; gap: 12px; flex-direction: column; justify-content: center; align-items: center; } .upgradeBS-section p { margin: 0; } .best-value { width: 100%; display: flex; height: 38px; align-items: center; justify-content: center; text-align: center; gap: 5px; position: absolute; color: #ff8008; top: -29px; background: var(--orange-210, #ffa8021a); font-weight: 500; padding: 6px 2px 16px 2px; border-top-right-radius: 10px; border-top-left-radius: 10px; font-size: 13px; z-index: -1; } .upgradeBS-section .title-lg { font-weight: 500; font-size: 22px; line-height: 140%; color: #000; } .upgradeBS-section .title-md { font-size: 18px; font-weight: 500; line-height: 140%; background: linear-gradient(90deg, #ffa901, #ff7901); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .upgradeBS-section .box-group { display: flex; justify-content: center; gap: 13px; margin-top: 30px; } html[dir='rtl'] .upgradeBS-section .box-group img { transform: rotate(180deg); } .upgradeBS-section .box-group-skel { border: 1px solid var(--grey-blue, #1256a029); border-radius: 10px; padding: 20px; background: #f4f5fa; display: flex; position: relative; flex-direction: column; align-items: center; justify-content: center; width: 218px; } .bg-white { background: var(--background-color) !important; } .upgradeBS-section .box-group-skel .box-group-skel-title { font-weight: 500; font-size: 14px; line-height: 150%; letter-spacing: 0%; text-align: center; color: #898989; } .upgradeBS-section .box-group-skel .box-group-skel-size { font-weight: 500; font-size: 18px; line-height: 140%; width: 100%; border-bottom: 1px solid var(--black-10, #0000001a); letter-spacing: 0%; text-align: center; padding-bottom: 13px; color: #000; } .font-size-11 { font-size: 11px !important; } .text-size-16 { font-size: 16px !important; } .font-size-18 { font-size: 18px !important; } .decoration-text { text-decoration: line-through; color: var(--customgrey3, #898989); font-size: 11px; } .gradient-price { display: flex; gap: 5px; margin-top: 17px; align-items: baseline; } .upgradeBS-section .grandient-text { background: linear-gradient(90deg, #ffa901, #ff7901); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .upgradeBS-section .box-group-skel .box-group-skel-span { font-weight: 500; font-size: 11px; line-height: 100%; letter-spacing: 0%; text-align: center; color: #898989; } .limited-box { position: relative; width: 100%; background: var(--orange-210, #ffa8021a); border: 2px solid #ff7a01; padding: 20px 24px 16px 20px; border-radius: 12px; margin-top: 25px; } .limited-badge { position: absolute; left: -2px; top: -14px; padding: 4px 12px; border-radius: 6px 6px 6px 0px; background: linear-gradient(90deg, #ffa300 0%, #ff7000 100%); color: #fff; font-size: 12px; font-weight: 500; } .limited-box-span-1 { border-bottom: 1px solid var(--black-10, #0000001a); padding-bottom: 15px; display: flex; align-items: center; justify-content: space-between; } .limited-box-span-1 div { display: flex; gap: 10px; justify-content: center; align-items: center; } .limited-box-span-1 div span { font-weight: 500; font-size: 16px; line-height: 150%; letter-spacing: 0%; } .limited-box-span-2 { padding-top: 15px; display: flex; align-items: center; justify-content: space-between; } .grayColor { color: #898989; } .divide-line { margin: 20px 0px; width: 100%; height: 1px; background: #0000001a; } .btn-group { width: 100%; display: flex; justify-content: space-between; gap: 10px; } .btn-group button { width: 232px; border: none; border-radius: 4px; padding: 14px 32px; font-size: 16px; font-weight: 700; } .btn-group .btn-1 { background: var(--black-5, #0000000d); color: #000; } .btn-group .btn-2 { background: var(--darkblue1, #1a232c); color: #fff; } #upgrade_close_button { display: none; } html[lang='sa'] .banner .banner-left .main-content { margin-top: 40px; } @media screen and (max-width: 1300px) { .container { padding: 0px 16px; } .wrapper { overflow: hidden; } } @media (max-width: 768px) { h1 { line-height: 34.5px; } .desktop { display: none !important; } .mobile { display: block; } .trading_info.mobile { visibility: visible; } .btn { width: 100% !important; height: 56px; } .banner, html[lang='sa'] .banner { background: url('https://landing.investing.com/mobile_html/prod//web-landing/Challenge/assets/img/challenge_hero.svg') no-repeat center top; padding: 0px 0px 40px 0px; background-size: cover; } .banner .row { flex-direction: column; } .banner .banner-right { justify-content: center; width: 100%; } .banner-right .box_info { display: none; } .banner-right .review_info { margin-top: 13px; position: unset; background: unset; } .header img { width: 140px; } .challenge_tag { margin-top: 0px; padding: 8px 12px; flex-direction: column; backdrop-filter: blur(15px); align-self: auto; background: unset; gap: 13px; border: unset; } .challenge_tag .for_mobile { margin-top: 15px; border: 1px solid #ffe8ca4d; background: #ffffff1a; padding: 8px 12px; border-radius: 100px; backdrop-filter: blur(15px); margin-right: 0px; } .challenge_tag .for_mobile .tag_title { margin-right: 0px; font-weight: 700; font-style: italic; font-size: 14px; line-height: 14px; background: linear-gradient(90deg, #ffe8ca 0%, #de9a22 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .challenge_subtag { border-left: unset; display: flex; justify-content: center; gap: 4px; align-items: center; font-style: italic; color: #ffe8ca; font-weight: 700; width: 100%; padding-left: unset; } .banner .banner-left .main-content .title { font-size: 37px; text-align: center; line-height: 48px; max-width: 320px; } .banner .banner-left .main-content { width: 100%; align-items: center; gap: 13px; } .banner .banner-left { width: 100%; } .dark_bg { width: 100%; } .dark_bg button { width: 87vw; } .edu { margin-top: 0px; margin-left: 0px; width: 89vw !important; } html[lang='sa'] .edu { margin-right: 0px; } .initial .row { gap: 40px; text-align: center; flex-direction: column; } .initial { background: var(--background-color); padding: 48px 16px; } .initial_left { align-items: center; width: 100%; } .initial_left div { width: 100%; } .initial_left h1, .initial_left h1 span { font-size: 28px; line-height: 34.5px; } .initial_left h1 { width: 330px; } .initial_left div span { font-size: 16px; } .initial_right { box-shadow: unset; } #ani_column_graph_container { width: 100%; } .option-group { margin-top: 15px; } .initial_right .btn { margin-top: 40px; } .education { background-size: auto !important; background: #fff url('https://landing.investing.com/mobile_html/prod//web-landing/Challenge/assets/img/stripe_3.png') left top/1152px no-repeat; padding: 40px 16px; } .title-large { line-height: 34.5px; font-size: 28px; } .education .row { gap: 30px; margin-top: 25px; flex-direction: column; } .education_left { padding-right: 0px; } .education_right { width: 100%; } .video-container { height: 220px; } .tradding { padding: 48px 16px; } .tradding .row { gap: 30px; flex-direction: column; } .tradding_left { gap: 10px; text-align: center; } .tradding_left h1 { line-height: 34.5px; font-size: 32px; } .master h1 { line-height: 34.5px; font-size: 34px; } .tradding_left p { padding-right: 0px; } html[lang='sa'] .tradding_left p { padding-left: 0px; } html[lang='sa'] .master { background-position: right; } html[lang='sa'] .master .row { align-items: center; } .tradding_right { justify-content: center; align-items: center; } .challenge_circle .label .label_title { font-size: 16px; } .challenge_circle .label .label_img { width: 26px; height: 23px; } .challenge_size_select > button { width: 28vw; font-size: 14px; } html[lang='sa'] .challenge_size_select > button { font-size: 13px; } html[lang='sa'] .challenge_size_select > button > span { font-size: 11px; } .challenge_circle .power_title { font-size: 16px; } .challenge_circle img { width: 330px; } .position_1 { width: 74px; height: 74px; left: 8px; bottom: 16px; } html[lang='sa'] .position_1 { left: unset; right: 8px; } .position_2 { right: 15px; bottom: 22px; height: 196px; width: 196px; } html[lang='sa'] .position_2 { right: unset; left: 15px; } .position_3 { width: 68px; height: 68px; left: 11px; bottom: 19px; } html[lang='sa'] .position_3 { left: unset; right: 11px; } .position_4 { height: 206px; width: 206px; right: 10px; bottom: 16px; } html[lang='sa'] .position_4 { right: unset; left: 10px; } .position_5 { height: 62px; width: 62px; left: 13px; bottom: 22px; } html[lang='sa'] .position_5 { left: unset; right: 13px; } .position_6 { height: 216px; width: 216px; right: 6px; bottom: 12px; } html[lang='sa'] .position_6 { left: 6px; right: unset; } .tradding_right .btn { margin-top: 20px; } .testimonial { padding: 40px 0px; } .testimonial .title-large { width: 100%; } .testimonial__wrapper { width: 100%; } .carousel { flex-direction: column; } .box { margin-top: 0px; } .objc { padding: 40px 16px; background: #fff url('https://landing.investing.com/mobile_html/prod//web-landing/Challenge/assets/img/stripe_3.png') left top/1152px no-repeat; background-size: auto; } .objc .row { border: none; flex-direction: column; padding: 0px; margin-top: 0px; gap: 20px; } .objc_left { order: 1; } .objc .container { gap: 20px; } #ani_trading_container { width: 100%; } .trading_box { border: none; box-shadow: unset; } .tri_list_info p { color: #585757; font-weight: 600; font-size: 16px; margin: 0px; line-height: 21.75px; } .tri_list_info ul { margin: 15px 0px; padding-left: 21px; } .tri_list_info ul li { color: #f2a93b; font-size: 16px; font-weight: 600; line-height: 24px; } .tri_list_info ul li span { color: #585757; font-weight: 400; } .portal { padding: 50px 16px; } .portal .row { gap: 10px; } .tri_box_content { gap: 22px; margin-top: 30px; width: 100%; flex-direction: column; } .tri_box p, html[lang='sa'] .tri_box p { width: 98px; font-size: 13px; } .plans .decoration_left, .plans .decoration_right { display: none; } .plans { background-size: cover !important; background: url('https://landing.investing.com/mobile_html/prod//web-landing/Challenge/assets/img/challenge_bottom_bg.svg'); padding: 50px 0px; } .plans .row { gap: 20px; } .plans h1 { font-size: 38px; line-height: 120%; } .discount_off { font-size: 42px; } .bottom_price_boxes { flex-direction: column; } .challenge_plan { width: 100%; } .price { padding: 0px; } .challenge_choose_text { color: #ffffff; font-size: 16px; align-self: flex-start; font-weight: 600; line-height: 24px; text-align: center; text-decoration-skip-ink: none; } .discount_block { text-align: center; margin-top: 15px; } .text-main-content { font-size: 14px; text-align: center; } .plans button { font-weight: 700; font-size: 17px; color: #000000; border-style: none; border-width: 0px; height: 100%; width: 100%; z-index: 9000; border-radius: 4px; padding: 15px; box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15); background: linear-gradient(90deg, #ffe8ca 0%, #de9a22 100%); } .tick-container { display: none; position: absolute; top: -1px; right: -1px; width: 0; height: 0; border-style: solid; border-width: 0 30px 30px 0; border-color: transparent #ff7a01 transparent transparent; border-radius: 0 8px 0 0; } .show { display: block; } .tick-container::before { content: url('https://landing.investing.com/mobile_html/prod//web-landing/Challenge/assets/img/checkicon.svg'); position: absolute; top: 0px; right: -28px; color: white; font-size: 16px; } .plans .purchases { color: #d4d7d9; font-weight: 500; font-size: 16px; line-height: 24px; margin: 15px; text-decoration: unset; cursor: pointer; display: flex; align-items: center; gap: 5px; justify-content: center; } #vimeo .modal-content { width: 92%; } #vimeo-popup { width: 100%; height: 258px; } #close_button { top: 1px; } #tradingBS .modal-content { display: flex; flex-direction: column; gap: 20px; animation: slideUp 0.5s ease-out; background: linear-gradient(180deg, #1a232c 0%, #25323c 100%); margin: auto; border: 1px solid #404a53; padding: 30px 20px; width: 100%; position: absolute; bottom: 0; border-top-left-radius: 24px; border-top-right-radius: 24px; } .vimeo-content { margin: auto; width: 92%; transition: max-height 0.5s ease-out; } #tradingBS .modal-content p { margin: 0; font-size: 16px; font-weight: 400; line-height: 24px; color: #aaaeb2; } #priceBS .modal-content { background: linear-gradient(180deg, #1a232c 0%, #25323c 100%); margin: auto; border: 1px solid #404a53; padding: 30px 20px; width: 100%; position: absolute; bottom: 0; border-top-left-radius: 24px; border-top-right-radius: 24px; animation: slideUp 0.5s ease-out; } #upgrade_close_button { cursor: pointer; width: 35px; height: 24px; border-radius: 9999px; position: absolute; right: 6px; top: 19px; display: flex; justify-content: center; } .modal-content p { font-size: 12px; font-weight: 600; line-height: 16.8px; color: #aaaeb2; margin: 15px 0px; } #priceBS .modal_button { margin-top: 20px; } #upgradeBS .modal-content { z-index: inherit; width: 100%; background-color: #fff; padding: 30px 15px; border-radius: 12px; box-shadow: 0px 8px 24px 0px #1617171f; background: #ffffff; margin: auto; border: 1px solid #404a53; position: absolute; bottom: 0; animation: slideUp 0.5s ease-out; } .upgradeBS-section p { margin: 0; } .upgradeBS-section .box-group-skel { width: fit-content; } .master { padding: 40px 24px !important; } .master .row { align-items: center; justify-content: center; text-align: center; width: 100%; } .footer { padding-top: 50px; padding-bottom: 50px; } .footer .row { flex-direction: column; } .footer-left, .footer-right { width: 100%; } .footer-left { margin-top: 40px; order: 1; } .footer-right .footer-logo { display: block !important; } } @keyframes slideUp { 0% { transform: translateY(100%); } to { transform: translateY(0); } }