* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
button::selection,
input::selection,
textarea::selection,
a::selection,
li::selection,
img::selection,
p::selection,
div::selection,
h1::selection,
h2::selection,
h3::selection,
h4::selection,
h5::selection,
span::selection,
body::selection {
    background-color: #ff890370;
    color: white;
}
/* General */
h2{
    background-image: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    -webkit-background-clip: unset !important;
    font-size: 24px !important;
    font-weight: 600;
    color: #ccc;
    text-align: left !important;
}

/* Blog & News style */
.section-all {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.section-all .container-bx {
    display: flex;
    width: 100%;
    flex-flow: row nowrap;
    max-width: 1350px;
    justify-content: center;
}

.section-all .aside {
    color: #ccc;
    width: 100%;
    max-width: 350px;
    padding: 80px 16px;
    border-right: 1px solid #333;
}

.section-all .article {
    width: 100%;
    max-width: 800px;
    padding: 80px 16px;
    flex: 1;
    border: 1px solid #a7a7a712;
    border-top: 0px;
    border-bottom: 0px;
}

.content-header .category-type {
    padding: 6px 18px;
    background-color: #ff8a03;
    width: fit-content;
    border-radius: 8px;
    letter-spacing: 1.1px;
    position: relative;
}
.content-header .category-type:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 9px;
    top: 0px;
    left: 0px;
    box-shadow: 0 0 8px #ff8a03;
    animation: glow 2.5s ease-in-out infinite;
}

@keyframes glow {
    0%, 100% {
        opacity: 0.7;
        box-shadow: 0 0 8px #ff8a03;
    }
    50% {
        opacity: 0.3;
        box-shadow: 0 0 20px #ff8a03;
    }
}

.content-header .main-title {
    font-size: 36px;
    color: #ffffff;
    padding-top: 16px !important;
    padding-bottom: 24px !important;
}

.content-header .details-bar .icn img {
    width: 20px;
}

.content-header .details-bar .icn img.icn-pen {
    width: 16px;
}

.content-header .details-bar .icn img.icn-shield {
    width: 24px;
}

.content-header .details-bar {
    display: flex;
    flex-flow: row nowrap;
    gap: 16px;
}

.content-header .details-bar .tag {
    color: #ff8a03;
    padding: 6px 16px;
    border: 1px solid #ff8a03;
    border-radius: 24px;
    width: fit-content;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.content-header .details-bar .icn {
    margin-top: -2px;
}

.content-header .header-bottom {
    padding-top: 36px;
    padding-bottom: 40px;
}

.content-header .header-bottom .main-img {
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
}

.content-header .header-bottom .main-img img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 400px;
    object-fit: cover;
    transform: translate(-50%, -50%);
}

/* Left Aside */
aside h4{
    color: #b6b6b6;
    font-size: 24px;
    padding-bottom: 16px !important;
    padding-left: 20px !important;
}
aside .sec-titles-bx .bx{
    padding-bottom: 8px;
}
aside .sec-titles-bx > .bx a{
    display: flex;
    flex-flow: row nowrap;
    gap: 8px;
    position: relative;
    left: 0px;
    transition: all 600ms ease;
}
aside .sec-titles-bx > .bx h2{
    font-size: 16px !important;
    font-weight: normal !important;
    text-align: left !important;
    color: #ccc;
    color: #aaaaaa;
    transition: all 300ms ease;
}
aside .sec-titles-bx > .bx a:hover{
    left: 6px;
}
aside .sec-titles-bx > .bx a:hover h2{
    color: #ff8a03;
}
aside .sec-titles-bx > .bx a{
    text-decoration: none !important;
}
aside .sec-titles-bx > .bx .icn img{
    width: 16px;
    height: auto;
}

/* Main Content */
.content-main h3,
.content-main h2,
.content-main h1{
    padding-top: 24px !important;
    padding-bottom: 16px !important;
    margin: 0px !important;
    color: #f3f3f3 !important;
    text-align: left !important;
}
.content-main h1{
    font-size: 32px !important;
}
.content-main h2{
    font-size: 24px !important;
    padding: 18px 0px 10px !important;
}
.content-main h3{
    font-size: 18px !important;
    padding: 16px 0px 8px !important;
}
.content-main p{
    color: #dbdbdb;
    letter-spacing: 0.7px;
    line-height: 1.7;
    padding: 0px 0px  8px;
    margin: 0px !important;
}


/* Bottom of Article */
.bottom-article{
    padding: 80px 0px 0px;
}
.bottom-article .title{
    color: #FFFFFF;
}
.bottom-article .list-bx{
    padding-top: 12px;
    padding-bottom: 32px;
}
.bottom-article .bx,
.bottom-article .list-bx .bx{
    padding-bottom: 12px;
}
.bottom-article .related-list a,
.bottom-article .list-bx .bx a{
    width: fit-content;
    text-decoration: none !important;
    display: flex;
    flex-flow: row nowrap;
    gap: 4px;
}
.related-b-title,
.bottom-article .list-bx .bx a h3{
    font-size: 18px;
    color: #aaaaaa;
    transition: all 300ms ease;
}

.bottom-article a:hover .related-b-title,
.bottom-article .list-bx .bx a:hover h3{
    color: #ff8a03;
}
.bottom-article .list-bx .bx .icn{
    position: relative;
    bottom: 0px;
    left: 0px;
    transition: all 300ms ease;
}
.bottom-article .list-bx a:hover .icn{
    bottom: 5px;
    left: 5px;
}
.arrow-b-related img,
.bottom-article .list-bx .bx img{
    width: 22px;
    height: auto;
}
.icon-b-related,
.bottom-article .list-bx a .icon{
    padding-right: 3px;
}
.icon-b-related img,
.bottom-article .list-bx a .icon img{
    width: 16px !important;
}
.related-blogs h2{
    padding-bottom: 16px !important;
}


.gold-card {
    width: 100%;
    background: url('../../images/back-1.png') no-repeat center;
    background-size: cover;
    color: #fff;
    padding: 60px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    border: 1px solid #a3a3a32f;;
}
.gold-card:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #0000007c;
    z-index: -1;
}
.gold-card:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}
.gold-card-content {
    text-align: center;
    max-width: 800px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    gap: 24px;
}

.gold-card h2 {
    font-size: 2rem;
    margin-bottom: 30px;
    line-height: 1.4;
    font-weight: 600;
    max-width: 400px;
    text-align: center !important;
    background-image: linear-gradient(84.46deg, white 49%, #ff8a03 79%) !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 600;
    line-height: 1.3;
}


.download-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.btn-store img {
    height: 60px;
    transition: transform 0.3s ease;
}

.btn-store:hover img {
    /* transform: scale(1.05); */
}



/* General */
.img-cont{
    padding: 24px 0px;
    width: 100%;
}
.content-main-img{
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
}

.content-main-img img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 400px;
    object-fit: cover;
    transform: translate(-50%, -50%);
}
.img-div {
    position: relative;
    z-index: 1;
}
.img-div:before {
    content: "";
    position: absolute;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    top: 5px;
    left: 5px;
    border: 1px solid #1d1d1d7c;
    z-index: 10;
    border-radius: 22px;
    background: #1d1d1d25;
}

.normal-img{
    width: 100%;
}
.normal-img img{
    width: 100%;
    height: auto;
}

/* padding */
.pad-lft-10{
    padding-left: 10px;
}
.pad-brk-big{
    padding-top: 40px;
}


/* ul */
.content-main ul{
    list-style: none;
    padding-left: 24px;
}
.content-main ul li{
    position: relative;
    padding-left: 10px;
}
.content-main .ul-num {
    counter-reset: my-counter;
}

.content-main .ul-num li {
    counter-increment: my-counter;
}

.content-main .ul-num li::before {
    content: counter(my-counter) ".";
    color: #ff8a03;
    font-size: 24px;
    position: absolute;
    top: 18px;
    left: -20px;
    font-weight: bold;
}
.content-main .ul-dot li::before {
    content: "";
    position: absolute;
    top: 28px;
    left: -16px;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background: url('../../images/icon/dot.png') no-repeat center center;
    background-size: contain;
}

.content-main .ul-num.h1 li::before {
    top: 32px;
    left: -24px;
    font-size: 32px;
}
.content-main .ul-num.h2 li::before {
    top: 24px;
    left: -20px;
    font-size: 24px;
}

.content-main .ul-dot.h1 li::before {
    top: 42px;
    left: -22px;
}
.content-main .ul-dot.h2 li::before {
    top: 32px;
}


a.unq-col,
li.unq-col,
div.unq-col,
p.unq-col,
h1.unq-col,
h2.unq-col,
h3.unq-col{
    color: #ff8a03 !important;
}


a.unq-lnk{
    color: #ff8a03;
    cursor: pointer;
    transition: all 300ms ease;
    text-decoration: none !important;
}
a.unq-lnk:hover{
    color: #f3b063;
}

.lnk-viewmore{
    font-size: 18px;
    padding-left: 24px;
}

@media (max-width: 950px){
    .section-all .container-bx {
        flex-flow: column nowrap;
    }
    .section-all .article {
        order: 1;
    }
    .content-header .details-bar {
        gap: 4px;
        justify-content: space-between;
    }
    .content-header .details-bar .tag {
        padding: 6px 10px;
        gap: 6px;
    }
    .content-header .details-bar .icn img {
        width: 15px;
    }
    .content-header .details-bar .icn img.icn-shield {
        width: 17px;
    }
    .content-header .details-bar .icn img.icn-pen {
        width: 13px;
    }
    .gold-card h2 {
        text-align: center !important;
    }
    .btn-store img {
        height: 40px;
    }

    .section-all .aside {
        order: 2;
        max-width: 100%;
        border-right: 0px;
    }
}


.body.ar h1,
.body.ar h2,
.body.ar h3,
.body.ar h4,
.body.ar h5,
.body.ar h6,
.body.ar {
    font-family: Inter, sans-serif !important;
    font-family: "Noto Sans Arabic", sans-serif !important;
}
.body.ar .section-all{
    direction: rtl !important;
}
.body.ar .section-all{
    direction: rtl !important;
}
.body.ar .section-all .aside {
    border-right: 0px !important;
    border-left: 1px solid #333;
}
.body.ar aside .sec-titles-bx > .bx h2,
.body.ar h1,
.body.ar h3,
.body.ar h2{
    text-align: right !important;
}

.body.ar .gold-card h2 {
    text-align: center !important;
}
.body.ar a.viewmore {
    padding-left: 0px !important;
    padding-right: 24px !important;
}




.body.ar .content-main ul{
    padding-right: 24px !important;
}
.body.ar .content-main ul li{
    padding-right: 10px !important;
}
/* h3 */
.body.ar .content-main .ul-num li::before {
    top: 18px !important;
    right: -20px !important;
}
.body.ar .content-main .ul-dot li::before {
    top: 28px !important;
    right: -16px !important;
}

/* number list */
.body.ar .content-main .ul-num.h1 li::before {
    top: 32px !important;
    right: -24px !important;
    font-size: 32px !important;
}
.body.ar .content-main .ul-num.h2 li::before {
    top: 24px !important;
    right: -20px !important;
    font-size: 24px !important;
}
/* point list */
.body.ar .content-main .ul-dot.h1 li::before {
    top: 42px !important;
    right: -22px !important;
}
.body.ar .content-main .ul-dot.h2 li::before {
    top: 36px !important;
    right: -16px !important;
}
.body.ar .bottom-article .list-bx a .icon {
    padding-right: 0px !important;
    padding-left: 3px !important;
}
#qr-popup-modal h2,
#qr-popup-modal p,
body.ar #qr-popup-modal h2,
body.ar #qr-popup-modal p{
    text-align: center !important;
}
body.ar #qr-popup-modal h2{
    padding-bottom: 10px !important;
}