:where([class^="ri-"])::before { content: "\f3c2"; }
@font-face {
    font-family: 'Fsalbert Bold';
    src: url(../../assets/fonts/FSAlbertArabic-Bold.otf);
    font-display: swap;
}

@font-face {
    font-family: FSAlbert;
    src: url(../../public_html/assets/fonts/FSAlbertArabic.otf);   
    font-display: swap;
}

@font-face {
    font-family: 'FSAlbert Light';
    src: url(../../public_html/assets/fonts/FSAlbertArabic-Light.otf);
    font-display: swap;
}

        body {
           
            font-family:'Fsalbert Bold';
            color: #333333;
        }
        h1, h2, h3, h4, h5, h6 {
            font-family:'Fsalbert Bold';
            
        }
p{
     font-family:'Fsalbert Bold';
}
.bg-white{
     background: #f4f2e5  url(../../assets/images/site_bg.png) top center repeat !important;
     background-attachment: fixed !important;
}
.qualifications{
      background: #eee  url(../../assets/images/qualifications.jpg) top center repeat !important;
     background-attachment: fixed !important;
}
.qualifications h3{
    color: #fff;
}
.qualifications .font-medium{
    color: #fff;
}
.qualifications p{
    color: #fff;
}
.bg-white1 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
}

    .min-h-screen {
    min-height: 50vh !important;

}
.hero-section {
background-image: url('../../assets/images/banner1.jpg');
background-size: cover;
background-position: right center;
}

 .hero-overlay {
    background: linear-gradient(90deg, rgb(255 255 255) 0%, rgb(255 255 255 / 23%) 50%, rgb(255 255 255 / 0%) 70%, rgb(255 255 255 / 0%) 100%);

}
b, strong {
    font-weight: bolder;
    color: #008aad !important;
}

       .sticky-container {
    padding: 0px;
    margin: 0px;
    position: fixed;
    right: -119px;   
    top: 200px;
    width: 165px;
    z-index: 999;
}
.sticky li {
    list-style-type: none;
    background-color: #008aad;
    color: #008aad;
    height: 43px;
    padding: 0px;
    margin: 0px 0px 1px 0px;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
    border-radius: 5px;
    cursor: pointer;
    /* filter: url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix'values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale); */
}
.sticky li img {
    float: left;
    margin: 5px 5px;
    margin-right: 10px;
}
.sticky li p {
    float: left;
    padding: 0px;
    margin: 0px;
    text-transform: uppercase;
    line-height: 43px;
    color: #fff;
    font-size: 12px;
} 
.sticky li:hover {
    margin-left: -115px;
}
     
.bg-white{
        background-color: rgb(238 252 255);
}
.mt-10{
    margin-top: 4rem;
}
.mt-new{
    margin-top: 65px;
}
.bg-primary-view {
    --tw-bg-opacity: 1;
    background-color: rgb(44 73 100) !important;
}
.timeline-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 17px;
    top: 30px;
    bottom: -30px;
    width: 2px;
    background-color: #e5e7eb;
}
        .credentials {
            font-family: 'Fsalbert Bold';
        }
        .dropdown {
            position: relative;
            display: inline-block;
        }
        .dropdown-content {
            display: none;
            position: absolute;
            min-width: 200px;
            z-index: 50;
            top: 100%;
            left: 0;
        }
        .dropdown:hover .dropdown-content {
            display: block;
        }
        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        input[type="number"] {
            -moz-appearance: textfield;
        }
        .custom-checkbox {
            position: relative;
            padding-left: 30px;
            cursor: pointer;
            user-select: none;
        }
        .custom-checkbox input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }
        .checkmark {
            position: absolute;
            top: 0;
            left: 0;
            height: 20px;
            width: 20px;
            background-color: #fff;
            border: 2px solid #2C4964;
            border-radius: 4px;
        }
        .custom-checkbox input:checked ~ .checkmark {
            background-color: #2C4964;
        }
        .checkmark:after {
            content: "";
            position: absolute;
            display: none;
        }
        .custom-checkbox input:checked ~ .checkmark:after {
            display: block;
        }
        .custom-checkbox .checkmark:after {
            left: 6px;
            top: 2px;
            width: 5px;
            height: 10px;
            border: solid white;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }
        .custom-switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
        }
        .custom-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 34px;
        }
        .slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        input:checked + .slider {
            background-color: #2C4964;
        }
        input:checked + .slider:before {
            transform: translateX(26px);
        }
        .testimonial-slider {
            overflow: hidden;
            position: relative;
        }

        .testimonial-track {
            display: flex;
            transition: transform 0.5s ease;
        }
        .testimonial-slide {
            flex: 0 0 100%;
        }
        @media (min-width: 768px) {
            .testimonial-slide {
                flex: 0 0 50%;
            }
        }
        @media (min-width: 1024px) {
            .testimonial-slide {
                flex: 0 0 33.333%;
            }
        }