@import url('https://fonts.googleapis.com/css?family=Cairo:400,600,700&display=swap&subset=arabic');

/* a,
a:link,
a:visited {
    color: #fff;
    text-decoration: none;
    transition: all .3s
} */

/* a:hover,
a:hover:visited {
    color: #eee
} */

.cs-code-pre *,
.cs-code-pre *:before,
.cs-code-pre *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.cs-code-pre {
    font-family: 'saira';
    margin: 0;
    padding: 0;
    position: relative;
    line-height: normal;
}

.cs-container {
    max-width: 900px;
    margin: 4% auto;
    padding: 30px;
    background: #666;
    color: #666;
    text-align: right;
    font-size: 16px;
    line-height: 1.6;
    border-radius: 10px;
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.03);
    overflow: hidden
}

.cs-container h1,
.cs-container h2 {
    display: block;
    margin-bottom: 20px;
    font-size: 2rem;
    font-weight: 700;
    color: #000;
    text-align: center;
}

.cs-container h3 {
    text-align: center;
    color: #fff;
    padding: 5px;
    border-radius: 4px;
    background: #3333e0;
}


.cs-container input:hover,
.cs-container input:active {
    background: #d63031;
    color: #fff;
    outline: none
}

btn.copy-code-button {
    z-index: 2;
    position: absolute;
    font-size: 14px;
    padding: 4px 5px;
    border: none;
    color: #333 !important;
    background: #ffd012 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    margin: 15px;
    border-radius: 4px;
    cursor: pointer;
}

pre {
    white-space: pre;
    word-wrap: normal;
    overflow: auto;
    font-size: 14px;
    margin: 0
}

pre,
code {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    direction: ltr;
}

/* Highlighter */
code {
    padding: 1.2em
}

.hljs,
code {
    display: block;
    overflow-y: hidden;
    overflow-x: hidden;
    padding: 1.2em;
    background: #2b2b2c;
    color: #fff;
    line-height: 1.5;
    text-align: left;
    word-spacing: 0;
    font-family: monospace;
    border-radius: 5px;
    max-height: 350px
}

.hljs:hover,
.hljs:focus,
code:hover,
code:focus {
    overflow-y: auto;
    overflow-x: auto
}

.hljs-name,
.hljs-strong {
    font-weight: 500
}

.hljs-code,
.hljs-emphasis {
    font-style: italic
}

.hljs-tag {
    color: #62c8f3
}

.hljs-variable,
.hljs-template-variable,
.hljs-selector-id,
.hljs-selector-class {
    color: #ade5fc
}

.hljs-string,
.hljs-bullet {
    color: #a2fca2
}

.hljs-type,
.hljs-title,
.hljs-section,
.hljs-attribute,
.hljs-quote,
.hljs-built_in,
.hljs-builtin-name {
    color: #ffa
}

.hljs-number,
.hljs-symbol,
.hljs-bullet {
    color: #d36363
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal {
    color: #fcc28c
}

.hljs-comment,
.hljs-deletion,
.hljs-code {
    color: #888
}

.hljs-regexp,
.hljs-link {
    color: #c6b4f0
}

.hljs-meta {
    color: #fc9b9b
}

.hljs-deletion {
    background-color: #fc9b9b;
    color: #333
}

.hljs-addition {
    background-color: #a2fca2;
    color: #333
}

.hljs a {
    color: inherit
}

.hljs a:focus,
.hljs a:hover {
    color: inherit;
    text-decoration: underline
}

mark .hljs-attr,
mark .hljs-string,
mark .hljs-bullet {
    background-color: #e67e22;
    color: #fff
}

.hljs mark {
    background-color: #f24a4a;
    color: #fff;
    padding: 2px 5px;
    border-radius: 2px
}

.BLOG_mobile_video_class {
    display: none !important
}

.hljs mark span.hljs-number,
.hljs mark span.hljs-comment,
.hljs mark span.hljs-symbol,
.hljs mark span.hljs-string,
.hljs mark span.hljs-attr,
.hljs mark span.hljs-keyword,
.hljs mark span.hljs-name,
.hljs mark span.hljs-tag {
    color: #fff !important;
    margin: .15rem 0
}








.cs-container-2 {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 200px));
    grid-auto-rows: 200px;
    grid-auto-flow: row dense;
    grid-gap: 23px;
    justify-content: center;
}
.card-top, .card-right, .card-bottom, .card-left {
    display: flex;
    flex-wrap: nowrap;
    height: 100%;
    width: 100%;
    border-radius: 95.2380952381px;
    box-shadow: 0px 3px 9px 1px rgba(0, 10, 20, 0.2);
}
.card-top {
    flex-direction: column;
    grid-column: auto / span 1;
    grid-row: auto / span 2;
}
.card-right {
    flex-direction: row-reverse;
    grid-column: auto / span 2;
    grid-row: auto / span 1;
}
.card-bottom {
    flex-direction: column-reverse;
    grid-column: auto / span 1;
    grid-row: auto / span 2;
}
.card-left {
    flex-direction: row;
    grid-column: auto / span 2;
    grid-row: auto / span 1;
}
.card-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-image i{
    font-size: 100px;
    color: #333;
}

.card-top .card-image, .card-bottom .card-image {
    height: 50%;
    width: 100%;
}
.card-left .card-image, .card-right .card-image {
    height: 100%;
    width: 50%;
}
.card-image img {
    width: 100%;
    object-fit: contain;
}
.card-top img {
    border-radius: 95.2380952381px 95.2380952381px 0 0;
}
.card-right img {
    border-radius: 0 95.2380952381px 95.2380952381px 0;
}
.card-bottom img {
    border-radius: 0 0 95.2380952381px 95.2380952381px;
}
.card-left img {
    border-radius: 95.2380952381px 0 0 95.2380952381px;
}
.card-text {
    align-self: center;
}
.card-top .card-text {
    height: auto;
    width: auto;
}
.card-right .card-text {
    height: auto;
    width: 50%;
}
.card-bottom .card-text {
    height: auto;
    width: auto;
}
.card-left .card-text {
    height: auto;
    width: 50%;
}
.card-text p {
    margin: 0;
    line-height: 1.35em;
    color: #345;
}


.card-left, 
.card-right, 
.card-top, 
.card-bottom 
{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.card-top, 
.card-bottom 
{
    padding-left: 1rem;
    padding-right: 1rem;
}


.card-left, 
.card-right 
{
    padding-left: 2rem;
    padding-right: 2rem;
    text-align: left;
}



@media (max-width: 500px) {
    .card-top {
        flex-direction: row;
        grid-column: auto / span 2;
        grid-row: auto / span 1;
}
    .card-bottom {
        flex-direction: row-reverse;
        grid-column: auto / span 2;
        grid-row: auto / span 1;
}
    .card-top .card-image, .card-bottom .card-image {
        height: 100%;
        width: 50%;
}
    .card-top img {
        border-radius: 95.2380952381px 0 0 95.2380952381px;
}
    .card-bottom img {
        border-radius: 0 95.2380952381px 95.2380952381px 0;
}
    .card-top .card-text {
        height: auto;
        width: 50%;
}
    .card-bottom .card-text {
        height: auto;
        width: 50%;
}
}
@media (max-width: 400px) {
    .card-image {
        width: 38% !important;
}
    .card-text {
        width: 62% !important;
}
}



.card-left, 
.card-right, 
.card-top, 
.card-bottom {
    transform: scale(1) translate(0, 0);
    transition: transform 0.5s ease;
}

.card-left:hover, 
.card-right:hover, 
.card-top:hover, 
.card-bottom:hover {
    transform: scale(1.07); /* Adjust the values as needed */
}