/* Theme Name: Quran From Home Theme URI: https://foursw.com/ Author: تم تصميم وتطوير بواسطة شركة foursw Author URI: https://foursw.com/ */ /*=============== GOOGLE FONTS ===============*/ @import url('https://fonts.googleapis.com/css2?family=Beiruti:wght@200..900&family=Cairo:wght@200..1000&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Press+Start+2P&display=swap'); * { font-family: var(--body-font); } /*=============== VARIABLES CSS ===============*/ :root { --header-height: 3.5rem; /*========== Colors ==========*/ --medium-sea-green: #34BA69; --vivid-orange-peel: #FDB434; --black-color: #35353F; --gray-color: #4E5566; /*========== Font and typography ==========*/ --body-font: 'Poppins', sans-serif; --h1-font-size: 2.986rem; /* 47.776px */ --h2-font-size: 2.986rem; /* 47.776px */ --h3-font-size: 2.074rem; /* 33.184px */ --h4-font-size: 1.728rem; /* 27.648px */ --h5-font-size: 1.44rem; /* 23.04px */ --h6-font-size: 1.2rem; /* 19.2px */ --normal-font-size: 1rem; /* 16px */ /*========== Font weight ==========*/ --font-regular: 400; --font-medium: 500; --font-semi-bold: 600; --font-bold: 700; /*========== z index ==========*/ --z-tooltip: 10; --z-fixed: 100; } /*=============== BASE ===============*/ * { box-sizing: border-box; padding: 0; margin: 0; } html { scroll-behavior: smooth; } input, button { outline: none; border: none; } ul { list-style: none; } a { text-decoration: none; } /*=============== REUSABLE CSS CLASSES ===============*/ .container { max-width: 1320px; margin-inline: 1.5rem; } .section { padding-block: 5rem 1rem; } div.prog { position: fixed; top: 0; left: 0; width: 10px; height: 5px; background-color: var(--vivid-orange-peel); z-index: 999; animation: pro linear forwards; animation-timeline: scroll(); } @keyframes pro { 0% { width: 10px; background-color: rgb(253, 238, 220); } 30% { background-color: rgb(252, 194, 85); } 50% { background-color: rgb(246, 171, 31); } 100% { width: 100%; background-color: var(--vivid-orange-peel); } } /* .loader-container { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: var(--medium-sea-green); position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; } .loader { display: flex; gap: 10px; } .dot { width: 20px; height: 20px; background-color: var(--vivid-orange-peel); border-radius: 50%; animation: fade 1s infinite ease-in-out; } .dot:nth-child(2) { animation-delay: 0.2s; } .dot:nth-child(3) { animation-delay: 0.4s; } .dot:nth-child(4) { animation-delay: 0.6s; } @keyframes fade { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } } */ /*=============== HEADER & NAV ===============*/ .header { position: fixed; display: flex; justify-content: center; align-items: center; top: 0px; left: 0; width: 100%; z-index: var(--z-fixed); transition: box-shadow .4s; background: #FFFCF7; box-shadow: 0px 8px 20px 0px #35353F0D; } .nav { position: relative; display: flex; justify-content: space-between; align-items: center; height: 100px; width: 100%; background: #FFFCF7; border-bottom: 2px solid var(--vivid-orange-peel); } .nav_logo img { width: 199.7264404296875px; height: 64.8957748413086px; } .nav_list { text-align: center; display: flex; gap: 2rem; } .menu-item a, .nav_link{ position: relative; color: var(--black-color); font-family: var(--body-font); font-size: var(--h5-font-size); font-weight: var(--font-regular); } .btns { display: flex; align-items: center; justify-content: center; gap: 2rem; .whatsapp { display: flex; align-items: center; justify-content: center; a { font-size: 3rem; font-weight: var(--font-bold); color: var(--medium-sea-green) } } } .nav .btn a, .btn-mobile a { font-size: var(--h5-font-size); font-weight: var(--font-bold); color: var(--vivid-orange-peel); border: 2px solid var(--vivid-orange-peel); padding: 0.5rem 1.5rem; box-shadow: -5px 5px 0 var(--vivid-orange-peel); transition: all 0.3s ease; } .menu-item a.active /* .nav_link.active */ { color: var(--vivid-orange-peel); } .menu-item a:hover, .nav_link:hover{ color: var(--vivid-orange-peel); /* لون عند الـ hover لو عايز */ } .nav_toggle, .nav_close, .btn-mobile { display: none; } /*=============== HOME ===============*/ .home { height: 100vh; padding: 2rem 5rem; } .home_container { display: flex; justify-content: space-between; align-items: center; height: 100%; gap: 2rem; } .home_video { position: relative; video { width: 615px; height: 456px; border-radius: 21px; border: 6px solid #FFF6E6; } &::after { content: ''; position: absolute; background-image: url(assets/image/highlight-line.webp); background-size: cover; background-position: center; background-repeat: no-repeat; width: 48.650963604145915px; height: 42.8832px; bottom: -45px; right: 25px; } } .home_content { display: flex; flex-direction: column; justify-content: center; align-items: start; gap: 19px; h1 { font-size: var(--h3-font-size); font-weight: var(--font-bold); color: var(--black-color); width: 83%; .span1 { color: var(--vivid-orange-peel); } .span2 { color: var(--medium-sea-green); } } p { font-size: var(--h6-font-size); font-weight: var(--font-regular); color: var(--black-color); margin-bottom: 10px; width: 85%; } .home_btn { display: flex; align-items: center; gap: 2rem; width: 100%; .btn-1 { display: flex; justify-content: center; align-items: center; background-color: var(--vivid-orange-peel); width: 303px; height: 48px; border-radius: 8px; color: white; font-size: var(--h5-font-size); font-weight: var(--font-regular); transition: all 0.5s ease-in-out; cursor: pointer; } .btn-2 { display: flex; justify-content: center; align-items: center; gap: 10px; background-color: var(--medium-sea-green); border-radius: 8px; color: white; font-size: var(--h5-font-size); width: 234px; height: 48px; font-weight: var(--font-regular); transition: all 0.5s ease-in-out; cursor: pointer; i { color: white; font-size: 1.5rem; } } } } /*=============== OUR BLOG ===============*/ .ourblog { padding: 5rem 5rem; background: #FFFCF7; .ourblog_container { .ourblog_content { h2 { font-size: var(--h3-font-size); font-weight: var(--font-medium); color: var(--black-color); text-align: center; } h4 { position: relative; font-size: var(--h6-font-size); font-weight: var(--font-regular); color: var(--medium-sea-green); text-align: center; margin-bottom: 40px; &::after { content: ''; position: absolute; background-image: url(assets/image/line\ 1.webp); background-size: cover; background-position: center; background-repeat: no-repeat; width: 168.79043708340154px; height: 10.300656px; bottom: -10px; right: 43%; } } .swiper { position: relative !important; display: flex; justify-content: center; width: 100%; height: 730px; } .swiper-slide { display: flex; justify-content: center; height: fit-content; margin: 10px 10px !important; } .swiper_data { background: white; border-radius: 10px; box-shadow: 0 2px 10px #35353F0D; overflow: hidden; width: 436px; margin: 0 10px; } .swiper_data .img img { width: 100%; height: 200px; border-radius: 12px 12px 0 0; object-fit: cover; } .swiper_text { padding: 1.5rem; } .swiper_text .satuts { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .swiper_text .satuts span { font-size: var(--normal-font-size); color: var(--vivid-orange-peel); font-weight: var(--font-regular); } .satuts .aroow { font-size: var(--h6-font-size) !important; background: none !important; transform: rotate(45deg) !important; color: var(--medium-sea-green) !important; } .swiper_text h3 { font-size: var(--h5-font-size); font-weight: var(--font-regular); color: var(--black-color); margin-bottom: 0.2rem; } .swiper_text p { font-size: var(--normal-font-size); font-weight: var(--font-regular); color: #707070; margin-bottom: 1rem; } .swiper_text .date { display: flex; align-items: center; gap: 10px; margin-bottom: 1rem; span { font-size: 12px; font-weight: var(--font-regular); color: var(--black-color); } i { background: var(--vivid-orange-peel); padding: 0.5rem; border-radius: 50%; color: white; font-size: 1rem; transition: all 0.3s ease-in-out; } } .swiper_text .but { display: flex; justify-content: center; align-items: center; background: var(--medium-sea-green); color: white; padding: 0.5rem 1rem; border-radius: 5px; font-size: var(--h6-font-size); font-weight: var(--font-regular); gap: 5px; width: 100%; cursor: pointer; i { transition: all 0.3s ease-in-out; } &:hover i { transform: translateX(10px); } } .btns-swiper { position: absolute !important; width: 223px; height: 54px; display: flex !important; justify-content: center !important; align-items: center !important; gap: 1rem !important; margin-top: 2rem !important; background: var(--vivid-orange-peel) !important; top: 85% !important; padding: 10px; border-radius: 120px; } .swiper-button-prev, .swiper-button-next { width: 40px; height: 40px; background: white; color: var(--vivid-orange-peel); border-radius: 50%; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } .swiper-button-prev:after, .swiper-button-next:after { font-size: 16px; } .swiper-button-prev:after, .swiper-button-next:after { content: none !important; /* Remove default Swiper arrow */ } .swiper-button-prev:before, .swiper-button-next:before { font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 16px; } .swiper-button-prev:before { content: "\f060"; /* Font Awesome left arrow */ } .swiper-button-next:before { content: "\f061"; /* Font Awesome right arrow */ } } } } /*=============== CLASES ===============*/ .clases { padding: 5rem 5rem; background: #FFFFFF; .clases_container { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 2rem; .clases_img { width: 1001px; height: 545px; border-radius: 12px; padding: 15px; box-shadow: 0 2px 10px #0000000D; background: #FFFFFF; img { width: 100%; height: 100%; object-fit: cover; } } .clases_content { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; h2 { font-size: var(--h3-font-size); font-weight: var(--font-medium); color: var(--black-color); text-align: center; } p { font-size: var(--h6-font-size); font-weight: var(--font-regular); color: var(--gray-color); margin-bottom: 10px; text-align: center; width: 75%; } a { display: flex; justify-content: center; align-items: center; width: 320px; height: 65px; background: var(--medium-sea-green); border-radius: 12px; color: white; font-size: var(--h4-font-size); font-weight: var(--font-semi-bold); transition: all 0.3s ease-in-out; &:hover { transform: scale(1.1); } } } .clase_item { display: flex; justify-content: space-between; flex-wrap:wrap; align-items: center; gap: 1.8rem; .item { display: flex; justify-content: start; align-items: center; gap: 15px; background: white; box-shadow: 0 2px 10px #0000000D; padding: 0 10px; width: 333.3333435058594px; height: 100px; border-radius: 10px; h4 { font-size: var(--h4-font-size); font-weight: var(--font-semi-bold); color: var(--black-color); } i { font-size: 1.5rem; padding: 1rem; border-radius: 10px; } .icon1 { background: #FFF4F2; color: #EB001B; } .icon2 { background: #FFF7EA; color: var(--vivid-orange-peel); } .icon3 { background: #EBFFF5; color: var(--medium-sea-green); } } } } } /*=============== EXPERIENCE ===============*/ .experience { padding: 5rem 5rem; background: #FFFCF7; .experience_container { display: flex; justify-content: space-between; align-items: start; gap: 2rem; .experience_content { display: flex; flex-direction: column; justify-content: center; align-items: start; gap: 1.5rem; h2 { position: relative; font-size: var(--h3-font-size); font-weight: var(--font-medium); color: var(--black-color); width: 80%; &::after { content: ''; position: absolute; background-image: url(assets/image/line\ 2.webp); background-size: cover; background-position: center; background-repeat: no-repeat; width: 168.79043708340154px; height: 10.300656px; bottom: 45px; right: 35%; } } p { font-size: var(--normal-font-size); font-weight: var(--font-regular); color: var(--gray-color); width: 95%; } .border { display: flex; justify-content: start; align-items: start; flex-direction: column; padding: 15px; gap: 20px; width: 100%; height: 260px; background: #31BF690D; img { width: 56px; height: 56px; } h6 { font-size: var(--h6-font-size); font-weight: var(--font-semi-bold); color: var(--medium-sea-green); width: 89%; } } a { display: flex; justify-content: center; align-items: center; width: 363px; height: 56px; background: var(--vivid-orange-peel); border-radius: 8px; color: white; font-size: var(--h5-font-size); font-weight: var(--font-semi-bold); } } .experience_img { img { width: 649px; height: 667px; } } } } /*=============== BANNAR ===============*/ .bannar { padding: 5rem 5rem; text-align: center; overflow: hidden; .bannar_container { position: relative; padding: 20px; border-radius: 40px 0 40px 0; background-color: var(--medium-sea-green); height: 311px; z-index: 1; overflow: hidden; &::after { content: ''; position: absolute; background-image: url(assets/image/bannar\ 2.webp); background-size: cover; background-position: center; background-repeat: no-repeat; width: 700.5084228515625px; height: 100%; top: 0; left: 0; z-index: -1; } &::before { content: ''; position: absolute; background-image: url(assets/image/bannar\ 1.webp); background-size: cover; background-position: center; background-repeat: no-repeat; width: 700.5084228515625px; height: 100%; top: 0; right: 0; z-index: -1; } .bannar_content { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 100%; border-left: 10px solid white; border-right: 10px solid white; border-top: 5px solid white; border-bottom: 5px solid white; border-radius: 26px; h2 { color: white; font-family: var(--body-font); font-size: var(--h3-font-size); font-weight: var(--font-medium); } p { color: white; font-family: var(--body-font); font-size: var(--normal-font-size); margin-bottom: 40px; } .input { display: flex; position: relative; justify-content: center; gap: 10px; width: fit-content; input { padding: 15px; font-size: var(--normal-font-size); border: none; border-radius: 5px; width: 600px; height: 65px; } button { position: absolute; padding: 10px 20px; font-size: var(--h5-font-size); font-weight: var(--font-semi-bold); background-color: var(--vivid-orange-peel); color: white; border: none; right: 5px; bottom: 5px; border-radius: 0 5px 5px 0; cursor: pointer; } } } } } /*=============== BEST COURSES ===============*/ .best-courses { padding: 5rem 5rem; background: #FFFCF7; .best-courses_container { .best-courses_content { h2 { position: relative; font-size: var(--h3-font-size); font-weight: var(--font-medium); color: var(--medium-sea-green); text-align: center; margin-bottom: 5rem; &::after { content: ''; position: absolute; background-image: url(assets/image/line\ 1.webp); background-size: cover; background-position: center; background-repeat: no-repeat; width: 168.79043708340154px; height: 10.300656px; bottom: -10px; right: 43%; } } .best-courses-item { display: flex; justify-content: space-between; align-items: center; gap: 10rem; flex-direction: column; .item { display: flex; justify-content: space-between; align-items: center; gap: 10rem; &:nth-child(2) { flex-direction: row-reverse; } .img { width: 100%; height: 100%; img { width: 599px; height: 314px; border-radius: 8px; } } .text { display: flex; flex-direction: column; justify-content: space-between; align-items: start; gap: 1rem; h4 { font-size: var(--h4-font-size); font-weight: var(--font-semi-bold); color: var(--black-color); } p { font-size: var(--normal-font-size); font-weight: var(--font-regular); color: var(--black-color); margin-bottom: 1rem; } a { display: flex; justify-content: center; align-items: center; gap: 10px; width: 191px; height: 56px; background: var(--vivid-orange-peel); border-radius: 6px; color: white; font-size: var(--h5-font-size); font-weight: var(--font-regular); i { font-size: var(--normal-font-size); transition: all 0.3s ease-in-out; } &:hover i { transform: translateX(10px); } &:active { transform: scale(0.9); } } } } } } } } /*=============== FEEDBACK ===============*/ .feedback { padding: 5rem 5rem; .feedback_container { .feedback_content { h2 { font-size: var(--h3-font-size); font-weight: var(--font-medium); color: var(--black-color); span { color: var(--medium-sea-green); } } p { font-size: var(--h6-font-size); font-weight: var(--font-regular); color: var(--black-color); margin-bottom: 40px; } .feedback_swiper { .swiper { padding: 35px; .swiper-wrapper { .swiper-slide { display: flex; justify-content: center; margin: 0 15px; /* Adds gap between slides */ .feedback_data { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; flex-direction: column; background: rgba(255, 255, 255, 0.1); /* Adds background to each slide */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adds shadow effect */ border-radius: 15px; /* Rounded corners for the background */ padding: 20px; /* Inner padding for content */ max-width: 400px; /* Ensures consistent slide width */ .data { display: flex; justify-content: space-between; align-items: center; gap: 2rem; width: 100%; .img_name { display: flex; align-items: center; gap: 1rem; img { width: 50px; height: 50px; border-radius: 50%; } .name { display: flex; flex-direction: column; justify-content: space-between; h4 { font-size: var(--h6-font-size); font-weight: var(--font-semi-bold); } h6 { font-size: var(--normal-font-size); font-weight: var(--font-regular); } } } .quttos { img { width: 30px; } } } .text { p { font-size: var(--normal-font-size); font-weight: var(--font-regular); color: var(--gray-color); } } } } } .swiper-pagination-bullet { background: #FCA10036; opacity: 1; } .swiper-pagination-bullet-active { background: var(--vivid-orange-peel); } .swiper-button-prev, .swiper-button-next { color: var(--medium-sea-green); background: white; border-radius: 50%; width: 44px; height: 44px; transition: all 0.3s ease-in-out; &:hover { background: var(--medium-sea-green); color: white; } } .swiper-button-prev::after, .swiper-button-next::after { font-size: 20px; } } } } } } /*=============== QUESTIONS ===============*/ .questions { padding: 5rem 5rem; margin-bottom: 15rem; } .questions_content h2 { font-size: var(--h2-font-size); font-weight: var(--font-medium); color: var(--black-color); text-align: center; } .questions_content p { font-size: var(--normal-font-size); font-weight: var(--font-regular); color: var(--black-color); text-align: center; margin-bottom: 2rem; } .questions_accordion { max-width: 1000px; margin: 0 auto; } .question_item { margin-bottom: 20px; background: white; border-radius: 16px; box-shadow: 0 2px 10px #35353F0D; } .question_header { background: #fff; color: var(--medium-sea-green); padding: 15px 20px; border-radius: 10px 10px 0 0; display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .question_header h3 { font-size: var(--h4-font-size); font-weight: var(--font-semi-bold); } .question_header .arrow { display: flex; justify-content: center; align-items: center; font-size: 20px; border: 2px solid var(--medium-sea-green); width: 40px; height: 40px; border-radius: 50%; transition: transform 0.3s; } .question_answer { color: #333; padding: 0 20px 15px; border-radius: 0 0 10px 10px; display: none; } .question_answer p { text-align: start; font-size: var(--h6-font-size); font-weight: var(--font-regular); width: 80%; } .question_item.active .question_answer { display: block; } .question_item.active .arrow { transform: rotate(180deg); } /*=============== PAGE 2 ===============*/ /*=============== ABOUT US ===============*/ .about { position: relative; overflow: hidden; padding: 10rem 5rem 3rem 5rem; background: var(--medium-sea-green); &::after { content: ''; position: absolute; background-image: url(assets/image/about\ bg\ 1.webp); background-size: cover; background-position: center; background-repeat: no-repeat; width: 722.6258544921875px; height: 260.458984375px; bottom: 0; left: 0; } &::before { content: ''; position: absolute; background-image: url(assets/image/about\ bg\ 2.webp); background-size: cover; background-position: center; background-repeat: no-repeat; width: 574.9224243164062px; height: 239.5673828125px; top: 115px; right: -10%; } .about_container { display: flex; justify-content: space-between; align-items: center; height: 100%; gap: 2rem; .about_img { img { width: 646.77px; height: 549.72px; } } .about_content { display: flex; flex-direction: column; justify-content: center; align-items: start; gap: 19px; h1 { position: relative; font-size: var(--h3-font-size); font-weight: var(--font-bold); color: white; &::after { content: ''; position: absolute; background-image: url(assets/image/about\ line\ 2.webp); background-size: cover; background-position: center; background-repeat: no-repeat; width: 419.15451370740755px; height: 25.48px; bottom: 29px; right: 25%; } } p { font-size: var(--h6-font-size); font-weight: var(--font-medium); color: white; width: 95%; } } } } /*=============== CHOUSE US ===============*/ .chouse { padding: 5rem 5rem; background: #FFFCF7; .chouse_container { display: flex; justify-content: space-between; align-items: start; gap: 2rem; .chouse_content { display: flex; flex-direction: column; justify-content: center; align-items: start; span { font-size: var(--normal-font-size); font-weight: var(--font-regular); color: var(--black-color); } h2 { position: relative; font-size: var(--h3-font-size); font-weight: var(--font-medium); color: var(--vivid-orange-peel); margin-bottom: 2rem; } p { font-size: var(--normal-font-size); font-weight: var(--font-regular); color: var(--gray-color); width: 95%; } .items { display: flex; flex-direction: column; justify-content: space-between; align-items: start; gap: 2rem; .item { display: flex; justify-content: space-between; align-items: start; gap: 2rem; img { width: 63px; height: 63px; } h4 { font-size: var(--h6-font-size); font-weight: var(--font-regular); color: var(--vivid-orange-peel); } p { font-size: var(--normal-font-size); font-weight: var(--font-regular); color: var(--black-color); width: 70%; } } } a { display: flex; justify-content: center; align-items: center; width: 300px; height: 56px; background: var(--medium-sea-green); border-radius: 8px; color: white; font-size: var(--h5-font-size); font-weight: var(--font-semi-bold); margin-top: 2rem; } } .chouse_img { img { width: 424.7269592285156px; height: 466.9713134765625px; } } } } /*=============== MESSAGE ===============*/ .Message { padding: 5rem 5rem; background: #ffffff; .Message_container { .Message_content { h2 { position: relative; font-size: var(--h3-font-size); font-weight: var(--font-medium); color: var(--medium-sea-green); text-align: center; margin-bottom: 5rem; z-index: 1; &::after { content: ''; position: absolute; background-image: url(assets/image/about\ line.webp); background-size: cover; background-position: center; background-repeat: no-repeat; width: 290.54px; height: 25.48px; bottom: -5px; right: 41%; z-index: -1; } } .Message-item { display: flex; justify-content: space-between; align-items: center; gap: 3rem; flex-direction: column; .item { display: flex; justify-content: space-between; align-items: start; flex-direction: row-reverse; gap: 10rem; .img { width: 100%; height: 100%; img { width: 455.256103515625px; height: 424.69012451171875px; } } &:nth-child(2) { flex-direction: row; img { width: 491.9999084472656px; height: 410.6869812011719px; } } .text { display: flex; flex-direction: column; justify-content: space-between; align-items: start; gap: 1rem; box-shadow: 0 2px 10px #0000000D; padding: 50px 20px; border-radius: 8px; h4 { font-size: var(--h4-font-size); font-weight: var(--font-semi-bold); color: var(--vivid-orange-peel); width: 100%; } p { font-size: var(--h6-font-size); font-weight: var(--font-regular); color: var(--black-color); } } } } } } } /*=============== PAGE 3 ===============*/ /*=============== COURSES ===============*/ .courses { height: 100vh; padding: 10rem 5rem 3rem 5rem; background: #E7FFF1; } .courses_container { display: flex; justify-content: space-between; align-items: center; height: 100%; gap: 2rem; } .courses_img { img { width: 633px; height: 633px; object-fit: cover; /* عشان الصورة ما تتشوهش لو أبعادها مختلفة */ animation: imageco 3s linear infinite; /* إضافة مدة الحركة (3 ثواني) */ } } @keyframes imageco { 0% { transform: translateY(0); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0); } } .courses_content { display: flex; flex-direction: column; justify-content: center; align-items: start; gap: 10px; h1 { font-size: var(--h1-font-size); font-weight: var(--font-bold); color: var(--medium-sea-green); .span1 { color: var(--vivid-orange-peel); } .span2 { color: var(--black-color); } } p { font-size: var(--h6-font-size); font-weight: var(--font-regular); color: var(--black-color); margin-bottom: 30px; width: 95%; } .courses_btn { .btn-1 { display: flex; justify-content: center; align-items: center; background-color: var(--medium-sea-green); width: 328px; height: 56px; border-radius: 8px; color: white; font-size: var(--h5-font-size); font-weight: var(--font-bold); transition: all 0.3s ease-in-out; cursor: pointer; } } } /*=============== ITEM COURSES ===============*/ .item-courses { padding: 5rem 5rem; background: #FFFCF7; .item-courses_container { .item-courses_content { h2 { position: relative; font-size: var(--h3-font-size); font-weight: var(--font-medium); color: var(--vivid-orange-peel); text-align: start; margin-bottom: 5rem; width: fit-content; &::after { content: ''; position: absolute; background-image: url(assets/image/line\ 1.webp); background-size: cover; background-position: center; background-repeat: no-repeat; width: 168.79043708340154px; height: 10.300656px; bottom: -10px; right: 5%; } span { color: var(--medium-sea-green); } } .item-courses-item { display: flex; justify-content: space-between; align-items: center; gap: 5rem; flex-direction: column; .item { display: flex; justify-content: space-between; align-items: center; gap: 5rem; &:nth-child(2) { flex-direction: row-reverse; } .img { img { width: 599px; height: 314px; border-radius: 8px; } } .text { display: flex; flex-direction: column; justify-content: space-between; align-items: start; gap: 1rem; h4 { font-size: var(--h4-font-size); font-weight: var(--font-semi-bold); color: var(--black-color); } p { font-size: var(--normal-font-size); font-weight: var(--font-regular); color: var(--black-color); margin-bottom: 1rem; } a { display: flex; justify-content: center; align-items: center; gap: 10px; width: 191px; height: 56px; background: var(--vivid-orange-peel); border-radius: 6px; color: white; font-size: var(--h5-font-size); font-weight: var(--font-regular); i { font-size: var(--normal-font-size); transition: all 0.3s ease-in-out; } &:hover i { transform: translateX(10px); } &:active { transform: scale(0.9); } } } } } .midile-item { display: flex; justify-content: space-between; align-items: start; gap: 2rem; .item { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-direction: column; padding: 20px; background: #FCA10008; border-radius: 16px; height: 652px; .img { img { width: 599px; height: 314px; border-radius: 8px; } } .text { display: flex; flex-direction: column; justify-content: space-between; align-items: start; gap: 1rem; h4 { font-size: var(--h4-font-size); font-weight: var(--font-semi-bold); color: var(--black-color); } p { font-size: var(--normal-font-size); font-weight: var(--font-regular); color: var(--black-color); margin-bottom: 1rem; } a { display: flex; justify-content: center; align-items: center; gap: 10px; width: 191px; height: 56px; background: var(--vivid-orange-peel); border-radius: 6px; color: white; font-size: var(--h5-font-size); font-weight: var(--font-regular); i { font-size: var(--normal-font-size); transition: all 0.3s ease-in-out; } &:hover i { transform: translateX(10px); } &:active { transform: scale(0.9); } } } } } } } } .midle2 { background: #FFF9EF; .item-courses-item { display: flex; justify-content: space-between; align-items: center; gap: 10rem; flex-direction: column; .item { display: flex; justify-content: space-between; align-items: center; gap: 5rem; &:nth-child(2) { flex-direction: row-reverse; } .img { img { width: 599px; height: 314px; border-radius: 8px; } } .text { display: flex; flex-direction: column; justify-content: space-between; align-items: start; gap: 1rem; h4 { font-size: var(--h4-font-size); font-weight: var(--font-semi-bold); color: var(--black-color); } p { font-size: var(--normal-font-size); font-weight: var(--font-regular); color: var(--black-color); margin-bottom: 1rem; } a { display: flex; justify-content: center; align-items: center; gap: 10px; width: 191px; height: 56px; background: var(--vivid-orange-peel); border-radius: 6px; color: white; font-size: var(--h5-font-size); font-weight: var(--font-regular); i { font-size: var(--normal-font-size); transition: all 0.3s ease-in-out; } &:hover i { transform: translateX(10px); } &:active { transform: scale(0.9); } } } } } } .midle { background: #FFF9EF; } .last { background: #FFFCF7; } /*=============== PAGE 4 ===============*/ /*=============== HERO BLOGS ===============*/ .hero-blogs { padding: 15rem 5rem 5rem 5rem; background: #FFFCF7; .hero-blogs_container { .hero-blogs_content { display: flex; flex-direction: column; justify-content: center; align-items: center; span { display: flex; justify-content: center; align-items: center; width: 108px; height: 32px; background: white; font-size: var(--normal-font-size); font-weight: var(--font-semi-bold); color: var(--vivid-orange-peel); border-radius: 16px; box-shadow: 0 5px 10px #FFDD2833; margin-bottom: 15px; } h2 { font-size: var(--h3-font-size); font-weight: var(--font-medium); color: var(--vivid-orange-peel); } p { font-size: var(--normal-font-size); font-weight: var(--font-regular); color: var(--black-color); } .input { display: flex; margin-top: 2.8rem; background: white; border-radius: 8px; position: relative; border: 1px solid #FFC700; input { width: 472px; height: 48px; border: none; outline: none; padding-left: 40px; /* Adjust to avoid overlap with button */ border-radius: 8px; font-size: 16px; color: #707070; } button { position: absolute; padding: 10px 20px; font-size: var(--h6-font-size); font-weight: var(--font-regular); background-color: transparent; color: #ffe4b6; border: none; left: -10px; bottom: 5px; border-radius: 0 8px 8px 0; cursor: pointer; display: flex; align-items: center; } } } } } /*=============== BLOGS ===============*/ .blogs { padding: 5rem 5rem; background: #FFFCF7; background-image: url(assets/image/pagination\ bg.webp); background-size: 100% 600px; background-position: top; background-repeat: no-repeat; .blogs_container { .blogs_content { .blogs-card { display: grid; grid-template-columns: repeat(3, 1fr); /* Creates 3 equal-width columns */ justify-content: center; gap: 48px 30px; } .card { background: white; border-radius: 10px; box-shadow: 0 2px 10px #35353F0D; &:hover .aroow { transform: rotate(90deg); } } .card .img img { width: 100%; height: 200px; border-radius: 12px 12px 0 0; object-fit: cover; } .text { padding: 1.5rem; } .text .satuts { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .text .satuts span { font-size: var(--normal-font-size); color: var(--vivid-orange-peel); font-weight: var(--font-regular); } .satuts .aroow { font-size: var(--h6-font-size); background: none; transform: rotate(45deg); color: var(--medium-sea-green); transition: all 0.3s ease-in-out; } .text h3 { font-size: var(--h5-font-size); font-weight: var(--font-regular); color: var(--black-color); margin-bottom: 0.2rem; } .text p { font-size: var(--normal-font-size); font-weight: var(--font-regular); color: #707070; margin-bottom: 1rem; } .text .date { display: flex; align-items: center; gap: 10px; margin-bottom: 1rem; span { font-size: 12px; font-weight: var(--font-regular); color: var(--black-color); } i { background: var(--vivid-orange-peel); padding: 0.5rem; border-radius: 50%; color: white; font-size: 1rem; } } .text .but { display: flex; justify-content: center; align-items: center; background: var(--medium-sea-green); color: white; padding: 0.5rem 1rem; border-radius: 5px; font-size: var(--h6-font-size); font-weight: var(--font-regular); gap: 5px; width: 100%; cursor: pointer; i{ transition: all 0.3s ease-in-out; } &:hover i { transform: translateX(10px); } } .pagination { display: flex; justify-content: center; align-items: center; margin-top: 20px; gap: 20px; } .pagination button { background: none; border: none; font-size: 19.2px; cursor: pointer; padding: 5px 10px; color: var(--vivid-orange-peel); } .pagination .current { background: var(--vivid-orange-peel); color: #fff; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; } .pagination .ellipsis { font-size: 19.2px; color: var(--vivid-orange-peel); cursor: default; } .pagination button:disabled { color: var(--gray-color); cursor: not-allowed; } .hidden { display: none; } } } } /*=============== PAGE 5 ===============*/ /*=============== PRICING ===============*/ .pricing { padding: 10rem 5rem; background: white; .pricing_container { h2 { position: relative; font-size: var(--h1-font-size); font-weight: var(--font-bold); color: var(--black-color); text-align: center; margin-bottom: 1rem; } .pra { position: relative; font-size: var(--h6-font-size); font-weight: var(--font-semi-bold); color: white; padding: 11px 25px; background: var(--vivid-orange-peel); border-radius: 60px; text-align: center; width: fit-content; margin: 0 auto; &::after { content: ""; position: absolute; background-image: url(assets/image/pricing\ after.webp); background-size: cover; background-position: center; background-repeat: no-repeat; width: 130.2242889404297px; height: 70.37246704101562px; top: 55px; right: 40%; } } .pricing_palns { display: flex; justify-content: space-between; align-items: center; /* gap: 4.5rem; */ margin-top: 5rem; .cover { position: relative; display: flex; justify-content: space-between; align-items: start; flex-direction: column; gap: 10px; background: var(--medium-sea-green); padding: 3rem 2rem; border-radius: 20px; height: 668px; overflow: hidden; width: fit-content; &::after { content: ""; position: absolute; background-image: url(assets/image/pricing\ cover\ bg.webp); background-size: cover; background-position: center; background-repeat: no-repeat; width: 162.40330505371094px; height: 162.40330505371094px; top: 100px; right: 0%; } h4 { font-size: var(--h3-font-size); font-weight: var(--font-bold); color: white; } p { font-size: var(--h6-font-size); font-weight: var(--font-medium); color: white; width: 320px; } .arrow { font-size: var(--h4-font-size); color: white; margin: 2rem 0; } .content { display: flex; justify-content: space-between; align-items: start; gap: 10px; flex-direction: column; .data { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 1rem; i { font-size: var(--h5-font-size); color: var(--vivid-orange-peel); } p { font-size: 20px; font-weight: var(--font-medium); color: white; } } } .cover-img { position: relative; img { width: 258.0533px; height: 106.0603px; } &::after { content: ""; position: absolute; background-image: url(assets/image/pricing\ cover\ img\ .webp); background-size: cover; background-position: center; background-repeat: no-repeat; width: 64.00204467773438px; height: 61.900001525878906px; top: -35px; right: -22%; } } } .card { display: flex; justify-content: space-between; align-items: start; flex-direction: column; background: white; box-shadow: 0 8px 20px #35353F0D; border-radius: 20px; padding: 3rem 2rem; height: 668px; width: fit-content; .card_header { display: flex; justify-content: space-between; align-items: center; gap: 20px; i { font-size: var(--h5-font-size); color: var(--vivid-orange-peel); } h3 { font-size: var(--h3-font-size); font-weight: var(--font-medium); color: var(--black-color); } } .content { display: flex; justify-content: space-between; align-items: start; flex-direction: column; gap: 24px; border-bottom: 3px dotted var(--medium-sea-green); padding-bottom: 5px; width: 90%; } .card_body { display: flex; justify-content: space-between; align-items: start; flex-direction: column; gap: 24px; h4 { font-size: var(--h4-font-size); font-weight: var(--font-regular); color: var(--medium-sea-green); } .text { display: flex; justify-content: space-between; align-items: center; gap: 15px; i { display: flex; justify-content: center; align-items: center; font-size: var(--normal-font-size); color: white; background: var(--medium-sea-green); padding: 5px; border-radius: 50%; } p { font-size: var(--h6-font-size); font-weight: var(--font-regular); color: var(--black-color); width: 288px; } } .price { display: flex; justify-content: space-between; align-items: center; h5 { font-size: var(--h1-font-size); font-weight: var(--font-bold); color: var(--vivid-orange-peel); span { font-size: var(--h6-font-size); font-weight: var(--font-regular); } } } .btn { display: flex; justify-content: center; align-items: center; width: 352px; height: 64px; background: var(--medium-sea-green); border-radius: 6px; a { font-size: var(--h4-font-size); font-weight: var(--font-semi-bold); color: white; width: 100%; text-align: center; } } } } } .bannar { display: flex; justify-content: start; align-items: center; background: white; box-shadow: 0 8px 20px #35353F0D; height: 162px; gap: 4rem; margin-top: 2rem; border-radius: 20px; .icon { i { font-size: 80px; color: var(--medium-sea-green); } } .text { display: flex; justify-content: center; align-items: start; flex-direction: column; gap: 10px; h4 { font-size: var(--h3-font-size); font-weight: var(--font-medium); color: var(--black-color); span { color: var(--vivid-orange-peel); } } p { font-size: var(--h6-font-size); font-weight: var(--font-regular); color: var(--black-color); width: 741px; text-align: start; } } .btn { display: flex; justify-content: center; align-items: center; width: 254px; height: 54px; border-radius: 6px; background: var(--vivid-orange-peel); a { color: white; font-size: var(--h5-font-size); font-weight: var(--font-semi-bold); } } } } } /*=============== PAYMENT ===============*/ .payment { padding: 0rem 5rem 10rem 5rem; .payment_container { h2 { position: relative; display: flex; justify-content: center; align-items: center; gap: 15px; font-size: 38px; font-weight: var(--font-medium); color: var(--black-color); margin-bottom: 7rem; i { display: flex; justify-content: center; align-items: center; width: 54.9774px; height: 54.9774px; font-size: 30px; color: white; background: var(--medium-sea-green); border-radius: 50%; } &::after { content: ""; position: absolute; background-image: url(assets/image/arrow\ payment.webp); background-size: cover; background-position: center; background-repeat: no-repeat; width: 206.37545710499958px; height: 71.13510937085908px; top: 55px; right: 40%; } } .payment_methods { display: flex; justify-content: center; align-items: center; gap: 7rem; .method { position: relative; img { width: 217.619px; height: 183.25814819335938px; } &:nth-child(2)::before { content: ""; position: absolute; background-image: url(assets/image/left\ arrow.webp); background-size: cover; background-position: center; background-repeat: no-repeat; width: 151.18797302246094px; height: 43.02993392944336px; top: 65px; right: 90%; } &:nth-child(2)::after { content: ""; position: absolute; background-image: url(assets/image/right\ arrow.webp); background-size: cover; background-position: center; background-repeat: no-repeat; width: 151.18797302246094px; height: 43.02993392944336px; top: 65px; left: 90%; } } } } } /*=============== PAGE 6 ===============*/ /*=============== POLICY ===============*/ .policy { padding: 10rem 5rem; background: #FFFCF7; .policy_container { h2 { position: relative; font-size: var(--h3-font-size); font-weight: var(--font-medium); color: var(--medium-sea-green); margin-bottom: 1rem; } .policy_content { .text { display: flex; justify-content: center; align-items: start; flex-direction: column; margin-bottom: 2rem; h3 { font-size: var(--h4-font-size); font-weight: var(--font-semi-bold); color: var(--black-color); span { font-size: var(--h5-font-size); font-weight: var(--font-regular); } } p { font-size: var(--h6-font-size); font-weight: var(--font-regular); color: var(--black-color); width: 100%; } } .content { margin-bottom: 20px; h3 { font-size: var(--h4-font-size); font-weight: var(--font-semi-bold); color: var(--black-color); } p { font-size: var(--h5-font-size); font-weight: var(--font-regular); color: var(--black-color); } ul { list-style: disc; margin-left: 35px; li { font-size: var(--h6-font-size); font-weight: var(--font-regular); color: var(--black-color); } } } } } } /*=============== PAGE 7 ===============*/ /*=============== SINGLE BLOG ===============*/ .single_blog { padding: 10rem 4rem; .single_blog_container { h1 { font-size: 40px; font-weight: var(--font-semi-bold); color: var(--black-color); } .pra { font-size: var(--normal-font-size); font-weight: var(--font-regular); color: var(--black-color); width: 60%; } .single_blog_img_form { display: flex; justify-content: space-between; align-items: start; gap: 20px; .img { margin: 28px 0 100px 0; img { width: 942px; height: 362px; } } .form { width: 386px; height: 374px; padding: 15px; border-radius: 15px; box-shadow: 0 8px 20px #35353F0D; margin: 28px 0 100px 0; form { display: flex; justify-content: space-between; align-items: start; flex-direction: column; gap: 20px; } h6 { font-size: var(--h5-font-size); font-weight: var(--font-regular); color: var(--medium-sea-green); } textarea { width: 100%; height: 122px; color: #707070; font-size: var(--h6-font-size); font-weight: var(--font-regular); background: #F4F5F4; border-radius: 8px; border: 1px solid #F4F5F4; padding: 8px 16px; } input { color: #707070; font-size: var(--h6-font-size); font-weight: var(--font-regular); width: 100%; height: 52px; background: #F4F5F4; border-radius: 8px; border: 1px solid #F4F5F4; padding: 8px 16px; } button { width: 100%; height: 52px; background: var(--medium-sea-green); color: white; font-size: var(--h5-font-size); font-weight: var(--font-regular); border-radius: 8px; box-shadow: 0 1px 4px #19213D14; } } } .single_blog_content { display: flex; justify-content: space-between; gap: 50px; .data { p { font-size: var(--h6-font-size); font-weight: var(--font-regular); color: var(--black-color); } .text { h2 { font-size: var(--h4-font-size); font-weight: var(--font-semi-bold); color: var(--black-color); margin-top: 2.5rem; } h3 { font-size: var(--h5-font-size); font-weight: var(--font-semi-bold); color: var(--black-color); margin-top: 2.5rem; } ul { list-style: disc; margin-left: 40px; li { font-size: var(--h6-font-size); font-weight: var(--font-regular); color: var(--black-color); margin-bottom: 7px; } } ol { margin-left: 40px; li { font-size: var(--h6-font-size); font-weight: var(--font-regular); color: var(--black-color); margin-bottom: 7px; } } table { width: 100%; border-collapse: collapse; font-family: "Poppins", sans-serif; color: var(--black-color); background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.08); display: block; /* عشان يقدر يعمل سكرول */ overflow-x: auto; /* يخلي الجدول يقدر يتسحب في الشاشات الصغيرة */ white-space: nowrap; } /* Header */ thead { background: var(--gray-color); color: #fff; } th { padding: 14px 18px; text-align: left; font-weight: 600; font-size: 15px; } /* Body */ td { padding: 12px 18px; border-bottom: 1px solid #eee; font-size: 14px; } /* Hover effect */ tbody tr:hover { background: rgba(253, 180, 52, 0.1); transition: 0.3s; } a{ font-size: var(--h6-font-size); font-weight: var(--font-medium); color: var(--medium-sea-green); } } } .related { display: flex; justify-content: start; align-items: start; flex-direction: column; gap: 20px; width: 80%; h4 { font-size: var(--h5-font-size); font-weight: var(--font-semi-bold); color: var(--medium-sea-green); margin-bottom: 1rem; } .item { display: flex; justify-content: space-between; align-items: start; gap: 15px; width: 100%; .img { img { width: 116.14646911621094px; height: 114.99999237060547px; object-fit: cover; } } .text { display: flex; /* justify-content: space-between; */ align-items: start; flex-direction: column; gap: 15px; height: 100%; h5 { font-size: var(--normal-font-size); font-weight: var(--font-regular); color: var(--black-color); } p { font-size: 13px; font-weight: var(--font-regular); } } } } } } } /*=============== RELATED BLOGS ===============*/ .related_blogs { padding: 5rem 4rem; .related_blogs_container { h2 { position: relative; font-size: var(--h3-font-size); font-weight: var(--font-medium); color: var(--vivid-orange-peel); margin-bottom: 5rem; span { color: var(--medium-sea-green); } &::after { content: ''; position: absolute; background-image: url(assets/image/line\ 1.webp); background-size: cover; background-position: center; background-repeat: no-repeat; width: 168.79043708340154px; height: 10.300656px; bottom: -10px; left: 5%; } } .blogs-card { display: grid; grid-template-columns: repeat(3, 1fr); /* Creates 3 equal-width columns */ justify-content: center; gap: 48px 30px; } .card { background: white; border-radius: 10px; box-shadow: 0 2px 10px #35353F0D; } .card .img img { width: 100%; height: 200px; border-radius: 12px 12px 0 0; object-fit: cover; } .text { padding: 1.5rem; } .text .satuts { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .text .satuts span { font-size: var(--normal-font-size); color: var(--vivid-orange-peel); font-weight: var(--font-regular); } .satuts .aroow { font-size: var(--h6-font-size); background: none; transform: rotate(45deg); color: var(--medium-sea-green); } .text h3 { font-size: var(--h5-font-size); font-weight: var(--font-regular); color: var(--black-color); margin-bottom: 0.2rem; } .text p { font-size: var(--normal-font-size); font-weight: var(--font-regular); color: #707070; margin-bottom: 1rem; } .text .date { display: flex; align-items: center; gap: 10px; margin-bottom: 1rem; span { font-size: 12px; font-weight: var(--font-regular); color: var(--black-color); } i { background: var(--vivid-orange-peel); padding: 0.5rem; border-radius: 50%; color: white; font-size: 1rem; } } .text .but { display: flex; justify-content: center; align-items: center; background: var(--medium-sea-green); color: white; padding: 0.5rem 1rem; border-radius: 5px; font-size: var(--h6-font-size); font-weight: var(--font-regular); gap: 5px; width: 100%; cursor: pointer; } } } /*=============== PAGE 8 ===============*/ /*=============== SINGLE COURSE ===============*/ .single_course { padding: 10rem 5rem 5rem 5rem; background: #FCA10008; .single_course_container { display: flex; justify-content: space-between; align-items: start; .single_course_content { display: flex; justify-content: space-between; align-items: start; flex-direction: column; gap: 20px; .satuts { display: flex; justify-content: space-between; align-items: center; width: fit-content; gap: 15px; i { background: var(--medium-sea-green); padding: 0.5rem; border-radius: 50%; color: white; font-size: 1rem; } span { font-size: var(--h6-font-size); font-weight: var(--font-regular); color: var(--vivid-orange-peel); } } h1 { font-size: var(--h3-font-size); font-weight: var(--font-medium); color: var(--black-color); width: 628px; } p { font-size: var(--h6-font-size); font-weight: var(--font-regular); color: var(--black-color); width: 628px; /* margin-top: 20px; */ } .single_course_btn { /* margin-top: 60px; */ a { display: flex; justify-content: center; align-items: center; width: 352px; height: 64px; background: var(--medium-sea-green); border-radius: 6px; color: white; font-size: var(--h5-font-size); font-weight: var(--font-regular); } } } .single_course_img { img { width: 503px; height: 350px; border-radius: 8px; box-shadow: 30px 30px 0 var(--medium-sea-green); } } } } /*=============== SINGLE COURSE DATA ===============*/ .single_course_data { padding: 5rem 5rem; .data_container { .text { p { font-size: var(--h6-font-size); font-weight: var(--font-regular); color: var(--black-color); width: 80%; margin: 10px 0; } h2 { font-size: var(--h4-font-size); font-weight: var(--font-semi-bold); color: var(--black-color); margin:2.5em 0 10px 0; } h3 { font-size: var(--h5-font-size); font-weight: var(--font-semi-bold); color: var(--black-color); margin:2.5em 0 10px 0; } ul { list-style: disc; margin-left: 40px; margin-bottom: 1.5rem; li { font-size: var(--h6-font-size); font-weight: var(--font-regular); color: var(--black-color); margin-bottom: 7px; } } ol { margin-left: 40px; margin-bottom: 1.5rem; li { font-size: var(--h6-font-size); font-weight: var(--font-regular); color: var(--black-color); margin-bottom: 7px; } } table { width: 100%; border-collapse: collapse; font-family: "Poppins", sans-serif; color: var(--black-color); background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.08); display: block; /* عشان يقدر يعمل سكرول */ overflow-x: auto; /* يخلي الجدول يقدر يتسحب في الشاشات الصغيرة */ white-space: nowrap; } /* Header */ thead { background: var(--gray-color); color: #fff; } th { padding: 14px 18px; text-align: left; font-weight: 600; font-size: 15px; } /* Body */ td { padding: 12px 18px; border-bottom: 1px solid #eee; font-size: 14px; } /* Hover effect */ tbody tr:hover { background: rgba(253, 180, 52, 0.1); transition: 0.3s; } a{ font-size:18px; font-weight: 600; color: var(--medium-sea-green); text-align:center; text-decoration: underline; } } } } /*=============== FEATURES ===============*/ .features { padding: 5rem 5rem; .features_container { .features_content { display: flex; justify-content: space-between; flex-direction: column; .features_item { display: flex; justify-content: space-between; align-items: start; .item { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 20px; box-shadow: 0 50px 170px #0000000D; border-radius: 30px; width: 400px; height: 493px; h3 { font-size: var(--h4-font-size); font-weight: var(--font-semi-bold); color: var(--black-color); } p { font-size: 18px; font-weight: var(--font-regular); color: var(--black-color); width: 376px; text-align: center; padding: 15px; } } .item1 { img { width: 154px; height: 208px; } } .item2 { position: relative; overflow: hidden; img { width: 145.1999969482422px; height: 144px; } &::after { content: ""; position: absolute; background-image: url(assets/image/features\ after\ 1.webp); background-size: cover; background-position: center; background-repeat: no-repeat; width: 82.644958px; height: 64px; top: 15px; left: 2px; } } .item3 { position: relative; img { width: 129.78775024414062px; height: 168.46881103515625px; } &::after { content: ""; position: absolute; background-image: url(assets/image/stars\ 1.webp); background-size: cover; background-position: center; background-repeat: no-repeat; width: 73px; height: 73px; top: 65px; left: 35px; } &::before { content: ""; position: absolute; background-image: url(assets/image/stars\ 2.webp); background-size: cover; background-position: center; background-repeat: no-repeat; width: 41px; height: 41px; top: 135px; right: 60px; } } } .flexible { display: flex; justify-content: space-between; align-items: center; gap: 40px; padding: 1rem 3rem; width: 100%; background: white; box-shadow: 0 50px 170px #0000000D; margin-top: 2rem; border-radius: 10px; img { width: 149px; height: 149px; } .text { display: flex; justify-content: space-between; align-items: start; flex-direction: column; gap: 5px; h4 { font-size: var(--h4-font-size); font-weight: var(--font-semi-bold); color: var(--black-color); } p { font-size: 18px; font-weight: var(--font-regular); color: var(--black-color); } } } } } } /*=============== PAGE 9 ===============*/ /*=============== FORM ===============*/ .form_page { padding: 10rem 5rem; background-color: white; display: flex; justify-content: center; align-items: center; flex-direction: column; .form_container { background-color: white; padding: 50px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); width: 664px; text-align: center; } h2 { color: var(--black-color); font-size: var(--h4-font-size); margin-bottom: 28px; text-align: center; width: 37%; span { color: var(--vivid-orange-peel); } } .progress-container { width: 644px; background-color: #F6F7FB; border-radius: 5px; height: 10px; margin-bottom: 2rem; } .progress-bar { width: 0%; height: 100%; background-color: var(--medium-sea-green); border-radius: 5px; transition: width 0.3s ease-in-out; } .step-text { font-size: var(--normal-font-size); color: var(--black-color); margin-bottom: 20px; span { color: var(--medium-sea-green); } } .input-group { margin-bottom: 15px; text-align: left; } label { display: block; font-size: var(--normal-font-size); font-weight: var(--font-regular); color: var(--black-color); margin-bottom: 5px; } input, select { width: 100%; padding: 10px; border: 1px solid #EFF1F999; border-radius: 5px; font-size: var(--normal-font-size); font-weight: var(--font-regular); color: #ABAFB1; box-sizing: border-box; background: #EFF1F999; &:focus { border: solid 2px var(--medium-sea-green); outline: none; } } textarea { width: 100%; padding: 10px; border: 1px solid #EFF1F999; border-radius: 5px; font-size: var(--normal-font-size); font-weight: var(--font-regular); color: #ABAFB1; box-sizing: border-box; background: #EFF1F999; height: 166px; &:focus { border: solid 2px var(--medium-sea-green); outline: none; } } .phone-group { display: flex; align-items: center; gap: 10px; } .phone-input { display: flex; width: 100%; } .phone-input select { width: 30%; margin-right: 10px; } .phone-input input { width: 70%; } button { width: 100%; padding: 10px; background-color: var(--medium-sea-green); color: white; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; } button:hover { background-color: #219653; } .iti { width: 100%; } .iti__flag { margin-right: 5px; &:focus { border: solid 2px var(--medium-sea-green); outline: none; } } /* تحسين شكل الـ input */ #phone { width: 100%; padding: 10px; border: 1px solid #EFF1F999; border-radius: 5px; font-size: 16px; color: #ABAFB1; background: #EFF1F999; &:focus { border: solid 2px var(--medium-sea-green); outline: none; } } } /* Popup Styles */ .popup-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); /* خلفية شفافة */ z-index: 1000; justify-content: center; align-items: center; } .popup-content { background: white; padding: 30px; border-radius: 10px; text-align: center; max-width: 400px; width: 90%; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); transform: scale(0.7); opacity: 0; transition: all 0.3s ease; } .popup-content.active { transform: scale(1); opacity: 1; } .popup-content h3 { color: var(--medium-sea-green); margin-bottom: 15px; } .popup-content p { color: #333; margin-bottom: 20px; } .popup-content button { font-size: var(--h6-font-size); background-color: var(--vivid-orange-peel); color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; transition: all 0.3s ease; } /*=============== FOOTER ===============*/ .footer_section { padding: 30px 30px; /* background-color: var(--medium-sea-green); */ background-image: url(assets/image/footer\ bg.webp); background-size: cover; background-position: center; background-repeat: no-repeat; } .footer_data { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-top: 20px; } .img_logo img { width: 198.76px; height: 181.7px; margin-top: 10px; } .footer_info{ display: flex; flex-direction: column; gap: 10px; color: white; } .footer_info h3 { font-size: var(--h4-font-size); font-weight: var(--font-semi-bold); } .footer_info a { font-size: 18px; font-weight: var(--font-regular); color: white; transition: all 0.3s ease; &:hover { transform: translatey(-5px); } } .contact { display: flex; align-items: center; gap: 10px; h4 { font-size: var(--h4-font-size); font-weight: var(--font-semi-bold); } } .footer_info .emial { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 10px; } .footer_info .emial a { font-size: 19px; color: white; transition: all 0.3s ease; } .footer_info .social { display: flex; justify-content: right; align-items: center; gap: 15px; margin-top: 10px; } .footer_info .social a { display: flex; justify-content: center; align-items: center; background-color: white; color: var(--medium-sea-green); padding: 3px; border-radius: 4px; width: 25px; height: 29px; } .footer_copy { position: relative; display: flex; justify-content: space-between; align-items: center; margin: 3rem 0 0 0; &::after { content: ''; position: absolute; background: white; width: 240px; height: 3px; top: -20px; left: 25%; } &::before { content: ''; position: absolute; background: white; width: 240px; height: 3px; top: -20px; right: 25%; } } .footer_copy p { color: white; font-size: var(--normal-font-size); font-weight: var(--font-regular); } .Copyrights { position: relative; &::after { content: ''; position: absolute; background: white; width: 150px; height: 3px; top: -25px; left: -5%; } } .footer_copy p { display: flex; justify-content: center; align-items: center; gap: 10px; a { position: relative; display: flex; justify-content: center; align-items: center; &::before { content: ''; position: absolute; background: white; width: 150px; height: 3px; top: -25px; right: -10%; } } img { width: 116.39999389648438px; height: 12.837583541870117px; } } /*=============== RESPONSIVE DESIGN ===============*/ @media (min-width: 1200px) { .container { margin: 0 auto; } } @media screen and (min-width: 1205px) and (max-width: 1350px) { .nav { height: 70px; padding: 0 1.5rem; } .nav_logo img { width: 180px; height: 58px; } .nav_list { gap: 1.5rem; } .nav_link { font-size: 1.3rem; } .btns { gap: 1rem; } .btns .whatsapp a { font-size: 2rem; } .nav .btn a, .btn-mobile a { font-size: 0.95rem; padding: 0.4rem 1.2rem; } .home { padding: 3rem 1rem; } .home_container { gap: 1.5rem; } .home_video video { width: 460px; height: 320px; } .home_content { width: 50%; } .home_content h1 { font-size: 2rem; } .home_content p { font-size: 0.9rem; } .home_btn .btn-1 { width: 180px; height: 45px; font-size: 0.95rem; } .home_btn .btn-2 { width: 140px; height: 45px; font-size: 0.95rem; i { font-size: 1.3rem; } } .ourblog { padding: 4rem 3rem; .ourblog_content .swiper { height: 600px; } .ourblog_content .swiper-slide { width: 380px !important; height: 565px; } .ourblog_content .swiper_data { max-width: 380px; } .ourblog_content .swiper_text h3 { font-size: 1.1rem; } .ourblog_content .swiper_text p { font-size: 0.8rem; } } } /* للشاشات الكبيرة (1200px وأقل) */ @media (max-width: 1200px) { .nav { height: 70px; padding: 0 1.5rem; } .nav_logo img { width: 180px; height: 58px; } .nav_list { gap: 1.5rem; } .nav_link { font-size: 1.3rem; } .btns { gap: 1rem; } .btns .whatsapp a { font-size: 2rem; } .nav .btn a, .btn-mobile a { font-size: 0.95rem; padding: 0.4rem 1.2rem; } .home { padding: 3rem 1rem; } .home_container { gap: 1.5rem; } .home_video video { width: 460px; height: 320px; } .home_content { width: 50%; } .home_content h1 { font-size: 2rem; } .home_content p { font-size: 0.9rem; } .home_btn .btn-1 { width: 180px; height: 45px; font-size: 0.95rem; } .home_btn .btn-2 { width: 140px; height: 45px; font-size: 0.95rem; i { font-size: 1.3rem; } } .ourblog { padding: 4rem 3rem; .ourblog_content .swiper { height: 600px; } .ourblog_content .swiper-slide { width: 380px !important; height: 565px; } .ourblog_content .swiper_data { max-width: 380px; } .ourblog_content .swiper_text h3 { font-size: 1.1rem; } .ourblog_content .swiper_text p { font-size: 0.8rem; } } .clases { padding: 4rem 3rem; } .clases_img { width: 800px; height: 435px; } .clases_content p { width: 85%; } .clase_item { flex-direction: column; gap: 1.5rem; } .clase_item .item { width: 300px; height: 90px; } .experience { padding: 4rem 3rem; } .experience_container { flex-direction: column; align-items: center; } .experience_content { align-items: center; } .experience_content h2::after { right: 40%; } .experience_img { width: 100% !important; img { width: 100% !important; height: 100% !important; } } .bannar { padding: 4rem 3rem; } .bannar_container { height: 280px; } .bannar_content .input input { width: 500px; height: 60px; } .best-courses { padding: 4rem 3rem; } .best-courses-item { gap: 5rem; } .best-courses-item .item { flex-direction: column; gap: 2rem !important; &:nth-child(2) { flex-direction: column !important; } } .best-courses-item .img { width: 100% !important; img { width: 100% !important; height: 100% !important; } } .best-courses-item .text a { width: 170px; height: 50px; } .feedback { padding: 4rem 3rem; } .feedback_swiper .swiper-slide .feedback_data { max-width: 350px; } .questions { padding: 4rem 3rem; margin-bottom: 10rem; } /*=============== PAGE 2 ===============*/ /*=============== ABOUT US ===============*/ .about { padding: 8rem 2rem 2rem 2rem; } .about_container { gap: 1.5rem !important; } .about_img { width: 50%; img { width: 500px !important; height: 425px !important; } } .about_content h1::after { right: 15% !important; width: 350px !important; } .chouse { padding: 4rem 2rem; } .chouse_img img { width: 350px !important; height: 385px !important; } .chouse_content p { width: 100% !important; } .Message { padding: 4rem 3rem; } .Message-item .item { gap: 5rem; } .Message-item .item .img img { width: 350px !important; height: 325px !important; } .Message-item .item:nth-child(2) .img img { width: 380px !important; height: 315px !important; } .Message-content h2::after { right: 42% !important; } /*=============== PAGE 3 ===============*/ /*=============== COURSES ===============*/ .courses { padding: 8rem 2rem 2rem 2rem; height: auto; /* Allow height to adjust */ } .courses_container { gap: 1.5rem; } .courses_img { img { width: 400px; height: 400px; } } /*=============== ITEM COURSES ===============*/ .item-courses { padding: 4rem 2rem; .item-courses_container { .item-courses_content { .item-courses-item { .item { .img { img { width: 450px; height: 240px; } } } } .midile-item { gap: 3rem; .item { padding: 15px; .img { width: 100%; img { width: 100%; height: 260px; } } } } } } } .midle2 { .item-courses-item { .item { .img { width: 100%; img { width: 100%; height: 260px; } } } } } /*=============== PAGE 4 ===============*/ /*=============== HERO BLOGS ===============*/ .hero-blogs { padding: 12rem 1rem 3rem 1rem; .hero-blogs_container { .hero-blogs_content { .input { input { width: 400px; height: 44px; padding-left: 35px; } button { padding: 8px 16px; left: -5px; bottom: 4px; } } } } } /*=============== BLOGS ===============*/ .blogs { padding: 3rem 1rem; background-size: 100% 500px; /* Adjust background image size */ .blogs_container { .blogs_content { .blogs-card { display: grid; grid-template-columns: repeat(3, 1fr); /* Creates 3 equal-width columns */ justify-content: center; gap: 40px 25px; } .card .img img { height: 180px; } .pagination { gap: 15px; } .pagination button { font-size: 18px; } } } } /*=============== PAGE 5 ===============*/ /*=============== PRICING ===============*/ .pricing { padding: 8rem 3rem; .pricing_container { h2 { font-size: calc(var(--h1-font-size) - 0.5rem); } .pra { font-size: calc(var(--h6-font-size) - 0.1rem); padding: 10px 20px; &::after { width: 110px; height: 60px; right: 35%; } } .pricing_palns { flex-wrap: wrap; /* Allow plans to wrap */ justify-content: center; gap: 3rem; margin-top: 4rem; .cover { height: auto; /* Adjust height dynamically */ padding: 2.5rem 1.5rem; &::after { width: 140px; height: 140px; top: 80px; } p { width: 280px; } .cover-img { position: relative; img { width: 220px; height: 90px; } &::after { width: 55px; height: 53px; top: -30px; right: -20%; } } } .card { height: auto; /* Adjust height dynamically */ padding: 2.5rem 1.5rem; .card_body { .btn { width: 300px; height: 56px; } } } } .bannar { flex-wrap: wrap; gap: 3rem; height: auto; padding: 1.5rem; justify-content: center; .text { width: 55%; p { width: 100%; max-width: 600px; } } .btn { width: 190px; height: 48px; } } } } /*=============== PAYMENT ===============*/ .payment { padding: 0 4rem 8rem 4rem; .payment_container { h2 { font-size: 32px; margin-bottom: 5rem; i { width: 48px; height: 48px; font-size: 26px; } &::after { width: 180px; height: 62px; right: 35%; } } .payment_methods { gap: 5rem; flex-wrap: wrap; justify-content: center; .method { img { width: 190px; height: 160px; } &:nth-child(2)::before, &:nth-child(2)::after { width: 130px; height: 37px; top: 55px; } &:nth-child(2)::before { right: 85%; } &:nth-child(2)::after { left: 85%; } } } } } /*=============== PAGE 6 ===============*/ /*=============== POLICY ===============*/ .policy { padding: 10rem 1rem; } /*=============== PAGE 7 ===============*/ /*=============== SINGLE BLOG ===============*/ .single_blog { padding: 8rem 0rem; .single_blog_container { h1 { font-size: 36px; } .pra { width: 70%; } .single_blog_img_form { .img { margin: 20px 0 50px 0; img { width: 700px; height: 350px; } } .form { width: 350px; height: 374px; padding: 12px; margin: 28px 0 100px 0; } } .single_blog_content { gap: 30px; .data { width: 85%; } .related { width: 40%; h4 { font-size: var(--h5-font-size); font-weight: var(--font-semi-bold); color: var(--medium-sea-green); margin-bottom: 1rem; } .item { .img { img { width: 100px; height: 100px; } } } } } } } /*=============== RELATED BLOGS ===============*/ .related_blogs { padding: 4rem 0rem; .related_blogs_container { h2 { font-size: calc(var(--h3-font-size) - 0.3rem); &::after { width: 140px; height: 8px; } } .blogs-card { display: grid; grid-template-columns: repeat(3, 1fr); /* Creates 3 equal-width columns */ justify-content: center; gap: 40px 30px; } .card { background: white; border-radius: 10px; box-shadow: 0 2px 10px #35353F0D; } .card .img img { height: 180px; } .text { padding: 1.2rem; } } } /*=============== PAGE 8 ===============*/ /*=============== SINGLE COURSE ===============*/ .single_course { padding: 8rem 2rem 4rem 2rem; .single_course_container { .single_course_content { h1 { width: 90%; } p { width: 80%; } } .single_course_img { img { width: 450px; height: auto; } } } } /*=============== SINGLE COURSE DATA ===============*/ .single_course_data { padding: 5rem 3rem; } /*=============== FEATURES ===============*/ .features { padding: 5rem 3rem; .features_container { .features_content { .features_item { .item { width: 310px; p { width: 300px; } } } } } } .footer_section { padding: 25px 25px; } .footer_data { gap: 15px; } .img_logo img { width: 180px; height: 165px; } .footer_info a { font-size: 16px; } .footer_info .emial a { font-size: 17px; } .footer_copy { margin-top: 2.5rem; } .footer_copy::after, .footer_copy::before { width: 200px; } } @media (max-width: 991px) { /* Header */ .nav_menu { position: fixed; top: 0; right: -100%; width: 280px; height: 100%; background: white; flex-direction: column; padding: 2rem; transition: right 0.3s ease; } .nav_list { flex-direction: column; gap: 1.5rem; } /* بنخفي الزرار الأصلي على الشاشات الصغيرة */ .nav .btn { display: none; } /* بنظهر الزرار داخل المنيو على الشاشات الصغيرة */ .nav_menu .btn-mobile { display: flex; justify-content: center; width: 100%; margin-top: 1.5rem; padding: 2px 0px; } .nav_toggle { display: block; font-size: 1.5rem; color: var(--light-blue-color); cursor: pointer; margin-left: 25px; color: var(--vivid-orange-peel); } .nav_close { display: block; font-size: 1.5rem; color: var(--light-blue-color); position: absolute; top: 1rem; right: 1rem; cursor: pointer; } .show-menu { right: 0; } .home { height: auto; padding: 6rem 2rem; } .home_container { flex-direction: column-reverse; gap: 2rem; text-align: center; } .home_content { width: 100%; align-items: center; } .home_content h1 { font-size: 1.8rem; width: 90%; } .home_content p { font-size: 0.85rem; width: 90%; } .home_video video { width: 400px; height: 300px; } .home_btn { flex-direction: row; justify-content: center; gap: 1rem; .btn-1 { width: 250px; height: 50px; font-size: 1rem; } .btn-2 { width: 200px; height: 50px; font-size: 1rem; i { font-size: 1.5rem; } } } .ourblog { padding: 3rem 2rem; .ourblog_content { h4 { &::after { right: 40% !important; } } } /* .ourblog_content .swiper { height: 500px; } .ourblog_content .swiper-slide { width: 320px !important; height: 450px !important; } .ourblog_content .swiper_data { max-width: 320px; } .ourblog_content .swiper_text { padding: 1rem; } .ourblog_content .swiper_text h3 { font-size: 1rem; } .ourblog_content .swiper_text p { font-size: 0.75rem; } .ourblog_content .swiper_text .but { font-size: 0.9rem; } .ourblog_content .btns-swiper { width: 180px; height: 45px; top: 90%; } .ourblog_content .swiper-button-prev, .ourblog_content .swiper-button-next { width: 30px; height: 30px; } */ } .clases { padding: 3rem 2rem; } .clases_img { width: 600px !important; height: 325px !important; } .clases_content p { width: 90%; } .clase_item { flex-direction: row; .item { width: 280px !important; height: 85px !important; h4 { font-size: var(--h6-font-size) !important; } } } .experience { padding: 3rem 2rem; .experience_content { align-items: center !important; p { text-align: center; } } .experience_content { h2 { width: 100% !important; &::after { right: 45%; } } p { width: 100% !important; } } .experience_img { width: 100%; img { width: 100% !important; height: 100% !important; } } .border { align-items: center !important; text-align: center; h6 { width: 100% !important; } } } .bannar { padding: 3rem 2rem; } .bannar_container { height: 250px; } .bannar_content .input input { width: 400px; height: 55px; } .bannar_content .input button { font-size: 0.9rem; } .best-courses { padding: 3rem 2rem; } .best-courses-item .item { flex-direction: column; gap: 2rem !important; &:nth-child(2) { flex-direction: column !important; } } .best-courses-item .img { width: 100% !important; img { width: 100% !important; height: 100% !important; } } .feedback { padding: 3rem 2rem; } .feedback_swiper .swiper-slide .feedback_data { max-width: 300px; } .feedback_swiper .swiper-button-prev, .feedback_swiper .swiper-button-next { width: 40px; height: 40px; } .questions { padding: 3rem 2rem; margin-bottom: 8rem; } .question_header h3 { font-size: 1.2rem; } .question_answer p { width: 90%; } /*=============== PAGE 2 ===============*/ /*=============== ABOUT US ===============*/ .about { padding: 8rem 2rem 3rem 2rem; &::before, &::after { width: 400px; } h1 { width: 70%; } } .about_container { flex-direction: column-reverse !important; align-items: center !important; } .about_img img { width: 400px !important; height: 340px !important; } .about_content { align-items: center !important; text-align: center !important; } .about_content h1::after { right: 50% !important; transform: translateX(50%) !important; width: 300px !important; } .about_content p { width: 100% !important; } .chouse { padding: 3rem 2rem; .chouse_container { flex-direction: column-reverse; align-items: center; .chouse_content { align-items: center; .text { display: flex; flex-direction: column; justify-content: center; align-items: center; } } } } .chouse_img img { width: 300px !important; height: 330px !important; } .chouse_content h2 { font-size: 1.8rem !important; } .chouse_content .items .item { flex-direction: column !important; align-items: center !important; text-align: center !important; } .chouse_content .items .item p { width: 90% !important; } .chouse_content a { width: 250px !important; height: 50px !important; } .Message { padding: 3rem 2rem; .Message_container { .Message_content h2 { &::after { right: 36%; } } } } .Message-item { .item { flex-direction: column !important; gap: 2rem !important; .img { display: flex; justify-content: center; align-items: center; img { width: 300px !important; height: 280px !important; } } .text { align-items: center !important; text-align: center !important; padding: 30px 15px !important; } } } /*=============== PAGE 3 ===============*/ /*=============== COURSES ===============*/ .courses { padding: 6rem 1rem 3rem 1rem; } .courses_container { flex-direction: column-reverse; } .courses_img { img { width: 400px; height: 400px; } } .courses_content { align-items: center; text-align: center; h1 { font-size: calc(var(--h1-font-size) - 0.5rem); width: 80%; } p { font-size: calc(var(--h6-font-size) - 0.2rem); width: 60%; } } /*=============== ITEM COURSES ===============*/ .item-courses { padding: 3rem 3rem; .item-courses_container { .item-courses_content { h2 { font-size: calc(var(--h3-font-size) - 0.3rem); margin-bottom: 3rem; &::after { width: 140px; height: 8px; } } .item-courses-item { .item { flex-direction: column; /* Stack image and text */ gap: 2rem; height: auto; &:nth-child(2) { flex-direction: column; } .img { width: 100%; img { width: 100%; height: 314px; } } .text { h4 { font-size: var(--h5-font-size); } } } } .midile-item { flex-direction: column; /* Stack items */ gap: 1.5rem; .item { padding: 15px; height: auto; .img { width: 100%; img { width: 100%; height: 314px; } } .text { h4 { font-size: var(--h5-font-size); } } } } } } } .midle2 { .item-courses-item { .item { flex-direction: column; /* Stack image and text */ gap: 2rem; height: auto; .img { width: 100%; img { width: 100%; height: 314px; } } .text { h4 { font-size: var(--h5-font-size); } } } } } /*=============== PAGE 4 ===============*/ /*=============== HERO BLOGS ===============*/ .hero-blogs { padding: 10rem 1rem 3rem 1rem; background: #FFFCF7; .hero-blogs_container { .hero-blogs_content { span { width: 100px; height: 30px; font-size: calc(var(--normal-font-size) - 0.1rem); } h2 { font-size: calc(var(--h3-font-size) - 0.3rem); } .input { input { width: 350px; height: 40px; padding-left: 30px; font-size: 14px; } button { padding: 6px 14px; font-size: calc(var(--h6-font-size) - 0.1rem); left: -8px; bottom: 5px; } } } } } /*=============== BLOGS ===============*/ .blogs { padding: 5rem 1rem; background-size: 100% 400px; .blogs_container { .blogs_content { .blogs-card { display: grid; grid-template-columns: repeat(2, 1fr); } .card .img img { height: 160px; } .text { padding: 1.2rem; } .text h3 { font-size: calc(var(--h5-font-size) - 0.2rem); } .text .but { padding: 0.4rem 0.8rem; font-size: calc(var(--h6-font-size) - 0.1rem); } } } } /*=============== PAGE 5 ===============*/ /*=============== PRICING ===============*/ .pricing { padding: 6rem 1.5rem; .pricing_container { h2 { font-size: calc(var(--h1-font-size) - 1rem); } .pra { font-size: calc(var(--h6-font-size) - 0.2rem); padding: 8px 18px; &::after { width: 90px; height: 50px; top: 50px; right: 30%; } } .pricing_palns { flex-direction: column; align-items: center; gap: 2.5rem; .cover { padding: 2rem 1.5rem; width: 424.5px; &::after { width: 120px; height: 120px; top: 60px; } h4 { font-size: calc(var(--h3-font-size) - 0.3rem); } p { font-size: calc(var(--h6-font-size) - 0.1rem) !important; width: 100%; } .cover-img { img { width: 200px; height: 82px; } &::after { width: 50px; height: 48px; top: -25px; } } } .card { width: 424.5px; .card_header { h3 { font-size: calc(var(--h3-font-size) - 0.3rem); } } .card_body { .text { p { font-size: calc(var(--h6-font-size) - 0.1rem); width: 100%; } } .price { h5 { font-size: calc(var(--h1-font-size) - 0.8rem); span { font-size: calc(var(--h6-font-size) - 0.2rem); } } } .btn { width: 100%; height: 52px; a { font-size: calc(var(--h4-font-size) - 0.2rem); } } } } } .bannar { flex-direction: column; align-items: center; text-align: center; gap: 2rem; padding: 1rem; .icon { i { font-size: 60px; } } .text { width: 100%; justify-content: center; align-items: center; h4 { font-size: calc(var(--h3-font-size) - 0.3rem); } p { font-size: calc(var(--h6-font-size) - 0.1rem); text-align: center; } } .btn { width: 200px; height: 44px; a { font-size: calc(var(--h5-font-size) - 0.2rem); } } } } } /*=============== PAYMENT ===============*/ .payment { padding: 0 3rem 6rem 3rem; .payment_container { h2 { font-size: 28px; margin-bottom: 4rem; i { width: 44px; height: 44px; font-size: 24px; } &::after { width: 160px; height: 55px; right: 37%; } } .payment_methods { flex-direction: column; .method { img { width: 170px; height: 143px; } &:nth-child(2)::before, &:nth-child(2)::after { width: 135px; height: 32px; } &:nth-child(2)::before { right: 10%; transform: rotate(80deg); top: -40%; } &:nth-child(2)::after { left: 10%; transform: rotate(95deg); top: 115%; } } } } } /*=============== PAGE 6 ===============*/ /*=============== POLICY ===============*/ .policy { padding: 6rem 1rem; .policy_container { h2 { font-size: calc(var(--h3-font-size) - 0.5rem); } .policy_content { .text { margin-bottom: 1.2rem; h3 { font-size: calc(var(--h4-font-size) - 0.3rem); span { font-size: calc(var(--h5-font-size) - 0.3rem); } } p { font-size: calc(var(--h6-font-size) - 0.2rem); } } .content { margin-bottom: 12px; h3 { font-size: calc(var(--h4-font-size) - 0.3rem); } p { font-size: calc(var(--h5-font-size) - 0.3rem); } ul { margin-left: 25px; li { font-size: calc(var(--h6-font-size) - 0.2rem); } } } } } } /*=============== PAGE 7 ===============*/ /*=============== SINGLE BLOG ===============*/ .single_blog { padding: 6rem 1rem; .single_blog_container { h1 { font-size: 32px; } .pra { font-size: calc(var(--normal-font-size) - 0.1rem); width: 80%; } .single_blog_img_form { flex-direction: column; .img { margin: 15px 0 0 0; width: 100%; img { width: 100%; } } .form { width: 100%; padding: 10px; h6 { font-size: calc(var(--h5-font-size) - 0.2rem); } textarea { height: 100px; font-size: calc(var(--h6-font-size) - 0.1rem); } input, button { height: 48px; font-size: calc(var(--h5-font-size) - 0.2rem); } } } .single_blog_content { display: flex; justify-content: space-between; gap: 50px; .data { p { font-size: var(--h6-font-size); font-weight: var(--font-regular); color: var(--black-color); } .text { h2 { font-size: var(--h4-font-size); font-weight: var(--font-semi-bold); color: var(--black-color); margin-top: 2.5rem; } h3 { font-size: var(--h5-font-size); font-weight: var(--font-semi-bold); color: var(--black-color); margin-top: 2.5rem; } ul { list-style: disc; margin-left: 40px; li { font-size: var(--h6-font-size); font-weight: var(--font-regular); color: var(--black-color); } } ol { margin-left: 40px; li { font-size: var(--h6-font-size); font-weight: var(--font-regular); color: var(--black-color); } } } } .related { display: none; } } } } /*=============== RELATED BLOGS ===============*/ .related_blogs { padding: 5rem 1rem; .related_blogs_container { .blogs-card { grid-template-columns: repeat(2, 1fr); gap: 40px 30px; } } } /*=============== PAGE 8 ===============*/ /*=============== SINGLE COURSE ===============*/ .single_course { padding: 8rem 1rem 3rem 1rem; .single_course_container { flex-direction: column-reverse; gap: 50px; .single_course_content { gap: 10px; .satuts { gap: 15px; span { font-size: calc(var(--h6-font-size) - 0.1rem); } } h1 { font-size: calc(var(--h3-font-size) - 0.3rem); } p { font-size: calc(var(--h6-font-size) - 0.1rem); margin-bottom: 15px; } .single_course_btn { margin-top: 30px; a { width: 260px; height: 52px; font-size: calc(var(--h5-font-size) - 0.2rem); } } } .single_course_img { width: 100%; img { width: 100%; height: 593px; box-shadow: 15px 15px 0 var(--medium-sea-green); } } } } /*=============== SINGLE COURSE DATA ===============*/ .single_course_data { padding: 5rem 1rem; .data_container { .text { p { width: 100%; font-size: calc(var(--h6-font-size) - 0.1rem); } h2 { font-size: calc(var(--h4-font-size) - 0.2rem); } h3 { font-size: calc(var(--h5-font-size) - 0.2rem); } ul { margin-left: 30px; li { font-size: calc(var(--h6-font-size) - 0.1rem); } } ol { margin-left: 30px; li { font-size: calc(var(--h6-font-size) - 0.1rem); } } } } } /*=============== FEATURES ===============*/ .features { padding: 5rem 1rem; .features_container { .features_content { .features_item { flex-direction: column; justify-content: center; align-items: center; gap: 30px; .item { width: 100%; height: fit-content; padding: 2rem 0; p { font-size: 22px; width: 100%; } } } } } } .footer_section { padding: 20px 20px; } .footer_data { flex-direction: column; align-items: center; text-align: center; } .img_logo { margin-bottom: 20px; } .footer_info { align-items: center; } .contact { flex-direction: column; } .footer_info .social { justify-content: center; } .footer_copy { flex-direction: column; text-align: center; gap: 15px; } .footer_copy::after, .footer_copy::before { display: none; } .Copyrights::after { left: 50%; transform: translateX(-50%); } .footer_copy a::before { top: -15px !important; right: 30px !important; } } @media (max-width: 767px) { .nav { height: 50px; } .nav_logo img { width: 120px; height: 38px; } .nav_menu { width: 230px; padding: 1.5rem; } .nav_list { gap: 1rem; } .btns { & .whatsapp { a { font-size: 2rem; } } } .nav_link { font-size: 0.9rem; } .btn-mobile a { font-size: 0.9rem; padding: 0.4rem 1rem; } .nav_toggle, .nav_close { font-size: 1.3rem; } .home_container { gap: 1.5rem; } .home_content h1 { font-size: 1.5rem; } .home_content p { font-size: 0.8rem; } .home_video { video { width: 300px; height: 220px; } &::after { transform: rotate(-45deg); bottom: -28px; right: -25px; } } .home_btn { gap: 0.8rem; .btn-1 { width: 200px; height: 45px; font-size: 0.9rem; } .btn-2 { width: 180px; height: 45px; font-size: 0.9rem; i { font-size: 1.2rem; } } } .ourblog { padding: 2rem 1.5rem; /* .ourblog_content .swiper { height: 400px; } .ourblog_content .swiper-slide { width: 280px !important; height: 400px !important; } .ourblog_content .swiper_data { max-width: 280px; } .ourblog_content .swiper_data .img img { height: 150px; } .ourblog_content .swiper_text h3 { font-size: 0.9rem; } .ourblog_content .swiper_text p { font-size: 0.7rem; } .ourblog_content .swiper_text .but { font-size: 0.85rem; padding: 0.4rem 0.8rem; } .ourblog_content .btns-swiper { width: 160px; height: 40px; top: 92%; } .ourblog_content .swiper-button-prev, .ourblog_content .swiper-button-next { width: 25px; height: 25px; } */ } .clases { padding: 2rem 1.5rem; } .clases_img { width: 450px; height: 245px; } .clases_content p { width: 95%; font-size: 0.9rem; } .clase_item { flex-direction: column; gap: 1rem; } .experience { padding: 2rem 1.5rem; } .experience_container { flex-direction: column-reverse !important; } .experience_content h2 { font-size: 1.8rem; width: 100%; text-align: center; } .experience_content h2::after { right: 50%; transform: translateX(50%); } .experience_img img { width: 300px; height: 310px; } .bannar { padding: 2rem 1.5rem; } .bannar_content h2 { font-size: 1.8rem !important; } .bannar_content p { font-size: 0.8rem; } .bannar_content .input input { width: 500px !important; height: 50px !important; } .bannar_content .input button { font-size: 0.85rem !important; } .best-courses { padding: 2rem 1.5rem; } .best-courses-item .img img { width: 280px; height: 150px; } .best-courses-item .text h4 { font-size: 1.2rem; } .best-courses-item .text p { font-size: 0.8rem; } .best-courses-item .text a { width: 150px; height: 45px; font-size: 0.9rem; } .feedback { padding: 2rem 1.5rem; } .feedback_swiper .swiper-slide .feedback_data { max-width: 250px; } .feedback_swiper .swiper-button-prev, .swiper-button-next { width: 35px; height: 35px; } .questions { padding: 2rem 1.5rem; margin-bottom: 6rem; } .questions_content h2 { font-size: 1.8rem; } .question_header h3 { font-size: 1rem; } .question_answer p { font-size: 0.9rem; width: 95%; } /*=============== PAGE 2 ===============*/ /*=============== ABOUT US ===============*/ .about { padding: 7rem 1.5rem 1rem 1.5rem; &::before, &::after { width: 250px; } } .about_img { width: 100%; display: flex; justify-content: center; align-items: center; img { width: 300px !important; height: 255px !important; } } .about_content h1 { font-size: 1.8rem !important; width: 100%; } .about_content h1::after { width: 250px !important; bottom: 15px !important; } .about_content p { font-size: 0.9rem !important; } .chouse { padding: 2rem 1.5rem; } .chouse_img img { width: 250px !important; height: 275px !important; } .chouse_content h2 { font-size: 1.5rem !important; } .chouse_content span, .chouse_content p { font-size: 0.8rem !important; } .chouse_content .items .item img { width: 50px !important; height: 50px !important; } .chouse_content .items .item h4 { font-size: 0.9rem !important; } .chouse_content a { width: 200px !important; height: 45px !important; font-size: 0.9rem !important; } .Message { padding: 2rem 1.5rem; } .Message-content h2 { font-size: 1.5rem !important; } .Message-content h2::after { width: 200px !important; right: 50% !important; transform: translateX(50%) !important; } .Message-item .item .img img { width: 250px !important; height: 230px !important; } .Message-item .text h4 { font-size: 1.2rem !important; } .Message-item .text p { font-size: 0.9rem !important; } /*=============== PAGE 3 ===============*/ /*=============== COURSES ===============*/ .courses { padding: 6rem 1rem 3rem 1rem; } .courses_container { flex-direction: column-reverse; } .courses_img { img { width: 400px; height: 400px; } } .courses_content { h1 { font-size: calc(var(--h1-font-size) - 0.5rem); width: 80%; } p { font-size: calc(var(--h6-font-size) - 0.2rem); width: 60%; } } /*=============== ITEM COURSES ===============*/ .item-courses { padding: 3rem 3rem; .item-courses_container { .item-courses_content { h2 { font-size: calc(var(--h3-font-size) - 0.3rem); margin-bottom: 3rem; &::after { width: 140px; height: 8px; } } .item-courses-item { .item { flex-direction: column; /* Stack image and text */ gap: 2rem; &:nth-child(2) { flex-direction: column; } .img { width: 100%; img { width: 100%; height: 314px; } } } } .midile-item { flex-direction: column; /* Stack items */ gap: 1.5rem; .item { padding: 15px; .img { width: 100%; img { width: 100%; height: 314px; } } } } } } } .midle2 { .item-courses-item { .item { flex-direction: column; /* Stack image and text */ gap: 2rem; .img { width: 100%; img { width: 100%; height: 314px; } } } } } /*=============== PAGE 4 ===============*/ /*=============== HERO BLOGS ===============*/ .hero-blogs { padding: 8rem 1rem 3rem 1rem; background: #FFFCF7; .hero-blogs_container { .hero-blogs_content { span { width: 90px; height: 28px; font-size: calc(var(--normal-font-size) - 0.2rem); } h2 { font-size: calc(var(--h3-font-size) - 0.5rem); } p { text-align: center; } .input { input { width: 280px; height: 38px; padding-left: 25px; font-size: 13px; } button { padding: 5px 12px; font-size: calc(var(--h6-font-size) - 0.2rem); } } } } } /*=============== BLOGS ===============*/ .blogs { padding: 2rem 1rem; background-size: 100% 300px; .blogs_container { .blogs_content { .blogs-card { grid-template-columns: repeat(2, 1fr); gap: 25px 20px; } .card .img img { height: 140px; } .text { padding: 1rem; } .satuts .aroow { font-size: calc(var(--h6-font-size) - 0.2rem); } .pagination { gap: 10px; } .pagination button { font-size: 17px; } .pagination .current { width: 28px; height: 28px; } } } } /*=============== PAGE 5 ===============*/ /*=============== PRICING ===============*/ .pricing { padding: 5rem 1rem; .pricing_container { h2 { font-size: calc(var(--h1-font-size) - 1.5rem); } .pra { font-size: calc(var(--h6-font-size) - 0.3rem); padding: 7px 16px; &::after { width: 70px; height: 40px; top: 45px; right: 25%; } } .pricing_palns { gap: 2rem; } } } /*=============== PAYMENT ===============*/ .payment_methods { flex-direction: column; .method { img { width: 170px; height: 143px; } &:nth-child(2)::before, &:nth-child(2)::after { width: 135px; height: 32px; } &:nth-child(2)::before { right: 10%; transform: rotate(80deg); top: -40%; } &:nth-child(2)::after { left: 10%; transform: rotate(95deg); top: 115%; } } } /*=============== PAGE 6 ===============*/ /*=============== POLICY ===============*/ .policy { padding: 5rem 1rem; .policy_container { h2 { font-size: calc(var(--h3-font-size) - 0.7rem); margin-bottom: 0.8rem; } .policy_content { .text { margin-bottom: 1rem; h3 { font-size: calc(var(--h4-font-size) - 0.4rem); span { font-size: calc(var(--h5-font-size) - 0.4rem); } } p { font-size: calc(var(--h6-font-size) - 0.3rem); } } .content { margin-bottom: 10px; h3 { font-size: calc(var(--h4-font-size) - 0.4rem); } p { font-size: calc(var(--h5-font-size) - 0.4rem); } ul { margin-left: 20px; li { font-size: calc(var(--h6-font-size) - 0.3rem); } } } } } } /*=============== PAGE 7 ===============*/ /*=============== SINGLE BLOG ===============*/ .single_blog { padding: 5rem 1rem; .single_blog_container { h1 { font-size: 28px; } .pra { width: 100%; } .single_blog_img_form { .img { margin: 10px 0 0 0; } .form { height: fit-content; margin: 28px 0 50px 0; } } .single_blog_content { gap: 20px; .data { .text { h2 { font-size: calc(var(--h4-font-size) - 0.3rem); margin-top: 2rem; } h3 { font-size: calc(var(--h5-font-size) - 0.3rem); margin-top: 2rem; } ul { margin-left: 25px; li { font-size: calc(var(--h6-font-size) - 0.2rem); } } ol { margin-left: 25px; li { font-size: calc(var(--h6-font-size) - 0.2rem); } } th, td { padding: 10px 12px; font-size: 13px; } } } } } } /*=============== RELATED BLOGS ===============*/ .related_blogs { padding: 5rem 1rem; .related_blogs_container { h2 { font-size: calc(var(--h3-font-size) - 0.7rem); margin-bottom: 3rem; &::after { width: 100px; height: 6px; } } .blogs-card { grid-template-columns: repeat(1, 1fr); gap: 25px; .card { border-radius: 4px; } } .card .img img { height: 320px; border-radius: 4px; } .text { padding: 1.rem; } .text .satuts { margin-bottom: 0.8rem; } .text .date { margin-bottom: 0.8rem; } } } /*=============== PAGE 8 ===============*/ /*=============== SINGLE COURSE ===============*/ .single_course { padding: 5rem 2rem 2rem 2rem; .single_course_container { .single_course_content { .satuts { gap: 10px; span { font-size: calc(var(--h6-font-size) - 0.2rem); } } h1 { font-size: calc(var(--h3-font-size) - 0.5rem); } p { font-size: calc(var(--h6-font-size) - 0.2rem); margin-top: 15px; } .single_course_btn { margin-top: 30px; a { width: 220px; height: 48px; font-size: calc(var(--h5-font-size) - 0.3rem); } } } .single_course_img { img { height: 533px; box-shadow: 10px 10px 0 var(--medium-sea-green); } } } } /*=============== SINGLE COURSE DATA ===============*/ .single_course_data { padding: 5rem 2rem; .data_container { .text { p { font-size: calc(var(--h6-font-size) - 0.2rem); margin-bottom: 2rem; } h2 { font-size: calc(var(--h4-font-size) - 0.3rem); } h3 { font-size: calc(var(--h5-font-size) - 0.3rem); } ul { margin-left: 25px; li { font-size: calc(var(--h6-font-size) - 0.2rem); } } ol { margin-left: 25px; li { font-size: calc(var(--h6-font-size) - 0.2rem); } } th, td { padding: 10px 12px; font-size: 13px; } } } } /*=============== FEATURES ===============*/ .features { padding: 5rem 2rem; .features_container { .features_content { .flexible { flex-direction: column; padding: 3rem 1rem; .text { text-align: center; align-items: center; h4 { font-size: calc(var(--h4-font-size) - 0.3rem); } p { font-size: 20px; } } } } } } /*=============== PAGE 9 ===============*/ /*=============== FORM ===============*/ .form_page { padding: 5rem 1rem; h2 { font-size: var(--h5-font-size); width: 75%; } button { margin-top: 10px; } .form_container { padding: 20px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.08); width: 100%; input, textarea { font-size: 14px; } } .progress-container { width: 100%; margin-bottom: 1.5rem; } } .footer_section { padding: 15px 15px; } .img_logo img { width: 150px; height: 135px; } .footer_info h3 { font-size: 1.2rem; } .footer_info a { font-size: 14px; } .footer_info .emial a { font-size: 15px; } .footer_info .social a { width: 22px; height: 26px; } .footer_copy p { font-size: 0.8rem; } .footer_copy a::before { top: -15px !important; right: 22px !important; } .footer_copy img { width: 100px; height: 11px; } } @media (max-width: 576px) { .nav { height: 60px; padding: 0 0.5rem; } .nav_logo img { width: 100px; } .nav_menu { width: 200px; padding: 1rem; } .nav_list { gap: 0.8rem; } .nav_link { font-size: 0.85rem; } .btn-mobile a { font-size: 0.85rem; padding: 0.3rem 0.8rem; } .btns .whatsapp { margin-left: 5rem; } .nav_toggle, .nav_close { font-size: 1.5rem; } .home { padding: 5rem 1rem 3rem 1rem; } .home_container { gap: 1rem; } .home_video { &::after { bottom: -30px; right: 0; width: 32.650964px; height: 35.8832px; } } .home_content h1 { font-size: 1.2rem; width: 100%; } .home_content p { font-size: 0.75rem; width: 100%; } .home_btn { flex-direction: column; gap: 0.5rem !important; .btn-1 { width: 100% !important; height: 40px !important; font-size: 1rem !important; font-weight: var(--font-semi-bold) !important; } .btn-2 { width: 100% !important; height: 40px !important; font-size: 1rem !important; i { font-size: 1.5rem !important; } } } .ourblog { padding: 1.5rem 0rem; .ourblog_content { h2 { font-size: var(--h5-font-size) !important; } h4 { font-size: var(--normal-font-size) !important; &::after { right: 20% !important; } } } .swiper { height: 500px !important; } .swiper-slide { height: fit-content !important; } .ourblog_content .swiper_data { max-width: 260px !important; } .ourblog_content .swiper_data .img img { height: 120px !important; } .ourblog_content .swiper_text { padding: 0.8rem !important; } .ourblog_content .swiper_text h3 { font-size: 0.8rem !important; } .ourblog_content .swiper_text p { font-size: 0.65rem !important; } .ourblog_content .swiper_text .but { font-size: 0.75rem !important; padding: 0.3rem 0.6rem !important; } .ourblog_content .swiper-slide { width: 100% !important; } .ourblog_content { .btns-swiper { width: 165px !important; height: 35px !important; } } .ourblog_content .swiper-button-prev, .ourblog_content .swiper-button-next { width: 30px !important; height: 30px !important; margin-top: -15px; } .swiper-button-next { left: 131px; } .swiper-button-prev { left: 4px; } } .clases { padding: 3rem 1.5rem !important; } .clases_img { width: 300px !important; height: 190px !important; } .clases_content { gap: 0.5rem !important; h2 { font-size: 1.5rem !important; } p { font-size: 0.85rem !important; width: 100% !important; } a { width: 260px !important; height: 50px !important; font-size: var(--h6-font-size) !important; margin-top: 20px !important; border-radius: 4px !important; } } .clase_item { width: 100% !important; gap: 1rem !important; .item { width: 100% !important; height: 70px !important; } } .experience { padding: 3rem 0rem !important; } .experience_content h2 { font-size: 1.5rem !important; } .experience_content p { font-size: 0.85rem !important; width: 80% !important; } .experience_content h2::after { bottom: -10px !important; right: 50% !important; } .border { height: fit-content !important; h6 { font-size: 1rem !important; } } .experience_content a { width: 100% !important; height: 50px !important; font-size: var(--h6-font-size) !important; border-radius: 4px !important; } .bannar { padding: 3rem 0 !important; form { width: 100%; display: flex; justify-content: center; } } .bannar_container { height: 400px !important; padding: 1rem !important; &::before, &::after { display: none !important; } } .bannar_content { /* border-left: 5px solid white !important; border-right: 5px solid white !important; border-top: 3px solid white !important; border-bottom: 3px solid white !important; */ border-left: none !important; border-right: none !important; border-top: 3px solid white !important; border-bottom: 3px solid white !important; } .bannar_content h2 { font-size: 1.5rem !important; } .bannar_content p { font-size: 1rem !important; width: 80%; } .bannar_content .input { width: 100%; input { width: 250px !important; height: 45px !important; font-size: 12px !important; } } .bannar_content .input button { font-size: 0.8rem !important; padding: 10px 5px !important; right: 3px !important; bottom: 3px !important; } .best-courses { padding: 1.5rem 0 !important; h2 { font-size: 1.5rem !important; text-align: start !important; } } .best-courses-item .text h4 { font-size: 1rem !important; } .best-courses-item .text p { font-size: 0.75rem !important; } .best-courses-item .text a { width: 130px !important; height: 40px !important; font-size: 0.85rem !important; } .feedback { padding: 1.5rem 0 !important; .container { margin-inline: 0; } h2 { font-size: var(--h4-font-size) !important; margin-inline: 1.5rem !important; } p { font-size: var(--normal-font-size) !important; margin-inline: 1.5rem !important; margin-bottom: 5px !important; } .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: var(--swiper-pagination-bottom, -30px); height: 50px; } .swiper { padding: 30px 10px !important; .name { h4 { font-size: var(--normal-font-size) !important; } } } .swiper-button-next { left: 85%; } .swiper-button-prev { left: 5%; } } .questions { padding: 1.5rem 0rem !important; margin-bottom: 4rem !important; } .questions_content { display: flex; justify-content: center; align-items: center; flex-direction: column; } .questions_content h2 { font-size: 1.5rem !important; } .questions_content p { width: 70%; } .question_header h3 { font-size: 0.9rem !important; } .question_answer p { font-size: 0.8rem !important; width: 100% !important; } .question_header { padding: 15px 10px; .arrow { font-size: 17px; width: 30px; height: 30px; } } /*=============== PAGE 2 ===============*/ /*=============== ABOUT US ===============*/ .about { padding: 5rem 0rem 3rem 0rem; &::before, &::after { display: none !important; } } .about_img img { width: 250px !important; height: 210px !important; } .about_content h1 { font-size: 1.5rem !important; } .about_content h1::after { width: 200px !important; } .about_content p { font-size: 12px !important; } .chouse { padding: 3rem 1.5rem; } .chouse_img img { width: 200px !important; height: 220px !important; } .chouse_content h2 { font-size: 1.2rem !important; } .chouse_content span, .chouse_content p { font-size: 0.75rem !important; } .chouse_content .items .item img { width: 40px !important; height: 40px !important; } .chouse_content .items .item h4 { font-size: 0.85rem !important; } .chouse_content a { width: 180px !important; height: 40px !important; font-size: 0.85rem !important; } .Message { padding: 3rem 1.5rem; & .Message_container { & .Message_content { & h2 { &::after { width: 200px !important; right: 17%; } } } } } .Message-item .item .img img { width: 200px !important; height: 185px !important; } .Message-item .item:nth-child(2) .img img { width: 190px !important; height: 200px !important; } .Message-item .text h4 { font-size: 1rem !important; } .Message-item .text p { font-size: 0.85rem !important; } .Message-item .text { padding: 20px 10px; } /*=============== PAGE 3 ===============*/ /*=============== COURSES ===============*/ .courses { padding: 6rem 1rem 3rem 1rem; } .courses_container { flex-direction: column-reverse; } .courses_img { img { width: 330px; height: 300px; } } .courses_content { h1 { font-size: calc(var(--h1-font-size) - 1rem); width: 100%; } p { font-size: calc(var(--h6-font-size) - 0.2rem); width: 80%; } .courses_btn { .btn-1 { width: 280px; height: 56px; font-size: var(--h6-font-size); } } } /*=============== ITEM COURSES ===============*/ .item-courses { padding: 3rem 0rem; .item-courses_container { .item-courses_content { h2 { font-size: calc(var(--h3-font-size) - 0.6rem); margin-bottom: 3rem; &::after { width: 140px; height: 8px; } } .item-courses-item { .item { flex-direction: column; /* Stack image and text */ gap: 1rem; &:nth-child(2) { flex-direction: column; } .img { width: 100%; img { width: 100%; height: 250px; border-radius: 4px; } } a { height: 50px !important; } } } .midile-item { flex-direction: column; /* Stack items */ gap: 1rem; .item { padding: 10px; .img { width: 100%; img { width: 100%; height: 250px; } } a { height: 50px !important; } } } } } } .midle2 { .item-courses-item { .item { flex-direction: column; /* Stack image and text */ gap: 1rem; .img { width: 100%; img { width: 100%; height: 250px; } } a { height: 50px !important; } } } } /*=============== PAGE 4 ===============*/ /*=============== HERO BLOGS ===============*/ .hero-blogs { padding: 6rem 1rem 3rem 1rem; .hero-blogs_container { .hero-blogs_content { display: flex; flex-direction: column; justify-content: center; align-items: center; h2 { font-size: calc(var(--h3-font-size) - 0.7rem); } .input { margin-top: 1.5rem; border-radius: 4px; input { padding-left: 30px; } button { left: -5px; } } } } } /*=============== BLOGS ===============*/ .blogs { padding: 3rem 0rem; background-size: 100% 250px; .blogs_container { .blogs_content { .blogs-card { grid-template-columns: repeat(1, 1fr); gap: 20px; .card { border-radius: 4px; } } .card .img img { height: 250px; border-radius: 4px 4px 0 0; } .text { padding: 0.8rem; p { font-size: 14px; } } .text .satuts { margin-bottom: 0.8rem; } .satuts .aroow { font-size: calc(var(--h6-font-size) - 0.1rem); } .text .date { gap: 8px; margin-bottom: 0.8rem; span { font-size: 10px; } i { padding: 0.3rem; font-size: 0.8rem; } } .text .but { padding: 0.3rem 0.6rem; font-size: calc(var(--h6-font-size) - 0.2rem); } .pagination { gap: 8px; margin-top: 15px; } .pagination button { font-size: 14px; } .pagination .current { font-size: 14px; width: 24px; height: 24px; } .pagination .ellipsis { font-size: 14px; } } } } /*=============== PAGE 5 ===============*/ /*=============== PRICING ===============*/ .pricing { padding: 6rem 0rem; .pricing_container { & .pricing_palns { & .cover { .arrow { transform: rotate(90deg); margin: 0; width: 100%; display: flex; justify-content: center; align-items: center; } } } & .pricing_palns { & .card { padding: 2.5rem 1rem; & .card_body { & .text { p { font-size: calc(var(--h6-font-size) - 0.1rem) !important; } } } } } & .bannar { & .text { h4 { font-size: calc(var(--h3-font-size) - 0.4rem); } } } h2 { font-size: 1.5rem } .pra { font-size: calc(var(--h6-font-size) - 0.4rem); padding: 6px 14px; &::after { width: 80px; height: 55px; top: 58px; right: 50%; transform: translateX(50%); } } .pricing_palns { gap: 1.5rem; margin-top: 5rem; .cover, .card { width: fit-content; } } .bannar { padding: 3rem 1rem !important; } } } /*=============== PAYMENT ===============*/ .payment { padding: 0rem 1rem 5rem 1rem; .payment_container { h2 { font-size: 18px; margin-bottom: 2rem; i { width: 36px; height: 36px; font-size: 20px; } &::after { width: 120px; height: 41px; top: -23px; right: 30%; } } .payment_methods { flex-direction: column; .method { img { width: 170px; height: 143px; } &:nth-child(2)::before, &:nth-child(2)::after { width: 135px; height: 32px; display: none; } &:nth-child(2)::before { right: 10%; transform: rotate(80deg); top: -40%; display: none; } &:nth-child(2)::after { left: 10%; transform: rotate(95deg); top: 115%; display: none; } } } } } /*=============== PAGE 6 ===============*/ /*=============== POLICY ===============*/ /*=============== PAGE 7 ===============*/ /*=============== SINGLE BLOG ===============*/ .single_blog { padding: 6rem 0rem; .single_blog_container { h1 { font-size: 26px; } p { font-size: 16px !important; } .single_blog_img_form { .img { margin: 20px 0 0px 0; img { height: 200px; } } } .single_blog_content { gap: 15px; .data { width: 100%; } .related { display: none; } } } } /*=============== RELATED BLOGS ===============*/ .related_blogs { padding: 5rem 0rem; .related_blogs_container { h2 { font-size: calc(var(--h3-font-size) - 0.9rem); margin-bottom: 2rem; &::after { width: 80px; height: 5px; left: 0; } } .blogs-card { gap: 20px; } .card .img img { object-fit: fill; height: 220px; } .text { padding: 0.8rem; } .satuts .aroow { font-size: calc(var(--h6-font-size) - 0.2rem); } .text h3 { font-size: calc(var(--h5-font-size) - 0.3rem); } .text .date { i { padding: 0.3rem; font-size: 0.8rem; } } .text .but { font-size: calc(var(--h6-font-size) - 0.2rem); padding: 0.3rem 0.6rem; } } } /*=============== PAGE 8 ===============*/ /*=============== SINGLE COURSE ===============*/ .single_course { padding: 5rem 0rem 2rem 0rem; .single_course_container { .single_course_content { .satuts { gap: 8px; span { font-size: calc(var(--h6-font-size) - 0.3rem); } } h1 { font-size: calc(var(--h3-font-size) - 0.7rem); width: 100%; } p { font-size: 14px; margin-top: 0px; width: 100%; } .single_course_btn { margin-top: 0px; a { width: 200px; height: 44px; font-size: calc(var(--h5-font-size) -0.4rem); } } } .single_course_img { img { height: 320px; } } } } /*=============== SINGLE COURSE DATA ===============*/ .single_course_data { padding: 3rem 0rem; .data_container { .text { p { font-size: 14px; margin-bottom: 2rem; } h2 { font-size: calc(var(--h4-font-size) - 0.3rem); } h3 { font-size: calc(var(--h5-font-size) - 0.3rem); } ul { margin-left: 25px; li { font-size: calc(var(--h6-font-size) - 0.2rem); } } ol { margin-left: 25px; li { font-size: calc(var(--h6-font-size) - 0.2rem); } } } } } /*=============== FEATURES ===============*/ .features { padding: 3rem 0rem; .features_container { .features_content { .features_item { display: flex; justify-content: space-between; align-items: start; .item { h3 { font-size: calc(var(--h4-font-size) - 0.5rem); } p { font-size: 16px; padding: 0 15px; } } .item3 { &::after { left: 15px; } &::before { right: 35px; } } } .flexible { padding: 2rem 1rem; .text { text-align: center; align-items: center; h4 { font-size: calc(var(--h4-font-size) - 0.5rem); } p { font-size: 16px; } } } } } } .footer_section { padding: 10px 10px; } .img_logo img { width: 120px; height: 108px; } .footer_info h3 { font-size: 1rem; } .footer_info a { font-size: 12px; } .footer_info .emial a { font-size: 13px; } .footer_info .social a { width: 20px; height: 23px; } .footer_copy p { font-size: 0.75rem; } .footer_copy img { width: 90px; height: 10px; } }