@charset "UTF-8";

/* Font */
@import "../font/baloobhaijaan2/v19/font-face.css";
/* 'Baloo Bhaijaan 2' */
@import "../font/ibmplexsansarabic/v12/font-face.css";
/* 'IBM Plex Sans Arabic' */
@import "../font/lalezar/v14/font-face.css";
/* 'Lalezar' */
@import "../font/notonaskharabic/v33/font-face.css";
/* 'Noto Naskh Arabic' */
@import "../font/notosansarabic/v18/font-face.css";
/* 'Noto Sans Arabic' */
@import "../font/roboto/v30/font-face.css";
/* 'Roboto' */
@import "../font/robotomono/v23/font-face.css";
/* 'Roboto Mono' */
@import "../font/ubuntu/v20/font-face.css";
/* 'Ubuntu' */
@import "../font/ubuntumono/v17/font-face.css";
/* 'Ubuntu Mono' */
@import "../font/vazirmatn/v13/font-face.css";
/* 'Vazirmatn' */
@import "../font/iranian-sans/19710/font-face.css";
/* 'iranian sans' */
@import "../font/iran-yekan/61728/font-face.css";
/* 'iranyekan' */

/* Icon */
@import "../font/font-awesome/v6.4.2/font-face.css";
@import "../font/bootstrap-icons/v1.11.1/font-face.css";

/* Font-Awesome */
@import "font-awesome-6.4.2.css";

/* Bootstrap */
/* @import "bootstrap-5.3.2.min.css"; */
@import "bootstrap-5.3.2.rtl.min.css";
@import "bootstrap-icons-1.11.1.min.css";

/* ********** ********** ********** */

html,
body {
    height: 100% !important;
    width: 100% !important;
    padding: 0px !important;
    margin: 0px !important;
}

/* ********** ********** ********** */

* {
    font-family: "iranyekan", "Vazirmatn", "Noto Sans Arabic";
}

.cm-font-baloobhaijaan2 {
    font-family: "Baloo Bhaijaan 2";
}

.cm-font-ibmplexsansarabic {
    font-family: "IBM Plex Sans Arabic";
}

.cm-font-lalezar {
    font-family: "Lalezar";
}

.cm-font-notonaskharabic {
    font-family: "Noto Naskh Arabic";
}

.cm-font-notosansarabic {
    font-family: "Noto Sans Arabic";
}

.cm-font-roboto {
    font-family: "Roboto";
}

.cm-font-robotomono {
    font-family: "Roboto Mono";
}

.cm-font-ubuntu {
    font-family: "Ubuntu";
}

.cm-font-ubuntumono {
    font-family: "Ubuntu Mono";
}

.cm-font-vazirmatn {
    font-family: "Vazirmatn";
}

/* ********** ********** ********** */

.cm-text-justify {
    text-align: justify !important;
}

.cm-link-default {
    color: rgb(255, 255, 255);
}

.cm-link-default:hover {
    color: rgb(204, 204, 204);
}

.cm-text-decoration-none {
    text-decoration: none !important;
}

/* ********** ********** ********** */

/* Background */
.cm-background-default {
    background-color: rgb(255, 255, 255);
}

.cm-background-muted {
    background-color: rgb(248, 248, 248);
}

.cm-background-primary {
    background-color: rgb(162, 63, 151);
    /* rgb(30, 135, 240); */
}

.cm-background-primary:hover {
    background-color: rgb(198, 108, 187);
    /* rgb(63, 153, 243); */
}

.cm-background-secondary {
    background-color: rgb(34, 34, 34);
}

/* Padding */
.cm-padding-small-vertical {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.cm-padding-medium-vertical {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.cm-padding-large-vertical {
    padding-top: 8rem;
    padding-bottom: 8rem;
}

/* ------------------------------------- */

.cm-image-glow-parent {
    border-radius: 15px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    position: relative;
    inset: 1.5px 2.5px 0px 0px;
    background-color: #28292d;
    z-index: 10;
}

.cm-image-glow-parent:hover {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

.cm-image-glow {
    position: relative;
    border-radius: 15px !important;
    overflow: hidden !important;
}

.cm-image-glow::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    background: linear-gradient(0deg, transparent, #ffb900, #45f3ff);
    transform-origin: bottom right;
    animation: cm-image-glow 6s linear infinite;
}

.cm-image-glow::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    background: linear-gradient(0deg, transparent, #6515c6, #45f3ff);
    transform-origin: bottom right;
    animation: cm-image-glow 6s linear infinite;
    animation-delay: -3s;
}

@keyframes cm-image-glow {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.cm-button-glow {
    width: 90px;
    /* background: #111; */
    position: relative;
    z-index: 0;
    border-radius: 10px;
    padding: 5px;
    text-align: center;
    margin: 3px;
}

.cm-button-glow:before {
    content: "";
    background: linear-gradient(45deg,
            #ff0000,
            #ff7300,
            #fffb00,
            #48ff00,
            #00ffd5,
            #002bff,
            #7a00ff,
            #ff00c8,
            #ff0000);
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(2px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: cm-button-glow 20s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    border-radius: 10px;
}

.cm-button-glow:active {
    /* color: #000 */
}

.cm-button-glow:active:after {
    background: transparent;
}

.cm-button-glow:hover:before {
    opacity: 1;
}

.cm-button-glow:after {
    z-index: -1;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    /* background: #111; */
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes cm-button-glow {
    0% {
        background-position: 0 0;
    }

    50% {
        background-position: 400% 0;
    }

    100% {
        background-position: 0 0;
    }
}

/* ------------------------------------- */

.cm-post-box {
    border-radius: 25px;
}

.cm-post-box:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 10px;
}

.cm-cat {
    list-style-type: none;
    padding: 3px 5px;
}

.cm-cat a {
    text-decoration: none;
    color: gray;
    font: 14px;
}

.cm-cat a:hover {
    color: #00446A;
}

.cm-cat li {
    list-style-type: none;
}

.cm-mt-first-section {
    margin-top: 90px;
}

.cm-rgba {
    background-image: linear-gradient(rgba(42, 13, 128, 0.775),
            rgba(0, 0, 0, 0.5));
}

.cm-cat-blogs {
    background-color: rgba(240, 241, 243, 0.899);
}

.cm-cat-blogs:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    background-color: rgba(237, 244, 249, 0.982);
}

.cm-p {
    /* text-align: justify; */
    /* text-justify: inter-word; */
    line-height: 30px;
    ;
    font-size: 16px;
}

.cm-p-box {
    /* font-family: Verdana, Geneva, Tahoma, sans-serif; */
    text-align: justify;
    /* text-justify: inter-ideograph; */
    line-height: 30px;
    font-size: 16px;

    /* font-weight: bold; */
}

.cm-p-footer {
    /* font-family: Verdana, Geneva, Tahoma, sans-serif; */
    text-align: justify;
    /* text-justify: inter-ideograph; */
    line-height: 30px;
    font-size: 14px;

    /* font-weight: bold; */
}

.cm-a {
    text-decoration: none;
    color: #00446A;
}

.cm-a:hover {
    color: #00446A;
    /* background-color: rgba(218, 210, 210, 0.848); */
}

.cm-input {
    border-style: solid;
    border-width: 1px;
    border-color: #2d4d8e;
}

.cm-input:focus {
    border-width: 2px;
    border-color: #182a4e;
}

.cm-input-btn {
    background-color: #00A5FF;
    color: white;

}

.cm-input-btn:focus,
.cm-input-btn:hover {
    background-color: #00A5FF;
    color: white;
}

.cm-btn-dark {
    background-color: #00A5ff;
    color: white;
}

.cm-btn {
    background-color: #00446A;
    color: white;
}

.cm-btn:hover {
    background-color: #00446A;
    color: white;
}

.cm-hover {}

.cm-hover:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.cm-a-nav {
    color: black;
}

.cm-a-demo {
    color: white;
    background-color: #00446A;
    /* border-radius: 5px; */
}

.cm-a-demo:hover {
    color: white !important;
    background-color: #034f7b;
    /* border-radius: 5px; */
}

.cm-a-nav:hover {
    color: white;
    background-color: #00446A;
}

.cm-title {
    color: #00446A;
}

/*============= IYC - Helpers ================*/
.saba-sm {
    font-size: .875em !important;
}

.saba-xs {
    font-size: .6em !important;
}

.saba-bold{
    font-weight: bold !important;
}

.saba-bolder{
    font-weight: bolder !important;
}

.saba-black{
    font-weight: 900 !important;
}

.saba-transition{
    transition: all 0.3s ease-in-out;
}

.saba-bg1{
    background: linear-gradient(-45deg, rgb(167, 192, 238), #fff, #fff, rgb(167, 192, 238));
	background-size: 400% 400%;
	animation: sabaGradient 15s ease infinite;
}

.saba-justify{
    text-align: justify !important;
}

.saba-text-gray{
    color:#dcdcdc;
}

@keyframes sabaGradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}