body {

    direction: rtl;
   
    color: #fff;
    background-color: #181e2f;
    margin: 0;
    padding: 0;
}

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #3b4663;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #95a9c6;
    border-radius: 150px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #bccce4;
}

::-moz-selection {
    /* Code for Firefox */
    color: #fff;
    background: #242c45;
}

::selection {
    color: #fff;
    background: #242c45;
}

@font-face {
    font-family: "IRANSansWebFaNum";
    src: url("../fonts/IRANSansWebFaNum.woff") format("woff"),
    url("../fonts/IRANSansWebFaNum.ttf") format("truetype"),
    url("../fonts/IRANSansWebFaNum.svg#IRANSansWebFaNum") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Mj_Dinar One";
    src: url("../fonts/Mj_DinarOneMedium.woff2") format("woff2"),
    url("../fonts/Mj_DinarOneMedium.woff") format("woff"),
    url("../fonts/Mj_DinarOneMedium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

button {
    font-family: "IRANSansWebFaNum";
}

.main-container {
    width: 1280px;
    margin: auto;
}

.header-logo {
    width: 150px;
    float: right;
    margin: 0;
    padding-top: 15px;
}

.header-logo a {
    width: 150px;
    height: 46px;
    background-image: url("../image/rayana-logo.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center center;
    text-decoration: none;
    color: #fff;
    display: block;
    text-indent: -9999px;
}

.clr {
    clear: both;
}

/*grid*/
.grid-row {
    width: 100%;
    margin-right: -15px;
    margin-left: -15px;
    display: inline-flex;
}

.grid-row::before {
    display: table;
    content: " ";
}

.grid-row::after {
    display: table;
    content: " ";
    clear: both;
}

.grid-col-1 {
    width: 8.33333333%;
}

.grid-col-2 {
    width: 16.66666667%;
}

.grid-col-3 {
    width: 25%;
}

.grid-col-4 {
    width: 33.33333333%;
}

.grid-col-5 {
    width: 41.66666667%;
}

.grid-col-6 {
    width: 50%;
}

.grid-col-7 {
    width: 58.33333333%;
}

.grid-col-8 {
    width: 66.66666667%;
}

.grid-col-9 {
    width: 75%;
}

.grid-col-10 {
    width: 91.66666667%;
}

.grid-col-12 {
    width: 100%;
}

.grid-col-1,
.grid-col-2,
.grid-col-3,
.grid-col-4,
.grid-col-5,
.grid-col-6,
.grid-col-7,
.grid-col-8,
.grid-col-9,
.grid-col-10,
.grid-col-11,
.grid-col-12 {
    float: right;
    position: relative;
    padding-right: 15px;
    padding-left: 15px;
}

/*menu*/
.header-menu {
    float: right;
    list-style: none;
    display: flex;
    flex-direction: row;
    margin-top: 25px;
}

.header-menu li {
    position: relative;
}

.header-menu li:hover > .dropdown-menu {
    display: block;
    z-index: 1;
}

.header-menu a {
    font-size: 16px;
    color: #e5e5e5;
    text-decoration: none;
    padding: 10px 20px;
}

.header-menu a:hover {
    color: #fff;
}

.dropdown-active::after {
    content: "";
    background-image: url("../image/elements/arrow-down.svg");
    background-size: 100% 100%;
    display: inline-block;
    margin-right: -10px;
    width: 12px;
    height: 5px;
}

.dropdown-menu {
    display: none;
    width: 240px;
    background-color: rgba(20, 25, 38, 0.8);
    border: 1px solid rgb(20 25 38);
    border-radius: 8px;
    padding-right: 0;
    list-style: none;
    margin-right: 0;
    position: absolute;
    top: 27px;
    right: 0;
}

.dropdown-menu a {
    display: block;
}

.dropdown-menu a:hover {
    color: #00c6ff;
}

.call-center {
    height: 35px;
    border-radius: 150px;
    float: left;
    margin-top: 20px;
    background-color: #284054;
}

.icon-call-center {
    width: 35px;
    height: 35px;
    display: block;
    float: left;
    background-color: #3fd39d;
    background-image: url("../image/elements/icons/call.svg");
    background-size: 75%;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 150px;
    border-bottom-right-radius: 0;
    position: relative;
}

.icon-call-center::after {
    content: "";
    width: 12px;
    height: 12px;
    position: absolute;
    right: -12px;
    bottom: 0;
    background-image: url("../image/elements/icons/call-el.png");
}

.call-center a {
    font-size: 20px;
    color: #fff;
    text-decoration: none;
    margin-left: 45px;
    margin-top: 3px;
    margin-right: 15px;
    display: block;
    text-align: left;
    direction: ltr;
}

.call-center a span {
    font-size: 16px;
}

.banner-homepage {
    background-color: #141928;
    background-image: url("../image/bg-homepage-banner.jpg");
    background-position: bottom;
    position: relative;
}

.banner-homepage::after {
    content: "";
    width: 100%;
    height: 75px;
    background-image: url("../image/elements/curve.png");
    background-position: center;
    position: absolute;
    bottom: 0;
    right: 0;
}

.mockup-banner {
    width: 100%;
}

.banner-container {
    padding-top: 50px;
    padding-bottom: 100px;
}

.title-banner {
    font-family: "Mj_Dinar One", "IRANSansWebFaNum";
    font-weight: normal;
    font-size: 64px;
    margin: 0;
}

.subtitle-banner {
    padding: 4px 25px;
    background-color: #95a9c6;
    color: #1c3c6d;
    font-weight: bold;
    border-radius: 150px;
    border-bottom-right-radius: 0;
    position: relative;
}

.subtitle-banner svg {
    position: absolute;
    bottom: -24px;
    right: 24px;
}

.description-banner {
    font-size: 22px;
}

.hr-effect {
    width: 75px;
    height: 12px;
    display: block;
    margin: 0;
    border: 0;
    position: relative;
}

.hr-effect::before {
    content: "";
    width: 100%;
    height: 5px;
    display: block;
    background-color: #5380c3;
    border-radius: 15px;
    position: relative;
    top: 4px;
}

.relative {
    position: relative;
}

.hr-effect::after {
    content: "";
    width: 12px;
    height: 12px;
    display: block;
    border-radius: 150px;
    background-color: #00f0ff;
    position: absolute;
    top: 0;
    animation: 1.8s hr-effect-animated;
    animation-iteration-count: infinite;
}

@keyframes hr-effect-animated {
    0% {
        right: 0;
    }

    50% {
        right: 63px;
    }

    100% {
        right: 0;
    }
}

.text-banner {
    padding-top: 110px;
}

.play-video {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
}

.margin-pv {
    margin-top: 75px;
    margin-right: 25px;
}

.play-video span {
    color: #9e9e9e;
    padding-right: 25px;
    cursor: pointer;
}

.play-video::before {
    content: "";
    width: 60px;
    height: 60px;
    background-color: rgb(0, 240, 255);
    opacity: 0.3;
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
    animation: 3s play-video-cycle-scale;
    animation-delay: 0.8s;
    animation-iteration-count: infinite;
}

.play-video::after {
    content: "";
    width: 60px;
    height: 60px;
    background-color: rgb(0, 240, 255);
    opacity: 0.2;
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
    animation: 3.5s play-video-cycle-scale;
    animation-iteration-count: infinite;
}

@keyframes play-video-cycle-scale {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.5);
        opacity: 0.1;
    }
}

.play-cycle {
    width: 60px;
    height: 60px;
    cursor: pointer;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-image: -moz-linear-gradient(
            90deg,
            rgb(1, 94, 234) 0%,
            rgb(0, 192, 250) 100%
    );
    background-image: -webkit-linear-gradient(
            90deg,
            rgb(1, 94, 234) 0%,
            rgb(0, 192, 250) 100%
    );
    background-image: -ms-linear-gradient(
            90deg,
            rgb(1, 94, 234) 0%,
            rgb(0, 192, 250) 100%
    );
}

.icon-play {
    width: 33px;
    height: 37px;
    background-image: url("../image/elements/icons/play.png");
    display: block;
    margin-right: -5px;
}

.services-section {
    width: 100%;
    height: 110px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    border-radius: 20px;
    margin-top: 35px;
    border-bottom-left-radius: 55px;
    border-bottom-right-radius: 55px;
    background-color: #2a3248;
    background-image: -moz-linear-gradient(
            90deg,
            rgb(34, 42, 63) 0%,
            rgb(42, 50, 72) 100%
    );
    background-image: -webkit-linear-gradient(
            90deg,
            rgb(34, 42, 63) 0%,
            rgb(42, 50, 72) 100%
    );
    background-image: -ms-linear-gradient(
            90deg,
            rgb(34, 42, 63) 0%,
            rgb(42, 50, 72) 100%
    );
    box-shadow: 0 24px 18px 0 rgba(0, 0, 0, 0.1);
}

.services-logo {
    width: 120px;
    height: 120px;
    position: relative;
    top: -68px;
}

.services-logo-cycle {
    width: 130px;
    height: 130px;
    position: relative;
    border-radius: 50%;
    background-image: -moz-linear-gradient(
            90deg,
            rgb(44, 53, 78) 0%,
            rgb(33, 40, 60) 100%
    );
    background-image: -webkit-linear-gradient(
            90deg,
            rgb(44, 53, 78) 0%,
            rgb(33, 40, 60) 100%
    );
    background-image: -ms-linear-gradient(
            90deg,
            rgb(44, 53, 78) 0%,
            rgb(33, 40, 60) 100%
    );
    box-shadow: 0 24px 18px 0 rgba(0, 0, 0, 0.1);
}

.services-logo::before {
    content: "";
    width: 200px;
    height: 77px;
    position: absolute;
    top: 67px;
    right: -35px;
    background-image: url("../image/elements/service-cycle.svg");
    background-size: 100% 100%;
}

.services-item {
    width: 280px;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    padding-right: 35px;
}

.rayana-blue-logo {
    width: 137px;
    height: 138px;
    display: block;
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: 25px 17px;
    background-image: url("../image/rayana-logo-blue.png");
}

.icon-linline-services {
    width: 52px;
    height: 52px;
    display: block;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
}

.icon-web {
    background-image: url("../image/elements/icons/web.svg");
}

.icon-android {
    background-image: url("../image/elements/icons/android.svg");
}

.icon-markting {
    background-image: url("../image/elements/icons/markting.svg");
}

.icon-seo {
    background-image: url("../image/elements/icons/seo.svg");
}

.icon-pwa {
    background-image: url("../image/elements/icons/pwa.svg");
}

.icon-ios {
    background-image: url("../image/elements/icons/ios.svg");
}

.icon-motion {
    background-image: url("../image/elements/icons/motion.svg");
}

.icon-social {
    background-image: url("../image/elements/icons/social.svg");
}

.services-item h4 {
    font-size: 22px;
    font-weight: normal;
    margin-right: 15px;
}

.services-item a {
    color: #95a9c6;
    text-decoration: none;
}

.services-item a:hover {
    color: #fff;
}

.subtitle-services {
    width: 220px;
    margin: auto;
    position: relative;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    font-size: 22px;
    background-image: -moz-linear-gradient(
            90deg,
            rgb(38, 84, 168) 0%,
            rgb(63, 38, 127) 100%
    );
    background-image: -webkit-linear-gradient(
            90deg,
            rgb(38, 84, 168) 0%,
            rgb(63, 38, 127) 100%
    );
    background-image: -ms-linear-gradient(
            90deg,
            rgb(38, 84, 168) 0%,
            rgb(63, 38, 127) 100%
    );
}

.title-content {
    font-size: 26px;
    margin-top: 0;
}

.paragraph-justify {
    color: #bdbdbd;
    text-align: justify;
}

.paragraph-justify strong {
    color: white;
}

.play-video-section {
    aspect-ratio: 16 / 9;
    width: 100%;
    background: #2a3248;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.play-video-section::before {
    content: "";
    width: 260px;
    height: 260px;
    position: absolute;
    background-image: url("../image/elements/dots-blue.png");
    left: -50px;
    bottom: -45px;
    z-index: -1;
    animation: 3s alpha-play-video;
    animation-iteration-count: infinite;
}

@keyframes alpha-play-video {
    0% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.3;
    }
}

.padding-container {
    padding: 65px 0;
}

.btn-service {
    width: fit-content;
    height: 70px;
    padding: 0 25px;
    background-color: #1e263b;
    color: #fff;
    font-size: 18px;
    text-decoration: none;
    display: flex;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #2c3653;
    justify-content: center;
    transition: 0.3s;
}

.btn-service-1 {
    float: left;
    background-color: #27617c;
}

.btn-service-2 {
    float: right;
    margin-top: 35px;
    background-color: #3f8e74;
}

.btn-service-3 {
    float: right;
    margin-right: 15px;
    margin-top: 35px;
    background-color: #256eb0;
}

.btn-service-4 {
    float: right;
    margin-top: 35px;
    background-color: #393089;
}

.btn-service-5 {
    float: right;
    margin-top: 35px;
    background-color: #1283a5;
}

.btn-service-6 {
    float: right;
    margin-top: 35px;
    background-color: #af3954;
}

.btn-service:hover > i {
    background-color: rgba(0, 0, 0, 0.3);
    background-size: 70%;
    border-radius: 150px;
}

.icon-btn-service {
    width: 42px;
    height: 42px;
    display: block;
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    margin-left: 15px;
    transition: 0.3s;
}

#mobile-application-design {
    width: 100%;
}

#title-mobile-application-desgin {
    margin-top: 65px;
}

#title-digital-markting-desgin {
    margin-top: 25px;
}

#digital-markting-image {
    width: 100%;
}

.flex-btn-services {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 8px;
}

.banner-section-home-page {
    height: 470px;
    position: relative;
    background-image: url("../image/bg-homepage-banner.jpg");
    background-position: center center;
    background-attachment: fixed;
}

.banner-section-home-page::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background-color: rgba(10, 17, 34, 0.5);
}

.banner-section-home-page::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background-color: rgba(0, 92, 177, 0.5);
    transform: skewX(310deg) translateX(70%);
}

#web-desgin-banner-image {
    position: relative;
    z-index: 1;
    right: -10%;
}

#web-desgin-banner-image img {
    height: 450px;
    margin-top: 10px;
}

#web-desgin-banner-content {
    margin-top: 45px;
    margin-right: -16.66666667% !important;
    position: relative;
    z-index: 1;
}

#web-desgin-banner-content p {
    font-size: 18px;
}

.title-h3 {
    font-size: 36px;
    margin-bottom: 0;
}

.btn-orange-radius {
    padding: 8px 25px;
    background-color: #c98018;
    color: #101531;
    font-weight: bold;
    text-decoration: none;
    border-radius: 150px;
    text-align: center;
}

#consulting-btn {
    margin-top: 25px;
    display: inline-block;
}

.articles-title h4 {
    text-align: center;
    font-weight: normal;
    font-size: 32px;
    margin-bottom: 8px;
    margin-top: 0;
}

.articles-title h3 {
    text-align: center;
    font-weight: normal;
    font-size: 32px;
    margin-bottom: 8px;
    margin-top: 0;
}

.articles-title hr {
    margin: auto;
    margin-bottom: 60px;
}

.home-article {
    background-color: #121724;
    border-radius: 15px;
    padding: 20px;
}

.home-article figure {
    margin: 0;
    margin-top: -45px;
}

.home-article figure img {
    width: 100%;
    border-radius: 15px;
}

.home-article h3 {
    font-size: 22px;
    font-weight: normal;
}

.home-article a {
    color: #fff;
    text-decoration: none;
}

.home-article a:hover {
    color: #c1f7ff;
}

.home-article p {
    font-size: 16px;
    color: #686868;
    text-align: justify;
}

footer {
    position: relative;
    padding-top: 70px;
    padding-bottom: 10px;
    background-color: #1e263b;
}

footer::before {
    content: "";
    width: 100%;
    height: 34px;
    background-image: url("../image/elements/curve-foot.png");
    background-position: center;
    position: absolute;
    top: 0;
    right: 0;
}

.footer-title {
    display: block;
    font-size: 22px;
    position: relative;
    padding-right: 25px;
}

.footer-title::before {
    content: "";
    width: 10px;
    height: 30px;
    background-color: rgb(1, 130, 240);
    position: absolute;
    right: 0;
    top: 0;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
}

.about-foot-justify {
    color: #878a94;
    text-align: justify;
}

.footer-menu {
    list-style-image: url("../image/elements/icons/arrow.png");
}

.footer-menu li {
    margin-bottom: 15px;
    direction: ltr;
}

.footer-menu a {
    display: block;
    color: #878a94;
    text-decoration: none;
    transition: 0.5s;
}

.footer-menu a:hover {
    color: #fff;
    padding-right: 10px;
}

.city-footer {
    width: 100%;
    height: 169px;
    background-image: url("../image/elements/footer-city.png");
    background-size: 100% 100%;
    display: block;
    position: relative;
    top: -15px;
}

.mt-10 {
    margin-top: 10px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-45 {
    margin-top: 45px;
}

.mt-50 {
    margin-top: 50px;
}

.mt-70 {
    margin-top: 70px;
}

.mt-100 {
    margin-top: 100px;
}

#nemad {
    width: 80%;
    display: block;
    margin: auto;
    margin-top: 15px;
    margin-bottom: 25px;
}

.footer-call-center {
    display: flex;
    direction: ltr;
    margin: 15px 0;
}

.footer-call-center-icon {
    width: 30px;
    height: 30px;
    display: block;
    background-image: url("../image/elements/icons/call-green.svg");
    background-size: 100%;
}

.footer-call-center a {
    font-size: 26px;
    color: #fff;
    text-decoration: none;
    padding-left: 15px;
}

.footer-call-center a span {
    font-size: 18px;
}

.call-extension {
    height: 35px;
    font-size: 20px;
    padding: 0 10px;
    background-color: #3fd39d;
    color: #1e263b;
    font-weight: bold;
    border-radius: 150px;
    border-bottom-left-radius: 0;
    margin-left: 15px;
}

.social {
    padding: 25px 0;
    display: flex;
    justify-content: space-around;
}

.social-icon {
    width: 32px;
    height: 32px;
    display: block;
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.5;
}

.social-icon-instagram {
    background-image: url("../image/elements/icons/social/insta.png");
}

.social-icon-aparat {
    background-image: url("../image/elements/icons/social/aparat.png");
}

.social-icon-youtube {
    background-image: url("../image/elements/icons/social/youtube.png");
}

.social-icon-twitter {
    background-image: url("../image/elements/icons/social/twitter.png");
}

.social-icon-telegram {
    background-image: url("../image/elements/icons/social/telegram.png");
}

.social-icon-linkedin {
    background-image: url("../image/elements/icons/social/linkedin.png");
}

.social-icon:hover {
    opacity: 1;
}

.form-input-and-btn {
    height: 45px;
    background-color: #2d364f;
    border: 1px solid #343f5c;
    border-radius: 8px;
    display: flex;
    align-items: center;
}

.form-input-and-btn input[type="text"] {
    width: 75%;
    height: 90%;
    background-color: rgba(0, 0, 0, 0);
    border: 0;
    font-family: "IRANSansWebFaNum";
    color: #fff;
    padding-right: 15px;
}

.form-input-and-btn .btn-green {
    height: 80%;
    background-color: #0d7a5f;
    border: 0;
    color: #fff;
    font-family: "IRANSansWebFaNum";
    font-size: 16px;
    border-radius: 8px;
    margin-left: 5px;
}

#footer-copyright {
    color: #878a94;
    font-size: 14px;
    text-align: center;
}

footer hr {
    border-color: #364262;
}

.cycle-blur-bg {
    position: relative;
}

.cycle-blur-bg::before {
    content: " ";
    width: 30%;
    height: 280px;
    background-color: #222a40;
    position: absolute;
    right: 25%;
    z-index: -1;
    border-radius: 50%;
    filter: blur(100px);
    animation: 8s cycle-blur-bg;
    animation-iteration-count: infinite;
}

.bg-header {
    background-color: #1e263b;
}

.title-head {
    font-size: 42px;
    margin: 0;
}

.call-support {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    direction: ltr;
}

.icon-call-support {
    width: 35px;
    height: 35px;
    display: block;
    background-image: url("../image/elements/icons/call-green.svg");
    background-size: 100%;
}

.call-support a {
    direction: ltr;
    display: block;
    color: #fff;
    text-decoration: none;
    font-size: 28px;
    padding: 0 15px;
}

.call-support a span {
    font-size: 18px;
}

.extension-call {
    height: 30px;
    font-weight: bold;
    color: #1e263b;
    background-color: #3fd39d;
    border-radius: 150px;
    border-bottom-left-radius: 0;
    padding: 0 10px;
    position: relative;
    top: 5px;
}

.extension-call::after {
    content: "";
    width: 12px;
    height: 12px;
    position: absolute;
    left: -12px;
    bottom: 0;
    transform: rotate(270deg);
    background-image: url(../image/elements/icons/call-el.png);
}

.call-description {
    color: #ffde00;
    margin-top: 10px;
}

.hover-property {
    border-radius: 15px;
    background-color: #1e263b;
    margin-bottom: 15px;
    padding: 25px 0;
}

.hover-property:hover {
    background-color: #27324d;
}

.hover-property span {
    display: block;
    text-align: center;
    margin-top: 10px;
    font-size: 24px;
}

.hover-property-icon {
    width: 65px;
    height: 65px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
    display: block;
    margin: auto;
}

.wide-image {
    width: 100%;
}

.checked-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
}

.checked-item {
    font-size: 18px;
    padding: 5px 25px;
    background-color: #262f4a;

    border-radius: 10px;
}

.checked-icon {
    width: 28px;
    height: 28px;
    display: block;
    float: right;
    margin-left: 8px;
    background-image: url(../image/elements/icons/check.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
}

.wrapper-plans {
    display: flex;
    flex-direction: row;
    background-color: #1e263b;
    border-radius: 25px;
}

.plan-description {
    width: 25%;
    background-color: #262f4a;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
}

.plans {
    width: 75%;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: auto auto auto auto;
}

.btn-plan-next {
    display: none;
}

.btn-plan-container {
    display: none;
}

.plan-title {
    height: 167px;
    padding: 15px 0;
    background-image: -moz-linear-gradient(
            180deg,
            rgb(44, 66, 100) 0%,
            rgb(38, 47, 74) 100%
    );
    background-image: -webkit-linear-gradient(
            180deg,
            rgb(44, 66, 100) 0%,
            rgb(38, 47, 74) 100%
    );
    background-image: -ms-linear-gradient(
            180deg,
            rgb(44, 66, 100) 0%,
            rgb(38, 47, 74) 100%
    );
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
}

.plan-title p {
    text-align: center;
    font-size: 22px;
    margin-bottom: 0;
    margin-top: 8px
}

.rayana-plan-icon {
    width: 55px;
    height: 55px;
    background-image: url("../image/rayana-logo-white.webp");
    background-size: 100%;
    display: block;
    margin: auto;
}

.plan-feature-status {
    border-left: 1px solid #181e2f;
}

.plan-features {
    padding: 16px 25px 0;
}

.plan-feature-item {
    padding-bottom: 25px;
}

.plan-feature-icon {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

.plan-feature-icon i {
    width: 70px;
    height: 70px;
    display: block;
    margin: auto;
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
}

.plan-feature-icon::before {
    content: "";
    width: 100px;
    height: 85px;
    background-color: #3b4767;
    position: absolute;
    top: 0;
    animation: plan-shape 5s linear infinite;
    z-index: 0;
}

@keyframes plan-shape {
    0%,
    100% {
        border-radius: 40% 60% 70% 30% / 40% 40% 60% 50%;
    }
    33% {
        border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
    }
    66% {
        border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
    }
}

.plan-one-icon {
    background-image: url("../image/elements/icons/plan-one.png");
}

.plan-two-icon {
    background-image: url("../image/elements/icons/plan-two.png");
}

.plan-three-icon {
    background-image: url("../image/elements/icons/plan-three.png");
}

.plan-four-icon {
    background-image: url("../image/elements/icons/plan-four.png");
}

.plan-feature-status h3 {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 5px;
}

.plan-feature-subtitle {
    display: table;
    margin: auto;
    background-color: #354363;
    color: #181e2f;
    font-weight: bold;
    padding: 0 15px;
    border-radius: 150px;
    font-size: 12px;
}

.plan-check-icon {
    width: 25px;
    height: 25px;
    display: block;
    margin: auto;
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
}

.check-green-icon {
    background-image: url("../image/elements/icons/cycle-green-checked.png");
}

.check-gray-icon {
    background-image: url("../image/elements/icons/cycle-gray-checked.png");
}

.pfs-td {
    height: 53px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pfs-td:nth-last-child(even) {
    background-color: rgba(0, 0, 0, 0.1);
}

.plan-feature-status-table {
    padding-top: 15px;
}

.psf-price {
    font-size: 28px;
}

.psf-price span {
    font-size: 16px;
}

.psf-blue-price {
    color: #46b4ff;
}

.pfst-blue {
    background-color: #46b4ff;
}

.pfst-pink {
    background-color: #ff448a;
}

.psf-pink-price {
    color: #ff448a;
}

.psf-orange-price {
    color: #f48431;
}

.psf-orange {
    background-color: #f48431;
}

.psf-white-price {
    background-color: #a0abcb;
}

.plan-feature-gradient {
    background-image: -moz-linear-gradient(
            90deg,
            rgb(29, 87, 194) 0%,
            rgb(78, 44, 165) 100%
    );
    background-image: -webkit-linear-gradient(
            90deg,
            rgb(29, 87, 194) 0%,
            rgb(78, 44, 165) 100%
    );
    background-image: -ms-linear-gradient(
            90deg,
            rgb(29, 87, 194) 0%,
            rgb(78, 44, 165) 100%
    );
    position: relative;
}

.plan-feature-gradient::before {
    content: "";
    width: 100%;
    height: 25px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    background-color: #4e2ca5;
    position: absolute;
    top: -25px;
    right: 0;
}

.plan-feature-gradient::after {
    content: "";
    width: 100%;
    height: 25px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    background-color: #1e56c2;
    position: absolute;
    bottom: -25px;
    right: 0;
}

.plan-feature-gradient .plan-feature-icon::before {
    background-color: #15223c;
}

.banner-portfolio {
    background-image: url("../image/web-design/bg-portfolio.jpg");
    background-size: cover;
    background-attachment: fixed;
    padding: 35px 0;
}

.portfolio-web {
    width: 100%;
    height: 150px;
    display: block;
    background-color: #10141f;
    border-radius: 15px;
    color: #fff;
    text-decoration: none;
    background-size: 100%;
    background-position: top;
    transition: 3s;
}

.portfolio-web:hover {
    background-position: bottom;
}

.portfolio-web-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 15px;
    transition: 0.3s;
}

.portfolio-web-content p {
    margin-top: 5px;
    margin-bottom: 0;
    font-size: 18px;
    text-align: center;
}

.portfolio-web-content img {
    max-width: 70%;
}

#portfolio-delta {
    background-image: url("../image/web-design/portfolio/delta.jpg");
}

#portfolio-paale {
    background-image: url("../image/web-design/portfolio/paale.jpg");
}

#portfolio-imonitoring {
    background-image: url("../image/web-design/portfolio/imonitoring.jpg");
}

#portfolio-toranj {
    background-image: url("../image/web-design/portfolio/toranj.jpg");
}

#portfolio-vala {
    background-image: url("../image/web-design/portfolio/vala.jpg");
}

#portfolio-satiyar {
    background-image: url("../image/web-design/portfolio/satiyar.jpg");
}

.portfolio-web:hover > .portfolio-web-content {
    opacity: 0;
}

.align-right-title h4 {
    text-align: right;
}

.align-right-title hr {
    margin: inherit;
    margin-bottom: 15px;
}

.small-title h4 {
    font-size: 24px;
}

.step-li {
    font-size: 22px;
    padding: 15px;
    border-radius: 150px;
    margin-bottom: 25px;
    background-image: -moz-linear-gradient(
            0deg,
            rgb(24, 30, 47) 0%,
            rgb(52, 63, 92) 100%
    );
    background-image: -webkit-linear-gradient(
            0deg,
            rgb(24, 30, 47) 0%,
            rgb(52, 63, 92) 100%
    );
    background-image: -ms-linear-gradient(
            0deg,
            rgb(24, 30, 47) 0%,
            rgb(52, 63, 92) 100%
    );
}

.step-li span {
    width: 45px;
    height: 45px;
    display: flex;
    float: right;
    text-align: center;
    background-color: #677291;
    color: #181e2f;
    font-weight: bold;
    font-size: 24px;
    border-radius: 150px;
    margin-top: -5px;
    margin-right: -5px;
    margin-left: 15px;
    justify-content: center;
    align-items: center;
}

.wrapper-steps-title {
    font-size: 38px;
    text-align: center;
    margin-bottom: 15px;
}

.wrapper-steps-title span {
    color: #00f0ff;
}

.wrapper-steps-title strong {
    color: #00f0ff;
}

.wrapper-steps-subtitle {
    text-align: center;
    font-size: 14px;
    color: #bebfc4;
}

.justify-center {
    justify-content: center;
}

.card-container {
    background-color: #1e263b;
    border-radius: 15px;
    margin-bottom: 60px;

}

.card-header {
    display: flex;
    justify-content: space-between;
}

.card-title h4 {
    font-size: 22px;
    margin: 0;
    margin-right: 15px;
}

.card-header {
    padding: 15px 25px;
    border-bottom: 1px solid #151a29;
}

.card-main {
    padding: 15px 25px;
}

.card-title {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.icon-comment {
    width: 45px;
    height: 45px;
    background-image: url("../image/elements/icons/comments.png");
    background-size: 100%;
    display: block;
}

.form-input {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #07090e;
    background-color: #2d364f;
    background-clip: padding-box;
    border: 1px solid #343f5c;
    font-family: "IRANSansWebFaNum";
    border-radius: 0.25rem;
    box-sizing: border-box;
}

.btn {
    font-family: "IRANSansWebFaNum";
    border: 0;
    cursor: pointer;
}

.btn-comment {
    font-size: 18px;
    padding: 5px 25px;
    border-radius: 4px;
    background-color: #0d7a5f;
    color: #fff;
}

.verify-code {
    width: 320px;
    background-color: #191f30;
    border-radius: 4px;
    margin-left: 15px;
}

.left-comment-submit {
    float: left;
    display: flex;
    padding-left: 30px;
}

.right-comment-submit {
    float: right;
}

.grid-low-padding {
    padding: 0;
}

.starRatingContainer {
    direction: ltr;
}

.comment-user {
    margin: 15px 0;
    margin-bottom: 0;
    padding: 15px 0;
    border-top: 2px solid #151a29;
}

.comment-user-rate {
    background-color: #0d7a5f;
    padding: 0 15px;
    border-radius: 4px;
}

.comment-user-detial {
    color: #515b78;
    padding: 0 15px;
}

.card-main-title {
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 5px;
}

.digital-markting-title-head {
    font-family: "Mj_Dinar One";
    font-size: 78px;
    font-weight: normal;
    margin-top: 20px;
    margin-bottom: 0;
    z-index: 1;
}

.digital-markting-subtitle {
    font-size: 34px;
    color: #d3d3d3;
    margin-top: 0;
}

.dm-position {
    height: 610px;
    position: inherit;
}

.header-image-digital-markting {
    position: absolute;
    top: 0;
    right: 0;
    overflow: hidden;
}

.flex-end {
    justify-content: flex-end;
}

#digital-markting-img {
    height: 740px;
}

#call-center-digital-markting {
    padding: 45px 0;
}

#call-center-digital-markting::before {
    right: 35%;
}

#header-seo-image {
    width: 100%;
}

#header-seo-title {
    margin-top: -240px;
}

.header-yellow-title {
    font-family: "Mj_Dinar One";
    font-weight: normal;
    font-size: 58px;
    color: #ffa300;
    text-align: center;
    margin: 0;
}

#header-seo-subtitle {
    margin: 0;
    text-align: center;
    color: #d3d3d3;
    font-size: 24px;
}

.card-plan {
    background-color: #1e263b;
    border-radius: 25px;
}

.card-plan-title {
    font-size: 32px;
    text-align: center;
    margin-top: 25px;
}

.card-plan-icon {
    width: 150px;
    height: 150px;
    border-radius: 150px;
    background-color: #111520;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -70px;
    position: relative;
}

.radio-checked {
    padding-right: 50px;
}

.radio-checked li {
    font-size: 18px;
    list-style-image: url("../image/elements/icons/check-small.svg");
    margin-bottom: 15px;
}

.card-plan-price {
    background-color: #26304a;
    text-align: center;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}

.cpp-title {
    font-size: 28px;
}

.cpp-price {
    font-size: 34px;
}

.cpi-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.cpi-center::before {
    content: " ";
    width: 210px;
    height: 93px;
    background-image: url("../image/elements/half-cycle.png");
    background-size: 100%;
    position: absolute;
}

.cpi-gray-blue {
    background-image: -moz-linear-gradient(
            90deg,
            rgb(34, 102, 228) 0%,
            rgb(78, 44, 165) 100%
    );
    background-image: -webkit-linear-gradient(
            90deg,
            rgb(34, 102, 228) 0%,
            rgb(78, 44, 165) 100%
    );
    background-image: -ms-linear-gradient(
            90deg,
            rgb(34, 102, 228) 0%,
            rgb(78, 44, 165) 100%
    );
}

.cpi-gray-pink {
    background-image: -moz-linear-gradient(
            90deg,
            rgb(212, 63, 123) 0%,
            rgb(182, 50, 95) 100%
    );
    background-image: -webkit-linear-gradient(
            90deg,
            rgb(212, 63, 123) 0%,
            rgb(182, 50, 95) 100%
    );
    background-image: -ms-linear-gradient(
            90deg,
            rgb(212, 63, 123) 0%,
            rgb(182, 50, 95) 100%
    );
}

.cpi-gray-orange {
    background-image: -moz-linear-gradient(
            90deg,
            rgba(244, 132, 49, 0.99608) 0%,
            rgb(224, 88, 70) 100%
    );
    background-image: -webkit-linear-gradient(
            90deg,
            rgba(244, 132, 49, 0.99608) 0%,
            rgb(224, 88, 70) 100%
    );
    background-image: -ms-linear-gradient(
            90deg,
            rgba(244, 132, 49, 0.99608) 0%,
            rgb(224, 88, 70) 100%
    );
}

.cpi-icon-style {
    width: 85px;
    height: 85px;
    display: block;
    background-size: 100%;
}

.cpi-icon-consulting {
    background-image: url("../image/elements/icons/consulting.svg");
}

.cpi-icon-jet {
    background-image: url("../image/elements/icons/jet.svg");
}

.cpi-icon-target {
    background-image: url("../image/elements/icons/target.svg");
}

.motion-graphic-banner {
    background-color: #01615f;
    overflow: hidden;
}

#mg-title {
    position: relative;
    font-family: "Mj_Dinar One";
    font-weight: normal;
    font-size: 54px;
    z-index: 2;
    margin: 0;
    margin-top: 130px;
}

#mg-subtitle {
    z-index: 2;
    position: relative;
    margin: 0;
    color: #d3d3d3;
    font-size: 32px;
}

.naghshe-jahan-square {
    height: 333px;
    position: relative;
}

.emam-mosque {
    width: 100%;
    height: 100%;
    background-image: url("../image/motion/naghshe-jahan.webp");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center bottom;
    margin-top: 50px;
    animation: 1s emam-mosque;
    position: relative;
    z-index: 1;
}

@keyframes emam-mosque {
    0% {
        background-position-y: 333px;
    }
    100% {
        background-position: 0;
    }
}

.naghshe-jahan-sky {
    width: 500px;
    height: 167px;
    position: absolute;
    background-image: url("../image/motion/sky.webp");
    background-size: 100% 100%;
    left: 0;
    animation: linear 10s naghshe-jahan-sky;
    animation-iteration-count: infinite;
}

@keyframes naghshe-jahan-sky {
    0% {
        left: 0;
    }
    50% {
        left: 50px;
    }
}

.naghshe-jahan-sky-two {
    width: 140px;
    height: 63px;
    position: absolute;
    background-image: url("../image/motion/sky-two.webp");
    background-size: 100% 100%;
    top: 70px;
    right: -50px;
    z-index: 1;
    animation: linear 20s naghshe-jahan-sky-two;
    animation-iteration-count: infinite;
}

@keyframes naghshe-jahan-sky-two {
    0% {
        right: -50px;
    }
    50% {
        right: 50px;
    }
}

.light-mgb {
    width: 100%;
    height: 383px;
    position: absolute;
    top: 0;
    right: 0;
    overflow: hidden;
}

.light-mgb::before {
    content: "";
    width: 2000px;
    height: 2000px;
    background-image: url("../image/motion/light.svg");
    background-size: 130% 130%;
    background-position: center center;
    position: absolute;
    right: calc(50% - 1000px);
    top: calc(50% - 1000px);
    animation: linear 50s light-mgb;

    animation-iteration-count: infinite;
}

@keyframes light-mgb {
    0% {
        transform: rotate(360deg);
    }
}

.motion-graphic-banner-two {
    background-color: #015250;
    margin-top: -10px;
    position: relative;
}

.motion-graphic-banner-two::after {
    content: "";
    width: 100%;
    height: 82px;
    background-image: url(../image/motion/sky-foot.svg);
    /* background-size: auto; */
    background-size: 100%;
    position: absolute;
    background-position-y: bottom;
    background-repeat: repeat-x;
    bottom: 0;
    right: 0;
    animation: linear 30s motion-graphic-banner-two;
    animation-iteration-count: infinite;
}

@keyframes motion-graphic-banner-two {
    0% {
        background-position-x: 1920px;
    }
}

.motion-graphic-bicycle {
    width: 340px;
    height: 340px;
    background-image: url("../image/motion/bicycle.webp");
    background-size: 100% 100%;
    position: absolute;
    left: 80px;
    top: 80px;
    z-index: 1;
    animation: 3s motion-graphic-bicycle;
}

@keyframes motion-graphic-bicycle {
    0% {
        left: -340px;
    }
}

.mg-video-item {
    width: 100%;
    height: 160px;
    background-color: #151a29;
    border-radius: 25px;
    overflow: hidden;
    position: relative;
    margin-bottom: 20px;
}

.mg-video-item img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
}

.mg-video-content {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 25px;
    background-color: rgba(24, 30, 47, 0.8);
}

.mg-video-content span {
    display: block;
    font-size: 18px;
}

.duration-video {
    width: fit-content;
    background-color: #181e2f;
    color: #878787;
    font-size: 14px !important;
    padding: 0 10px;
    border-radius: 5px;
    margin-top: 10px;
}

.mg-play-icon {
    width: 85px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: rgba(212, 66, 127, 0.9);
    position: absolute;
    bottom: 0;
    left: 0;
    border-top-right-radius: 70px;
    z-index: 1;
    transition: 0.3s;
}

.mg-video-item:hover > .mg-play-icon {
    width: 100%;
    height: 100%;
    border-top-right-radius: 0;
}

.mg-play-icon::before {
    content: "";
    width: 38px;
    height: 46px;
    display: block;
    background-image: url("../image/elements/icons/play-fill.png");
    background-size: 100% 100%;
}

.mg-rayana-properties {
    width: 500px;
    float: left;
    margin-top: 30px;
    margin-bottom: 80px;
    margin-left: 100px;
}

.mg-property {
    display: flex;
    align-items: center;
    background-color: #014544;
    border-radius: 15px;
}

.mg-property span {
    font-size: 22px;
    margin-right: 10px;
}

.mg-property-icon {
    width: 58px;
    height: 58px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #008a85;
    border-radius: 15px;
}

.mgp-icon {
    width: 42px;
    height: 42px;
    display: block;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
}

.mgpi-yellow {
    background-color: #ffb56b;
}

.mgpi-violet {
    background-color: #8679ff;
}

.mgpi-red {
    background-color: #fe8882;
}

.mgpi-green {
    background-color: #6fd96f;
}

.mgp-icon-one {
    background-image: url("../image/elements/icons/mg-one.svg");
}

.banner-apk {
    background-image: -moz-linear-gradient(
            0deg,
            rgb(34, 5, 84) 0%,
            rgb(62, 8, 103) 100%
    );
    background-image: -webkit-linear-gradient(
            0deg,
            rgb(34, 5, 84) 0%,
            rgb(62, 8, 103) 100%
    );
    background-image: -ms-linear-gradient(
            0deg,
            rgb(34, 5, 84) 0%,
            rgb(62, 8, 103) 100%
    );
    position: relative;
}

.banner-apk::after {
    content: "";
    width: 100%;
    height: 75px;
    background-image: url("../image/elements/curve.png");
    background-position: center;
    position: absolute;
    bottom: 0;
    right: 0;
}

.apk-title-head {
    font-family: "Mj_Dinar One";
    font-size: 52px;
    font-weight: normal;
    margin-bottom: 10px;
}

.apk-subtitle {
    margin: 0;
    color: #d3d3d3;
    font-size: 28px;
}

.voip-title-head {
    font-family: "Mj_Dinar One", "IRANSansWebFaNum";
    font-size: 52px;
    font-weight: normal;
    margin-bottom: 10px;
}

.voip-subtitle {
    margin: 0;
    color: #d3d3d3;
    font-size: 28px;
}

.mb-35 {
    margin-bottom: 35px;
}

.mb-55 {
    margin-bottom: 55px;
}

.apk-title-btn {
    height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #262f4a;
    border-radius: 15px;
    text-align: center;
    color: #fff;
    font-size: 24px;
}

.apk-title-btn i {
    display: block;
    width: 80px;
    height: 80px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 150px;
    margin-bottom: 5px;
    background-size: 75%;
    background-position: center;
    background-repeat: no-repeat;
}

.apt-green {
    background-image: -moz-linear-gradient(
            90deg,
            rgb(56, 128, 104) 0%,
            rgb(63, 211, 157) 100%
    );
    background-image: -webkit-linear-gradient(
            90deg,
            rgb(56, 128, 104) 0%,
            rgb(63, 211, 157) 100%
    );
    background-image: -ms-linear-gradient(
            90deg,
            rgb(56, 128, 104) 0%,
            rgb(63, 211, 157) 100%
    );
}

.apt-blue {
    background-image: -moz-linear-gradient(
            90deg,
            rgb(31, 92, 145) 0%,
            rgb(46, 185, 219) 100%
    );
    background-image: -webkit-linear-gradient(
            90deg,
            rgb(31, 92, 145) 0%,
            rgb(46, 185, 219) 100%
    );
    background-image: -ms-linear-gradient(
            90deg,
            rgb(31, 92, 145) 0%,
            rgb(46, 185, 219) 100%
    );
}

.apt-pink {
    background-image: -moz-linear-gradient(
            90deg,
            rgb(183, 21, 183) 0%,
            rgb(255, 146, 93) 100%
    );
    background-image: -webkit-linear-gradient(
            90deg,
            rgb(183, 21, 183) 0%,
            rgb(255, 146, 93) 100%
    );
    background-image: -ms-linear-gradient(
            90deg,
            rgb(183, 21, 183) 0%,
            rgb(255, 146, 93) 100%
    );
}

.apk-titles-coniner {
    margin-bottom: 20px;
}

.portfolio-app {
    display: flex;
    justify-content: space-around;
}

.about-position {
    height: 320px;
    position: static;
}

#about-img {
    height: auto;
    width: 100%;
}

.content-card {
    background-color: #1e263b;
    border-radius: 15px;
    overflow: hidden;
}

.content-card-title {
    font-family: "Mj_Dinar One";
    font-size: 52px;
    font-weight: normal;
    margin-bottom: 0;
}

#contact-img {
    height: 500px;
}

.contact-image-position {
    height: 480px;
}

.mt-0 {
    margin-top: 0;
}

#voip-ipphone-image {
    margin-bottom: 95px;
}

#voip-banner {
    align-items: center;
}

#voip-banner::before {
    z-index: 0;
    content: "";
    width: 700px;
    height: 481px;
    background-image: url("../image/voip/voip-map.png");
    background-size: 100%;
    position: absolute;
    top: 20px;
    right: 150px;
}

#voip-banner > * {
    z-index: 1;
}

.voip-hardware-image {
    margin: 0;
}

.blue-before-title {
    padding-right: 10px;
    font-size: 18px;
    position: relative;
}

.blue-before-title::before {
    content: "";
    width: 8px;
    height: 22px;
    background-color: rgb(1, 130, 240);
    position: absolute;
    right: -10px;
    top: 4px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
}

.head-bb-title {
    margin-top: 0;
    position: relative;
    font-size: 32px;
    padding-right: 25px;
}

.head-bb-title::before {
    content: "";
    width: 10px;
    height: 40px;
    background-color: rgb(1, 130, 240);
    position: absolute;
    right: 0;
    top: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
}

.blog-categories {
    margin: 0;
    margin-bottom: 10px;
    padding-right: 15px;
}

.blog-categories a {
    color: #c4c4c4;
    text-decoration: none;
}

.blog-categories a:hover {
    color: #fff;
}

.blog-categories li::marker {
    color: #3b455e;
}

.blog-last-video {
    width: 100%;
    height: 220px;
    display: block;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
}

.blog-last-video figure {
    margin: 0;
    height: 100%;
}

.blog-last-video img {
    width: 100%;
    height: 100%;
}

.blog-last-video:hover > .mg-play-icon {
    width: 100%;
    height: 100%;
    border-top-right-radius: 0;
}

.card-rn-post {
    width: 100%;
    display: flex;
    justify-content: space-between;
    color: #c4c4c4;
    text-decoration: none;
    border-bottom: 1px solid #1a2133;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.card-rn-post:hover {
    color: #fff;
}

.card-rn-post time {
    width: 45px;
    height: 45px;
    display: flex;
    text-align: center;
    background-color: #2d364f;
    border-radius: 150px;
    font-size: 12px;
    line-height: 18px;
    flex-direction: column;
    justify-content: center;
}

.card-rn-post h4 {
    width: 83%;
    margin: 0;
}

.hamburger-controller {
    cursor: pointer;
    display: none;
}

#digital-header-title {
    z-index: 1;
}

.pt-45 {
    padding-top: 45px;
}

#digital-marketing-header-content {
    z-index: 1;
}

#about-section {
    overflow: hidden;
    position: relative;
}