:root {
--header-height: 3.5rem;
--Linear-1: linear-gradient(0deg, #014D3E -38.28%, #036355 -1.03%, #00A099 57.25%);
--Linear-2: linear-gradient(90deg, #5E4C1E -6.08%, #736124 26.92%, #9A8731 88.92%, #9A8731 93.92%);
--persain-Green: #00A199;
--Metallic-Sunburst: #9A8731;
--black: #35332F;
--Sonic-Silver: #7B7A7A;
--body-font: 'Montserrat', sans-serif;
--h1-font-size: 2.986rem;
--h2-font-size: 2.986rem;
--h3-font-size: 2.074rem;
--h4-font-size: 1.728rem;
--h5-font-size: 1.44rem;
--h6-font-size: 1.2rem;
--normal-font-size: 1rem;
--font-regular: 400;
--font-medium: 500;
--font-semi-bold: 600;
--font-bold: 700;
--z-tooltip: 10;
--z-fixed: 100;
--Linear: var(--persain-Green);
--Sunglow: var(--Metallic-Sunburst)
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: var(--body-font)
}
html {
scroll-behavior: smooth;
overflow-x: hidden
}
input,
button {
outline: none;
border: none
}
ul {
list-style: none
}
a {
text-decoration: none
}
::-webkit-scrollbar {
width: .6rem;
background-color: transparent;
border-radius: .2rem
}
::-webkit-scrollbar-thumb {
background-color: var(--Linear);
border-radius: 10px
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--Sunglow)
}
.container {
max-width: 1320px;
padding-inline: 1.5rem;
margin: 0 auto
}
.section {
padding-block: 5rem 1rem
}
div.prog {
position: fixed;
top: 0;
left: 0;
width: 10px;
height: 5px;
background-color: var(--Linear);
z-index: 999;
animation: pro linear forwards;
animation-timeline: scroll()
}
@keyframes pro {
0% {
width: 10px;
background-color: #e0f7f6
}
30% {
background-color: #66ccc4
}
50% {
background-color: #33b5ac
}
100% {
width: 100%;
background-color: #00A199
}
}
.header {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
top: 0;
left: 0;
width: 100%;
z-index: var(--z-fixed);
transition: box-shadow .4s;
background: #fff;
box-shadow: 0 0 4px 0 #9A873133;
.subheader {
min-height: 44px;
width: 100%;
background: var(--persain-Green);
display: flex;
justify-content: center;
align-items: center;
.subheader_container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
.searsh {
width: 291px;
height: 29px;
.input {
background: #fff;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
width: 100%;
height: 100%;
border-radius: 21px;
input {
width: 100%;
height: 100%;
font-size: 14px;
font-weight: var(--font-medium);
color: var(--persain-Green);
background: #fff0;
border: none;
outline: none;
padding: 0 8px;
&::placeholder {
color: var(--persain-Green);
font-weight: var(--font-medium)
}
}
.btn_search {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
color: var(--persain-Green);
font-size: 1.2rem;
cursor: pointer;
background: #fff0
}
}
}
.information {
display: flex;
justify-content: center;
align-items: center;
gap: 4rem;
.email,
.time,
.phone {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
color: #fff;
a,
span {
color: #fff;
font-size: 14.75px
}
}
}
}
}
}
.nav {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
height: 83px;
width: 100%
}
.nav_logo img {
width: 53px;
height: 58.280792236328125px
}
.nav_list {
text-align: center;
display: flex;
gap: 2rem
}
.dropdown {
position: relative
}
.dropdown_menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
padding: .5rem 0;
box-shadow: 0 4px 10px rgb(0 0 0 / .1);
list-style: none;
z-index: 1000;
text-align: start;
min-width: 170px
}
.dropdown_menu li a {
display: block;
padding: .5rem 1rem;
text-decoration: none;
color: var(--Sonic-Silver);
white-space: nowrap;
font-size: var(--h6-font-size);
font-weight: var(--font-medium)
}
.dropdown_menu li a:hover {
background-color: #f2f2f2;
color: var(--persain-Green)
}
.dropdown:hover .dropdown_menu {
display: block
}
.dropdown-toggle i {
transition: transform .3s ease
}
.dropdown:hover .dropdown-toggle i {
transform: rotate(180deg)
}
.nav_link,
span {
color: var(--Sonic-Silver);
font-size: var(--h6-font-size);
font-weight: var(--font-medium);
cursor: pointer
}
.nav_link:hover {
color: var(--persain-Green);
transition: all .3s ease
}
.nav_link.active {
color: var(--persain-Green);
font-weight: var(--font-semi-bold)
}
.btns {
display: flex;
align-items: center;
justify-content: center;
gap: 4rem;
.btn_phone {
display: flex;
align-items: center;
justify-content: center;
transform: rotate(-40deg);
animation: ring 1.2s ease-in-out infinite;
transform-origin: 50% 0%;
button {
cursor: pointer;
background-color: #fff0
}
i {
color: var(--persain-Green);
font-size: var(--h3-font-size)
}
}
}
@keyframes ring {
0% {
transform: rotate(-40deg)
}
10% {
transform: rotate(-25deg)
}
20% {
transform: rotate(-50deg)
}
30% {
transform: rotate(-30deg)
}
40% {
transform: rotate(-45deg)
}
50% {
transform: rotate(-35deg)
}
60% {
transform: rotate(-42deg)
}
70% {
transform: rotate(-38deg)
}
80% {
transform: rotate(-41deg)
}
90% {
transform: rotate(-39deg)
}
100% {
transform: rotate(-40deg)
}
}
.nav .btn_free,
.btn-mobile {
display: flex;
justify-content: center;
align-items: center;
width: 206px;
height: 40px;
font-size: var(--h6-font-size);
font-weight: var(--font-medium);
border-radius: 4px;
background: var(--Linear-2);
transition: all .3s ease-in-out;
color: #fff
}
.nav_toggle,
.nav_close,
.btn-mobile,
.information_moblie {
display: none
}
.nav_menu.active {
right: 0
}
.search-overlay {
position: fixed;
inset: 0;
backdrop-filter: blur(10px);
background-color: rgb(0 0 0 / .4);
display: none;
justify-content: center;
align-items: center;
z-index: 9999
}
.search-overlay.active {
display: flex
}
.search-popup {
position: relative;
display: flex;
align-items: center;
gap: 1rem;
width: 100%;
max-width: 461px;
height: 46px;
padding: 0 10px;
background: #fff;
border-radius: 21px;
box-shadow: 0 0 15px rgb(0 0 0 / .2)
}
.expanded-input {
flex: 1;
border: none;
outline: none;
background: #fff0;
padding: 0 8px;
color: var(--persain-Green);
font-size: 14px;
font-weight: 500;
&::placeholder {
color: var(--persain-Green);
font-weight: 500
}
}
.do-search {
background: #fff0;
border: none;
cursor: pointer;
color: var(--persain-Green);
font-size: 1.2rem;
padding: 0 10px
}
.close-search {
position: absolute;
top: .5rem;
right: .8rem;
background: #fff0;
border: none;
font-size: 5rem;
color: var(--persain-Green);
cursor: pointer
}
.home {
padding: 5rem 3rem 5rem 3rem;
.home_container {
background: var(--persain-Green);
border: 5px solid #0CAFA8;
border-radius: 32px;
transform: rotate(1deg);
.home_content {
display: flex;
justify-content: space-between;
align-items: center;
padding: 5rem 3rem 9rem 3rem;
.home_text {
display: flex;
flex-direction: column;
gap: 1.5rem;
h6 {
font-size: 14px;
font-weight: var(--font-bold);
color: var(--persain-Green);
background: #fff;
width: fit-content;
padding: 10px;
border-radius: 4px;
margin-bottom: 1rem
}
h2 {
font-size: var(--h3-font-size);
font-weight: var(--font-semi-bold);
color: #fff
}
p {
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
color: #fff;
width: 702px
}
.features {
display: flex;
flex-direction: column;
gap: 1rem;
p {
display: flex;
justify-content: center;
align-items: center;
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
color: #fff;
width: fit-content;
background: #0CAFA8;
border-radius: 4px;
padding: 10px
}
.first {
display: flex;
justify-content: start;
align-items: center;
gap: 15px
}
}
.home_btns {
display: flex;
gap: 1.5rem;
margin-top: 1rem;
.btn {
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
width: 263px;
height: 42px;
color: #fff;
border: 2px solid #FFF;
border-radius: 4px;
font-size: var(--normal-font-size);
font-weight: var(--font-semi-bold);
transition: color .3s ease-in-out;
cursor: pointer;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #fff;
z-index: 0;
transition: width .3s ease-in-out
}
&:hover::before {
width: 100%
}
span {
position: relative;
font-size: var(--normal-font-size);
font-weight: var(--font-semi-bold);
z-index: 1;
color: inherit;
transition: color .3s ease-in-out
}
&:hover span {
color: #0aa4b5
}
}
.btn_secondary {
display: flex;
justify-content: center;
align-items: center;
width: 181px;
height: 42px;
color: #fff;
background: var(--Metallic-Sunburst);
border: 2px solid #FFF;
border-radius: 4px;
font-size: var(--normal-font-size);
font-weight: var(--font-semi-bold);
transition: color .3s ease-in-out;
&:hover {
background: #fff;
color: var(--persain-Green);
border: 2px solid var(--persain-Green)
}
}
}
}
.home_img {
position: relative;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(8, 1fr);
width: 100%;
max-width: 460px;
aspect-ratio: 460 / 400;
margin-inline: auto;
margin-bottom: 2rem;
img {
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
object-fit: contain
}
.img2 {
grid-column: 1 / 8;
grid-row: 1 / 6;
z-index: 0
}
.img3 {
grid-column: 6 / 12;
grid-row: 1 / 5;
z-index: 1
}
.img1 {
grid-column: 4 / 10;
grid-row: 4 / 9;
z-index: 2
}
.icon1 {
grid-column: 1 / 3;
grid-row: 1 / 2;
align-self: start;
justify-self: start;
z-index: 3;
object-fit: contain;
transform: translate(-30%, -30%);
animation: fload 1.5s ease-in-out 0s infinite normal forwards
}
.icon2 {
grid-column: 11 / 13;
grid-row: 8 / 9;
align-self: end;
justify-self: end;
z-index: 3;
object-fit: contain;
transform: translate(30%, 30%);
animation: fload2 1.5s ease-in-out 0s infinite normal forwards
}
}
}
}
}
@keyframes fload {
0% {
transform: translateY(0)
}
50% {
transform: translateY(-10px)
}
100% {
transform: translateY(0)
}
}
@keyframes fload2 {
0% {
transform: translateY(0)
}
50% {
transform: translateY(10px)
}
100% {
transform: translateY(0)
}
}
.eductional {
padding: 5rem 3rem;
.eductional_container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
h2 {
width: 634px;
font-size: var(--h4-font-size);
font-weight: var(--font-semi-bold);
color: var(--black);
text-align: center;
margin-bottom: 3.5rem
}
.eductional_content {
display: flex;
justify-content: space-between;
align-items: center;
.teacher {
align-items: start
}
.student {
align-items: end
}
.teacher,
.student {
display: flex;
justify-content: space-between;
gap: 3rem;
flex-direction: column;
.teacher_img {
position: relative;
width: 311px;
height: 310px;
border-radius: 8px;
img {
width: 100%;
height: 100%;
object-fit: cover
}
.data {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 212px;
height: 62px;
padding: 10px;
background: var(--Linear-2);
right: -35%;
bottom: -10%;
h3 {
font-size: 15px;
font-weight: var(--font-semi-bold);
color: #fff
}
p {
font-size: 12px;
font-weight: var(--font-medium);
color: #fff
}
}
&::after {
position: absolute;
content: "Teacher";
font-size: 25px;
font-weight: var(--font-semi-bold);
color: var(--Metallic-Sunburst);
top: 20px;
right: -40%
}
}
.teacher_info {
border: 3px solid var(--persain-Green);
padding: 10px;
text-align: center;
width: 372px;
p {
font-size: 12px;
font-weight: var(--font-medium);
color: var(--black)
}
}
.student_img {
position: relative;
width: 311px;
height: 310px;
border-radius: 8px;
img {
width: 100%;
height: 100%;
object-fit: cover
}
.data {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 212px;
height: 62px;
padding: 10px;
background: var(--Linear-1);
left: -35%;
bottom: -10%;
h3 {
font-size: 15px;
font-weight: var(--font-semi-bold);
color: #fff
}
p {
font-size: 12px;
font-weight: var(--font-medium);
color: #fff
}
}
&::after {
position: absolute;
content: "Student";
font-size: 25px;
font-weight: var(--font-semi-bold);
color: var(--persain-Green);
bottom: 30%;
left: -40%
}
}
.student_info {
border: 3px solid var(--Metallic-Sunburst);
padding: 10px;
text-align: center;
width: 372px;
p {
font-size: 12px;
font-weight: var(--font-medium);
color: var(--black)
}
}
}
.line {
position: relative;
width: 604px;
height: 178px;
margin-bottom: 7rem;
img {
width: 100%;
height: 100%
}
&::before {
content: "";
position: absolute;
background-image: url(assets/image/icon\ 3.webp);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 36px;
height: 36px;
top: 25px;
left: 105px
}
&::after {
content: "";
position: absolute;
background-image: url(assets/image/icon\ 4.webp);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 36px;
height: 36px;
bottom: 15px;
right: 245px
}
}
}
}
}
.our_curriculums {
padding: 5rem 3rem;
background-color: var(--persain-Green);
border-radius: 61px 0 61px 0;
background-image: url('assets/image/bg\ 1.webp'), url('assets/image/bg\ 2.webp');
background-position: top left, bottom right;
background-repeat: no-repeat, no-repeat;
background-size: 430.666202px 555.6674838340299px, 555.6674838340299px 555.6674838340299px;
.our_curriculums_container {
.our_curriculums_header {
display: flex;
justify-content: space-between;
align-items: center;
.text {
display: flex;
justify-content: space-between;
align-items: start;
flex-direction: column;
gap: 1rem;
a {
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
width: 208px;
height: 30px;
border: 1px solid #fff;
border-radius: 4px;
color: #fff;
font-size: 14px;
font-weight: var(--font-medium);
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #fff;
z-index: 0;
transition: width .3s ease-in-out
}
&:hover::before {
width: 100%
}
span {
position: relative;
font-size: 14px;
z-index: 1;
color: inherit;
transition: color .3s ease-in-out
}
&:hover span {
color: #0aa4b5
}
}
h2 {
font-size: var(--h4-font-size);
font-weight: var(--font-semi-bold);
color: #fff
}
p {
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
color: #fff;
width: 734px
}
}
.our_curriculums_btn {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1.5rem;
&:hover .arrow i {
transform: translateX(5px)
}
.arrow {
display: flex;
justify-content: center;
align-items: center;
a {
color: #fff;
i {
font-size: var(--h5-font-size);
transition: all .3s ease-in-out
}
}
}
.btn {
a {
display: flex;
justify-content: center;
align-items: center;
gap: 18px;
width: 234px;
height: 45px;
font-size: var(--normal-font-size);
font-weight: var(--font-semi-bold);
border-radius: 33px;
background: #fff;
color: var(--persain-Green)
}
}
}
}
.our_curriculums_content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
.our_curriculum {
display: flex;
justify-content: center;
align-items: center;
margin-top: 5rem;
transition: box-shadow .3s ease-in-out;
&:hover {
box-shadow: 0 12px 24px rgb(0 0 0 / .15);
border-radius: 12px
}
&:hover .btn {
transform: translateY(-10px)
}
.our_curriculum_img {
position: relative;
width: 392px;
aspect-ratio: 392 / 389;
border-radius: 8px;
img {
width: 100%;
height: 100%
}
.our_curriculum_data {
position: absolute;
bottom: 17px;
left: 13px;
display: flex;
justify-content: space-between;
align-items: center;
width: 365px;
height: 117px;
padding: 10px;
background: var(--Linear-2);
border-radius: 4px;
.info {
display: flex;
align-items: start;
gap: 10px;
flex-direction: column;
height: 100%;
width: 75%;
h3 {
font-size: 18px;
font-weight: var(--font-semi-bold);
color: #fff
}
p {
font-size: 12px;
font-weight: var(--font-medium);
color: #fff;
width: 296px
}
}
.btn-lavel {
display: flex;
justify-content: space-between;
align-items: end;
gap: 2rem;
height: 100%;
flex-direction: column;
.lavel {
display: flex;
justify-content: center;
align-items: center;
background: #fff;
width: fit-content;
padding: 0 12px;
height: 20px;
border-radius: 4px;
span {
font-size: 12px;
font-weight: var(--font-bold);
color: var(--Metallic-Sunburst);
white-space: nowrap
}
}
.btn {
display: flex;
justify-content: center;
align-items: center;
background: #fff;
border-radius: 50%;
width: 36px;
height: 36px;
transition: all .3s ease-in-out;
i {
color: var(--Metallic-Sunburst);
font-size: var(--h5-font-size);
transition: all .3s ease-in-out
}
}
}
}
}
}
}
}
}
.our_blog {
padding: 5rem 3rem;
.our_blog_container {
h2 {
font-size: var(--h4-font-size);
font-weight: var(--font-semi-bold);
color: #fff;
background-image: url("assets/image/bg\ 3.webp");
background-position: center;
background-size: 403px 56px;
background-repeat: no-repeat;
text-align: center;
margin-bottom: 4rem;
padding: 10px
}
.our_blog_items {
display: grid;
grid-template-columns: repeat(3, 1fr);
row-gap: 35px;
.item {
display: flex;
justify-content: space-between;
align-items: start;
gap: 1rem;
flex-direction: column;
transition: transform .3s ease-in-out;
&:hover {
transform: translateY(-10px)
}
.item_img {
position: relative;
width: 402px;
height: 207px;
img {
width: 100%;
height: 100%
}
}
.item_content {
display: flex;
justify-content: space-between;
align-items: start;
gap: 10px;
flex-direction: column;
.reaction_date {
display: flex;
justify-content: space-between;
align-items: start;
width: 100%;
margin-bottom: 5px;
.reaction {
display: flex;
justify-content: space-between;
align-items: start;
gap: 1rem;
.love {
display: flex;
justify-content: space-between;
align-items: start;
gap: 10px;
cursor: pointer;
transition: transform .3s ease-in-out;
i {
font-size: var(--h6-font-size);
color: var(--Metallic-Sunburst)
}
h6 {
font-size: 14px;
font-weight: var(--font-medium);
color: #000
}
&:hover {
transform: scale(1.1)
}
}
.like {
display: flex;
justify-content: space-between;
align-items: start;
gap: 10px;
cursor: pointer;
transition: transform .3s ease-in-out;
i {
font-size: var(--h6-font-size);
color: var(--persain-Green)
}
h6 {
font-size: 14px;
font-weight: var(--font-medium);
color: #000
}
&:hover {
transform: scale(1.1)
}
}
}
.date {
span {
font-size: 12px;
font-weight: var(--font-medium);
color: var(--Sonic-Silver)
}
}
}
h3 {
font-size: 18px;
font-weight: var(--font-semi-bold);
color: var(--black);
width: 396px
}
p {
font-size: 12px;
font-weight: var(--font-medium);
color: var(--Sonic-Silver);
width: 368px
}
h4 {
font-size: var(--normal-font-size);
font-weight: var(--font-bold);
color: var(--Metallic-Sunburst);
margin-top: -5px
}
}
}
}
.all_blog {
display: flex;
justify-content: center;
align-items: center;
margin-top: 3rem;
a {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
width: 284px;
height: 48px;
border-radius: 4px;
box-shadow: 0 1px 51px 4px #0000000D;
font-size: var(--h5-font-size);
font-weight: var(--font-semi-bold);
color: var(--persain-Green)
}
}
}
}
.our_story {
padding: 5rem 3rem;
.our_story_container {
.our_story_header {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
flex-direction: column;
text-align: center;
h2 {
font-size: var(--h4-font-size);
font-weight: var(--font-semi-bold);
color: var(--Metallic-Sunburst)
}
p {
width: 921px;
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
color: var(--black)
}
}
.swiper {
margin-top: 7rem;
padding-bottom: 5rem;
.swiper-pagination .swiper-pagination-bullet {
background-color: #fff;
border: 2px solid var(--persain-Green);
opacity: 1;
border-radius: 3px
}
.swiper-pagination .swiper-pagination-bullet-active {
background-color: var(--persain-Green)
}
}
.our_story_testimonials {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1rem;
border: 3px solid var(--persain-Green);
border-radius: 12px;
transition: box-shadow .3s ease-in-out;
&:hover {
box-shadow: 0 12px 24px rgb(0 0 0 / .15);
border-radius: 12px
}
.quote {
display: flex;
justify-content: center;
align-items: center;
width: 55px;
height: 55px;
background: var(--Linear-1);
border-radius: 29px;
color: #fff;
font-size: var(--h5-font-size)
}
p {
position: relative;
width: 358px;
font-size: 15px;
font-weight: var(--font-semi-bold);
color: var(--Sonic-Silver);
margin-bottom: 1rem;
&::before {
content: '';
position: absolute;
background-image: url("assets/image/line\ 2.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
bottom: -15px;
width: 363px;
height: 5px
}
}
.info_user {
display: flex;
gap: 10px;
flex-direction: column;
h4 {
font-size: 18px;
font-weight: var(--font-semi-bold);
color: var(--Metallic-Sunburst)
}
span {
font-size: 12px;
font-weight: var(--font-medium);
color: var(--black)
}
}
}
}
}
.bannar_section {
padding: 5rem 3rem;
.bannar {
display: flex;
justify-content: space-between;
align-items: center;
background: var(--Linear-1);
padding: 2rem 4rem;
border-radius: 22px;
.text {
display: flex;
justify-content: space-between;
align-items: start;
flex-direction: column;
gap: 1rem;
h4 {
font-size: var(--h4-font-size);
font-weight: var(--font-bold);
color: #fff
}
p {
width: 509px;
font-size: var(--normal-font-size);
font-weight: var(--font-semi-bold);
color: #fff
}
a {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
width: 225px;
height: 42px;
color: var(--persain-Green);
background-color: #fff;
border-radius: 4px;
font-size: var(--normal-font-size);
font-weight: var(--font-semi-bold);
margin-top: 1rem;
transition: transform .3s ease-in-out;
i {
transform: rotate(-10deg)
}
&:hover {
transform: translateY(-10px)
}
}
}
.bannar_img {
position: relative;
width: 268px;
height: 268px;
z-index: 2;
img {
width: 100%;
height: 100%;
object-fit: cover
}
&::after {
content: '';
position: absolute;
background-image: url("assets/image/bg\ 2.webp");
background-repeat: no-repeat;
background-position: right;
background-size: cover;
width: 447.3907px;
height: 447.3907px;
left: -44%;
top: -34%;
z-index: -1
}
}
}
}
.questions {
padding: 5rem 3rem
}
.questions_container h2 {
font-size: var(--h4-font-size);
font-weight: var(--font-semi-bold);
color: var(--persain-Green);
text-align: center
}
.questions_container p {
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
color: var(--black);
text-align: center;
margin-bottom: 4rem
}
.questions_accordion {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
width: 50%
}
.questions_content {
display: flex;
justify-content: space-between;
align-items: center
}
.question_item {
margin-bottom: 20px;
background: #fff;
border-radius: 4.91px;
box-shadow: 0 24.56px 32.74px -14.73px #95959540;
width: 100%;
transition: box-shadow .3s ease-in-out;
&:hover {
box-shadow: 0 24.56px 32.74px -14.73px #95959540, 0 0 0 2px var(--persain-Green)
}
}
.question_header {
padding: 25px 20px;
display: flex;
justify-content: start;
flex-direction: row-reverse;
gap: 3rem;
align-items: center;
cursor: pointer
}
.question_header h3 {
font-size: 18px;
font-weight: var(--font-semi-bold)
}
.question_header .plus {
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
color: var(--persain-Green);
width: 24px;
height: 24px;
border-radius: 50%;
transition: transform .3s
}
.question_answer {
display: none
}
.question_answer p {
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
color: var(--black);
width: 80%;
text-align: start;
margin-bottom: 20px
}
.questions_img {
width: 474.6068px;
height: 352px;
img {
width: 100%;
height: 100%
}
}
.question_item.active .question_answer {
display: flex;
justify-content: center;
align-items: center
}
.questions_content_welcome {
display: flex;
justify-content: center;
align-items: center;
margin-top: 3rem;
flex-direction: column;
gap: 3rem;
.btns {
margin-top: 2rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
.btn_question {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
width: 211px;
height: 48px;
background-color: var(--persain-Green);
border-radius: 4px;
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
color: #fff
}
.btn_second {
background-color: #fff;
color: var(--persain-Green);
box-shadow: 0 0 4px 0 #00A09945
}
}
}
.hero_about {
padding: 10rem 3rem 5rem 3rem;
.hero_about_container {
.hero_about_img {
width: 100%;
border-radius: 20px;
overflow: hidden;
img {
display: block;
width: 100%;
height: auto
}
}
}
}
.teaching_strategy {
padding: 5rem 3rem;
.teaching_strategy_container {
h2 {
font-size: var(--h4-font-size);
font-weight: var(--font-semi-bold);
color: var(--persain-Green);
text-align: center;
margin-bottom: 10px
}
p {
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
color: var(--Sonic-Silver);
margin-bottom: 4rem;
text-align: center
}
.teaching_strategy_items {
display: flex;
justify-content: space-between;
align-items: center;
.item {
display: flex;
flex-direction: column;
background-color: var(--persain-Green);
border-radius: 8px;
.item_img {
width: 430px;
height: 330px;
border: 4px solid #00A199;
border-radius: 8px 8px 0 0;
img {
width: 100%;
height: 100%
}
}
.item_info {
text-align: center;
padding: 1rem 0;
h3 {
font-size: var(--h5-font-size);
font-weight: var(--font-bold);
color: #fff
}
}
}
}
}
}
.quran_academies {
padding: 5rem 3rem;
.quran_academies_container {
.quran_academies_content {
position: relative;
display: flex;
justify-content: start;
align-items: center;
.quran_academies_img {
width: 716px;
height: 612px;
img {
width: 100%;
height: 100%
}
}
.quran_academies_info {
position: absolute;
display: flex;
justify-content: space-between;
align-items: start;
flex-direction: column;
gap: 5rem;
right: 10%;
.our_mission {
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
width: 703px;
height: 148px;
border-radius: 12px 22px 22px 12px;
background: var(--Linear-2);
padding: 1rem;
border: 2px solid #FFF;
.img {
width: 115px;
height: 105.17px;
img {
width: 100%;
height: 100%
}
}
.text {
display: flex;
justify-content: space-between;
align-items: start;
flex-direction: column;
gap: 1rem;
h3 {
font-size: var(--h5-font-size);
font-weight: var(--font-semi-bold);
color: #fff
}
p {
font-size: 14px;
font-weight: var(--font-semi-bold);
color: #fff;
width: 513px
}
}
}
.our_vision {
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
width: 703px;
height: 148px;
border-radius: 12px 22px 22px 12px;
background: var(--Linear-2);
padding: 1rem;
border: 2px solid #FFF;
.img {
width: 115px;
height: 105.17px;
img {
width: 100%;
height: 100%
}
}
.text {
display: flex;
justify-content: space-between;
align-items: start;
flex-direction: column;
gap: 1rem;
h3 {
font-size: var(--h5-font-size);
font-weight: var(--font-semi-bold);
color: #fff
}
p {
font-size: 14px;
font-weight: var(--font-semi-bold);
color: #fff;
width: 513px
}
}
}
}
}
}
}
.our_teachers {
padding: 5rem 3rem;
.our_teachers_container {
background: var(--Linear-2);
border-radius: 22px;
padding: 5rem;
h2 {
font-size: var(--h4-font-size);
font-weight: var(--font-semi-bold);
color: #fff;
text-align: center;
margin-bottom: 5.5rem
}
.our_teachers_items {
display: flex;
justify-content: space-between;
align-items: center;
.item {
position: relative;
border: 3px solid #FFF;
box-shadow: 0 1px 4px 0 #0000000D;
border-radius: 8px;
padding: 5rem 1rem 1.5rem 1rem;
img {
position: absolute;
width: 69px;
height: 69px;
top: -30px;
left: 20px
}
.item_info {
display: flex;
justify-content: space-between;
align-items: start;
gap: 1rem;
flex-direction: column;
width: 281px;
h3 {
font-size: 18px;
font-weight: var(--font-bold);
color: #fff
}
ul {
color: #fff;
font-size: 14px;
font-weight: var(--font-medium);
list-style: disc;
padding-left: 1rem;
width: 279px;
li {
margin-bottom: 10px
}
}
}
&:nth-child(1) {
width: 349.915px
}
&:nth-child(2) {
height: 299.1501px
}
&:nth-child(3) {
height: 247px
}
}
}
}
}
.our_school {
padding: 5rem 3rem;
.our_school_container {
.our_school_content {
display: flex;
justify-content: space-between;
align-items: start;
.our_school_info {
display: flex;
justify-content: space-between;
align-items: start;
flex-direction: column;
h2 {
font-size: 35px;
font-weight: var(--font-semi-bold);
color: var(--persain-Green);
margin-bottom: .8rem
}
p {
width: 705px;
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
color: var(--Sonic-Silver);
margin-bottom: 1.5rem
}
}
.our_school_img {
width: 523px;
height: 365px;
border-radius: 8px;
img {
width: 100%;
height: 100%
}
}
}
}
}
.hero-blogs {
padding: 8rem 0 1rem 0;
background: var(--persain-Green);
border-radius: 0 0 60px 60px;
.hero-blogs_container {
background-image: url("assets/image/bg\ 2.webp"), url("assets/image/bg\ 2.webp");
background-position: left, right;
background-repeat: no-repeat, no-repeat;
background-size: 555.6662020957409px 555.6662020957409px, 555.6662020957409px 555.6662020957409px;
padding: 10rem 0 5rem 0;
.hero-blogs_content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
h2 {
font-size: 35px;
font-weight: var(--font-bold);
color: #fff;
margin-bottom: 1rem
}
p {
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
color: #fff;
margin-bottom: 2rem
}
.input {
display: flex;
margin-top: 2.8rem;
background: #fff;
border-radius: 4px;
position: relative;
border: 1px solid var(--persain-Green);
input {
width: 709px;
height: 42px;
border: none;
outline: none;
padding-left: 40px;
border-radius: 8px;
font-size: 18px;
font-weight: var(--font-medium);
color: var(--Sonic-Silver);
&::placeholder {
color: var(--Sonic-Silver)
}
}
button {
position: absolute;
padding: 10px 30px;
font-size: var(--h5-font-size);
font-weight: var(--font-regular);
background-color: #fff0;
color: var(--persain-Green);
border: none;
right: -10px;
bottom: -1px;
border-radius: 0 8px 8px 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center
}
}
}
}
}
.blogs {
padding: 5rem 3rem;
.blogs_container {
.our_blog_items {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
.item {
display: flex;
justify-content: space-between;
align-items: start;
gap: 1rem;
flex-direction: column;
transition: transform .3s ease-in-out;
&:hover {
transform: translateY(-10px)
}
.item_img {
position: relative;
width: 402px;
height: 207px;
img {
width: 100%;
height: 100%
}
}
.item_content {
display: flex;
justify-content: space-between;
align-items: start;
gap: 10px;
flex-direction: column;
width: 402px;
margin-top: 10px;
.reaction_date {
display: flex;
justify-content: space-between;
align-items: start;
width: 100%;
.reaction {
display: flex;
justify-content: space-between;
align-items: start;
gap: 1rem;
.love {
display: flex;
justify-content: space-between;
align-items: start;
gap: 10px;
cursor: pointer;
transition: transform .3s ease-in-out;
i {
font-size: var(--h6-font-size);
color: var(--Metallic-Sunburst)
}
h6 {
font-size: 14px;
font-weight: var(--font-medium);
color: #000
}
&:hover {
transform: scale(1.1)
}
}
.like {
display: flex;
justify-content: space-between;
align-items: start;
gap: 10px;
cursor: pointer;
transition: transform .3s ease-in-out;
i {
font-size: var(--h6-font-size);
color: var(--persain-Green)
}
h6 {
font-size: 14px;
font-weight: var(--font-medium);
color: #000
}
&:hover {
transform: scale(1.1)
}
}
}
.date {
span {
font-size: 12px;
font-weight: var(--font-medium);
color: var(--Sonic-Silver)
}
}
}
h3 {
font-size: 18px;
font-weight: var(--font-semi-bold);
color: var(--black);
width: 396px
}
p {
font-size: 12px;
font-weight: var(--font-medium);
color: var(--Sonic-Silver);
width: 368px
}
h4 {
font-size: var(--normal-font-size);
font-weight: var(--font-bold);
color: var(--Metallic-Sunburst);
margin-top: -5px
}
}
}
}
#pagination {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-top: 3rem;
gap: .5rem
}
#pagination button {
display: flex;
justify-content: center;
align-items: center;
padding: .5rem 1rem;
width: 32px;
height: 32px;
border-radius: 6px;
font-size: 14px;
background-color: #fff;
color: var(--persain-Green);
border: 1px solid var(--persain-Green);
cursor: pointer;
transition: background-color .3s ease, color .3s ease
}
#pagination button:hover:not(.active):not(:disabled) {
background-color: #e0f7f5
}
#pagination button.active {
background-color: var(--persain-Green);
color: #fff;
border: none;
font-weight: 700
}
#pagination button:disabled {
background-color: #fff;
color: var(--persain-Green);
border: 1px solid var(--persain-Green);
cursor: not-allowed;
opacity: .6
}
}
}
.single_blog {
padding: 10rem 3rem 1rem 3rem;
.single_blog_container {
.single_blog_content {
h1 {
font-size: 35px;
font-weight: var(--font-semi-bold);
color: var(--black);
width: 951px
}
.single_newslatte_date_share {
display: flex;
justify-content: space-between;
align-items: center;
margin: 1rem 0;
.date {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
span {
font-size: 18px;
font-weight: var(--font-medium);
color: var(--Sonic-Silver)
}
}
.share {
display: flex;
justify-content: center;
align-items: center;
a {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
font-size: 20px;
font-weight: var(--font-medium);
color: var(--Metallic-Sunburst)
}
}
}
.blog_img {
position: relative;
width: 100%;
height: 451px;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center
}
.play-movie {
width: 75px;
height: 75px;
font-size: var(--h3-font-size)
}
}
}
}
}
.single_blog_data {
padding: 2rem 3rem;
.single_blog_data_container {
.blog_desc {
justify-content: space-between;
align-items: start;
flex-direction: column;
gap: 1rem;
h2 {
font-size: 25px;
font-weight: var(--font-medium);
color: var(--black);
margin-bottom: 20px
}
h3 {
font-size: 21px;
font-weight: var(--font-medium);
color: var(--black);
margin-bottom: 25px;
width: 80%
}
p {
font-size: 18px;
font-weight: var(--font-regular);
color: var(--black);
line-height: 1.9;
width: 80%;
margin-bottom: 20px
}
ul {
list-style: disc;
margin-left: 50px;
li {
font-size: 18px;
font-weight: var(--font-regular);
color: var(--black);
margin-bottom: 15px
}
}
ol {
margin-left: 50px;
li {
font-size: 18px;
font-weight: var(--font-regular);
color: var(--black);
margin-bottom: 15px
}
}
table {
width: 80%;
margin: 2rem 0;
border-collapse: collapse
}
th,
td {
border: 1px solid #000;
padding: 12px;
text-align: center
}
th {
background-color: var(--persain-Green);
color: #fff;
font-size: 18px
}
td {
font-size: 16px;
color: var(--black)
}
a {
color: var(--persain-Green)
}
.table-wrapper {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: 8px;
padding: 8px 0
}
}
.forms {
display: flex;
justify-content: space-between;
align-items: start;
flex-direction: column;
gap: 1rem;
.btns {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
.btn {
display: flex;
justify-content: center;
align-items: center;
width: 183px;
height: 40px;
border-radius: 4px;
background: var(--Metallic-Sunburst);
color: #fff;
font-size: 18px;
font-weight: var(--font-medium);
cursor: pointer
}
.btn_second {
background-color: #fff;
color: var(--Metallic-Sunburst);
box-shadow: 0 0 12px 0 #0000000F
}
}
.form_1,
.form_2 {
display: none;
.form_group {
display: flex;
justify-content: space-between;
align-items: start;
flex-direction: column;
gap: 1rem
}
.group {
display: flex;
justify-content: space-between;
align-items: center;
gap: 3rem
}
label {
font-size: 18px;
font-weight: var(--font-semi-bold);
color: var(--Sonic-Silver)
}
input {
display: flex;
justify-content: center;
align-items: center;
padding: 15px;
width: 592px;
height: 50px;
font-size: 12px;
font-weight: var(--font-medium);
color: var(--Sonic-Silver);
box-shadow: 0 0 4px 0 #00000017;
border: none;
border: none
}
textarea {
display: flex;
justify-content: center;
align-items: center;
padding: 15px;
width: 1202px;
height: 169px;
font-size: 12px;
font-weight: var(--font-medium);
color: var(--Sonic-Silver);
box-shadow: 0 0 4px 0 #00000017;
border: none;
outline: none
}
button {
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
font-weight: var(--font-medium);
color: #fff;
width: 201px;
height: 45px;
border-radius: 30px;
background-color: var(--persain-Green);
margin-top: 3rem;
cursor: pointer
}
}
.form_1.active,
.form_2.active {
display: block
}
.btns .btn.active {
background-color: var(--Metallic-Sunburst);
color: #fff
}
.btns .btn:not(.active) {
background-color: #fff;
color: var(--Metallic-Sunburst);
box-shadow: 0 0 12px 0 #0000000F
}
}
}
}
.related_blog {
padding: 5rem 3rem;
.related_blog_container {
h2 {
font-size: var(--h4-font-size);
font-weight: var(--font-semi-bold);
color: #fff;
text-align: center;
margin-bottom: 3rem;
background-image: url("assets/image/bg\ 3.webp");
background-position: center;
background-size: 403px 52px;
background-repeat: no-repeat
}
.swiper {
padding-bottom: 5rem;
.swiper-pagination .swiper-pagination-bullet {
background-color: #fff;
border: 2px solid var(--Metallic-Sunburst);
opacity: 1
}
.swiper-pagination .swiper-pagination-bullet-active {
background-color: var(--Metallic-Sunburst)
}
}
.items {
.item {
display: flex;
justify-content: space-between;
align-items: start;
gap: 1rem;
flex-direction: column;
.item_img {
position: relative;
width: 402px;
height: 207px;
img {
width: 100%;
height: 100%
}
}
.item_content {
display: flex;
justify-content: space-between;
align-items: start;
gap: 10px;
flex-direction: column;
.reaction_date {
display: flex;
justify-content: space-between;
align-items: start;
width: 100%;
.reaction {
display: flex;
justify-content: space-between;
align-items: start;
gap: 1rem;
.love {
display: flex;
justify-content: space-between;
align-items: start;
gap: 10px;
cursor: pointer;
transition: transform .3s ease-in-out;
i {
font-size: var(--h6-font-size);
color: var(--Metallic-Sunburst)
}
h6 {
font-size: 14px;
font-weight: var(--font-medium);
color: #000
}
&:hover {
transform: scale(1.1)
}
}
.like {
display: flex;
justify-content: space-between;
align-items: start;
gap: 10px;
cursor: pointer;
transition: transform .3s ease-in-out;
i {
font-size: var(--h6-font-size);
color: var(--persain-Green)
}
h6 {
font-size: 14px;
font-weight: var(--font-medium);
color: #000
}
&:hover {
transform: scale(1.1)
}
}
}
.date {
span {
font-size: 12px;
font-weight: var(--font-medium);
color: var(--Sonic-Silver)
}
}
}
h3 {
font-size: 18px;
font-weight: var(--font-semi-bold);
color: var(--black);
width: 396px
}
p {
font-size: 12px;
font-weight: var(--font-medium);
color: var(--Sonic-Silver);
width: 368px
}
h4 {
font-size: var(--normal-font-size);
font-weight: var(--font-bold);
color: var(--Metallic-Sunburst);
margin-top: -5px
}
}
}
}
}
}
.thanks {
background: var(--Linear-1);
.thanks_container {
display: flex;
justify-content: center;
padding: 13rem 3rem 3rem 3rem;
align-items: center;
background-image: url("assets/image/bg\ 4.webp"), url("assets/image/bg\ 5.webp");
background-position: left, right;
background-repeat: no-repeat, no-repeat;
background-size: 697.9px 100%, 697.9px 100%;
.thanks_img {
width: 923px;
height: 592px;
img {
width: 100%;
height: 100%
}
}
}
}
.subscribe {
padding: 5rem 3rem;
.subscribe_container {
h2 {
font-size: var(--h4-font-size);
font-weight: var(--font-semi-bold);
color: var(--black);
text-align: center;
margin-bottom: 5rem
}
.subscribe_content {
display: flex;
justify-content: center;
align-items: center;
.step {
display: flex;
justify-content: start;
align-items: start;
flex-direction: column;
padding: 3rem 2rem;
&:nth-child(1) {
border-top: 3px solid #9A8731;
border-left: 3px solid #9A8731;
border-bottom: 3px solid #9A8731
}
&:nth-child(2) {
border-top: 3px solid #9A8731;
border-left: 3px solid #9A8731;
border-bottom: 3px solid #9A8731
}
&:nth-child(3) {
border: 3px solid #9A8731
}
.num_step {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
span {
display: flex;
justify-content: center;
align-items: center;
width: 52.9537px;
height: 52.9537353515625px;
border-radius: 50%;
background: var(--Linear-1);
color: #fff;
font-size: var(--h4-font-size);
font-weight: var(--font-bold);
border: .71px solid #FFF;
box-shadow: -5px 3px 0 0 var(--persain-Green)
}
h4 {
font-size: 21px;
font-weight: var(--font-bold);
color: var(--black)
}
}
p {
margin: 2rem 0;
width: 333px;
font-size: 14px;
font-weight: var(--font-medium);
color: var(--black)
}
a {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
background-color: var(--Metallic-Sunburst);
color: #fff;
width: 207px;
height: 45px;
border-radius: 34px;
font-size: var(--normal-font-size);
font-weight: var(--font-semi-bold);
margin-top: 2rem;
i {
font-size: var(--h6-font-size)
}
}
}
}
}
}
.libraray_hero {
padding: 8rem 0.75rem 0 0.75rem;
background-color: var(--persain-Green);
.libraray_hero_container {
.libraray_hero_content {
display: flex;
justify-content: space-between;
align-items: center;
.libraray_hero_text {
display: flex;
justify-content: center;
align-items: start;
flex-direction: column;
padding-left: 6rem;
h2 {
font-size: 35px;
font-weight: var(--font-bold);
color: #fff;
margin-bottom: 10px
}
p {
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
color: #fff
}
h4 {
font-size: 18px;
font-weight: var(--font-semi-bold);
color: #fff;
margin-top: 1.5rem
}
.input {
display: flex;
margin-top: 2.8rem;
background: #fff;
border-radius: 4px;
position: relative;
border: 1px solid var(--persain-Green);
input {
width: 510px;
height: 46px;
border: none;
outline: none;
padding-left: 40px;
border-radius: 8px;
font-size: 18px;
font-weight: var(--font-medium);
color: var(--Sonic-Silver);
&::placeholder {
color: var(--Sonic-Silver)
}
}
button {
position: absolute;
padding: 10px 30px;
font-size: var(--h5-font-size);
font-weight: var(--font-regular);
background-color: #fff0;
color: var(--persain-Green);
border: none;
right: -10px;
bottom: -1px;
border-radius: 0 8px 8px 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center
}
}
}
.libraray_hero_img {
width: 665px;
height: 559px;
img {
width: 100%;
height: 100%
}
}
}
}
}
.books {
padding: 5rem 3rem;
.books_container {
.books_content {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4rem;
.item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
box-shadow: 0 1px 51px 4px #0000000D;
transition: box-shadow .3s ease-in-out;
&:hover {
box-shadow: 0 1px 51px 4px #0000001A
}
.item_img {
width: 184px;
height: 188px;
img {
width: 100%;
height: 100%
}
}
.item_text {
display: flex;
justify-content: center;
align-items: start;
gap: 10px;
flex-direction: column;
h3 {
font-size: var(--h6-font-size);
font-weight: var(--font-bold);
color: var(--Sonic-Silver)
}
p {
font-size: 12px;
font-weight: var(--font-medium);
color: var(--Sonic-Silver);
width: 396px;
margin-bottom: 1rem
}
.btn_reaction {
display: flex;
justify-content: space-between;
align-items: center;
width: 383px;
.btn {
a {
display: flex;
justify-content: center;
align-items: center;
width: 174px;
height: 32px;
background-color: var(--persain-Green);
border-radius: 4px;
font-size: 14px;
font-weight: var(--font-semi-bold);
color: #fff
}
}
.reaction {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
i {
display: flex;
justify-content: center;
align-items: center;
width: 21px;
height: 21px;
font-size: 16px;
border-radius: 50%;
padding: .8rem;
background-color: var(--Metallic-Sunburst);
color: #fff;
transition: transform .3s ease-in-out;
&:hover {
transform: translateY(-5px)
}
}
span {
font-size: var(--normal-font-size);
font-weight: var(--font-semi-bold);
color: var(--Sonic-Silver)
}
}
}
}
}
}
}
}
.testimonials {
padding: 15rem 0.75rem 1rem 0.75rem;
background-image: url("assets/image/bg\ 4.webp"), url("assets/image/bg\ 5.webp");
background-position: left top, right top;
background-repeat: no-repeat, no-repeat;
background-size: 697.9px 100%, 697.9px 100%;
.testimonials_container {
h2 {
font-size: 35px;
font-weight: var(--font-bold);
color: var(--Metallic-Sunburst);
text-align: center;
span {
color: var(--persain-Green)
}
}
p {
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
color: var(--Sonic-Silver);
text-align: center;
margin-bottom: 5rem
}
.btn {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 5rem;
a {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
font-size: var(--normal-font-size);
font-weight: var(--font-semi-bold);
color: #fff;
width: 352px;
height: 45px;
background-color: var(--persain-Green);
border-radius: 8px;
transition: gap ease-in-out .3s;
&:hover {
gap: 1rem
}
}
}
.btn_second {
display: flex;
justify-content: center;
align-items: center;
margin: 5rem 0;
a {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
color: #fff;
width: 298px;
height: 48px;
background-color: var(--Metallic-Sunburst);
border-radius: 4px;
i {
font-size: var(--h5-font-size)
}
}
}
.testimonials_items {
display: grid;
grid-template-columns: repeat(3, 1fr);
row-gap: 3rem;
.item {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1rem;
border: 3px solid var(--persain-Green);
border-radius: 12px;
width: fit-content;
transition: box-shadow .3s ease-in-out;
&:hover {
box-shadow: 0 1px 51px 4px #0000001A
}
.quote {
display: flex;
justify-content: center;
align-items: center;
width: 55px;
height: 55px;
background: var(--Linear-1);
border-radius: 29px;
color: #fff;
font-size: var(--h5-font-size)
}
p {
position: relative;
width: 358px;
font-size: 15px;
font-weight: var(--font-semi-bold);
color: var(--Sonic-Silver);
margin-bottom: 1rem;
text-align: start;
&::before {
content: '';
position: absolute;
background-image: url("assets/image/line\ 2.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
bottom: -15px;
width: 363px;
height: 5px
}
}
.info_user {
display: flex;
gap: 10px;
flex-direction: column;
h4 {
font-size: 18px;
font-weight: var(--font-semi-bold);
color: var(--Metallic-Sunburst)
}
span {
font-size: 12px;
font-weight: var(--font-medium);
color: var(--black)
}
}
}
}
}
}
.testimonials_second {
padding-top: 1rem;
margin-bottom: 5rem
}
.welcome {
padding: 11rem 3rem 5rem 3rem;
.welcome_container {
box-shadow: 0 1px 51px 4px #0000000D;
padding: 5rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
h2 {
display: flex;
justify-content: center;
align-items: center;
width: 454px;
height: 67px;
border-radius: 90px;
background-color: var(--Metallic-Sunburst);
font-size: 32px;
font-weight: var(--font-medium);
color: #fff;
margin-bottom: 3rem
}
p {
font-size: 21px;
font-weight: var(--font-medium);
color: var(--black);
width: 831px;
text-align: center
}
.pra {
background: #9A873154
}
.link {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
margin: 3rem 0;
i {
font-size: 14px;
color: var(--persain-Green)
}
a {
font-size: 14px;
font-weight: var(--font-semi-bold);
color: var(--persain-Green);
text-decoration: underline
}
}
.questions_accordion {
p {
font-size: var(--normal-font-size)
}
}
.btns {
margin-top: 2rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
.btn {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
width: 211px;
height: 48px;
background-color: var(--persain-Green);
border-radius: 4px;
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
color: #fff
}
.btn_second {
background-color: #fff;
color: var(--persain-Green);
box-shadow: 0 0 4px 0 #00A09945
}
}
}
}
.capacity_plan {
padding: 5rem 3rem;
.capacity_plan_container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding: 3rem;
width: 783px;
flex-direction: column;
background: var(--Metallic-Sunburst);
border-radius: 12px;
.icon {
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
font-size: 28px;
color: #fff;
border: 2.47px solid #fff;
width: 65.1317px;
height: 65.1317367553711px
}
h2 {
font-size: 23px;
font-weight: var(--font-bold);
color: #fff
}
.capacity_details {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
.item {
display: flex;
align-items: center;
gap: 1rem;
background: #fff;
padding: 5px;
border-radius: 4px;
h3 {
font-size: var(--normal-font-size);
font-weight: var(--font-bold);
color: var(--Metallic-Sunburst)
}
}
}
}
}
.support {
padding: 10rem 0 5rem 0;
.support_container {
.support_title {
font-size: 35px;
font-weight: var(--font-bold);
color: var(--persain-Green);
padding: 0 6rem
}
.support_desc {
font-size: 18px;
font-weight: var(--font-medium);
color: var(--Sonic-Silver);
padding: 0 6rem
}
.support_form {
display: flex;
justify-content: space-between;
align-items: center;
padding: 5rem;
background: #9A873112;
margin-top: 3rem;
.form {
display: flex;
justify-content: space-between;
align-items: start;
flex-direction: column;
gap: 2rem;
padding: 0 1rem;
.form_group {
display: flex;
justify-content: space-between;
align-items: start;
flex-direction: column;
gap: 10px;
label {
font-size: 18px;
font-weight: var(--font-semi-bold);
color: var(--black)
}
.input {
display: flex;
justify-content: space-between;
align-items: start;
gap: 1rem;
padding: 1rem;
width: 472px;
height: 50px;
border-radius: 6px;
background: #fff;
box-shadow: 0 0 4px 0 #0000000D;
input {
font-size: 12px;
font-weight: var(--font-medium);
color: var(--Sonic-Silver);
width: 100%;
height: 100%;
background: #fff0;
border: none
}
i {
color: var(--Metallic-Sunburst)
}
}
.textarea {
width: 472px;
height: 169px;
padding: 10px;
textarea {
width: 100%;
height: 100%;
border: none;
outline: none
}
}
}
button {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
width: 224px;
height: 45px;
padding: 0 1rem 0 2rem;
background-color: var(--Metallic-Sunburst);
border-radius: 30px;
font-size: 18px;
font-weight: var(--font-medium);
color: #fff;
i {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #fff;
width: 28px;
height: 28px;
border-radius: 50%
}
&::after {
content: "";
position: absolute;
width: 1px;
height: 100%;
background-color: #fff;
right: 25%
}
}
}
.content {
display: flex;
justify-content: space-between;
align-items: start;
flex-direction: column;
gap: 3rem;
padding: 86px 46px;
background-color: var(--Metallic-Sunburst);
border-radius: 16px 90px 16px 16px;
.contact_form,
.time {
display: flex;
justify-content: space-between;
align-items: start;
gap: 1rem;
flex-direction: column;
h3 {
font-size: 22px;
font-weight: var(--font-semi-bold);
color: #fff
}
p {
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
color: #fff
}
}
.social {
display: flex;
justify-content: space-between;
align-items: start;
gap: 1rem;
flex-direction: column;
h3 {
font-size: 22px;
font-weight: var(--font-semi-bold);
color: #fff
}
.media {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
i {
font-size: var(--h5-font-size);
color: #fff
}
}
}
}
}
}
}
.free_trial {
padding: 10rem 3rem 5rem 3rem;
.free_trial_container {
.free_trial_title {
font-size: 32px;
font-weight: var(--font-bold);
color: var(--black);
text-align: center;
span {
color: var(--Metallic-Sunburst)
}
}
.free_trial_desc {
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
color: var(--Sonic-Silver);
text-align: center
}
.form {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 2rem;
.free_trial_form {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
gap: 2rem;
padding: 2rem;
border: 1px solid #FFF;
box-shadow: 0 0 4px 0 #9A873133;
margin-top: 3rem;
border-radius: 10px;
.form_group {
display: flex;
justify-content: space-between;
align-items: start;
flex-direction: column;
gap: 10px;
label {
font-size: 18px;
font-weight: var(--font-semi-bold);
color: var(--black)
}
.input {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding: 10px 1rem;
width: 472px;
height: 50px;
border-radius: 6px;
background: #fff;
box-shadow: 0 0 4px 0 #0000000D;
input {
font-size: 12px;
font-weight: var(--font-medium);
color: var(--Sonic-Silver);
width: 100%;
height: 100%;
background: #fff0;
border: none
}
select {
font-size: 12px;
font-weight: var(--font-medium);
color: var(--Sonic-Silver);
width: 100%;
height: 100%;
background: #fff0;
border: none;
option {
width: 100%;
height: 100%;
background: #fff0;
border: none
}
}
i {
color: var(--persain-Green)
}
.iti {
width: 100%;
flex: 1;
input {
padding-left: 52px
}
}
}
}
}
.btns_form {
display: flex;
flex-direction: column;
align-items: start;
gap: 1.2rem;
.btns_form_actions {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
width: 100%;
}
button,
a {
display: flex;
justify-content: center;
align-items: center;
width: 242px;
height: 48px;
background-color: var(--Metallic-Sunburst);
color: #fff;
border-radius: 4px;
gap: 1rem;
font-size: var(--normal-font-size);
font-weight: var(--font-medium)
}
a {
background-color: #fff;
box-shadow: 0 0 4px 0 #9A873133;
color: var(--Metallic-Sunburst)
}
}
}
}
}
.progress-container {
margin: 2rem 0;
display: flex;
justify-content: center;
align-items: center
}
.progress-bar {
display: flex;
justify-content: space-between;
width: 300px;
position: relative
}
.circle {
width: 12px;
height: 12px;
background: #DCD5B7;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
position: relative;
transition: background .3s;
&:nth-child(1)::before {
content: '';
position: absolute;
top: 50%;
left: 17px;
height: 2px;
width: 50px;
background: var(--Metallic-Sunburst);
z-index: 1;
transform: translateY(-50%)
}
&:nth-child(2)::before {
content: '';
position: absolute;
top: 50%;
left: 17px;
height: 2px;
width: 50px;
background: var(--Metallic-Sunburst);
z-index: 1;
transform: translateY(-50%)
}
&:nth-child(3)::before {
content: '';
position: absolute;
top: 50%;
left: 17px;
height: 2px;
width: 50px;
background: var(--Metallic-Sunburst);
z-index: 1;
transform: translateY(-50%)
}
&:nth-child(4)::before {
content: '';
position: absolute;
top: 50%;
left: 17px;
height: 2px;
width: 50px;
background: var(--Metallic-Sunburst);
z-index: 1;
transform: translateY(-50%)
}
}
.circle.active {
background: var(--Metallic-Sunburst)
}
.invite {
padding: 10rem 3rem 5rem 3rem;
.invite_container {
.invite_title {
font-size: 32px;
font-weight: var(--font-bold);
color: var(--black);
text-align: center;
span {
color: var(--Metallic-Sunburst)
}
}
.invite_desc {
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
color: var(--Sonic-Silver);
text-align: center
}
.form {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 2rem;
.invite_form {
display: flex;
justify-content: space-between;
align-items: start;
flex-direction: column;
gap: 2rem;
padding: 2rem;
border: 1px solid #FFF;
box-shadow: 0 0 4px 0 #9A873133;
margin-top: 3rem;
border-radius: 10px;
.form_group {
display: flex;
justify-content: space-between;
align-items: start;
flex-direction: column;
gap: 10px;
label {
font-size: 18px;
font-weight: var(--font-semi-bold);
color: var(--black)
}
.input {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding: 10px 1rem;
width: 472px;
height: 50px;
border-radius: 6px;
background: #fff;
box-shadow: 0 0 4px 0 #0000000D;
input {
font-size: 12px;
font-weight: var(--font-medium);
color: var(--Sonic-Silver);
width: 100%;
height: 100%;
background: #fff0;
border: none
}
select {
font-size: 12px;
font-weight: var(--font-medium);
color: var(--Sonic-Silver);
width: 100%;
height: 100%;
background: #fff0;
border: none;
option {
width: 100%;
height: 100%;
background: #fff0;
border: none
}
}
i {
color: var(--persain-Green)
}
}
}
button {
display: flex;
justify-content: center;
align-items: center;
width: 169px;
height: 48px;
background-color: var(--Metallic-Sunburst);
color: #fff;
border-radius: 4px;
font-size: var(--normal-font-size);
font-weight: var(--font-medium)
}
}
}
}
}
.teacher-form {
padding: 10rem 3rem 5rem 3rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
overflow-x: hidden;
width: 100%;
.progress-container {
margin: 2rem 0;
display: flex;
justify-content: center;
align-items: center;
width: 75%
}
.progress-bar {
display: flex;
justify-content: space-between;
width: 100%;
position: relative
}
.circle {
width: 12px;
height: 12px;
background: #ccc;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
position: relative;
transition: background .3s;
&:nth-child(1)::before {
content: '';
position: absolute;
top: 50%;
left: 14px;
height: 2px;
width: 50px;
background: var(--Metallic-Sunburst);
z-index: 1;
transform: translateY(-50%)
}
&:nth-child(2)::before {
content: '';
position: absolute;
top: 50%;
left: 14px;
height: 2px;
width: 50px;
background: var(--Metallic-Sunburst);
z-index: 1;
transform: translateY(-50%)
}
&:nth-child(3)::before {
content: '';
position: absolute;
top: 50%;
left: 14px;
height: 2px;
width: 50px;
background: var(--Metallic-Sunburst);
z-index: 1;
transform: translateY(-50%)
}
&:nth-child(4)::before {
content: '';
position: absolute;
top: 50%;
left: 14px;
height: 2px;
width: 50px;
background: var(--Metallic-Sunburst);
z-index: 1;
transform: translateY(-50%)
}
&:nth-child(5)::before {
content: '';
position: absolute;
top: 50%;
left: 14px;
height: 2px;
width: 50px;
background: var(--Metallic-Sunburst);
z-index: 1;
transform: translateY(-50%)
}
&:nth-child(6)::before {
content: '';
position: absolute;
top: 50%;
left: 14px;
height: 2px;
width: 50px;
background: var(--Metallic-Sunburst);
z-index: 1;
transform: translateY(-50%)
}
&:nth-child(7)::before {
content: '';
position: absolute;
top: 50%;
left: 14px;
height: 2px;
width: 50px;
background: var(--Metallic-Sunburst);
z-index: 1;
transform: translateY(-50%)
}
&:nth-child(8)::before {
content: '';
position: absolute;
top: 50%;
left: 14px;
height: 2px;
width: 50px;
background: var(--Metallic-Sunburst);
z-index: 1;
transform: translateY(-50%)
}
&:nth-child(9)::before {
content: '';
position: absolute;
top: 50%;
left: 14px;
height: 2px;
width: 50px;
background: var(--Metallic-Sunburst);
z-index: 1;
transform: translateY(-50%)
}
&:nth-child(10)::before {
content: '';
position: absolute;
top: 50%;
left: 14px;
height: 2px;
width: 50px;
background: var(--Metallic-Sunburst);
z-index: 1;
transform: translateY(-50%)
}
&:nth-child(11)::before {
content: '';
position: absolute;
top: 50%;
left: 14px;
height: 2px;
width: 50px;
background: var(--Metallic-Sunburst);
z-index: 1;
transform: translateY(-50%)
}
&:nth-child(12)::before {
content: '';
position: absolute;
top: 50%;
left: 14px;
height: 2px;
width: 50px;
background: var(--Metallic-Sunburst);
z-index: 1;
transform: translateY(-50%)
}
&:nth-child(13)::before {
content: '';
position: absolute;
top: 50%;
left: 14px;
height: 2px;
width: 50px;
background: var(--Metallic-Sunburst);
z-index: 1;
transform: translateY(-50%)
}
&:nth-child(14)::before {
content: '';
position: absolute;
top: 50%;
left: 14px;
height: 2px;
width: 50px;
background: var(--Metallic-Sunburst);
z-index: 1;
transform: translateY(-50%)
}
&:nth-child(15)::before {
content: '';
position: absolute;
top: 50%;
left: 14px;
height: 2px;
width: 50px;
background: var(--Metallic-Sunburst);
z-index: 1;
transform: translateY(-50%)
}
}
.circle.active {
background: var(--Metallic-Sunburst)
}
.form-title {
font-size: 32px;
font-weight: var(--font-bold);
text-align: center;
color: var(--black);
width: 100%;
max-width: 774px;
margin-bottom: 1rem;
span {
color: var(--Metallic-Sunburst)
}
}
.form-desc {
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
color: var(--Sonic-Silver);
text-align: center;
margin-bottom: 2rem
}
.form {
display: flex;
flex-direction: column;
gap: 2rem;
background: #fff;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 0 10px rgb(0 0 0 / .1);
width: 100%;
max-width: 774px;
box-sizing: border-box
}
.teacher_info,
.education_info,
.required_content_info,
.time_info {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem
}
.form-section h3 {
font-size: var(--h5-font-size);
font-weight: var(--font-semi-bold);
color: var(--persain-Green);
margin-bottom: 1rem
}
.form-section p {
font-size: 12px;
font-weight: var(--font-semi-bold);
color: var(--Sonic-Silver);
margin: -10px 0 1rem 0
}
.form-group {
margin-bottom: 1rem
}
.form-group label {
font-size: 18px;
font-weight: var(--font-semi-bold);
color: var(--black);
display: block;
margin-bottom: .5rem
}
.input {
display: flex;
align-items: center;
width: 100%;
max-width: 415px;
height: 50px;
gap: .5rem;
padding: .5rem;
border: none;
box-shadow: 0 0 4px 0 #0000000D;
border-radius: 4px;
background: #fff
}
.custom-multiselect {
display: flex;
align-items: center;
flex-wrap: wrap;
width: 100%;
max-width: 415px;
min-height: 50px;
gap: .5rem;
padding: .5rem;
border: none;
box-shadow: 0 0 4px 0 #0000000D;
border-radius: 4px;
background: #fff;
position: relative;
cursor: pointer
}
.custom-multiselect i {
font-size: 18px;
color: var(--persain-Green)
}
.selected-items {
display: flex;
flex-wrap: wrap;
gap: .3rem;
flex: 1;
min-width: 0
}
.selected-items .item {
background: var(--persain-Green);
color: #fff;
padding: 3px 6px;
border-radius: 3px;
display: flex;
align-items: center;
gap: 5px;
font-size: 14px
}
.selected-items .item span {
cursor: pointer;
font-weight: 700
}
.arrow {
margin-left: auto;
font-size: 14px;
color: gray
}
.dropdown {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: #fff;
box-shadow: 0 2px 6px rgb(0 0 0 / .1);
border-radius: 4px;
display: none;
z-index: 10
}
.dropdown div {
padding: 8px;
cursor: pointer
}
.dropdown div:hover {
background: #f5f5f5
}
.input i {
color: var(--persain-Green)
}
.form_input {
flex: 1;
min-width: 0;
border: none;
outline: none;
font-size: var(--normal-font-size);
color: var(--Sonic-Silver)
}
.form_input:focus {
outline: none
}
.submit-btn {
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
padding: .75rem 1.5rem;
background: var(--Metallic-Sunburst);
color: #fff;
border: none;
border-radius: 4px;
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
cursor: pointer;
width: 100%
}
.submit-btn i {
color: #fff
}
}
@media (max-width: 576px) {
.teacher_info,
.education_info,
.required_content_info,
.time_info {
grid-template-columns: 1fr;
gap: 1rem
}
.form-group {
min-width: 0
}
.progress-container {
width: 100%;
overflow-x: auto
}
.circle {
width: 8px !important;
height: 8px !important
}
.circle::before {
width: 12px !important;
left: 8px !important
}
}
.hero_single_curriculums {
padding: 10rem 3rem 5rem 3rem;
.hero_single_curriculums_container {
.hero_single_curriculums_img {
position: relative;
width: 100%;
height: 438px;
img {
width: 100%;
height: 100%;
object-fit: cover
}
.data {
top: 15%;
left: 2%;
display: flex;
justify-content: space-around;
align-items: start;
flex-direction: column;
gap: 10px;
width: 396px;
height: 294px;
position: absolute;
background-color: #fff;
border-radius: 12px;
padding: 1rem;
.info {
h1 {
font-size: var(--h4-font-size);
font-weight: var(--font-semi-bold);
color: var(--black)
}
p {
font-size: 18px;
font-weight: var(--font-medium);
color: var(--Sonic-Silver);
width: 371px
}
}
.rating {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
h3 {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
font-size: 12px;
font-weight: var(--font-semi-bold);
color: var(--persain-Green)
}
.stars {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
.icons {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
i {
font-size: var(--normal-font-size);
color: #D3A320
}
}
span {
font-size: 12px;
font-weight: var(--font-bold);
color: var(--persain-Green)
}
}
}
a {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
width: 100%;
height: 48px;
color: #fff;
background-color: var(--Metallic-Sunburst);
border-radius: 4px;
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
transition: gap .3s ease-in-out;
&:hover {
gap: 1rem
}
}
}
.time {
position: absolute;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 0 3px 0 #00000017;
background: var(--Linear-1);
border-radius: 4px;
gap: 3rem;
width: 313px;
height: 48px;
padding: 0 1rem;
right: 25px;
bottom: 25px;
.estimate {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
h3 {
font-size: 20px;
font-weight: var(--font-semi-bold);
color: #fff
}
i {
font-size: 20px;
color: #fff
}
}
.date_time {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
background: #EEE;
border-radius: 5px;
width: 113px;
height: 30px;
h3 {
font-size: var(--normal-font-size);
font-weight: var(--font-bold);
color: var(--persain-Green)
}
span {
font-size: 12px;
font-weight: var(--font-semi-bold);
color: var(--persain-Green)
}
}
}
}
.btns {
display: flex;
justify-content: start;
align-items: center;
margin-top: 1rem;
button {
position: relative;
font-size: 20px;
font-weight: var(--font-medium);
color: var(--Sonic-Silver);
background: #fff0;
cursor: pointer;
border: none;
padding: 0 15px;
margin: 0 10px;
&:hover {
color: var(--persain-Green)
}
&::before {
content: "";
position: absolute;
width: 100%;
height: 1.5px;
background-color: var(--persain-Green);
bottom: -5px;
left: 0;
transition: transform .3s
}
&::after {
content: "";
position: absolute;
width: 13px;
height: 13px;
border: 1.8px solid var(--persain-Green);
border-radius: 50%;
bottom: -12px;
right: -20px;
transition: border-color .3s, background-color .3s
}
&.active::after {
background-color: var(--persain-Green)
}
}
}
}
}
.single_curriculums_data {
padding: 0 0.75rem;
.single_curriculums_data_container {
.curriculums_desc {
justify-content: space-between;
align-items: start;
flex-direction: column;
gap: 1rem;
margin-bottom: 2rem;
h2 {
font-size: 25px;
font-weight: var(--font-medium);
color: var(--black);
margin-bottom: 20px
}
h3 {
font-size: 21px;
font-weight: var(--font-medium);
color: var(--black);
margin-bottom: 25px;
width: 80%
}
p {
font-size: 18px;
font-weight: var(--font-regular);
color: var(--black);
line-height: 1.9;
width: 80%;
margin-bottom: 20px
}
ul {
list-style: disc;
margin-left: 50px;
li {
font-size: 18px;
font-weight: var(--font-regular);
color: var(--black);
margin-bottom: 15px
}
}
ol {
margin-left: 50px;
li {
font-size: 18px;
font-weight: var(--font-regular);
color: var(--black);
margin-bottom: 15px
}
}
table {
width: 80%;
margin: 2rem 0;
border-collapse: collapse
}
th,
td {
border: 1px solid #000;
padding: 12px;
text-align: center
}
th {
background-color: var(--persain-Green);
color: #fff;
font-size: 18px
}
td {
font-size: 16px;
color: var(--black)
}
a {
color: var(--persain-Green)
}
.table-wrapper {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: 8px;
padding: 8px 0
}
}
.testimonials_items {
display: grid;
grid-template-columns: repeat(3, 1fr);
row-gap: 3rem;
margin-bottom: 2rem;
.item {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1rem;
border: 3px solid var(--persain-Green);
border-radius: 12px;
width: fit-content;
.quote {
display: flex;
justify-content: center;
align-items: center;
width: 55px;
height: 55px;
background: var(--Linear-1);
border-radius: 29px;
color: #fff;
font-size: var(--h5-font-size)
}
p {
position: relative;
width: 358px;
font-size: 15px;
font-weight: var(--font-semi-bold);
color: var(--Sonic-Silver);
margin-bottom: 1rem;
text-align: start;
&::before {
content: '';
position: absolute;
background-image: url("assets/image/line\ 2.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
bottom: -15px;
width: 363px;
height: 5px
}
}
.info_user {
display: flex;
gap: 10px;
flex-direction: column;
h4 {
font-size: 18px;
font-weight: var(--font-semi-bold);
color: var(--Metallic-Sunburst)
}
span {
font-size: 12px;
font-weight: var(--font-medium);
color: var(--black)
}
}
.stars {
display: flex;
gap: 4px;
color: #D3A320;
font-size: 14px
}
}
}
.review_form_wrapper {
margin-top: 3rem;
h3 {
font-size: 22px;
font-weight: var(--font-semi-bold);
color: var(--persain-Green);
margin-bottom: 1.5rem
}
.review_form {
display: flex;
flex-direction: column;
gap: 1.5rem;
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 2rem;
border: 1px solid #FFF;
box-shadow: 0 0 4px 0 #9A873133;
border-radius: 10px;
.review_form_fields_row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
.form_group {
min-width: 0
}
}
.form_group {
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
label {
font-size: 18px;
font-weight: var(--font-semi-bold);
color: var(--black)
}
.input {
display: flex;
align-items: center;
gap: 1rem;
padding: 10px 1rem;
border-radius: 6px;
background: #fff;
box-shadow: 0 0 4px 0 #0000000D;
input,
select {
width: 100%;
font-size: 12px;
font-weight: var(--font-medium);
color: var(--Sonic-Silver);
background: #fff0;
border: none;
outline: none
}
i {
color: var(--persain-Green)
}
}
.textarea {
align-items: start;
padding: 1rem;
textarea {
width: 100%;
min-height: 120px;
font-size: 12px;
font-weight: var(--font-medium);
color: var(--Sonic-Silver);
background: #fff0;
border: none;
outline: none;
resize: vertical
}
}
}
button[type="submit"] {
display: flex;
justify-content: center;
align-items: center;
width: fit-content;
padding: 0 1.5rem;
height: 48px;
background-color: var(--Metallic-Sunburst);
color: #fff;
border-radius: 4px;
font-size: var(--normal-font-size);
font-weight: var(--font-medium)
}
}
}
.books_content {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4rem;
margin-bottom: 2rem;
.item {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
box-shadow: 0 1px 51px 4px #0000000D;
.item_img {
width: 184px;
height: 188px;
img {
width: 100%;
height: 100%
}
}
.item_text {
display: flex;
justify-content: center;
align-items: start;
gap: 10px;
flex-direction: column;
h3 {
font-size: var(--h6-font-size);
font-weight: var(--font-bold);
color: var(--Sonic-Silver)
}
p {
font-size: 12px;
font-weight: var(--font-medium);
color: var(--Sonic-Silver);
width: 396px;
margin-bottom: 1rem
}
.btn_reaction {
display: flex;
justify-content: space-between;
align-items: center;
width: 383px;
.btn {
a {
display: flex;
justify-content: center;
align-items: center;
width: 174px;
height: 32px;
background-color: var(--persain-Green);
border-radius: 4px;
font-size: 14px;
font-weight: var(--font-semi-bold);
color: #fff
}
}
.reaction {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
i {
display: flex;
justify-content: center;
align-items: center;
width: 21px;
height: 21px;
font-size: 16px;
border-radius: 50%;
padding: .8rem;
background-color: var(--Metallic-Sunburst);
color: #fff
}
span {
font-size: var(--normal-font-size);
font-weight: var(--font-semi-bold);
color: var(--Sonic-Silver)
}
}
}
.date_houers {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--Metallic-Sunburst);
width: 69px;
height: 20px;
border-radius: 3px;
gap: 3px;
top: 20px;
right: 20px;
h6 {
font-size: 14px;
font-weight: var(--font-bold);
color: #fff
}
span {
font-size: 8px;
font-weight: var(--font-semi-bold);
color: #fff
}
}
}
}
}
}
}
.curriculums_hero {
background-image: url("assets/image/bg\ 4.webp"), url("assets/image/bg\ 5.webp");
background-position: left, right;
background-repeat: no-repeat, no-repeat;
background-size: 774.8974609375px 100%, 697.9px 100%;
.curriculums_hero_container {
position: relative;
padding: 13rem 6rem 7rem 6rem;
background-color: var(--persain-Green);
.curriculums_hero_content {
display: flex;
justify-content: space-between;
align-items: center;
.curriculums_hero_text {
display: flex;
justify-content: center;
align-items: start;
flex-direction: column;
.top {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
span {
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
width: 100px;
height: 25px;
padding: 8px 29px;
font-size: 12px;
font-weight: var(--font-semi-bold);
color: var(--persain-Green)
}
h3 {
font-size: 14px;
font-weight: var(--font-regular);
color: #fff;
font-family: "Pacifico", cursive
}
}
h2 {
font-size: 35px;
font-weight: var(--font-semi-bold);
color: #fff;
margin-bottom: 1rem;
width: 532px
}
p {
font-size: var(--normal-font-size);
font-weight: var(--font-semi-bold);
color: #fff;
margin-bottom: 2rem
}
.input {
display: flex;
margin-top: 2.8rem;
background: #fff;
border-radius: 4px;
position: relative;
border: 1px solid var(--persain-Green);
width: 435px;
height: 45px;
border-radius: 4px;
padding-left: 20px;
input {
width: 100%;
height: 100%;
border: none;
outline: none;
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
color: var(--Sonic-Silver);
&::placeholder {
color: var(--Sonic-Silver)
}
}
button {
position: absolute;
width: 145px;
height: 40px;
font-size: var(--normal-font-size);
font-weight: var(--font-semi-bold);
background-color: var(--persain-Green);
color: #fff;
border: none;
right: 3px;
bottom: 2px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
i {
transition: all .3s ease-in-out
}
&:hover i {
transform: translate(6px, -6px)
}
}
}
}
.curriculums_hero_img {
width: 610px;
height: 399px;
border-radius: 7px;
img {
width: 100%;
height: 100%
}
}
}
.ditals {
position: absolute;
bottom: -5%;
right: 17%;
display: flex;
justify-content: space-around;
align-items: center;
width: 956px;
height: 78px;
background-color: #fff;
border-bottom: 5px solid #00A199;
border-radius: 0 0 11px 11px;
.hours,
.students,
.teachers,
.experience {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
h4 {
font-size: var(--h4-font-size);
font-weight: var(--font-bold);
color: var(--persain-Green)
}
span {
font-size: 14px;
font-weight: var(--font-medium);
color: var(--black)
}
}
}
}
}
.curriculums {
padding: 5rem 3rem;
.curriculums_container {
.curriculums_btns {
display: flex;
justify-content: center;
align-items: center;
gap: 2rem;
margin: 4rem;
button {
display: flex;
justify-content: center;
align-items: center;
width: 235px;
height: 45px;
font-size: 18px;
font-weight: var(--font-bold);
background-color: #fff;
border-radius: 8px;
color: var(--Metallic-Sunburst);
box-shadow: 0 0 4px 0 #9A873133;
border: none;
cursor: pointer;
transition: background-color .3s, color .3s
}
button.active {
background-color: var(--Metallic-Sunburst);
color: #fff
}
}
.curriculums_content {
display: flex;
justify-content: center;
align-items: center;
.curriculum {
display: grid;
grid-template-columns: repeat(3, 1fr);
margin-top: 2rem;
gap: 2.5rem;
.our_curriculum_img {
position: relative;
width: 392px;
aspect-ratio: 392 / 389;
border-radius: 8px;
overflow: hidden;
transition: box-shadow .3s ease-in-out;
&:hover {
box-shadow: 0 12px 24px rgb(0 0 0 / .15);
border-radius: 12px
}
&:hover .btn {
transform: translateY(-10px)
}
img {
width: 100%;
height: 100%;
object-fit: cover
}
.our_curriculum_data {
position: absolute;
bottom: 17px;
left: 13px;
display: flex;
justify-content: space-between;
align-items: center;
width: 365px;
height: 117px;
padding: 10px;
background: var(--Linear-2);
border-radius: 4px;
.info {
display: flex;
align-items: start;
gap: 10px;
flex-direction: column;
height: 100%;
width: 75%;
h3 {
font-size: 18px;
font-weight: var(--font-semi-bold);
color: #fff
}
p {
font-size: 12px;
font-weight: var(--font-medium);
color: #fff;
width: 296px
}
}
.btn-lavel {
display: flex;
align-items: end;
gap: 2rem;
height: 100%;
flex-direction: column;
.lavel {
display: flex;
justify-content: center;
align-items: center;
background: #fff;
width: fit-content;
padding: 0 12px;
height: 20px;
border-radius: 4px;
span {
font-size: 12px;
font-weight: var(--font-bold);
color: var(--Metallic-Sunburst);
white-space: nowrap
}
}
.btn {
display: flex;
justify-content: center;
align-items: center;
background: #fff;
border-radius: 50%;
width: 36px;
height: 36px;
transition: all .3s ease-in-out;
i {
color: var(--Metallic-Sunburst);
font-size: var(--h5-font-size);
text-decoration: none;
transition: all .3s ease-in-out
}
}
}
}
}
}
.curriculum {
display: none
}
.curriculum[data-category="quran"] {
display: grid
}
}
}
}
.tutors_hero {
padding: 10rem 3rem 5rem 3rem;
.tutors_hero_container {
.tutors_hero_content {
display: flex;
justify-content: space-between;
align-items: center;
.tutors_hero_text {
display: flex;
justify-content: center;
align-items: start;
gap: .8rem;
flex-direction: column;
.tutors_hero_title {
font-size: 35px;
font-weight: var(--font-semi-bold);
color: var(--Metallic-Sunburst)
}
.tutors_hero_desc {
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
color: var(--Sonic-Silver);
margin-bottom: 3rem
}
.tutors_hero_seaech {
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
.input {
display: flex;
justify-content: space-between;
align-items: center;
border: 1.22px solid #00A199;
border-radius: 4px;
width: 433px;
height: 45px;
padding: .7rem;
input {
width: 100%;
height: 100px;
font-size: 18px;
font-weight: var(--font-medium);
background: #fff0;
color: var(--Sonic-Silver)
}
i {
color: var(--Sonic-Silver)
}
}
button {
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 18px;
font-weight: var(--font-semi-bold);
width: 182px;
height: 44px;
background-color: var(--persain-Green);
border-radius: 8px
}
}
}
.tutors_hero_img {
width: 530px;
height: 363px;
border-radius: 8px;
img {
width: 100%;
height: 100%
}
}
}
}
}
.tutors_filters {
padding: 2rem 3rem 0;
.tutors_filters_form {
display: flex;
flex-wrap: wrap;
align-items: end;
gap: 1.5rem;
background: #F8FAFB;
border: 1px solid #E2E8F0;
border-radius: 10px;
padding: 1.5rem 2rem;
.filter_group {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 180px;
label {
font-size: 13px;
font-weight: var(--font-semi-bold);
color: var(--black)
}
select {
padding: 10px 12px;
border-radius: 6px;
border: 1px solid #E2E8F0;
background: #fff;
font-size: 13px;
font-weight: var(--font-medium);
color: var(--Sonic-Silver);
outline: none
}
}
button[type="submit"] {
padding: 0 1.5rem;
height: 44px;
background-color: var(--Metallic-Sunburst);
color: #fff;
border-radius: 4px;
font-size: var(--normal-font-size);
font-weight: var(--font-medium)
}
.clear_filters {
font-size: 13px;
font-weight: var(--font-medium);
color: var(--persain-Green);
text-decoration: underline
}
}
}
.tutors_list {
padding: 5rem 3rem;
.tutors_list_container {
.tutors_list_cards {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
gap: 4rem;
.card_with_video {
position: relative;
display: grid;
grid-template-columns: 80% 20%;
align-items: start;
width: 100%;
background: #fff;
box-shadow: 0 0 12px 4px #9A873117;
border-radius: 8px;
padding: 1.5rem;
.tutor_more_details {
grid-column: 1 / -1
}
.card {
grid-column: 1;
grid-row: 1;
display: flex;
justify-content: space-between;
align-items: center;
.card_img {
position: relative;
width: 220px;
height: 288px;
flex-shrink: 0;
img {
width: 100%;
height: 100%;
object-fit: cover
}
}
.card_content {
display: flex;
justify-content: space-between;
align-items: start;
padding: 1rem;
gap: 5rem;
.info {
display: flex;
justify-content: space-between;
align-items: start;
gap: 1rem;
flex-direction: column;
h2 {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
font-size: 18px;
font-weight: var(--font-bold);
color: var(--black);
i {
color: var(--persain-Green)
}
}
h3 {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
font-size: 12px;
font-weight: var(--font-regular);
color: var(--Sonic-Silver);
i {
color: var(--Metallic-Sunburst)
}
}
h4 {
font-size: 14px;
font-weight: var(--font-bold);
color: var(--Sonic-Silver)
}
p {
font-size: 12px;
font-weight: var(--font-regular);
color: var(--Sonic-Silver);
width: 100%;
max-width: 398px
}
.tutor_rating {
display: flex;
align-items: center;
gap: 4px;
color: #D3A320;
font-size: 14px;
span {
margin-left: 6px;
font-size: 12px;
font-weight: var(--font-regular);
color: var(--Sonic-Silver)
}
}
}
.ditals {
display: flex;
justify-content: space-between;
align-items: center;
gap: 5rem;
flex-direction: column;
.totals {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
.students,
.hours {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
flex-direction: column;
h5 {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
font-size: 18px;
font-weight: var(--font-bold);
color: var(--black);
i {
color: var(--persain-Green)
}
}
span {
font-size: 10px;
font-weight: var(--font-medium);
color: var(--Sonic-Silver)
}
}
}
.btns {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
flex-direction: column;
.btn_tutors {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 38px;
border-radius: 4px;
background-color: var(--Metallic-Sunburst);
color: #fff;
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
transition: transform .3s ease-in-out;
&:hover {
transform: scale(1.05)
}
}
.btn_second {
color: var(--Metallic-Sunburst);
background-color: #fff;
border: 1px solid #9A8731
}
}
}
}
}
.tutor_more_details {
margin-top: 1.5rem;
border-top: 1px solid #E2E8F0;
padding-top: 1rem;
summary {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: var(--font-semi-bold);
color: var(--persain-Green);
cursor: pointer;
list-style: none;
&::-webkit-details-marker {
display: none
}
i {
transition: transform .3s ease-in-out;
font-size: 12px
}
}
&[open] summary i {
transform: rotate(180deg)
}
.more_details_content {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-top: 1.2rem;
.detail_block {
h4 {
font-size: 14px;
font-weight: var(--font-bold);
color: var(--Sonic-Silver);
margin-bottom: 8px
}
p {
font-size: 12px;
font-weight: var(--font-regular);
color: var(--Sonic-Silver);
width: 100%;
max-width: 100%
}
.tutor_curriculums {
display: flex;
flex-wrap: wrap;
gap: 8px;
.curriculum_tag {
padding: 4px 12px;
background: #E6F7F6;
color: var(--persain-Green);
font-size: 11px;
font-weight: var(--font-medium);
border-radius: 20px;
text-decoration: none;
transition: all .3s ease-in-out;
&:hover {
background: var(--persain-Green);
color: #fff
}
}
}
}
}
}
.tutor_video_col {
grid-column: 2;
grid-row: 1;
align-self: start;
aspect-ratio: 9 / 16;
max-height: 320px;
border-radius: 8px;
overflow: hidden;
opacity: 0;
pointer-events: none;
transition: opacity .4s ease-in-out;
iframe,
video {
width: 100%;
height: 100%;
border: none;
object-fit: cover
}
}
.card:hover ~ .tutor_video_col {
opacity: 1;
pointer-events: auto
}
.tutor_video_icon_btn {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 48px;
height: 48px;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.55);
color: #fff;
border: 2px solid #fff;
border-radius: 50%;
font-size: 20px;
cursor: pointer
}
}
}
}
.pagination {
display: flex;
justify-content: center;
margin-top: 2rem;
gap: 10px;
flex-wrap: wrap
}
.pagination button {
padding: 8px 14px;
border: 1px solid var(--persain-Green);
background-color: #fff;
color: var(--persain-Green);
border-radius: 4px;
cursor: pointer;
font-weight: 700;
transition: .3s
}
.pagination button:hover,
.pagination button.active {
background-color: var(--persain-Green);
color: #fff
}
.pagination button:disabled {
opacity: .5;
cursor: not-allowed
}
}
.tutor_video_modal {
position: fixed;
inset: 0;
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
.tutor_video_modal_backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.75)
}
.tutor_video_modal_content {
position: relative;
width: 90%;
max-width: 640px
}
.tutor_video_modal_close {
position: absolute;
top: -40px;
right: 0;
background: transparent;
border: none;
color: #fff;
font-size: 32px;
line-height: 1;
cursor: pointer
}
.tutor_video_modal_player {
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
border-radius: 8px;
overflow: hidden;
iframe,
video {
width: 100%;
height: 100%;
border: none;
object-fit: contain
}
}
}
.pricing_section {
padding: 10rem 3rem 5rem 3rem;
.pricing_container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.section_title {
font-size: 35px;
font-weight: var(--font-semi-bold);
color: var(--persain-Green);
text-align: center;
span {
color: var(--Metallic-Sunburst)
}
}
.section_desc {
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
color: var(--Sonic-Silver);
text-align: center;
width: 767px;
margin-bottom: 5rem
}
.pricing_cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3rem;
.pricing_card {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
padding: 33px 21px;
border-radius: 12px;
box-shadow: 0 0 14px 0 #9A87311A;
height: 656.6656494140625px;
transition: box-shadow .3s ease-in-out;
&:hover {
box-shadow: 0 0 14px 0 #1d1c151a
}
.pricing_header {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 1rem;
h3 {
font-size: var(--h5-font-size);
font-weight: var(--font-bold);
color: var(--persain-Green);
min-height: 56px;
text-align: center
}
p {
font-size: 18px;
font-weight: var(--font-regular);
color: var(--Sonic-Silver);
margin-bottom: 2rem
}
}
.price {
display: flex;
justify-content: center;
align-items: center;
gap: 1.5rem;
margin-bottom: -10px;
h5 {
position: relative;
font-size: 33px;
font-weight: var(--font-semi-bold);
color: var(--Sonic-Silver);
&::after {
content: "";
position: absolute;
width: 61px;
height: 3px;
background-color: var(--Sonic-Silver);
border-radius: 8px;
transform: rotate(-29.65deg);
opacity: .9;
left: -4px;
bottom: 19px
}
}
h4 {
font-size: 33px;
font-weight: var(--font-semi-bold);
color: var(--persain-Green);
span {
font-size: 12px;
font-weight: var(--font-bold)
}
}
}
.currency {
position: relative;
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
margin-bottom: 5rem;
.currency_dollar,
.currency_euro,
.currency_pound {
display: flex;
justify-content: center;
align-items: center;
width: 35px;
height: 35px;
background-color: #fff;
border-radius: 18px;
color: var(--Metallic-Sunburst);
font-size: var(--h5-font-size);
cursor: pointer
}
.currency_dollar.active,
.currency_euro.active,
.currency_pound.active {
background-color: var(--Metallic-Sunburst);
color: #fff
}
&::before {
content: '';
position: absolute;
background-image: url("assets/image/line\ 2.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
bottom: -35px;
width: 266.000000000001px;
height: 4px
}
}
.pricing_features {
display: flex;
justify-content: center;
align-items: start;
gap: 25px;
flex-direction: column;
margin-bottom: 2rem;
li {
display: flex;
gap: 10px;
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
color: var(--black);
i {
position: relative;
color: var(--persain-Green);
&::after {
content: "";
position: absolute;
width: 100%;
height: 2px;
border-radius: 8px;
background-color: var(--persain-Green);
bottom: 0;
left: 0
}
}
}
}
.pricing_button {
width: 100%;
a {
display: flex;
justify-content: center;
align-items: center;
width: 279px;
height: 38px;
border-radius: 4px;
background: var(--Linear-2);
color: #fff;
font-size: var(--normal-font-size);
font-weight: var(--font-semi-bold)
}
}
}
}
}
}
.pricing_welcome {
padding: 5rem 3rem;
.pricing_container {
.pricing_cards {
.pricing_card {
.pricing_header {
h6 {
position: absolute;
top: -50px;
font-size: 28px;
font-weight: var(--font-semi-bold);
color: var(--Metallic-Sunburst);
text-align: center;
display: none
}
h3 {
color: var(--Sonic-Silver)
}
p {
color: var(--Sonic-Silver)
}
}
.price {
h5 {
color: var(--Sonic-Silver)
}
h4 {
color: var(--Sonic-Silver)
}
}
.currency {
&::before {
background-image: none
}
.currency_dollar,
.currency_euro,
.currency_pound {
color: var(--Sonic-Silver)
}
.currency_dollar.active,
.currency_euro.active,
.currency_pound.active {
background-color: var(--Sonic-Silver);
color: #fff
}
}
.pricing_features {
li {
color: var(--Sonic-Silver);
i {
color: var(--Sonic-Silver);
&::after {
background-color: var(--Sonic-Silver)
}
}
}
}
.pricing_button {
width: 100%;
a {
background: var(--Sonic-Silver)
}
}
}
}
}
}
.pricing_welcome .pricing_container .pricing_cards .pricing_card.active .pricing_header h6 {
display: block
}
.pricing_welcome .pricing_container .pricing_cards .pricing_card.active .pricing_header h3 {
color: var(--persain-Green)
}
.pricing_welcome .pricing_container .pricing_cards .pricing_card.active .price h5 {
color: var(--Sonic-Silver)
}
.pricing_welcome .pricing_container .pricing_cards .pricing_card.active .price h4 {
color: var(--persain-Green)
}
.pricing_welcome .pricing_container .pricing_cards .pricing_card.active .currency .currency_dollar,
.pricing_welcome .pricing_container .pricing_cards .pricing_card.active .currency .currency_euro,
.pricing_welcome .pricing_container .pricing_cards .pricing_card.active .currency .currency_pound {
color: var(--Metallic-Sunburst);
background: #fff
}
.pricing_welcome .pricing_container .pricing_cards .pricing_card.active .currency .active {
background-color: var(--Metallic-Sunburst);
color: #fff
}
.pricing_welcome .pricing_container .pricing_cards .pricing_card.active .pricing_features li {
color: var(--black)
}
.pricing_welcome .pricing_container .pricing_cards .pricing_card.active .pricing_features li i {
color: var(--persain-Green)
}
.pricing_welcome .pricing_container .pricing_cards .pricing_card.active .pricing_features li i::after {
background-color: var(--persain-Green)
}
.pricing_welcome .pricing_container .pricing_cards .pricing_card.active .pricing_button a {
background: var(--Linear-2);
color: #fff
}
.create_plan {
padding: 5rem 3rem;
.create_plan_container {
.create_plan_content {
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 38px;
padding: 2rem;
box-shadow: 0 1px 51px 4px #0000000D;
.create_plan_data {
h2 {
font-size: var(--h4-font-size);
font-weight: var(--font-semi-bold);
color: var(--black);
width: 637px;
margin-bottom: 1rem
}
p {
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
color: var(--Sonic-Silver);
margin-bottom: 3rem;
width: 637px
}
.arrow {
font-size: var(--h2-font-size);
color: var(--persain-Green);
display: inline-block;
animation: moveLeftBounce 2s ease-in-out infinite
}
}
.create_plan_form {
padding: 20px;
box-shadow: 0 0 4px 0 #9A873133;
border-radius: 8px;
.form-group {
margin-bottom: 2rem
}
.form-group label {
display: flex;
justify-content: start;
align-items: center;
gap: 1rem;
font-weight: var(--font-bold);
font-size: 18px;
color: var(--persain-Green)
}
.radio-group {
display: flex;
gap: 2rem;
margin-top: 10px;
.male,
.female {
display: flex;
justify-content: start;
align-items: center;
gap: 1rem;
border: 1px solid #F6F6F6;
width: 185px;
height: 43px;
border-radius: 4px;
cursor: pointer
}
.numbrs {
display: flex;
justify-content: space-between;
align-items: center;
width: 60%;
gap: 1rem;
.num {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
border: 1px solid #F6F6F6;
border-radius: 4px;
padding: 8px;
cursor: pointer
}
}
.session_time {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
.num {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
border: 1px solid #F6F6F6;
border-radius: 4px;
padding: 8px;
cursor: pointer
}
}
}
.radio-group input[type="radio"] {
margin-left: 5px
}
.radio-group label {
font-weight: 400;
color: var(--black)
}
button {
background-color: var(--persain-Green);
color: #fff;
border: none;
padding: 10px;
width: 100%;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: transform .3s ease-in-out;
&:hover {
transform: scale(1.05)
}
}
}
}
}
}
@keyframes moveLeftBounce {
0% {
transform: translateX(0)
}
40% {
transform: translateX(10px)
}
60% {
transform: translateX(0)
}
80% {
transform: translateX(10px)
}
100% {
transform: translateX(0)
}
}
.payment {
padding: 5rem 3rem;
.payment_container {
h2 {
font-size: var(--h4-font-size);
font-weight: var(--font-semi-bold);
color: var(--Metallic-Sunburst);
text-align: center;
margin-bottom: 3rem
}
.payment_imgs {
display: flex;
justify-content: center;
align-items: center;
gap: 3rem;
.img {
width: 232px;
height: 132px;
img {
width: 100%;
height: 100%
}
}
}
}
}
.pricing_que {
padding: 5rem 3rem;
.pricing_que_container {
h2 {
font-size: 35px;
font-weight: var(--font-semi-bold);
color: var(--Sonic-Silver);
text-align: center;
margin-bottom: 10px
}
.pricing_que_desc {
font-size: 14px;
font-weight: var(--font-medium);
color: var(--persain-Green);
text-align: center;
margin-bottom: 3rem
}
.pricing_que_content {
display: flex;
justify-content: center;
align-items: center
}
}
}
.policy {
padding: 10rem 3rem;
.policy_container {
.policy_content {
display: flex;
justify-content: start;
align-items: start;
flex-direction: column;
h1 {
font-size: 42px;
font-weight: var(--font-bold);
color: var(--Metallic-Sunburst);
margin-bottom: 1rem
}
h2 {
font-size: 35px;
font-weight: var(--font-semi-bold);
color: var(--Metallic-Sunburst);
margin-bottom: 2rem;
scroll-margin-top: 140px
}
h3 {
font-size: 25px;
font-weight: var(--font-semi-bold);
color: var(--persain-Green);
margin-bottom: 2rem;
scroll-margin-top: 140px
}
h4 {
font-size: 18px;
font-weight: var(--font-semi-bold);
color: var(--persain-Green);
margin-bottom: 2rem;
scroll-margin-top: 140px
}
p {
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
color: var(--black);
width: 1223px;
max-width: 100%;
line-height: 1.9;
margin-bottom: 2rem
}
p.policy_updated {
font-size: 14px;
color: var(--Sonic-Silver);
margin-bottom: 3rem
}
ul, ol {
width: 1223px;
max-width: 100%;
margin-bottom: 2rem;
padding-left: 1.75rem;
li {
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
color: var(--black);
line-height: 1.9;
margin-bottom: .75rem;
}
}
ul {
list-style: disc
}
ol {
list-style: decimal
}
a {
color: var(--persain-Green);
font-weight: var(--font-semi-bold);
text-decoration: underline;
text-underline-offset: 3px;
transition: color .3s ease;
&:hover {
color: var(--Metallic-Sunburst)
}
}
strong {
color: var(--black);
font-weight: var(--font-semi-bold)
}
}
}
}
.policy_toc {
width: 1223px;
max-width: 100%;
background: hsl(24 32% 97%);
border: 1px solid #9A873133;
border-radius: 16px;
padding: 2rem 2.5rem;
margin-bottom: 3rem;
.policy_toc_title {
font-size: 18px;
font-weight: var(--font-semi-bold);
color: var(--Metallic-Sunburst);
margin-bottom: 1.2rem;
width: auto
}
ol {
list-style: none;
counter-reset: toc-counter;
padding-left: 0;
margin-bottom: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: .6rem 2rem;
li {
counter-increment: toc-counter;
margin-bottom: 0;
font-size: 15px;
line-height: 1.6;
&::marker {
content: ""
}
}
a {
text-decoration: none;
color: var(--black);
font-weight: var(--font-medium);
font-size: 15px;
&::before {
content: counter(toc-counter) ". ";
color: var(--persain-Green);
font-weight: var(--font-semi-bold)
}
&:hover {
color: var(--persain-Green);
text-decoration: underline
}
}
}
}
.terms {
padding: 10rem 3rem;
.terms_container {
.terms_content {
display: flex;
justify-content: start;
align-items: start;
flex-direction: column;
span {
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
color: var(--Sonic-Silver)
}
h2 {
font-size: 35px;
font-weight: var(--font-semi-bold);
color: var(--Metallic-Sunburst)
}
h3 {
font-size: 22px;
font-weight: var(--font-semi-bold);
color: var(--persain-Green);
margin: 2rem 0
}
p {
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
color: var(--black);
width: 1293px;
line-height: 1.9
}
ul {
list-style: disc;
li {
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
color: var(--black);
width: 1293px;
line-height: 1.9;
margin-left: 20px
}
}
}
}
}
.error {
padding: 10rem 0.75rem;
.error_container {
.error_content {
display: flex;
justify-content: center;
align-items: center;
gap: 3rem;
flex-direction: column;
.img {
img {
width: 576.75px;
height: 303.1px
}
}
.btn {
a {
display: flex;
justify-content: center;
align-items: center;
width: 220.76px;
height: 48.51px;
border-radius: 30px;
color: #fff;
background-color: var(--Metallic-Sunburst);
font-size: 17px;
font-weight: var(--font-medium);
text-decoration: underline
}
}
}
}
}
.contact-us-popup {
display: none;
position: fixed;
inset: 0;
background: rgb(0 0 0 / .5);
justify-content: center;
align-items: center;
z-index: 9999
}
.popup-content {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: #fff;
padding: 2rem 2.5rem;
border-radius: 12px;
text-align: center;
max-width: 100%;
width: 587.0551147460938px;
box-shadow: 0 0 4px 0 #9A873133;
animation: fadeIn .3s ease-in-out
}
.popup-content h3 {
margin-bottom: .5rem;
color: var(--persain-Green)
}
.popup-content p {
margin-bottom: 1.5rem;
color: var(--Sonic-Silver);
width: 503px
}
.popup-content img {
width: 50.61469650268555px;
height: 50.56165313720703px
}
.btn_pop_up {
display: flex;
justify-content: center;
align-items: center;
width: 296.9453125px;
height: 45px;
opacity: 1;
border-radius: 4px;
color: #fff;
background-color: var(--persain-Green)
}
@keyframes fadeIn {
from {
opacity: 0;
transform: scale(.9)
}
to {
opacity: 1;
transform: scale(1)
}
}
.play-movie {
position: absolute;
color: #fff;
display: flex !important;
align-items: center;
justify-content: center;
width: 55px;
height: 55px;
border-radius: 50%;
background: var(--persain-Green);
font-size: var(--h5-font-size);
border: 7px solid #fff;
animation: animate 2s linear infinite;
cursor: pointer;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.video-container {
display: none;
position: fixed;
inset: 0;
background-color: rgb(0 0 0 / .8);
z-index: 9999;
justify-content: center;
align-items: center
}
.video-container.active {
display: flex
}
.video-box {
position: relative;
max-width: 800px;
width: 90%;
video {
width: 100%;
height: auto;
border-radius: 10px
}
}
.close-video {
position: absolute;
top: 10px;
right: 15px;
font-size: 24px;
color: #fff;
cursor: pointer;
z-index: 10000
}
footer {
padding: 2rem 5rem
}
.footer_section {
position: relative;
padding: 3.5rem;
border-radius: 32px;
background-color: var(--persain-Green);
.footer_bottom {
position: absolute;
bottom: 0;
left: 41%;
width: 250px;
height: 5px;
border-radius: 4px;
background-color: #014D3E
}
&::before {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 250px;
height: 130px;
border-bottom: 5px solid #014D3E;
border-right: 5px solid #014D3E;
border-radius: 0 2px 30px 2px;
transition: all .3s ease-out
}
&::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 250px;
height: 130px;
border-bottom: 5px solid #014D3E;
border-left: 5px solid #014D3E;
border-radius: 2px 0 2px 30px;
;
transition: all .3s ease-out
}
}
.footer_data {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 20px
}
.desc_img_logo {
display: flex;
justify-content: start;
align-items: start;
flex-direction: column;
gap: 2.5rem;
.img_logo img {
width: 86px;
height: 105.5916976928711px
}
}
.footer_info {
display: flex;
flex-direction: column;
gap: 10px;
color: #fff
}
.footer_info h3 {
font-size: 18px;
font-weight: var(--font-semi-bold);
color: #036557;
margin-bottom: 20px
}
.footer_info ul {
display: flex;
flex-direction: column;
gap: 15px;
li {
transition: all .3s ease
}
}
.footer_info a {
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
color: #fff;
transition: all .3s ease;
display: inline-block;
max-width: 245px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle
}
.footer_info a:hover,
.footer_info li:hover {
transform: translatey(-5px)
}
.contact {
display: flex;
align-items: start;
gap: 0;
h3 {
position: relative;
color: #fff;
margin-bottom: 15px;
&::after {
content: '';
position: absolute;
display: block;
width: 90px;
height: 2px;
background-color: #fff;
margin-top: 3px
}
}
}
.footer_info .social {
position: relative;
display: flex;
justify-content: right;
align-items: center;
gap: 15px;
z-index: 1
}
.footer_info .social a {
display: flex;
justify-content: center;
align-items: center;
font-size: var(--h6-font-size);
color: #fff;
cursor: pointer
}
.footer_copy {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 3rem !important;
z-index: 1
}
.footer_copy p {
color: #fff;
font-size: 12px;
font-weight: var(--font-medium)
}
.footer_copy p {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
a {
position: relative;
display: flex;
justify-content: center;
align-items: center
}
img {
width: 116.39999389648438px;
height: 12.837583541870117px
}
}
.footer_copy .pages {
display: flex;
gap: 3rem;
a {
font-size: 12px;
font-weight: var(--font-medium);
color: #fff;
cursor: pointer
}
}
@media (max-width:1200px) {
.btns {
gap: 2rem
}
.nav_list {
gap: 1.5rem
}
.information {
gap: 2rem !important
}
.home {
.home_container {
.home_content {
padding: 4rem 2rem 7rem 2rem;
.home_text {
p {
width: 100%
}
}
}
}
}
.eductional {
padding: 4rem 2rem;
.eductional_container {
h2 {
width: 100%
}
.eductional_content {
.line {
width: 500px
}
.teacher_img::after {
right: 10px
}
.student_img::after {
left: 10px
}
.teacher_img .data {
right: -10%
}
.student_img .data {
left: -10%
}
}
}
}
.our_curriculums {
padding: 4rem 0.75rem;
.our_curriculums_container {
.our_curriculums_header {
gap: 2rem;
.text {
p {
width: 100%
}
}
}
.our_curriculums_content {
flex-wrap: wrap;
justify-content: center;
gap: 2rem;
.our_curriculum {
margin-top: 3rem;
.our_curriculum_img {
.our_curriculum_data {
flex-direction: column;
height: auto;
gap: 1rem;
.info {
width: 100%;
p {
width: 100%
}
}
.btn-lavel {
width: 100%;
flex-direction: row;
justify-content: space-between;
align-items: center
}
}
}
}
}
}
}
.our_blog {
padding: 4rem 0;
.our_blog_container {
.our_blog_items {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
.item {
.item_img {
width: 100%;
height: auto
}
.item_content {
h3,
p {
width: 100%
}
}
}
}
}
}
.our_story {
padding: 4rem 0;
.our_story_container {
.our_story_header {
p {
width: 100%
}
}
.our_story_testimonials {
padding: 1.5rem;
p {
width: 100%;
&::before {
width: 100%
}
}
}
}
}
.bannar_section {
padding: 4rem 0;
.bannar {
padding: 2rem 3rem;
.text {
p {
width: 100%
}
}
}
}
.questions {
padding: 4rem 0
}
.questions_img {
width: 400px;
height: auto
}
.question_answer p {
width: 100%
}
.hero_about {
padding: 14rem 0.75rem 4rem 0.75rem;
}
.teaching_strategy {
padding: 4rem 0;
.teaching_strategy_container {
.teaching_strategy_items {
gap: 2rem;
.item {
.item_img {
width: 360px;
height: 280px
}
}
}
}
}
.quran_academies {
.quran_academies_container {
.quran_academies_content {
.quran_academies_img {
width: 600px;
height: auto
}
.quran_academies_info {
right: 5%;
.our_mission,
.our_vision {
width: 600px;
.text {
p {
width: 100%
}
}
}
}
}
}
}
.our_teachers {
.our_teachers_container {
.our_teachers_items {
gap: 2rem;
.item {
width: 100%;
.item_info {
width: 100%;
ul {
width: 100%
}
}
}
}
}
}
.our_school {
.our_school_container {
.our_school_content {
gap: 2rem;
.our_school_info {
p {
width: 600px
}
}
.our_school_img {
width: 460px;
height: auto
}
}
}
}
.hero-blogs {
.hero-blogs_container {
.hero-blogs_content {
h2 {
font-size: 30px
}
.input {
input {
width: 600px
}
}
}
}
}
.blogs {
padding: 4rem 0;
.blogs_container {
.our_blog_items {
.item {
.item_img {}
.item_content {
width: 100%;
h3 {
width: 100%
}
p {
width: 100%
}
}
}
}
}
}
.single_blog {
.single_blog_container {
.single_blog_content {
h1 {
width: 100%
}
}
}
}
.single_blog_data {
.single_blog_data_container {
.blog_desc {
p,
h3,
table {
width: 100%
}
}
.forms {
.form_1,
.form_2 {
textarea {
width: 770px
}
.group {
gap: 1rem
}
input {
width: 500px
}
}
}
}
}
.related_blog {
.related_blog_container {
.items {
.item {
.item_img {
width: 100%
}
.item_content {
h3 {
width: 100%
}
p {
width: 100%
}
}
}
}
}
}
.thanks {
.thanks_container {
background-size: 500px 100%, 500px 100%;
.thanks_img {
width: 700px;
height: auto
}
}
}
.subscribe {
padding: 4rem 0;
.subscribe_container {
.subscribe_content {
.step {
padding: 2.5rem 1.5rem;
p {
width: 100%
}
a {
width: 100%
}
}
}
}
}
.libraray_hero {
.libraray_hero_container {
.libraray_hero_content {
.libraray_hero_text {
padding-left: 3rem
}
.libraray_hero_img {
width: 500px
}
}
}
}
.books {
padding: 5rem 0;
.books_container {
.books_content {
gap: 3rem;
.item {
.item_text {
p {
width: 340px
}
.btn_reaction {
width: 340px
}
}
}
}
}
}
.welcome {
padding: 10rem 0.75rem 4rem 0.75rem;
.welcome_container {
padding: 4rem;
h2 {
font-size: 28px
}
p {
width: 100%;
font-size: 20px
}
}
}
.teacher-form {
padding: 8rem 2rem 4rem 2rem;
.progress-container {
width: 90%
}
.form-title {
width: 100%;
font-size: 28px
}
.form {
padding: 2rem 1.5rem;
width: 100%
}
.input {
width: 100%
}
}
.hero_single_curriculums {
.hero_single_curriculums_container {
.hero_single_curriculums_img {
.data {
width: 350px;
height: auto;
.info p {
width: 100%
}
}
.time {
gap: 1.5rem;
width: 280px
}
}
}
}
.single_curriculums_data {
padding: 0 0.75rem;
.single_curriculums_data_container {
.curriculums_desc {
h3,
p,
table {
width: 100%
}
}
.testimonials_items {
grid-template-columns: repeat(2, 1fr);
.item p::before {
width: 100%
}
}
.books_content {
grid-template-columns: repeat(1, 1fr);
.item {
gap: 1rem;
.item_text {
width: 100%;
p {
width: 100%
}
.btn_reaction {
gap: 1rem;
.reaction {
justify-content: start
}
}
}
}
}
}
}
.curriculums_hero {
background-size: 500px 100%, 450px 100%;
.curriculums_hero_container {
padding: 10rem 3rem 6rem 3rem;
.curriculums_hero_content {
gap: 2rem;
.curriculums_hero_img {
width: 100%;
max-width: 500px;
height: auto
}
}
.ditals {
width: 90%;
right: 5%;
bottom: -7%;
flex-wrap: wrap;
gap: 1rem;
height: auto;
padding: 1rem
}
}
}
.curriculums {
.curriculums_container {
.curriculums_content {
.curriculum {
grid-template-columns: repeat(2, 1fr);
justify-content: center
}
.our_curriculum_img {
.our_curriculum_data {
gap: 1rem;
.info {
width: 100%;
p {
width: 100%
}
}
.btn-lavel {
justify-content: space-between
}
}
}
}
}
}
.tutors_hero {
padding: 10rem 0 4rem 0;
.tutors_hero_container {
.tutors_hero_content {
gap: 2rem;
.tutors_hero_text {
.tutors_hero_title {
font-size: 30px
}
.tutors_hero_seaech {
.input {
width: 345px
}
}
}
.tutors_hero_img {
width: 100%;
max-width: 480px;
height: auto
}
}
}
}
.tutors_filters {
padding: 2rem 0.75rem 0
}
.tutors_list {
padding: 4rem 0;
.tutors_list_container {
.tutors_list_cards {
.card_with_video {
.card {
width: 790px;
.card_content {
width: 80%;
gap: 2rem;
.info {
p {
width: 100%
}
}
}
}
}
}
}
}
.pricing_section {
.pricing_container {
.pricing_cards {
grid-template-columns: repeat(3, 1fr)
}
}
}
.create_plan {
padding: 4rem 0;
.create_plan_container {
.create_plan_content {
.create_plan_data {
h2,
p {
width: 100%
}
}
.create_plan_form {
.radio-group {
.numbrs {
width: 100%
}
}
}
}
}
}
.payment {
.payment_container {
.payment_imgs {
gap: 2rem;
.img {
width: 200px;
height: 115px
}
}
}
}
.pricing_que {
.pricing_que_container {
h2 {
font-size: 32px
}
.pricing_que_desc {
font-size: 13px
}
}
}
.policy {
.policy_container {
.policy_content {
h2 {
font-size: 32px
}
h3 {
font-size: 22px
}
h4 {
font-size: 17px
}
}
}
}
.terms {
.terms_container {
.terms_content {
h2 {
font-size: 32px
}
h3 {
font-size: 20px
}
}
}
}
.error {
.error_container {
.error_content {
.img {
img {
width: 500px;
height: auto
}
}
.btn {
a {
width: 200px;
height: 45px;
font-size: 16px
}
}
}
}
}
.footer_data {
gap: 40px
}
.footer_copy {
gap: 2rem;
text-align: center
}
.footer_copy .pages {
gap: 2rem
}
}
@media (max-width:991px) {
.subheader {
padding: 0 1rem
}
.nav {
padding: 0 1rem
}
.nav_logo img {
width: 53px;
height: 58.280792236328125px
}
.nav_list {
gap: 1rem
}
.nav_link {
font-size: calc(var(--h6-font-size) * .8)
}
.btns {
gap: 1rem;
.language {
font-size: calc(var(--normal-font-size) * .8);
padding: 8px
}
}
.nav .btn_free,
.btn-mobile {
width: 150px;
height: 40px;
font-size: calc(var(--normal-font-size) * .8);
padding: 8px 20px
}
.nav_menu {
position: fixed;
top: 0;
right: -100%;
width: 250px;
height: 100vh;
background: #fff;
flex-direction: column;
padding: 2rem;
transition: right .3s ease;
z-index: var(--z-fixed)
}
.nav_list {
flex-direction: column;
gap: 1.5rem
}
.nav .btn_free {
display: none
}
.nav_menu .btn-mobile {
display: flex;
justify-content: center;
width: 100%;
margin-top: 1.5rem;
padding: 2px 0
}
.nav_toggle {
display: block;
font-size: 2rem;
cursor: pointer;
margin-left: 25px;
color: var(--persain-Green)
}
.nav_close {
display: block;
font-size: 1.5rem;
color: var(--persain-Green);
position: absolute;
top: 1rem;
right: 1rem;
cursor: pointer
}
.show-menu {
right: 0
}
.home {
padding: 5rem 0.75rem 3rem 0.75rem;
.home_container {
transform: none;
border-radius: 16px;
.home_content {
flex-direction: column-reverse;
gap: 2rem;
padding: 3rem 1rem;
.home_text {
align-items: center;
text-align: center;
p {
width: 100%
}
.features {
align-items: center;
.first {
justify-content: center;
flex-wrap: wrap
}
}
.home_btns {
align-items: center;
width: 100%;
.btn,
.btn_secondary {
width: 100%
}
}
}
.home_img {
margin-top: 2rem;
max-width: 380px
}
}
}
}
.eductional {
.eductional_container {
.eductional_content {
flex-direction: column;
gap: 5rem;
.line {
margin: 3rem 0;
width: 65%;
height: 200px;
transform: rotate(70deg);
&::before {
top: 30px;
left: 65px
}
&::after {
bottom: 19px;
right: 160px
}
}
.teacher,
.student {
align-items: center !important;
text-align: center;
.teacher_img::after {
right: -5px;
top: 142%
}
.student_img::after {
left: -5px;
bottom: 108%
}
.teacher_img .data,
.student_img .data {
left: 50%;
transform: translateX(-50%);
right: auto
}
}
}
}
}
.our_curriculums {
.our_curriculums_container {
.our_curriculums_header {
.our_curriculums_btn {
flex-direction: column
}
}
.our_curriculums_content {
flex-direction: column;
align-items: center;
.our_curriculum {
width: 100%;
.our_curriculum_img {
.our_curriculum_data {
flex-direction: column;
height: auto;
.btn-lavel {
flex-direction: row;
justify-content: space-between;
align-items: center
}
}
}
}
}
}
}
.our_blog {
.our_blog_container {
h2 {
background-size: contain;
font-size: var(--h5-font-size)
}
.our_blog_items {
grid-template-columns: 1fr;
.item {
align-items: center;
.item_img {
width: 100%;
max-width: 500px
}
.item_content {
width: 506px;
align-items: center;
h3,
p {
text-align: center
}
h4 {
align-self: center
}
}
}
}
}
}
.our_story {
padding: 3rem 0;
.our_story_container {
.our_story_header {
h2 {
font-size: var(--h5-font-size)
}
p {
font-size: 14px
}
}
.our_story_testimonials {
p {
font-size: 14px
}
.info_user {
h4 {
font-size: 16px
}
span {
font-size: 11px
}
}
}
}
}
.bannar_section {
.bannar {
flex-direction: column-reverse;
text-align: center;
gap: 2rem;
.text {
align-items: center;
a {
margin: 0 auto
}
}
}
}
.questions_content {
flex-direction: column-reverse;
gap: 3rem
}
.questions_content_welcome {
flex-direction: column;
.btns {
gap: 1.5rem
}
}
.questions_accordion {
width: 100%
}
.questions_img {
width: 100%;
max-width: 400px
}
.question_header {
gap: 1rem;
text-align: center
}
.teaching_strategy {
padding: 3rem 0.75rem;
.teaching_strategy_container {
.teaching_strategy_items {
flex-direction: column;
align-items: center;
gap: 2.5rem;
.item {
.item_img {
width: 100%;
height: auto
}
}
}
}
}
.quran_academies {
.quran_academies_container {
.quran_academies_content {
flex-direction: column;
.quran_academies_img {
width: 100%;
height: auto
}
.quran_academies_info {
position: relative;
gap: 3rem;
right: 0;
margin-top: 3rem;
.our_mission,
.our_vision {
width: 100%;
height: auto;
align-items: start;
.text {
width: 80%;
p {
width: 100%
}
}
}
}
}
}
}
.our_teachers {
.our_teachers_container {
.our_teachers_items {
flex-wrap: wrap;
justify-content: center;
gap: 2rem;
.item {
width: 100% !important
}
}
}
}
.our_school {
.our_school_container {
.our_school_content {
flex-direction: column;
align-items: center;
text-align: center;
.our_school_info {
align-items: center;
h2 {
font-size: 28px
}
p {
width: 90%
}
}
.our_school_img {
width: 100%;
height: auto;
margin-bottom: 2rem
}
}
}
}
.hero-blogs {
.hero-blogs_container {
.hero-blogs_content {
h2 {
font-size: 28px
}
.input {
input {
width: 500px
}
button {
padding: 8px 20px;
font-size: 15px
}
}
}
}
}
.blogs {
.blogs_container {
.our_blog_items {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
.item {
.item_img {
height: 190px
}
.item_content {
h3 {
font-size: 16px
}
p {
font-size: 11px
}
}
}
}
}
}
.single_blog {
padding: 10rem 0.75rem 3rem 0.75rem;
.single_blog_container {
.single_blog_content {
h1 {
font-size: 30px
}
.single_newslatte_date_share {
align-items: start;
gap: 10px;
.date {
gap: 10px
}
.share {
a {
font-size: 18px
}
}
}
.blog_img {
height: 380px
}
}
}
}
.single_blog_data {
padding: 2rem 0.75rem;
.single_blog_data_container {
.blog_desc {
h2 {
font-size: 22px
}
h3 {
font-size: 18px
}
p,
ul li,
ol li {
font-size: 16px
}
table {
font-size: 14px
}
}
.forms {
.form_1,
.form_2 {
textarea {
height: 140px
}
input {
width: 350px
}
}
}
}
}
.related_blog {
padding: 4rem 0;
.related_blog_container {
h2 {
font-size: 24px;
background-size: 300px 45px
}
.items {
.item {
.item_img {
height: 190px
}
.item_content {
text-align: center;
align-items: center;
h3 {
font-size: 16px
}
p {
font-size: 11px
}
.reaction_date {
align-items: start;
gap: .5rem
}
}
}
}
}
}
.thanks {
.thanks_container {
padding: 13rem 2rem 3rem 2rem;
background-size: 400px 100%, 400px 100%;
.thanks_img {
width: 100%;
height: auto
}
}
}
.subscribe {
.subscribe_container {
h2 {
font-size: 24px
}
.subscribe_content {
gap: 1rem;
flex-direction: column;
.step {
width: 100%;
border: 3px solid #9A8731 !important;
border-radius: 12px;
padding: 2rem;
p {
font-size: 13px
}
a {
font-size: 14px;
height: 40px;
margin: 0
}
}
}
}
}
.libraray_hero {
padding: 8rem 0.75rem 3rem 0.75rem;
.libraray_hero_container {
.libraray_hero_content {
flex-direction: column-reverse;
gap: 3rem;
.libraray_hero_text {
padding-left: 0;
align-items: center;
text-align: center;
h2 {
font-size: 28px
}
p,
h4 {
font-size: 16px
}
}
.libraray_hero_img {
width: 100%
}
}
}
}
.books {
.books_container {
.books_content {
.item {
flex-direction: column;
align-items: center;
gap: 1.5rem;
.item_img {
width: 160px;
height: 160px
}
.item_text {
align-items: center;
p {
width: 100%;
text-align: center
}
.btn_reaction {
gap: 1rem;
width: 100%;
align-items: center
}
}
}
}
}
}
.testimonials {
background-size: 400px 100%, 400px 100%;
.testimonials_container {
h2 {
font-size: 28px
}
.testimonials_items {
grid-template-columns: repeat(2, 1fr);
gap: 2.5rem;
.item {
p {
width: 100%;
&::before {
width: 100%
}
}
}
}
}
}
.welcome {
padding: 12rem 0.75rem 4rem 0.75rem;
.welcome_container {
padding: 3rem;
h2 {
font-size: 26px;
text-align: center
}
p {
font-size: 18px
}
.btns {
gap: 1.5rem
}
}
}
.capacity_plan {
padding: 3rem 0.75rem;
.capacity_plan_container {
width: 100%;
padding: 1rem;
h2 {
font-size: 18px;
text-align: center
}
}
}
.support {
padding: 10rem 0 4rem 0;
.support_container {
.support_title,
.support_desc {
padding: 0 3rem
}
.support_form {
flex-direction: column;
gap: 3rem;
padding: 4rem;
.form {
width: 100%;
padding: 0;
.form_group {
width: 100%;
.input,
.textarea {
width: 100%
}
}
}
.content {
width: 100%;
padding: 3rem 2rem;
border-radius: 30px
}
}
}
}
.free_trial {
.free_trial_container {
.free_trial_title {
font-size: 28px
}
.form {
.free_trial_form {
padding: 2rem 1rem;
.form_group {
.input {
padding: .8rem 1rem;
height: auto;
input,
select {
font-size: 12px
}
}
}
}
}
}
}
.invite {
padding: 12rem 0.75rem 4rem 0.75rem;
.invite_container {
.invite_title {
font-size: 28px
}
.form {
.invite_form {
padding: 2rem 1rem;
.form_group {
label {
font-size: 16px
}
.input {
padding: .8rem 1rem;
height: auto;
input,
select {
font-size: 12px
}
}
}
button {
font-size: 14px;
height: 45px
}
}
}
}
}
.teacher-form {
padding: 10rem 1.5rem 3rem 1.5rem;
.form-title {
font-size: 24px
}
.form-desc {
font-size: 14px
}
.circle {
&::before {
width: 30px !important
}
}
.teacher_info,
.education_info,
.required_content_info,
.time_info {
grid-template-columns: 1fr
}
.input {
width: 100%
}
.submit-btn {
font-size: 14px
}
}
.hero_single_curriculums {
padding: 10rem 0.75rem;
.hero_single_curriculums_container {
.hero_single_curriculums_img {
height: auto;
.data {
top: 10%;
width: 320px;
padding: 1rem
}
.time {
width: 260px;
padding: .5rem;
right: 15px;
bottom: 15px;
.estimate h3,
.estimate i {
font-size: 16px
}
.date_time {
width: auto;
gap: 5px;
h3 {
font-size: 14px
}
span {
font-size: 11px
}
}
}
}
.btns {
flex-wrap: wrap;
button {
font-size: 16px;
margin-bottom: .5rem
}
}
}
}
.single_curriculums_data {
.single_curriculums_data_container {
.testimonials_items {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
justify-items: center;
.item {
width: 100%;
p {
width: 100%
}
p::before {
width: 100%
}
}
}
.books_content {
grid-template-columns: repeat(1, 1fr)
}
}
}
.curriculums_hero {
background-size: 400px 100%, 350px 100%;
.curriculums_hero_container {
padding: 12rem 2rem 4rem 2rem;
.curriculums_hero_content {
flex-direction: column-reverse;
.curriculums_hero_text {
align-items: center;
text-align: center;
p {
margin-bottom: 0
}
}
}
.curriculums_hero_img {
max-width: 100%
}
}
}
.curriculums {
.curriculums_container {
.curriculums_btns {
flex-wrap: wrap;
gap: 1rem;
margin: 2rem
}
.curriculums_content {
.curriculum {
.our_curriculum_data {
.info {
width: 100%;
p {
width: 100%
}
}
.btn-lavel {
flex-direction: row;
justify-content: space-between
}
}
}
}
}
}
.tutors_hero {
padding: 10rem 0 3rem 0;
.tutors_hero_container {
.tutors_hero_content {
flex-direction: column-reverse;
text-align: center;
gap: 3rem;
.tutors_hero_text {
align-items: center;
.tutors_hero_desc {
margin-bottom: 1rem
}
.tutors_hero_seaech {
.input {
width: 100%
}
}
}
.tutors_hero_img {
width: 100%;
max-width: 100%
}
}
}
}
.tutors_filters {
padding: 1.5rem 0.75rem 0
}
.tutors_list {
padding: 3rem 0.75rem;
.tutors_list_container {
.tutors_list_cards {
.card_with_video {
grid-template-columns: 1fr;
.tutor_video_col {
display: none
}
.tutor_video_icon_btn {
display: flex
}
.card {
flex-direction: column;
gap: 1rem;
.card_img {
width: 100%;
height: auto;
aspect-ratio: 3 / 4
}
.card_content {
width: 100%;
padding: 1rem;
gap: 2rem;
.info {
width: 70%
}
.ditals {
flex-direction: column;
gap: 1rem
}
}
}
.video {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 80%;
video {
width: 91%
}
}
}
}
}
}
.pricing_section {
padding: 10rem 0.75rem 4rem;
.pricing_container {
.section_title {
font-size: 30px
}
.section_desc {
font-size: 15px
}
.pricing_cards {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
.pricing_card {
padding: 30px 18px;
.price h5,
.price h4 {
font-size: 28px
}
.currency {
gap: .7rem
}
.pricing_features li {
font-size: 14px
}
.pricing_button a {
width: 100%;
height: 36px
}
}
}
}
}
.create_plan {
.create_plan_container {
.create_plan_content {
flex-direction: column;
gap: 3rem;
.create_plan_data {
text-align: center;
h2,
p {
margin-inline: auto
}
}
.create_plan_form {
width: 100%
}
}
}
}
.payment {
.payment_container {
.payment_imgs {
flex-wrap: wrap;
gap: 2rem;
.img {
width: 180px;
height: 100px
}
}
}
}
.pricing_que {
padding: 4rem 0;
.pricing_que_container {
h2 {
font-size: 30px
}
.pricing_que_desc {
font-size: 13px;
margin-bottom: 2.5rem
}
.pricing_que_content {
flex-direction: column
}
}
}
.policy {
padding: 10rem 0.75rem 3rem 0.75rem;
.policy_container {
.policy_content {
h2 {
font-size: 30px
}
h3 {
font-size: 20px
}
h4 {
font-size: 16px
}
p,
ul,
ol {
font-size: 15px;
line-height: 1.8;
width: 100%
}
}
}
}
.policy_toc {
width: 100%;
padding: 1.5rem;
ol {
grid-template-columns: 1fr
}
}
.terms {
padding: 10rem 0.75rem 3rem 0.75rem;
.terms_container {
.terms_content {
h2 {
font-size: 30px
}
h3 {
font-size: 18px
}
p,
ul li {
font-size: 15px;
line-height: 1.8;
width: 100%
}
}
}
}
.error {
padding: 10rem 0.75rem 3rem 0.75rem;
.error_container {
.error_content {
.img {
img {
width: 420px
}
}
.btn {
a {
width: 190px;
height: 42px;
font-size: 15px
}
}
}
}
}
.footer_data {
flex-direction: column;
align-items: center
}
.desc_img_logo {
align-items: center
}
.contact {
align-items: center
}
.footer_info {
align-items: center;
text-align: center
}
.footer_section::before,
.footer_section::after {
width: 100px;
height: 100px
}
.footer_bottom {
display: none
}
.footer_section {
padding: 3rem 2rem
}
.footer_copy {
flex-direction: column;
gap: 1.5rem;
text-align: center
}
}
@media (max-width:767px) {
.header .subheader {
height: auto;
padding: 10px 0
}
.subheader_container {
flex-direction: column;
gap: 1rem
}
.information {
flex-wrap: wrap;
gap: 1rem !important;
justify-content: center
}
.nav_logo img {
width: 45px;
height: auto
}
.nav .btn_free,
.btn-mobile {
width: 100%
}
.home {
.home_container {
.home_content {
padding: 3rem 1rem;
.home_text {
h2 {
font-size: 22px
}
p {
font-size: 15px
}
.features p {
font-size: 14px;
padding: 8px
}
}
}
}
}
.eductional {
padding: 3rem 1rem;
.eductional_container {
h2 {
font-size: 1.25rem
}
.eductional_content {
.line {
width: 70%;
height: 180px
}
.teacher_img,
.student_img {
width: 250px;
height: 250px
}
.teacher_info,
.student_info {
width: 90%
}
}
}
}
.our_curriculums {
.our_curriculums_container {
.our_curriculums_header {
.text {
h2 {
font-size: 1.25rem
}
p {
font-size: 14px
}
}
}
.our_curriculums_content {
.our_curriculum {
.our_curriculum_img {
.our_curriculum_data {
.info h3 {
font-size: 16px
}
.info p {
font-size: 11px
}
.btn-lavel {
gap: 1rem;
.lavel span {
font-size: 11px
}
.btn i {
font-size: 1rem
}
}
}
}
}
}
}
}
.our_blog {
padding: 3rem 0;
.our_blog_container {
.our_blog_items {
.item {
gap: 1rem;
.item_content {
.reaction_date {
gap: .5rem;
align-items: center;
text-align: center;
.reaction {
flex-direction: row;
gap: 1.5rem
}
}
h3 {
font-size: 16px
}
p {
font-size: 12px
}
h4 {
font-size: 13px
}
}
}
}
}
}
.our_story {
padding: 3rem 0;
.our_story_container {
.our_story_testimonials {
.quote {
width: 45px;
height: 45px;
font-size: 1rem
}
p {
font-size: 13px;
&::before {
height: 3px
}
}
.info_user {
h4 {
font-size: 15px
}
span {
font-size: 10px
}
}
}
}
}
.bannar_section {
padding: 3rem 0;
.bannar {
padding: 1.5rem 2rem;
.text {
h4 {
font-size: 1.1rem
}
p {
font-size: 14px
}
}
.bannar_img {
width: 220px;
height: 220px;
&::after {
width: 350px;
height: 350px
}
}
}
}
.questions {
padding: 3rem 0
}
.questions_container h2 {
font-size: 1.2rem
}
.question_header h3 {
font-size: 16px
}
.question_answer p {
font-size: 14px
}
.teaching_strategy {
padding: 3rem 0.75rem;
.teaching_strategy_container {
.teaching_strategy_items {
gap: 2rem;
.item {
.item_img {
width: 100%;
height: auto
}
}
}
}
}
.quran_academies {
padding: 4rem 0;
.quran_academies_container {
.quran_academies_content {
.quran_academies_info {
gap: 2rem;
.our_mission,
.our_vision {
gap: 1.5rem;
padding: 1rem;
.img {
width: 90px;
height: 90px
}
.text {
gap: .5rem;
h3 {
font-size: 16px
}
p {
font-size: 13px
}
}
}
}
}
}
}
.our_teachers {
padding: 4rem 0;
.our_teachers_container {
padding: 2rem;
h2 {
font-size: 22px;
margin-bottom: 3rem
}
.our_teachers_items {
flex-direction: column;
align-items: center;
.item {
padding: 4rem 1rem 1.5rem 1rem;
img {
width: 60px;
height: 60px
}
.item_info {
h3 {
font-size: 16px
}
ul {
font-size: 13px
}
}
}
}
}
}
.our_school {
padding: 4rem 0;
.our_school_container {
.our_school_content {
.our_school_info {
h2 {
font-size: 24px
}
p {
font-size: 14px
}
}
.our_school_img {
width: 100%
}
}
}
}
.hero-blogs {
.hero-blogs_container {
padding: 6rem 0 3rem 0;
.hero-blogs_content {
p {
font-size: 14px;
text-align: center;
padding: 0 1rem
}
.input {
input {
height: 40px;
padding-left: 20px;
font-size: 16px
}
button {
right: 0;
bottom: 0;
padding: 8px 15px;
font-size: 14px
}
}
}
}
}
.blogs {
.blogs_container {
.our_blog_items {
grid-template-columns: 1fr;
.item {
.item_img {
width: 100%;
height: 200px
}
.item_content {
width: 100%;
h3,
p {
width: 100%;
text-align: center
}
h4 {
text-align: center;
display: block;
margin: 0 auto
}
}
}
}
}
}
.single_blog {
padding: 13rem 0.75rem 1rem 0.75rem;
.single_blog_container {
.single_blog_content {
h1 {
font-size: 24px
}
.single_newslatte_date_share {
align-items: flex-start;
gap: .8rem;
.date span {
font-size: 16px
}
}
.blog_img {
height: 320px;
.play-movie {
width: 60px;
height: 60px;
font-size: var(--h4-font-size)
}
}
}
}
}
.single_blog_data {
.single_blog_data_container {
.blog_desc {
h2 {
font-size: 20px
}
h3 {
font-size: 16px;
width: 100%
}
p {
font-size: 15px;
width: 100%
}
ul,
ol {
margin-left: 20px
}
table {
width: 100%;
th,
td {
padding: 8px;
font-size: 13px
}
}
}
.forms {
.form_1,
.form_2 {
textarea {
width: 450px;
height: 130px
}
input {
width: 300px
}
}
}
}
}
.related_blog {
padding: 3rem 0.75rem;
.related_blog_container {
h2 {
font-size: 20px;
background-size: 250px 40px
}
.items {
.item {
.item_img {
height: 180px
}
.item_content {
gap: 8px;
h3 {
font-size: 15px;
width: 100%
}
p {
font-size: 11px;
width: 100%
}
}
}
}
}
}
.libraray_hero {
.libraray_hero_container {
.libraray_hero_content {
gap: 2.5rem;
.libraray_hero_text {
padding-left: 0;
align-items: center;
text-align: center;
h2 {
font-size: 28px
}
p,
h4 {
font-size: 16px
}
}
}
}
}
.books {
padding: 4rem 0.75rem;
.books_container {
.books_content {
grid-template-columns: 1fr;
gap: 2rem
}
}
}
.testimonials {
padding: 15rem 0.75rem 1rem 0.75rem;
background-size: 300px 100%, 300px 100%;
.testimonials_container {
h2 {
font-size: 24px
}
p {
font-size: 14px
}
.btn a,
.btn_second a {
width: 100%
}
.testimonials_items {
grid-template-columns: repeat(1, 1fr);
.item {
padding: 1rem;
width: 100%;
p {
font-size: 14px
}
}
}
}
}
.testimonials_second {
padding-top: 1rem;
margin-bottom: 5rem
}
.welcome {
padding: 15rem 0.75rem 3rem 0.75rem;
.welcome_container {
padding: 2rem;
h2 {
font-size: 24px
}
p {
font-size: 16px
}
.link {
gap: .5rem
}
}
}
.support {
padding: 13rem 0 3rem 0;
.support_container {
.support_title,
.support_desc {
padding: 0 1.5rem;
text-align: center
}
.support_form {
padding: 2rem;
.form {
gap: 1.5rem
}
.content {
border-radius: 20px
}
}
}
}
.free_trial {
padding: 14rem 0.75rem 3rem 0.75rem;
.free_trial_container {
.free_trial_title {
font-size: 24px
}
.free_trial_desc {
font-size: 14px
}
.form {
gap: 1.5rem;
.free_trial_form {
margin-top: 2rem;
.form_group {
label {
font-size: 16px
}
}
}
}
}
}
.invite {
padding: 15rem 0.75rem 3rem 0.75rem;
.invite_container {
.invite_title {
font-size: 24px
}
.invite_desc {
font-size: 14px
}
.form {
gap: 1.5rem;
.invite_form {
margin-top: 2rem;
.form_group {
.input {
flex-direction: row;
padding: .7rem 1rem
}
}
button {
width: 100%
}
}
}
}
}
.teacher-form {
padding: 13rem 1rem 2rem 1rem;
.form-title {
font-size: 22px
}
.form-desc {
font-size: 13px
}
.form {
padding: 1.25rem
}
.progress-bar {
flex-wrap: wrap
}
.circle {
margin: 5px;
&::before {
width: 25px !important
}
}
}
.hero_single_curriculums {
padding: 9rem 0.75rem 3rem 0.75rem;
.hero_single_curriculums_container {
.hero_single_curriculums_img {
.data {
width: 100%;
height: auto;
position: static;
margin-top: 1rem;
.info {
h1 {
font-size: 18px
}
p {
font-size: 14px;
width: 100%
}
}
a {
font-size: 14px;
height: 40px
}
}
.time {
right: 10px;
bottom: 10px;
flex-direction: column;
align-items: stretch;
width: auto;
min-width: 170px;
height: auto;
gap: .5rem;
padding: .75rem 1rem;
.estimate {
justify-content: center;
flex-shrink: 0;
}
.estimate h3,
.estimate i {
font-size: 15px;
white-space: nowrap
}
.date_time {
width: 100%;
height: auto;
padding: 8px 10px;
justify-content: center;
h3 {
font-size: 14px;
white-space: nowrap
}
span {
font-size: 11px
}
}
}
}
.btns {
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
padding: 0 2rem;
button {
font-size: 16px;
margin: 5px 0
}
}
}
}
.single_curriculums_data {
padding: 0 0.75rem;
.single_curriculums_data_container {
.curriculums_desc {
h2 {
font-size: 22px
}
h3 {
font-size: 18px
}
p,
li,
td {
font-size: 14px
}
table {
width: 100%;
overflow-x: auto;
display: block
}
}
.books_content {
.item {
.item_img {
width: 300px;
height: 200px
}
.item_text {
p,
.btn_reaction {
width: 100%
}
}
}
}
}
}
.curriculums_hero {
background-image: none;
.curriculums_hero_container {
padding: 13rem 1rem 4rem 1rem;
.curriculums_hero_content {
.curriculums_hero_text {
h2 {
font-size: 28px
}
p {
font-size: 14px
}
}
}
.ditals {
height: auto;
bottom: -5%
}
}
}
.curriculums {
padding: 3rem 0;
.curriculums_container {
.curriculums_content {
.curriculum {
grid-template-columns: 1fr;
justify-items: center
}
}
.curriculums_btns {
button {
width: 100%
}
}
}
}
.tutors_hero {
padding: 13rem 0.75rem 2rem 0.75rem;
.tutors_hero_container {
.tutors_hero_content {
.tutors_hero_text {
.tutors_hero_title {
font-size: 26px
}
.tutors_hero_desc {
font-size: 14px
}
.tutors_hero_seaech {
gap: 1rem;
.input {
height: 40px;
input {
font-size: 16px;
height: auto
}
}
button {
height: 40px;
font-size: 16px
}
}
}
.tutors_hero_img {
height: auto
}
}
}
}
.tutors_filters {
padding: 1rem 0.75rem 0
}
.tutors_list {
padding: 2rem 0.75rem;
.tutors_list_container {
.tutors_list_cards {
.card_with_video {
.card {
width: 100%;
.card_content {
gap: 1.5rem;
flex-direction: column;
align-items: center;
text-align: center;
.info {
align-items: center;
h3,
h4,
p {
font-size: 14px
}
}
.ditals {
.totals {
flex-direction: row;
justify-content: space-around
}
.btns {
flex-direction: row;
.btn_tutors {
font-size: 14px;
height: 36px
}
}
}
}
.card_img {
width: 100%;
height: auto;
aspect-ratio: 3 / 4;
border-radius: 8px 8px 0 0;
img {
border-radius: 8px 8px 0 0
}
}
}
.video {
height: 60%
}
}
}
}
}
.pricing_section {
padding: 15rem 0.75rem 3rem 0.75rem;
.pricing_container {
.section_title {
font-size: 26px
}
.section_desc {
font-size: 14px;
width: 70%
}
.pricing_cards {
grid-template-columns: 1fr;
.pricing_card {
width: 100%;
padding: 25px 15px;
.price h5,
.price h4 {
font-size: 24px
}
.pricing_button a {
font-size: 14px;
height: 34px
}
}
}
}
}
.create_plan {
padding: 3rem 0.75rem;
.create_plan_container {
.create_plan_content {
.create_plan_data {
h2 {
font-size: 22px
}
p {
font-size: 16px
}
}
.create_plan_form {
padding: 15px;
.radio-group {
flex-direction: column;
gap: 1rem;
.male,
.female {
width: 100%
}
.numbrs {
flex-direction: column;
width: 100%;
.num {
width: 100%
}
}
.session_time {
grid-template-columns: 1fr;
.num {
width: 100%
}
}
}
}
}
}
}
.payment {
padding: 4rem 0;
.payment_container {
h2 {
font-size: 20px
}
.payment_imgs {
flex-direction: column;
.img {
width: 100%;
max-width: 300px;
height: auto
}
}
}
}
.pricing_que {
padding: 3rem 0.75rem;
.pricing_que_container {
h2 {
font-size: 26px
}
.pricing_que_desc {
font-size: 12.5px;
margin-bottom: 2rem
}
}
}
.policy {
padding: 13rem 0.75rem 3rem 0.75rem;
.policy_container {
.policy_content {
h2 {
font-size: 26px
}
h3 {
font-size: 18px
}
h4 {
font-size: 15px
}
p {
font-size: 14px;
line-height: 1.7
}
}
}
}
.terms {
padding: 13rem 0.75rem 3rem 0.75rem;
.terms_container {
.terms_content {
h2 {
font-size: 26px
}
h3 {
font-size: 16px
}
span {
font-size: 14px
}
p,
ul li {
font-size: 14px;
line-height: 1.7
}
}
}
}
.error {
padding: 13rem 0.75rem 3rem 0.75rem;
.error_container {
.error_content {
gap: 2rem;
.img {
img {
width: 100%;
max-width: 360px
}
}
.btn {
a {
width: 180px;
height: 40px;
font-size: 14px
}
}
}
}
}
.footer_data {
gap: 30px
}
.desc_img_logo {
align-items: center;
text-align: center
}
.footer_info {
align-items: center;
text-align: center
}
.footer_info .social {
justify-content: center
}
.footer_copy {
align-items: center
}
.footer_copy .pages {
gap: 1rem
}
}
@media (max-width:576px) {
.nav {
height: 70px;
.btns {
gap: 1rem;
margin-left: 9rem
}
}
.search-popup {
max-width: 95%
}
.expanded-input {
font-size: 13px
}
.information {
display: none !important
}
.information_moblie {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
flex-direction: column;
height: 100%;
.email,
.time,
.phone {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
color: var(--Metallic-Sunburst);
a,
span {
color: var(--Metallic-Sunburst);
font-size: 14.75px
}
}
}
.nav_menu {
width: 100%
}
.nav_close {
font-size: 2.5rem
}
.home {
padding: 5rem 0.75rem 2rem 0.75rem;
.home_container {
.home_content {
gap: 0;
.home_text {
h6 {
font-size: 12px
}
.home_btns {
flex-direction: column;
.btn,
.btn_secondary {
height: 38px;
font-size: 14px
}
.btn span {
font-size: 14px
}
}
}
.home_img {
margin-top: -10px;
margin-bottom: 1.5rem;
max-width: 300px
}
}
}
}
.eductional {
padding: 3rem 1rem;
.eductional_container {
h2 {
font-size: 1rem;
font-weight: var(--font-bold)
}
.eductional_content {
.line {
width: 127%;
height: 195px;
&::before {
top: 28px;
left: 65px;
transform: rotate(-60deg)
}
&::after {
bottom: 15px;
right: 155px;
transform: rotate(105deg)
}
}
.teacher,
& .student {
.teacher_img::after {
right: 165px;
top: 147%
}
.student_img::after {
left: 165px;
bottom: 106%
}
}
}
.teacher_img,
.student_img {
width: 100%;
height: auto
}
.teacher_info,
.student_info {
font-size: 12px;
width: 100% !important;
p {
font-size: 11px
}
}
.teacher_img .data,
.student_img .data {
width: 90%;
height: auto;
h3,
p {
font-size: 13px
}
}
}
}
.our_curriculums {
padding: 3rem 0.75rem;
border-radius: 41px 0 41px 0;
.our_curriculums_container {
.our_curriculums_header {
flex-direction: column;
.text {
align-items: center;
text-align: center;
a {
width: 100%
}
h2 {
font-size: 1rem
}
p {
font-size: 13px
}
}
.our_curriculums_btn {
gap: 1rem;
width: 70%;
.btn {
width: 100%;
a {
width: 100%;
font-size: 14px
}
}
.arrow {
transform: rotate(90deg)
}
}
}
.our_curriculums_content {
gap: 0;
.our_curriculum {
.our_curriculum_img {
width: 100%;
.our_curriculum_data {
padding: 10px;
width: 92%;
.info p {
font-size: 12px
}
.btn-lavel {
gap: 10px
}
}
}
}
}
}
}
.our_blog {
padding: 2rem 0;
.our_blog_container {
h2 {
font-size: 1rem;
padding: 5px;
margin-bottom: 2rem
}
.our_blog_items {
grid-template-columns: 1fr;
gap: 3rem;
.item {
.item_img {
width: 100%;
height: auto
}
.item_content {
width: 100%;
h3 {
font-size: 14px
}
p {
font-size: 11px;
margin-top: -8px
}
h4 {
font-size: 14px;
margin-top: 0
}
}
}
}
.all_blog {
a {
width: 100%;
font-size: 14px
}
}
}
}
.our_story {
padding: 4rem 0 2rem 0;
.our_story_container {
.our_story_header {
gap: 5px;
h2 {
font-size: 1rem
}
p {
font-size: 13px
}
}
.swiper {
margin-top: 2rem
}
.our_story_testimonials {
padding: 1rem;
p {
font-size: 12px;
&::before {
height: 2px
}
}
.info_user {
h4 {
font-size: 14px
}
span {
font-size: 9px
}
}
}
}
}
.bannar_section {
padding: 4rem 1rem 2rem 1rem;
.bannar {
padding: 1.5rem 1rem;
.text {
h4 {
font-size: 1rem
}
p {
font-size: 13px
}
a {
width: 100%;
font-size: 14px;
height: 40px
}
}
.bannar_img {
width: 180px;
height: 180px;
&::after {
width: 300px;
height: 300px
}
}
}
}
.questions {
padding: 4rem 0 2rem 0
}
.questions_container p {
font-size: 13px;
margin-bottom: 2rem
}
.question_answer p {
font-size: 13px
}
.questions_content_welcome {
.btns {
gap: 1rem;
flex-direction: column;
.btn_question,
.btn_second {
font-size: 14px;
height: 45px
}
}
}
.question_header {
padding: 15px
}
.question_header h3 {
font-size: 15px
}
.questions_img {
width: 100%;
height: auto
}
.hero_about {
padding: 10rem 0.75rem 2rem 0.75rem;
}
.teaching_strategy {
padding: 2rem 0.75rem;
.teaching_strategy_container {
h2 {
font-weight: var(--font-bold);
font-size: 1rem
}
p {
font-size: 13px;
margin-bottom: 2rem
}
.teaching_strategy_items {
gap: 1.5rem;
.item {
.item_img {
width: 100%;
height: auto
}
.item_info {
padding: .8rem 0;
h3 {
font-size: var(--h6-font-size)
}
}
}
}
}
}
.quran_academies {
padding: 3rem 0.75rem;
.quran_academies_container {
.quran_academies_content {
.quran_academies_info {
gap: 1.5rem;
.our_mission,
.our_vision {
gap: 1rem;
padding: 1rem;
.img {
width: 80px;
height: 80px
}
.text {
h3 {
font-size: 15px
}
p {
font-size: 12px
}
}
}
}
}
}
}
.our_teachers {
padding: 3rem 0.75rem;
.our_teachers_container {
padding: 2rem 1rem;
.our_teachers_items {
.item {
padding: 3.5rem 1rem 1.5rem 1rem;
width: 100% !important;
img {
top: -25px;
left: 15px;
width: 55px;
height: 55px
}
.item_info {
gap: .5rem;
h3 {
font-size: 15px
}
ul {
padding-left: .8rem;
font-size: 12px;
li {
margin-bottom: 8px
}
}
}
}
}
}
}
.our_school {
padding: 3rem 0.75rem;
.our_school_container {
.our_school_content {
.our_school_info {
h2 {
font-size: 20px
}
p {
font-size: 13px
}
}
.our_school_img {
height: auto
}
}
}
}
.hero-blogs {
border-radius: 0 0 30px 30px;
.hero-blogs_container {
padding: 1rem 0;
.hero-blogs_content {
h2 {
font-size: 24px;
text-align: center
}
.input {
margin-top: .8rem;
input {
width: 100%;
border-radius: 4px 4px 0 0
}
button {
position: static;
border-radius: 0 0 4px 4px
}
}
}
}
}
.blogs {
padding: 0 0.75rem;
.blogs_container {
padding: 2rem 0;
.our_blog_items {
gap: 2rem;
.item {
.item_img {
height: 180px
}
.item_content {
gap: .5rem;
.reaction_date {
gap: .5rem;
align-items: center;
text-align: center
}
h3 {
font-size: 15px
}
p {
font-size: 11px
}
}
}
}
#pagination {
gap: .3rem
}
#pagination button {
width: 28px;
height: 28px;
font-size: 12px
}
}
}
.single_blog {
padding: 15rem 0.75rem 1rem 0.75rem;
.single_blog_container {
.single_blog_content {
h1 {
font-size: 20px
}
.single_newslatte_date_share {
align-items: flex-start;
gap: .5rem;
.date span {
font-size: 14px
}
.share a {
font-size: 16px
}
}
.blog_img {
height: 260px;
.play-movie {
width: 50px;
height: 50px;
font-size: var(--h5-font-size)
}
}
}
}
}
.single_blog_data {
padding: 2rem 0.75rem;
.single_blog_data_container {
.blog_desc {
h2 {
font-size: 18px
}
h3 {
font-size: 15px
}
p {
font-size: 14px
}
ul li,
ol li {
font-size: 14px
}
table {
font-size: 12px
}
}
.forms {
.btns {
flex-direction: column;
gap: .5rem;
.btn {
font-size: 16px;
height: 38px
}
}
.form_1,
.form_2 {
.group {
flex-direction: column;
gap: 1.5rem
}
textarea {
width: 300px;
height: 120px
}
button {
font-size: 16px;
height: 40px
}
}
}
}
}
.related_blog {
padding: 2rem 0.75rem;
.related_blog_container {
h2 {
font-size: 18px;
background-size: 200px 35px
}
.items {
.item {
.item_img {
height: 160px
}
.item_content {
h3 {
font-size: 14px
}
p {
font-size: 10px
}
.reaction_date {
flex-direction: column;
gap: 5px
}
}
}
}
}
}
.thanks {
.thanks_container {
padding: 15rem 1.5rem 2rem 1.5rem;
background-size: 250px 100%, 250px 100%
}
}
.subscribe {
padding: 4rem 0.75rem;
.subscribe_container {
h2 {
font-size: 20px;
margin-bottom: 3rem
}
.subscribe_content {
.step {
padding: 1.5rem;
.num_step {
span {
width: 40px;
height: 40px;
font-size: 18px
}
h4 {
font-size: 18px
}
}
p {
font-size: 12px
}
a {
font-size: 13px;
height: 38px
}
}
}
}
}
.libraray_hero {
padding: 7rem 0.75rem 1.5rem 0.75rem;
.libraray_hero_container {
.libraray_hero_content {
gap: 1rem;
.libraray_hero_text {
width: 90%;
h2 {
font-size: 24px
}
p {
font-size: 14px
}
h4 {
font-size: 15px
}
.input {
align-items: stretch;
position: relative;
margin-top: .8rem;
input {
width: 80%;
padding-left: 20px;
font-size: 16px;
height: 42px
}
button {
position: static;
font-size: 16px
}
}
}
.libraray_hero_img {
width: 100%;
height: auto
}
}
}
}
.books {
padding: 3rem 0.75rem;
.books_container {
.books_content {
.item {
.item_img {
width: 130px;
height: 130px
}
.item_text {
h3 {
font-size: 16px
}
p {
font-size: 12px
}
.btn_reaction {
.btn a {
font-size: 13px
}
.reaction {
i {
font-size: 14px;
padding: .6rem
}
span {
font-size: 13px
}
}
}
}
}
}
}
}
.testimonials {
padding: 10rem 0.75rem 1rem 0.75rem;
background-size: 200px 100%, 200px 100%;
.testimonials_container {
h2 {
font-size: 22px
}
p {
margin-bottom: 3rem
}
.testimonials_items {
.item {
.quote {
width: 45px;
height: 45px;
font-size: 16px
}
p {
font-size: 13px
}
.info_user {
h4 {
font-size: 16px
}
span {
font-size: 11px
}
}
}
}
}
}
.testimonials_second {
padding-top: 1rem;
margin-bottom: 5rem
}
.welcome {
padding: 15rem 0.75rem 2rem 0.75rem;
.welcome_container {
padding: 1.5rem;
h2 {
font-size: 22px;
width: 100%
}
p {
font-size: 14px;
width: 100%
}
.btns {
gap: 1rem;
flex-direction: column;
.btn,
.btn_second {
font-size: 14px;
height: 45px
}
}
}
}
.support {
padding: 10rem 0 3rem 0;
.support_container {
.support_title {
font-size: var(--h4-font-size)
}
.support_desc {
font-size: var(--normal-font-size)
}
.support_form {
padding: 1.5rem;
.form {
.form_group {
label {
font-size: 16px
}
.input {
padding: .8rem;
height: auto;
input {
font-size: 12px
}
}
.textarea {
height: 140px
}
}
button {
height: 40px;
font-size: 14px;
i {
width: 24px;
height: 24px;
font-size: 12px
}
}
}
.content {
padding: 1.5rem;
gap: 2rem;
h3 {
font-size: 18px
}
p {
font-size: 14px
}
}
}
}
}
.free_trial {
padding: 10rem 0.75rem 3rem 0.75rem;
.free_trial_container {
.form {
width: 100%;
.free_trial_form {
width: 100%;
padding: 1.5rem;
.form_group {
width: 100%;
.input {
width: 100%;
padding: .7rem 1rem
}
}
}
.btns_form {
flex-direction: column;
gap: .8rem;
width: 100%;
.btns_form_actions {
flex-direction: column;
gap: .8rem;
width: 100%
}
button,
a {
font-size: 14px;
height: 42px;
width: 100%
}
}
}
}
}
.invite {
padding: 10rem 0.75rem 3rem 0.75rem;
.invite_container {
.form {
.invite_form {
width: 100%;
padding: 1.5rem;
.form_group {
width: 100%;
.input {
width: 100%;
flex-direction: row;
gap: .8rem;
height: auto
}
}
button {
font-size: 14px;
height: 42px
}
}
}
}
}
.teacher-form {
padding: 10rem 1rem 2rem 1rem;
.form-desc {
margin-bottom: 0
}
.form-title {
font-size: 20px
}
.form {
padding: 1.5rem 1rem
}
.input {
flex-direction: row;
height: auto;
padding: .5rem .75rem
}
.submit-btn {
font-size: 13px;
padding: .5rem 1rem
}
.form-group label {
font-size: 16px
}
.form-section h3 {
font-size: 16px
}
.circle {
width: 8px;
height: 8px;
&::before {
width: 8px !important;
height: 1px !important;
left: 10px !important
}
}
}
.hero_single_curriculums {
padding: 14rem 0.75rem 2rem 0.75rem;
.hero_single_curriculums_container {
.hero_single_curriculums_img {
.data {
padding: 1rem
}
.time {
right: 6px;
bottom: 63%;
padding: .5rem;
width: 200px;
height: 35px;
.estimate h3,
.estimate i {
font-size: 13px
}
.date_time {
height: 20px;
padding: 5px;
h3 {
font-size: 10px
}
span {
font-size: 8px
}
}
}
.rating h3 {
font-size: 10px
}
.stars span {
font-size: 10px
}
}
.btns {
justify-content: center;
padding: 0 1rem;
column-gap: 3rem
}
}
}
.single_curriculums_data {
.single_curriculums_data_container {
.testimonials_items {
grid-template-columns: repeat(1, 1fr);
gap: 2rem
}
.books_content .item {
padding: 1rem 0;
flex-direction: column;
justify-content: center;
align-items: center;
.item_text {
align-items: center;
text-align: center
}
.item_img {
width: 184px;
height: auto
}
}
.btn_reaction {
flex-direction: column !important;
align-items: start !important;
gap: 1rem !important
}
.btn_reaction {
.btn {
width: 100%;
a {
width: 100% !important
}
}
}
}
}
.curriculums_hero {
.curriculums_hero_container {
padding: 10rem 1rem 9rem 1rem;
.curriculums_hero_content {
.curriculums_hero_text {
.top {
flex-direction: column;
margin-bottom: 10px
}
h2 {
width: 100%;
font-size: 24px
}
.top span {
width: auto;
padding: 5px 15px
}
.input {
width: 100%;
button {
width: 110px;
font-size: 13px;
gap: 6px
}
}
form {
width: 100%
}
}
.curriculums_hero_img {
height: auto
}
}
.ditals {
bottom: -7%;
.hours,
.students,
.teachers,
.experience {
h4 {
font-size: var(--h5-font-size)
}
}
}
}
}
.curriculums {
padding: 4rem 0 3rem 0;
.curriculums_container {
.curriculums_content {
.curriculum {
margin-top: 0;
.our_curriculum_img {
width: 100%
}
.our_curriculum_data {
bottom: 7px !important;
left: 4px !important;
padding: 7px !important;
width: 97% !important;
height: fit-content !important;
.info {
width: 100% !important;
p {
width: 100% !important
}
}
.btn-lavel {
flex-direction: column;
gap: 4rem !important
}
}
}
}
}
}
.tutors_hero {
padding: 10rem 0.75rem 2rem 0.75rem;
.tutors_hero_container {
.tutors_hero_content {
.tutors_hero_text {
.tutors_hero_title {
font-size: 22px
}
.tutors_hero_seaech {
gap: .5rem;
.input {
padding: .5rem
}
button {
font-size: 14px
}
}
}
}
}
}
.tutors_list {
padding: 2.5rem 0.75rem;
.tutors_list_container {
.tutors_list_cards {
.card_with_video {
grid-template-columns: 1fr;
.tutor_video_col {
display: none
}
.tutor_video_icon_btn {
display: flex
}
.card {
.card_content {
gap: 1rem;
.info {
width: 100%;
p {
font-size: 12px
}
}
.ditals {
width: 100%;
.totals {
gap: 3rem
}
.btns {
width: 100%;
gap: .5rem;
flex-direction: column;
.btn_tutors {
width: 100%;
height: 34px;
font-size: 13px
}
}
}
}
}
.video {
height: 40%
}
}
}
}
.pagination {
gap: 6px;
button {
padding: 6px 10px;
font-size: 13px
}
}
}
.pricing_section {
padding: 10rem 0.75rem 3rem 0.75rem;
.pricing_container {
.section_title {
font-size: 22px
}
.section_desc {
font-size: 13px;
width: 100%;
margin-bottom: 3rem
}
.pricing_cards {
grid-template-columns: 1fr;
width: 100%;
.pricing_card {
height: 550.6656px;
.pricing_header {
gap: 0;
h3 {
font-size: 20px
}
p {
margin-bottom: 0
}
}
.price h5::after {
width: 50px;
bottom: 15px
}
.currency {
flex-wrap: wrap;
margin-bottom: 2rem
}
.pricing_features {
gap: 18px;
margin-bottom: 0;
li {
font-size: var(--normal-font-size)
}
}
.pricing_button a {
width: 100%
}
}
}
}
}
.create_plan {
padding: 2rem 0.75rem;
.create_plan_container {
.create_plan_content {
padding: 2rem 10px;
box-shadow: none;
.create_plan_data {
h2 {
font-size: 20px
}
p {
font-size: 15px
}
.arrow {
font-size: 24px;
transform: rotate(90deg)
}
}
.create_plan_form {
padding: 15px;
.radio-group {
.numbrs {
display: grid;
grid-template-columns: repeat(2, 1fr)
}
}
button {
font-size: 16px;
font-weight: var(--font-bold);
padding: 8px
}
}
}
}
}
.payment {
padding: 3rem 0.75rem;
.payment_container {
h2 {
font-size: 25px
}
.payment_imgs {
gap: 1.5rem
}
}
}
.pricing_que {
padding: 2rem 0.75rem;
.pricing_que_container {
h2 {
font-size: 22px
}
.pricing_que_desc {
font-size: 12px;
margin-bottom: 1.5rem
}
}
}
.policy {
padding: 15rem 0.75rem 3rem 0.75rem;
.policy_container {
.policy_content {
h2 {
font-size: 22px
}
h3 {
font-size: 16px
}
h4 {
font-size: 14px
}
p {
font-size: 13.5px;
line-height: 1.6
}
}
}
}
.terms {
padding: 15rem 0.75rem 3rem 0.75rem;
.terms_container {
.terms_content {
h2 {
font-size: 22px
}
h3 {
font-size: 15px
}
span {
font-size: 13px
}
p,
ul li {
font-size: 13.5px;
line-height: 1.6
}
}
}
}
.error {
padding: 15rem 0.75rem 3rem 0.75rem;
.error_container {
.error_content {
.img {
img {
width: 100%;
max-width: 300px
}
}
.btn {
a {
width: 170px;
height: 38px;
font-size: 13.5px
}
}
}
}
}
footer {
padding: 2rem 1rem
}
.footer_section {
padding: 2rem 1rem
}
.footer_copy p {
gap: 10px
}
.footer_copy .pages {
gap: .5rem
}
.footer_data {
gap: 20px
}
}
button[type="submit"][name="send_request"] {
transition: all .3s ease;
cursor: pointer
}
button[type="submit"][name="send_request"]:hover {
background-color: #008a84;
color: white !important;
transform: translateY(-2px);
box-shadow: 0 6px 12px rgb(0 161 153 / .3)
}
button[type="submit"] {
transition: all .3s ease;
cursor: pointer
}
button[type="submit"]:hover {
background-color: #008a84;
color: white !important;
transform: translateY(-2px);
box-shadow: 0 6px 12px rgb(0 161 153 / .3)
}
button[type="submit"]:hover i.fa-arrow-right {
transform: translateX(5px);
transition: transform .3s ease
}
button,
.btn,
a.btn {
transition: all .3s ease;
cursor: pointer
}
button:hover,
.btn:hover {
background-color: #008a84 !important;
color: white !important;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgb(0 161 153 / .25)
}
button:hover i,
.btn:hover i {
transform: translateX(3px)
}
.btn_secondary:hover,
button.btn_secondary:hover {
background-color: #88771f !important;
color: white !important;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgb(154 135 49 / .25)
}
.btn_secondary:hover i {
color: white !important;
transform: none !important
}
.btn_second:hover,
button.btn_second:hover {
background-color: var(--persain-Green) !important;
color: white !important;
border-color: var(--persain-Green) !important
}
.nav .btn_free:hover,
.btn-mobile:hover {
background: linear-gradient(90deg, #88771f -6.08%, #9A8731 26.92%, #B89F3A 88.92%);
color: white !important;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgb(154 135 49 / .3)
}
.form button:hover,
.form_group button:hover {
background-color: #008a84 !important;
color: white !important;
transform: translateY(-2px);
box-shadow: 0 6px 12px rgb(0 161 153 / .3)
}
.pricing_button a:hover {
background: linear-gradient(90deg, #88771f -6.08%, #9A8731 26.92%, #B89F3A 88.92%) !important;
color: white !important;
transform: translateY(-2px);
box-shadow: 0 6px 12px rgb(154 135 49 / .3)
}
button i,
.btn i,
a.btn i {
transition: transform .3s ease
}
.btn_phone {
overflow: visible !important
}
.btn_phone button {
overflow: visible !important;
background: #fff0;
border: none;
padding: 8px
}
.btn_phone:hover button {
background-color: transparent !important;
transform: none !important
}
.btn_phone button i {
transition: color .3s ease
}
.btn_phone:hover button i,
.btn_phone button:hover i {
color: #008a84 !important;
transform: none !important
}
.btns_form button:hover,
.btns_form a:hover {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgb(0 0 0 / .15)
}
a,
button,
.btn,
input[type="submit"] {
transition: all .3s ease
}
button:active,
.btn:active {
transform: scale(.98)
}
button:disabled,
.btn:disabled {
opacity: .6;
cursor: not-allowed;
transform: none !important
}
button:disabled:hover,
.btn:disabled:hover {
background-color: initial !important;
box-shadow: none !important
}
@media (max-width: 576px) {
.review_form_fields_row {
grid-template-columns: 1fr !important
}
}
.ayu-reactions-wrapper {
display: flex;
align-items: center;
gap: 1rem;
margin: 2.5rem 0;
padding: 1rem 0;
border-top: 1px solid #f2f2f2;
border-bottom: 1px solid #f2f2f2;
}
.reaction-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.6rem 1.2rem;
background-color: #fff;
border: 1.5px solid #e2e8f0;
border-radius: 24px;
color: var(--black);
font-family: var(--body-font);
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
cursor: pointer;
box-shadow: 0 2px 4px rgb(0 0 0 / 0.02);
transition: all 0.3s ease-in-out;
}
.reaction-btn:hover:not(:disabled) {
border-color: var(--persain-Green);
color: var(--persain-Green);
background-color: #f7fdfd;
transform: translateY(-1px);
}
.reaction-btn i {
font-size: var(--h5-font-size);
color: var(--Sonic-Silver);
transition: color 0.3s ease;
}
.reaction-btn:hover:not(:disabled) i {
color: var(--persain-Green);
}
.reaction-btn.active {
background-color: #f0faf9;
border-color: var(--persain-Green);
color: var(--persain-Green);
cursor: not-allowed;
box-shadow: none;
}
.reaction-btn.active i {
color: var(--persain-Green);
}
.reaction-btn[data-type="love"].active {
background-color: #fff5f5;
border-color: #ef4444;
color: #dc2626;
}
.reaction-btn[data-type="love"].active i {
color: #ef4444;
}
.reaction-btn[data-type="smile"].active {
background-color: #fffbeb;
border-color: var(--Metallic-Sunburst);
color: var(--Metallic-Sunburst);
}
.reaction-btn[data-type="smile"].active i {
color: var(--Metallic-Sunburst);
}
.reaction-btn.processing {
opacity: 0.5;
pointer-events: none;
animation: reactionPulse 0.8s infinite alternate ease-in-out;
}
@keyframes reactionPulse {
0% {
transform: scale(1);
}
100% {
transform: scale(0.96);
}
}