@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');
body.page-template-course,
body.page-template-course-content,
body.page-template-landing {
    margin: 0;
    font-family: "Tajawal", sans-serif !important;
    background-color: #EFE3D3;
}
body.page-template-course .nav,
body.page-template-course-content .nav,
body.page-template-landing .nav {
    background: rgb(255 255 255 / 0%);
    backdrop-filter: blur(12px);
    border-radius: 2px;
}
body.page-template-course .site-footer,
body.page-template-course-content .site-footer,
body.page-template-landing .site-footer {
    a:not(.btn):not(.link) {
        color: #021826;
    }

    background: transparent;

    p {
        color: #021826;
    }

    .sm-links {
        a {
            background-color: #021826;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;

            &:hover {
                i {
                    color: #f1e7d9;
                }
            }
        }
    }
}

.vh-1 {
    height: 100vh;
}

.h-1 {
    height: 100%;
}

.d-flex {
    display: flex;
}

.fd-col {
    flex-direction: column;
}

.align-center {
    align-items: center;
}

.j-center {
    justify-content: center;
}

.my-7 {
    margin-top: 7rem;
    margin-bottom: 7rem;
}

.padding-left-2 {
    padding-inline-start: 2rem;
}

.container,
.wp-block-group__inner-container {
    width: 100%;
    max-width: 1540px;
    padding: 0 15px;
    margin-inline: auto;
    box-sizing: border-box;
}

@media (max-width: 1540px) {

    .container,
    .wp-block-group__inner-container {
        padding: 0 4rem;
    }
}

@media (max-width: 1300px) {

    .container,
    .wp-block-group__inner-container {
        padding: 0 2rem;
    }
}

@media (max-width: 768px) {

    .container,
    .wp-block-group__inner-container {
        padding: 0 1rem;
    }
}


.w-1 {
    width: 100%;
}

.w-3 {
    width: 33.3%;
}

.w-13 {
    width: calc(100% - 33.3%);
}

.w-14 {
    width: 75%;
}

.w-4 {
    width: 25%;
}

/* Button */
.btn {
    font-weight: 700;
    font-size: 20px;
    line-height: 120%;
    padding: 0.8rem 1.2rem;
    border-radius: 4px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.main-btn {
    background-color: #021826;
    color: #FFFFFF;
    position: relative;
    padding-inline-start: 1.5rem !important;
    padding-inline-end: 3rem !important;
    transition: all 0.3s ease-in-out;
	
    &::before {
        position: absolute;
        content: "\f060";
        left: 13px;
        font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
        font-weight: 900;
        transition: all 0.4s ease-in-out;
        border: 2px solid #fff;
        border-radius: 50%;
        padding: 0rem 0.3rem;
        font-size: 13px;
		width: 25px;
        height: 25px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    &:hover {
        background-color: #021826cc;

        &::before {
            transform: rotate(30deg);
        }
    }
}

.second-btn {
    background-color: transparent;
    border: 1px solid #021826;
    color: #021826;

    &:hover {
        background-color: #00000026;
    }
}

.btns-wrap {
    margin-top: 2rem;
}

/* Headings */
.main-title {
    font-family: "Tajawal", sans-serif !important;
    font-weight: 700;
    font-size: 70px;
    line-height: 120%;
    text-align: center;
    margin: 0;
    color: #021826;
}

p {
    font-weight: 400;
    font-size: 20px;
    color: #021826;
    line-height: 120%;
    margin: 0;

    span {
        font-weight: 700;
        line-height: 140%;
    }
}

.top-section-title {
    font-family: "Tajawal", sans-serif !important;
    font-weight: 700;
    font-size: 95px;
    line-height: 120%;
    color: #021826;
    text-align: center;
    margin: 0;
}

.small-section-title {
    font-family: "Tajawal", sans-serif !important;
    font-weight: 700;
    font-size: 32px;
    color: #021826;
    margin: 0.5rem 0 1rem 0;
    line-height: 120%;
}

.second-title {
    font-family: "Tajawal", sans-serif !important;
    font-size: 64px;
    color: #021826;
    font-weight: 700;
    line-height: 120%;
    text-align: center;
}


/* Glass Box Effect */
.glass-efect-box {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 9px;
    border: 1px solid #FFFFFF80;
    padding: 3rem 2rem;
    max-width: 80%;
    margin-top: -2rem;
}

/* hero section */
.hero-sec {
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 6rem;
    position: relative;
    .subtitle {
        font-family: "Tajawal", sans-serif !important;
        font-weight: 700;
        font-size: 32px;
        line-height: 120%;
        margin: 3rem 0;
    }
    .wrapper {
        position: relative;
        z-index: 1;

        .moon {
            width: 100%;
            height: 100%;
            display: block;
            max-width: 375px;
            max-height: 375px;
            margin: 3rem 0 1rem 0;
        }

        .first-paragraph {
            font-weight: 400;
            font-size: 32px;
            line-height: 120%;
            text-align: center;
            margin: 0;
            color: #021826;
        }

        .btns-wrap {
            margin-top: 2rem;
            gap: 1rem;
        }
    }

    &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 40%;
        pointer-events: none;
        background: linear-gradient(to top,
                rgba(239, 227, 211, 1) 0%,
                rgba(239, 227, 211, 0.6) 40%,
                rgba(239, 227, 211, 0.3) 70%,
                rgba(239, 227, 211, 0) 100%);
        z-index: 0;
    }
}

/* Details Section */
.details-sec {
    .details-wrap {
        .detail {
            .icon {
                width: 100px;
                height: 100px;
            }

            .numper {
                font-size: 40px;
                line-height: 120%;
                text-align: center;
                color: #021826;
                margin: 0;
                font-weight: 700;
                padding: 0.5rem 0;
            }

            .info {
                font-size: 24px;
                line-height: 120%;
                text-align: center;
                color: #021826;
                margin: 0;
                font-weight: 400;
            }
        }
    }
}

/* Quote Section */
.quote-sec {
    .wrapper {
        .image-box {
            overflow: hidden;

            img {
                width: 100%;
                height: 100%;
                max-width: 570px;
                max-height: 560px;
                display: block;
				object-fit: contain;
            }
        }
    }
}

/* Inner Voice Section */
.inner-voice-sec {
    position: relative;
    background-repeat: no-repeat;
    background-size: contain;
}

/* Steps Conect Section */
.steps-conect-sec {
    .wrapper-steps {
        gap: 4rem 0;

        .step {
            img {
                width: 100%;
                height: 100%;
                display: block;
                max-width: 100px;
                max-height: 100px;
            }

            .steps-text {
                font-size: 40px;
                font-weight: 700;
                margin: 0;
                text-align: center;
                line-height: 120%;
                color: #021826;
            }
        }
    }

    p {
        text-align: center;
    }
}

/* About Journey */
.about-journey-sec {
    .wrapper {
        .glass-efect-box {
            margin-top: -2.1rem;
            padding-top: 3rem;
        }
    }
}

/* Get Ready Section */
.get-ready-sec {
    .wrapper {
        .glass-efect-box {
            p {
                text-align: center;
            }
        }
    }
}

/* Join Section */
.join-sec {
    .wrapper {
        .glass-efect-box {
            p {
                text-align: center;
            }
        }
    }
}

/* Sessions Section */
.sessions-sec {
    padding-top: 1px;
    position: relative;
    background-repeat: no-repeat;
    background-size: contain;

    .wrapper {
        .session {
            padding: 1rem 0;

            P {
                max-width: 60%;
            }
        }
    }
}

/* responsive */
@media (max-width: 768px) {
	.hero-sec .btn {
		width: 100%;
		justify-content: center;
	}
    .main-title {
        font-size: 35px;
    }

    .my-7 {
        margin-top: 3rem;
        margin-bottom: 3rem;
    }

    .top-section-title {
        font-size: 45px;
    }

    .second-title {
        font-size: 32px;
        margin: 0;
    }

    .glass-efect-box {
        margin-top: -0.5rem;
        padding: 2rem 1rem;
		max-width: 100%;
    }

    .small-section-title {
        font-size: 26px;
    }

    p {
        font-size: 17px;
    }

    .hero-sec {
        .wrapper {
            .moon {
                max-width: 255px;
                margin: 1.5rem 0 1rem 0;
            }

            .first-paragraph {
                font-size: 20px;
            }
        }
    }

    .btns-wrap {
        margin-top: 1rem;
    }

    .btn {
        padding: 0.6rem 0.6rem;
        font-size: 14px;
		margin: 0;
    }

    .main-btn {
        &::before {
            font-size: 10px;
        }
    }

    .details-sec {
        .details-wrap {
            .detail {
                width: 50% !important;
                margin-bottom: 2rem;

                .icon {
                    width: 85px;
                    height: 85px;
                }

                .numper {
                    font-size: 29px;
                }

                .info {
                    font-size: 20px;
                }
            }
        }
    }

    .quote-sec {
        .wrapper {
            flex-direction: column;
            align-items: center;

            .image-box {
                max-width: 280px;
                display: flex;
                align-items: center;
                justify-content: center;
                order: 0;
            }

            .text-box {
				padding-top: 2rem;
                order: 1;
            }
        }
    }

    .steps-conect-sec {
        .wrapper-steps {
            gap: 2.5rem 0;
            padding-bottom: 2rem;

            .step {
                img {
                    max-width: 85px;
                    max-height: 85px;
                }

                .steps-text {
                    font-size: 22px;
                }
            }
        }
    }

    .about-journey-sec {
        .wrapper {
            .glass-efect-box {
                margin-top: -0.7rem;
                padding-top: 2rem;
            }
        }
    }

    .sessions-sec {
        .wrapper {
            .session {
                p {
                    max-width: 100%;
                }
            }
        }
    }
	.copy-rights-sec {
		flex-direction: column;
	}
}