/* ===============================================
   MODERN COMPREHENSIVE ANIMATION SYSTEM - CSS
   =============================================== */

/* 1. KEYFRAMES AND ANIMATION DEFINITIONS */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-180deg) scale(0.5);
    }

    to {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(100%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }

    70% {
        transform: scale(0.9);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes flipInX {
    from {
        opacity: 0;
        transform: perspective(400px) rotateX(-90deg);
    }

    40% {
        transform: perspective(400px) rotateX(-20deg);
    }

    60% {
        transform: perspective(400px) rotateX(10deg);
    }

    80% {
        transform: perspective(400px) rotateX(-5deg);
    }

    to {
        opacity: 1;
        transform: perspective(400px) rotateX(0deg);
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }

    50% {
        opacity: 1;
    }

    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }
}

@keyframes wiggle {

    0%,
    7% {
        transform: rotateZ(0);
    }

    15% {
        transform: rotateZ(-15deg);
    }

    20% {
        transform: rotateZ(10deg);
    }

    25% {
        transform: rotateZ(-10deg);
    }

    30% {
        transform: rotateZ(6deg);
    }

    35% {
        transform: rotateZ(-4deg);
    }

    40%,
    100% {
        transform: rotateZ(0);
    }
}

@keyframes glow {

    0%,
    100% {
        box-shadow: 0 0 5px rgba(3, 141, 145, 0.5);
    }

    50% {
        box-shadow: 0 0 20px rgba(3, 141, 145, 0.8), 0 0 30px rgba(3, 141, 145, 0.6);
    }
}

@keyframes slideInBlur {
    from {
        opacity: 0;
        transform: translateX(-100px);
        filter: blur(5px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

@keyframes morphBorder {

    0%,
    100% {
        border-radius: 10px;
    }

    25% {
        border-radius: 25px 10px;
    }

    50% {
        border-radius: 25px;
    }

    75% {
        border-radius: 10px 25px;
    }
}

/* 2. GENERAL ELEMENT ANIMATIONS */

/* Universal smooth transitions */
*,
*::before,
*::after {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.OD-partner-know .-container {
    opacity: 1;
    transform: translateY(0px);
}

.th.-kyojin-intro-body {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.-intro-descption {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Section animations */
section,
.-section,
.-container {
    opacity: 0;
    transform: translateY(60px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.container {
    max-width: 1440px;
    margin: 0 auto;
    padding-inline: 120px;
    opacity: 1 !important;
    transform: translateY(0) !important;
    background: #000403;
}

section.animate-in,
.-section.animate-in,
.container.animate-in,
.-container.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Heading animations */
h1,
h2,
h3,
h4,
h5,
h6 {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

h1.animate-in,
h2.animate-in,
h3.animate-in,
h4.animate-in,
h5.animate-in,
h6.animate-in {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Text animations */
p,
.-text,
.description {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

p.animate-in,
.-text.animate-in,
.description.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Button animations */
.-button-ui,
.btn,
button,
.button {
    opacity: 0;
    transform: scale(0.8) rotateZ(-5deg);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.-button-ui.animate-in,
.btn.animate-in,
button.animate-in,
.button.animate-in {
    opacity: 1;
    transform: scale(1) rotateZ(0deg);
}

/* Enhanced hover effects for buttons */
.-button-ui:hover,
.btn:hover,
button:hover,
.button:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    filter: brightness(1.1);
}

.-button-ui:active,
.btn:active,
button:active,
.button:active {
    transform: translateY(-1px) scale(0.98);
    transition: all 0.1s ease;
}

/* Image animations */
img,
.-image,
.image {
    opacity: 0;
    transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

img.animate-in,
.-image.animate-in,
.image.animate-in {
    opacity: 1;
}

/* Enhanced image hover effects */
img:hover,
.-image:hover,
.image:hover {
    filter: brightness(1.1) contrast(1.1);
}

/* Card animations */
.-card,
.card,
.-item,
.item,
.-post,
.post {
    opacity: 0;
    transform: translateY(40px) rotateX(10deg);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.-card.animate-in,
.card.animate-in,
.-item.animate-in,
.item.animate-in,
.-post.animate-in,
.post.animate-in {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
}

/* Enhanced card hover effects */
.-card:hover,
.card:hover,
.-item:hover,
.item:hover {
    transform: translateY(-15px) rotateX(-2deg) rotateY(2deg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.-card:hover img,
.card:hover img,
.-item:hover img,
.item:hover img {
    transform: scale(1.1);
}

/* 3. SPECIALIZED ANIMATIONS */

/* Header animations */
header {
    opacity: 0;
    transform: translateY(-100%);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

header.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Logo animations */
header .-logo,
.logo {
    opacity: 0;
    transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

header .-logo.animate-in,
.logo.animate-in {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.-logo:after {
    content: '';
    position: absolute;
    right: 0;
    width: 1px;
    top: 2px;
    height: 35px;
    background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
}

header .menu-item.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered menu animation */
header .menu-item:nth-child(1) {
    transition-delay: 0.1s;
}

header .menu-item:nth-child(2) {
    transition-delay: 0.2s;
}

header .menu-item:nth-child(3) {
    transition-delay: 0.3s;
}

header .menu-item:nth-child(4) {
    transition-delay: 0.4s;
}

header .menu-item:nth-child(5) {
    transition-delay: 0.5s;
}

/* Banner/Hero animations */
.banner,
.-hero-section,
.-main-banner {
    opacity: 0;
    transform: scale(1.1) translateY(-50px);
    transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.banner.animate-in,
.-hero-section.animate-in,
.-main-banner.animate-in {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Form animations */
form,
.-form {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

form.animate-in,
.-form.animate-in {
    opacity: 1;
    transform: translateY(0);
}

form input,
form textarea,
form select {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

form.animate-in input,
form.animate-in textarea,
form.animate-in select {
    opacity: 1;
    transform: translateX(0);
}

/* Staggered form field animations */
form input:nth-child(1),
form textarea:nth-child(1),
form select:nth-child(1) {
    transition-delay: 0.1s;
}

form input:nth-child(2),
form textarea:nth-child(2),
form select:nth-child(2) {
    transition-delay: 0.2s;
}

form input:nth-child(3),
form textarea:nth-child(3),
form select:nth-child(3) {
    transition-delay: 0.3s;
}

form input:nth-child(4),
form textarea:nth-child(4),
form select:nth-child(4) {
    transition-delay: 0.4s;
}

/* Enhanced form field focus effects */
input:focus,
textarea:focus,
select:focus {
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(3, 141, 145, 0.3);
}

/* 4. HOVER AND INTERACTIVE ANIMATIONS */

/* Link hover effects */
a {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

a:hover {
    transform: translateY(-2px);
}

/* List item hover effects */
li {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


/* Icon animations */
i,
.icon {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

i:hover,
.icon:hover {
    transform: scale(1.2) rotate(10deg);
    color: var(--uicolor-1);
}

/* 5. LOADING AND STATE ANIMATIONS */

/* Loading animation */
.loading,
.-loading {
    animation: pulse 2s infinite;
}

/* Success state animation */
.success {
    animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Error state animation */
.error {
    animation: wiggle 0.6s ease-in-out;
}

/* 6. SCROLL ANIMATIONS */

/* Parallax elements */
.-parallax,
.parallax-bg {
    transition: transform 0.1s linear;
}

.-parallax-slow {
    transition: transform 0.2s linear;
}

.-parallax-fast {
    transition: transform 0.05s linear;
}

/* 7. SPECIFIC ELEMENT ANIMATIONS */

/* Counter animations */
.-counter,
.counter {
    font-variant-numeric: tabular-nums;
    transition: all 0.3s ease;
}

/* Progress bar animations */
.-progress,
.progress-bar {
    position: relative;
    overflow: hidden;
}

.-progress::before,
.progress-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

/* 8. ENHANCED EXISTING ANIMATIONS */

/* Enhanced value cards */
.--mostklon {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.--mostklon:hover {
    transform: translateY(-10px) rotateY(5deg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}


/* Enhanced features */
.-features-gridboxes-item {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.-features-gridboxes-item:hover {
    transform: translateY(-15px) scale(1.02);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

/* Enhanced stage content */
.all-stage-content,
.all-stage-contenter {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.all-stage-content:hover,
.all-stage-contenter:hover {
    transform: translateY(-8px) rotateX(2deg);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* 9. UTILITY ANIMATION CLASSES */

/* Fade animations */
.fade-in {
    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in-down {
    animation: fadeInDown 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in-left {
    animation: fadeInLeft 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in-right {
    animation: fadeInRight 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Scale animations */
.scale-in {
    animation: scaleIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.zoom-in {
    animation: zoomIn 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Rotation animations */
.rotate-in {
    animation: rotateIn 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Bounce animation */
.bounce-in {
    animation: bounceIn 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Flip animation */
.flip-in-x {
    animation: flipInX 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Continuous animations */
.floating {
    animation: float 3s ease-in-out infinite;
}

.pulsing {
    animation: pulse 2s ease-in-out infinite;
}

.glowing {
    animation: glow 2s ease-in-out infinite;
}

/* Delayed animations */
.delay-1 {
    animation-delay: 0.1s;
}

.delay-2 {
    animation-delay: 0.2s;
}

.delay-3 {
    animation-delay: 0.3s;
}

.delay-4 {
    animation-delay: 0.4s;
}

.delay-5 {
    animation-delay: 0.5s;
}

/* 10. PERFORMANCE OPTIMIZATIONS */

/* GPU acceleration for better performance */
.animate-gpu {
    transform: translateZ(0);
    backface-visibility: visible;
    perspective: 1000;
    opacity: 1;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   END OF MODERN ANIMATION SYSTEM
   ============================================ */

header {
    padding-bottom: 0;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1000;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: none;
    transition: 800ms ease;
    border-bottom: 1px solid #40404024;
}

body.-minimal-header header {
    padding-block: 0;
    top: -48px
}

header>.-container>.menu-list {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

header.-waqf-header>.-container>.menu-list {
    max-width: inherit;
    padding-inline: 10px
}

header.-wide>.-container {
    max-width: inherit
}

body.-minimal-header header>.-container>.menu-list>.-logo {
    z-index: 1
}

header>.-container>.menu-list>.-mobile-user>.-user {
    width: fit-content;
    display: flex;
    justify-content: end
}

header>.-container>.menu-list>.-mobile-user>.-user>.-button-ui {
    font-size: 15px;
    color: #fff;
    padding-inline: 25px;
    border-radius: var(--miniradius)
}

body.-minimal-header header>.-container>.menu-list>.-user>.-button-ui {
    padding-block: 6px;
    padding-inline: 20px
}

body.-minimal-header header>.-container>.menu-list>.-user>.-button-ui.-ui-color1 {
    background: var(--gradient-uicolor);
    border-color: var(--uicolor-1)
}

header>.-container>.menu-list>.-mobile-user>.-user>.-button-ui.-ui-color1 {
    background: #2a1b1b;
    border-color: #2a1b1b
}

header>.-container>.menu-list>.site-mab>.-menu> {
    margin: 0;
    overflow: hidden;
    display: flex;
    align-items: center
}

body.-minimal-header header>.-container>.menu-list>.site-mab>.-menu {
    margin-block: 0;
    transition: 150ms all ease
}

header>.-container>.menu-list>.site-mab>.-menu ul {
    list-style: none;
    display: flex
}

header>.-container>.menu-list>.-menu.site-mab>ul>li:hover ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(8.5px)
}

header>.-container>.menu-list>.site-mab>.-menu>.menu-menu-1-container>ul>li>a {
    font-size: 16px;
    padding-inline: 16px;
    display: flex;
    font-weight: 500;
    gap: 6px;
    transition: var(--transition-time);
    color: #fff;
    line-height: 83px;
    position: relative;
    align-items: center;
    opacity: 0.9;
}

body header>.-container>.menu-list>.site-mab>.-menu ul>li>ul>li {
    padding: 14px 19px;
    font-size: 15px;
    color: #fff;
    border-bottom: 1px solid #ffffff24;
    cursor: pointer;
    transition: 100ms ease-in-out;
}

body header>.-container>.menu-list>.site-mab>.-menu ul>li>ul>li>a {
    color: #fff;
}

body header>.-container>.menu-list>.site-mab>.-menu ul>li>ul>li:hover {
    background: #16494a21;
}

body.-minimal-header header>.-container>.menu-list>.site-mab>.-menu ul>li>a:after {
    position: absolute;
    bottom: 0;
    right: 20px;
    left: 20px
}

header>.-container>.menu-list>.site-mab>.-menu ul>li:last-child>a {
    border-inline-end: 0
}

header>.-container>.menu-list>.site-mab>.-menu ul>li.current-menu-item>a {
    font-weight: 600;
    opacity: 1;
}

header>.-container>.menu-list>.site-mab>.-menu ul>li.current-menu-item>a {}

header>.-container>.menu-list>.site-mab>.-logo img {
    max-height: 100%
}

.P-content {
    text-align: start;
    color: var(--secondarytext);
    font-weight: 300;
    font-size: 19px;
    line-height: 1.6
}

.-features-gridboxes {
    --el-w: 469px;
    min-width: var(--el-w);
    max-width: var(--el-w)
}

.-features-gridboxes .-features-gridboxes-item {
    overflow: hidden;
    position: relative;
    background: var(--bgcolor);
    border: 1px solid var(--divider-light-3);
    border-radius: var(--circularradius);
    margin-bottom: 30px;
    height: 250px;
    box-shadow: var(--shadow-elevated);
    display: flex;
    flex-wrap: wrap;
    transition: 250ms all ease;
    cursor: default;
    padding: 8px
}

.-features-gridboxes>.-features-gridboxes-item:hover {
    border-color: var(--divider-hover);
    box-shadow: var(--shadow-elevated-hover);
    transition: 50ms all ease;
    transform: translate(0, -1px)
}

.-features-gridboxes .-features-gridboxes-item .-features-gridboxes-item-body {
    flex: 1;
    align-self: center;
    padding-inline: 35px;
    padding-block: 20px;
    min-width: 250px
}

.-features-gridboxes .-features-gridboxes-item .-features-gridboxes-item-body strong {
    display: block;
    font-size: 35px;
    color: #fff;
    font-weight: 700;
    margin-bottom: 5px
}

.-features-gridboxes .-features-gridboxes-item .-features-gridboxes-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 30px;
    padding-inline-end: 10px;
    padding-inline-start: 20px
}

.-features-gridboxes .-features-gridboxes-item .-features-gridboxes-item-icon img {
    width: 55px;
    height: auto
}

.-features-gridboxes .-features-gridboxes-item .-features-gridboxes-item-body .-features-gridboxes-item-body-content {
    font-weight: 400;
    line-height: 1.55;
    font-size: 17px;
    max-height: 50px;
    overflow: hidden;
    color: var(--light-accent-focus)
}

.-faqs-list {
    border-radius: var(--miniradius);
    box-shadow: var(--shadow-elevated);
    display: block;
    position: relative;
    z-index: 1;
    max-width: 800px;
    text-align: start;
}

.-faqs-list+.-faqs-list:before {
    left: -120px;
    right: auto;
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: -70px
}

.-faqs-list>.-faqs-list-item {
    break-inside: avoid;
    margin-bottom: 20px;
    background: var(--back-image);
    border-radius: 13px;
    overflow: hidden;
    border: var(--border);
}

.-faqs-list>.-faqs-list-item:last-child {
    border-bottom: 0
}

.-faqs-list>.-faqs-list-item:nth-child(odd) {
    margin-inline-start: 0;
    margin-inline-end: 0;
}

.-faqs-list>.-faqs-list-item>.-faqs-list-item-answer {
    display: none
}

.-faqs-list>.-faqs-list-item>.-faqs-list-item-title {
    display: flex;
    align-items: center;
    padding-inline: 25px;
    padding-block: 25px;
    cursor: pointer;
    box-shadow: inset 0 1px 40px -50px #d352530f;
    background: var(--back-image);
}

.-faqs-list>.-faqs-list-item.-opened>.-faqs-list-item-title {
    transition: 250ms all ease
}

.-faqs-list>.-faqs-list-item.-opened>.-faqs-list-item-title>strong {
    color: var(--textcolor)
}

.-faqs-list>.-faqs-list-item.-opened>.-faqs-list-item-title>em {
    color: var(--uicolor-1)
}

.-faqs-list>.-faqs-list-item.-opened>.-faqs-list-item-title>i {
    rotate: 0deg;
    transition: 150ms all ease;
    color: var(--textcolor)
}

.-faqs-list>.-faqs-list-item.-opened>.-faqs-list-item-title:after {
    display: none
}

.-faqs-list>.-faqs-list-item>.-faqs-list-item-title>em {
    font-style: normal;
    font-size: 18px;
    margin-inline-end: 15px;
    color: #fff;
    font-weight: 400
}

.-faqs-list>.-faqs-list-item>.-faqs-list-item-title>strong {
    flex: 1;
    padding-inline-end: 15px;
    font-weight: 400;
    font-size: 18px;
    color: #fff;
}

.-faqs-list>.-faqs-list-item>.-faqs-list-item-title>i {
    width: 10px;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    rotate: 90deg;
    color: var(--secondarytext-2)
}

.-faqs-list-item-answer-inner {
    padding: 0 40px 24px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--second-text-color);
    font-weight: 300
}

.-faqs-list-item-answer-inner>*:first-child {
    margin-top: 0
}

.-faqs-list-item-answer-inner>*:last-child {
    margin-bottom: 0
}

.-faqs-list-row {
    /* display:flex; */
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    align-items: start;
}

.-waqf-footer-body {
    display: flex;
    margin: -15px !IMPORTANT;
}

.-waqf-footer-body>* {
    margin: 17px
}

.-waqf-footer-body>.-waqf-footer-body-menu {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    gap: 1px;
    margin-top: 10px;
}

.-waqf-footer-body>.-waqf-footer-body-menu>div>ul {
    display: flex;
    list-style: none;
    flex-wrap: wrap;
    align-items: flex-start;
}

.-waqf-footer-body>.-waqf-footer-body-menu>div>ul>li {
    flex: 1;
    margin: 15px
}

.-waqf-footer-body>.-waqf-footer-body-menu>div>ul>li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.-waqf-footer-body>.-waqf-footer-body-menu>div>ul>li>a {
    display: block;
    font-size: 25px;
    font-weight: 600;
    color: #fff;
}

.-waqf-footer-body>.-waqf-footer-body-menu>div>ul>li>ul {
    list-style: none
}

.-waqf-footer-body>.-waqf-footer-body-menu>div>ul>li>ul>li>a {
    font-size: 41px
}

.-waqf-footer-body>.-waqf-footer-body-menu>div>ul>li>ul>li>a {
    display: block;
    font-size: 16px;
    padding-block: 3px;
    font-weight: 400;
    color: var(--secondarytext);
    line-height: 1.65;
    transition: var(--transition-time)
}

.-waqf-footer-body>.-waqf-footer-body-about {
    max-width: 451px;
    flex: 1
}

.-waqf-footer-body>.-waqf-footer-body-about>.-waqf-footer-body-company {
    margin-bottom: 15px
}

.-waqf-footer-body>.-waqf-footer-body-about>.-waqf-footer-body-social {
    display: flex;
    margin: -5px;
    justify-content: flex-start;
}

.-waqf-footer-body>.-waqf-footer-body-about>.-waqf-footer-body-social>a {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    border: 1px solid #222222;
    border-radius: 50%;
    margin: 5px;
    transition: var(--transition-time);
    color: var(--uicolor-1);
    background: linear-gradient(0deg, rgba(0, 85, 254, 0.08), rgba(0, 85, 255, 0.08), rgba(153, 153, 153, 0.1), rgba(153, 153, 153, 0.1));
}

.-waqf-footer-body>.-waqf-footer-body-about>.-waqf-footer-body-social>a:hover {
    background: linear-gradient(0deg, rgb(19 189 175 / 43%), rgb(16 49 117 / 8%), rgb(153 153 153 / 15%), rgb(153 153 153 / 13%));
}

.-waqf-footer-body>.-waqf-footer-body-about>.-waqf-footer-body-company>.-waqf-footer-body-company-logo {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: fit-content;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

.-waqf-footer-body>.-waqf-footer-body-about>.-waqf-footer-body-company>.-waqf-footer-body-company-text {
    font-size: 17px;
    font-weight: 500;
    line-height: 1.6
}

.-waqf-footer-body>.-waqf-footer-body-about>.-waqf-footer-body-company>.-waqf-footer-body-company-logo>a {
    display: block;
}

.-waqf-footer-body>.-waqf-footer-body-about>.-waqf-footer-body-company>.-waqf-footer-body-company-logo>a>img {
    height: 100%
}

footer.-waqf-footer {
    padding-block: 30px 25px;
    background-repeat: repeat-x;
    position: relative;
    border-top: var(--border);
}

.-waqf-footer-body-text {
    text-align: center;
    padding: 35px 0 0 0;
    font-size: 14px;
    color: #d5d5d5;
    font-weight: 300;
    opacity: .8
}

.-pages-root {
    position: relative;
}

.-home-hero-section-outer {
    padding-block: 50px 0;
    position: relative;
    z-index: 1;
    overflow: hidden
}

form.-formkit>h1 {
    font-weight: 700;
    font-size: 30px;
    margin-bottom: 30px
}

form.-formkit>[labelkit] {
    display: flex;
    margin-bottom: 30px;
    flex-direction: column
}

form.-formkit>[labelkit]>p {
    font-size: 14px;
    padding-top: 10px;
    margin: 0;
    font-weight: 300;
    color: var(--secondarytext)
}

form.-formkit>[labelkit]>span {
    display: block;
    font-size: 14px;
    color: var(--secondarytext);
    margin-bottom: 4px
}

form.-formkit>[labelkit]>[inputkit] {
    width: 100%;
    padding-block: 12px;
    padding-inline: 20px;
}

.-checkbox-labels-items {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin: -8px;
    padding-top: 4px
}

.-checkbox-labels-items>label {
    min-width: 110px;
    flex: 1;
    height: auto;
    min-height: 2.75rem;
    color: var(--textcolor-2);
    background-color: var(--alphabg);
    border: 1px solid var(--divider);
    border-radius: .5rem;
    text-align: center;
    padding: .5rem .875rem;
    font-size: 16px;
    line-height: 1.5;
    transition: all .3s;
    box-shadow: var(--shadow-elevated);
    margin: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap
}

.-checkbox-labels-items>input:checked+label {
    background: #d3525317;
    border-color: var(--uicolor-1);
    color: #bb2829
}

.-checkbox-labels-items>input {
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: none;
    opacity: 0
}

.-page-container-bg {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 200px;
    background-image: url(./img/footer-pattern.jpg);
    background-repeat: repeat-x;
    background-color: #faf8f3;
    z-index: -1
}

.-page-container-bg:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: -1;
    background: linear-gradient(to top, white, transparent)
}

.-page-container {
    position: relative;
    z-index: 1;
    padding-block: 70px
}

.-page-container-body>.-page-container-body-header {
    font-size: 31px;
    font-weight: 600;
    margin-bottom: 20px
}

.-page-container-body>.-page-container-body-content {
    font-size: 16px;
    line-height: 1.6;
    font-weight: 300
}

.-page-container-body>.-page-container-body-content strong {
    font-weight: 500
}

.-page-container-body>.-page-container-body-content h3 {
    font-size: 22px
}

.-page-container-body>.-page-container-body-content h2 {
    font-size: 25px
}

.-waqf-list-gridboxes {
    display: flex;
    flex-wrap: wrap;
    margin: -12px
}

.YC-BreadCrumb .BreadcrumbsFilters {
    display: flex;
    align-items: center;
    list-style: none
}

ol.BreadcrumbsFilters>li+li:before {
    content: "";
    font-weight: 700;
    position: relative;
    margin-inline-end: 10px;
    line-height: 0;
    color: var(--textcolor);
    border-radius: 50%;
    margin-inline-start: 10px;
    width: 5px;
    height: 5px;
    background: var(--textcolor)
}

.YC-BreadCrumb .BreadcrumbsFilters>li {
    position: relative
}

.page-title-content h1 {
    font-weight: 700;
    font-size: 35px;
    margin: 0;
    color: var(--textcolor)
}

.--archive--be-content {
    font-size: 19px;
    margin: 0;
    opacity: 1 !important;
    font-weight: 500;
    color: var(--secondarytext);
    line-height: 1.6;
    text-align: center;
    margin-bottom: 35px;
    max-width: 670px;
}

.page-title-content {
    padding: 55px 0;
    margin-bottom: 55px;
    border-bottom: var(--main-border)
}

ol.BreadcrumbsFilters {
    align-items: center;
    margin-bottom: 0;
    display: flex;
    border-radius: 10px;
    width: fit-content
}

ol.BreadcrumbsFilters>li {
    list-style: none;
    display: flex;
    align-items: center;
    color: var(--textcolor)
}

ol.BreadcrumbsFilters>li>a {
    font-size: 14px;
    display: flex;
    align-items: center
}

ol.BreadcrumbsFilters>li>a>span {
    font-weight: 400;
    color: var(--textcolor);
    font-size: 15px
}

ol.BreadcrumbsFilters>li>a>span>i {
    font-size: 19px
}

.-loademore {
    display: flex;
    justify-content: center;
    margin-top: 30px
}

.-loademore>a {
    border-radius: var(--largeradius)
}

.-page-container-body.creat-user {
    padding: 45px 40px
}

.-page-container.form .-container {
    max-width: 600px
}

.--forget-password {
    margin-bottom: 25px
}

.--forget-password a {
    color: red
}

.social-contact {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 40px;
    flex-direction: column;
}

.--all-contact-in {
    --we: 290px;
    min-width: var(--we);
    max-width: var(--we);
    break-inside: avoid;
    box-shadow: var(--shadow-elevated);
    text-align: center;
    background: var(--back-image);
    border: var(--border);
    border-radius: var(--largeradius);
    padding: 8px;
    border: var(--border);
}

.social-feature a {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    GAP: 26PX;
    position: relative;
}

.--feature-content {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    justify-content: center
}

.-social-feature-icon {
    padding: 10px;
    font-size: 36px;
    text-align: center
}

.social-feature i {
    font-size: 17px;
    margin-inline-end: 5px;
    border-radius: 50%;
    display: flex;
    color: #fff;
    justify-content: center;
    align-items: center
}

.--social-title {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 600;
    color: #fff;
}


.--social-content {
    font-size: 15px;
    font-weight: 400;
    color: var(--secondarytext);
    transition: var(--transition-time);
    text-align: start;
}

.contact-form form.-formkit {
    max-width: 920px;
}

form.-formkit {
    max-width: 470px
}

.contact-map {
    border-radius: var(--largeradius);
    overflow: hidden;
    flex: 1;
    height: 100%
}

.-waqf-rootpage {
    display: flex;
    padding-bottom: 75px
}

.-waqf-rootpage>.-waqf-rootpage-sidebar {
    border-inline-start: 1px solid var(--divider-light-2);
    height: calc(100vh - 70px);
    position: sticky;
    top: 70px;
    width: 250px;
    overflow: auto;
    display: none;
    background: var(--alphabg);
    z-index: 10000
}

@media (max-width:850px) {
    .-waqf-rootpage>.-waqf-rootpage-sidebar.-open {
        position: fixed;
        top: 70px;
        left: 0;
        bottom: 0;
        height: auto
    }
}

.-waqf-rootpage>.-waqf-rootpage-sidebar.-open {
    display: block
}

body.-minimal-header .-waqf-rootpage-sidebar {
    top: 60px;
    height: calc(100vh - 60px)
}

.-waqf-rootpage>.-waqf-rootpage-body {
    flex: 1;
    display: flex;
    flex-direction: column
}

body .-waqf-rootpage-sidebar>.-waqf-rootpage-sidebar-search {
    padding: 20px 20px 12px
}

body .-waqf-rootpage-sidebar>.-waqf-rootpage-sidebar-list {
    padding: 0 20px;
    padding-bottom: 20px
}

body .-waqf-rootpage-sidebar>.-waqf-rootpage-sidebar-list>a {
    display: flex;
    font-size: 15px;
    color: var(--secondarytext);
    align-items: center;
    padding-block: 10px;
    padding-inline: 12px;
    border-radius: var(--miniradius);
    margin-bottom: 5px
}

body .-waqf-rootpage-sidebar>.-waqf-rootpage-sidebar-list>a.-selected {
    background: var(--light-accent);
    color: var(--textcolor)
}

body .-waqf-rootpage-sidebar>.-waqf-rootpage-sidebar-list>a>em {
    width: 27px;
    margin-inline-end: 14px;
    color: var(--secondarytext-2);
    font-weight: 200;
    font-style: normal
}

body .-waqf-rootpage-sidebar>.-waqf-rootpage-sidebar-list>a>p {
    flex: 1;
    margin: 0
}

body .-waqf-rootpage-sidebar>.-waqf-rootpage-sidebar-search>input {
    background: var(--light-accent);
    padding-block: 12px;
    padding-inline: 20px;
    width: 100%;
    border-radius: var(--miniradius);
    font-size: 15px
}

.-waqf-rootpage-body-container {
    text-align: center
}

.-waqf-rootpage-body-container-verses-text {
    font-size: 34px;
    font-family: Kitab Regular;
    max-width: 740px;
    margin-inline: auto;
    font-weight: 200;
    text-align: center;
    padding-inline: 30px
}

.-waqf-rootpage-body-container-verses-heading {
    text-align: center;
    font-size: 60px;
    font-weight: 900;
    position: relative;
    font-family: 'Noto Naskh Arabic';
    margin-bottom: 70px;
    background-image: url(./img/footer-pattern.jpg);
    background-repeat: repeat-x;
    background-color: #faf8f3;
    display: flex;
    align-items: center;
    justify-content: center
}

.-waqf-rootpage-body-container-verses-heading>span {
    font-size: 48px;
    padding-inline: 30px;
    line-height: 1;
    padding-block: 62px 19px;
    flex: 1;
    background: linear-gradient(to top, white, transparent)
}

.-waqf-rootpage-body-container-verses-heading>em {
    position: absolute;
    bottom: 20px;
    left: 30px;
    background: #443232f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    font-family: var(--ffamily);
    font-size: 16px;
    font-weight: 500;
    padding-inline: 14px;
    border-radius: var(--miniradius);
    padding-block: 5px;
    color: #fff
}

.-waqf-rootpage-body-container-verses-text .-waqf-rootpage-body-container-verses-text-item {
    line-height: 1.7;
    padding-inline: 5px;
    transition: 150ms all ease;
    cursor: pointer;
    padding-block: 4px;
    color: #000
}

.-waqf-rootpage-body-container-verses-text .-waqf-rootpage-body-container-verses-text-item:hover>span {
    color: #950c0e;
    border-radius: var(--miniradius);
    transition: 50ms all ease
}

.-waqf-rootpage-body-container-verses-text .-waqf-rootpage-body-container-verses-text-item>span {
    margin: 0;
    display: inline
}

.-waqf-rootpage-body-container-verses-text .-waqf-rootpage-body-container-verses-text-item>em {
    display: inline-flex;
    position: relative;
    line-height: 1;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-inline: 22px 15px;
    color: #664949;
    cursor: default;
    font-weight: 100
}

.-waqf-rootpage-body-container-verses-text .-waqf-rootpage-body-container-verses-text-item>em.-smaller {
    font-size: 18px
}

.-waqf-rootpage-body-container-verses-text .-waqf-rootpage-body-container-verses-text-item>em.-smaller:after {
    transform: translate(-50%, -27%) scale(1.75)
}

.-waqf-rootpage-body-container-verses-text .-waqf-rootpage-body-container-verses-text-item>em::after {
    content: "\06DD";
    display: block;
    position: absolute;
    font-size: larger;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -44%) scale(1.8)
}

.-waqf-rootpage-body-container-verses-text .-waqf-rootpage-body-container-verses-text-item>em {
    font-style: normal;
    vertical-align: 0
}

.-waqf-rootpage-body-container-verses-page_no {
    text-align: center;
    padding-block: 50px 40px;
    font-size: 15px;
    color: var(--uicolor-1);
    display: inline-flex;
    flex-direction: column
}

.-waqf-rootpage-body-container-verses-page_no:after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: var(--uicolor-1);
    margin: 8px auto 0
}

.-verses-pagination {
    display: flex;
    justify-content: center;
    margin: -12px;
    padding-top: 70px
}

.-verses-pagination>* {
    margin: 12px
}

.-verses-pagination>.-verses-pagination-quick-nav {
    display: flex;
    column-gap: 9px
}

.-verses-pagination>.-verses-pagination-quick-pages {
    position: relative
}

.-verses-pagination>.-verses-pagination-quick-pages.-open>.-verses-pagination-quick-pages-dropdown {
    visibility: visible;
    opacity: 1
}

.-verses-pagination>.-verses-pagination-quick-pages.-open>.-verses-pagination-quick-pages-button {
    border-color: var(--divider-hover);
    color: var(--textcolor)
}

.-verses-pagination>.-verses-pagination-quick-pages>.-verses-pagination-quick-pages-button {
    border: 1px solid var(--divider);
    align-items: center;
    display: flex;
    height: 100%;
    padding-inline: 14px;
    padding-block: 10px;
    border-radius: var(--miniradius);
    box-shadow: var(--shadow-elevated);
    column-gap: 15px;
    font-size: 15px;
    color: var(--secondarytext)
}

.-verses-pagination>.-verses-pagination-quick-pages>.-verses-pagination-quick-pages-dropdown {
    position: absolute;
    bottom: 100%;
    right: 0;
    width: 300px;
    visibility: hidden;
    opacity: 0;
    border: 1px solid var(--divider-light-2);
    border-radius: var(--miniradius);
    display: flex;
    padding: 8px;
    flex-wrap: wrap;
    z-index: 100;
    background: var(--bgcolor);
    max-height: 300px;
    overflow: auto
}

.-verses-pagination>.-verses-pagination-quick-pages>.-verses-pagination-quick-pages-dropdown>a {
    flex: 1;
    white-space: nowrap;
    min-width: 120px;
    padding: 10px;
    font-size: 15px;
    color: var(--secondarytext);
    border-radius: var(--miniradius);
    margin: 2px
}

.-verses-pagination>.-verses-pagination-quick-pages>.-verses-pagination-quick-pages-dropdown>a.-selected {
    background: var(--light-accent);
    color: var(--textcolor)
}

.-waqf-rootpage-body-tabs {
    justify-content: center;
    background: var(--alphabg-trans-light3);
    box-shadow: 0 6px 30px var(--shadow-1);
    padding-inline: 18px;
    display: flex;
    position: fixed;
    bottom: 0;
    z-index: 100;
    border-top: 1px solid var(--divider-light-2);
    backdrop-filter: blur(8px);
    bottom: 0;
    right: 0;
    left: 0;
    height: 74px
}

.-waqf-rootpage-body-tabs>a {
    display: flex;
    align-items: center;
    flex-direction: column;
    font-size: 15px;
    padding-inline: 30px;
    padding-block: 15px;
    font-weight: 300;
    color: var(--secondarytext);
    justify-content: center;
    align-items: center;
    line-height: 1
}

.-waqf-rootpage-body-tabs>a.-selected {
    color: #fff;
    background: #583d3d;
    border-color: #583d3d
}

.-waqf-rootpage-body-tabs>a>i {
    font-size: 20px;
    font-weight: 300;
    margin-bottom: 9px
}

.plyr .plyr__video-embed iframe,
.plyr__tooltip {
    pointer-events: none
}

.plyr {
    position: fixed;
    bottom: 84px;
    right: 10px;
    left: 20px
}

.plyr,
.plyr *,
.plyr ::after,
.plyr ::before {
    box-sizing: border-box
}

.plyr audio,
.plyr video {
    width: 100%;
    height: auto;
    vertical-align: middle;
    border-radius: inherit
}

.plyr input[type=range] {
    display: block;
    height: 20px;
    width: 100%;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    border: none;
    background: 0 0
}

.plyr input[type=range]::-webkit-slider-runnable-track {
    height: 8px;
    background: 0 0;
    border: 0;
    border-radius: 34px;
    -webkit-user-select: none;
    user-select: none
}

.plyr input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    margin-top: -2px;
    position: relative;
    height: 8px;
    width: 8px;
    background: #fff;
    border: 2px solid #fff0;
    border-radius: 100%;
    transition: background .2s ease, border .2s ease, -webkit-transform .2s ease;
    transition: background .2s ease, border .2s ease, transform .2s ease;
    transition: background .2s ease, border .2s ease, transform .2s ease, -webkit-transform .2s ease;
    box-shadow: 0 1px 1px rgb(0 0 0 / .15), 0 0 0 1px rgb(0 0 0 / .15);
    box-sizing: border-box
}

.plyr input[type=range]::-moz-range-track {
    height: 8px;
    background: 0 0;
    border: 0;
    border-radius: 4px;
    -moz-user-select: none;
    user-select: none
}

.plyr input[type=range]::-moz-range-thumb {
    position: relative;
    height: 16px;
    width: 16px;
    background: #fff;
    border: 2px solid #fff0;
    border-radius: 100%;
    transition: background .2s ease, border .2s ease, -webkit-transform .2s ease;
    transition: background .2s ease, border .2s ease, transform .2s ease;
    transition: background .2s ease, border .2s ease, transform .2s ease, -webkit-transform .2s ease;
    box-shadow: 0 1px 1px rgb(0 0 0 / .15), 0 0 0 1px rgb(0 0 0 / .15);
    box-sizing: border-box
}

.plyr input[type=range]::-ms-track {
    height: 8px;
    background: 0 0;
    border: 0;
    color: #fff0
}

.plyr input[type=range]::-ms-fill-upper {
    height: 8px;
    background: 0 0;
    border: 0;
    border-radius: 4px;
    -ms-user-select: none;
    user-select: none
}

.plyr input[type=range]::-ms-fill-lower {
    height: 8px;
    border: 0;
    border-radius: 4px;
    -ms-user-select: none;
    user-select: none;
    background: #3498db
}

.plyr input[type=range]::-ms-thumb {
    position: relative;
    height: 16px;
    width: 16px;
    background: #fff;
    border: 2px solid #fff0;
    border-radius: 100%;
    transition: background .2s ease, border .2s ease, -webkit-transform .2s ease;
    transition: background .2s ease, border .2s ease, transform .2s ease;
    transition: background .2s ease, border .2s ease, transform .2s ease, -webkit-transform .2s ease;
    box-shadow: 0 1px 1px rgb(0 0 0 / .15), 0 0 0 1px rgb(0 0 0 / .15);
    box-sizing: border-box;
    margin-top: 0
}

.plyr input[type=range]::-ms-tooltip {
    display: none
}

.plyr input[type=range]:focus {
    outline: 0
}

.plyr input[type=range]::-moz-focus-outer {
    border: 0
}

.plyr input[type=range].tab-focus:focus {
    outline-offset: 3px
}

.plyr input[type=range]:active::-webkit-slider-thumb {
    background: #3498db;
    border-color: #fff;
    -webkit-transform: scale(1.25);
    transform: scale(1.25)
}

.plyr input[type=range]:active::-moz-range-thumb {
    background: #3498db;
    border-color: #fff;
    transform: scale(1.25)
}

.plyr input[type=range]:active::-ms-thumb {
    background: #3498db;
    border-color: #fff;
    transform: scale(1.25)
}

.plyr--video input[type=range].tab-focus:focus {
    outline: rgb(255 255 255 / .5) dotted 1px
}

.plyr--audio input[type=range].tab-focus:focus {
    outline: rgb(86 93 100 / .5) dotted 1px
}

.plyr__sr-only {
    clip: rect(1px, 1px, 1px, 1px);
    overflow: hidden;
    position: absolute !important;
    padding: 0 !important;
    border: 0 !important;
    height: 1px !important;
    width: 1px !important
}

.plyr__video-wrapper {
    position: relative;
    background: #000;
    border-radius: inherit;
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC)
}

.plyr__video-embed {
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: inherit
}

.plyr__video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.plyr__video-embed>div {
    position: relative;
    padding-bottom: 200%;
    -webkit-transform: translateY(-35.95%);
    transform: translateY(-35.95%)
}

.plyr video::-webkit-media-text-track-container {
    display: none
}

.plyr__captions {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px);
    transition: -webkit-transform .3s ease;
    transition: transform .3s ease;
    transition: transform .3s ease, -webkit-transform .3s ease;
    color: #fff;
    font-size: 16px;
    text-align: center;
    font-weight: 400
}

.plyr__captions span {
    border-radius: 2px;
    padding: 3px 10px;
    background: rgb(0 0 0 / .7)
}

.plyr__captions span:empty {
    display: none
}

@media(min-width:768px) {
    .plyr__captions {
        font-size: 24px
    }
}

.plyr--captions-active .plyr__captions {
    display: block
}

.plyr--fullscreen-active .plyr__captions {
    font-size: 32px
}

.plyr--hide-controls .plyr__captions {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px)
}

.plyr__controls {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    line-height: 1;
    text-align: center;
    transition: opacity .3s ease;
    position: sticky;
    bottom: 0;
    height: 65px;
    background: #57403f;
    padding-inline-start: 50px;
    border-radius: var(--largeradius)
}

.plyr__controls .plyr__progress:first-child,
.plyr__controls .plyr__time:first-child,
.plyr__controls>button:first-child {
    margin-left: 0
}

.plyr__controls .plyr__volume {
    margin-left: 5px
}

.plyr__controls [data-plyr=pause] {
    margin-left: 0
}

.plyr__controls button {
    position: absolute;
    display: inline-block;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    overflow: visible;
    vertical-align: middle;
    padding: 7px;
    border: 0;
    background: 0 0;
    border-radius: 3px;
    cursor: pointer;
    transition: background .3s ease, color .3s ease, opacity .3s ease;
    color: inherit
}

.plyr__controls button[data-plyr="mute"],
.plyr__controls .plyr__volume {
    display: none !important
}

.plyr__controls button[data-plyr="play"],
.plyr__controls button[data-plyr="pause"] {
    top: 0;
    right: 0;
    bottom: 12px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white !important
}

.plyr__controls button svg {
    width: 18px;
    height: 18px;
    display: block;
    fill: currentColor
}

.plyr__controls button:focus {
    outline: 0
}

.plyr__controls .icon--captions-on,
.plyr__controls .icon--exit-fullscreen,
.plyr__controls .icon--muted {
    display: none
}

@media(min-width:480px) {

    .plyr__controls .plyr__progress,
    .plyr__controls .plyr__time,
    .plyr__controls>button {}
}

.plyr--hide-controls .plyr__controls {
    opacity: 0
}

.plyr--video .plyr__controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 50px 10px 10px;
    background: linear-gradient(#fff0, rgb(0 0 0 / .5));
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    color: #fff
}

.plyr--video .plyr__controls button.tab-focus:focus,
.plyr--video .plyr__controls button:hover {
    background: #3498db;
    color: #fff
}

.plyr__play-large {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding: 10px;
    border: 4px solid currentColor;
    border-radius: 100%;
    box-shadow: 0 1px 1px rgb(0 0 0 / .15);
    transition: all .3s ease
}

.plyr__play-large svg {
    position: relative;
    left: 2px;
    width: 20px;
    height: 20px;
    display: block;
    fill: currentColor
}

.plyr__play-large:focus {
    outline: rgb(255 255 255 / .5) dotted 1px
}

.plyr .plyr__play-large {
    display: inline-block
}

.plyr--audio .plyr__play-large,
.plyr--playing .plyr__controls [data-plyr=play],
.plyr__controls [data-plyr=pause] {
    display: none !important
}

.plyr--playing .plyr__play-large {
    opacity: 0;
    visibility: hidden
}

.plyr--playing .plyr__controls [data-plyr=pause] {
    display: flex !important
}

.plyr--captions-active .plyr__controls .icon--captions-on,
.plyr--fullscreen-active .icon--exit-fullscreen,
.plyr--muted .plyr__controls .icon--muted {
    display: block
}

.plyr [data-plyr=captions],
.plyr [data-plyr=fullscreen],
.plyr--captions-active .plyr__controls .icon--captions-on+svg,
.plyr--fullscreen-active .icon--exit-fullscreen+svg,
.plyr--muted .plyr__controls .icon--muted+svg {
    display: none
}

.plyr--captions-enabled [data-plyr=captions],
.plyr--fullscreen-enabled [data-plyr=fullscreen] {
    display: inline-block
}

.plyr__tooltip {
    position: absolute;
    z-index: 2;
    bottom: 100%;
    white-space: nowrap;
    margin-bottom: 10px;
    padding: 5px 7.5px;
    opacity: 0;
    background: rgb(0 0 0 / .7);
    border-radius: 3px;
    color: #fff;
    font-size: 14px;
    line-height: 1.3;
    -webkit-transform: translate(-50%, 10px) scale(.8);
    transform: translate(-50%, 10px) scale(.8);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    transition: opacity .2s .1s ease, -webkit-transform .2s .1s ease;
    transition: transform .2s .1s ease, opacity .2s .1s ease;
    transition: transform .2s .1s ease, opacity .2s .1s ease, -webkit-transform .2s .1s ease
}

.plyr__tooltip::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: -4px;
    border-right: 4px solid #fff0;
    border-top: 4px solid rgb(0 0 0 / .7);
    border-left: 4px solid #fff0;
    z-index: 2
}

.plyr button.tab-focus:focus .plyr__tooltip,
.plyr button:hover .plyr__tooltip,
.plyr__tooltip--visible {
    opacity: 1;
    -webkit-transform: translate(-50%, 0) scale(1);
    transform: translate(-50%, 0) scale(1)
}

.plyr button:hover .plyr__tooltip {
    z-index: 3
}

.plyr__progress {
    position: relative;
    display: none;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.GotoTop {
    display: flex;
    position: fixed;
    z-index: 99;
    border: var(--border);
    background: linear-gradient(0deg, rgba(0, 85, 254, 0.08), rgba(0, 85, 255, 0.08), rgba(153, 153, 153, 0.1), rgba(153, 153, 153, 0.1));
    --elwh: 60px;
    width: var(--elwh);
    height: var(--elwh);
    bottom: 25px;
    left: 40px;
    color: #fff;
    border-radius: 22px;
    justify-content: center;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    transition: 180ms;
    transform: translateY(150px);
    align-items: center
}

.GotoTop.visible {
    transform: translateY(0);
    visibility: visible;
    opacity: 1
}

.GotoTop:hover {
    color: #fff;
    background: var(--btn-back-color);
    box-shadow: rgb(0 155 255 / 26%) 0px 8px 40px 0px, rgba(255, 255, 255, 0) 0px 0px 10px 1px inset, rgba(0, 85, 255, 0.12) 0px 0px 0px 1px;
}

.GotoTop>i {
    font-weight: inherit
}

.GotoTop:hover:before {
    animation: 13s linear infinite spin
}

.plyr__progress input[type=range] {
    position: relative;
    z-index: 2
}

.plyr__progress input[type=range]::-webkit-slider-runnable-track {
    background: 0 0
}

.plyr__progress input[type=range]::-moz-range-track {
    background: 0 0
}

.plyr__progress input[type=range]::-ms-fill-upper {
    background: 0 0
}

.plyr__progress .plyr__tooltip {
    left: 0
}

.plyr .plyr__progress {
    display: inline-block;
    position: absolute;
    bottom: -1px;
    right: 12px;
    left: 12px
}

.plyr__progress--buffer,
.plyr__progress--played,
.plyr__volume--display {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 3px;
    margin: -3px 0 0;
    padding: 0;
    vertical-align: top;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    border-radius: 100px
}

.plyr__progress--buffer::-webkit-progress-bar,
.plyr__progress--played::-webkit-progress-bar,
.plyr__volume--display::-webkit-progress-bar {
    background: 0 0;
    border-radius: 50px
}

.plyr__progress--buffer::-webkit-progress-value,
.plyr__progress--played::-webkit-progress-value,
.plyr__volume--display::-webkit-progress-value {
    background: #ffffff94;
    border-radius: 100px;
    min-width: 8px
}

.plyr__progress--buffer::-moz-progress-bar,
.plyr__progress--played::-moz-progress-bar,
.plyr__volume--display::-moz-progress-bar {
    background: currentColor;
    border-radius: 100px;
    min-width: 8px
}

.plyr__progress--buffer::-ms-fill,
.plyr__progress--played::-ms-fill,
.plyr__volume--display::-ms-fill {
    border-radius: 100px
}

.plyr__progress--played,
.plyr__volume--display {
    z-index: 1;
    color: #fff;
    background: 0 0;
    transition: none
}

.plyr__progress--played::-webkit-progress-value,
.plyr__volume--display::-webkit-progress-value {
    min-width: 8px;
    max-width: 99%;
    border-radius: 50px;
    transition: none
}

.plyr__progress--played::-moz-progress-bar,
.plyr__volume--display::-moz-progress-bar {
    min-width: 8px;
    max-width: 99%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    transition: none
}

.plyr__progress--played::-ms-fill,
.plyr__volume--display::-ms-fill {
    display: none
}

.plyr__progress--buffer::-webkit-progress-value {
    transition: width .2s ease
}

.plyr__progress--buffer::-moz-progress-bar {
    transition: width .2s ease
}

.plyr__progress--buffer::-ms-fill {
    transition: width .2s ease
}

.plyr--video .plyr__progress--buffer,
.plyr--video .plyr__volume--display {
    background: rgb(255 255 255 / .25)
}

.plyr--video .plyr__progress--buffer {
    color: rgb(255 255 255 / .25)
}

.plyr--audio .plyr__progress--buffer,
.plyr--audio .plyr__volume--display {
    background: #ffffff36
}

.plyr--audio .plyr__progress--buffer {
    color: rgb(198 214 219 / .66)
}

.plyr--loading .plyr__progress--buffer {
    -webkit-animation: plyr-progress 1s linear infinite;
    animation: plyr-progress 1s linear infinite;
    background-size: 25px 25px;
    background-repeat: repeat-x;
    background-image: linear-gradient(-45deg, rgb(0 0 0 / .15) 25%, transparent 25%, transparent 50%, rgb(0 0 0 / .15) 50%, rgb(0 0 0 / .15) 75%, transparent 75%, transparent);
    color: #fff0
}

.plyr--video.plyr--loading .plyr__progress--buffer {
    background-color: rgb(255 255 255 / .25)
}

.plyr--audio.plyr--loading .plyr__progress--buffer {
    background-color: rgb(198 214 219 / .66)
}

.plyr__time {
    display: inline-block;
    vertical-align: middle;
    font-size: 12px;
    line-height: .95;
    position: absolute;
    top: 16px;
    left: 10px;
    color: #fff;
    opacity: .5;
    margin-inline-end: 2px
}

.plyr__time+.plyr__time {
    display: none
}

@media(min-width:768px) {
    .plyr__time+.plyr__time {
        display: inline-block
    }
}

.plyr__time+.plyr__time::before {
    content: '\2044';
    margin-right: 10px
}

.plyr__volume {
    display: none
}

.plyr .plyr__volume {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative
}

.plyr .plyr__volume input[type=range] {
    position: relative;
    z-index: 2
}

@media(min-width:480px) {
    .plyr .plyr__volume {
        display: block;
        max-width: 60px
    }
}

@media(min-width:768px) {
    .plyr .plyr__volume {
        max-width: 100px
    }
}

.plyr--is-ios .plyr__volume,
.plyr--is-ios [data-plyr=mute] {
    display: none !important
}

.plyr--fullscreen,
.plyr--fullscreen-active {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    z-index: 10000000;
    background: #000;
    border-radius: 0
}

.plyr--fullscreen video,
.plyr--fullscreen-active video {
    height: 100%
}

.plyr--fullscreen .plyr__video-wrapper,
.plyr--fullscreen-active .plyr__video-wrapper {
    height: 100%;
    width: 100%
}

.plyr--fullscreen .plyr__controls,
.plyr--fullscreen-active .plyr__controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0
}

.plyr--fullscreen-active.plyr--vimeo .plyr__video-wrapper,
.plyr--fullscreen.plyr--vimeo .plyr__video-wrapper {
    height: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

header.-waqf-header {
    background: var(--uicolor-1);
    height: 70px !important
}

header.-waqf-header+.-pages-root {
    padding-top: 70px
}

header.-waqf-header>.-container>.menu-list .-waqf-headerbar {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    color: #fff;
    text-align: center;
    padding-inline: 22px
}

header.-waqf-header>.-container>.menu-list .-waqf-headerbar>strong {
    font-size: 16px;
    font-weight: 500
}

header.-waqf-header>.-container>.menu-list .-waqf-headerbar>strong>a {
    color: #fff
}

header.-waqf-header>.-container>.menu-list .-waqf-headerbar>span {
    font-size: 17px;
    font-weight: 300;
    line-height: 1.2;
    margin-top: 2px
}

header.-waqf-header>.-container>.menu-list>.-waqf-headerbar-menu {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    cursor: pointer
}

.-waqf-rootpage-body-container-verses-introduction {
    margin-top: -30px
}

.-waqf-rootpage-body-container-verses-introduction>svg {
    width: 260px;
    height: auto;
    margin-bottom: 50px
}

.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 40px 45px;
    border-radius: 24px;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    background: #fff;
    display: flex;
    visibility: hidden;
    opacity: 0;
    z-index: 9999999999;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 90%;
    max-width: 600px
}

.fade-in-out {
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    top: 0;
    right: 0;
    background: #000000e6;
    left: 0;
    z-index: 20005;
    transition: opacity 0.2s ease, visibility 0.2s ease
}

.-waqf-created-box-share-copyinput.js>input {
    border: 1px solid var(--divider);
    border-radius: .5rem
}

.share-waqf {
    margin-bottom: 17px;
    font-size: 21px;
    font-weight: 500;
    color: var(--textcolor)
}

.close {
    font-size: 21px;
    background-color: #ff00000d;
    --we: 38px;
    width: var(--we);
    height: var(--we);
    color: #f83737;
    border-radius: 50%;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    justify-content: center;
    cursor: pointer
}

.popup:after {
    content: '';
    width: 85%;
    border-radius: 0 0 10px 10px;
    background-color: #d35253;
    height: 7px;
    position: absolute;
    top: 0
}

.-name-exiest {
    width: 100%
}

.fade-in-out.visible {
    opacity: 1;
    visibility: visible
}

.popup.visible {
    opacity: 1;
    visibility: visible
}

header>.-container>.menu-list>.site-mab>.-menu ul ul.sub-menu {
    position: absolute;
    background-color: #000e0e;
    font-size: 16px;
    box-shadow: 1px 16px 22px #2616161a;
    padding: 0px;
    overflow: hidden;
    border: 1px solid rgb(3 141 145 / 43%);
    list-style: none;
    width: 415px;
    z-index: 999;
    margin-left: 0;
    border-radius: 20px;
    top: calc(100% + -9px);
    opacity: 0;
    transition: 130ms;
    visibility: hidden;
    transform: translate(0, 10px);
    transform-origin: top center;
    display: flex;
    flex-direction: column
}

header>.-container>.menu-list>.site-mab>.-menu ul li:hover ul.sub-menu {
    opacity: 1;
    visibility: visible;
}

header>.-container>.menu-list>.site-mab>.-menu>ul>li>ul.sub-menu {}

header>.-container>.menu-list>.site-mab>.-menu>ul>li:hover ul.sub-menu {
    opacity: 1;
}

header>.-container>.menu-list>.site-mab>.-menu>.menu-menu-1-container>ul>li>a:hover ul.submenu {}

header>.-container>.menu-list>.-menu>.menu-menu-1-container>ul ul.sub-menu>li {
    margin: 10px 0;
    opacity: .8;
    transition: var(--transition-time)
}

header>.-container>.menu-list>.-menu ul ul.sub-menu>li:hover {
    opacity: 1
}

.-mobile-kit span {
    width: 100%;
    height: 1px;
    border-radius: .125rem;
    background-color: var(--textcolor);
    transition: transform .4s, background-color .4s, opacity .4s
}

.-mobile-kit {
    display: none
}

.menu-item-has-children {
    display: flex;
    align-items: center
}

.-waqf-created-box-share-body {
    width: 100%
}

.-waqf-footer-body .menu-item-has-children:after {
    display: none
}

header>.-container>.menu-list>.-menu ul>li.current-menu-item:after {
    color: var(--uicolor-1)
}

.-waqf-rootpage-body-listen-section {
    padding: 30px;
    background: linear-gradient(to bottom, #b95a5508, transparent)
}

.-waqf-rootpage-body-listen-section>.-waqf-rootpage-body-listen-section-tab-item {
    margin-bottom: 13px
}

.-waqf-rootpage-body-listen-section>.-waqf-rootpage-body-listen-section-tab-item+.-waqf-rootpage-body-listen-section-tab-item {
    --uicolor-1: #6c4b4a
}

.-waqf-rootpage-body-listen-section>.-waqf-rootpage-body-listen-section-tab-item>.-waqf-rootpage-body-listen-section-tab-item-tab {
    display: flex;
    align-items: center;
    background: var(--alphabg);
    border-radius: var(--miniradius);
    overflow: hidden;
    box-shadow: var(--shadow-elevated-hover);
    cursor: pointer
}

.-waqf-rootpage-body-listen-section>.-waqf-rootpage-body-listen-section-tab-item>.-waqf-rootpage-body-listen-section-tab-item-tab>.-waqf-rootpage-body-listen-section-tab-item-tab-arrow {
    width: 48px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--uicolor-1);
    margin-inline-end: 20px;
    color: #fff;
    font-size: 18px
}

.-waqf-rootpage-body-listen-section>.-waqf-rootpage-body-listen-section-tab-item>.-waqf-rootpage-body-listen-section-tab-item-tab>.-waqf-rootpage-body-listen-section-tab-item-tab-name {
    flex: 1;
    font-size: 16px
}

.-waqf-rootpage-body-listen-section>.-waqf-rootpage-body-listen-section-tab-item>.-waqf-rootpage-body-listen-section-tab-item-body ul.-reciters {
    list-style: none;
    margin: -8px;
    padding-block: 10px
}

.-waqf-rootpage-body-listen-section>.-waqf-rootpage-body-listen-section-tab-item>.-waqf-rootpage-body-listen-section-tab-item-body ul.-reciters>li {
    display: flex;
    align-items: center;
    background: var(--alphabg);
    margin: 8px;
    border-radius: var(--miniradius);
    padding: 0;
    cursor: pointer
}

.-waqf-rootpage-body-listen-section>.-waqf-rootpage-body-listen-section-tab-item>.-waqf-rootpage-body-listen-section-tab-item-body ul.-reciters>li.-selected {
    color: #9b0607
}

.-waqf-rootpage-body-listen-section>.-waqf-rootpage-body-listen-section-tab-item>.-waqf-rootpage-body-listen-section-tab-item-body ul.-reciters>li>.-quran-reciter-thumb {
    width: 48px;
    height: 58px;
    background-image: var(--background-image);
    background-size: cover;
    background-position: center;
    border-radius: 0 var(--miniradius) var(--miniradius) 0;
    margin-inline-end: 15px;
    background-color: #dfd2d1
}

.-waqf-rootpage-body-listen-section>.-waqf-rootpage-body-listen-section-tab-item>.-waqf-rootpage-body-listen-section-tab-item-body ul.-reciters>li>.-quran-reciter-name {
    flex: 1;
    font-size: 16px;
    font-weight: 300
}

.-waqf-rootpage-body-listen-section>.-waqf-rootpage-body-listen-section-tab-item>.-waqf-rootpage-body-listen-section-tab-item-body ul.-chapters {
    list-style: none;
    margin: -10px;
    padding-block: 10px
}

.-waqf-rootpage-body-listen-section>.-waqf-rootpage-body-listen-section-tab-item>.-waqf-rootpage-body-listen-section-tab-item-body ul.-chapters>li {
    display: flex;
    align-items: center;
    background: var(--alphabg);
    margin: 10px;
    border-radius: var(--miniradius);
    padding: 5px 9px;
    cursor: pointer;
    transition: 80ms all ease
}

.-waqf-rootpage-body-listen-section>.-waqf-rootpage-body-listen-section-tab-item>.-waqf-rootpage-body-listen-section-tab-item-body ul.-chapters>li:hover {
    background: #ffeded;
    transition: 80ms all ease
}

.-waqf-rootpage-body-listen-section>.-waqf-rootpage-body-listen-section-tab-item>.-waqf-rootpage-body-listen-section-tab-item-body ul.-chapters>li>.-quran-chapter-name {
    display: flex;
    flex-direction: column
}

.-waqf-rootpage-body-listen-section>.-waqf-rootpage-body-listen-section-tab-item>.-waqf-rootpage-body-listen-section-tab-item-body ul.-chapters>li>.-separation+.-quran-chapter-name {
    text-align: left
}

.-waqf-rootpage-body-listen-section>.-waqf-rootpage-body-listen-section-tab-item>.-waqf-rootpage-body-listen-section-tab-item-body ul.-chapters>li>.-quran-chapter-name>p {
    margin: 0;
    font-size: 16px;
    line-height: 1;
    margin-bottom: 6px
}

.-waqf-rootpage-body-listen-section>.-waqf-rootpage-body-listen-section-tab-item>.-waqf-rootpage-body-listen-section-tab-item-body ul.-chapters>li>.-quran-chapter-name>em {
    font-style: normal;
    font-size: 15px;
    font-weight: 300;
    text-transform: capitalize;
    line-height: 1
}

.-waqf-rootpage-body-listen-section>.-waqf-rootpage-body-listen-section-tab-item>.-waqf-rootpage-body-listen-section-tab-item-body ul.-chapters>li>.-separation {
    flex: 1
}

.-waqf-rootpage-body-listen-section>.-waqf-rootpage-body-listen-section-tab-item>.-waqf-rootpage-body-listen-section-tab-item-body ul.-chapters>li>.-quran-chapter-number {
    align-self: start;
    font-size: 16px;
    font-weight: 300;
    line-height: 1
}

.-waqf-rootpage-body-listen-section>.-waqf-rootpage-body-listen-section-tab-item>.-waqf-rootpage-body-listen-section-tab-item-body ul.-chapters>li>* {
    margin: 8px
}

.-waqf-rootpage-body-listen-section-tab-item-chapter_data {
    display: none
}

.notification.error {
    padding: 7px 25px;
    background: #de3131;
    border-radius: var(--miniradius);
    margin-bottom: 20px;
    color: #fff
}

.notification.success {
    padding: 10px 25px;
    background: #00c113;
    border-radius: var(--miniradius);
    margin-bottom: 20px;
    color: #fff
}

.-listening-verses {
    display: flex;
    flex-direction: column;
    font-size: 28px;
    font-family: Kitab Regular;
    padding-block: 30px;
    list-style: none
}

.-listening-verses>li {
    margin-inline-end: auto;
    margin-bottom: 12px;
    cursor: pointer
}

.-listening-verses>li.active {
    color: #991b17
}

.-audio-title-box {
    display: flex;
    flex-direction: column;
    color: #fff;
    align-items: start;
    align-self: start;
    padding-top: 8px
}

.-audio-title-box>strong {
    font-weight: 500;
    font-size: 15px
}

.-audio-title-box>span {
    font-size: 15px;
    font-weight: 300;
    padding-top: 4px
}

.-waqf-rootpage-tasbeeh {
    display: flex;
    background: #ffeded;
    margin: 0 auto;
    flex: 1;
    border-radius: 300px;
    margin-block: auto;
    padding: 50px 50px;
    align-items: center
}

.-waqf-rootpage-body-tasbeeh-container {
    display: flex;
    min-height: calc(100vh - 145px);
    padding: 30px
}

.-waqf-rootpage-tasbeeh>.-waqf-rootpage-tasbeeh-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-inline: 13px
}

.-waqf-rootpage-tasbeeh .-waqf-rootpage-tasbeeh-button {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #704c4a;
    border-radius: 50px;
    font-size: 28px;
    color: #fff
}

.-waqf-rootpage-tasbeeh>.-waqf-rootpage-tasbeeh-body>.-waqf-rootpage-tasbeeh-count {
    min-width: 150px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    font-size: 60px;
    border-radius: var(--largeradius);
    color: var(--uicolor-1);
    padding-inline: 20px
}

.-waqf-rootpage-tasbeeh>.-waqf-rootpage-tasbeeh-body>.-waqf-rootpage-tasbeeh-up {
    width: 150px;
    height: 150px;
    display: flex;
    border-radius: 150px;
    background: var(--uicolor-1);
    align-items: center;
    justify-content: center;
    font-size: 70px;
    color: #fff;
    margin-top: 30px
}

.-mobile-user {
    display: flex;
    align-items: center
}

.title.animation-on h1 {
    transition: 1s .4s;
    transform: translatey(0);
    visibility: visible;
    opacity: 1
}

.title.animation-on .-home-hero-section-body-content-body {
    transition: 1s .9s;
    transform: translatey(0);
    visibility: visible;
    opacity: 1
}

.title.animation-hidden .-home-hero-section-body-content-body {
    transform: translatey(100px);
    visibility: hidden;
    opacity: 0
}

.title.animation-on .-home-hero-section-body-content-buttons {
    transition: .7s .6s;
    transform: translatey(0);
    visibility: visible;
    opacity: 1
}

.title.animation-hidden .-home-hero-section-body-content-buttons {
    transform: translatey(100px);
    visibility: hidden;
    opacity: 0
}

.-intro-btn-kit {
    display: flex;
    align-items: center;
    background-color: #fff;
    padding: 9px 30px;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    border-radius: var(--miniradius)
}

a.-intro-btn-kitL:hover i {
    transform: translateX(17px)
}

.-intro-btn-kit:hover i {
    transform: translateX(5px)
}

.-intro-btn-kit i {
    transition: var(--transition-time)
}

.-button-ui.-ui-secondary:hover {
    opacity: 1
}

.-intro-btn-kit.pro {
    margin-top: 20px;
    max-width: fit-content
}

scrath {
    font-weight: 800;
    position: relative
}

scrath:before {
    content: '';
    position: absolute;
    width: 100%;
    right: 0;
    height: 13px;
    z-index: -1;
    bottom: 15px;
    background-color: #ff8e0a
}

.about-intro {
    display: flex;
    margin: 0 -25px
}

.-service.intro_image img#dynamic-featured-image {
    transition: opacity 0.3s ease-in-out;
    /* Smooth transition for opacity */
    opacity: 1;
}

.-service.intro_image img#dynamic-featured-image.fading {
    opacity: 0;
    /* Temporary state during image change */
}

.intro_image img {
    border-radius: var(--largeradius);
    overflow: hidden;
    border: var(--border);
    width: 100%;
    object-fit: cover;
}

.intro_content {
    flex: 1;
    align-self: start;
    transition: 200ms all ease;
    margin: 35px;
    position: sticky;
    top: 100px
}

img {
    max-width: 100%
}

.about-before-title {
    margin: 0;
    line-height: 1;
    color: var(--uicolor-1);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px
}

.intro_content h2 {
    font-size: 50px;
    font-weight: 600;
    margin: 0;
    line-height: 1.1;
    margin-bottom: 20px
}

.intro_content p {
    font-size: 22px;
    line-height: 1.4;
    margin-bottom: 10px;
    color: var(--secondarytext)
}

.single_features {
    font-size: 18px;
    font-weight: 600
}

.icon-feature span {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    margin-inline-end: 12px;
    color: var(--uicolor-1)
}

.icon-feature {
    display: flex;
    align-items: center;
    padding-block: 7px
}

.icon-feature span i {
    font-weight: 500
}

.back-white-kit {
    padding-block: 30px
}

.--about-features {
    margin-inline: 25px
}

.-features-gridboxes-item:hover strong {
    transform: translateY(-8px)
}

.-features-gridboxes-item strong {
    transition: var(--transition-time)
}

.--feature-btn {
    max-width: fit-content;
    padding-top: 21px
}

.-button-ui.-ui-color1:hover i {
    transform: translateX(4px)
}

.-button-ui.-ui-color1 i {
    transition: var(--transition-time)
}

.rating-cursol-in-here {
    overflow: hidden;
    padding-bottom: 10px;
    padding-inline: 10px
}

.testi-style1 {
    position: relative;
    transition: all ease .4s;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 7px 0 rgb(27 42 82 / 11%)
}

.testi-style1 .testi-content {
    color: var(--secondarytext);
    line-height: 1.7;
    font-size: 16px;
    font-weight: 400;
    max-height: 134px;
    overflow: hidden;
    max-width: 100%
}

.testi-style1 .testi-text {
    font-size: 20px;
    color: var(--white-color);
    line-height: 1.5;
    font-weight: 200
}

.testi-style1 .testi-client {
    border-radius: 20px
}

.en .--rating--widgets--stars-result .Active--Stars {
    left: 0
}

.en .--rating--widgets--stars-result {
    direction: ltr
}

.testi-style1 .testi-name {
    font-size: 18px;
    font-weight: 500;
    color: #060606;
    line-height: 1.5;
    margin-bottom: -1px
}

.testi-style1 .testi-degi {
    font-size: 13px
}

.testi-style1 .testi-degi span {
    font-size: 11px;
    color: var(--body-color)
}

.testi-style1 .testi-rating {
    color: #f6b800;
    float: right;
    font-size: 12px;
    min-width: max-content
}

.testi-style1 .testi-rating i {
    margin-left: 3px
}

.testimonial-carousel-rtl {
    display: flex
}

.reviews-carousel-rtl {
    z-index: 12;
    opacity: 0;
    flex-wrap: wrap;
    width: 100%;
    position: relative
}

.reviews-carousel-rtl .owl-dots {
    display: flex;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    height: 50px;
    margin: 0 auto;
    max-width: max-content;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
    background: #eee
}

.reviews-steup-rtl {
    overflow: hidden;
    z-index: 22;
    background-position: center;
    background-size: cover !important;
    padding: 20px;
    margin: -20px
}

i.fa-solid.fa-star {
    font-size: 22px;
    margin: 0 1px
}

.reviews-date {
    display: flex;
    margin: 15px 0;
    justify-content: center
}

.reviews-carousel-rtl.reviews-carousel-rtl .disabled {
    display: none
}

section.YC-reviews-section .vs-border-circle {
    width: var(--circle-size, 400px);
    height: var(--circle-size, 400px);
    max-width: 100%;
    max-height: 100%;
    border-radius: 50%;
    background-color: #fff0;
    border: var(--border-size, 45px) solid var(--theme-color2);
    z-index: 12;
    position: absolute;
    left: -215px;
    animation: jumpping 6s infinite linear
}

.--single--category--boxitem>a {
    font-size: 20px;
    line-height: 1.3;
    font-weight: 500;
    color: var(--Text-color);
    transition: .2s;
    display: block;
    padding: 25px 25px 15px
}

.-YC-Category-Grid-container>.-defult-widgets-title-style-1 .sup-title-widget-defualt {
    color: #e7eeff
}

.-YC-Category-Grid-container .-defult-widgets-title-style-1>.-widgets-h1-title {
    color: #fff;
    text-align: start
}

.-YC-Category-Grid-container .-defult-widgets-title-style-1 .P-content {
    color: #d8d8d8;
    text-align: start;
    margin: 20px 0
}

.-YC-Category-Grid-container .-defult-widgets-title-style-1 {
    margin: 0;
    min-width: 500px;
    margin-inline-end: 50px;
    align-items: flex-start;
    text-align: right;
    position: relative;
    align-content: flex-start;
    place-content: start;
    display: flex
}

.-YC-Category-Grid-container {
    display: flex;
    align-items: center;
    padding-inline-start: 60px;
    padding-inline-end: 0;
    overflow: hidden
}

.-YC-Category-row-v2 .-YC-owl-navs-items>.-YC-owl-Slides-next {
    left: -20px
}

.-YC-Category-row-v2 .-YC-owl-navs-items>.-YC-owl-Slides-prev {
    right: -20px
}

.-YC-Category-Grid-container .-defult-widgets-title--URLArea-v1>.--Parent-URL-BTN>a {
    background: var(--primary-text);
    color: #fff;
    border-color: #fff
}

.-YC-Category-Grid {
    display: block;
    position: relative
}

.-YC-Category .owl-nav,
.-YC-Category-Grid .owl-nav {
    display: none
}

.--category--background {
    padding: 80px 0
}

.-YourColor-SingleWidget-Section.-YC-WidgetType-category .-YC-Widgets-Inner-Row {
    padding: 0
}

.YC--service--element {
    margin: 0 -15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 30px
}

.--after-intro--box-- {
    position: relative;
    display: block;
    width: 50px;
    height: 3px;
    background: #eef0f6;
    margin: 10px auto 10px
}

.--after-intro--box--:before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 10px;
    height: 3px;
    content: "";
    margin: 0 auto;
    transition: all 200ms linear;
    transition-delay: 0.1s;
    background-color: var(--tp-common-black)
}

.active .--single--category--boxitem .YC--service-shabe-style .YC-serice-name {
    color: #fff
}

.active .--single--category--boxitem .YC--service-shabe-style .-p-category-desc p {
    color: #fff
}

.active .--single--category--boxitem .YC--service-shabe-style .--after-intro--box--:before {
    background-color: #075f336e
}

.active .YC--service-shabe-style:after {
    transform: scaleX(1) rotateX(0deg);
    opacity: 1;
    transition: all 200ms ease
}

span.YC--service-button {
    background: #eef0f6 !important;
    color: var(--primary-text) !important;
    margin-top: 25px;
    margin-inline-end: 0 !important
}

.-btn-header>a:hover {
    color: var(--tp-common-text) !important
}

.-btn-header>span:hover {
    color: var(--tp-common-text) !important
}

.-YC-WidgetType-benefits .-YC-Category {
    padding-top: 120px
}

.-YC-WidgetType-category .-YC-owl-navs-items>.-YC-owl-Slides-prev {
    right: 210px
}

.-YC-WidgetType-category .-YC-owl-navs-items>.-YC-owl-Slides-next {
    left: 183px
}

span.YC--service-button {
    background: #eef0f6 !important;
    color: var(--primary-text) !important;
    margin-top: 25px;
    margin-inline-end: 0 !important
}

.-btn--category i {
    font-size: 17px;
    line-height: 1.5;
    transition: var(--transition-timing)
}

.YC--service-shabe-style:hover .YC-serice-name {
    color: var(--second-color)
}

.YC--service-shabe-style:hover .service--item--icon i {
    color: var(--second-color)
}

.YC--service-shabe-style:hover .-category-button {
    color: var(--second-color)
}

.YC--service-shabe-style:hover .-btn--category i {
    color: var(--second-color);
    animation: 0.3s toLeftFromRight linear
}

.YC--service-shabe-style:hover .--YC-before-back {
    transition: transform 0.3s;
    animation: 0.3s shake linear
}

.--YC-before-back:after {
    content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    z-index: -1;
    background-color: var(--uitrans);
    right: 0;
    bottom: -2px
}

section.YC-reviews-section {
    position: relative
}

.reviews-carousel-rtl .owl-dots .owl-dot.active {
    background-color: var(--uicolor);
    width: 50px
}

.reviews-carousel-rtl .owl-dots .owl-dot:hover {
    background-color: var(--uicolor)
}

.--rating--widgets--stars-averageList .-Rate-Average-Items {
    padding-inline-start: 0;
    border: 0
}

.--rating--widgets--stars-result {
    color: var(--primary-text);
    position: relative;
    font-size: 28px;
    width: 100%;
    display: flex;
    gap: 10px;
    align-items: center
}

.Active--Stars {
    position: absolute;
    width: var(--bevalue);
    overflow: hidden;
    left: 0;
    top: 0
}

.SB--Stars i {
    color: #bbb;
    font-weight: 300;
    font-size: 19px
}

.Active--Stars i {
    color: #ffc83d
}

.-page--container-sidebars .testi-style1 .testi-name {
    color: var(--primary-text)
}

.testi-client>i {
    font-size: 343px;
    color: var(--uicolor);
    transform: rotate(180deg);
    opacity: .03;
    position: absolute;
    top: -129px
}

.review_left {
    position: relative;
    margin-bottom: 20px;
    max-width: fit-content;
    overflow: hidden;
    line-height: 1.5
}

.review_l {
    flex: 1
}

.review_image img {
    border-radius: 50%;
    --we: 60px;
    width: var(--we);
    height: var(--we)
}

.review_image {
    margin-inline-end: 9px;
    --we: 100ox;
    width: var(--we);
    height: var(--we)
}

.YC-reviews- {
    display: flex;
    flex-wrap: wrap;
    margin-top: 150px
}

.-customer-image {
    margin-top: -75px;
    max-width: 600px
}

.YC-reviews- .-YC-owl-navs-items {
    display: flex;
    margin-inline-end: -50px;
    position: absolute;
    z-index: 9;
    top: 265px;
    right: -82px;
    background: #fff;
    max-width: max-content;
    margin-inline-start: auto;
    padding: 20px;
    gap: 2rem
}

.YC-reviews-right {
    flex: 1;
    max-width: 810px;
    background: var(--background);
    position: relative;
    padding: 80px;
    padding-inline-start: 140px
}

.YC-reviews-right .-YC-owl-navs-items>.-YC-owl-Slides-next,
.YC-reviews-right .-YC-owl-navs-items>.-YC-owl-Slides-prev {
    border: none;
    background: none;
    font-size: 34px;
    color: var(--primary-text);
    position: relative;
    transform: none
}

.reviews-carousel-rtl .owl-dot {
    border: 0;
    margin: 0;
    border-radius: 0;
    background: none;
    position: relative;
    width: 15px;
    height: 15px;
    transition: none;
    display: flex;
    background: #8e8d8a;
    align-items: center;
    margin: 0 5px;
    transition: 180ms all ease;
    border-radius: var(--miniradius)
}

.testi-work {
    color: var(--secondarytext);
    font-size: 14px;
    font-weight: 400
}

.-YourColor-SingleWidget-Section.-YC-WidgetType-customerreviews .-defult-widgets-felx-style-1 {
    margin-bottom: 35px
}

.rating-cursol-in-here.owl-rtl {
    --el-w: 433px;
    min-width: var(--el-w);
    max-width: var(--el-w);
    opacity: 0
}

.rating-cursol-area-in {
    position: relative;
    overflow: hidden;
    padding: 88px 4px;
    margin: 0 65px;
    margin-bottom: -50px;
    padding-top: 10px
}

.--YC-rating-content-in {
    padding: 30px 30px 20px;
    position: relative;
    z-index: 1
}

.--YC-rating-content-in>i {
    position: absolute;
    right: 22px;
    font-size: 49px;
    top: 15px;
    border-radius: 50%;
    z-index: -1;
    color: #e4e4e4;
    display: flex;
    align-items: center;
    justify-content: center
}

.rating-cursol-area-in .owl-dots {
    display: none
}

.rating-cursol-area-in .owl-dot {
    --we: 9px;
    width: var(--we);
    height: var(--we);
    border-radius: 8px;
    cursor: pointer;
    margin: 0 8px;
    background: #bfbfbf;
    transition: all 150ms ease 0s
}

.rating-cursol-area-in .owl-dot.active {
    background: var(--uicolor);
    opacity: 1;
    --we: 8px;
    height: var(--we);
    width: var(--we);
    display: inline-block;
    outline: 1px solid var(--uicolor);
    outline-offset: 6px;
    margin: 0 12px
}

i.fa-solid.fa-star:first-child {
    margin-inline-start: 0
}

.reviwer-name {
    display: flex;
    padding: 20px 30px;
    border-top: 1px solid rgb(27 42 82 / .07);
    align-items: center;
    justify-content: space-between
}

.goolge-svg {
    --we: 30px;
    width: var(--we);
    height: var(--we);
    line-height: var(--we);
    text-align: start;
    position: absolute;
    right: 8%;
    top: 83%
}

.-defult-widgets-title-style-1.customerreviews {
    display: flex;
    flex-direction: column;
    align-items: center
}

.-defult-widgets-title-style-1.customerreviews .-YC--main--wep-title- {
    align-items: center
}

.google-customer-review {
    gap: 8px;
    display: flex;
    align-items: center;
    justify-content: center
}

.google-customer-review svg {
    --we: 56px;
    width: var(--we);
    height: var(--we)
}

.--short-btn-review {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding-top: 30px
}

.short-review-title {
    font-size: 17px;
    line-height: 1.5;
    color: var(--secondarytext)
}

.rating-content-in {
    position: relative
}

.rating-content-in .-YC-cate-navs-items {
    top: 25%
}

.en .reviwer-name {
    flex-direction: row-reverse
}

.en .--YC-rating-content-in>i {
    left: 183%
}

.en .--YC-rating-content-in {
    display: flex;
    flex-direction: column;
    align-items: flex-end
}

.en .testi-style1 .testi-content {
    text-align: end
}

.en .Active--Stars i {
    color: #ffc83d
}

.review_left {
    display: flex
}

.en .Active--Stars {
    left: 0;
    right: auto
}

.en .google-customer-review {
    flex-direction: row-reverse
}

.-YC-Price-Us-container .-YC-owl-navs-items>.-YC-owl-Slides-next {
    left: -30px
}

.-YC-owl-navs-items>.-YC-owl-Slides-next,
.-YC-owl-navs-items>.-YC-owl-Slides-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    border: 2px solid var(--secondarytext);
    --chev-w: 50px;
    width: var(--chev-w);
    height: var(--chev-w);
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 24px;
    color: var(--secondarytext);
    transition: 180ms;
    cursor: pointer
}

.-YC-Price-Us-container .-YC-owl-navs-items>.-YC-owl-Slides-next {
    left: -30px
}

.-YC-Price-Us-container .-YC-owl-navs-items>.-YC-owl-Slides-prev {
    right: -30px
}

.owl-stage {
    display: flex
}

.-YourColor-SingleWidget-Section.-YC-WidgetType-customerreviews .-defult-widgets-title-style-1 .-widgets-h1-title {
    text-align: center
}

.--shape-form-in {
    display: flex;
    width: 100%
}

form.-formkit strong {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 10px;
}

.owl-nav.disabled {
    display: none
}

.custom-nav {
    display: flex;
    margin-bottom: 15px;
    gap: 20px
}

.custom-prev {
    border-radius: var(--largeradius);
    background: var(--bgcolor);
    --we: 55px;
    font-size: 17px;
    width: var(--we);
    display: flex;
    transition: var(--transition-time);
    height: var(--we);
    text-align: center;
    align-items: center;
    justify-content: center
}

.custom-next {
    border-radius: var(--largeradius);
    background: var(--bgcolor);
    --we: 55px;
    font-size: 17px;
    width: var(--we);
    display: flex;
    cursor: pointer;
    height: var(--we);
    text-align: center;
    transition: var(--transition-time);
    align-items: center;
    justify-content: center
}

.custom-prev:hover {
    background-color: var(--uicolor-1);
    color: #fff
}

.custom-next:hover {
    background-color: var(--uicolor-1);
    color: #fff
}

.-home-section-item:last-child {
    /* background: none; */
    background: transparent;
}

footer.-waqf-footer .-container .-waqf-footer-body {
    margin: 0;
    position: relative;
}

.-waqf-footer-body-company {
    margin-bottom: 60px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 469px
}

.-waqf-footer-body-company-text {
    font-size: 19px;
    margin: 0;
    font-weight: 400;
    color: var(--secondarytext);
    line-height: 1.6
}

.-owl-PriceLists-Center-v1 {
    --el-w: 450px;
    position: relative;
    min-width: var(--el-w);
    max-width: var(--el-w)
}

.--paner-content {
    min-width: 100%;
    max-width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: var(--largeradius);
    border: 1px solid #121212;
    background: conic-gradient(from 0deg at 50% 0%, rgb(0, 0, 0) 90deg, rgb(64 182 186 / 42%) 181.299deg, rgb(0, 0, 0) 270deg);
}

.-first-paner-img {
    height: auto;
    width: 126px;
    transition: var(--transition-time);
    position: absolute;
    right: 0;
    top: -229px;
    transform: rotate(28deg)
}

.-second-paner-image {
    height: auto;
    transition: var(--transition-time);
    width: 120px;
    bottom: -54%;
    position: absolute;
    left: 158px;
    transform: rotate(345deg)
}

.paner-all-content-in {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 680px;
    font-weight: 600;
    position: relative;
    max-height: 304px;
    overflow: hidden
}

.-paner-description {
    font-size: 20px;
    font-weight: 400;
    color: var(--secondarytext)
}

.-paner-before-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    background-color: #e8d7fb;
    display: flex;
    gap: 10px;
    padding: 9px 28px;
    border-radius: 30px;
    align-items: center;
    justify-content: center
}

.-paner-title {
    font-size: 57px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 12px
}

.--paner-content:hover .-first-paner-img {
    top: -150px;
    right: 60px
}

.--paner-content:hover .-second-paner-image {
    bottom: -30%;
    left: 153px
}

.-div-paner-shape- {
    position: absolute;
    top: 14%;
    right: 74%;
    animation: moving 9s linear infinite;
    padding: 73px;
    background: #116d6287;
    border-radius: 50%;
    height: 100px
}

.-div-paner-shape-.\31 anmy {
    position: absolute;
    top: 59%;
    right: 17%;
    padding: 40px;
    background: #3f5d5987;
    border-radius: 50%;
    animation: movingleftright1 infinite 18s;
    height: 78px
}

.--main-video-for-ice-cola {
    height: 290px;
    background-position: center center;
    background-attachment: fixed;
    margin-bottom: -50px;
    position: relative;
    z-index: -4
}

.--Iframe-video {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.--Iframe-video video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    background-attachment: fixed
}

.--Iframe-video:before {
    content: '';
    background: rgb(0 0 0 / 47%);
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1
}

.-ice-cola-features {
    overflow: hidden
}

.--custonm-click {
    display: flex;
    justify-content: space-between;
    transform: translateY(160px);
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-time);
    position: relative
}

.-ice-cola-features:hover .--custonm-click {
    opacity: 1;
    visibility: visible
}

.--page--img-content {
    display: flex;
    margin-inline: -25px;
    margin-bottom: 100px
}

.--page-img-journy {
    width: 900px;
    border-radius: var(--largeradius);
    overflow: hidden;
    margin-inline: 25px
}

.-page-journy-content {
    position: sticky;
    height: fit-content;
    top: 77px;
    margin: 0 25px;
    max-width: 710px
}

.--journy-title {
    font-size: 50px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--uicolor-1);
    margin-bottom: 15px
}

.--journy-description {
    font-size: 20px;
    color: var(--secondarytext);
    font-weight: 500
}

.--page--img-content:nth-child(even) {
    flex-direction: row-reverse
}

.--ice-cola-page-intro {
    margin-bottom: 80px;
    overflow: hidden;
    position: relative
}

.YC-BreadCrumb {
    display: flex;
    justify-content: center;
    color: #fff
}

.--page-title-content- h1 {
    font-size: 70px;
    font-weight: 700;
    color: #fff
}

.--background-couses {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: -1;
    background-repeat: no-repeat;
    background-attachment: fixed
}

.-page-hero {
    width: 100%;
    height: 100%;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    padding-block: 100px
}

.--page-title-content- {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 9;
    max-width: 700px;
    position: relative
}

.--ice-cola-page-intro:before {
    content: '';
    background: #00000069;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 0
}

.-explore-it .-features-gridboxes {
    display: flex;
    width: 100%;
    gap: 30px
}

.-page-hero .-container {
    display: flex;
    justify-content: center
}

.contact-map iframe {
    width: 100%
}

.contact-form.map {
    display: flex;
    align-items: center;
    gap: 45px;
    justify-content: space-between;
    margin-inline-end: 20px;
    flex: 1;
    background: var(--back-image);
    padding: 8px;
    border: var(--border);
    border-radius: var(--largeradius);
}

.--ice-cola-back-ground-intro {
    height: 1000%;
    width: 273%;
    position: absolute;
    animation: moveUp 24s linear infinite;
    right: 0;
    top: -160%;
    transform: rotate(45deg);
    background-repeat: repeat;
    background-size: 1002px 569px;
    z-index: -1;
    background-position: center
}

.-home-hero-section-outer:before {
    content: '';
    background: #000000ab;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0
}

.-lang-btn {
    display: flex;
    height: 36px;
    align-items: center;
    font-weight: 500;
    font-size: 17px;
    background: var(--bgcolor);
    border-radius: var(--circularradius);
    padding-inline: 14px 17px;
    gap: 11px;
    color: var(--secondarytext);
    box-shadow: var(--shadow-elevated);
    cursor: pointer;
    border: 1px solid var(--divider)
}

.-user>a {
    color: #fff
}

.--ice-cola-img {
    position: absolute;
    transition: var(--transition-time);
    width: 128px;
    right: -55px;
    top: 141px
}

.-features-gridboxes-item:hover .--ice-cola-img {
    top: 9%;
    right: 0
}

.--product-enmy {
    display: flex;
    align-items: center;
    flex-wrap: wrap
}

.-proudct-enmy-item {
    flex: 1;
    min-width: 277px;
    max-width: 404px;
    padding-inline: 20px;
    margin-bottom: 20px
}

.-proudcts-enmy-space {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center
}

.--item-enmy-img img {
    width: 100px;
    height: auto
}

.--pro-title {
    font-size: 30px;
    font-weight: 600;
    color: var(--uicolor-1);
    margin-bottom: 6px
}

.--pro-des {
    font-size: 18px;
    color: var(--secondarytext);
    max-width: 275px
}

.-proudcts-enmy-space:hover .--item-enmy-img {
    transform: scale(1.2) rotate(6deg)
}

.--item-enmy-img {
    transition: var(--transition-time)
}

.pro-on {
    transition: 0.6s .5s;
    transform: translatey(0);
    visibility: visible;
    opacity: 1
}

.pro-hid {
    transform: translatey(-100px);
    visibility: hidden;
    opacity: 0;
    transition-delay: 0.3s;
    transition: .6s .5s
}

.-switch-languages {
    position: relative
}

.--switch-lang {
    padding: 15px 20px;
    background-color: #fff;
    border-radius: var(--miniradius);
    position: absolute;
    transition: all 80ms ease-in-out;
    width: 100%;
    top: 140%;
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    box-shadow: 2px 5px 11px #00000014
}

.--flag-lang {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    font-size: 19px;
    font-weight: 600;
    cursor: pointer;
    flex-direction: row-reverse
}

.--flag-lang:last-child {
    margin-bottom: 0
}

.-switch-languages.-active .--switch-lang {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

.--flag-lang>a:hover {
    color: var(--uicolor-1)
}

.--flag-lang a {
    color: var(--text-color)
}

.--intro-slider-master- {
    display: flex;
    width: 100%;
    padding: 0px;
    padding-bottom: 0;
    background-repeat: no-repeat;
    position: relative;
    min-width: 100%;
    opacity: 1;
    transition: opacity 1s;
    margin-inline-end: 23px;
    justify-content: center;
    overflow: hidden;
    max-width: 100%;
    min-width: 100%;
}

.--intro-slider-master-:after {
    content: '';
    background: linear-gradient(180deg, rgb(0 14 14 / 0%) 0%, rgb(0 4 3) 100%);
    flex: 1 0 0px;
    height: 180px;
    overflow: visible;
    z-index: -1;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.--intro-home-page {
    position: relative
}

.intro-home-page-slider {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden
}

.--back-intro-shadwo {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, #0000008a 34%, rgb(0 0 0 / 81%) 82%);
    top: 0;
    opacity: .8;
    right: 0;
    z-index: -2;
    overflow: hidden;
    --bg-trans: #ffffff1f
}

.--post-title h1 {
    font-size: 90px;
    font-weight: 500;
    line-height: 1.05;
    text-align: center;
    color: #1afde9;
    margin-bottom: 25px;
    transition-delay: 0.7s;
    letter-spacing: -3px;
}

.--post-title h1>.-newline {
    font-weight: 600;
    font-size: 51px;
    padding-top: 4px;
    position: relative;
    color: white;
    letter-spacing: 0;
}

.--post-title h1>.-newline:after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
}


.-intro-descrption {
    font-size: 17px;
    line-height: 1.6;
    font-weight: 400;
    text-align: start;
    color: var(--secondarytext);
    transition-delay: 0.9s;
    margin-bottom: 21px;
    text-align: center;
    max-width: 900px;
}

.--intro-flex-content {
    display: flex;
    align-items: center;
    flex-direction: column;
    min-width: 100%;
}

.--intro-category-link {
    display: flex;
    padding: 11px 25px;
    font-size: 16px;
    font-weight: 400;
    align-content: center;
    background: var(--uicolor);
    align-items: center;
    color: #fff;
    flex-wrap: wrap;
    position: relative;
    transition: 180ms all ease;
    border-radius: var(--miniradius);
    overflow: hidden;
    border: 1px solid var(--uicolor);
}

.--intro-btns {
    display: flex;
    column-gap: 12px
}

.--intro-btns {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.-btn-all-in {
    display: flex;
    align-items: center;
    z-index: 1;
    gap: 10px
}

.owl-rtl {
    direction: rtl
}

.Intro--sliderArea {
    opacity: 0;
    display: flex;
    width: 100%;
    flex-direction: column;
    position: relative;
    align-items: flex-start;
    overflow: hidden;
    height: 100vh;
}

header>.-container>.menu-list>.-menu>ul>li {
    display: flex;
    margin: 0 3px;
    padding: 21px 0;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start
}

.-Show-SubMenu-Icon {
    height: fit-content;
    margin-bottom: -12px;
    display: flex;
    font-size: 13px;
    align-items: center;
    margin-top: -10px;
}

.owl-nav {
    display: none
}

.Intro--sliderArea .owl-dots {
    position: absolute;
    width: 100%;
    left: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    bottom: 15%;
    flex-direction: row;
    align-items: flex-end
}

.--category-intro-btn a:before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0%;
    height: 100%;
    background-color: #fff;
    transition: all 0.3s;
    border-radius: 3px;
    z-index: 0
}

.--intro-category-link:hover:before {
    width: 100%
}

.--intro-category-link:hover {
    color: var(--uicolor-1)
}

.-minimal-header .-button-ui {
    background-image: var(--alinks);
    color: #fff
}

.-minimal-header .-button-ui.-ui-secondary:hover {
    color: #fff
}

.-after__intro-container {
    display: block;
    max-width: 100%;
    position: relative;
    z-index: 1;
    text-align: start
}

.OD-partner.container--intro--items:nth-child(even) .-after__intro-container {
    text-align: end;
}

.-after__intro-container>.-widget-after-intro-h1>c--color {
    color: var(--uicolor);
    margin-inline-start: 10px;
    font-weight: 700
}

.-defult-intro-title-URL .--in--left--button-title a,
.-defult-intro-title-URL .--in--left--button-title:hover a {
    color: #fff
}

.container--intro--items {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: row;
}

.-contact-style-bg {
    position: absolute;
    height: 360px;
    width: 200px;
    border-radius: 220px;
    opacity: .01
}

.-contact-style-4 {
    left: calc(50% + 200px);
    transform: translateX(-50%) rotate(45deg);
    bottom: 170px;
    background: var(--uicolor2)
}

.-contact-style-3,
.-contact-style-bg.-contact-style-1 {
    transform: rotate(-20deg);
    background: var(--primary-text)
}

.-contact-style-3 {
    left: 20px;
    top: -200px
}

.-contact-style-bg.-contact-style-1 {
    right: 15px;
    bottom: -380px
}

.-contact-style-2 {
    left: calc(50% - 190px);
    transform: translatex(-50%) rotate(45deg);
    background: var(--uicolor2)
}

.-YC-after__intro_SVG {
    display: block;
    min-width: 270px;
    margin-inline-start: 40px
}

.-after__intro-image {
    margin-inline-end: 85px;
    flex: 1;
    transition: 180ms;
    min-width: 529px;
}

.-service.-after__intro-image {
    position: sticky;
    top: 100px;
}

.-defult-intro-title-URL {
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    margin-top: 25px;
}

.--in--left--button-title>p {
    display: flex;
    flex-direction: column
}

.about_lists-style1 {
    position: relative;
    display: flex;
    min-width: 100%;
    margin-bottom: 20px;
}

.about_lists-style1:hover:before {
    top: 0;
    width: 100%;
    height: 100%
}

.about_lists-style1>h4 {
    font-size: 16px;
    font-weight: 700;
    line-height: 28px;
    color: var(--primary-text);
    margin-bottom: 5px;
    transition: .4s ease-in-out;
    position: relative
}

.-YourColor-SingleWidget-Section.-YC-WidgetType-after__intro .--in--left--button-title>p>a {
    font-size: 22px;
    font-weight: 900;
    font-family: var(--f-number);
    letter-spacing: 1px;
    margin-inline-end: 0;
    box-shadow: none !important;
    padding: 0;
    color: var(--secondarytext)
}

.about_icon:hover {
    transform: translateY(-8px)
}

.--in--left--button-title>i {
    --el-w: 60px;
    width: var(--el-w);
    height: var(--el-w);
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    color: var(--whatsapp);
    border-radius: 50%;
    font-size: 26px;
    font-weight: 800;
    padding-top: 3px;
    padding-inline-start: 2px;
    margin-inline-end: 20px;
    border: 2px solid var(--whatsapp);
    z-index: 1;
    transition: 180ms all ease
}

.about_icon i {
    width: 1em;
    height: 1em;
    position: relative;
    display: block;
    font-size: 35px
}

.--intro--background {
    position: relative
}

.third--image-left--after-intro {
    text-align: right
}

.back-after-intro {
    position: absolute;
    left: -220px;
    top: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    z-index: -1
}

.-after__intro-container>.-pp-content {
    font-size: 16px;
    line-height: 1.5;
    color: var(--second-text-color);
    font-weight: 400;
    margin-bottom: 35px;
    padding-bottom: 35px;
    position: relative;
}

.about_lists-title {
    color: var(--second-text-color);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    display: flex;
    gap: 17px;
    align-items: center;
}


.--in--left--button-title:hover>i {
    background: var(--whatsapp);
    color: #fff
}

.--yc-after-intro-call>span:first-child {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 5px;
    line-height: 1.5
}

.--yc-after-intro-call>span {
    color: var(--secondarytext);
    display: flex;
    flex-direction: column;
    font-size: 20px;
    font-weight: 600
}

.--in--left--button-title a:hover>i {
    background: var(--whatsapp);
    color: #fff
}

.-after_intro--img-point- {
    display: block;
    position: relative;
    z-index: 1;
    text-align: start
}

.--image-after-intro-- {
    position: absolute;
    right: 0;
    bottom: -100px;
    border-bottom-left-radius: 60px;
    overflow: hidden;
    z-index: 2
}

.--yc-after--intro-image-- {
    display: block;
    position: relative
}

.first--image-left--after-intro img {
    border-radius: var(--miniradius);
    box-shadow: var(--faq-shadow)
}

.first--image-left--after-intro {
    position: relative;
    display: block;
    max-width: max-content
}

.--image-after-intro--- {
    position: absolute;
    right: 0;
    bottom: -100px;
    border-bottom-left-radius: 60px;
    overflow: hidden
}

.--after-experince-banar-- {
    position: absolute;
    top: 30px;
    right: 0;
    display: flex;
    align-items: center;
    padding: 25px;
    border-radius: var(--largeradius) var(--largeradius) 0 var(--largeradius);
    z-index: 2;
    background: var(--tp-common-black);
    color: var(--tp-common-text)
}

.--after-experince-banar--:before {
    position: absolute;
    top: 8px;
    left: 8px;
    bottom: 8px;
    right: 8px;
    border: 2px dashed var(--tp-common-text);
    border-radius: inherit;
    content: "";
    opacity: .7
}

span.--years-number-- {
    font-size: 20px;
    font-weight: 500;
    max-width: 80px;
    line-height: 1.4;
    text-align: start
}

span.--years-experince-- {
    font-size: 55px;
    font-weight: 800;
    margin-inline-end: 13px;
    font-family: var(--f-number)
}

.-after__intro-contain--lists {
    display: flex;
    flex-wrap: wrap
}

.-after__intro-contain--lists.services {
    margin-inline-start: 35px;
}

.-defult-intro-title-URL>.--Parent-URL-BTN>a>span {
    margin-inline-end: 9px
}

.-defult-intro-title-URL>.--Parent-URL-BTN>a:hover:after {
    transform: scaleY(1);
    transform-origin: top
}

.--back-ground-after-into- {
    position: absolute;
    left: 0;
    top: 0;
    opacity: .05
}

.--in--left--button--after-intro>a>i {
    --el-w: 58px;
    width: var(--el-w);
    height: var(--el-w);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--whatsapp);
    font-size: 28px;
    font-weight: 800;
    margin-inline-end: 15px;
    background: #fff;
    border-radius: 50%;
    border: 2px solid var(--whatsapp);
    transition: all 180ms ease 0s;
    font-weight: 500;
    padding-top: 3px;
    padding-inline-start: 3px
}

.--in--left--button--after-intro>a:before {
    content: "";
    display: block;
    position: absolute;
    border: 2px solid var(--whatsapp);
    inset: -20px;
    border-radius: 50%;
    animation: 1.5s linear infinite animate;
    opacity: 0;
    --yyj: 58px;
    width: var(--yyj);
    height: var(--yyj);
    top: -2px;
    right: -2px
}

.--in--left--button--after-intro:hover>a>i {
    background: var(--whatsapp);
    color: #fff
}

.after-title {
    font-size: 16px;
    line-height: 1.5;
    color: var(--primary-text);
    font-weight: 500;
    margin-bottom: 10px
}

.-defult-intro-title-URL .-defult-widgets-title--URLArea-v1 {
    display: flex;
    flex-direction: row;
    gap: 15px;
    align-items: center
}

.-defult-intro-title-URL .main-ket-button_1 {
    margin-inline-end: 10px
}

.--in--left--button-title {
    display: flex;
    transition: 350ms ease;
    border-radius: 50px;
    position: relative;
    align-items: center;
    margin-inline-start: 15px;
    background-color: var(--whatsapp);
    background-size: 100% auto
}

.--in--left--button-title:before {
    display: block;
    position: absolute;
    border: 2px solid var(--whatsapp);
    border-radius: 50%
}

.--in--left--button--after-intro>a:before,
.--in--left--button-title:before {
    content: "";
    inset: -20px;
    animation: 1.5s linear infinite animate;
    opacity: 0;
    --yyj: 58px;
    width: var(--yyj);
    height: var(--yyj);
    top: -2px;
    right: -2px
}

.-Intro-slider-URLArea,
.-Intro-slider-URLArea a {
    display: flex;
    align-items: center;
    position: relative;
    align-content: center
}

--in--left--button-title>a>i {
    --el-w: 58px;
    width: var(--el-w);
    height: var(--el-w);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--whatsapp);
    font-size: 28px;
    margin-inline-end: 15px;
    background: #fff;
    border-radius: 50%;
    border: 2px solid var(--whatsapp);
    transition: 180ms;
    font-weight: 500;
    padding-top: 3px;
    padding-inline-start: 3px
}

.--in--left--button-title:hover>a>i {
    background: var(--whatsapp);
    color: #fff
}

.-Intro-slider-URLArea a p {
    font-size: 24px;
    font-family: var(--f-number);
    font-weight: 600
}

.-defult-intro-title-URL .--in--left--button-title a i {
    --el-w: 60px;
    width: var(--el-w);
    height: var(--el-w);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--whatsapp);
    font-size: 24px;
    margin-inline-end: 15px;
    background: #fff;
    border-radius: 50%;
    border: 2px solid var(--whatsapp);
    transition: 180ms;
    font-weight: 500;
    padding-top: 3px;
    padding-inline-start: 3px;
    background-color: #fff;
    position: relative
}

.--in--left--button-title>a>p {
    color: #fff;
    font-size: 19px;
    line-height: 1.5;
    font-weight: 600;
    margin-inline-end: 18px
}

.--in--left--button-title>a {
    display: flex;
    align-items: center
}

.-YC-WidgetType-after__intro .btn-ket_1 {
    margin-inline-end: 20px;
    margin-bottom: 0
}

.-YC-WidgetType-after__intro .btn-ket_2 {
    margin-bottom: 0
}

.-widget-after-intro-h1 {
    line-height: 1.2;
    margin-bottom: 20px;
    font-size: 57px;
    text-align: start;
    font-weight: 700;
    color: #fff;
    flex-direction: column;
}

.-flex-faq-in .-stages.-widget-after-intro-h1 {
    text-align: start;
}

.-defult-widgets-title-style-1 .-widget-after-intro-h1 {
    text-align: center;
}

.-flex-faq-in .-widget-after-intro-h1.value {
    text-align: start;
}

.-widget-after-intro-h4 {
    font-size: 17px;
    font-weight: 300;
    margin-bottom: 10px;
    position: relative;
    gap: 10px;
    color: #fff;
    max-width: fit-content;
    border: var(--border);
    border-radius: var(--miniradius);
    padding: 5px 13px;
    display: flex;
    background: linear-gradient(0deg, rgb(38 249 255 / 15%), rgba(0, 85, 255, 0.08), rgba(153, 153, 153, 0.1), rgba(153, 153, 153, 0.1));
    align-items: center;
}

.-widget-after-intro-h4 {
    opacity: 1 !important;
}

.-widget-after-intro-h4.services {
    margin-bottom: 30px;
    font-size: 21px;
    padding: 6px 31px;
}

.-widget-after-intro-h4.services .-after__intro-contain--lists {
    margin-inline-end: 22px;
}

.-defult-widgets-title--URLArea-v1>.--Parent-URL-BTN>a>i {
    margin-inline-start: 6px;
    font-weight: 400;
    font-size: 18px
}

.btn-ket_1 {
    padding: 9px 22px;
    background: var(--btn-back-color);
    color: #fff;
    cursor: pointer;
    border-radius: var(--miniradius);
    font-size: 16px;
    display: flex;
    border: 3px solid rgb(255 255 255 / 13%);
    transition: var(--transition-kit);
    align-items: center;
    font-weight: 600;
    box-shadow: rgb(6 52 51) 0px 8px 40px 0px, rgba(255, 255, 255, 0) 0px 0px 10px 1px inset, rgba(0, 85, 255, 0.12) 0px 0px 0px 1px;
    justify-content: center;
}

.-defult-widgets-title-style-1 .-widgets-h1-title {
    font-size: 40px;
    font-weight: 600;
    text-align: start;
    line-height: 1.6;
    color: var(--primary-text);
    margin-bottom: 15px
}


.P-content {
    .P-content {
        max-width: 600px;
        text-align: start;
        color: var(--secondarytext);
        font-weight: 300;
        font-size: 19px;
        line-height: 1.6
    }







    max-width:600px;
    text-align:start;
    color:var(--secondarytext);
    font-weight:300;
    font-size: 16px;
    line-height:1.6;
    overflow:hidden
}

.-defult-widgets-title-style-1 {
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: row;
    padding-bottom: 50px;
    align-items: flex-end;
    justify-content: center;
    position: sticky;
    top: 100px;
    min-width: 741px;
}


.-defult-widgets-title--URLArea-v1 {
    display: flex;
    gap: 20px;
    flex-direction: column;
    align-items: flex-end
}

.sup-title-widget-defualt {
    font-size: 15px;
    color: var(--uicolor);
    font-weight: 700;
    margin-bottom: 8px;
    text-align: start
}

.container.largerContainer .-YC-FaqsSimple-SVG-s1 {
    min-width: 700px
}

.--images--contact--page {
    position: absolute;
    bottom: 30px;
    right: 30px
}

.--images--contact--page>a {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 15px;
    border-radius: var(--largeradius)
}

.--images--contact--page>a>i {
    --el-ww: 60px;
    width: var(--el-ww);
    height: var(--el-ww);
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--uicolor);
    color: #fff;
    font-size: 25px;
    font-weight: 400;
    border-radius: 50%;
    margin-inline-end: 15px;
    padding-top: 3px;
    padding-inline-start: 2px
}

.--images--contact--page>a>p {
    display: flex;
    flex-direction: column;
    margin-inline-end: 10px
}

.--images--contact--page>a>p>span {
    font-size: 13px;
    color: var(--secondarytext);
    margin-bottom: 5px
}

.--images--contact--page>a>p>strong {
    font-size: 26px;
    font-family: var(--f-number)
}

.--abs---faqs--buttonns {
    position: absolute;
    right: 0;
    bottom: 40px;
    display: flex
}

.fqs---counter--box--item {
    display: flex;
    align-items: center;
    background: var(--uicolor);
    color: #fff;
    min-width: 270px;
    border-radius: var(--miniradius);
    position: absolute;
    padding: 9px 18px;
    justify-content: center
}

.fqs---counter--box--item.--second--box--faqs--btn .title,
.icon {
    color: var(--primary-text)
}

.fqs---counter--box--item>p {
    color: #ffffffeb;
    font-size: 15px
}

.fqs---counter--box--item>span {
    font-size: 20px;
    margin-bottom: 17px;
    font-weight: 500
}

.fqs---counter--box--item.--first--box--faqs--btn {
    top: 60%;
    left: 0
}

.--count--contain {
    display: flex;
    align-items: flex-end;
    font-size: 17px;
    margin-bottom: 17px
}

.--count--contain>strong {
    font-family: var(--f-number);
    font-size: 60px;
    margin-inline-end: 15px;
    line-height: 48px
}

.--v---faqss--image {
    border-radius: 50%;
    overflow: hidden;
    -webkit-box-shadow: -26px 18px 1px -2px var(--uicolor);
    margin-inline-end: 41px
}

.fqs---counter--box--item.--second--box--faqs--btn {
    top: 75%;
    background: #fff;
    left: 30px;
    box-shadow: 0 5px 15px 0 rgb(0 0 0 / .06)
}

.fqs---counter--box--item .title {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5
}

.icon {
    margin-inline-end: 10px;
    background: #fff;
    padding: 4px;
    border-radius: 50%;
    font-size: 13px;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center
}

.fqs---counter--box--item.--second--box--faqs--btn .icon {
    background: var(--uicolor);
    color: #fff
}

.-YC-faqs-simple-title-content>.-after__intro-container>.-widget-after-intro-h1 {
    font-size: 35px
}

.--faqs-img-- {
    position: relative;
    display: block;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: var(--largeradius)
}

.--YC-back-faqs-img-- {
    position: absolute;
    right: -30px;
    bottom: -20px;
    z-index: -1;
    animation: 5s linear infinite left1right
}

.--faqs-title-content-.-after__intro-container {
    position: relative;
    z-index: 9
}

.-YC-faqs-simple-title-content {
    min-width: max-content;
    margin-inline-end: 90px;
    position: sticky;
    top: 135px;
    transition: 180ms
}

.-YC-FaqsSimple-ItemsCenter-v1 {
    /* display:block; */
    /* position:relative; */
    /* z-index:1; */
    /* width:100%; */
    /* text-align:start; */
}

.--faqs-img-->img {
    width: 100%;
    height: 100%;
    border-radius: var(--largeradius)
}

footer.-waqf-footer .-Show-SubMenu-Icon {
    display: none
}

.-waqf-footer ul.sub-menu>li>a {
    font-size: 15px
}

.-YC-owl-Slides-next.-custom-owl-Slides-next {
    left: 7px
}

.-pages-intro-body {
    padding-top: 150px;
    text-align: center;
    position: relative;
    background: conic-gradient(from 0deg at 50% 0%, rgb(0 0 0) 90deg, rgb(64 182 186 / 43%) 181.299deg, rgb(0, 0, 0) 270deg);
}

.-pages-intro-body .shape-intro.sh1 {
    background: #3eb1b45e;
}

.--pages-content-in>h1 {
    color: #fff;
    font-size: 73px;
    margin-bottom: 15px;
    max-width: 890px;
    transform: translate(0px, 0px) !important;
    opacity: 1 !important;
    line-height: 1.3;
}

.-pagees-breadcrump-content-in {
    background: #e9e9e9;
    padding: 13px 0
}

.--PriceLists-Center-area.--mastercity-area {
    position: relative
}

.--blog-wrap-flexability {
    padding: 80px 0
}

header>.-container>.menu-list>.-menu ul.sub-menu>li.current-menu-item>a {
    color: var(--textcolor)
}

.--blog-wrap-flexability .-YC-FaqsSimple-ItemsCenter-v1 {
    max-width: 100%
}

.-flex-faq-in .-YC-FaqsSimple-ItemsCenter-v1 {}

.-xtitens-button--phones>a {
    position: fixed;
    bottom: 95px;
    right: 15px;
    --we: 60px;
    width: var(--we);
    display: flex;
    height: var(--we);
    z-index: 99;
    background: var(--uicolor);
    color: #fff;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    border-radius: 50%;

}

.footer-header {
    display: flex
}

.--xtitlens--whatsapp-button>a {
    position: fixed;
    right: 27px;
    background: var(--whatsapp);
    bottom: 90px;
    --we: 60px;
    width: var(--we);
    height: var(--we);
    z-index: 99;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 35px;
    border-radius: 50%
}

.--category-page {
    padding-block: 80px
}

.-logo {
    --we: 50px;
    --we: 25px;
    margin-inline-end: 6px;
    padding-inline-end: var(--we);
    position: relative;
}


.-logo>a {
    width: 100px;
    max-width: 100px
}

.--open-searching-:hover {
    background: #fcfafa;
    border-color: #ececec
}

headr.hidemenu .menu-list:before {
    opacity: 1
}

header>.-container>.menu-list>.-menu ul>li>a:hover:before {
    width: 100%
}

header>.-container>.menu-list>.-menu ul>li>a {
    position: relative
}

ul.sub-menu>li>a:before {
    display: none
}

.class-slider {
    position: absolute;
    z-index: 1;
    top: 50%;
    color: #fff;
    display: flex;
    align-items: center
}

.-prev-owl-Slides-prev {
    color: #ffffff4a;
    right: 7%;
    position: absolute;
    font-size: 30px;
    cursor: pointer;
    transition: var(--transition-time)
}

.-prev-owl-Slides-next {
    color: #ffffff4a;
    left: 7%;
    position: absolute;
    cursor: pointer;
    transition: var(--transition-time);
    font-size: 30px
}

.-prev-owl-Slides-next:hover {
    color: #fff
}

.-prev-owl-Slides-prev:hover {
    color: #fff
}

.search_header.open .-container {
    width: 100%
}

.--intro-category-link:hover {
    background: #1f1f1f;
    border-color: #1f1f1f
}

.slider-btn-right>a {
    background: #fff0;
    border: 1px solid #fff
}

.--pages-item {
    background: linear-gradient(17deg, #89775e 0%, #d4d1c6 100%)
}

.-before-inro-title {
    color: #fff;
    background: var(--uicolor);
    padding: 10px 21px;
    border-radius: var(--miniradius);
    line-height: 1.5;
    font-size: 15px
}

.-home-section-item {
    padding-block: 90px;
}


.btn-ket_1:hover {
    box-shadow: rgb(3 141 145) 0px 8px 40px 0px, rgb(255 255 255 / 22%) 0px 0px 10px 1px inset, rgb(0 4 255 / 3%) 0px 0px 0px 4px;
}


.-defult-widgets-felx-style-1 {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 55px;
    flex-direction: column;
    align-items: center;
}

.-flex-faq-in .-defult-widgets-felx-style-1 {
    max-width: 575px;
}

.-defult-widgets-title-style-1.value:after {
    background: #fff
}

.sup-title-widget-defualt.value {
    color: #fff;
    font-weight: 400;
    margin-bottom: 5px
}

h2.-widgets-h1-title.value {
    color: #fff;
    margin-bottom: 7px;
    font-weight: 400
}

.P-content.value {
    text-align: center;
    font-size: 17px;
    line-height: 1.6;
    color: var(--second-text-color);
    font-weight: 400;
}

.-flex-faq-in .P-content.value {
    text-align: start;
}

.-image-value {
    padding-top: 20%;
    background-image: var(--bg-intro);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: var(--miniradius);
    opacity: 1;
    width: 665px
}

.--value-flex {
    display: flex;
    gap: 25px;
    flex-wrap: wrap
}

.--val-icon i {
    font-size: 24px;
    color: #fff;
}

.--mostklon h3 {
    font-size: 19px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 7px;
}

p.--value-des {
    font-size: 16px;
    color: #a7a7a7;
    font-weight: 200;
    text-align: start;
    margin-bottom: 0;
}

.--mostklon {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    flex: 1;
    min-width: 290px;
    background: linear-gradient(0.07383128568086761deg, var(--token-f5219c3a-5ee2-4639-9e23-4bdcf5509ebd, rgb(63 181 183 / 22%))
        /* {"name":"Blue 15%"} */
        0%, var(--token-b456af2e-fd88-41ae-8686-ad7692875dfd, rgba(97, 97, 97, 0.09))
        /* {"name":"Grey 9%"} */
        100%);
    padding: 27px;
    border-radius: var(--largeradius);
    border: var(--border);
}


.--val-icon {
    transition: var(--transition-time);
    --we: 50px;
    width: var(--we);
    height: var(--we);
    display: flex;
    box-shadow: rgb(3 35 33) 0px 5px 25px 0px, rgba(255, 255, 255, 0.08) 0px 10px 10px -1px inset;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 50%;
}

.--team-Center-area {
    display: flex;
    gap: 25px;
    flex-wrap: wrap
}



.-blog-gridboxes>.-blog-gridboxes-item>a>.-blog-gridboxes-item-thumb:hover {
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)
}


.--logo-fildes-in:hover {
    transform: translateY(-12px);
    box-shadow: 0 16px 10px rgb(16 24 40 / 5%)
}

ul.top-arefooter {
    display: flex;
    flex-direction: column;
    margin: 0 !important
}

.--footer-contact-us {
    max-width: 285px;
    min-width: 260px;
    flex: 1;
    margin: 15px;
    margin-inline-start: 17px;
}

.menu-menu-2-container {
    flex: 1;
    min-width: 285px;
}

.contfooter {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 400;
    color: var(--second-text-color)
}

li.-footer-items {
    margin: 0 !important;
    line-height: 1.5;
    padding-block: 6px
}

.--contanc-head {
    display: block;
    font-size: 22px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 10px;
    text-align: start
}

.contfooter i {
    font-size: 21px
}

.-waqf-footer-body>.-waqf-footer-body-menu>div>ul>li>ul>li>a:hover {
    color: var(--uicolor-1)
}

.-waqf-footer-body {
    padding: 45px 0px;
}

.current-menu-item>a:before {
    width: 100% !important
}

.-page-toper {
    padding-top: 80px
}

.--maknuz {
    text-align: center;
    font-size: 30px;
    color: var(--textcolor);
    font-weight: 500;
    margin-bottom: 30px
}

.-BreadCrumb.-BreadCrumb-PT- {
    display: flex;
    gap: 5px;
    align-items: center
}

.-BreadCrumb.-BreadCrumb-PT- h1 {
    font-size: 15px;
    margin: 0
}

.Popver--CoursesAlert {
    --overlay-alpha-80: rgb(0 0 0 / 68%);
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 1000000000;
    background: var(--overlay-alpha-80);
    top: 0;
    right: 0;
    font-family: var(--pluginff)
}

.Popver--CoursesAlert>.PopverInnerElemnt {
    position: absolute;
    min-width: 528px;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    background: var(--back-image);
    border-radius: var(--miniradius);
    z-index: 1;
    padding: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: var(--border);
}

.Popver--CoursesAlert>.PopverInnerElemnt>.HeadAlert--Popvoer {
    display: flex;
    padding: 25px;
    border-bottom: 1px solid rgba(0, 0, 0, .04);
    align-content: center;
    align-items: center
}

.Popver--CoursesAlert>.PopverInnerElemnt>.ContentAlert--Popvoer {
    margin: 0;
    padding: 30px;
    font-weight: 300;
    color: #222;
    font-size: 17px
}

.Popver--CoursesAlert>.PopverInnerElemnt>.ALertConroller--Popvoer {
    display: flex;
    justify-content: flex-end;
    margin: 10px 0 15px;
    padding: 0 15px
}

.Popver--CoursesAlert.error>.PopverInnerElemnt>.ALertConroller--Popvoer {
    justify-content: center;
    align-items: center;
    align-content: center
}

.Popver--CoursesAlert>.PopverInnerElemnt>.ALertConroller--Popvoer>a {
    display: flex;
    padding: 13px 22px;
    border-radius: var(--miniradius);
    font-weight: 500;
    font-size: 16px;
    margin-inline-start: 5px;
    position: relative;
    align-content: center;
    align-items: center;
    justify-content: center;
    color: var(--secondarytext);
    text-decoration: unset;
    overflow: hidden
}

.Popver--CoursesAlert>.PopverInnerElemnt>.ALertConroller--Popvoer>a>.InnerLoaderBoxed--Context---overlays {
    position: relative;
    width: 24px;
    height: 24px;
    margin-right: 10px
}

.Popver--CoursesAlert>.PopverInnerElemnt>.ALertConroller--Popvoer>a>.InnerLoaderBoxed--Context---overlays .loader {
    width: 100%
}

.Popver--CoursesAlert>.PopverInnerElemnt>.ALertConroller--Popvoer>a.AlertIsConfirm {
    background: var(--positive);
    color: #fff
}

.Popver--CoursesAlert>.PopverInnerElemnt>.HeadAlert--Popvoer>h2 {
    flex: 1;
    font-size: 22px;
    font-weight: 600;
    margin: 0;
    font-family: var(--pluginff)
}

.Popver--CoursesAlert>.PopverInnerElemnt>.HeadAlert--Popvoer>span {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #eee;
    text-align: center;
    display: flex;
    place-content: center;
    align-items: center;
    font-size: 17px;
    position: relative;
    cursor: var(--cursor), default;
    ;
    overflow: hidden
}

.Popver--CoursesAlert>.PopverAlertOverlay {
    position: absolute;
    width: 100%;
    height: 100%;
}

.Alert-Subs--Popvoer {
    margin: 0 auto;
    font-size: 21px;
    font-weight: 600;
    max-width: 280px;
    text-align: center;
    line-height: 1.7
}

.--tap-dr {
    opacity: 0;
    visibility: hidden;
    transition: opacity 250ms ease-in-out;
    line-height: 1.6;
    color: var(--second-text-color);
    font-size: 16px;
    font-weight: 400;
    height: 0;
}

.--tap-dr.active {
    opacity: 1;
    visibility: visible;
    height: 100%;
}

.-category-definition {
    padding-top: 60px;
}

.--image-content {
    min-width: max-content;
    margin-inline-end: 85px;
    position: sticky;
    top: 135px;
    transition: 180ms;
}

.--def-features {
    display: block;
    max-width: 760px;
    top: 140px;
    position: relative;
    height: fit-content;
    z-index: 1;
    text-align: start;
}

.-def-after-intro-div {
    font-size: 40px;
    font-weight: 500;
    margin-bottom: 25px;
}

.-tap-title- {
    display: flex;
    margin-bottom: 15px;
    border: 1px solid #d9d9d9;
    width: fit-content;
    border-radius: var(--miniradius);
}

.--tap-cn {
    border-radius: var(--miniradius);
    padding: 8px 20px;
    font-size: 16px;
    font-weight: 400;
    transition: all 100ms ease-in-out;
    cursor: pointer;
}

.--tap-cn.active {
    background: var(--uicolor);
    color: #fff;
    border-radius: var(--miniradius);
    padding: 8px 22px;
    font-size: 16px;
}

.--def-flex {
    display: flex;
}

.--team-back-img {
    padding-top: 36%;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: var(--miniradius);
    HEIGHT: 302PX;
    margin-bottom: 20px;
    opacity: 1;
    position: relative;
    background-size: contain;
}

.--cv-button {
    --we: 54px;
    width: var(--we);
    height: var(--we);
    transition: var(--transition-x);
    background: #fff;
    display: flex;
    position: absolute;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    left: 3%;
    bottom: 3%;
    border-radius: var(--miniradius);
    font-size: 21px;
}

.--cv-button:hover {
    background: var(--uicolor);
    color: #fff;
}

.no-scroll {
    overflow: hidden;
}

.popup-overlay {
    top: 0;
    position: fixed;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.--team-seats-cv {
    background: #fff;
    padding: 50px 43px;
    top: 0;
    max-width: 680px;
    width: 90%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: relative;
    border-radius: 8px;
    font-size: 16px;
    line-height: 1.6;
}

.-close-cv-inner {
    position: absolute;
    top: 20px;
    right: 25px;
    cursor: pointer;
    font-size: 1.5em;
    color: #333;
}


.jop-title {
    font-size: 15px;
    color: var(--second-text-color);
    margin-bottom: 8px;
}

.cv-content {
    font-size: 16px;
    line-height: 2.2;
    color: #2e2e2e;
    max-height: calc(80vh - 50px);
    overflow-y: auto;
    padding-right: 10px;
}


li.menu-item-type-custom:first-child a {
    padding-inline-start: 0;
}

header>.-container>.menu-list>.-menu ul>li.current-menu-item:first-child a {
    padding-inline-start: 0;
}

.--first-btn-kit:hover {
    box-shadow: rgb(4 141 145) 0px 8px 40px 0px, rgb(255 255 255 / 22%) 0px 0px 10px 1px inset, rgb(10 144 148 / 7%) 0px 0px 0px 4px;
}

a.--first-btn-kit {
    padding: 8px 18px;
    background: var(--btn-back-color);
    color: #fff;
    border-radius: var(--largeradius);
    font-size: 16px;
    transition: var;
    display: flex;
    border: 1px solid rgb(255 255 255 / 13%);
    transition: var(--transition-kit);
    align-items: center;
    font-weight: 600;
    box-shadow: rgb(3 141 145 / 12%) 0px 8px 40px 0px, rgba(255, 255, 255, 0) 0px 0px 10px 1px inset, rgba(0, 85, 255, 0.12) 0px 0px 0px 1px;
}

.site-bar {
    display: flex;
    align-items: center;
}

.site-mab {
    display: flex;
    align-items: center;
}

header>.-container>.menu-list>.site-mab>.-menu>.menu-menu-1-container>ul>li>a:hover {
    opacity: 1;
}

header.hidemenu {
    top: -92px;
}

.video-in {
    position: absolute;
    width: 100%;
    height: 100%;
    right: 0;
}

.Intro--slider {
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
}

video.background-video {
    cursor: auto;
    width: 100%;
    height: 100%;
    border-radius: 0px;
    display: block;
    object-fit: cover;
    background-color: rgba(0, 0, 0, 0);
    object-position: 50% 50%;
    transform: scaleX(-1);
}

.-intro-posts-content-in {
    display: flex;
    width: 100%;
    height: 100%;
    gap: 50px;
    justify-content: space-between;
    align-items: flex-end;
    max-width: 1020px;
    margin-inline: auto;
}

.--before-title-intro {
    font-size: 16px;
    color: #fff;
    background: #ffffff12;
    margin-bottom: 40px;
    width: fit-content;
    border-radius: var(--miniradius);
    backdrop-filter: blur(54px);
    padding: 5px 22px 5px 6px;
    display: flex;
    align-items: center;
    box-shadow: inset 0px 1px 0px 0px var(--token-153e0cc2-b113-4628-8f5c-363eab5e5efa, rgb(39, 50, 65)), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.53), 0px 0.8062101855268702px 0.5643471298688091px -0.625px rgba(0, 0, 0, 0.1), 0px 1.9108604964567348px 1.337602347519714px -1.25px rgba(0, 0, 0, 0.1), 0px 3.4856070620706303px 2.4399249434494408px -1.875px rgba(0, 0, 0, 0.09), 0px 5.794814743450843px 4.056370320415589px -2.5px rgba(0, 0, 0, 0.09), 0px 9.35815330653917px 6.550707314577418px -3.125px rgba(0, 0, 0, 0.08), 0px 15.318368451562709px 10.722857916093893px -3.75px rgba(0, 0, 0, 0.07), 0px 26.37719604641665px 18.464037232491652px -4.375px rgba(0, 0, 0, 0.05), 0px 48px 33.599999999999994px -5px rgba(0, 0, 0, 0);
    gap: 10px;
}

c-color {
    padding: 2px 8px;
    background: rgb(3 141 145);
    color: #fff;
    border-radius: var(--miniradius);
    font-size: 17px;
    font-weight: 900;
    border: 2px solid rgb(255 255 255 / 31%);
    transition: var(--transition-kit);
    box-shadow: rgb(3 141 145 / 60%) 0px 8px 40px 0px, rgb(255 255 255 / 22%) 0px 0px 10px 1px inset, rgb(26 151 155 / 12%) 0px 0px 0px 4px;
}

.-second-btn-all-in {
    background: #fff;
    transition: opacity 350ms ease-in-out;
    padding: 9px 27px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    cursor: pointer;
    border-radius: var(--largeradius);
}

.countdown {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.time {
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    font-size: 2em;
    border-radius: 5px;
}

#countdown {
    background-color: #ffffff24;
    transition: opacity 350ms ease-in-out;
    padding: 10px 14px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: inline-block;
    cursor: pointer;
}

#countdown ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

#countdown ul li {
    margin: 0 6px;
    font-size: 12px;
    font-weight: bold;
    color: #333;
}

#countdown span {
    font-size: 50px;
    color: #ff5722;
}

#countdown li span {
    font-size: 19px;
    color: #fff;
    font-weight: 100;
}

#countdown li {
    font-size: 16px;
    color: #888;
}

.--intro-features {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

.full_page {
    position: relative;
}

.full_page:before {
    content: '';
    width: 100%;
    height: 1px;
    position: absolute;
    top: 0;
    background: linear-gradient(270deg, var(--token-4ba9d2af-bbc9-422d-912b-c0d857289d96, rgba(255, 255, 255, 0)) 0%, var(--token-4ef09f89-9c35-4972-a9c1-8efc95820553, rgba(255, 255, 255, .2)) 50%, var(--token-4ba9d2af-bbc9-422d-912b-c0d857289d96, rgba(255, 255, 255, 0)) 100%);
}

.-raly-logos {
    padding-top: 20px;
}

.-raly-logos {
    max-width: 400px;
    overflow: hidden;
}

marquee.-raly-logos-marquee span {
    margin-inline: 15px;
}

.full_page {
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 30%, rgb(0, 0, 0) 70%, rgba(0, 0, 0, 0) 100%);
}

.-second-btn-all-in:hover {
    opacity: 0.7;
}

div#countdown:hover {
    opacity: 0.7;
}

.-logos-intro-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 50px;
    z-index: 2;
    flex: 1;
    margin-bottom: 40px;
}

.video-container {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    justify-content: center;
    position: relative;
    border-radius: var(--largeradius);
    overflow: hidden;
    border: var(--border-in);
    background: var(--back-image);
}

.-video-img {
    display: flex;
    gap: 10px;

}

@keyframes softTilt {
    0% {
        transform: rotate(15deg) rotateX(-20deg) rotateY(30deg);
    }

    50% {
        transform: rotate(20deg) rotateX(-20deg) rotateY(40deg);
    }

    100% {
        transform: rotate(15deg) rotateX(-20deg) rotateY(30deg);
    }
}

;

.--icon-svg {
    position: absolute;
    top: -53%;
    right: -34%;
}

.--icon-svg:after {
    content: '';
    position: absolute;
    background: linear-gradient(270deg, var(--token-4ba9d2af-bbc9-422d-912b-c0d857289d96, rgba(255, 255, 255, 0)) 0%, var(--token-4ef09f89-9c35-4972-a9c1-8efc95820553, rgba(255, 255, 255, .2)) 50%, var(--token-4ba9d2af-bbc9-422d-912b-c0d857289d96, rgba(255, 255, 255, 0)) 100%);
    width: 100%;
}

.--icon-svg:after {
    content: '';
    background: linear-gradient(270deg, var(--token-4ba9d2af-bbc9-422d-912b-c0d857289d96, rgba(255, 255, 255, 0)) 0%, var(--token-4ef09f89-9c35-4972-a9c1-8efc95820553, rgba(255, 255, 255, .2)) 50%, var(--token-4ba9d2af-bbc9-422d-912b-c0d857289d96, rgba(255, 255, 255, 0)) 100%);
    width: 100%;
    position: absolute;
    top: 49%;
    transform: rotate(323deg);
    height: 1px;
    right: 0%;
}

.play-button {
    POSITION: ABSOLUTE;
    z-index: 1;
    color: #fff;
    top: 35%;
    --we: 60px;
    border-radius: 50%;
    overflow: hidden;
    background: #ffffff12;
    font-size: 20px;
    border: 1px solid #ffffff0d;
    backdrop-filter: blur(8px);
    width: var(--we);
    display: none;
    height: var(--we);
    align-items: center;
    justify-content: center;
}

.intro_image {
    padding: 8px;
    background: var(--back-image);
    border-radius: var(--largeradius);
    border: var(--border);
}

.--yc-after--intro-image--:after {
    content: '';
    bottom: 0;
    flex: none;
    height: 1px;
    left: calc(50.00000000000002% - 31.496062992125985% / 2);
    position: absolute;
    width: 31%;
    background: linear-gradient(90deg, rgba(0, 85, 255, 0) 0%, rgb(3 141 145) 50%, rgba(0, 85, 255, 0) 100%);
    opacity: 1;
    z-index: 1;
}

.intro_image:before {
    content: "";
    /* Adjust shadow position */
    background-color: rgb(3 141 145);
    border-radius: 100%;
    filter: blur(40px);
    opacity: 1;
    transform: none;
    bottom: 8px;
    flex: none;
    height: 53px;
    left: calc(50.00000000000002% - 285px / 2);
    position: absolute;
    width: 285px;
    animation: pulse 3.5s infinite ease-in-out;
    z-index: -2;
}

.-home-section-item.aboutus {
    position: relative;
    background: transparent;
}

div#aboutus {
    /* z-index: -26; */
}

span.check-after i {
    display: flex;
    font-size: 22px;
    /* Adjust size */
    color: var(--uicolor);
    /* Make check icon white */
    background-color: #fff;
    /* Red background */
    border-radius: 50%;
    /* Make it circular */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    --we: 10px;
    width: var(--we);
    /* Set width */
    height: var(--we);
    /* Set height */
}

.about_lists-title P {
    margin-bottom: 0;
}

span.check-after {
    display: flex;
}

.-widget-after-intro-h1>span:last-child {
    color: #FFf;
}

.-widget-after-intro-h4:after {
    content: '';
    top: 0;
    flex: none;
    height: 1px;
    left: calc(30% - 31.496062992125985% / 2);
    position: absolute;
    width: 71%;
    background: linear-gradient(90deg, rgba(0, 85, 255, 0) 0%, rgb(3 141 145) 50%, rgba(0, 85, 255, 0) 100%);
}

span.--circle-before {
    --we: 6px;
    width: var(--we);
    height: var(--we);
    background: #fff;
    border-radius: 50%;
}

.-after__intro-container>.-pp-content:after {
    content: '';
    background: linear-gradient(90.00000000000075deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .15000000596046448) 50%, rgba(255, 255, 255, 0) 100%);
    flex: none;
    height: 1px;
    width: 230px;
    position: absolute;
    bottom: 0;
    left: 0;
}

span.-equal-space {
    background: linear-gradient(90.00000000000075deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .15000000596046448) 50%, rgba(255, 255, 255, 0) 100%);
    flex: none;
    height: 1px;
    position: relative;
    width: 40px;
    transform: rotate(90deg);
}

.rating-after {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px;
}

.rating-after i {
    font-size: 14px !important;
}

.short-after-des {
    color: var(--second-text-color);
    font-size: 16px;
    font-weight: 600;
}

.title-and-description {
    display: flex;
    margin: 0 auto;
    max-width: 1474px;
    align-items: flex-end;
    margin-bottom: 50px;
    justify-content: space-between;
}

.svg-title-in svg {
    display: flex;
    transform: rotateY(180deg);
}

.-YC--main--wep-title- {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.--title-content {
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.-widget-after-intro-h1.value {
    align-items: center;
    margin-bottom: 0px;
    color: #fff;
}

p.--value-title {
    color: var(--second-text-color);
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 0;
}

span.icon-in-after {
    position: absolute;
    transform: rotate(315deg);
    font-size: 25px;
    opacity: 0.4;
    right: 10%;
    top: 9%;
    transition: var(--transition-time);
}

span.icon-in-after i {
    font-weight: 100;
}

span.shadwo {
    width: 61%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 100%);
    height: 1px;
    margin: 20px 0;
}

.--mostklon:hover span.icon-in-after {
    opacity: 1;
}

.--mostklon:after {
    content: '';
    top: 0;
    flex: none;
    height: 1px;
    left: calc(50.00000000000002% - 44.496063% / 2);
    position: absolute;
    width: 45%;
    background: linear-gradient(90deg, rgba(0, 85, 255, 0) 0%, rgb(19 189 175) 50%, rgba(0, 85, 255, 0) 100%);
    opacity: 1;
    z-index: 1;
    transition: var(--transition-time);
}

.--mostklon:hover:after {
    width: 65%;
    left: calc(40% - 44.496063% / 2);
}



--mostklon:nth-child(6) .--val-icon {
    background: linear-gradient(45deg, #4943b3, #9691f8);
}

.--mostklon:nth-child(6) .--val-icon {
    background: linear-gradient(357deg, #4943b3, #9691f8);
}

.-stages.-after__intro-image {
    margin-inline-start: 85px;
    margin-inline-end: 0;
}

.all-stage-content {
    position: relative;
    border-radius: var(--largeradius);
    overflow: hidden;
    border: var(--border);
    margin-bottom: 25px;
}

.all-stage-contenter {
    position: relative;
    border-radius: var(--largeradius);
    overflow: hidden;
    border: var(--border);
    margin-bottom: 25px;
}

.--image-backf-one {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    z-index: -1;
    transform: rotateY(180deg);
}

.steps-stage {
    padding: 35px;
    position: relative;
    z-index: 1;
    background: linear-gradient(329deg, #06cdd212, transparent);
}

.--val-icon.stage {
    background: linear-gradient(0.07383128568086761deg, var(--token-f5219c3a-5ee2-4639-9e23-4bdcf5509ebd, rgb(0 85 255 / 0%))
        /* {"name":"Blue 15%"} */
        0%, var(--token-b456af2e-fd88-41ae-8686-ad7692875dfd, rgba(97, 97, 97, 0.09))
        /* {"name":"Grey 9%"} */
        100%);
    border-radius: var(--miniradius);
    box-shadow: rgb(3 141 145 / 73%) 0px 5px 25px 0px, rgba(255, 255, 255, 0.08) 0px 10px 10px -1px inset;
    margin-bottom: 0;
}

.stage-step p {
    margin-bottom: 0;
}

.-stage-icon {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.stage-step {
    height: fit-content;
    margin-bottom: 0;
    font-size: 16px;
    color: #dbdbdb;
    text-align: start;
    gap: 6px;
}

h3.--value-title {
    font-size: 25px;
}

span.shadwo-stage {
    height: 1px;
    position: relative;
    width: 100%;
}

.-stage--content.--value-des {
    font-size: 16px;
    color: #a1a4b0;
    font-weight: 500;
    line-height: 1.5;
    text-align: start;
    margin-bottom: 0;
}

.shadwo-stage {
    width: 61%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 100%);
    height: 1px;
    margin: 20px 0;
}

.stage-step span {
    font-size: 14px;
}

.stage-step-in {
    margin-top: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

span.stage-steps {
    font-size: 16px;
    font-weight: 300;
    background: linear-gradient(351deg, rgb(1 26 27) 0%, rgb(71 71 71 / 20%) 100%);
    position: relative;
    gap: 10px;
    color: #dbdbdb;
    line-height: 1.5;
    max-width: fit-content;
    border: var(--border);
    border-top: 2px solid rgb(30 207 212);
    border-radius: 0 0 10px 10px;
    border-radius: 1;
    padding: 7px 15px;
    display: flex;
    align-items: center;
}

.-stages.-pp-content:after {
    width: 370px;
}

.--merge-in {
    max-width: 1430px;
    min-width: 100px;
    margin: 0 auto;
    position: relative;
}

.-home-section-item.category {
    padding-top: 106px;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0.7;
    }
}

.--merge-in:after {
    content: '';
    -webkit-filter: blur(60px);
    background-color: var(--uicolor);
    border-radius: 35%;
    bottom: 19px;
    filter: blur(60px);
    flex: none;
    height: 66px;
    left: calc(13.875%);
    position: absolute;
    width: 74%;
    z-index: 0;
    animation: pulse 3.5s infinite ease-in-out;
}

.--merge-in svg {
    z-index: 1;
    position: relative;
}

.--merge-in svg>rect:nth-child(3) {
    fill: #000403;
    height: 34px;
}

.--merge-in svg path {
    fill: #000403;
}

.--merge-in svg paht {}


.-home-section-item.category .-container {
    padding-top: 30px;
    background: #000403;
    z-index: 3;
    position: relative;
}

.-container.on.animate-in {
    transform: translate(0) !important;
}

.-flex-faq-in {
    display: flex;
    justify-content: space-between;
    gap: 25px;
}

.-YC-FaqsSimple-Center-v1 {
    display: block;
    position: relative;
    z-index: 1;
    text-align: start;
    flex: 1;
}

.-flex-faq-in .-YC--main--wep-title- {
    align-items: start;
}

.-flex-faq-in .-defult-widgets-title-style-1 {
    min-width: 100%;
}

.-home-section-item.faq:after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-top: 1px solid transparent;
    border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.02) 100%);
    border-image-slice: 1;
    border-radius: 12px;
    width: 50%;
}

.-features-in {
    display: flex;
    flex-direction: column;
    gap: 27px;
    margin-top: 25px;
    margin-inline-start: 5px;
}

c-num {
    font-size: 15px;
    font-weight: 900;
    font-family: 'Cairo', sans-serif;
}

.-service.--val-icon.stage {
    border: 1px solid rgb(0 85 254 / 23%);
}

.--back-shadwo-in {
    backdrop-filter: blur(20px);
    border-radius: 20px;
    opacity: 1;
    flex: none;
    height: 100%;
    left: calc(50.08517887563886% - 100% / 2);
    overflow: hidden;
    position: absolute;
    top: calc(50.069735006973524% - 100% / 2);
    width: 100%;
    z-index: -1;
}

.-service.-pp-content {
    font-size: 16px;
    line-height: 1.5;
    color: var(--second-text-color);
    font-weight: 400;
    margin-bottom: 35px;
    padding-bottom: 35px;
    position: relative;
}

.-service.stage-step-in {
    margin-top: 30px;
}

.price-number {
    display: flex;
    gap: 20px;
    align-items: center;
}

.price-before-sale {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: flex-end;
}

span.package-price-in {
    font-size: 53px;
    font-weight: 400;
    font-family: 'Cairo', sans-serif;
}

span.price-usd {
    font-size: 20px;
    color: var(--secondarytext);
    margin-bottom: 10px;
    font-weight: 500;
}

.after-sale {
    font-size: 53px;
    font-weight: 400;
    color: #adafbc8f;
    font-family: 'Cairo', sans-serif;
}

.after-sale:after {
    content: '';
}

.after-sale:after {
    content: '';
    width: 100%;
    position: absolute;
    height: 1px;
    background: var(--uicolor);
    right: -13px;
    transform: rotate(18deg);
    top: 50%;
}

.price-after-sale {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 5px;
}

.btn-ket_1.price {
    margin-top: 44px;
    /* max-width: fit-content; */
    padding: 10px 135px;
    font-weight: 600;
    justify-content: center;
}

.price.-after__intro-image {
    margin-inline-start: 70px;
    margin-inline-end: 0;
}

.-home-section-item.price:after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-top: 1px solid transparent;
    border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.02) 100%);
    border-image-slice: 1;
    border-radius: 12px;
    width: 50%;
}

.--paner-content .-defult-widgets-title-style-1 {
    width: 100%;
    position: relative;
    justify-content: center;
    top: 0;
    padding-bottom: 0;
    padding-block: 55px;
}

.--paner-content .video-in {
    transform: rotateY(180deg);
}


.--paner-content .-widget-after-intro-h1 {
    max-width: 704px;
}

.--paner-content .P-content {
    max-width: 500px;
}

.-home-section-item.paner {
    padding-top: 0;
}

.background-footer-image {
    width: 100%;
    background-repeat: no-repeat;
    height: 100%;
    background-position: center center;
    position: absolute;
    top: 0;
    background-size: cover;
    right: 0;
    z-index: -1;
}

.background-footer-image:after {
    content: '';
    backdrop-filter: blur(64px);
    opacity: 1;
    flex: none;
    height: 100%;
    left: calc(50.00000000000002% - 100% / 2);
    overflow: hidden;
    position: absolute;
    top: calc(50.10482180293503% - 100% / 2);
    width: 100%;
    z-index: 0;
}

footer.-waqf-footer .-container .-waqf-footer-body:after {
    content: '';
    border-top: 1px solid transparent;
    border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.02) 100%);
    border-image-slice: 1;
    border-radius: 12px;
    width: 100%;
    position: absolute;
    bottom: 0;
}


.--sub-in {
    display: flex;
}

.--sub-in input {
    margin-inline-end: 10px;
    border-radius: var(--miniradius);
}

.--sub-in {
    padding: 7px;
    border: var(--border);
    max-width: fit-content;
    border-radius: 19px;
    margin-bottom: 7px;
}

.--sub-in .btn-ket_1 {
    padding: 4px 14px;
    font-size: 15px;
    font-weight: 600;
}

.--sub-in input:focus {}

.--footer-contact-us .video-container {
    height: fit-content;
    min-width: fit-content;
    max-width: fit-content;
    height: 180px;
    margin-bottom: 0;
}

.-service.INNER.stage-step.-widget-after-intro-h4 {
    margin-bottom: 15px;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    padding: 7px 14px;
}

.-page-intro-video-in {
    position: absolute;
    width: 100%;
    height: 100vh;
    z-index: -1;
}

.-page-intro-video-in:after {
    content: '';
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
    flex: 1 0 0px;
    height: 180px;
    mask: linear-gradient(360deg, #000000 0%, rgba(0, 0, 0, .5) 100%) add;
    overflow: visible;
    z-index: 0;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.-pages-root .video-in {
    transform: rotateY(180deg);
}

.--pages-content-in {
    display: flex;
    padding-bottom: 80px;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.-page-container-body {
    display: flex;
}


.contact-form-after-border {
    max-width: 100%;
    width: 100%;
}

.contact-form-after-border {
    padding: 40px 40px 30px;
    border: var(--border);
    border-radius: 23px;
    height: 100%;
}

.--inouts-flex>[labelkit] {
    display: flex;
    flex-direction: column;
    width: 50%;
}

.--inouts-flex {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
}

.--inouts-flex>label>input {
    width: 100%;
}

.--inouts-flex select {
    width: 100%;
}

.social-feature {
    border: var(--border);
    border-radius: 21px;
    padding: 23px;
}

.--feature-content:after {
    content: '';
    width: 100%;
    height: 1px;
    position: absolute;
    background: linear-gradient(270deg, var(--token-4ba9d2af-bbc9-422d-912b-c0d857289d96, rgba(255, 255, 255, 0)) 0%, var(--token-4ef09f89-9c35-4972-a9c1-8efc95820553, rgba(255, 255, 255, .2)) 50%, var(--token-4ba9d2af-bbc9-422d-912b-c0d857289d96, rgba(255, 255, 255, 0)) 100%);
    bottom: 47%;
    right: 0;
    transform: translateY(70%);
}

.--social-content:hover {
    color: var(--uicolor);
    transition: var(--transtion-time);
}

.page-contact {
    padding-bottom: 100px;
}

.-form-submit .btn-ket_1 {
    width: 100%;
    justify-content: center;
}

.-form-submit.--Parent-URL-BTN {
    cursor: pointer;
}

.svg-title-in svg {
    width: 100%;
    max-width: 470px;
    height: auto;
}

@media (max-width: 768px) {
    .svg-title-in svg {
        max-width: 300px;
    }
}

@media (max-width: 480px) {
    .svg-title-in svg {
        max-width: 200px;
    }
}

.svg-title-out svg {
    width: 100%;
    max-width: 470px;
    height: auto;
}

@media (max-width: 768px) {
    .svg-title-out svg {
        max-width: 482px;
        /* تصغير الحجم في الشاشات الصغيرة */
    }
}

@media (max-width: 480px) {
    .svg-title-out svg {
        max-width: 200px;
    }
}

.-blog-gridboxes-item-thumb {
    padding-top: 70%;
    background-image: var(--background-image);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 20px;
    transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out, filter 0.6s ease-in-out;
    opacity: 0.9;
    position: relative;
    overflow: hidden;
}

.-blog-gridboxes-item-thumb::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
    transition: opacity 0.6s ease-in-out;
    opacity: 0;
    border-radius: 20px;
}

.--port-all-in:hover .-blog-gridboxes-item-thumb {
    transform: scale(1.1);
    opacity: 1;
}

.--port-all-in:hover .-blog-gridboxes-item-thumb {
    opacity: 1;
}

.portfilio-content-all-in {
    display: grid;
    flex: none;
    gap: 20px;
    grid-auto-rows: minmax(0, 1fr);
    grid-template-columns: repeat(2, minmax(50px, 1fr));
    height: min-content;
    justify-content: center;
    padding: 0;
    position: relative;
    width: 100%;
}

.--port-all-in {
    padding: 10px;
    position: relative;
    border: var(--border);
    border-radius: var(--largeradius);
    background: linear-gradient(1deg, #19bcae1a, transparent);
    overflow: hidden;
}

.-port-title-year {
    position: absolute;
    bottom: 4%;
    width: 94%;
    right: 3%;
    background: radial-gradient(43% 50% at 50% 50%, rgba(9, 9, 18, 0.15) 0%, rgb(9, 9, 18) 100%);
    box-shadow: rgb(0 255 219 / 10%) 0px 10px 10px -1px inset;
    background-color: rgb(0, 14, 43);
    color: #fff;
    font-size: 18px;
    flex: 1 0 0px;
    display: flex;
    padding: 17px;
    border-radius: 12px;
    backdrop-filter: blur(2px);
    border: 1px solid rgb(5 49 56);
}

.-port-category {
    position: absolute;
    top: -12%;
    right: calc(19% - 31.496062992125985% / 2);
}

.-port-package {
    overflow: hidden;
    border-radius: 20px;
}

.-port-category {
    font-size: 17px;
    font-weight: 300;
    margin-bottom: 15px;
    gap: 10px;
    color: #fff;
    max-width: fit-content;
    border: var(--border);
    transition: all 500ms ease-in-out;
    border-radius: var(--miniradius);
    padding: 5px 13px;
    display: flex;
    background: radial-gradient(50% 50% at 50% 50%, rgb(2 24 80 / 98%) 0%, rgb(9, 9, 18) 100%);
    align-items: center;
}

.-port-category:after {
    content: '';
    top: 0;
    flex: none;
    height: 1px;
    left: calc(30% - 31.496062992125985% / 2);
    position: absolute;
    width: 71%;
    background: linear-gradient(90deg, rgba(0, 85, 255, 0) 0%, rgb(26 253 233) 50%, rgba(0, 85, 255, 0) 100%);
}

.--port-all-in:hover .--port-all-in {
    top: 0;
}

.--port-all-in:hover .-port-category {
    top: 5%;
}

.-port-package a {
    overflow: hidden;
}

.-blog-gridboxes {
    padding-bottom: 100px;
    padding-top: 100px;
}


.-title-post .--pages-content-in {
    align-items: CENTER;
    max-width: 100%;
}

.--post-card {
    min-width: 443px;
    padding: 35px;
    background: rgb(0 85 254 / 11%);
    border-radius: var(--largeradius);
    border: var(--border);
    backdrop-filter: blur(62px);
    margin-inline-start: 40px;
}

.-blog-title-in {
    margin-bottom: 30px;
    text-align: start;
    color: var(--second-text-color);
    font-size: 16px;
    line-height: 1.6;
}

.--pages-content-in .--before-title-intro {
    margin-bottom: 15px;
}

.--post-image-in {
    padding: 10px;
    background: var(--back-image);
    border-radius: var(--largeradius);
    border: var(--border);
}

.-intro-descrption p {
    color: var(--second-text-color);
}

.card_service.last-child {
    margin-bottom: 10px;
}

.card_service h4 {
    font-size: 19px;
}

.OD-partner.-after_intro--img-point- {}

.OD-partner.container--intro--items {
    gap: 80px;
    justify-content: space-between;
    padding-top: 100px;
    padding-bottom: 100px;
    position: relative;
}

.OD-partner.container--intro--items.banner {
    display: flex;
    flex-direction: column;
}

.OD-partner.container--intro--items:nth-child(even) {
    display: flex;
    flex-direction: column;
    gap: 66px;
    align-items: flex-end;
}

.OD-partner.-after__intro-image {
    margin: 0;
}

.OD-partner.-after__intro-container>.-pp-content {
    padding: 0;
    margin: 0;
    line-height: 1.7;
    font-weight: 500;
    font-size: 19px;
    text-align: start;
}

.OD-partner.-after__intro-container>.-pp-content p {
    color: var(--second-text-color);
    text-align: start;
}

.-pp-content {}


.OD-partner.-after__intro-container>.-pp-content:after {
    display: none;
}


.--pages-content-in:after {
    content: '';
    background: linear-gradient(90.00000000000075deg, var(--token-73242b55-57d1-4320-8897-28085a430c83, rgba(255, 255, 255, 0.02))
        /* {"name":"White 2%"} */
        0%, var(--token-d86f1591-0c16-44cd-be10-19334dfa9293, rgba(255, 255, 255, 0.1))
        /* {"name":"White 10%"} */
        50%, var(--token-73242b55-57d1-4320-8897-28085a430c83, rgba(255, 255, 255, 0.02))
        /* {"name":"White 2%"} */
        100%);
    position: absolute;
    bottom: 0;
    height: 1px;
    width: 100%;
}

.OD-partner.container--intro--items:after {
    content: '';
    background: linear-gradient(90.00000000000075deg, var(--token-73242b55-57d1-4320-8897-28085a430c83, rgba(255, 255, 255, 0.02))
        /* {"name":"White 2%"} */
        0%, var(--token-d86f1591-0c16-44cd-be10-19334dfa9293, rgba(255, 255, 255, 0.1))
        /* {"name":"White 10%"} */
        50%, var(--token-73242b55-57d1-4320-8897-28085a430c83, rgba(255, 255, 255, 0.02))
        /* {"name":"White 2%"} */
        100%);
    position: absolute;
    bottom: 0;
    height: 1px;
    width: 100%;
}

input#phone {
    text-align: start;
}

.alert-if-not-log {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding: 15px;
    border: var(--border);
    border-radius: var(--miniradius);
    background: linear-gradient(180deg, #ff00000f, transparent);
}

.alert-if-not-log i {
    --we: 40px;
    width: var(--we);
    height: var(--we);
    display: flex;
    align-items: center;
    color: red;
    font-size: 18px;
    background: #fff;
    justify-content: center;
    border-radius: 50%;
    /* background: #1b1b1b; */
}

.alert-if-not-log strong {
    margin-bottom: 0 !important;
}

.success-massege {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px 36px;
    border: var(--border);
    border-radius: var(--miniradius);
    background: linear-gradient(180deg, #159d211a, transparent);
}

.success-massege i {
    --we: 51px;
    width: var(--we);
    height: var(--we);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: green;
    font-size: 24px;
    border-radius: 50%;
}

.success-massege strong {
    font-size: 17px;
}

.partner-register-area {
    padding-bottom: 70px;
}

a.main-odow-btn {
    background-color: #ffffff24;
    transition: opacity 350ms ease-in-out;
    padding: 10px 30px;
    border-radius: var(--largeradius);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: inline-block;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}

a.main-odow-btn:hover {
    opacity: 0.9;
    transform: translateY(0px);
}

.-video-img img {
    object-fit: cover;
}

.shrouut {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
}

.shrouut strong {
    margin-bottom: 0 !important;
    font-size: 14px !important;

}

.shrouut a {
    color: #cdcdcd;
}

.shrouut a:hover {}

.shrouut a:hover {
    text-decoration: underline;
}

.checkbox-in>label {
    display: flex;
    align-items: center;
    gap: 13px;
    color: #c8c8c8;
}

form#odow-counsltaion-form .--inouts-flex>[labelkit] {
    width: 100%;
}

form#odow-counsltaion-form .--inouts-flex>label>strong {}

.checkbox-in {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 11px;
}

.checkbox-in [inputkit] {
    min-height: inherit;
    align-self: inherit;
}



form#odow-counsltaion-form strong {
    font-size: 16px;
    margin-bottom: 10px;
}

form#odow-counsltaion-form .couns .checkbox-in>label {
    margin-bottom: 0;
}

form#odow-counsltaion-form .couns .checkbox-in>label>span {
    opacity: 0.7;
    flex: 1;
    font-size: 15px;
}

form#odow-counsltaion-form .couns .checkbox-in>label>input:checked+span {
    opacity: 1;
}

div#social-links-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 30px;
}

div#social-links-container label {
    display: flex;
    flex-direction: column;
}

div#branding-files-container label {
    display: flex;
    flex-direction: column;
    width: 100%;
}

div#branding-files-container label input {
    width: 100%;
}

input#file-upload-button {
    background: transparent;
    color: red;
}

div#branding-files-container {
    margin-bottom: 25px;
}

div#social-links-container input {
    width: 100%;
}

div#form-messages\ counsltation {
    margin-bottom: 10px;
}

.couns {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
    margin-inline: -40px;
}

.couns .--inouts-flex {
    margin-bottom: 0;
    flex: 1;
    border: 0.5px solid #212020;
    margin: -0.5px;
    padding: 30px;
    flex: 1;
    min-width: 400px;
}

marquee.-raly-logos-marquee span {
    filter: grayscale(100%);
    transition: 0.5s;
}

.-pages-intro-body.client-page {
    padding-bottom: 100px;
}

.-pages-intro-body.client-page .container--intro--items {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.-pages-intro-body.client-page .-after__intro-image {
    position: relative;
    top: 0;
    width: 100%;
}

.-pages-intro-body.client-page .-after_intro--img-point- {
    width: 100%;
    max-width: 100%;
}

.-pages-intro-body.client-page .-after__intro-container {
    max-width: 100%;
    width: 100%;
}

.-pages-intro-body.client-page h1.-widget-after-intro-h1 {
    max-width: 100%;
}

.--intro-slider-content {
    width: 100%;
    border-radius: var(--largeradius);
    overflow: hidden;
    padding-block: 80px;
    padding-top: 140px;
}

.--intro-slider-content {
    padding-bottom: 60px;
}

.-video-margin-im {
    position: absolute;
    right: 51px;
    top: 149px;
    transform: rotate(17.215deg) rotateX(-20deg) rotateY(34.43deg);
    animation: softTilt 15s infinite ease-in-out;
    transform-style: preserve-3d;
}

.shape-intro.sh1 {
    -webkit-filter: blur(150px);
    background-color: var(--token-0830ac1f-eb0a-4190-b454-0dd294ae3134, #6adedf);
    border-radius: 100%;
    bottom: -156px;
    filter: blur(150px);
    flex: none;
    height: 752px;
    opacity: .4;
    position: absolute;
    right: -508px;
    z-index: -1;
    width: 752px;
    z-index: -1;
}

.shape-intro.sh2 {
    -webkit-filter: blur(150px);
    background-color: var(--token-0830ac1f-eb0a-4190-b454-0dd294ae3134, #58faff);
    border-radius: 100%;
    filter: blur(150px);
    flex: none;
    height: 586px;
    position: absolute;
    right: -425px;
    top: -150px;
    width: 586px;
    z-index: 0;
}

.shape-intro.sh3 {
    -webkit-filter: blur(150px);
    background-color: rgb(71 198 201);
    border-radius: 100%;
    top: -538px;
    filter: blur(112px);
    flex: none;
    height: 621px;
    left: 496px;
    opacity: .6;
    position: absolute;
    width: 662px;
    z-index: 1;
}

.our-misson-vision {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1000px;
    gap: 50px;
    margin-inline: auto;
    position: relative;
    margin-top: 90px;
    transform: translate(0px, 0px) !important;
    opacity: 1 !important;
    border-radius: 20px;
}

.-mission-vision-item {
    display: flex;
    align-items: center;
    flex-direction: column;
    flex: 1;
    padding: 40px;
    border-top: 1px solid #1ecfd4;
    border-radius: 20px;
    background: #06cdd212;
}

.-mission-vision-icon {
    font-size: 40px;
    color: #1ecfd4;
    width: 80px;
    height: 80px;
    border: 2px solid #1ecfd4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    margin-inline: auto;
    margin-top: -80px;
    box-shadow: 0 0 0 14px #000f0f;
    background: #000f0f;
}

.-mission-vision-content {
    text-align: center;
}

.-mission-vision-content>.-mission-vision-title {
    font-weight: 600;
    font-size: 31px;
    margin-bottom: 9px;
}

.-mission-vision-content>.-mission-vision-description {
    margin-bottom: 0;
    color: var(--second-text-color);
    font-size: 16px;
}

.intro-title-des {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

c--color {
    position: relative;
    display: inline-block;
    color: white;
    font-weight: 800;
    letter-spacing: 0;
}

c--color:after {
    content: '';
    position: absolute;
    top: 100%;
    margin-top: -18px;
    right: -16px;
    left: 5px;
    height: 54px;
    background: transparent;
    z-index: -1;
    border-radius: 370px / 50px;
    border-top: 3px solid #1afde9;
    rotate: -1deg;
}

c--color>em {
    display: inline-flex;
    vertical-align: 0px;
    align-items: center;
    justify-content: center;
    position: relative;
}

c--color>em>img {
    width: 3.8rem;
}

.svg-title-out rect {
    fill: #000403;
}

.svg-title-in rect {
    fill: #000403;
}

.--Parent-URL-BTN {
    min-width: 147px;
}

.--Parent-URL-BTN.tech-edge {
    max-width: fit-content;
    display: flex;
    transform: translate(0px, 0px) !important;
    opacity: 1 !important;
}

.--Parent-URL-BTN.tech-edge a {
    min-width: 268px;
    justify-content: center;
}

.--Parent-URL-BTN.-kyojin {}

.--team-Center-area {
    display: flex;
    gap: 25px;
    flex-wrap: wrap
}

.-team-seats {
    min-width: 287px;
    flex: 1;
    position: relative;
    border: var(--border);
    padding: 10px;
    max-width: 322px;
    min-width: 228px;
    background: linear-gradient(0deg, rgb(38 249 255 / 15%), rgba(0, 85, 255, 0.08), rgba(153, 153, 153, 0.1), rgba(153, 153, 153, 0.1));
    box-shadow: var(--shadow-elevated-hover);
    border-radius: var(--largeradius)
}

.--member-img {
    padding-top: 103%;
    background-image: var(--bg-intro);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: var(--miniradius);
    margin-bottom: 19px;
    opacity: 1;
    position: relative;
}

.--share-icon {
    position: absolute;
    top: 40%;
    right: 3%;
    font-size: 17px;
    display: flex;
    gap: 13px;
    border: var(--border);
    background: linear-gradient(0deg, rgb(38 249 255 / 15%), rgb(7 60 64), rgba(153, 153, 153, 0.1), rgba(153, 153, 153, 0.1));
    flex-direction: column;
    padding: 13px;
    border-radius: var(--largeradius)
}

.--share-icon a {
    transition: var(--transition-time);
    color: #fff;
}

.--share-icon a:hover {
    transform: translateY(-3px)
}

p.jop-title {
    font-size: 15px;
    color: var(--second-text-color)
}

h5.member-name {
    font-size: 19px;
    color: #fff;
    margin-bottom: 5px;
}

.--our-value-content-in:hover {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg)
}

.member-content {
    padding: 4px 15px;
}

.tech_page {
    padding-block: 55px;
    text-align: center;
    display: flex;
}

.container--intro--items.services_page {
    display: flex;
    flex-direction: column;
    padding-block: 100px;
}

.container--intro--items.services_page .-after__intro-container>.-pp-content {
    padding-bottom: 10px;
}

.container--intro--items.services_page .intro_image {
    margin-bottom: 48px;
}

.-container.paner {
    padding-bottom: 80px;
}

/* Contact Form Styles */
#form-messages {
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 5px;
    display: none;
}

#form-messages.success {
    background-color: #d4edda;
    color: #fff;
    display: block;
    box-shadow: rgb(6 52 51) 0px 8px 40px 0px, rgba(255, 255, 255, 0) 0px 0px 10px 1px inset, rgba(0, 85, 255, 0.12) 0px 0px 0px 1px;
    background: var(--btn-back-color);
}

#form-messages.error {
    background-color: #7a000b;
    border: 1px solid #6d000c;
    color: #721c24;
    display: block;
}

#form-messages p {
    margin: 0;
    line-height: 1.4;
    opacity: 1;
    transform: translateY(0px);
}

.error-field {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

#submit-btn.loading {
    opacity: 0.7;
    cursor: not-allowed;
}

#submit-btn.loading span {
    position: relative;
}

#submit-btn.loading span:after {
    content: '';
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: translateY(-50%) rotate(0deg);
    }

    100% {
        transform: translateY(-50%) rotate(360deg);
    }
}