style.css

/*common css*/ body, h1, h2, h3, h4, h5, h6, ul ,p {margin: 0;padding: 0;} li{list-style: none;} a{text-decoration: none !important;} body{font-family: 'Comfortaa', cursive;} /*navigation css*/ .header_wraper { position: fixed; top: 0; left: 0; width: 100%; background: transparent; padding: 1rem 0; z-index: 99; padding-bottom: 12px; } .logo_area { display: flex; } .logo_img { flex-basis: 18%; } .logo_text { flex-basis: 70%; margin-left: 5px; color: #fffffff0; text-transform: uppercase; font-weight: 500; font-size: 19px; margin-top: 7px; } .logo_img img { width: 100%; } .logo_text span { font-weight: 700; color: white; } .navigation { display: flex; } .nav_links { flex-basis: 90%; text-align: right; margin-top: 8px; } .nav_links > ul > li { display: inline-block; margin-left: 25px; position: relative; padding-bottom: 20px; } .nav_links ul li a { text-transform: capitalize; color: white; font-weight: 600; font-size: 15px; transition: color 0.3s; } .sign_in_btn { flex-basis: 11%; text-align: center; background-image: linear-gradient(40deg,#FF4137 20%,#FDC800 51%,#FF4137 90%); background-position: left center; background-size: 200% auto; margin-left: 30px; border-radius: 50px; height: 35px; padding-top: 5px; margin-top: 3px; cursor: pointer; transition: 0.5s; box-shadow: 0 0 12px 0 #FF5F2B; } .sign_in_btn a { color: white; font-weight: 600; font-size: 15px; } .nav_links>ul>li>ul { position: absolute; text-align: left; background: white; min-width: 12rem; padding-left: 10px; top: 100%; left: 0; cursor: pointer; z-index: 111; border-radius: 7px; visibility: hidden; } .nav_links ul li ul li a { color: #000000d4; } .nav_links ul li ul li { display: block; margin: 10px 0; cursor: pointer; transition: margin-left 0.5s; } .nav_links ul li ul:after { content: ""; background: white; position: absolute; top: -8px; left: 20px; width: 15px; height: 15px; transform: rotate(45deg); border-radius: 3px 0 0 0; } .sticky_nav { background: linear-gradient(to right,#A34FFE,#5934FC); box-shadow: 0 5px 40px rgba(14,42,76,.2); } .nav_links>ul>li:hover>a { color: rgba(255,255,255,.5); } .nav_links>ul>li:hover ul { visibility: visible; } .nav_links>ul>li>ul>li:hover { margin-left: 10px; } .sign_in_btn:hover { background-position: right center; } .mobile_bar{ display: none; } /*home section*/ .home_section { background: linear-gradient(to right,#A34FFE,#5934FC); padding-top: 6rem; position: relative; padding-bottom: 10px; overflow: hidden; } .home_content { position: relative; z-index: 2; } .home_content h2 { color: white; font-size: 35px; font-weight: 700; margin-bottom: 2rem; line-height: 1.5; } .home_content h3 { color: #ffffffe8; font-weight: 400; font-size: 35px; margin-bottom: 2.3rem; } .home_content h3 span { font-weight: 700; color: white; } .progress_top { text-align: center; margin-bottom: 12px; } .progress_top ul li { display: inline-block; margin: 0 25px; color: white; text-transform: capitalize; font-weight: 500; font-size: 16px; position: relative; } .progress_top ul l { color: white; } .progress_top ul li:after { content: ""; background: white; width: 1px; height: 12px; position: absolute; top: 100%; left: 50%; } .progress.progress_bar { height: 30px; background-color: white; border-radius: 70px; border: 4px solid white; } .progress_bar .progress-bar { background: linear-gradient(to right,#FF4137,#FDC800); border-radius: 65px; } .progress_bar .w-75 { width: 66% !important; } .progress_bottom { display: flex; margin-top: 10px; } .progress_inof { flex-basis: 50%; text-align: left; padding-left: 18px; color: white; font-weight: 500; font-size: 18px; } .progress_inofr { flex-basis: 50%; text-align: right; padding-right: 18px; color: white; font-weight: 500; } .clock_area { margin-top: 3rem; } .clock.flip-clock-wrapper { margin-left: 0 !important; } .flip-clock-wrapper ul { width: 43px; height: 65px; } .flip-clock-wrapper ul li { line-height: 70px; } .flip-clock-wrapper { font-family: 'Comfortaa', cursive; } .flip-clock-wrapper ul li a div div.inn { color: black; text-shadow: 0 1px 2px white; background-color: white; border-radius: 5px; font-size: 35px; font-weight: 500; } .flip-clock-wrapper ul li a div.up::after { top: 30px; height: 1px; background-color: #00000098; } .flip-clock-divider .flip-clock-label { right: -80px; color: white; font-size: 15px; font-weight: 500; } .flip-clock-dot.top { top: 22px; } .flip-clock-dot.bottom { bottom: 48px; } .flip-clock-dot { background: white; width: 8px; height: 8px; } .purchase_btn { background-image: linear-gradient(40deg,#FF4137 20%,#FDC800 51%,#FF4137 90%); width: 45%; text-align: center; background-position: left center; background-size: 200% auto; padding: 10px 0; border-radius: 74px; box-shadow: 0 0 12px 0 #FF5F2B; margin-top: -15px; transition: 0.5s; cursor: pointer; } .purchase_btn a { color: white; text-transform: capitalize; font-weight: 700; font-size: 19px; } .home_coin { margin-top: 13px; margin-left: 15px; } .home_coin ul li { display: inline-block; margin: 0 10px; } .bg_shap { position: absolute; bottom: 15%; right: 0; width: 45%; } .bg_shap img { width: 100%; } .home_icon_bg { background: white; width: 23.25rem; height: 23.25rem; border-radius: 50%; margin-top: 7rem; margin-left: 5rem; position: relative; z-index: 2; overflow: hidden; } .home_icon_logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; width: 20.5rem; height: 20.5rem; background: radial-gradient(circle,#FDC800,#FF4137); box-shadow: -2px 3px 26px 0 #FF4137; overflow: hidden; } .home_icon_ripo { width: 100%; height: 100%; position: relative; } .crypto_icon_img_3 { animation: home_ico_img_ani 5s linear infinite; position: absolute; top: 28%; left: 17%; } #rip, #rip1, #rip2 { position: absolute; border: 1px solid white; background: rgba(255,255,255,.4); top: 50%; left: 50%; border-radius: 50%; box-shadow: 0 0 20px rgba(255,255,255,.4); animation: rip_ani 5s infinite ; animation-timing-function: linear; transform: translate(-50%, -50%); opacity: 0; overflow: hidden; } #rip { animation-delay: 1s; } #rip1 { animation-delay: 1.5s; } #rip2 { animation-delay: 2s; } .left_bottom_ripple_ani { position: absolute; left: 0; bottom: 0; margin-bottom: -80vh; margin-left: -80vh; width: 160vh; height: 160vh; } .right_top_ripple_ani { position: absolute; right: 0; top: 0; margin-top: -80vh; margin-right: -80vh; width: 160vh; height: 160vh; } .ripple1, .ripple2, .ripple3, .ripple4 { border: .5px solid #fff; background:radial-gradient(ellipse at center,rgba(182,225,235,0) 0,rgba(182,225,235,.05) 40%,rgba(182,225,235,.4) 100%); width: 100%; height: 100%; animation: left_ani 6s linear infinite; position: absolute; border-radius: 50%; opacity: 0; transform: scale(1); } .ripple1, .ripple3 { animation-delay: 0s; } .ripple2, .ripple4 { animation-delay: 3s; } @keyframes home_ico_img_ani { 0%, 100%, 20% { transform: scale(0.8); } 60%, 80% { transform: scale(1); } } @keyframes rip_ani { 0%{ margin-bottom: 0; margin-right: 0; width: 0; height: 0; opacity: 0; } 10%{ opacity: 0.5; } 30%{ opacity: 0.3; } 60%{ opacity: 0; } 100%{ margin-bottom: -400px; margin-right: -400px; width: 700px; height: 700px; opacity: 0; } } @keyframes left_ani { 0%{ transform: scale(0.1); opacity: 0; } 33%{ transform: scale(0.4); opacity: 0.8; } 100%{ transform: scale(1); opacity: 0; } } .purchase_btn:hover { background-position: right center; } /*exchange section*/ .exchange_section { padding: 31px 0; } .exchange_coontent { display: flex; } .single_exchange { flex-basis: 20%; text-align: center; } .single_exchange img { margin: 5px 0; } .single_exchange p { color: #000000bf; font-size: 16px; font-weight: 500; } .single_exchange h2 { color: #000000c4; font-weight: 600; margin-bottom: 11px; } .exchange_border { position: relative; } .exchange_border::before { content: ""; background: #00000063; position: absolute; width: 1px; height: 4.3rem; top: 10px; left: 0; } /*separator css*/ .separator { margin: 1rem 0; } .separator span { background: #EEECF4; height: 7px; display: inline-block; border-radius: 1rem; } .sepa_learge { width: 70px; } .sepa_medium { width: 30px; } .sepa_small { width: 7px; } /*heading css*/ .crypto_heading { text-align: center; margin-bottom: 8rem; } .crypto_heading h6 { text-transform: capitalize; font-weight: 600; font-size: 18px; margin-bottom: 2rem; } .crypto_heading h3 { text-transform: capitalize; font-weight: 700; } .crypto_heading p { width: 60%; margin: 0 auto; color: #000000ba; } /*about section*/ .about_section { padding: 6rem 0; } .about_content { margin-top: 25px; } .about_content h5 { margin-bottom: 2rem; font-size: 25px; font-weight: 600; color: #000000ba; } .about_content h6 { margin-bottom: 1rem; font-size: 19px; color: #000000d4; font-weight: 400; } .about_content p { margin: 16px 0; color: #000000b8; font-size: 16px; } .about_img { position: relative; } .btn.focus, .btn:focus { outline: 0; box-shadow: none; } .btn_primary_cryto { background: linear-gradient(40deg,#FF4137 20%,#FDC800 51%,#FF4137 90%); border: none; border-radius: 50%; width: 65px; height: 65px; font-size: 32px; outline: none; text-align: center; padding-top: 13px; padding-left: 16px; background-size: 200% auto; background-position: left center; position: absolute; bottom: 17%; right: 47.5%; box-shadow: 0 0 12px 0 #FF5F2B; color: white; transition: 0.5s; } .about_video_text { position: absolute; text-transform: capitalize; font-size: 15px; font-weight: 500; color: #000000bf; bottom: 10%; right: 44%; } .modal-dialog { max-width: 970px; } .crypto_m_body { padding: 0 !important; } .close.video_crypto_close { position: absolute; top: -30px; right: 0; color: white; font-size: 2rem; opacity: 1; outline: none !important; } .close.video_crypto_close:hover { color: white; opacity: 1; } .btn.btn_primary_cryto:hover { background-position: right center; color: white; } /*solutions section css*/ .solutions_section { padding: 6rem 0; } .solutions_content { margin-top: 2rem; } .solutions_content h3 { text-transform: capitalize; font-weight: 500; font-size: 23px; } .solutions_content p { margin: 20px 0; color: #000000bd; font-weight: 400; } .probelem_sec { margin-bottom: 20px; } .solutions_img { width: 76%; text-align: right; } /*whitepaper css*/ .whitepaper_section { padding: 6rem 0; } .whitepaper_content h5 { text-transform: capitalize; font-weight: 600; } .whitepaper_content p { margin: 1.5rem 0; color: #000000c2; font-weight: 500; } .whitepaper_download { display: flex; margin-top: 2rem; } .singe_white_down { flex-basis: 25%; text-align: center; margin-top: 1rem; } .singe_white_down a img { border: 6px solid white; border-radius: 50%; box-shadow: 0 0 20px 0 rgba(103,103,103,.5); margin-bottom: 10px; } .downl_text { color: #000000f2; } .down_icon { color: #5934FC; } /*roadmap section*/ .roadmap_section { padding: 6rem 0; } .single_road_map, .single_road_map_middle { border-top: 4px solid #683AE4; padding-top: 3rem; text-align: center; margin-top: 2rem; } .single_road_map::before { content: ""; width: 25px; height: 25px; position: absolute; background: #683AE4; top: 21px; border-radius: 50%; margin-left: -17.5px; } .single_road_map_middle::before { content: ""; width: 25px; height: 25px; position: absolute; background: linear-gradient(45deg,#FF4137,#FDC800); top: 21px; border-radius: 50%; margin-left: -17.5px; box-shadow: 0 0 10px 0 #FF4137; } .single_roade_map_speaaicl::after { content: ""; width: 12px; height: 12px; background: white; position: absolute; top: 27.3px; margin-left: -10.6px; border-radius: 50%; } .single_raod_map_icon::after { content: "\e64c"; font-family: themify; position: absolute; top: 23px; margin-left: -12px; color: white; font-size: 14px; } .single_road_map h6, .single_road_map_middle h6 { text-transform: capitalize; font-size: 16px; color: #000000f0; font-weight: 600; margin-bottom: 16px; } .single_road_map p, .single_road_map_middle p { color: #000000c2; font-size: 14px; font-weight: 500; } .map_middle_content { background: white; margin-top: -16px; border-radius: 6px; } .map_middle_info { background: linear-gradient(45deg,#A34FFE,#5934FC); padding: 18px 0; border-radius: 6px 6px 0 0; } .map_middle_info h6 { color: white; font-weight: 600; } .map_middle_info p { color: white; font-weight: 500; } .map_midd_live { background: linear-gradient(45deg,#FF4137,#FDC800); padding: 8px 0; border-radius: 0 0 6px 6px; } .map_midd_live p { color: white; text-transform: capitalize; font-size: 16px; font-weight: 600; } .map_middle_content::before { content: ""; width: 20px; height: 20px; position: absolute; background: linear-gradient(45deg,#A34FFE,#5934FC); top: 60px; transform: rotate(45deg); z-index: -1; margin-left: -14px; border-radius: 1px 0 0 0; } .slick-prev { background: linear-gradient(45deg,#FF4137,#FDC800); border: navajowhite; padding: 12px; font-size: 15px; position: absolute; top: 6%; left: -32px; z-index: 9; border-radius: 50%; color: white; outline: none; } .slick-next { background: linear-gradient(45deg,#FF4137,#FDC800); position: absolute; top: 6%; right: -32px; padding: 12px; font-size: 15px; color: white; border: none; border-radius: 50%; z-index: 9; outline: none; } /*distribution section css*/ .distribution_section { padding: 6rem 0; } .distribution_content h5 { text-transform: capitalize; font-weight: 600; font-size: 20px; color: #000000db; } .distribution_content p { margin: 1.5rem 0; color: #000000e3; font-weight: 400; } .distribution_content p span { font-weight: 700; } /*team Section css*/ .team_section { padding: 6rem 0; } .team_counting { margin-top: 4rem; } .single_counting { display: inline-block; width: 25%; text-align: center; } .single_counting p { color: #000000bf; } .team_content { display: flex; margin-bottom: 3rem; } .team_img { flex-basis: 50%; } .team_profile { flex-basis: 50%; } .team_profile_img img { width: 100%; border-radius: 50%; border: 6px solid white; } .team_img button { background: transparent; border: none; outline: none !important; padding: 0; width: 90%; } .team_profile_img { background: linear-gradient(45deg,#A34FFE,#5934FC); border-radius: 50%; padding: 8px; box-shadow: 0 0 12px 0 #A34FFE; position: relative; transition: 0.2s; } .team_profile_img::before { content: ""; background: linear-gradient(to top,#A34FFE,#5934FC); height: 215px; position: absolute; transform: rotate(45deg); left: 50%; top: -31px; z-index: -1; width: 3.5px; transition: 0.5s; } .team_profile { margin-top: 25px; } .name { text-transform: capitalize; font-weight: 700; font-size: 20px; } .role { color: #000000e0; font-weight: 400; font-size: 16px; margin-bottom: 20px; } .profile_social a { margin-right: 10px; font-size: 18px; color: #000000ad; } .team_img_lg img { width: 100%; border-radius: 5px; } .team_body { padding: 2rem 1.5rem; } .team_modal_content h3 { font-size: 22px; font-weight: 700; color: #000000b8; margin-bottom: 18px; } .team_modal_content h5 { font-size: 18px; margin-bottom: 4px; } .team_modal_content p { margin: 20px 0px; } .progress_text { display: flex; } .progress_text p { margin: 0; flex-basis: 50%; margin-bottom: 0px; color: #000000d6; font-size: 16px; } .team_modal_content .progress { height: 6px; margin-bottom: 1.5rem !important; box-shadow: 0 7px 12px 0 rgba(29,120,255,.16); } .team_modal_content .progress .progress-bar { background: linear-gradient(to right,#FDC800,#FF4137); } .progres_bar_1 .w-75 { width: 80% !important; } .progress_bar_2 .w-75 { width: 90% !important; } .progress_bar_3 .w-75 { width: 75% !important; } .team_body .close { margin-top: -18px; font-size: 25px; outline: none !important; } .team_icon { background: linear-gradient(45deg,#A34FFE,#5934FC); position: absolute; border-radius: 50%; width: 35px; height: 35px; text-align: center; padding-top: 8px; top: 41%; right: 53%; transition: 0.2s; } .team_icon i { background: white; padding: 4px 5px 4px 5px; border-radius: 50%; color: #000000d6; } .team_modal_fade.modal { background: linear-gradient(45deg,rgba(163,79,254,.85),rgba(89,52,252,.85)); } .team_img:hover .team_profile_img{ background: linear-gradient(45deg,#FF4137,#FDC800); box-shadow: 0 0 12px 0 #FF4137; } .team_img:hover .team_profile_img::before{ background: linear-gradient(to top,#FF4137,#FDC800); transform: rotate(55deg); } .team_img:hover .team_icon { background: linear-gradient(45deg,#FF4137,#FDC800); } /*advisor section css*/ .advisor_section { padding: 6rem 0; } .profile_social img { width: 63%; margin-left: -10px; margin-top: -12px; } .role_ad { font-size: 13px; } /*faq section*/ .faq_section { padding: 6rem 0; } .nav-item { width: 20%; text-align: center; margin-bottom: 2rem; } .nav-item a { color: black; font-weight: 700; font-size: 18px; } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: #000000bd; background-color: transparent; position: relative; padding-bottom: 15px; } .nav-link.active::after { background: #7240A5; position: absolute; width: 10px; height: 4px; content: ""; bottom: 0; left: 0; width: 100%; } .btn.btn-link { width: 100%; text-align: left; display: flex; text-decoration: none; } .faq_icon_1 { text-align: center; background: linear-gradient(45deg,#FF4137,#FDC800); width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 12px 0 #FF4137; padding-top: 4px; margin-right: 15px; opacity: 1; transition: 0.5s; } .faq_icon_2 { text-align: center; background: linear-gradient(45deg,#FF4137,#FDC800); width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 12px 0 #FF4137; padding-top: 4px; margin-right: 15px; margin-left: -46px; opacity: 0; transition: 0.5s; } .faq_icon_1 i, .faq_icon_2 i { color: white; font-size: 12px; } .faq_icon_after { flex: 1; text-align: right; margin-top: 4px; } .faq_icon_after svg { color: black; transition: 0.5s; } .faq_text { color: #000000d6; font-weight: 500; } .card { margin-bottom: 1rem; } .collapsed .faq_icon_after svg { transform: rotate(180deg); } .collapsed .faq_icon_2{ opacity: 1; transform: rotate(90deg); } .collapsed .faq_icon_1{ opacity: 0; transform: rotate(90deg); } .accordion > .card:not(:first-of-type) { border-radius: 6px; } .accordion > .card > .card-header { background: white; } .accordion > .card:not(:last-of-type) { border-radius: 6px; } .accordion > .card:not(:last-of-type) { border-bottom: 1px solid #00000024; } .card-body { font-size: 14px; font-weight: 500; color: #0000009c; } /*blog section*/ .blog_section { padding: 6rem 0; } .blog_upper { display: flex; } .blog_text { flex-basis: 60%; margin-right: 5px; padding: 10px; } .blog_img { height: 16rem; right: 12%; position: absolute; top: -6%; transition: all .5s cubic-bezier(.34,1.61,.7,1); width: 80%; z-index: 1; } .blog_img img { width: 100%; border-radius: 6px; height: 100%; } .blog_text h5 { font-weight: 700; margin-bottom: 10px; font-size: 20px; color: #000000c4; } .blog_text p { color: #000000bd; font-size: 16px; } .blog_date { background: #F3F2F7; display: flex; padding: 7px 15px; border-radius: 2px; margin-top: 0px; } .blog_date_left { background: #F3F2F7; padding: 7px 15px; border-radius: 2px; margin-top: 0px; } .blog_date_text { flex-basis: 37%; margin-top: 8px; } .blog_date_text a, .date_left a { color: #000000d1; font-size: 15px; font-weight: 700; } .blog_btn, .blog_btn_left { background: linear-gradient(40deg,#FF4137 20%,#FDC800 51%,#FF4137 90%); padding: 8px 14px; background-position: left center; background-size: 200% auto; border-radius: 3px; transition: 0.5s; cursor: pointer; } .blog_btn a, .blog_btn_left a { color: white; text-transform: capitalize; font-weight: 700; font-size: 16px; } .blog_content { border: 1px solid #0000000d; margin-bottom: 5.6rem; } .blog_img_left { left: 45px; top: -6%; } .date_content_left { display: flex; padding: 10px 10px; } .date_left { flex: 1; margin-top: 7px; } .blog_btn:hover, .blog_btn_left:hover { background-position: right center; } .blog_content:hover .blog_img{ top: -35%; } /*contact section css*/ .contact_section { padding: 6rem 0; } .contact_information { margin-bottom: 5rem; display: flex; } .single_infor { flex-basis: 33%; text-align: center; font-size: 16px; color: #000000bf; font-weight: 500; } .single_infor i { color: #FE801D; font-size: 2rem; vertical-align: middle; margin-right: 4px; } .form-group { margin-bottom: 4rem; margin-top: 1rem; } .form-control { padding: 1.3rem .75rem; border: none; border-bottom: 1px solid #EEECF4; font-size: 15px; border-radius: 0; transition: border-color 0.3s ease-in-out,box-shadow .15s ease-in-out; } .form-control:focus { box-shadow: none; border-color: #80BDFF; color: #495057; } .form_btn { text-align: center; } .contact_btn { background: linear-gradient(40deg,#FF4137 20%,#FDC800 51%,#FF4137 90%); border: none; width: 30%; color: white; padding: 11px 0; font-size: 18px; font-weight: 700; background-size: 200% auto; background-position: left center; border-radius: 65px; outline: none; transition: 0.5s; } .contact_btn:hover { background-position: right center; } /*footer section*/ .footer_section { background: linear-gradient(to right,#A34FFE,#5934FC); padding: 6rem 0; text-align: center; } .footer_content h2 { color: white; font-weight: 700; font-size: 35px; margin-bottom: 3rem; } .footer_control { width: 55%; padding: 16px 30px; background: white; border: none; border-radius: 6rem; font-size: 16px; } .footer_btn { position: absolute; background: linear-gradient(40deg,#FF4137 20%,#FDC800 51%,#FF4137 90%); border: none; width: 45px; height: 45px; border-radius: 50%; color: white; background-size: 200% auto; background-position: left center; box-shadow: 0 0 12px 0 #FF5F2B; right: 23.2%; top: 6px; outline: none !important; transition: 0.5s; } .footer_serch { position: relative; margin-bottom: 1.3rem; } .footer_content p { color: white; font-weight: 400; } .footer_social { margin-top: 20px; margin-bottom: 3rem; } .footer_social ul li { display: inline-block; margin: 0 12px; border: 1px solid white; width: 48px; height: 48px; border-radius: 50%; padding-top: 7px; cursor: pointer; transition: background 0.2s; } .footer_social ul li a { color: white; font-size: 25px; } .footer_content span { color: white; font-weight: 500; font-size: 14px; } .footer_content span a { color: #ffe1e1; } .footer_btn:hover { background-position: right center; } .footer_social ul li:hover { background: linear-gradient(40deg,#FF4137 20%,#FDC800 51%,#FF4137 90%); border-color: transparent; } /*body left*/ .body_left_social { position: fixed; top: 35% !important; left: 2% !important; background: white; width: 3rem; padding: 12px 0px; text-align: center; border-radius: 6rem; z-index: 9; } .body_left_social ul li { display: block; margin: 10px 0; } .body_left_social ul li a { font-size: 23px; color: #00000082; transition: 0.3; } .body_left_social ul li:hover a { color: black; } .midnightHeader.default { background: #A34FFE; } .body_left_social .midnightHeader .midnightInner ul { padding: 22px 0 16px; } .midnightHeader.default ul li a { color: white; } .midnightHeader.white { background: #FFF; } /*demo bar css*/ .demo { position: fixed; top: 52%; right: 0; } .demo ul li { text-align: center; padding: 15px 18px; color: white; cursor: pointer; } .demo ul li button, .demo ul li a { color: white; font-size: 17px; } .third_demo a { font-size: 13px !important; font-weight: 700; } .first_demo { background: #A24FFE; } .second_demo { background: #FF6433; padding: 8px 0 !important; } .third_demo { background: #27A7FE; padding: 8px 0 !important; } /*demo wrapper css*/ .demo_wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(50deg,#FF2F76,#8227F5); overflow: auto; z-index: 999999; display: none; } .dem_top_img { text-align: center; } .dem_top_img img { width: 55%; margin-bottom: 2.5rem; margin-top: 1.5rem; } .demo_close { cursor: pointer; position: absolute; right: 0; top: 25%; background: white; padding: 13px 15px; } .demo_single { text-align: center; } .demo_single h6 { color: white; font-weight: 400; margin-bottom: 3px; } .demo_single h4 { color: white; font-weight: 700; font-size: 27px; margin-bottom: 20px; } .demo_single img { width: 100%; border: 5px solid white; } .demo_single { margin-bottom: 4rem; } .dem_all_btn a { color: white; margin: 0 12px; text-transform: capitalize; font-weight: 600; border: 1px solid white; padding: 8px 27px; border-radius: 50px; transition: 0.3s; } .dem_all_btn { margin-top: 25px; } .dem_all_btn a:hover { background: white; color: black; } /*notification css*/ .alert.alert-minimalist { background: white; width: 30%; padding: 10px 15px; } #image img { width: 19%; margin-right: 10px; margin-top: 6px; } #text [data-notify="title"] { color: #000000cf; display: block; font-size: 17px; font-weight: 700; } #text [data-notify="message"] { color: #000000e6; display: block; font-size: 14px; padding: 4px 0; } #text [data-notify="message"] span.blue { color: #28BCFD; font-weight: 700; } #text [data-notify="time"] { color: #00000063; font-size: 13px; font-weight: 600; } .noti_close { margin-top: -8px; margin-right: -8px; } /*loading screen*/ .loaading_screen_main { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999999999999; } .loaading_secondary { position: relative; width: 100%; height: 100%; } .loading_icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all .5s ease-out; } .loading_ { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all .5s ease-out; } .loaading_screen_main:before { content: "'"; background: white; position: fixed; top: 0; left: 0; width: 50%; height: 100%; transition: all .7s .3s cubic-bezier(.645,.045,.355,1); } .loaading_screen_main:after { content: ""; background: white; width: 50%; height: 100%; position: fixed; top: 0; right: 0; z-index: -1; transition: all .7s .3s cubic-bezier(.645,.045,.355,1); } .loaading_screen_main.loades_com { visibility: hidden; transform: translateY(-100%); transition: all .3s 1s ease-out; } .loaading_screen_main.loades_com:before { left: -50%; } .loaading_screen_main.loades_com:after { right: -50%; } .loaading_screen_main.loades_com .loading_icon { opacity: 0; visibility: hidden; pointer-events: none; } .loaading_screen_main.loades_com .loading_ { opacity: 0; visibility: hidden; pointer-events: none; }