@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
:root {
    --baseFont: "Montserrat", sans-serif;
    --topBg: #EBEBEB;
    --primaryColor: #0055BB;
    --primaryDark: #024392;
    --primaryLightBg: rgba(0,85,187,0.05);
    --secondaryColor: #EC6608;
    --secondaryDark: #D75B04;
    --secondaryLightBg: rgba(236,102,8,0.05);
    --secondaryLightBg2: rgba(236,102,8,0.10);
    --secondaryGradientLight: linear-gradient(120deg, rgba(255,202,92,0.2) 0%,rgba(255,110,0,0.2) 100%);
    --baseColor: #1E1E1E;
    --baseColorLight: rgba(30,30,30,0.8);
    --lightGray: #6F6F6F;
    --borderColor: #C6CDD7;
    --footerBg: #F8F9FB;
    --white: #fff;
    --halfWhite: rgba(255,255,255,0.5);
    --black: #000;
}
body {
    overflow-x: hidden;
    overflow-y: initial;
}
body {
    font-family: var(--baseFont);
}
ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
img {
    max-width: 100%;
}
a, .btn {
    -webkit-transition: all 300ms ease-in-out 0s;
    -o-transition: all 300ms ease-in-out 0s;
    transition: all 300ms ease-in-out 0s;
}
a, a:hover {
    color: inherit;
    text-decoration: none;
}
.primaryColor {
    color: var(--primaryColor)
}
a.primaryColor:hover {
    color: var(--primaryDark)
}
.secondaryColor {
    color: var(--secondaryColor);
}
a.secondaryColor:hover {
    color: var(--secondaryDark);
}
.baseColor {
    color: var(--baseColor);
}
.baseColorLight {
    color: var(--baseColorLight);
}
.lightGray {
    color: var(--lightGray);
}
.btn {
    font-size: 15px;
    font-weight: 600;
    line-height: normal;
    padding: 16px 40px;
    border-radius: 40px;
}
.btn.btnMd {
    padding: 14px 20px;
}
.btn.btnSm {
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 400;
}
.btnSecondary {
    background-color: var(--secondaryColor);
    color: var(--white);
}
.btnSecondary:hover {
    background-color: var(--secondaryDark);
    color: var(--white);
}
.btnPrimary {
    background-color: var(--primaryColor);
    color: var(--white);
}
.btnPrimary:hover {
    background-color: var(--primaryDark);
    color: var(--white);
}
.btnPrimaryOutline {
    border-color: var(--primaryColor);
    background-color: var(--white);
    color: var(--primaryColor);
}
.btnPrimaryOutline:hover {
    border-color: var(--primaryColor);
    background-color: var(--primaryColor);
    color: var(--white);
}

.xlTitle {
    font-size: 52px;
    font-weight: 700;
    line-height: normal;
}
.lgTitle {
    font-size: 40px;
    font-weight: 700;
    line-height: normal;
}
.mdTitle {
    font-size: 36px;
    font-weight: 700;
    line-height: normal;
}
.smTitle {
    font-size: 28px;
    font-weight: 700;
    line-height: normal;
}






/* menu toggle */
.hamburger {
    width: 30px;
    height: 20px;
    position: relative;
    cursor: pointer;
    z-index: 5;
}
.hamburger .bar {
    padding: 0;
    width: 30px;
    height: 2px;
    background-color: var(--primaryColor);
    display: block;
    border-radius: 4px;
    transition: all 0.4s ease-in-out;
    position: absolute;
}
.bar1 {
    top: 0;
}
.bar2, .bar3 {
    top: 9px;
}
.bar3 {
    right: 0;
}
.bar4 {
    bottom: 0;
}
.actNav .hamburger>.bar1 {
    transform: translateX(40px);
    background-color: transparent;
}
.actNav .hamburger>.bar2 {
    transform: rotate(45deg);
}
.actNav .hamburger>.bar3 {
    transform: rotate(-45deg);
}
.actNav .hamburger>.bar4 {
    transform: translateX(-40px);
    background-color: transparent;
}
/* menu toggle */

.hTopBar {
    background-color: var(--topBg);
    position: relative;
    z-index: 100;
    font-size : 16px;
    line-height : 16px;
}
.actNav .hTopBar {
    z-index: 99;
}
.topLinks {
    display: inline-flex;
    font-size : 13px;
    line-height : 16px;
    letter-spacing : 0.48px;
}
.topLinks > li > a {
    display: block;
    text-transform: uppercase;
    padding: 13px 22px;
}
.topLinks > li > a:not(.active):hover{
    background-color: var(--halfWhite);
}
.topLinks > li > a.active {
    background-color: var(--white);
}

.topRightlinks {
    font-size: 14px;
    display: inline-flex;
    gap: 30px;
    align-items: center;
}
.topRightlinks .iconLink {
    display: flex;
}
.iconLink, .iconBtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}
.topRightlinks > li > a.active {
    color: var(--secondaryColor);
}

.headerSection {
    background-color: var(--white);
    position: sticky;
    top: -1px;
    z-index: 99;
    box-shadow: 0 15px 15px rgba(0,0,0,0.03);
    font-size: 14px;
}
.menuLinks > li > a {
    display: block;
    padding: 30px 0;
    position: relative;
    /* text-transform: uppercase; */
}
.menuLinks > li:hover > a, .menuLinks > li > a.active {
    color: var(--primaryColor);
}
.menuLinks > li.mmCol > a,
.menuLinks > li.ddCol > a {
    padding-inline-end: 20px;
}
.menuDdIcon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 8px;
}
.mmTitle {
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    display: flex;
    gap: 10px;
    align-items: center;
    border-bottom: 1px solid rgba(0,0,0,0.2);
    padding: 10px 0;
}
.mmLinks > ul > li + li {
    margin-top: 10px;
}
.mmLinks a {
    display: block;
}
.mmLinks a:hover, .mmLinks a.active, .ddLinks a:hover, .ddLinks a.active {
    color: var(--secondaryDark);
}
.ddMenuCol {
    position: relative;
}
.ddLinks > li > a {
    display: block;
    padding: 5px 0;
}
.ddCol {
    position: relative;
}


.siteLogo {
    width: 95px;
    object-fit: contain;
}



.bannerSection {
    position: relative;
    overflow: hidden;
    padding: 160px 0 80px;
}
.bannerSection::before {
    content: "";
    position: absolute;
    right: 0;
    top: -30px;
    width: 770px;
    height: 295px;
    max-width: 48vw;
    background-image: url('../images/banner-top-shape.svg');
    background-repeat: no-repeat;
    background-position: right top;
    background-size: contain;
}
.deviceName {
    display: block;
    font-size: 32px;
    font-weight: 700;
    line-height: normal;
    margin-top: 10px;
}
.bannerContentCol p {
    font-size: 22px;
    margin-bottom: 30px;
}
.bannerContentCol p.bLgText {
    font-size: 28px;
}
.bannerContentCol .xlTitle {
    margin-bottom: 15px;
}
.startingFrom {
    display: inline-block;
    color: var(--secondaryColor);
}
.sfTitle {
    display: block;
    text-align: center;
    font-size: 14px;
    line-height: normal;
}
.sfTextCol {
    display: flex;
    align-items: center;
    gap: 10px;
}
.sfLeftText {
    font-size: 46px;
    line-height: 1;
    font-weight: 700;
}
.smSf .sfLeftText {
    /* font-size: 40px; */
    font-size: 25px;
}

.sfRText {
    display: block;
    font-size: 20px;
    font-weight: 700;
    line-height: normal;
}
.smSf .sfRText {
    /* font-size: 18px; */
    font-size: 16px;
    line-height: 1;
}
.smSf .sfTitle {
    padding-bottom: 5px;
}
.sfRightText small {
    display: block;
    font-size: 12px;
    line-height: normal
}
.bannerBtnCol {
    padding-top: 30px;
}


.sectionSpace {
    padding: 30px 0;
}
.mdSectionSpace {
    padding: 70px 0 60px;
}
.titleCol {
    padding-bottom: 20px;
}
.lgText {
    font-size: 20px;
}
.mdText {
    font-size: 18px;
    line-height: 1.66;
}
.blankLink {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
}
.cardStyle1 {
    --cBr: 25px;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--cBr);
    box-shadow: 0 0 30px rgba(0,0,0,0.1);
    padding: 10px;
    transition: box-shadow 300ms ease-in-out 0s;
    background-color: var(--white);
}
.cardStyle1:hover {
    box-shadow: 0 0 30px rgba(0,0,0,0.2);
}
.cs1ContentCol {
    font-size: 17px;
    line-height: 1.4;
    padding: 18px 8px 10px;
}
.cs1Lbl {
    display: block;
    font-weight: bold;
    font-size: 25px;
    color: var(--lightGray);
    text-transform: uppercase;
}
.cs1Title {
    display: block;
    /* font-size: 18px; */
    font-size: 16px;
    font-weight: 600;
    margin: 8px 0;
}
.smText {
    font-size: 14px;
}
.xsText {
    font-size: 12px;
}
.arrowLink {
    display: inline-block;
    padding-inline-start: 18px;
    padding-inline-end: 10px;
    padding-block-start: 10px;
    padding-block-end: 10px;
    position: relative;
    z-index: 2;
    color: var(--primaryColor);
    transition: all 300ms ease-in-out 0s;
}
.arrowLink::before {
    content: "";
    position: absolute;
    left: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--primaryColor);
    opacity: 0.2;
    top: 50%;
    transform: translateY(-50%);
    transition: all 300ms ease-in-out 0s;
}
.secondaryLinkArrow.arrowLink::before {
    background-color: var(--secondaryColor);
}
.secondaryLinkArrow.arrowLink {
    color: var(--secondaryColor);
}
.arrowLink:hover {
    color: var(--primaryColor);
}
.secondaryLinkArrow.arrowLink:hover {
    color: var(--secondaryColor);
}
.arrowLink > svg {
    transition: transform 300ms ease-in-out 0s;
}
.arrowLink:hover::before, .cardStyle1:hover .arrowLink::before {
    opacity: 0.4;
}
.arrowLink:hover > svg, .cardStyle1:hover .arrowLink > svg {
    transform: translateX(5px);
}
.cs1BtmCol {
    padding: 10px;
    margin-top: auto;
}
.cs1ImgCol {
    position: relative;
    width: 100%;
    padding-top: calc(206 / 290 * 100%);
    overflow: hidden;
    border-radius: calc(var(--cBr) - 5px);
}
.lgCardStyle1 .cs1ImgCol {
    padding-top: calc(310 / 525 * 100%);
}
.cs1Img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.discoverSwiper {
    padding-bottom: 70px;
}
.discoverSwiper.swiper-cards .swiper-slide {
    transform-origin: center bottom;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* overflow: initial; */
    box-shadow: 0 0 25px rgba(0,0,0,0.15);
    border-radius: 30px;
    background-color: var(--white);
    overflow: hidden;
}
.discoverSlide {
    padding: 90px 60px;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
.discoverSlide::before, .discoverSlide::after {
    --cSize: 300px;
    content: "";
    position: absolute;
    border-radius: 50%;
    width: var(--cSize);
    height: var(--cSize);
    filter: blur(100px);
    pointer-events: none;
}
.discoverSlide::before {
    left: 0;
    bottom: 0;
    transform: translateX(-20%) translateY(30%);
    background-color: var(--primaryColor);
    opacity: 0.15;
}
.discoverSlide::after {
    right: 0;
    top: 50%;
    transform: translateX(30%) translateY(-50%);
    background-color: var(--secondaryColor);
    opacity: 0.1;
}

.contentColStyle p {
    font-size: 18px;
}
.contentColStyle p.dLgText {
    font-size: 22px;
}

.discoverSwiper  .swiper-slide {
    height: auto;
}
.sPaginationStyle .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: var(--lightGray);
    opacity: 1;
    border-radius: 15px;
    transition: all 500ms ease-in-out 0s;
}
.sPaginationStyle .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: var(--secondaryColor);
    width: 24px;
}

.primarLightBgCol {
    position: relative;
    overflow: hidden;
    background-color: var(--primaryLightBg);
}
.primarLightBgCol::before, .primarLightBgCol::after {
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}
.primarLightBgCol::before {
    left: 0;
    width: 328px;
    background-image: url('../images/primary-bg-before.svg');
    background-position: left top;
}
.primarLightBgCol::after {
    right: 0;
    width: 200px;
    background-image: url('../images/primary-bg-after.svg');
    background-position: right bottom;
}


.cs1ImgCol2 {
    position: relative;
    text-align: center;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 0 10px;
}
.imgBgShape {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondaryColor);
    padding: 15px;
    opacity: 0.5;
}
.sStyleCard:nth-child(2n) .imgBgShape {
    color: var(--primaryColor);
}
.imgBgShape svg {
    max-width: 90%;
    max-height: 85%;
    object-fit: contain;
}
.cs1Img2 {
    position: relative;
    max-height: 100%;
    object-fit: contain;
    max-width: 100%;
}


.secondaryLightBgCol {
    position: relative;
    overflow: hidden;
    background-color: var(--secondaryLightBg);
}
.secondaryLightBgCol::before, .secondaryLightBgCol::after {
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}
.secondaryLightBgCol::before {
    left: 0;
    width: 339px;
    background-image: url('../images/secondary-bg-before.svg');
    background-position: left bottom;
}
.secondaryLightBgCol::after {
    right: 0;
    width: 208px;
    background-image: url('../images/secondary-bg-after.svg');
    background-position: right top;
}
.topCenterStar {
    position: absolute;
    left: 40%;
    top: 30px;
}
.imgBr-70 {
    border-radius: 70px;
}
.cs1ContentCol .smText {
    line-height: 1.7;
}
.dlListStyle dd {
    margin-bottom: 15px;
}
.gradientBgSection {
    padding: 45px 100px;
    border-radius: 30px;
    background: var(--secondaryGradientLight);
}

.cardStyle2 {
    border-radius: 30px;
    border: 1px solid var(--borderColor);
    padding: 40px 50px 35px;
    box-shadow: 0 0 30px rgba(0,0,0,0.05);
    background-color: var(--white);
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow 300ms ease-in-out 0s;
}
.cardStyle2:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.cs2IconCol {
    width: 74px;
    height: 74px;
    background-color: #FFF5EE;
    border-radius: 20px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondaryColor);
}
.cs2IconCol svg {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.cs2IconColMain + .cs2ContentCol {
    margin-top: 20px;
}
.cs2Title {
    font-size: 22px;
    font-weight: 700;
}
.cs2Title + p {
    padding-top: 5px;
}
.cs2LinkCol {
    margin-top: auto;
    padding-top: 10px;
}
.cardStyle2:hover .arrowLink::before {
    opacity: 0.4;
}
.cardStyle2:hover .arrowLink > svg {
    transform: translateX(5px);
}


.reachColMain {
    overflow: hidden;
}
.reachCol {
    border-left: 1px solid #D9D9D9;
}
.iconCard {
    font-size: 18px;
    line-height: 1.44;
    display: inline-block;
    max-width: 220px;
    position: relative;
    overflow: hidden;
    transition: color 300ms;
}
.cardIcon  {
    color: var(--secondaryColor);
}
.iconCard:hover .cardIcon  {
    color: var(--primaryColor);
}
.iconCard .cardIcon {
    transition: color 300ms;
}

.footerTopCol {
    background-color: var(--footerBg);
    padding: 80px 0 65px;
}
.copyrightCol {
    background-color: var(--white);
    padding: 55px 0 40px;
    text-align: center;
    font-size: 14px;
}



.footerTopSection {
    display: grid;
    grid-template-columns: 440px 230px auto 180px;
    grid-gap: 90px;
    font-size: 14px;
    line-height: 1.7;
    --bs-accordion-bg: transparent;
    --bs-primary-bg-subtle: transparent;
}
.lgFooterTitle {
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
}
.footerTopCol .accordion-body {
    padding: 0;
}
.footerTopCol .accordion-item {
    border-radius: 0;
    box-shadow: none;
    border: none;
    background-color: transparent;
}
.footerTopCol .accordion-button {
    padding: 15px 0;
    box-shadow: none;
    font-weight: 700;
    font-size: 18px;
}
.socialLinks > li {
    display: inline-block;
    vertical-align;
    middle;
}
.socialLinks > li + li {
    padding-left: 12px;
}
[dir="rtl"] .socialLinks > li + li {
    padding-left: 0px;
    padding-right: 12px;
}
.socialLinks a:hover {
    color: var(--primaryColor);
}

.footerLinks > li + li {
    margin-top: 10px;
}
.footerLinks a {
    opacity: 0.8;
}
.footerLinks a:hover {
    opacity: 1;
    color: var(--primaryColor);
}
.cardIcon svg {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}





/* voice internet page start */
.rightOffer {
    max-width: 1030px;
    margin: 0 auto;
}
.secondaryImgOverlay.cardStyle1 .cs1ImgCol:before {
    content: "";
    inset: 0;
    position: absolute;
    background: rgba(230, 108, 25, 0.15);
    z-index: 1;
}
.navTopMain {
    padding: 90px 0 40px;
    position: relative;
}
.navTopMain::before {
    content: "";
    background-image: url('../images/navshape.svg');
    background-repeat: no-repeat;
    background-position: top right;
    inset: 0;
    position: absolute;
    pointer-events: none;
    z-index: -1;
}
.navTabStyle ul li {
    display: inline-block;
    padding: 0 6px;
}
.navTabStyle ul li + li {
    /* margin-left: 12px; */
}
.navTabStyle ul li a {
    border-radius: 50px;
    padding: 8px 25px;
    display: inline-block;
    color: #6F6F6F;
    font-size: 16px;
    font-weight: 400;
    border: 1px solid var(--borderColor);
    line-height: 30px;
    background-color: var(--white);
}
.navTabStyle {
    padding-left: 10px;
    padding-right: 10px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    padding-bottom: 14px;
}
.navTabStyle ul li.active a {
    background-color: var(--secondaryColor);
    border: 1px solid var(--secondaryColor);
    color: #fff;
}
.bgSecondary-10 {
    background-color: var(--secondaryLightBg2);
}
.paraLink a {
    color: var(--primaryColor);
    font-weight: 500;
    text-decoration: underline;
}
.paraLink {
    line-height: 1.875;
    font-size: 16px;
    color: var(--baseColor);
}
.cardStyle3 {
    background-color: #fff;
    border: 1px solid #D3E1ED;
    border-radius: 10px;
    overflow: hidden;
    padding: 0 0 40px 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}
.cardStyle3 .cardBtn {
    margin-top: auto;
}
.cardStyle3 .cardStyleTop {
    position: relative;
    padding: 22px 15px 0 15px;
    min-height: 210px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.pricingCShape {
    position: absolute;
    left: -2px;
    right: -2px;
    bottom: -1px;
    z-index: 2;
    display: block;
    max-width: initial;
    width: calc(100% + 4px);
}
.cardStyle3 .cardTopInner {
    position: relative;
    display: flex;
    flex-direction: column;
}
.cardStyle3 .cardStyleTop h3 {
    font-size: 22px;
    font-weight: 700;
}
.cardStyle3 .cardTopInner .cs1BtmCol {
    margin: 0;
}
.cardStyle3 .cardBadge {
    width: 196px;
    margin: auto auto -30px;
    position: relative;
    padding: 10px 30px 40px;
    max-width: 95%;
    min-height: 84px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.cardStyle3 .cardBadge::before {
    content: "";
    width: 196px;
    height: calc(100% + 30px);
    position: absolute;
    top: 0;
    background: #142A80;
    border-radius: 50%;
    left: 50%;
    transform: translate(-50%,0);
    z-index: 1;
}
.cardStyle3 .cardBadge span {
    position: relative;
    z-index: 1;
    font-size: 11px;
    letter-spacing: 1px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    line-height: 17px;
    display: block;
}
.cardStyle3 .cardDesc {
    padding: 30px 22px 40px;
}
.cardStyle3.themeLightBlue .cardStyleTop h3 {
    color: var(--primaryColor);
}
.cardStyle3.themeLightBlue .cardStyleTop {
    background-color: var(--primaryLightBg);
}
.cardStyle3.themePrimary .cardStyleTop {
    background-color: var(--secondaryColor);
}
.cardStyle3.themePrimary .cardStyleTop h3,
.cardStyle3.themePrimary .cardStyleTop .startingFrom {
    color: var(--white);
}
.cardStyle3 .cardDesc h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--primaryColor);
    margin-bottom: 20px;
    min-height: 45px;
}
.mask1, .mask2 {
    width: 190px;
    height: 159px;
    -webkit-mask-image: url('../images/maskshape1.svg');
    mask-image: url('../images/maskshape1.svg');
    -webkit-mask-size: 100%;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.mask2 {
    width: 165px;
    height: 140px;
}
.mask1 img, .mask2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cardStyle4 {
    border: 1px solid #C6CDD7;
    padding: 34px 25px 25px;
    border-radius: 30px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.cardStyle4 .cardDesc h3 {
    color: var(--baseColor);
    font-size: 22px;
    font-weight: 700;
}
.cardStyle4 .cardDesc span {
    color: var(--baseColor);
    font-size: 16px;
    font-weight: 400;
}
.cardStyle4 .cs1BtmCol {
    padding-top: 30px;
}
.cardStyle4 .cardBadge {
    position: absolute;
    right: 0;
    top: 0;
    max-width: 157px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
}
.cardStyle4 .cardBadge:before {
    content: "";
    width: 196px;
    height: 110px;
    background: var(--primaryColor);
    position: absolute;
    border-radius: 50%;
    transform: translate(-50%,0);
    left: 50%;
    top: -50px;
    margin-left: 10px;
}
.cardStyle4 .cardBadge span {
    color: #fff;
    position: relative;
    padding: 8px 0;
    display: block;
}
.cardStyle4:hover .arrowLink::before {
    opacity: 0.4;
}
.cardStyle4:hover .arrowLink > svg {
    transform: translateX(5px);
}
.leadingLg {
    line-height: 1.375;
}
.cardStyle2.cardMd {
    padding: 37px 31px 31px 31px;
}
.cardStyle2 .cs2ContentCol h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--primaryColor);
}
.mobileOffers {
    background-color: var(--primaryLightBg);
}
.anchorLink a {
    color: var(--primaryColor);
    text-decoration: underline;
}
.paraLeadingLg {
    line-height: 35px;
}
[dir="rtl"] .cardStyle4 .cardBadge:before {
    margin-right: 10px;
}
[dir="rtl"] .cardStyle4 .cardBadge {
    right: auto;
    left: 0;
}

/* voice internet page end */




/* modem style start */
.bannerSectionStyle4 {
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}
.bannerSectionStyle4::before, .bannerSectionStyle4::after {
    content: "";
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    max-width: 35vw;
}
.bannerSectionStyle4::before {
    left: 0;
    bottom: 55px;
    width: 415px;
    height: 590px;
    background-image: url('../images/banner-before-4.svg');
    background-position: left bottom;
}
.bannerSectionStyle4::before {
    width: 299px;
    height: 431px;
    background-image: url('../images/banner-before-4-2.svg');
}
.bannerSectionStyle4::after {
    right: 0;
    top: 0;
    width: 415px;
    height: 595px;
    background-image: url('../images/banner-after-4.svg');
    background-position: right top;
}
.bannerSectionStyle4.bss4-2::after {
    background-image: url('../images/banner-after-4-2.svg');
}
.modemBannerStar {
    position: absolute;
    left: 40%;
    top: 30px;
}

.br50 {
    border-radius: 50px;
}
.secondaryLightBg2 {
    background-color: var(--secondaryLightBg2);
}
.lgCardStyle1 .cs1ContentCol {
    padding-top: 14px ;
    padding-bottom: 0px;
}
/* modem style end */


/* voice-plus style end */
.cardStyle5 {
    border-radius: 30px;
    border: 1px solid var(--borderColor);
    padding: 25px 22px;
    box-shadow: 0 0 30px rgba(0,0,0,0.05);
    background-color: var(--white);
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow 300ms ease-in-out 0s;
}
.cardStyle5:hover {
    box-shadow: 0 0 30px rgba(0,0,0,0.1);
}
.cs5Title {
    font-size: 22px;
    line-height: 1.36;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--primaryColor);
}
.cs5ContentCol p {
    line-height: 1.875;
}
.cs5LinkCol {
    margin-top: auto;
    padding-top: 10px;
}
.cardStyle5:hover .arrowLink > svg {
    transform: translateX(5px);
}
.accordionStyle2 {
    --titleFont: 22px;
    --textSz: 18px;
    --textLh: 1.35;
    --xSpace: 30px;
    --ySpace: 23px;
    --itemGap: 40px;
    --bs-accordion-active-bg: transparent;
    --bs-accordion-border-radius: 10px;
}
.accordionStyle2 .accordion-item + .accordion-item {
    margin-top: var(--itemGap);
}
.accordionStyle2 .accordion-item,
.accordionStyle2 .accordion-item:not(:first-of-type) {
    border: 1px solid var(--borderColor);
}
.accordionStyle2 .accordion-item {
    border-radius: var(--bs-accordion-border-radius);
}
.accordionStyle2 .accordion-body p {
    font-size: var(--textSz);
    line-height: 1.94;
}
.accordionStyle2 .accordion-body p strong {
    font-size: 111%;
}
.accordionStyle2 .accordion-button {
    font-size: var(--titleFont);
    font-weight: 700;
    line-height: var(--textLh);
    padding: var(--ySpace) var(--xSpace);
    box-shadow: none;
    background-color: transparent;
}
.accordionStyle2 .accordion-body {
    padding: 0 var(--xSpace) var(--ySpace);
}

/* voice-plus style end */

.dlListStyle li + li {
    margin-top: 7px;
}

.topShapeSection, .bottomShapeSection {
    position: relative;
    overflow: hidden;
}
.topShapeSection {
    padding-top: calc((86 / 1600 * 100%) + 20px) !important;
}
.bottomShapeSection {
    padding-bottom: calc((86 / 1600 * 100%) + 20px) !important;
}
.sectionTopShape, .sectionBtmShape {
    position: absolute;
    left: -2px;
    width: calc(100% + 4px);
    height: auto;
    display: block;
    max-width: initial;
}
.sectionTopShape {
    top: -1px;
}
.sectionBtmShape {
    bottom: -1px;
}

.xxsText {
    font-size: 9px;
}
.pricingBtnsCol {
    padding-left: 20px;
    padding-right: 20px;
}
.pricingBtnsCol .btn {
    font-size: 14px;
    padding: 15px 20px;
}


.langDDCol {
    position: relative;
    width: 100px;
}
.langDDCol > .btn {
    width: 100%;
    justify-content: flex-start;
}
.langOptions {
    position: absolute;
    right: 0;
    min-width: 100%;
    top: calc(100% + 10px);
    background-color: var(--white);
    z-index: 1;
    padding: 8px 10px 10px;
    white-space: nowrap;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: all 400ms ease-in-out 0s;
    box-shadow: 0 10px 10px rgba(0,0,0,0.05);
}
[dir="rtl"] .langOptions {
    right: auto;
    left: 0;
}
.actLangDD .langOptions {
    opacity: 1;
    pointer-events: initial;
    top: calc(100% + 3px);
}
.langOptions a {
    display: flex;
    align-items: center;
    padding: 2px 0;
    gap: 5px;
    font-size: 12px;
}
.langOptions a:hover {
    color: var(--secondaryColor);
}
.langDdIcon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 7px;
    object-fit: contain;
}
[dir="rtl"] .langDdIcon {
    right: auto;
    left: 10px;
}



.backToTopBtn {
    opacity: 0;
    pointer-events: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: var(--primaryColor);
    color: white;
    cursor: pointer;
    padding: 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 300ms ease-in-out 0s;
    width: 50px;
    height: 50px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
    border: 2px solid var(--white);
}
[dir="rtl"] .backToTopBtn {
    right: auto;
    left: 20px;
}
.backToTopBtn.showTopBtn {
    opacity: 1;
    pointer-events: initial;
}
.backToTopBtn:hover {
    opacity: 0.8;
}




/* Direction RTL Start */
[dir="rtl"] .menuDdIcon {
    right: auto;
    left: 0;
}
[dir="rtl"] .arrowLink::before {
    left: auto;
    right: 0;
}
[dir="rtl"] .arrowLink:hover > svg,
[dir="rtl"] .cardStyle1:hover .arrowLink > svg,
[dir="rtl"] .cardStyle2:hover .arrowLink > svg,
[dir="rtl"] .cardStyle5:hover .arrowLink > svg,
[dir="rtl"] .cardStyle4:hover .arrowLink > svg {
    transform: translateX(-5px) scaleX(-1);
}
[dir="rtl"] .arrowLink > svg {
    transform: scaleX(-1);
}
[dir="rtl"] .bannerSection::before,
[dir="rtl"] .primarLightBgCol::after,
[dir="rtl"] .secondaryLightBgCol::after,
[dir="rtl"] .bannerSectionStyle4::after {
    left: -2px;
    right: auto;
    transform: scaleX(-1);
}
[dir="rtl"] .primarLightBgCol::before,
[dir="rtl"] .secondaryLightBgCol::before,
[dir="rtl"] .bannerSectionStyle4::before {
    left: auto;
    right: -2px;
    transform: scaleX(-1);
}
[dir="rtl"] .navTopMain::before {
    transform: scaleX(-1);
}
[dir="rtl"] .modemBannerStar {
    left: auto;
    right: 40%;
}
[dir="rtl"] .bannerBtnCol .iconBtn svg {
    transform: rotate(180deg);
}
/* Direction RTL End */




.filterDropdown {
    position: relative;
}
.filterDropdownTrigger, .mbDropdownTrigger {
    border-radius: 50px;
    padding: 13px 25px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #6F6F6F;
    background-color: var(--white);
    font-size: 16px;
    font-weight: 400;
    border: 1px solid var(--borderColor);
    line-height: normal;
    cursor: pointer;
}
.activeFilterDD .filterDropdownTrigger {
    background-color: var(--primaryColor);
    border-color: var(--primaryColor);
    color: var(--white);
}
.filterDropdownTrigger svg, .mbDropdownTrigger svg {
    color: var(--black);
}
.activeFilterDD .filterDropdownTrigger svg {
    color: var(--white);
}
.filterDropdownBody {
    position: absolute;
    top: calc(100% + 5px);
    z-index: 5;
    left: 0;
    background-color: var(--white);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    width: 300px;
    padding: 15px 15px 15px;
    text-align: left;
    display: none;
}
.filterDropdown.activeFilterDD .filterDropdownBody {
    display: block;
}
.filterChips {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: start;
    gap: 10px;
}
.chipsText {
    position: relative;
    display: flex;
    padding: 7px 10px 8px;
    background-color: #f4f4f4;
    color: var(--baseColor);
    line-height: normal;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    align-items: center;
    gap: 4px;
}
.chipsText:not(.active):hover {
    background-color: #ebf4ff;
}
.chipsText.active {
    background-color: var(--primaryColor);
    color: var(--white);
}
.chipsText::before {
    content: "";
    width: 14px;
    height: 11px;
    display: none;
    background-image: url('../images/white-check.svg');
    background-repeat: no-repeat;
    background-size: contain;
}
.chipsText.active::before {
    display: block;
}

.filterDropdownBtmCol {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid var(--borderColor);
    margin-top: 15px;
}
.resetTrigger, .resetAllTrigger {
    color: var(--secondaryColor);
    cursor: pointer;
}
.addFilterTrigger, .addAllFilterTrigger {
    display: inline-block;
    padding: 5px 20px 8px;
    border-radius: 40px;
    font-size: 14px;
    line-height: normal;
    background-color: var(--primaryColor);
    color: var(--white);
    cursor: pointer;
}
.disabledChipsCol .filterChips {
    pointer-events: none;
    opacity: 0.5;
}
.form-check.radioStyle .form-check-input {
    transform: translateY(3px);
}
.form-check.radioStyle .form-check-label {
    font-size: 15px;
    line-height: normal;
    font-weight: 500;
}
.form-check-input:checked {
    background-color: var(--secondaryColor);
    border-color: transparent;
}
.form-check-input:focus {
    border-color: transparent;
    box-shadow: 0 0 0 .25rem rgba(13,110,253,.05);
}
.verticalList > li + li {
    margin-top: 10px;
}
.text-transform-initial {
    text-transform: initial;
}
.smartphoneOfferCol .cs1Title {
    font-size: 16px;
}


.mapColMain {
    --bRadius: 30px;
    overflow: hidden;
    border-radius: var(--bRadius);
    position: relative;
}
.mapColMain iframe {
    display: block;
    border-radius: var(--bRadius);
}
.coverageFieldsCol {
    position: absolute;
    left: 40px;
    top: 25px;
    width: 350px;
    z-index: 5;
}
.coverageInputFieldCol, .coverageRadioOptions {
    background-color: rgba(255,255,255,0.95);
    border-radius: 20px;
    border: 1px solid var(--borderColor);
}
.coverageInputFieldCol {
    padding: 8px 15px;
}
.coverageInputFieldCol + .coverageRadioOptions {
    margin-top: 8px;
}
.coverageInputFieldCol .form-control {
    background-color: transparent;
    border: none;
    box-shadow: none;
}
.coverageRadioOptions .form-check.radioStyle .form-check-input {
    transform: translateY(-3px);
}
.reteList .verticalList {
    padding: 18px 15px;
}
.reteTrigger {
    padding: 12px 15px;
    cursor: pointer;
}
.coverageBadge {
    width: 16px;
    height: 16px;
    background-color: #5894DF;
    border-radius: 4px;
}
.coverageBadge.badgeColor2 {
    background-color: #0055BB;
}
.coverageBadge.badgeColor3 {
    background-color: #10731A;
}
.coverageBadge.badgeColor4 {
    background-color: #EC6608;
}
.roman-list {
    list-style: none;
    counter-reset: roman-counter;
}
.roman-list li:before {
    content: "("counter(roman-counter, lower-roman) ") ";
    counter-increment: roman-counter;
}
ol.roman-list > li + li {
    margin-top: 8px;
}
.cursor-pointer {
    cursor: pointer;
}
.mdText .smText {
    line-height: 1.4;
}
.skewPrimaryBgCol {
    position: relative;
    z-index: 2;
}
.skewPrimaryBgCol::before {
    content: "";
    background-color: #FCF0E8;
    position: absolute;
    left: -10px;
    width: 120vw;
    top: 0;
    bottom: 0;
    z-index: -1;
    transform: skewX(-15deg);
}
.sectionTopShapeRight, .sectionBtmShapeRight {
    position: absolute;
    right: 0;
    z-index: 5;
}
.sectionTopShapeRight {
    top: 0;
}
.sectionBtmShapeRight {
    bottom: 0;
}



.accordionStyle2 .accordion-body p span {
    font-weight: 700;
}
.cardBadgeOuter .cardDesc  h4 {
    min-height: initial;
    margin-bottom: 0;
}
.cardBadgeOuter .cardDesc p {
    color: #6F6F6F;
    font-size: 14px;
}
.cardStyle3 .cardBtn {
    padding: 0 22px 0;
}
.validText {
    color: var(--secondaryColor);
    margin-top: 10px;
    font-size: 14px;
}
.cardStyle3.cardBadgeOuter .cardStyleTop {
    min-height: 235px;
}
.netStatus {
    position: absolute;
    right: -14px;
    bottom: 10px;
}
.beforeNone::before {
    display: none;
}

.bannerSectionStyle4.bss4-3::before {
    background-image: url('../images/bss4-3-before.svg');
    bottom: 50%;
    transform: translateY(50%);
}
.cardStyle3.cardBadgeOuter .cardStyleTop.min-height-auto {
    min-height: auto;
}



.smartphoneImg {
    max-width: 425px;
}
.posInitial {
    position: initial;
}
.smartPhonePagi {
    margin-top: 90px;
}
.bannerContentCol p.mdText {
    font-size: 18px;
    line-height: 1.66;
}
.cardStyle4 .cardDesc span.mdText {
    font-size: 18px;
    line-height: 1.66;
}
.cardStyle4.cardLg {
    padding: 38px 32px;
}
.imgBgShape.primaryColor {
    color: var(--primaryColor);
}
.filterSearch {
    position: relative;
}
.filterSearch input[type="text"] {
    min-width: 285px;
    height: 48px;
    padding: 10px 24px;
    border-radius: 50px;
    font-size: 16px;
    color: #6F6F6F;
    border: 1px solid #C6CDD7;
}
.filterSearch input:focus {
    border: 1px solid #C6CDD7;
    outline: none;
    box-shadow: none;
}
.filterSearch button {
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0,-50%);
    -moz-transform: translate(0,-50%);
    transform: translate(0,-50%);
    background-color: transparent;
    border: 0;
    right: 14px;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cstmSelect li {
    cursor: pointer;
}
.searchInner {
    position: relative;
}






/*  */

.loginSection {
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - 60px);
}
.loginRegisterContainer {
    position: relative;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    border-radius: 20px;
    overflow: hidden;
    background-color: var(--white);
    max-width: 1000px;
    margin: 0 auto;
}
.loginLeftContent {
    --space: 40px;
    background-color: #F6FAFF;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.loginLeftTopCol {
    padding: calc(var(--space) + 20px) var(--space) 30px;
}
.loginLogoCol {
    padding-bottom: 35px;
}
.loginLeftBtmCol {
    position: relative;
    overflow: hidden;
    margin-top: auto;
}
.loginLeftBtmContent {
    padding: 10px var(--space) var(--space);
    font-size: 14px;
    background-color: #E8EEF6;
}
.loginBtmTopShape {
    margin-left: -1px;
    margin-right: -1px;
    margin-bottom: -1px;
}
.loginBtmTopShape img {
    width: 100%;
}

.loginRightCol {
    padding: 50px 60px 60px;
}
.formStyle .form-control {
    border-radius: 0;
    border: none;
    box-shadow: 0 1px 0 rgba(0,0,0,0.2);
    font-size: 15px;
    padding: 16px 0px;
}
.btmRightCircleShape {
    width: 150px;
    height: 150px;
    right: 0;
    bottom: 0;
    background-color: var(--primaryColor);
    opacity: 0.3;
    border-radius: 50%;
    transform: translate(50%, 50%);
}
.topRightShape {
    right: 0;
    top: 0;
}
.topLeftShape {
    left: 0;
    top: 0;
}
.btmRightCircleShape, .topRightShape, .topLeftShape {
    position: absolute;
    pointer-events: none;
}
.loginLeftBtmContent .socialLinks a {
    color: var(--primaryColor);
}
.loginLeftBtmContent .socialLinks a:hover {
    color: var(--secondaryColor);
}


.registerContentMain {
    padding: 60px 80px;
}
.registerSection {
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - 160px);
}
.registerLogoCol {
    padding-right: 20px;
    width: 170px;
}
.stapProgress {
    --gap: 50px;
    --stepSize: 40px;
    padding: 30px 0 20px;
    display: inline-flex;
    gap: var(--gap);
}
.stapProgress > li {
    position: relative;
}
.stapProgress > li + li::before {
    content: "";
    width: var(--gap);
    position: absolute;
    right: 100%;
    top: 50%;
    border-top: 1px solid var(--baseColor);
}
[dir="rtl"] .stapProgress > li + li::before {
    right: auto;
    left: 100%;
}
.stepNumber {
    width: var(--stepSize);
    height: var(--stepSize);
    border: 1px solid var(--baseColor);
    color: var(--baseColor);
    background-color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    font-size: 16px;
    font-weight: 600;
}
.stapProgress > li + li.active::before {
    border-color: var(--secondaryColor);
}
.active .stepNumber {
    border-color: var(--secondaryColor);
    background-color: var(--secondaryColor);
    color: var(--white);
}
.otpFields {
    display: inline-flex;
    gap: 20px;
}
.formStyle .form-control.otp {
    width: 50px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
}
.multistepForm form > fieldset {
    display: none;
}
[dir="rtl"] [type="email"], [dir="rtl"] [type="number"], [dir="rtl"] [type="tel"], [dir="rtl"] [type="url"] {
    direction: rtl;
}

[dir="rtl"] .filterSearch button {
    left: 14px;
    right: auto;
}
[dir="rtl"] .netStatus {
    left: -14px;
    right: auto;
}

.transform-none {
    transform: none !important;
}



/* Magazine Page */
.evidenceThumbSlider, .evidenceThumbSlider > .swiper-wrapper {
    height: 100%;
}
.evidenceThumbSlider > .swiper-wrapper > .swiper-slide {
    height: auto !important;
}
.evidenceThumbSlider > .swiper-wrapper > .swiper-slide + .swiper-slide {
    margin-top: auto;
}
.evidenceThumbSlider > .swiper-wrapper > .swiper-slide:last-child {
    margin-bottom: 2px !important;
}
.swiperThumbText {
    font-size: 22px;
    line-height: 1.36;
    padding: 25px;
    font-weight: 700;
    border: 1px solid #C6CDD7;
    border-left-width: 5px;
    border-radius: 10px;
    box-shadow: 0 0 30px rgba(0,0,0,0.05);
    cursor: pointer;
}
.swiper-slide-thumb-active .swiperThumbText {
    border-left-color: var(--secondaryColor);
}
.slidePagination .swiper-pagination-bullet-active {
    background-color: var(--secondaryColor);
}
.swiper.evidenceSlide {
    margin: -15px;
    height: calc(100% + 30px);
}
.swiper.evidenceSlide .swiper-slide {
    height: auto;
}
.timeCol, .dateCol {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--lightGray);
}
.timeCol svg, .dateCol svg {
    display: block;
    padding-bottom: 1px;
}

.evidenceThumbSlider {
    /* padding: 15px 0; */
}
.slideCol {
    --mt: 15px;
    --mx: 15px;
    --mb: 15px;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    padding: 15px;
    margin: var(--mt) var(--mx) var(--mb);
    border-radius: 30px;
    background-color: var(--white);
    opacity: 0;
    transition: opacity 300ms ease-in-out 0s;
    height: calc(100% - var(--mt) - var(--mb));
    display: flex;
    flex-direction: column;
}
.swiper-slide-active .slideCol {
    opacity: 1;
}
.slideCardImgCol {
    position: relative;
    width: 100%;
    padding-top: calc(313 / 727 * 100%);
    overflow: hidden;
}
.slideCardImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}
.slideCardContentCol {
    padding: 15px 0px 0;
}
.slideCardTitle {
    display: block;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 600;
    margin: 8px 0;
}
.slideCardBtmCol {
    margin-top: auto;
}

.autoplay-progress {
    position: absolute;
    left: 50px;
    right: 50px;
    top: 15px;
    z-index: 10;
    height: 5px; /* Adjust height as needed */
    background-color: #ddd; /* Set background color */
    border-radius: 4px; /* Adjust border radius as needed */
    overflow: hidden;
}
.slideProgress {
    width: 100%;
    height: 100%;
    background-color: var(--secondaryColor);
    transform-origin: left;
    transform: scaleX(0);
}


.cardStyle6 {
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    padding: 10px;
    border-radius: 30px;
    background-color: var(--white);
    display: flex;
    flex-direction: column;
    height: 100%;
}
.cardStyle6ImgCol {
    position: relative;
    width: 100%;
    padding-top: calc(263 / 380 * 100%);
    overflow: hidden;
}
.cardStyle6Img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}
.cardStyle6ContentCol {
    padding: 15px 5px 0;
}
.cardStyle6Title {
    display: block;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 700;
    margin: 8px 0;
}
.lineClamp2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lineClamp3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lineClamp4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.primaryLightBg {
    background-color: var(--primaryLightBg);
}

.videoCol {
    margin: 0 auto;
    max-width: 1108px;
    background-color: var(--white);
    padding: 22px;
    border-radius: 30px;
    box-shadow: 0 0 30px rgba(0,0,0,0.1);
}
#videoContainer {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}
#video {
    object-fit: cover;
    display: block;
}
#playButton {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background-color: rgba(236, 102, 8, 0.6);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 300ms ease-in-out 0s;
}
#playButton:hover {
    background-color: var(--secondaryColor);
}

.horizontalCard {
    padding: 22px;
    border-radius: 30px;
}
.horizontalCardContent {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.horizontalCardImgCol {
    position: relative;
    width: 100%;
    padding-top: calc(240 / 450 * 100%);
    overflow: hidden;
    height: 100%;
    min-height: 150px;
}
.horizontalCardImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}
.cardStyle6ContentCol p, .horizontalCardContent p {
    line-height: 1.78;
}
.sectionTopRightShape {
    position: absolute;
    right: 0;
    top: 0;
    pointer-events: none;
}
.sectionTopRightShape img {
    width: auto;
    height: 120px;
    max-width: 50vw;
    object-fit: contain;
    object-position: right top;
}
[dir="rtl"] .rtlScaleX {
    transform: scaleX(-1);
}
[dir="rtl"] .sectionTopRightShape {
    left: 0;
    right: auto;
}



/* Online-Recharge page */
.chooseRadioCol {
    display: flex;
    flex-wrap: wrap;
    gap: 35px;
    justify-content: center;
    position: relative;
}
.chooseRadioText {
    box-shadow: 0 0 30px rgba(0,0,0,0.1);
    padding: 20px;
    border-radius: 25px;
    text-align: center;
    font-weight: 700;
    font-size: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    color: var(--secondaryColor);
    background-color: var(--white);
    transition: all 300ms ease-in-out 0s;
    min-width: 180px;
}
input[type="radio"]:checked + .chooseRadioText {
    background-color: var(--secondaryColor);
    color: var(--white);
}
.radioTitle {
    font-size: 30px;
    line-height: normal;
}
.chooseRadioCol > .radioCol {
    position: relative;
}
.chooseRadioInput {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.radioCard {
    position: relative;
}
.radioCard > input[type="radio"] {
    position: absolute;
    opacity: 0;
}
.radioCardLabel {
    display: block;
    padding: 18px 40px 18px 15px;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 6px;
    cursor: pointer;
    transition: all 300ms ease-in-out 0s;
    font-size: 15px;
}
[dir="rtl"] .radioCardLabel {
    padding: 18px 15px 18px 40px;
}
.radioCard > input[type="radio"]:checked + .radioCardLabel {
    border-color: var(--secondaryColor);
}
.customRadioIcon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border: 1px solid;
    border-radius: 50%;
}
[dir="rtl"] .customRadioIcon {
    right: auto;
    left: 15px;
}
.customRadioIcon::after {
    --dotSize: 3px;
    content: "";
    position: absolute;
    left: var(--dotSize);
    right: var(--dotSize);
    top: var(--dotSize);
    bottom: var(--dotSize);
    background-color: var(--baseColor);
    border-radius: 50%;
    transition: all 300ms ease-in-out 0s;
    opacity: 0;
}
.radioCard > input[type="radio"]:checked + .radioCardLabel .customRadioIcon::after {
    opacity: 1;
}

.specialRechargeContent {
    padding-bottom: 40px;
    display: none;
}
.searchInputMaxWidth {
    margin: 0 auto;
    max-width: 604px;
}
.searchInputCol {
    position: relative;
}
.searchInputCol .form-control {
    border: 1px solid #C6CDD7;
    padding: 17px 145px 17px 20px;
    border-radius: 50px;
    font-size: 15px;
}
[dir="rtl"] .searchInputCol .form-control {
    padding: 17px 20px 17px 145px;
}
.searchInputCol .searchBtn {
    --sideSpace: 5px;
    position: absolute;
    right: var(--sideSpace);
    top: var(--sideSpace);
    bottom: var(--sideSpace);
    display: inline-flex;
    padding: 6px 50px;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    border: none;
    font-size: 15px;
    font-weight: 700;
}
[dir="rtl"] .searchInputCol .searchBtn {
    right: auto;
    left: var(--sideSpace);
}
.underline, a.underline {
    text-decoration: underline;
}


.rechargePaybillCol {
    padding: 18px;
    background-color: var(--white);
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    position: relative;
    z-index: 9;
    border-radius: 15px 15px 0 0;
}
.smTabLinks {
    display: flex;
    justify-content: center;
    gap: 10px;
}
.smTabLinks a {
    border-radius: 50px;
    padding: 6px 20px;
    display: inline-block;
    color: #6F6F6F;
    font-size: 14px;
    border: 1px solid var(--borderColor);
    line-height: 1.4;
    background-color: var(--white);
}
.smTabLinks a:hover, .smTabLinks a.active {
    background-color: var(--secondaryColor);
    border-color: var(--secondaryColor);
    color: var(--white);
}
.singleArrowBtn {
    border: none;
    padding: 0;
    background-color: transparent;
    transition: all 300ms ease-in-out 0s;
}
.singleArrowBtn:hover {
    opacity: 0.8;
}
.rechargePaybillCol .formStyle .form-control {
    padding-top: 4px;
    padding-bottom: 4px;
}
.loginForm {
    font-size: 14px;
}



@media (min-width:992px) {
    [dir="rtl"] .skewPrimaryBgCol::before {
        left: auto;
        right: -10px;
    }
    .footerTopCol .collapse:not(.show) {
        display: block;
    }
    .footerTopCol .accordion-header {
        display: none;
    }
    .cardStyle1.lgCardStyle1 {
        padding: 14px;
    }
    .lgCardStyle1 .cs1Title {
        font-size: 20px;
    }
    .menuColMain .btn {
        padding: 12px 20px;
        min-width: 100px;
    }
    .loginLeftContent {
        width: 430px;
    }


    .slidePagination {
        display: none;
    }
}
@media (min-width:1200px) {

    .menuLinks {
        display: flex;
        /* justify-content: flex-end; */
        padding-inline-start: 30px;
        gap: 30px;
    }
    .menuLinks > li > a::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        right: 50%;
        border-bottom: 3px solid var(--primaryColor);
        transition: all 300ms ease-in-out 0s;
    }
    .menuLinks > li:hover > a::after, .menuLinks > li > a.active::after {
        left: 0;
        right: 0;
    }
    .megaMenuCol, .ddMenuCol {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 20px);
        background-color: var(--white);
        box-shadow: inset 0 10px 20px rgba(0,0,0,0.03), 0 10px 15px rgba(0,0,0,0.05);
        opacity: 0;
        pointer-events: none;
        transition: all 300ms ease-in-out 0s;
    }
    .mmCol:hover .megaMenuCol, .ddCol:hover .ddMenuCol {
        opacity: 1;
        pointer-events: initial;
        top: 100%;
    }
    .mmInnerColMain {
        grid-column-gap: 20px;
        display: grid;
        grid-template-columns: repeat(4,1fr);
        padding: 40px 0px 50px;
        width: 100%;
    }
    .mmTitle + .mmLinks > ul {
        margin-top: 15px;
    }
    .megaMenuCol, .mmLinks, .ddMenuCol {
        display: block !important;
        height: auto !important;
    }

    .ddMenuCol {
        min-width: 210px;
        box-shadow: 0 10px 15px rgba(0,0,0,0.05);
        border-radius: 0 0 8px 8px;
    }
    .ddMenuCol .ddLinks {
        padding: 20px;
    }

    .mdContainer {
        max-width: 1086px;
    }
    .lgCardStyle1 .cs1Title {
        font-size: 22px;
    }
    .navTopMain .titleCol {
        padding-bottom: 30px;
    }
    .mmInnerColMain {
        grid-column-gap: 40px;
        padding: 40px 20px 50px;
    }
    .menuLinks {
        padding-inline-start: 30px;
        gap: 30px;
    }
    .menuColMain .btn {
        /* padding: 14px 25px; */
    }
    .menuColMain .btn {
        padding: 12px 20px;
        font-size: 13px;
    }
    .navTabStyle.minWdNavLinks ul li a {
        min-width: 130px;
    }
}
@media (min-width:1400px) {
    .lgContainer {
        max-width: 1190px;
    }
    .menuLinks {
        padding-inline-start: 40px;
        gap: 35px;
    }
}
@media (max-width:1399px) {
    .xlTitle {
        font-size: 42px;
    }
    .mdTitle {
        font-size: 30px;
    }
    .bannerContentCol p.bLgText {
        font-size: 24px;
    }
    .bannerContentCol p {
        font-size: 20px;
        margin-bottom: 20px;
    }
    .sfLeftText {
        font-size: 42px;
    }
    .sfRText {
        font-size: 20px;
    }
    .btn {
        font-size: 14px;
        padding: 15px 30px;
    }
    .deviceName {
        font-size: 28px;
    }
    .titleCol {
        padding-bottom: 30px;
    }
    .cardStyle1 {
        --cBr: 20px;
    }
    .cs1ContentCol {
        padding: 18px 5px 10px;
        font-size: 15px;
    }
    .cs1Title {
        font-size: 16px;
    }
    .smSf .sfLeftText {
        /* font-size: 30px; */
    }
    .smSf .sfRText {
        /* font-size: 18px; */
    }

    .bannerSection {
        padding: 120px 0 50px;
    }
    .sectionSpace {
        padding: 20px 0;
    }
    .contentColStyle p.dLgText {
        font-size: 20px;
    }
    .contentColStyle p {
        font-size: 16px;
    }
    .primarLightBgCol::before {
        width: 280px;
    }
    .primarLightBgCol::after {
        width: 150px;
    }

    .footerTopSection {
        grid-template-columns: 370px 220px auto 180px;
        grid-gap: 50px;
    }
    .cs5Title {
        font-size: 20px;
    }
    .accordionStyle2 {
        --titleFont: 20px;
        --textSz: 16px;
        --xSpace: 20px;
        --ySpace: 20px;
        --itemGap: 30px;
    }
    .cardStyle3 .cardDesc {
        padding: 20px 15px 30px;
    }
    .pricingBtnsCol {
        padding-left: 15px;
        padding-right: 15px;
    }

    .sectionTopShapeRight, .sectionBtmShapeRight {
        max-width: 110px;
    }
    .lgTitle {
        font-size: 36px;
    }
    .skewPrimaryBgCol::before {
        left: -40px;
    }

    .swiperThumbText {
        font-size: 18px;
    }

    .chooseRadioText {
        padding: 15px;
        border-radius: 15px;
        font-size: 16px;
        min-width: 150px;
    }
    .radioTitle {
        font-size: 24px;
    }
    .chooseRadioCol {
        gap: 30px;
    }
}

@media (max-width:1199px) {

    .headerSection {
        font-size: 15px;
    }
    .menuColMain {
        --translateX: translateX(-100%);
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        overflow-y: auto;
        background-color: var(--white);
        width: 300px;
        padding: 20px;
        z-index: 99;
        -webkit-transform: var(--translateX);
        -ms-transform: var(--translateX);
        transform: var(--translateX);
        -webkit-transition: all 300ms ease-in-out 0s;
        -o-transition: all 300ms ease-in-out 0s;
        transition: all 300ms ease-in-out 0s;
    }
    .loginBtn, .moovMBtn {
        width: 100%;
    }
    [dir="rtl"] .menuColMain {
        --translateX: translateX(100%);
        left: auto;
        right: 0;
    }
    .menuCol {
        padding-bottom: 10px;
    }
    .ddLinks {
        padding-bottom: 20px;
    }
    .menuLinks > li > a {
        padding: 12px 0;
    }
    .menuCol > ul > li + li {
        border-top: 2px solid #ACCEF7;
    }
    .actNav .menuColMain {
        -webkit-transform: translateX(0%);
        -ms-transform: translateX(0%);
        transform: translateX(0%);
    }
    .menuBackdrop {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.2);
        opacity: 0;
        pointer-events: none;
        z-index: 2;
    }
    .actNav .menuBackdrop {
        opacity: 1;
        pointer-events: initial;
    }
    .actNav {
        overflow: hidden;
    }
    .mmInnerColMain {
        padding-inline-start: 10px;
        padding-inline-end: 0;
        padding-block-end: 10px;
    }
    .megaMenuCol, .mmLinks, .ddMenuCol {
        display: none;
    }
    .mmTitle {
        font-size: 14px;
        gap: 6px;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-inline-end: 20px;
        cursor: pointer;
        background-image: url('../images/menu-angle-down.svg');
        background-repeat: no-repeat;
        background-position: center right;
        border: none;
    }
    [dir="rtl"] .mmTitle {
        background-position: center left;
    }
    .mmLinks > ul {
        padding-top: 5px;
        padding-bottom: 10px;
        padding-inline-start: 10px;
    }
    .headerSection {
        padding: 5px 0;
    }
    .siteLogo {
        width: 85px;
    }



    .sectionSpace {
        padding: 30px 0;
    }
    .contentColStyle p.dLgText {
        font-size: 18px;
    }
    .discoverSlide {
        padding: 60px 40px;
        border-radius: 20px;
    }
    .discoverSwiper {
        padding-bottom: 70px;
    }
    .gradientBgSection {
        padding: 35px 40px;
        border-radius: 20px;
    }
    .lgTitle {
        font-size: 34px;
    }
    .mobileImgCol {
        width: 350px;
    }
    .titleCol {
        padding-bottom: 20px;
    }
    .imgBr-70 {
        border-radius: 30px;
    }
    .secondaryLightBgCol::after {
        width: 170px;
    }
    .footerTopSection {
        grid-template-columns: 1fr 250px 200px;
        grid-gap: 50px;
    }
    .footerTopSection .accordion-item:first-child {
        grid-column: 1 / span 3;
    }
    .br50 {
        border-radius: 20px;
    }
    .cardStyle5 {
        border-radius: 20px;
    }

    .swiperThumbText {
        padding: 20px;
    }
    .sectionTopRightShape img {
        height: 100px;
    }
    .chooseRadioCol {
        gap: 20px;
    }
    .chooseRadioText {
        min-width: 130px;
        box-shadow: 0 0 20px rgba(0,0,0,0.1);
    }
}
@media (max-width:991px) {
    .topLinks > li > a {
        padding: 12px 16px;
    }


    .xlTitle {
        font-size: 32px;
    }
    .bannerContentCol p.bLgText {
        font-size: 18px;
    }
    .bannerContentCol .xlTitle {
        margin-bottom: 10px;
    }
    .bannerContentCol p {
        font-size: 16px;
        margin-bottom: 14px;
    }
    .deviceName {
        font-size: 22px;
    }
    .bannerBtnCol {
        padding-top: 15px;
    }
    .bannerSection {
        padding: 80px 0 50px;
    }
    .sectionSpace {
        padding: 30px 0;
    }
    .smTitle {
        font-size: 24px;
    }
    .lgText {
        font-size: 18px;
    }
    .mdText {
        font-size: 16px;
    }
    .contentColStyle p.dLgText {
        font-size: 16px;
    }
    .primarLightBgCol::before {
        width: 180px;
    }
    .primarLightBgCol::after {
        width: 110px;
    }
    .mdTitle {
        font-size: 24px;
    }

    .gradientBgSection {
        padding: 35px 20px;
    }
    .lgTitle {
        font-size: 28px;
    }
    .secondaryLightBgCol::before {
        width: 190px;
    }
    .topCenterStar {
        width: 20px;
    }
    .secondaryLightBgCol::after {
        width: 120px;
    }

    .footerTopSection {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .footerTopCol .accordion-item + .accordion-item {
        border-top: 1px solid #ccc;
    }
    .footerTopCol .accordion-body {
        padding: 0 0 20px;
    }

    .footerTopCol {
        padding: 50px 0 45px;
    }
    .copyrightCol {
        padding: 25px 0 20px;
    }
    .cardStyle4 .cs1BtmCol {
        padding-top: 20px;
    }
    .cardStyle4 .cardDesc h3 {
        font-size: 20px;
    }

    .navTabStyle ul li a {
        padding: 6px 20px 7px;
        font-size: 14px;
    }

    .filterDropdownTrigger {
        display: flex;
        justify-content: space-between;
    }
    .filterDropdownBody {
        position: static;
        width: 100%;
    }
    .filterDropdownInnerCol {
        --xSpace: 30px;
        position: fixed;
        inset: 0;
        padding: 10px 0px 80px;
        background-color: var(--white);
        z-index: 9999;
        overflow-y: auto;
        display: none;
    }
    html.activeFilter {
        overflow: hidden;
    }
    .activeFilter .filterDropdownInnerCol {
        display: block;
    }
    .filterDropdown {
        padding: 0 var(--xSpace);
    }
    .filterDropdownInnerCol .filterDropdownBtmCol {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 5;
        padding: 15px var(--xSpace);
        background-color: var(--white);
    }
    .addFilterTrigger, .addAllFilterTrigger {
        padding: 8px var(--xSpace) 10px;
    }
    .filterTitleCol {
        padding: 20px var(--xSpace);
    }
    .filterCloseTrigger {
        cursor: pointer;
    }

    .reteList {
        display: none;
    }
    .activeReteCol .reteList {
        display: block;
    }
    .mapColMain {
        --bRadius: 15px;
    }
    .mapColMain iframe {
        height: 500px;
    }
    .coverageFieldsCol {
        left: 10px;
        top: 10px;
        width: calc(100% - 20px);
        right: 10px;
        max-width: 300px;
    }
    .coverageInputFieldCol {
        padding: 6px 12px;
    }
    .skewPrimaryBgCol::before {
        left: 50%;
        transform: translateX(-50%);
    }
    .filterSearch {
        padding: 0 var(--xSpace);
    }
    .filterSearch input[type="text"] {
        width: 100%;
    }

    .slideCol {
        --mb: 50px;
    }
    .cardStyle6, .slideCol {
        border-radius: 16px;
    }
    .slideCardImg, .cardStyle6Img {
        border-radius: 10px;
    }
    .videoCol {
        padding: 10px;
    }
    #playButton {
        width: 70px;
        height: 70px;
    }
    #playButton svg {
        width: 24px;
        height: auto;
    }
    .horizontalCard {
        padding: 10px;
        border-radius: 20px;
    }
    .horizontalCardContent {
        padding: 5px 5px 10px;
    }
}

@media (max-width:767px) {
    .registerContentMain {
        padding: 50px 20px;
    }
    .cs1ImgCol2 {
        height: 200px;
    }
    .cs1BtmCol {
        padding: 10px 0;
    }
    .cs1ContentCol {
        padding: 18px 5px 10px;
    }
    .discoverSlide {
        padding: 40px 20px;
    }
    .discoverSlide::after {
        top: 0;
    }
    .discoverImgCol, .mdMaxWdCenter {
        margin: 0 auto;
        max-width: 300px;
    }
    .mobileImgCol {
        width: 100%;
        text-align: center;
    }
    .mobileImgCol img {
        width: 320px;
    }
    .topCenterStar {
        left: 20px;
    }
    .cardStyle2 {
        border-radius: 20px;
        padding: 30px 30px 25px;
    }
    .cardIcon {
        width: 40px;
    }
    .iconCard {
        font-size: 16px;
        max-width: 180px
    }

    .modemBannerStar {
        left: 10%;
        width: 20px;
    }
    [dir="rtl"] .modemBannerStar {
        left: auto;
        right: 10%;
    }
    .bannerSectionStyle4::before, .bannerSectionStyle4::after {
        max-width: 45vw;
    }

    .navTopMain:before {
        background-size: 50%;
    }
    .navTabStyle ul li a {
        padding: 5px 15px;
        font-size: 14px;
        line-height: 26px;
    }
    .leadingLg {
        line-height: initial;
    }
    .cardStyle2.cardMd {
        padding: 25px 20px;
    }
    .cs2Title {
        font-size: 20px;
    }
    .navTabStyle ul li {
        padding: 0 4px;
    }
    .backToTopBtn {
        bottom: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
    }
    [dir="rtl"] .backToTopBtn {
        left: 10px;
    }

    .loginLeftContent {
        --space: 20px;
    }
    .loginLeftBtmContent {
        padding: 10px var(--space) 40px;
    }
    .loginRightCol {
        padding: 50px 20px 20px;
    }
    .topLeftShape {
        width: 180px;
    }
    .topRightShape {
        width: 130px;
    }
}

@media (max-width:575px) {
    .sectionSpace {
        padding: 30px 0;
    }
    .menuColMain {
        width: 270px;
        padding: 10px 15px;
    }

    .bannerSection::before {
        top: 0px;
        height: 80px;
        max-width: 70vw;
    }
    .primarLightBgCol::before, .primarLightBgCol::after {
        opacity: 0.5;
    }
    .cardIcon {
        width: 32px;
    }
    .iconCard {
        font-size: 14px;
        line-height: 1.3;
    }
    .footerTopCol .accordion-button {
        font-size: 16px;
    }
    .iconCard {
        max-width: 150px;
    }
    .cs5Title {
        font-size: 18px;
    }
    .accordionStyle2 {
        --xSpace: 15px;
        --titleFont: 18px;
        --textLh: 1.5;
        --itemGap: 20px;
        --ySpace: 15px;
    }
    .cardStyle2 {
        padding: 20px 15px 15px;
    }
    .contentColStyle p, .contentColStyle.mdText {
        font-size: 15px;
    }
    .filterDropdownInnerCol {
        --xSpace: 15px;
    }
    .lgText {
        font-size: 16px;
    }
    .smTitle {
        font-size: 20px;
    }
    .searchInputCol .searchBtn {
        --sideSpace: 3px;
        padding: 6px 30px;
    }
    .searchInputCol .form-control {
        padding: 15px 100px 15px 18px;
        font-size: 14px;
    }
    [dir="rtl"] .searchInputCol .form-control {
        padding: 15px 18px 15px 100px;
    }
}











/* Styles ciblés uniquement pour le sidebar */
.sidebar .nav-section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.2) 20%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.2) 80%, transparent 100%);
    margin: 20px 0;
    position: relative;
}

.sidebar .nav-section-divider::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, #F47C00, #1B75BC);
    border-radius: 2px;
}

.sidebar .nav-section-title {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 15px 20px 8px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.sidebar .nav-section-title::before {
    content: '';
    width: 3px;
    height: 16px;
    background: linear-gradient(135deg, #F47C00, #1B75BC);
    border-radius: 2px;
}

.sidebar .nav-section-title i {
    color: #F47C00;
    font-size: 14px;
}

.sidebar .nav-link {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    color: rgba(255,255,255,0.85) !important;
    text-decoration: none;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
    font-size: 0.95rem;
    gap: 12px;
}

.sidebar .nav-link:hover {
    background: rgba(255,255,255,0.08);
    color: #FFFFFF !important;
    border-left-color: #F47C00;
    transform: translateX(2px);
}

.sidebar .nav-link.active {
    background: rgba(244,124,0,0.15);
    color: #FFFFFF !important;
    border-left-color: #F47C00;
    font-weight: 600;
}

.sidebar .nav-link i {
    width: 20px;
    text-align: center;
    font-size: 16px;
    opacity: 0.9;
}

.sidebar .nav-link.dropdown-toggle::after {
    content: '\f107';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    border: none;
    font-size: 0.8rem;
    margin-left: auto;
    transition: transform 0.3s ease;
    opacity: 0.7;
}

.sidebar .nav-link.dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
    color: #F47C00;
}

.sidebar .collapse .nav-link {
    padding: 10px 20px 10px 45px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75) !important;
    border-left: none;
}

.sidebar .collapse .nav-link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #FFFFFF !important;
    transform: translateX(3px);
    padding-left: 48px;
}

.sidebar .collapse .nav-link.active {
    background: #F47C00;
    color: #FFFFFF !important;
}

.sidebar .badge {
    font-size: 0.65rem;
    padding: 3px 8px;
    border-radius: 12px;
    font-weight: 600;
}

.sidebar .nav-link.text-danger {
    color: #e74c3c !important;
    border-left-color: transparent;
}

.sidebar .nav-link.text-danger:hover {
    background: rgba(231, 76, 60, 0.1);
    border-left-color: #e74c3c;
    color: #ff6b6b !important;
}

[dir="rtl"] .sidebar .nav-link.dropdown-toggle::after {
    margin-left: 0;
    margin-right: auto;
}

[dir="rtl"] .sidebar .nav-link:hover {
    transform: translateX(-2px);
}

[dir="rtl"] .sidebar .collapse .nav-link:hover {
    transform: translateX(-3px);
    padding-right: 48px;
    padding-left: 10px;
}

[dir="rtl"] .sidebar .nav-section-title {
    text-align: right;
}