:root {
    --purple: #734278;
    --light-purple: #F1ECF1;
    --purpleHover: #5B2861;
    --navy: #203A57;
    --white: #ffffff;
    --gray-color: #646F73;
    --border-color: #646F73;
    --case-border: #DCDCDC;
    --appTitleColor: #000000;
    --avenirRegular: "avenir";
    --avenirMedium: "avenirmedium";
    --avenirHeavy: "avenirheavy";
    --avenirDemi: "avenirdemi";
    --GeDinarLight: "GE-Dinar-One-Light";
    --GeDinarMedium: "GE-Dinar-One-Medium";
    --transition: all .4s ease-in-out;
}




/* Thabit */

.xFeed{
	padding-top:3rem;
	padding-bottom:3rem;
}
.plan .selectedPlan{
	font-weight: unset !important;
}


.thabit-fields #AMOUNT{
	color: var(--purple);
}



.thabit-fields canvas{
	height: 11rem !important;
	width: auto !important;
	overflow: hidden;
}

.thabit-fields .col.outstanding {
    min-width: 100%;
}




.formcotainer{
	display: flex;
	flex-direction: column;
}

.thabit-fields .col,  .others-container .col{
    margin-bottom: 1.5rem !important;
}

	.row input[type="file"] {
        padding: .565rem 1.5rem;
        height: auto;
    }

.others-container{
	display:flex;
	flex-direction: column;
	flex-wrap: wrap;
}

.others-container .col{
	min-width: 50%;
}

.thabit-fields input:read-only{
	pointer-events: none;
}

.row label[for="otp"] {
    margin-bottom: 1.5rem;
    margin-left: 1rem;
}

.terms-section p{
	padding: 1.5rem;
	margin-top: 1rem;
	color: #1c1c1c;
	background-color: #F9F9FB;
}

.terms-section .terms, .plansContainer{
	
	margin-top: 2rem;
}

.plansContainer>label{
	margin-left: 1rem;
}


.terms-section .terms{
	margin-left: 2rem;
}



.terms-section .terms input{
	
width: 1rem;
	
padding: .7rem;
	
height: 1rem;
	
margin-right: .7rem;
	
border-radius: .3rem;
}




.plan-container{
	
display: flex;

flex-direction: column;
	
margin-bottom: 2rem;

gap: 2rem;

	margin-left: 1rem;

	margin-right: 1rem;
}

.plan-container .plan{
	width: 100%;
	height: 15rem;
	padding: 2rem;
	margin: unset;
	border-radius: 1rem;
}

.plan-container .plan p{
	text-align: center;
	
}

.plansContainer select{
	padding-top: .75rem;
    padding-bottom: .75rem;
    height: auto;
}
.plan-container .plan p:first-child{
	
font-size: 1.1rem;
	
margin-bottom: unset;
}

.plan-container .plan #plan1,.plan-container .plan #plan2, .plan-container .plan #plan3{
	font-family: var(--avenirHeavy);
	color: black;
	font-size: 2.6rem;
	margin-bottom: .5rem;
}

.plan-container .plan button{
	width: 100%;
	border-radius: 2rem;
	background-color: #F3F4F6;
	padding-top: .7rem;
	padding-bottom: .7rem;
	border: 1px solid #cfcfcf;
	font-family: var(--avenirMedium);
	transition: .3s all ease;
}
.plan-container .plan button:hover{
	background-color: #efefef;
	
}

.plan-container .plan.active button{
    background-color: var(--purple);
    color: white;
	position: relative;
}

.plan-container .plan.active button:hover{
	background-color: var(--purpleHover);
	
}

.thabit-fields{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	overflow: hidden;
}

.thabit-fields div{
	min-width: 100%;
	padding: 0 15px;
}

.thabit-fields .avgbill{
	background-color: #f4f4f4;
	border-radius: 1rem;
	height: fit-content;
	padding: 2rem;
	margin: 2rem auto;
	height: fit-content;
	text-align: center;
	min-width: 90%;
}


.thabit-fields .avgbill label{
	min-width: 100%;
	font-size: 1.1rem;
	font-family: var(--avenirDemi);

}

.thabit-fields .avgbill>label{
	border-bottom-style: dashed;
}


.plan-container .plan.recommended:after{
    position: absolute;
    content:'Recommended';
    height: auto;
    width: auto;
    top: -1rem;
    left:50%;
    transform: translateX(-50%);
    border-radius: 2rem;
    text-align: center;
    background-color: #203A57;
    color: white;
    padding: .3rem 1.5rem;
    font-family: 'avenirmedium';
}
.plan-container .plan.recommended{
    border: 3px solid hsl(211.64deg 46.22% 23.33% / 55%);
    position: relative;
}

/* */



#submit-btn-form{
	background: var(--purple);
    color: white;
    border: none;
    padding: 1rem 2.5rem;
    font-size: 1rem;
    margin-top: 2rem;
    transition: var(--transition);
    border-radius: 2rem;
    margin: 2rem auto;
    display: flex;
    opacity: 0;
    transform: translateY(100%);
	width:fit-content;
}

#submit-btn-form:hover{
	background: var(--purpleHover);
}

.submissionSuccess{
            display: none;
            padding-top: 2rem;
            padding-bottom: 2rem;
        }
        .submissionSuccess svg{
            width:6rem;
            height: auto;
            margin-bottom: 1rem;
        }
        .submissionSuccess span{
            color: #464646;
        }
       .no-data{
	
	margin:auto;
}
/* aimations */
@keyframes animate-hero {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }

    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}

@keyframes zoomOut {
    0% {
        scale: 1.2;
    }

    mediaCenter 100% {
        opacity: 1;
        scale: 1;
    }
}

@keyframes fadeDown {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }

    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}

@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }

    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}

/* Fonts */
@font-face {
    font-family: 'avenir';
    src: url('/_catalogs/masterpage/NDS/fonts/AvenirNextLTPro-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'avenirmedium';
    src: url('/_catalogs/Masterpage/NDS/fonts/AvenirNextCyr-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'avenirheavy';
    src: url('/_catalogs/Masterpage/NDS/fonts/AvenirNextLTPro-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'avenirdemi';
    src: url('/_catalogs/Masterpage/NDS/fonts/avenir-next-demi.ttf') format('truetype');
}

@font-face {
    font-family: 'GE-Dinar-One-Light';
    src: url('/_catalogs/Masterpage/NDS/fonts/GE-Dinar-One-Light.otf') format('truetype');
}

@font-face {
    font-family: 'GE-Dinar-One-Medium';
    src: url('/_catalogs/Masterpage/NDS/fonts/GE Dinar One Medium.ttf') format('truetype');
}

@font-face {  
	font-family: 'helvetica';
	src: url('/_catalogs/masterpage/NDS/fonts/helvetica.ttf') format('truetype');
}

input[name="caname"]{
	font-family: 'Helvetica';
}

body {
    font-family: var(--avenirRegular);
    font-size: 16px;
    line-height: 1.8;
    margin: 0;
    color: #4b4b4b;
}

ol li {

    list-style-type: inherit;
}
.data-input-field.data-input-full-field.col.col-6.requiredField{
	
	z-index:2;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance:none;
}


/* Announcement Modal*/

.modal#notifications .modal-dialog{
	
max-width: 65%;
}

.modal#notifications .modal-dialog h5, .modal#notifications .modal-dialog .modal-content .modal-header{
	
font-family: var(--avenirMedium);
}

.modal#notifications .modal-dialog .modal-content{
	
border-radius: 1rem;
}

.modal#notifications .modal-dialog .modal-content .modal-header{
	
padding: 1.5rem 2rem;
}

.modal#notifications .modal-dialog .modal-content .modal-body{
	
padding: 2.5rem 2rem;
}

.modal#notifications .modal-dialog .modal-content .modal-body .card{
	
border-radius: 1rem;
overflow: hidden;
}

.modal#notifications .modal-dialog .modal-content .modal-body .card .card-body a{
	color: var(--purple);
	transition: .3s all ease;
}
.modal#notifications .modal-dialog .modal-content .modal-body .card .card-body a:hover{
	color: var(--purple-hover);
}

.modal#notifications .modal-dialog .modal-content .modal-body .card:not(:last-child){
	
margin-bottom: 1rem;
}


/* */

/*
li.static.dynamic-children.parentli:hover .menu-item-text{

color: rgba(255,255,255,1);
}*/
.submt-loader {
width: 20px;
height: 20px;
border: 4px solid #FFF;
border-bottom-color: #734278;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: rotation 1s linear infinite;
vertical-align: middle;
margin-top:0.2rem;
margin-right:0.3rem;
}

@keyframes rotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.submitting{
margin-left: 0.5rem ;
vertical-align: middle;
}

.borderedZone {
    border: 1.3px solid red;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    opacity: 0;
    transform: translateY(100%);
}
.borderedZone p{
    opacity:1;
    transform:translateY(0);
}

.imgViewer.center-img {
    justify-content: center;
    display: flex;
    margin: 4rem 0;
}

.imgViewer.center-img img {
    width: auto;
    height: auto;
}

.footerContact{
	
color: white;
	
/* width: 60%; */
}

.customtext {

    padding-top: 3rem;
    padding-bottom: 3rem;
}

.customtext h5 {
    color: var(--navy);
    font-family: var(--avenirDemi);
    margin-bottom: .5rem;
    opacity: 0;
    transform: translateY(5rem);
}

.corporate .title-2 {
    /* color: #e86041 !important; */
    color: var(--purple);
    font-size: 1.4rem;
}


.corporate h5 {
    color: var(--navy);
    font-size: 1.2rem;
    margin-top: 1.5rem;
}


.customtext p {
    line-height: 1.8;
    color: #464646;
    margin: .5rem 0;
    opacity: 0;
    transform: translateY(5rem);
}

.customtext ul {
    padding: 0 0 0 1rem;
    opacity: 0;
    transform: translateY(5rem);
}

.customtext a {

color: var(--purple);

font-family: var(--avenirMedium);

margin: 0 .4rem;

opacity: 0;

transform: translateY(5rem);
}

.customtext a:hover {

    color: var(--purpleHover);
}


.customtext .textZone {

    margin-bottom: 1.5rem;
}

.LegalOverview .textZone {

margin-bottom: 1.5rem !important;

opacity: 0;

transform: translateY(5rem);
}

.textZone .HeadTitle {
    font-family: var(--avenirDemi);

}

.customtext ul li {
    position: relative;
    padding-left: 2rem;
    line-height: 2.4rem;
}

.customtext ul li::before {
    content: "";
    position: absolute;
    top: 0.8rem;
    left: 0;
    height: .7rem;
    border-radius: .125rem;
    width: .7rem;
    background-color: var(--purple);
}

a {
    transition: var(--transition);
}

.centeredTitle {
    text-align: center;
    font-family: var(--avenirDemi);
}

.appTitle,
h1.appTitle,
h2.appTitle,
h3.appTitle,
h4.appTitle,
h5.appTitle {
    font-family: var(--avenirDemi);
    color: var(--appTitleColor);
    font-size: 2.25rem;
}
.work .centeredTitle{
    opacity:0;
    transform:translateY(100%);
}
h2 {
    font-size: 2.25rem;
    line-height: 2.25rem;
    line-height: 3.4rem;
}

body.active {
    overflow: hidden;
}

a {
    text-decoration: none;
    list-style: none;
    color: black;
    cursor: pointer;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}

.landing-container {
    height: 80vh;
    width: 100%;
    overflow: hidden;
    position: relative;

}

/* HEADER START */
header.navbar .navbar-brand {
    padding: 0;
    margin: 0;
}

header.navbar .navbar-nav .nav-item .nav-link {
    color: #ffffff;
    font-size: 1rem;
    line-height: 1.5rem;
}

/* HEADER END */
/* SUBPAGES HERO SECTION START */
.heroSection div.card-img-top {
    width: 100%;
    position: relative;
    height: 50vh;
    overflow: hidden;
    border-radius: 0;
    z-index: 1;
}

.heroSection div.card-img-top img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    scale: 1;
    animation: 1s zoomOut forwards;
    transition: var(--transition);
}

.heroSection div.card-img-top::before {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgb(0 0 0 / 79%) 0%, rgb(0 0 0 / 54%) 20%, rgb(0 0 0 / 25%) 40%, rgb(0 0 0 / 23%) 60%);
    content: "";
    z-index: 1;
}

.heroSection div.card-img-top::after {
    height: 60%;
    width: 100%;
    position: absolute;
    bottom: 0px;
    background-size: cover;
    left: 0px;
    background-image: url("/_catalogs/Masterpage/NDS/media/Group\ 4046.png");
    background-repeat: no-repeat;
    content: "";
    animation: 1s ease 0s 1 normal none running animate-hero;
}

.heroSection .pageName {
    width: 100%;
    padding: 3rem 0;
    display: flex;
    justify-content: center;
    font-weight: normal;
    align-items: center;
    background-color: rgb(40, 40, 40);
    opacity: 0;
    transform: translateY(-100%);
    animation: 1s fadeDown 1s forwards;
    z-index: 0;
    position: relative;
}

.heroSection .pageName h1 {
    color: white;
    font-family: var(--avenirDemi);
    font-size: 1.7rem;
    opacity: 0;
    transform: translateY(100%);
    animation: 1s fadeUp 1.8s forwards;
}

/* SUBPAGES HERO SECTION END */
/* SITEMAP START */
.sitemapContainer {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.sitemapContainer .col-lg-3 {
    margin-bottom: 2rem;
}

.sitemapContainer h5 {
    color: #000000;
    font-family: var(--avenirDemi);
    text-transform: capitalize;
    margin-bottom: 1rem;
}

.sitemapContainer .links {
    display: flex;
    flex-direction: column;
}

.sitemapContainer .links a {
    color: var(--purple);
    margin: .3rem 0;
    font-family: var(--avenirMedium);
}

.sitemapContainer .links a:hover {
    color: var(--purpleHover);
}

/* SITEMAP END */































.landing-pattern-container {
    width: 100%;
    position: absolute;
    height: 100%;
    overflow: hidden;
    transform: translateY(100%);
    z-index: 29;
    pointer-events: none;
}

img.landing-pattern-img {
    position: absolute;
    bottom: 0rem;
    z-index: 9;
    pointer-events: none;
    width: 100%;
}

img.landing-pattern-light {
    bottom: 1.5rem;
}

.coverimg {
    height: 100%;
    width: 100%;
    object-fit: cover;
}



.landing-overlay {
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, 0.4) 100%);
    position: absolute;
    z-index: -1;
    left: 0;
}

header.navbar {
    z-index: 2;
    position: absolute;
    top: 0;
    width: 100%;
    padding-bottom: 2rem;
    padding-top: 2rem;
    transform: translateY(-100%);
}

.header-container-overlay {
    width: 100vw;
    height: 100vh;
    position: absolute;
    left: 0;
    background: rgb(32 32 32 / 43%);
    z-index: 50;
    filter: blur(3.625rem);
    backdrop-filter: blur(0.1875rem);
    opacity: 0;
    pointer-events: none;
}

.header-container-overlay.active {
    opacity: 1;

}

.main-header-mobile-line {
    width: 100%;
    height: 0.0625rem;
    background-color: #3C4B5C;
    position: absolute;
    top: 7rem;
    left: 0;
}

.main-header.active {
    z-index: 999;
    pointer-events: all;
    transform: translate(0) !important;

}

.main-logo-container {
    margin-right: 2.5rem;
    width: 5rem;
}

.colored-logo {
    display: none;
}

.hamburger-container {
    pointer-events: all;
    display: flex;
    position: relative;
    top: .5rem;
}

.header-links-container {

    align-items: center;
    transform: translateX(150%);
    position: fixed;
    top: 0;
    right: 0;
    width: 100vw;
    z-index: 90000;
    height: 100vh;
    background: white;
    transition: var(--transition);

}

.header-links-container.active {
    transform: translate(0);
}

.header-links-ul {
    display: flex;
    margin: 0;
    flex-direction: column;
}

.header-link.mobile-menu-title {
    display: flex;
    justify-content: space-between;
    color: black;
    font-family: var(--avenirDemi);
    font-size: 1.7rem;
    height: 4.5rem;
    padding-right: 0;
}

.mobile-menu-subtitle-text {
    padding-left: 1rem;
    color: var(--purple);
    position: relative;

}

.mobile-menu-subtitle-text::before {
    content: '';
    position: absolute;
    left: -1rem;
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    width: 2rem;
    height: 2rem;
    background: url(/_catalogs/Masterpage/NDS/media/asc.svg) no-repeat center;
    background-size: contain;
    z-index: 1;
}

.mobile-menu-subtitle-suby {
    padding-left: 1rem;
    color: var(--purple);
    position: relative;

}

.mobile-menu-subtitle-suby::before {
    content: '';
    position: absolute;
    left: -1rem;
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    width: 2rem;
    height: 2rem;
    background: url(/_catalogs/Masterpage/NDS/media/asc.svg) no-repeat center;
    background-size: contain;
    z-index: 1;
}

.mobile-menu-title-x {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--navy);
    height: 100%;
    width: 4rem;
}

.mobile-menu-title-x img {
    width: 1.5rem;
}

.header-link {
    padding-left: 1rem;
    padding-right: 1rem;
    border-bottom: 0.0625rem solid #EEEEEE;
    font-family: avenirmedium;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-link-dropwdown-arrow img:first-child {
    display: none;
}

.header-link-dropwdown-arrow img {
    width: 2.1rem;

}

.header-link-dropdown {
    display: flex;
    gap: 1rem;
    height: 100%;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
}

.header-link-dropdown-menu {
    width: 100vw;


    position: absolute;
    background: white;
    left: 0;
    height: 100%;
    top: 0;
    position: absolute;
    pointer-events: all;
    transition: var(--transition);
    transform: translateX(100%);
    padding-left: 0;
    padding-right: 0;

}

.header-link-dropdown-menu.active {
    transform: translate(0);
}

.header-link-dropdown-menu-item-title {
    color: black;
    font-size: 1.2rem;
    font-family: var(--avenirDemi);
    padding-bottom: 1rem;
    padding-top: 1rem;
    border-bottom: 0.125rem solid #EBEBEB;
    padding-left: 2rem;
    padding-right: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-links-arrow img {
    width: 2.2rem;
}

.header-link-dropdown-menu .header-link-dropdown-menu-item-list-item a {
    color: black;
}

.header-link-dropdown-menu-item-list {
    padding-top: 0;
    display: flex;
    top: 0;
    left: 0;
    flex-direction: column;
    height: 100%;
    position: absolute;
    flex-wrap: wrap;
    background-color: white;
    width: 100%;
    transform: translateX(100%);
    transition: var(--transition);
}

.header-link-dropdown-menu-item-list.active {
    transform: translate(0);
}

li.header-link-dropdown-menu-item-list-item {
    display: flex;
    padding-top: 1rem;
    padding-bottom: 1rem;
    gap: 2rem;
    padding-left: 2rem;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
    border-bottom: 0.0625rem solid #EEEEEE;
}

.header-link-dropdown-menu-item-container:nth-of-type(2) {
    border: none;
    padding: 0;
}

.header-link-dropdown-text {
    color: black;
    font-size: 1.3rem;
}

.header-link-dropdown-after {
    display: none;
}

.main-header.active .header-buttons-container {
    display: flex;
    position: absolute;
    align-items: center;
    cursor: pointer;
    width: 100%;
    bottom: 0;
    right: 0;
    z-index: 99999999;
}

.main-header.active .header-buttons-container .header-search {
    display: none;
}

.header-buttons-container {
    display: flex;
    position: absolute;
    align-items: center;
    cursor: pointer;
    right: 4rem;
    width: auto;
    pointer-events: all;
}

.header-search {

    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .75rem;
    width: 3.4rem;
    height: 3.4rem;
    margin: 0rem;
    margin-right: 1rem;
    transition: var(--transition);
    cursor: pointer;
}

.header-search img {
    width: 100%;
}

.important-links-container.active {
    display: none;
}

#AccountNumber.requiredField, #PhoneNumber.requiredField{
	margin-bottom: 1.5rem;
}
.header-language-container {
    padding: 2rem;
    border: 0.0625rem solid rgb(255 255 255 / 25%);
    padding: 0.6rem 1.8rem;
    border-radius: 2rem;
    display: flex;
    justify-content: space-between;
    transition: none;
    cursor: pointer;
    display: flex;
    opacity: 0;
    pointer-events: none;
    position: absolute;
}

.main-header.active .header-buttons-container .header-language-container {
    display: flex;
    width: 100%;
    color: black;
    border-radius: 0;
    background-color: #F5F6F8;
    border: none;
    height: 4.5rem;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    font-family: var(--avenirDemi);
    opacity: 1;
    pointer-events: all;
    bottom: 0;
    margin: 0;
    transition: opacity 1.2s;
}

.main-header.active .hamburger-container {
    display: none;


}

.header-language-container:hover {
    border: 0.0625rem solid rgba(255, 255, 255, 0.756);
    background-color: rgba(255, 255, 255, 0.032);
}

.header-caret {
    margin-left: 1rem;
}

.header-caret img:first-child {
    display: none;
}

.header-caret img {
    width: 2.2rem;
    transform: rotate(-90deg);
}

.landing-swiper {
    width: 100%;
    height: 100%;
}

.landing-swiper-pagination.swiper-pagination-bullets.swiper-pagination-vertical {
    padding: .8rem 1rem;
    margin-right: 4.5rem;
    z-index: 105;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2rem;
    opacity: 0;
    cursor: pointer;
    transition: var(--transition);
    display: none;
    opacity: 1;
}

.landing-swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-vertical:hover {
    background: rgba(0, 0, 0, 0.3);
}

.landing-swiper .swiper-pagination-bullet:first-child {
    margin-top: 0.5rem !important;
}

.landing-swiper .swiper-pagination-bullet {
    margin-top: 1rem !important;
    width: .7rem !important;
    background-color: white;
    height: .7rem !important;
}

.heroBanner .swiper-wrapper .swiper-slide.swiper-slide-active .card-img-overlay .landing-content-main {
    opacity: 1;
    transform: translateX(0);
}

.landing-content-main {
    color: white;
    width: 100%;
    transform: translateX(-200%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
    position: relative;
}

.landing-container .landing-content-container .landing-subtitle {
    margin-top: 2rem;
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.landing-subtitle-line {
    width: 3.6rem;
    display: none;
    height: 0.0625rem;
    margin-right: 1rem;
    background-color: rgb(192, 192, 192);
}

.landing-container .landing-content-container .landing-subtitle-text {
    color: #D9DCDE;
    font-size: 1.1rem;
}

.landing-container .landing-content-container .landing-title {
    font-size: 2rem;
    margin-bottom: 2rem;
    font-family: var(--avenirDemi);
    text-align: center;
    line-height: 1.5;
    color: white;
}

.landing-button {
    width: fit-content;
    border-radius: 2rem;
    background: var(--purple);
    color: white;
    padding: .5rem 1rem .5rem 1.7rem;
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    transition: var(--transition);
}

.landing-button:hover {
    background: rgb(92 53 95);
}

.landing-button:hover img {
    transform: translate(.1rem, -.1rem);
}

.landing-button-text {
    font-size: 1.1rem;
    font-family: avenirmedium;
    margin-right: 0.7rem;
    color: white;
}

.landing-button-image {
    width: 2.3rem;
    height: 2.3rem;
    background-color: #67396C;
    border-radius: 100%;
    display: flex;
    padding: .1rem;
    justify-content: center;
    align-items: center;
}

.landing-button-image img {
    transition: var(--transition);
    width: 40%;
}

.important-links-overlay {
    position: fixed;
    width: 100%;
    top: 0;
    height: 100%;
    z-index: 6;
    transition: var(--transition);
    pointer-events: none;
    opacity: 0;
    backdrop-filter: blur(0.625rem);
}



.important-links-overlay.active {
    pointer-events: all;
    opacity: 1;
}

.important-links-overlay-circle {
    height: 26rem;
    opacity: 0;
    position: absolute;
    width: 9rem;
    bottom: 0;
    right: 0;
}

.Children2 .important-links-overlay-circle-before{
    display:none;}

.important-links-overlay-circle-before,
.important-links-overlay-circle-after {
    content: '';
    display: none;
    position: absolute;
    width: 100%;
    height: 0.125rem;
    background: linear-gradient(to right, rgb(128, 128, 128, 0.1) 0%, white 45%, rgb(128, 128, 128, 0.1) 100%);
    top: 50%;
    left: 0;
    transform: scale(0);
    transform-origin: center;
}

.important-links-overlay-circle.Children3 .important-links-overlay-circle-after{
    width: 0.125rem;
    height: 50%;
    left: 50%;
    background: linear-gradient(to top, rgb(128, 128, 128, 0.1) 0%, #ffffffa1 45%, rgb(128, 128, 128, 0.1) 100%);
}
.important-links-overlay-circle .important-links-overlay-circle-after-2{
    content: '';
    display: none;
    position: absolute;
    width: 100%;
    height: 0.125rem;
    top: 35%;
    right: 0;
    transform: scale(0);
    transform-origin: center;
    height: 0.125rem;
    width: 50%;
    background: linear-gradient(to right, rgb(128, 128, 128, 0.1) 0%, #ffffffa1 45%, rgb(128, 128, 128, 0.1) 100%);
}
.important-links-overlay-circle.Children3 .important-links-overlay-circle-after-2{
    display:block;
}
.important-links-overlay-circle.Children3 .important-links-overlay-circle-before{
    content: '';
    position: absolute;
    width: 100%;
    height: 0.125rem;
    top: 35%;
    right: 0;
    transform: scale(0);
    transform-origin: center;
    height: 0.125rem;
    width: 50%;
    background: linear-gradient(to right, rgb(128, 128, 128, 0.1) 0%, #ffffffa1 45%, rgb(128, 128, 128, 0.1) 100%);
}
.important-links-item {
    position: relative;
    top: 8%;
    right: 50%;
    height: 4rem;
    width: 12rem;
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: var(--transition);
    transform: translateY(50%);

}

.important-links-item.active {
    opacity: 1;
    transform: translate(0);
}

.important-links-item::before {
    content: '';
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;

    transition: opacity 0.3s ease, transform 0.3s ease;
    filter: blur(1.25rem);
    opacity: 0.0;
    z-index: -1;
}

.important-links-item:hover::before {
    opacity: 0.4;
    transform: scale(1);
}



.important-links-icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    position: absolute;
    right: -4.4rem;
}

.important-links-icon img {
    width: 3rem;
    height: 100%;
}

.important-links-text {
    color: white;
    margin-top: .2rem;
    color: #D5D8DA;
    width: auto;
    height: 55%;
    display: flex;
    justify-content: start;
    align-items: center;
    background-color: #302831;
    padding-left: 1.2rem;
    padding-right: 2.2rem;
    border-bottom-left-radius: 1rem;
    border-top-left-radius: 1rem;
    background-color: #000000a8;
}

.report-page-container .card {
    cursor: default !important;
}

.important-links-x {
    display: flex;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background-color: var(--navy);
    position: absolute;
    right: 1.5rem;
    bottom: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    cursor: pointer;
    z-index: 999999;
}


.important-links-x img {
    width: 40%;

}

.important-links-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 4;
    width: 4.5rem;
    height: 4.5rem;
    transition: all 1s;
    opacity: 0;
    min-width: auto;
    padding: 0;
    background-color: transparent;
    margin: 0;
    font-size: 1rem;
    border: 0;
}

.important-links-container:hover {

    background-color: transparent;
    border: none;
}

.important-links-container.active {
    bottom: 37.5%;
    right: 50%;
    height: 5rem;
    width: 5rem;
    transform: translate(50%, 50%);
    z-index: 7;
}


.important-links-button {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    border: 0.125rem solid #33496A;
    cursor: pointer;
    background: linear-gradient(to top, #223C5A, #325172);
}

.important-links-button:hover img {
    transform: scale(1.05);
}

.important-links-container .important-links-button:hover img {
    transform: scale(1.1);
}


.important-links-border {
    pointer-events: none;
    position: absolute;
    width: 140%;
    height: 140%;
    border: 0.0625rem solid #835787;
    border-radius: 50%;
    content: '';
    display: block;
    transition: all 2s;
    opacity: 1;
}

.important-links-container .important-links-border.transition {
    opacity: 0 !important;
    transition: all 0s;
}



.important-links-container.active .important-links-border {
    border: 0.0625rem solid white;
    opacity: 1;
    transition: all 1s;
}

.important-links-button img {
    width: 50%;
    transition: var(--transition);
}

/* Card Section*/
.gray-section {
    width: 100%;
    height: 6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 2rem;
    font-family: 'avenirmedium';
    background-color: #282828;
}

.gray-section.main {
    height: 10rem;
}

.about-us-section {
    padding-top: 8rem;
    padding-bottom: 3.5rem;
    overflow-y: visible;
    overflow-x: clip;
    ;
}

ul.about-us-list {
    padding: 0;
}

.aboutUs {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 9rem;
    padding-top: 4rem;
    padding-bottom: 4rem;
    background-image: url("/_catalogs/Masterpage/NDS/media/patterns/pattern5.png");
    background-size: cover;
    background-repeat: no-repeat;
}

.about-us-images {
    position: relative;
    height: 35rem;
    transform: translateX(-300%);
    display: none;
    opacity: 0;
}

.generator-image-container {
    width: 32rem;
    position: relative;
    z-index: 5;
}

.generator-image-container .logo-image {
    position: absolute;
    right: 2.5rem;
    top: 2.5rem;
    width: 8rem;
}

.generator-image-container .generator-image {
    width: 100%;
}

.generator-overlay {
    width: 100%;
    height: 70%;
    background: linear-gradient(to bottom left, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 0) 50%);
    position: absolute;
    border-radius: 1rem;
}

.generator-background-image {
    width: 30rem;
    height: 25rem;
    position: absolute;
    left: 13rem;
    background-color: #F5F6F8;
    top: 2rem;
    z-index: 0;
    border-radius: 1rem;
}


.generator-background-image img {
    width: 100%;
    height: 100%;
    filter: invert(1);
}

.plumbing-image-container {
    position: absolute;
    bottom: -2rem;
    left: 0%;
    width: 23rem;
    border: 1rem solid white;
    border-radius: 1rem;
    z-index: 6;
}

.plumbing-image-container img {
    width: 100%;
    height: auto;

}

.experience-container {
    width: 17rem;
    background-color: var(--navy);
    height: 7rem;
    border-radius: .5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 9;
    position: absolute;
    bottom: 5%;
    left: 31%;
    padding: .7rem;
}



.experience-smaller-container {
    padding-right: .8rem;
    padding-left: .8rem;
    width: 100%;
    height: 100%;
    border: 0.1rem solid #B5C9E0;
    border-radius: .3rem;
    display: flex;
}

.experience-shadow {
    width: 0;
    height: 0;
    border-left: 3.125rem solid transparent;
    border-right: 5rem solid transparent;
    border-top: 5rem solid #B5C9E0;
    z-index: 4;
    position: absolute;
    bottom: 5%;
    left: 65.5%;
}

.experience-years {
    display: flex;
    align-items: center;
}

.exp-years {
    font-size: 3.5rem;
    color: white;
    font-family: var(--avenirDemi);
    letter-spacing: -.3rem;
}

.plus-sign {
    margin-left: .7rem;
    width: 1.2rem;
}

.experience-text {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-left: .6rem;
    font-size: 1.4rem;
    font-family: var(--avenirRegular);
    line-height: 1.4rem;
}

.about-us-content {
    transform: translateX(300%);
    opacity: 0;
}

.about-us-subtitle,
.overview-subtitle {
    border-radius: 2rem;
    border: 0.0625rem solid #DEDEDE;
    padding: 0.4rem 1.3rem;
    color: var(--purple);
    font-family: avenirmedium;
    letter-spacing: 0.0625rem;
    margin-bottom: 1rem;
    font-size: .9rem;
    text-transform: uppercase;
}

.overview-subtitle {
    margin: auto;
    width: fit-content;
}

.about-us-section .aboutUs .about-us-title {
    margin-top: 1rem;
    line-height: 2.5rem;
    font-size: 2rem;
    font-family: var(--avenirDemi);
    margin-bottom: 1rem;
    color: black;
}

.about-us-paragraph {
    font-size: 1.1rem;
    margin-bottom: 2.2rem;
    line-height: 1.8;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;

}

.about-us-list-item {
    display: flex;
    margin-bottom: 1.1rem;
    align-items: center;
    position: relative;
    font-size: 1.1rem;
}

.about-us-check::before {
    content: "";
    position: absolute;
    background-image: url("/_catalogs/Masterpage/NDS/media/check-svgrepo-com.svg");
    height: .9rem;
    width: .9rem;
    background-size: contain;
    background-repeat: no-repeat;
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.about-us-check {
    border-radius: 50%;
    background-color: var(--navy);
    height: 1.9rem;
    width: 1.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: .7rem;
    position: relative;
}

.about-us-check img {
    width: 55%;
}

.about-us-list-item-text {
    color: var(--navy);
    font-family: var(--avenirDemi);
}

.about-us-button {
    width: fit-content;
    border-radius: 2rem;
    background: var(--purple);
    color: white;
    padding: .5rem 1rem .5rem 1.2rem;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: var(--transition);
}

.about-us-button:hover {
    background: rgb(92 53 95);
    color: white;
}

.about-us-button:hover img {
    transform: translate(.1rem, -.1rem);

}

.about-us-button-text {
    font-size: 1rem;
    font-family: avenirmedium;
    color: white;
    margin-right: .7rem;
}

.about-us-button-image {
    width: 2.3rem;
    height: 2.3rem;
    background-color: #67396C;
    border-radius: 100%;
    display: flex;
    padding: .1rem;
    justify-content: center;
    align-items: center;
}

.about-us-button-image img {
    width: 40%;
    transition: var(--transition);
}

.subtitle-design {
    border-radius: 2rem;
    border: 0.0625rem solid #c3c3c3;
    padding: 0.4rem 1.3rem;
    color: var(--purple);
    font-family: var(--avenirMedium);
    letter-spacing: 0.0625rem;
    line-height: 1.1875rem;
    font-size: 1rem;
    text-transform: uppercase;
}

/*SiteLinks START */
.siteLinks {
    background: url('/_catalogs/Masterpage/NDS/media/Image\ 65\ 1.jpg');
    background-size: cover;
    height: 23rem;
}
.siteLinks .swiper-wrapper{
    height: -webkit-fill-available;
}
.siteLinks .swiper-pagination{
    background-color:var(--purple);
    height:3rem;
    bottom:0;
    display:flex;
    align-items:center;
    justify-content:center;
}
.siteLinks .swiper-pagination.swiper-pagination-lock{
    display:none;
}
.siteLinks .swiper-pagination .swiper-pagination-bullet{
    background-color:white;
    height: 0.6rem;
    width: 0.6rem;
}
.siteLinks .swiper-wrapper .swiper-slide .card {
    position: relative;
    padding: 2.5rem;
    padding-right: 1.6rem;
    border: unset;
    background-color: #7E4282e6;
    display: flex;
    flex-direction: column;
    color: white;
    height: 100%;
    border-radius: unset;
    opacity: 0;
    transform: translateX(-100%);
    opacity: 0;
}

.siteLinks .swiper-wrapper .swiper-slide:nth-child(odd) .card {
    background-color: #723B75de;
}

.siteLinks .swiper-wrapper .swiper-slide:nth-child(even) .card {
    background-color: #7E4282e6;

}

.siteLinks .swiper-wrapper .swiper-slide .card .icon {
    width: 2.2rem;
    height: 2.2rem;
}

.siteLinks .swiper-wrapper .swiper-slide .card .icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.siteLinks .swiper-wrapper .swiper-slide .card .card-title {
    margin-top: 1rem;
    font-family: avenirmedium;
    font-size: 1.3rem;
    color: white;
    margin: 1.2rem 0 2rem;
    position: relative;
}

.siteLinks .swiper-wrapper .swiper-slide .card .card-title::after {
    content: "";
    position: absolute;
    bottom: -.8rem;
    left: 0;
    width: 35%;
    height: 0.125rem;
    background-color: rgba(255, 255, 255, 0.4);
}

.siteLinks .swiper-wrapper .swiper-slide .card .card-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 3.5rem;
    color: rgba(255, 255, 255, .8);
}

.siteLinks .swiper-wrapper .swiper-slide .card .sitelinks-button {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.0625rem solid rgba(255, 255, 255, .4);
    border-radius: 50%;
    margin-top: 1rem;
    transition: background-color 0.5s ease;
}

.siteLinks .swiper-wrapper .swiper-slide .card .sitelinks-button:hover {
    background-color: rgb(138 145 171 / 37%);
}

.siteLinks .swiper-wrapper .swiper-slide .card .sitelinks-button img {
    width: 1.7rem;
}

/* SITE LINKS END*/
/*Lnews */
.latestNews {
    overflow: hidden;
    background: url('/_catalogs/Masterpage/NDS/media/funfact-bg.png') #F5F6F8 no-repeat;
    padding-bottom: 4rem;
    padding-top: 4rem;
}
.latestNews .appTitle{
    opacity:0;
    transform:translateX(-100%);
}
.latestNews.allNews .row .col-lg-4 .card {
    margin-bottom: 1rem;
}

.newsSubtitle {
    transform: translateX(-150%);
    opacity: 0;
    display: inline-block;
    margin: 0 auto;
    width: fit-content;
    display: block;
}

.latestNews .topSection {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 2rem;
}

body .econtainer .appTitle {
    font-size: 2rem;
    font-family: avenirdemi;
    transform: translateX(-100%);
    opacity: 0;
    margin-top: 1rem;
    color: black;
    line-height: normal;
}

.view-all-news {
    display: flex;
    color: var(--purple);
    border-bottom: 0.0625rem solid var(--purple);
    padding-bottom: .3rem;
    transform: translateX(100%);
    flex-shrink: 0;
    opacity: 0;
    display: none;
}

.view-all-news.mobile {
    display: flex;
    width: 7rem;
    padding-top: 2rem;
    margin: 0 auto;
}


.view-all-news.mobile.events {
    padding-top: 2rem;
    width: fit-content;
}

.view-all-news:hover img {
    transform: translate(0.1rem, -0.1rem);
}

.view-all-news span {
    color: var(--purple);
    font-size: 1.1rem;
    padding-right: .8rem;
    font-family: var(--avenirMedium);
}

.view-all-arrow {
    width: 1.7rem;
}

.view-all-arrow img {
    transition: var(--transition);
    width: 100%;
}

/* Lnews cards*/

.latestNews .row .col-lg-4 .card {
    transform: translateY(50%);
    opacity: 0;
    display: flex;
    flex-direction: column;
    border-radius: .5rem;
    overflow: hidden;
    border: none;
    height: 30.5rem;
}


.latestNews .row .col-lg-4:not(:last-child) .card {
    margin-bottom: 1rem;
}

.latestNews .row .col-lg-4 .card:hover .card-img-top img {
    transform: scale(1.1);
}

.latestNews .col-lg-4 .card .card-img-top {
    position: relative;
    height: 13.5rem;
    border-radius: 0;
    overflow: hidden;
}

.latestNews .col-lg-4 .card .card-img-top img {
    width: 100%;
    height: 100%;
    object-position: top;
    object-fit: cover;
    transition: var(--transition);
}

.latestNews .row .col-lg-4 .card .card-img-overlay {
    width: 100%;
    height: 13.5rem;
}

.latestNews .row .col-lg-4 .card .card-img-overlay .newsDate {
    display: flex;
    background-color: var(--navy);
    padding: .5rem 1.4rem .5rem 1rem;
    align-items: center;
    justify-content: space-between;
    color: white;
    border-top-left-radius: .5rem;
}

.latestNews .row .col-lg-4 .card .card-body .read-more-btn:hover {
    background-color: var(--purple);
    color: var(--white);
}

.latestNews .row .col-lg-4 .card .card-img-overlay .newsDate .icon {
    width: .9rem;
    display: flex;
    align-items: center;
    margin-right: .4rem;
}

.latestNews .row .col-lg-4 .card .card-img-overlay .newsDate .icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.latestNews .row .col-lg-4 .card .card-img-overlay .newsDate span {
    font-size: .9rem;
}

.latestNews .row .col-lg-4 .card .card-body {
    padding: 1.5rem;
    background-color: var(--white);
}

.latestNews .row .col-lg-4 .card .card-body .card-title {
    font-size: 1.5rem;
    font-family: avenirdemi;
    margin-bottom: 1rem;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.latestNews .row .col-lg-4 .card .card-body .card-text {
    margin-bottom: 2.2rem;
    line-height: 1.8;
    min-height: 3rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}



.latestNews .row .col-lg-4 .card .card-body .read-more-btn {
    width: fit-content;
    display: flex;
    padding: .4rem 1.3rem;
    border: 0.0625rem solid var(--purple);
    transition: var(--transition);
    cursor: pointer;
    bottom: 1.8rem;
    color: var(--purple);
    border-radius: 2rem;
    position: absolute;
}

/* Events Section */

.events-section {
    display: flex;
    gap: 3.5rem;
    justify-content: center;
    flex-wrap: wrap;
    overflow: hidden;
    flex-direction: column;
}

.twitter-feed-container {
    transform: translateX(-200%);
    width: 100%;
    opacity: 0;
    height: 100%;
    border-bottom: 1px solid #cfd9dd;
    margin: 4rem 0;
}

.twitter-feed-container .twitter-timeline iframe {
    width: 100% !important;
}

.events-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 4rem;
    max-height: fit-content;
    width: 100%;
}

.nopadding {
    padding: 0;
}

.events-section .events-container .upcoming-events-title {
    font-family: var(--avenirDemi);
    margin: 0;
    margin-bottom: 2rem;
    opacity: 1;
    transform: translate(0);
    text-align: center;
}

.events-cards-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.events-card {
    opacity: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
    overflow: hidden;
    transition: width .4s;
    transform: translateX(50%);
    opacity: 0;
}

.events-card.active {
    width: 100%;
}

.events-card.active .events-image-container img {
    filter: unset;

}

.events-card:not(.active) {
    width: 100%
}

.events-card:first-child {
    flex-shrink: 0;
}

.events-image-part-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 1;
    height: 10rem;
}

.events-image-container {
    height: 100%;
}

.events-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;

}

.events-image-shadow {
    background: linear-gradient(to right, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, 0) 100%);
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
    height: 100%;
}

.events-date-container {
    display: flex;
    position: absolute;
    top: 0;
    left: 3rem;
    flex-direction: column;
    z-index: 2;
    align-items: center;
}

.events-image-line {
    height: 1.5rem;
    width: 0.0625rem;
    background-color: rgb(255 255 255 / 70%);
    margin-bottom: .8rem;
}

.events-date-month {
    font-family: var(--avenirMedium);
    color: white;
    font-size: 1.4rem;
    margin-bottom: 0.7rem;
}

.events-date-day {
    font-size: 2.2rem;
    font-family: var(--avenirHeavy);
    color: white;
    line-height: 0.8;
}

.events-card-content {
    position: relative;
    padding: 1rem 1.5rem;
    z-index: 2;
    background-color: white;
    border: 0.0625rem solid #EAEAEA;
    border-radius: 1rem;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding-bottom: 0;
    white-space: nowrap;
}

.events-background-container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    width: auto;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.events-card-background {
    height: 100%;
    width: 100%;
    object-fit: cover;
    position: relative;
}

.events-button {
    position: absolute;
    right: 1.5rem;
    top: -17%;
}

.events-button-image {
    width: 3rem;
    height: 3rem;
    background-color: var(--purple);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: .5rem solid white;
    box-sizing: content-box;
    transition: var(--transition);
    cursor: pointer;

}

.events-button-image:hover {
    background-color: rgb(87, 50, 91);
}

.events-button-image img {
    width: 30%;
}

.events-time {
    display: flex;
    align-items: center;
}

.events-clock-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.2rem;
    margin-right: .5rem;
}

.events-clock-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.events-time-text {
    position: relative;
    top: 0.05rem;
    font-size: .95rem;
    color: #6b6b6b;
    font-family: avenirmedium;
}

.events-card-title {
    font-family: var(--avenirDemi);
    font-size: 1.3rem;
    line-height: 1.5;
    margin-top: .7rem;
    color: #262626;
    margin-bottom: 2rem;
    padding-bottom: 4rem;
    white-space: pre-wrap;
}

.events-card-type {
    position: absolute;
    bottom: 0;
    width: 100%;
    border-top: 0.0625rem solid #EAEAEA;
    background-color: white;
    border-radius: 1rem;
    border-top-left-radius: 0;
    left: 0;
    border-top-right-radius: 0;
    z-index: 2;
}


.events-card.active .event-type-text {
    padding: 1.3rem 1.5rem;
}

.holiday .event-type-text,
.عطلة .event-type-text {
    color: #4f637a;
}

.holiday .events-button-image,
.عطلة .events-button-image {
    background-color: #203A57;
}

.event-type-text {
    padding: 1rem 1.5rem;
    color: var(--purple);
    font-size: .85rem;
    text-transform: uppercase;
    font-family: var(--avenirMedium);
    letter-spacing: .1rem;
}

.mediaCenter {
    padding-top: 3rem;
    background: url('/_catalogs/Masterpage/NDS/media/service_bg_3.jpg');
    padding-bottom: 4rem;
    overflow: hidden;
    background-size: cover;
    padding-left: 1rem;
    padding-right: 1rem;
}

.mediaCenter.allMedia {
    padding-left: unset;
    padding-right: unset;
}
.mediaCenter .row .col-lg-4{
    opacity:0;
    transform:translateY(100%);
}
.mediaCenter .row .col-lg-4:first-child,
.mediaCenter .row .col-lg-4 {
    max-width: 100%;
    flex: 0 0 100%;
}


.mediaCenter .row .col-lg-4 .card .card-img-overlay,
.allMedia .card .card-img-overlay {
    box-shadow: inset 0.0625rem -7.6875rem 11.3125rem rgba(0, 0, 0, .8);
    background-color: rgb(0 0 0 / 35%);
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 2rem 2.5rem;
}

.media-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 2rem;
}

.media-subtitle {
    font-size: 1rem;
    position: relative;
    transform: translateX(-100%);
    display: block;
    margin: 0 auto;
    width: fit-content;
    opacity: 0;
}

.media-cards-container {
    display: flex;
    gap: 7.5rem;
    flex-direction: column;
}


.mediaCenter .row .col-lg-4 .card .allMedia .card {
    cursor: pointer;
    width: 100%;
    height: 18rem;
    transform: translateY(80%);
    opacity: 0;
    border: none;
    border-radius: 1rem;
    overflow: hidden;
}

.allMedia .card {
    cursor: pointer;
    opacity: 0;
    border: none;
    border-radius: 1rem;
    overflow: hidden;
    height: 12rem;
}

.cards-image-part-container {
    border-radius: .5rem;
    position: relative;
    overflow: hidden;
    height: 100%;
    width: 100%;
    z-index: 2;
}

.mediaCenter .row .col-lg-4 .card .card-img-top,
.allMedia .card .card-img-top {
    border-radius: 0;
    height: 100%;
    overflow: hidden;
}

.mediaCenter .row .col-lg-4 .card:hover .card-img-top img,
.allMedia .card:hover .card-img-top img {
    transform: scale(1.1);
}

.mediaCenter .row .col-lg-4 .card .card-img-top img,
.allMedia .card .card-img-top img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.media-card-date {
    z-index: 3;
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 1rem;
    background-color: var(--navy);
}

.media-card-date::after {
    content: '';
    position: absolute;
    top: 100%;
    background-color: #132B45;
    width: 100%;
    height: .6rem;
    border-bottom-left-radius: 1rem;

}

.media-card-date::before {
    content: '';
    position: absolute;
    top: 0;
    background-image: url(/_catalogs/Masterpage/NDS/media/date-pat.png);
    width: 100%;
    height: 100%;

}


.media-card-date-month {
    font-size: 1.4rem;
    color: white;
    margin-bottom: .6rem;
}

.media-card-day {
    font-size: 2.2rem;
    color: white;
    font-family: avenirheavy;
    line-height: .8;
}

.mediaCenter .col-lg-4 .card .card-img-overlay .media-card-inner-border {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 0.0625rem solid #93A5AA;
    width: 92%;
    height: 84%;
    mask-image: linear-gradient(to bottom, transparent 7rem, black 0%), linear-gradient(to left, transparent 6rem, black 0%);
    mask-size: 100% 100%;
    mask-position: 0rem 0rem;
}

.mediaCenter .card .card-img-overlay .media-card-button {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 5rem;
    height: 5rem;
    position: absolute;
    background-color: var(--purple);
    transition: var(--transition);
    border: 0;
    padding: 1.6rem;
}

.mediaCenter .media-card-button:hover {
    background: #693a69;
}

.media-card-button img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.media-card-data {
    transform: translateY(-100%);
    opacity: 0;
    z-index: 99;
    opacity: 1;
    transform: translate(0);
}

.mediaCenter .row .col-lg-4 .card .card-img-overlay .media-card-title,
.allMedia .card .card-img-overlay .card-title {
    font-size: 1.4rem;
    font-family: var(--avenirMedium);
    color: white;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin-bottom: 0;
}

.mediaCenter .row .col-lg-4 .card .card-img-overlay .media-card-item-number,
.allMedia .card .card-img-overlay .media-card-item-number {
    display: flex;
    align-items: center;
    margin-top: .6rem;
    position: relative;
    padding-left: 2rem;
}

.mediaCenter .row .col-lg-4 .card .card-img-overlay .media-card-item-number::before,
.allMedia .card .card-img-overlay .media-card-item-number::before {
    content: "";
    height: 0.0625rem;
    margin-right: .8rem;
    background-color: rgba(255, 255, 255, .7);
    width: 1.5rem;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.media-card-number {
    color: rgba(255, 255, 255, .7);
    font-size: .95rem;
}

/* Media Modal */



.media-center-modal, .announcementPopup {

transition: var(--transition);

pointer-events: none;

opacity: 0;

position: fixed;

top: 0;

bottom: 0;

right: 0;

left: 0;

display: flex;

justify-content: center;

align-items: center;

background-color: rgb(0 0 0 / 56%);

z-index: 1;

backdrop-filter: blur(1.625rem);

transform: translateY(50%);

/* display: none; */

z-index: -1;
}

.media-center-modal.active , .announcementPopup.show {
    transform: translate(0);
    pointer-events: all;
    opacity: 1;
    /* display: flex; */
    z-index: 1;
}

.media-swiper {
    width: 100%;
    height: 100%;
}

.media-swiper-wrapper {
    /* height: 100%; */
    /* width: 100%; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.media-swiper-slide {
    text-align: center;
    font-size: 1.125rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40%;
    /*width: 80%;
margin: 4rem;
transform-origin: center;
transition: var(--transition);*/
    filter: grayscale(1);
    opacity: 0.5;
}

.media-swiper-slide.swiper-slide-active {
    /*transform-origin: center;*/
    filter: none;
    opacity: 1;
}

.media-swiper-title {
    position: absolute;
    top: -5rem;

}

.media-swiper-modal-title {
    position: absolute;
    color: white;
    white-space: nowrap;
    color: white;
    font-family: avenirmedium;
    font-size: 1.7rem;
    right: 50%;
    top: 7rem;
    transform: translateX(50%);
}

.media-swiper-image-container {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: .5rem;
    overflow: hidden;
}

.media-swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-modal-close-button:hover {

    background-color: transparent;
    border: none;

}

.media-modal-close-button {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background: transparent;
    color: white;
    border: none;
    padding: 0.625rem;
    cursor: pointer;
    z-index: 10;
}

.media-modal-close-button img {
    width: 1.5rem;
}

.media-swiper-button {
    height: 4rem;
    width: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--purple);
    border-radius: 50%;
    right: 1rem;
}

.media-swiper-pagination.swiper-pagination {
    bottom: 5%;
    color: white;
    width: 20%;
    background: #212226;
    border-radius: 2rem;
    padding: .8rem;
    left: 50%;
    right: 50%;
    transform: translateX(-50%);
}

.media-swiper-button img {
    height: 70%;
    width: 70%;
}

.media-swiper-button.swiper-button-prev {
    left: 1rem;
}

.media-swiper-button.swiper-button-prev img {
    height: 70%;
    transform: rotate(180deg);
    width: 70%;
}

.media-swiper-button::after {
    display: none;
}

.footer-container {
    overflow: hidden;
    padding-top: 2rem;
    border-top: 1rem solid var(--purple);
    background: url('/_catalogs/Masterpage/NDS/media/Mask\ Group\ 10.png') #282828 no-repeat center;
    background-size: 125rem;
    background-position: top;
}



.footer-overflow-container {
    width: 100%;
}

.footer-item-container ul {
    padding-bottom: 1.5rem;
    border-bottom: 0.0625rem solid rgba(145, 145, 145, 0.438);
    width: 100%;
}

.footer-items-container {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding-left: 0;
    padding-right: 0;



}

.footer-mobile-logo-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 2rem;
    padding-left: 0;
    border-bottom: 0.0625rem solid #363636;
}

.footer-mobile-logo-container img {
    width: 6.5rem;
}

.footer-logo-container {
    width: 7.5rem;
    display: none;
}

.footer-logo-container img {
    width: 100%;
}

.footer-social-media-container {
    display: flex;
    gap: .8rem;

}

.social-media-icon {
    display: flex;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    border: 0.0625rem solid #3D3D3D;
    width: 2.3rem;
    height: 2.3rem;
    margin-top: 1.5rem;
    transition: var(--transition);
}

.social-media-icon:hover {
    background-color: rgba(255, 255, 255, 0.081);
}

.social-media-icon img {
    width: 43%;
}

.social-media-icon.fb img {
    width: 25%;
}


.footer-links-container {
    display: flex;
    flex-direction: column;
    transform: translateX(200%);
    opacity: 0;
    margin-left: 2rem;
    margin-right: 2rem;
    border-bottom: 0.0625rem solid #414141;
}


.footer-social-links-container {
    display: flex;
    align-items: center;
    justify-content: center;
    order: 5;
    border: 0;
    margin: 0;
    border-top: 0.0625rem solid #414141;

}

.footer-links-container:nth-child(6) {
    border: none;
    padding-bottom: .5rem;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    color: white;
    padding-bottom: 1rem;
    list-style-type: none;
    padding-left: 0;
    padding-inline-start: unset;
}

.footer-links .footer-link {
    color: #BEBEBE;
    transition: var(--transition);
    font-size: 1rem;
}

.footer-links .footer-link:hover {

    color: white;
}

.footer-link-container-title {
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-family: avenirmedium;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.1875rem;
    padding-left: 1rem;
    position: relative;
    font-size: 1rem;
    padding-left: 0;
}


.footer-link-container-title.collapsed::after {
    content: '';
    width: 2rem;
    height: 100%;
    background: url('/_catalogs/Masterpage/NDS/media/caret-right-svgrepo-com.svg');
    display: block;
    position: absolute;
    right: 0rem;
    background-size: 1.5rem;
    top: 0;
    background-position: center;
    transform: rotate(90deg);
    background-repeat: no-repeat;
    transition: var(--transition);
}

.footer-link-container-title:not(.collapsed)::after {
    content: '';
    width: 2rem;
    height: 100%;
    background: url('/_catalogs/Masterpage/NDS/media/caret-right-svgrepo-com.svg');
    display: block;
    position: absolute;
    right: 0rem;
    background-size: 1.5rem;
    top: 0;
    background-position: center;
    transform: rotate(-90deg);
    background-repeat: no-repeat;
    transition: var(--transition);
}



.footer-lower-container {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
    margin-top: 1.5rem;
    background-color: #363636;
    display: flex;
    justify-content: space-between;
    padding-left: 6rem !important;
    padding-right: 6rem !important;
    align-items: center;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-top: 0.0625rem solid #505050;
    transform: translateY(100%);
}

.footer-lower-links-container {
    display: none;
    gap: .9rem;
    align-items: center;
    transform: translateX(-100%);

    opacity: 0;
}

.violet-circle {
    border-radius: 50%;
    width: .5rem;
    height: .5rem;
    background-color: var(--purple);
}

footer .footer-lower-links-container .footer-lower-link {
    color: rgba(255, 255, 255, .8);
    transition: var(--transition);
    font-size: .78rem;
}

.footer-lower-links-container .footer-lower-link:hover {
    color: rgba(255, 255, 255, 1);
}

.footer-copyrights-container {
    transform: translateX(100%);
    opacity: 0;
    color: #A0A0A0;
    margin-bottom: unset;
    font-size: .75rem;
}



/* News Page Css */
.landing-sub-image {
    position: absolute;
    width: 100%;
    height: 100%;
}

.landing-sub-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.landing-sub-shadow {
    position: absolute;
    background: rgba(0, 0, 0, .7);
    width: 100%;
    height: 100%;
}


/* Media Center Css */

.masonry-media-cards-container {
    gap: 0rem;
}

.masonry-media-card {
    cursor: pointer;
    width: 100%;
    margin-top: 1rem;
    position: relative;
    transform: translateY(50%);
    opacity: 0;
}

.masonry-media-card .media-card-inner-border {
    width: 94%;
    height: 92%;
}

.masonry-media-card .media-card-title {
    font-family: avenirmedium;
}

/*  Electricity Page : Overview Section*/
.overview-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
    overflow: hidden;
}


.overview-section .overview-title {
    margin-top: 1rem;
    line-height: 1.3;
    font-size: 2.25rem;
    font-family: avenirdemi;
    margin-bottom: 1.5rem;
    text-align: center;
    color: black;
}

.overview-content {
    transform: translateX(100%);
    opacity: 0;
    display: flex;
    flex-direction: column;
}

.overview-paragraph {
    font-size: 1rem;
    line-height: 1.8rem;
    text-align: center;
}

.overview-paragraph p {
    margin-bottom: .7rem;
}


.overview-images {
    position: relative;
    height: 29rem;
    display: none;
    transform: translateX(-100%);
    opacity: 0;
}

.overview-container {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 9rem;
    padding-left: 1rem;
    padding-right: 1rem;

}

.electricity-image-container {
    position: absolute;
    bottom: -7%;
    right: -15%;
    width: 16rem;
    height: 16rem;
    background-color: white;
    border: .8rem solid white;
    border-radius: 1rem;
    z-index: 6;
}

.electricity-image-container img {
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    object-fit: cover;
}

.ladder-image-container {
    width: 32rem;
    height: 100%;
    position: relative;
    z-index: 5;
    border: 1rem solid white;
    border-radius: 2rem;
    border-right: 0;
}

.ladder-image-container .ladder-image {
    width: 100%;
    height: 100%;
    border-radius: 1rem;
}

.ladder-underlay {
    width: 32rem;
    height: 90%;
    position: absolute;
    z-index: 5;
    background-color: #213A58;
    left: -1rem;
    bottom: -1rem;
    z-index: -1;
    border-radius: 1rem;
}

.ladder-background-image {
    width: 17rem;
    height: 12rem;
    position: absolute;
    right: -4rem;

    top: 5rem;
    z-index: 0;
    border-radius: 1rem;

}


.ladder-background-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;

}


.account-information-section {
    height: auto;
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: url(/_catalogs/Masterpage/NDS/media/Service/Account.png) no-repeat;
    background-size: cover;
    padding-top: 3rem;
    padding-bottom: 3rem;
    gap: 1.5rem;
    text-align: center;
    overflow: hidden;
}

.account-information-text-container {
    color: white;
    transform: translateX(-100%);
    opacity: 0;
}



.account-information-title {
    font-family: avenirmedium;
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: white;
}

.account-information-description {

    color: #d1ccc8;
    font-size: 1.1rem;
    width: 100%;
}

.account-information-button {
    width: 13.5rem;
    border-radius: 2rem;
    background: var(--purple);
    color: white;
    padding: .5rem 1rem .5rem 1.7rem;
    display: flex;
    height: 3.8rem;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.3s ease;
    opacity: 0;
    transform: translateX(100%);
}

.account-information-button:hover {
    background: rgb(92 53 95);
    color: white;
}

.account-information-button:hover img {
    transform: translate(.1rem, -.1rem);
}

.account-information-button-text {
    font-size: 1.2rem;
    font-family: avenirmedium;
}

.account-information-button-image {
    width: 2.3rem;
    height: 2.3rem;
    background-color: #67396C;
    border-radius: 100%;
    display: flex;
    padding: .1rem;
    justify-content: center;
    align-items: center;
}

.account-information-button-image img {
    transition: var(--transition);
    width: 40%;
}


.services-links-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4rem 1rem;
    flex-direction: column;
    background-color: #F5F6F8;
    overflow: hidden;
}

.services-links-title-container {
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 100%;
    padding-bottom: 2rem;
    padding-top: 1rem;
    opacity: 0;
    transform: translateY(20%);
}

.services-links-section .services-links-title {
    font-family: avenirdemi;
    font-size: 1.8rem;
    color: black;
}



.services-links-description {
    font-size: 1.1rem;
    line-height: 1.5;
    color: #626262;
    padding-top: 1rem;
}

.services-links-cards-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    /* gap: 1.5rem; */
}

.services-links-card {
    display: flex;
    flex-direction: column;
    background-color: white;
    margin: .5rem 0;
    border-radius: .5rem;
    padding: 1.5rem;
    box-shadow: 0 0.1875rem 0.625rem rgba(0, 0, 0, 0.1);
    text-align: center;
    justify-content: center;
    width: 100%;
    align-items: center;
    transition: background-color 0.3s ease;
    cursor: pointer;
    transform: translateY(30%);
    opacity: 0;
}


.services-links-card:hover {
    background: rgb(207 107 182 / 15%);
}

.services-link-card-icon-container {
    /* background-color: #F1ECF2; */
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.services-link-card-icon-container img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.services-links-card .services-links-card-title {
    font-family: avenirdemi;
    font-size: 1.2rem;
    padding-top: 1rem;
    padding-bottom: .5rem;
    color: black;
    margin: 0;
}

.serviecs-links-card-description {
    color: black;
}

.services-links-button:hover {
    background-color: rgb(207 107 182 / 15%);
    color: var(--purple);
}

.services-links-button {
    cursor: pointer;
    border-radius: 2rem;
    border: 0.0625rem solid var(--purple);
    padding: .6rem 1.5rem;
    color: var(--purple);
    margin: 0;
    margin-top: 2rem;
    margin-bottom: unset;
    text-transform: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    transform: translateY(20%);
    opacity: 0;
}


.company-code-section {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 4rem 1rem;
    background: url('/_catalogs/Masterpage/NDS/media/Service/service_bg_3.jpg');
    background-size: cover;
}

.company-code-section .company-code-title {
    transform: translateY(20%);
    opacity: 0;
    font-family: avenirdemi;
    font-size: 1.8rem;
    padding-bottom: 2rem;
    color: black;
}

.company-code-cards-container {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    gap: 1.5rem;
    justify-items: center;
}

.company-code-card {
    display: flex;
    background-color: white;
    width: 100%;
    flex-direction: column;
    border: 0.0625rem solid #DDDDDD;
    justify-content: center;
    align-items: center;
    padding: 1.5rem 2.5rem;
    border-radius: .5rem;
    gap: 1.5rem;
    transform: translateY(40%);
    opacity: 0;
}

.company-code-card-right-container {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 1.2rem;
    text-align: center;
}

.company-code-card-title {
    font-family: avenirdemi;
    font-size: 1.2rem;
    color: #333333;
}

.company-code-button {
    color: var(--purple);
    font-family: avenirmedium;
}

.company-code-icon-containe img {
    width: 2rem;

}

.footer-quick-links-container {
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-top: 0.0625rem solid #E3E3E3;
    padding: 3rem 0;
}

.swiper-wrapper.footer-quick-links-swiper-wrapper {
    flex-direction: row;
}

.footer-quick-links-container .footer-quick-links-title {
    flex-shrink: 0;
}

body .footer-quick-links-swiper {
    margin: 0;
    width: 100%;
}

.footer-quick-links-swiper-slide.swiper-slide {
    display: flex;
    justify-content: center;
    border-left: 1px solid #DDDDDD;
}
.footer-quick-links-swiper-slide.swiper-slide:last-child {
    border-right: 1px solid #DDDDDD;
}
.footer-quick-links-text {
    flex-shrink: 0;
}

.footer-quick-links-swiper-slide a:visited{
    color: var(--navy);
}

.footer-quick-links-swiper-slide a:hover{
    color: var(--purple);
}

.footer-quick-links-container .footer-quick-links-title {
    font-size: 1.3rem;
    height: 100%;
    padding-bottom: 1rem;
    font-family: avenirdemi;
    color: var(--navy);
    margin: 0;
}

.footer-quick-links-item {
    font-size: 1rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    border-bottom: 0.0625rem solid #dddddd;
    height: 5rem;
    color: var(--navy);
    font-family: avenirmedium;
    width: 80%;
    justify-content: space-between;
    opacity: 0;
}

.footer-quick-links-item img {
    transition: var(--transition);
    width: auto;
    height: 1.8rem;
}

.footer-quick-links-item:hover img {
    transform: translate(.2rem, -.2rem);
}

.faq-section {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    background-color: #F5F6F8;

}

.faq-cards-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* opacity: 0; */
    /* transform: translateY(100%); */
}


.faq-section .faq-card {
    display: flex;
    flex-direction: column;
    padding: 2rem 1.5rem 1rem 1.5rem;
    border-radius: 1rem;
    background-color: white;
    margin-bottom: 1rem;
    border: none;
    opacity: 0;
    transform: translateY(5rem);
}

.faqSocialResponsibility .faq-card {
    padding: 0;
}

.faqSocialResponsibility .faq-card .faq-card-item-question {
    background-color: #f5f6f7
}

.faq-card-title,
.faq-section .card .card-title {
    font-family: avenirdemi;
    font-size: 1.7rem;
    padding-bottom: 1.2rem;
    color: black;
}


.faq-card-item-question {
    display: flex;
    justify-content: space-between;
    padding-bottom: 1rem;
    padding-top: 1rem;
    gap: .5rem;
    align-items: center;

}

.faq-question-container {
    border-bottom: 0.125rem solid #e9e9e9;
    cursor: pointer;
}

.faq-question-container:last-child {
    border: none;
}

.faq-card-item-question-text {
    color: black;
    font-family: avenirmedium;
    font-size: 1rem;
    width: 70%;
}

.faq-card-item-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 0.125rem solid var(--purple);
    border-radius: 50%;
    flex-shrink: 0;
    transition: .3s all ease;
}

.faq-card-item-button:hover {
    background-color: rgb(91 40 97 / 11%);
}



.faq-card-item-button img {
    width: 1rem;
}

.faq-card-item-button img.minus {
    display: none;
}

[aria-expanded="true"] .faq-card-item-button img.minus {
    display: block;
}

[aria-expanded="true"] .faq-card-item-button img.plus {
    display: none;
}

.faq-card-item-answer {
    font-size: 1rem;
    padding-right: 0;
    line-height: 2;
    color: #545454;
    padding-bottom: 1rem;
}

.landing-container.small {
    height: 45vh;
}

.landing-container.small .landing-pattern-container {
    display: none;
}

.news-details-section {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0;
    padding-bottom: 0;
    background-color: #F5F6F8;

}

.news-details-container {
    background-color: white;
    border-radius: 1rem;
    position: relative;
    top: -6rem;
    padding: 2rem;
    opacity: 0;
    transform: translateY(7rem);
}

.news-details-date-container {
    display: flex;
    gap: .3rem;
    align-items: center;
}

.news-details-calendar-container img {
    width: 1.5rem;

}

.news-details-date-text {
    font-family: avenirmedium;
    font-size: .8rem;
    position: relative;
    top: 0.1rem;
}

.news-details-title, .news-details-title * {
    font-family: avenirdemi!important;
    font-size: 1.8rem!important;
    padding-bottom: 1rem!important;
    padding-top: 1rem!important;
    color: #000000!important;
}

.news-details-paragraph, .news-details-paragraph * {
    font-size: 1rem!important;
}

.news-details-paragraph p {
    padding-bottom: 1rem;
}

.survey-section {
    padding: 2rem 1rem;
    background-color: #F5F6F8;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
    position: relative;
}

.survey-cards-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 3rem;
}

.survey-card {
    background-color: white;
    border-radius: 1rem;
    padding: 1rem 1rem;
    position: relative;
}

.survey-card-title {
    font-family: avenirdemi;
    padding-bottom: 3rem;
}

.survey-choices-container {
    display: flex;
    gap: 5rem;
    padding-bottom: 4.5rem;
    flex-wrap: wrap;
}

.survey-choice-container {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: center;
}

.survey-choice-image-container {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background-color: #F5F6F8;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--transition);
    cursor: pointer;
}

.survey-choice-image-container:hover {
    background-color: var(--navy);
}

.survey-choice-container.active .survey-choice-image-container {
    background-color: var(--navy);
}

.survey-choice-image-container img {
    width: 3.2rem;

}

.survey-date-container {
    position: absolute;
    top: 0;
    display: flex;
    gap: 1rem;
    align-items: center;
    border-top: 0.0625rem solid #c6c6c6;
    width: 100%;
    left: 0;
    padding: 1.5rem 4rem;
    background-color: white;
    border-radius: 1rem;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.survey-date-text {
    color: #525252;
    position: relative;
    top: .12rem;
    font-family: avenirmedium;
}

.survey-submit-button {
    background-color: var(--purple);
    color: white;
    padding: 1rem 2.5rem;
    border-radius: 2rem;
}

.survey-submit-button:hover {
    background-color: rgb(94, 61, 94);
}

.survey-modal {
    width: 100vw;
    height: 100vh;
    position: fixed;
    background-color: rgba(1, 1, 1, 0.307);
    backdrop-filter: blur(0.625rem);
    left: 0;
    top: 0;
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--transition);
    opacity: 0;
    pointer-events: none;

}

.survey-modal.active {
    transform: translate(0);
    pointer-events: all;
    opacity: 1;
}

.survey-modal-container {
    width: 90%;
    background-color:
        white;
    height: 80%;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    justify-content: center;

}

.survey-close-x {
    position: absolute;
    top: 2rem;
    right: 3rem;
}

.survey-close-x img {
    width: 2rem;
}

.survey-modal-content-container {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 2.5rem;
}

.survey-modal-image-container {
    background-color: #F7F5F8;
    border-radius: 50%;
    width: 15rem;
    height: 15rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.survey-modal-title {
    font-size: 2.8rem;
    font-family: avenirdemi;
}

.survey-modal-thanks {
    font-size: 1.25rem;
    width: 90%;
    color: #272727;
    font-family: avenirmedium;
    line-height: 2;
}

.calculator-banner {
    background-color: #F5F6F8;
    padding: 2rem 1rem;
    text-align: center;
    line-height: 1.8;
    color: #464646;
    opacity: 0;
}

.calculator-banner .basictext {
    width: 100%;
    margin: auto;
    opacity: 0;
    transform: translateY(100%);
}

.row .col {
    margin-bottom: 2.9rem;
    position: relative;
    opacity: 0;
    transform: translateY(100%);
}

.data-input-field label {
    font-family: avenirdemi;
}

.data-input-field input.active,
.data-input-field select.active {
    border: 1px solid red;
}

.data-input-last-date,
.data-input-current-date,
.data-input-category {
    -moz-appearance: textfield;
    appearance: textfield;
}

body .data-input-category {
    position: relative;
}

.data-input-custom-calendar,
.data-input-custom-caret {
    position: absolute;
    bottom: 0.7rem;
    right: 1.5rem;
    background-color: white;
    pointer-events: none;
}

.error .data-input-custom-caret {
    right: 3.2rem;
}

.data-input-custom-calendar img,
.data-input-custom-caret img {
    width: 1.3rem;
}

body .data-input-submit {
    background: var(--purple);
    color: white;
    border: none;
    padding: 1rem 2.5rem;
    font-size: 1rem;
    margin-top: 2rem;
    transition: var(--transition);
    border-radius: 2rem;
    margin: 2rem auto;
    display: flex;
    opacity: 0;
    transform: translateY(100%);
}

body .data-input-submit:hover {
    background: var(--purpleHover);
}


.data-input-details-container {
    margin-top: 1rem;
    border: 1px solid #E2E2E2;
    border-radius: .5rem;
    overflow: hidden;
}

.data-input-details-title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #F5F6F8;
    padding: 1.5rem 2.5rem;
}

.data-input-details-title-text {
    color: black;
    font-family: avenirdemi;
    font-size: 1.2rem;
}

.data-input-details-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 0.125rem solid var(--purple);
    border-radius: 50%;
    flex-shrink: 0;
}

.data-input-details-button img {
    width: 1rem;
}

.data-input-details-button img.minus {
    display: none;
}

.data-input-details-title-container.collapsed .data-input-details-button img.minus {
    display: block;
}

.data-input-details-title-container.collapsed .data-input-details-button img.plus {
    display: none;
}

.data-input-details-container-inner {
    padding: 2rem;
}

.data-input-checkbox-group {
    display: flex;
    flex-direction: column;
    margin-top: 2rem;
    gap: .5rem;
}

.data-input-checkbox-group-title {

    font-family: avenirdemi;
}

.data-input-checkbox-group-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 3rem;
}

.data-input-checkbox-group-item {
    display: none;
}

.data-input-checkbox-group-item-label {
    position: relative;
    padding-left: 2.5rem;
    margin: 5px 0;
    cursor: pointer;
    font-family: avenirmedium;
}

.data-input-checkbox-group-item-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid rgb(63, 33, 63);
    background-color: white;
    border-radius: 4px;
    background: url('/_catalogs/Masterpage/NDS/media/check-svgrepo-com.svg');
    background-size: 74%;
    background-repeat: no-repeat;
    background-position: center;
}

.data-input-checkbox-group-item:checked+label::before {
    background-color: var(--purple);
    border-color: rgb(63, 33, 63);
}

.data-input-checkbox-group-item:checked+label::after {
    content: '';
    position: absolute;

    left: 5px;
    top: 0;
    color: white;
    font-size: 18px;
}

.data-input-text-area {
    border: 0.0625rem solid #ddd;
    padding: 0.625rem;
    height: 10rem;
    width: 100%;
}

.data-input-text-area.active {
    border: 1px solid red;
}

.data-input-text-area-container {
    margin-top: 1.5rem;
    position: relative;
}

::-webkit-file-upload-button {
    display: none;
}

::file-selector-button {
    display: none;
}

.data-input-field .data-input-upload-area {
    display: inline-block;
    width: 100%;
    padding: 15rem 0 0 0;
    height: 15rem;
    overflow: hidden;
    border: none;
    border-style: dashed;
    border-color: #ddd;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
}

.data-input-upload-container-cloud {
    position: absolute;
    top: 35%;
    left: 50%;
    gap: .7rem;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    pointer-events: none;
}

.data-input-upload-container-cloud-image img {
    width: 5rem;
}

.data-input-upload-container-cloud-image {
    display: flex;
}

.data-input-upload-container-cloud-text .highlight {
    color: var(--purple);
    position: relative;
    cursor: pointer;
    pointer-events: visible;
}

.data-input-upload-container-cloud-text .highlight::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    height: 2px;
    width: 103%;
    background: var(--purple);
    z-index: -1;
}

div#rcaptcha {
    display: flex;
    justify-content: center;
    opacity: 0;
    transform: translateY(100%);
    margin-top: 2rem;
}

div#captcha {
    display: flex;
    justify-content: center;
}

/* Modal Styles */
.data-input-modal {

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: var(--transition);
    backdrop-filter: blur(0.625rem);

}

.data-input-modal.active {
    opacity: 1;
    pointer-events: all;
    transform: translate(0);

}

.data-input-modal-content {
    position: relative;
    background: white;
    width: 90%;


    padding: 5rem 2rem;
    padding-bottom: 2rem;
    border-radius: 0.5rem;
    text-align: center;
}

.data-input-result-title {
    font-family: avenirdemi;
    padding-bottom: 2.5rem;
}

.data-input-modal-close {
    position: absolute;
    right: 1.8rem;
    top: 0rem;
    font-size: 3.5rem;
    cursor: pointer;
    color: #666;
}

.data-input-result {
    margin: 1.25rem 0;
    border-radius: .5rem;
    overflow: hidden;
}

.data-input-result-row {
    display: flex;
    justify-content: space-between;
    padding: 0.625rem 1rem;
    border: 0.0625rem solid #eee;
    background: #FAFAFA;
}

.data-input-modal-done {
    background: var(--purple);
    color: white;
    border: none;
    padding: 1rem 4.5rem;
    border-radius: 2rem;
    cursor: pointer;
    margin-top: 2rem;
}

.data-input-modal-done:hover {
    background: #552288;
}

span.total-modal-text {
    font-family: avenirdemi;
    font-size: 1.1rem;
}


.report-page-container {
    padding: 4rem;
    padding-left: 1rem;
    padding-right: 1rem;
}
.report-page-container .col-lg-3{
    opacity:0;
    transform:translateY(100%);
}

.report-page-section {
    margin-bottom: 2rem;
}

.report-page-section-title {
    font-family: avenirdemi;
}

.report-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    opacity: 0;
    transform: translateY(100%);
}

.report-page-header-line {
    height: 1px;
    background-color: #CCCCCC;
    width: 100%;
    margin: 0 1rem;
}

.report-page-header h2 {
    font-size: 1.5rem;
    margin: 0;
    color: inherit;
    min-width: max-content;
}

.report-page-count {
    flex-shrink: 0;
    color: var(--report-page-gray);
    font-size: 0.975rem;
    font-family: avenirmedium;
}

.col-lg-3 .card {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 0.0625rem solid var(--report-page-border);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: var(--transition);
    background-color: white;
    border: 1px solid #DDDEDF;
    overflow: hidden;
    margin-bottom: 2rem;
}

.col-lg-3 .card .card-img-top {
    position: relative;
    background-color: #F5F6F8;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 11.5rem;
}

.col-lg-3 .card .card-img-top img {
    height: 8rem;
    width: 6rem;
}

.downloadFile {
    position: absolute;
    top: .5rem;
    right: .5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FCFCFC;
    border: 1px solid #DBDBDC;
    padding: .5rem;
    border-radius: .4rem;
    transition: var(--transition);
}

.downloadFile:hover {
    background-color: rgb(91 40 97 / 11%);
}



.col-lg-3 .card .card-img-overlay .downloadFile img {
    width: 1rem;
    height: auto;
    transition: var(--transition);
}

.col-lg-3 .card .card-img-overlay .downloadFile:hover img {
    transform: translateY(0.125rem);
}

.col-lg-3 .card .card-body {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 1rem;
    gap: .3rem;
}

.col-lg-3 .card .card-body .card-title {
    font-size: 1rem;
    font-family: avenirdemi;
    margin-bottom: 0.25rem;
}

.report-page-container .col-lg-3 .card .card-body .card-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.report-page-filesize {
    font-size: 0.9rem;
    font-family: avenirmedium;
    color: #595959;

}

.subform-full-row {
    width: 100%;
    display: flex;


    flex-direction: column;

}

.subform-label {
    margin-bottom: 0.5rem;
    color: #333;
    font-family: avenirdemi;
    white-space: nowrap;
}

.subform-full-textarea {
    border: 0.0625rem solid #ddd;
    padding: 0.625rem;
    height: 10rem;
}


.error input,
.error select.form-select,
.row  .error input, .row  .error textarea{
    border-color: red;
}

.error-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: .6rem;
    top: 2.8rem;
    display: none;
}

.error-icon.active {
    display: flex;
}

.error-icon img {
    width: 1rem;
}

.weCareTxt {
    padding-bottom: 6rem;
}

.weCareTxt h4,
.overview-content h4,
h4.valuesTitle {
    color: var(--navy);
    margin: 4rem 0 1.5rem;
    font-family: var(--avenirDemi);
}

h4.valuesTitle {
    margin: 2rem 0 .8rem;
    opacity: 0;
    transform: translateY(100%);
}



.valuesList {
    column-count: 2;
    flex-wrap: wrap;

}

.valuesList span {
    color: var(--navy);
    font-family: var(--avenirDemi);
    margin: 0.6rem 0;
    width: 50%;
    display: block;
    letter-spacing: 0.04rem;
    font-size: 1.1rem;

}

.weCareTxt ul li {
    position: relative;
    padding: 0 1.6rem;
    margin: 1.1rem 0;
}

.weCareTxt ul li::before {
    content: "";
    position: absolute;
    top: .4rem;
    left: 0;
    background-color: var(--purple);
    height: 0.7rem;
    width: 0.7rem;
    border-radius: 0.15rem;
}

.pageIntro {
    background-color: #f5f6f7;
    padding: 4rem 0;
}

.pageIntro p {
    width: 43%;
    font-size: 1.25rem;
    line-height: 1.75;
    margin: auto;
}

.faqSocialResponsibility {
    background-color: #ffffff;
}

.work {
    background: url("/_catalogs/Masterpage/NDS/media/workbg.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.work p.text-center {
    width: 70%;
    margin: auto;
}

.work .workCards {
    margin-top: 4rem;
    gap: 0.8rem;

}

.work .workCards .card {
    border-radius: 1.5rem;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    margin-bottom: 1.8rem;
}

.work .workCards .card .card-body {
    background-image: url("/_catalogs/Masterpage/NDS/media/Mask\ Group\ 30.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 2rem 2.5rem;

}

.work .workCards .card .card-img-top img {
    object-fit: cover;
    transition: var(--transition);
}

.work .workCards .card:hover .card-img-top img {
    transform: scale(1.1);
}

.work .workCards .card .card-body .card-title {
    font-family: var(--avenirDemi);
}

.work .workCards .card .card-body .learnMore {
    color: var(--purple);
    font-family: var(--avenirMedium);
    transition: var(--transition);
}

.work .workCards .card .card-body .learnMore:hover {
    color: var(--purpleHover);
}

.careers .col-lg-7 {
    padding: 4rem 6rem;
    background-color: #f5f6f7;
}
.careers .col-lg-5{
    overflow:hidden;
}
.careers .col-lg-5 img{
    height:100%;
    width:100%;
    object-fit:cover;
    scale:1.2;
}
.careers h1 {
    margin-bottom: 1.5rem;
    font-size: 2.25rem;
    opacity: 0;
    transform: translateY(100%);
}
.careers .col-lg-7 div{
    opacity: 0;
    transform: translateY(100%);
}
.mediaCenter .row .col-lg-4 .card {
    border-radius: .8rem;
    overflow: hidden;
    height: 12rem;
}

.mediaCenter .row .col-lg-4:not(:last-child) .card {
    margin-bottom: 1rem;
}

.mediaCenter .row .card {
    cursor: pointer;
}

.whistleblowerForm .card .card-header {
    font-family: var(--avenirMedium);
    font-size: 1.3rem;
    color: black;
}

/* suggestion form start */
.suggestionsForm,
.thabitForm,
.billCalculator,
.generalInfoForm,
.whistleblowerForm {
    padding-top: 3rem;
    padding-bottom: 3rem;
}


.suggestionsForm .row,
.whistleblowerForm .row {
    flex-direction: column;
}

.suggestionsForm .row .col,
.whistleblowerForm .row .col {
    margin-bottom: 1.5rem;
}

.whistleblowerForm .row .col-6 {
    max-width: 100%;

}


.row label {
    position: relative;
    /* margin-left: 2rem; */
    width: fit-content;
    color: black;
    font-family: var(--avenirMedium);
}

.row .requiredField label::after {
    content: "*";
    font-size: 1rem;
    position: absolute;
    right: -0.7rem;
    top: -0.1rem;
    color: var(--purple);
}

.row input,
.row textarea {
    transition: var(--transition);
    box-shadow: none;
    padding: 1.4rem 1rem;
    width: 100%;
    border: 0.0625rem solid #ddd;
}

.row .error input[type="date"] {
    padding-right: 2.5rem;
}

.row .form-select {
    transition: var(--transition);
    box-shadow: none;
    padding: 0.7rem 1rem;
    width: 100%;
    appearance: none;
    border-radius: .25rem;
    border: 1px solid #ced4da;
    text-align: inherit;
    background-color: transparent;
}

.row .error .form-select {
    border-color: red;
}

.row .form-select[aria-expanded="true"] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.row .dropdown .dropdown-menu {
    width: 100%;
    margin: 0;
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: 0px 4px 9px #00000038;
}

.row .dropdown .dropdown-menu li {
    padding: .4rem 1rem;
    transition: var(--transition);
}

.row .dropdown .dropdown-menu li:hover {
    background-color: var(--purple);
    color: white;
}

.row .form-select::after {
    background-image: url("/_catalogs/Masterpage/NDS/media/caret-down-svgrepo-com.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    border: none;
    height: 1.4rem;
    width: 1.4rem;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    right: 1rem
}

.row .col input[type="date"]::-webkit-calendar-picker-indicator {
    background-image: url("/_catalogs/Masterpage/NDS/media/date.svg");
    cursor: pointer;
}

.row .error .form-select::after {
    right: 2.6rem;
}

.row .col input:hover,
.row .col input:focus,
.row .col input:active,
.row .col input:focus-visible,
.row .col input:focus-within {
    border: 1.5px solid var(--purple);
    outline: 0;
}

#error-otp.error-message{
	top: 4.7rem;
}

.suggestionsForm textarea:focus,
.suggestionsForm textarea:active,
.suggestionsForm textarea:focus-visible,
.suggestionsForm textarea:focus-within {
    border: 1.5px solid var(--purple);
    outline: 0;
}

/* suggestion form end */
/* error message general style start */
.error-message {
    font-size: 0.7rem;
    height: 1rem;
    display: none;
    width: 1rem;
    background-image: url(/_catalogs/Masterpage/NDS/media/error.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 3;
    position: absolute;
    top: 3.8rem;
    transform: translateY(-50%);
    right: 2rem;
    cursor: pointer;
    transition: var(--transition);
}

.error-message.visible {
    display: flex;
}

.error-message::before {
    content: "";
    position: absolute;
    margin: 0;
    top: -1.3rem;
    right: 0rem;
    width: 0.6rem;
    height: 0.6rem;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    border-right: 1px solid #d3d3d3;
    border-bottom: 1px solid #d3d3d3;
    background-color: white;
    z-index: 3;
    opacity: 0;
    display: none;
}

.error-message::after {
    content: attr(title);
    position: relative;
    font-size: .8rem;
    color: var(--error-field-color);
    background-color: white;
    padding: 0.8rem 1rem;
    text-wrap: nowrap;
    height: fit-content;
    border-radius: 0.7rem;
    transform: translateX(-78%) translateY(-92%) translateZ(0) scale(1);
    border: 1px solid #d3d3d3;
    top: -1.2rem;
    opacity: 0;
    display: none;
    width: max-content;
}

.error-message:hover::after,
.error-message:hover::before {
    opacity: 1;
    display: block;
}

/* error message general style end */
/*
UPLOAD FILE
*/
.drop-zone {
    height: 18rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-size: 1.1rem;
    cursor: pointer;
    color: #cccccc;
    border: 2px dashed var(--case-border);
    border-radius: 1rem;
    margin-bottom: 1rem;
}

.drop-zone--over {
    border-style: solid;
}

.drop-zone__input {
    display: none;
}

.uploaded-item {
    display: flex;
    align-items: center;
    border-radius: 3rem;
    padding: 0.8rem 1rem;
    background-color: #faf8fa;
    margin-top: 1rem;
    overflow: hidden;
}

.uploaded-item .icon {
    background-color: var(--light-purple);
    height: 3rem;
    width: 3rem;
    padding: 0.9rem;
    border-radius: 100%;
    display: flex;
}

.uploaded-item .icon img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: center;
}

.uploaded-item .fileName {
    margin: 0 0.7rem;
    color: var(--purple);
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--avenir-bold);
}

.uploaded-item .remove-button {
    border-left: 1px solid var(--case-border);
    padding: .7rem;
    color: var(--purple);
    height: 2.1rem;
    width: 2.1rem;
}

.whistleblowerForm .card {
    margin-bottom: 2rem;
}

.drop-zone .icon svg {
    height: 4rem;
    width: 4rem;
    margin-bottom: 1rem;
}

.drop-zone .browse {
    cursor: pointer;
    color: var(--purple);
    text-decoration: underline;
    position: relative;
}

.drop-zone .browse::after {
    content: "*";
    position: absolute;
    right: -.5rem
}

.form .cta {
    margin-top: 2rem;
    display: flex;
    justify-content: flex-end;
}

.form .cta button {
    padding: .8rem 2.5rem;
    transition: var(--transition);
    border: 1px solid var(--purple) !important;
    border-radius: 1rem;
    cursor: pointer;
}

.cta .cancel {
    margin-right: 1rem;
}

.cta .submit {
    background-color: var(--purple);
    color: white;
}

@media (min-width: 768px) {

	.thabit-fields .avgbill{
	padding: 4rem;
	margin: auto 0;
	width: fit-content

}

	.thabit-fields .col.outstanding {
	/* padding-right: unset; */
}

	.thabit-fields .avgbill{
	min-width: fit-content;
	/* margin-top: unset; */
}

	.thabit-fields .avgbill label{
	min-width: fit-content; 

}

	.terms-section p{
	padding: 2.5rem 2rem;
}




	.thabit-fields canvas{
	height: 17rem !important;
	
}

	.formcotainer{
	flex-direction: row;
}

	.thabit-fields .col, .others-container .col {
    margin-bottom: 2.9rem !important;
}

	.others-container{
	flex-direction: row;
}



	.plan-container .plan{
	width: 33.3%;
	height: 15rem;
	padding: 2rem;
	margin: unset;
	border-radius: 1rem;
}

	.plan-container{
	

flex-direction: row;

}


	.thabit-fields div{
	min-width: 50%;
	padding-left: 15px;
	padding-right: 15px;
}


    .services-links-card {

    width: auto;

}

    .whistleblowerForm .row .col-6 {
        max-width: 50%;

    }

    .whistleblowerForm .card {
        margin-bottom: 4rem;
    }

    .row input,
    .row textarea {
        padding: 1.4rem 1.5rem;
    }

    .suggestionsForm .row,
    .whistleblowerForm .row {
        flex-direction: row;
    }


    .calculator-banner .basictext {
        width: 90%;
    }

    .heroSection .pageName h1 {

        font-size: 2rem;

    }


    .customtext ul {
        padding: 0 0 0 2rem;
    }

    .media-swiper-modal-title {
        top: 3rem;
    }

    .media-card-date-month {
        margin-bottom: unset;
    }

    .media-card-date {
        padding: 1.5rem;
        padding-top: 1rem;
    }

    .masonry-media-card {
        margin-top: 2rem;
    }

    .mediaCenter.allMedia {
        padding-left: 6rem;
        padding-right: 6rem;
    }

    .allMedia .card {
        height: auto;
    }

    .media-swiper-slide {
        height: 50%;
    }


    .media-swiper-slide.swiper-slide-active {
        transform: scale(1.2);
    }

    .faq-card-item-question-text {
        width: auto;
    }

    .important-links-container {
        position: fixed;
        bottom: 3rem;
        right: 3rem;
    }

    .mediaCenter .row .col-lg-4 .card .card-img-overlay,
    .allMedia .card .card-img-overlay {
        padding: 2.5rem 2.2rem 1.4rem;
    }

    .mediaCenter .col-lg-4 .card .card-img-overlay .media-card-inner-border {
        width: 90%;
        height: 90%;
    }

    body .econtainer .appTitle {

        margin-top: unset;

    }


    .mediaCenter .row .col-lg-4:not(:last-child) .card {
        margin-bottom: unset;
    }

    .mediaCenter .row .col-lg-4 .card {
        height: auto;
    }

    .mediaCenter {
        padding-left: unset;
        padding-right: unset;
        padding-top: 2rem;
        padding-bottom: 2.5rem;
    }


    .mediaCenter .row .col-lg-4:first-child {
        max-width: 42%;
        flex: 0 0 42%;
    }

    .mediaCenter .row .col-lg-4 {
        max-width: 29%;
        flex: 0 0 29%;
    }


    .latestNews .row .col-lg-4:not(:last-child) .card {
        margin-bottom: unset;
    }

    .latestNews.allNews .row .col-lg-4:not(:last-child) .card {
        margin-bottom: 1.5rem;
    }

    .latestNews .row .col-lg-4 .card .card-body {
        padding: 1.8rem;
    }

    .latestNews {
        padding-top: 5rem;
        padding-bottom: 2rem;
    }

    .footer-links {
        padding-left: revert;
    }

    .events-image-line {
        height: 2rem;
        margin-bottom: 0.2rem;
    }

    .events-image-container img {

        filter: grayscale(1);
    }

    .events-container {
        margin-bottom: unset;
    }

    .events-cards-container {
        gap: 1rem;
    }

    .event-type-text {
        padding: 1.3rem 1rem;
    }

    .events-card-title {
        margin-bottom: unset;
        line-height: revert;
        font-size: 1.3rem;

    }
    .events-card-background {
        bottom: 8rem;
    }

    .events-section .events-container .upcoming-events-title {
        text-align: unset;
    }

    .econtainer {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .nopadding {
        padding: 0 6rem;
        ;
    }


    .twitter-feed-container {
        margin: unset;
    }

    .aboutUs {
        padding-bottom: 7rem;
    }


    .about-us-paragraph {
        font-size: 1rem;
        line-height: 1.8rem;
        width: 90%;
    }



    .sitelinks-card {
        padding: 1.5rem;
        padding-right: 1.6rem;
        padding-bottom: 5rem;
    }

    .siteLinks .swiper-wrapper .swiper-slide:nth-child(odd) .card {
        background-color: #723B75de;
    }

    .sitelinks-card:nth-child(even) {
        background-color: #7E4282e6;

    }

    .latestNews .row .col-lg-4 .card .card-body {
        padding: 1rem;
    }

    .latestNews .row .col-lg-4 .card .card-body .card-title {
        margin-bottom: .5rem;
        font-size: 1.2rem;
    }



    .lnews-card-content .read-more-btn {
        bottom: 0;
        position: relative;
        padding: .5rem 1rem;
        font-size: .8rem;
        margin: 0;
    }

    .events-cards-container {
        flex-direction: row;
    }

    .events-card-content {
        padding: 2rem;
        height: 60%;
    }

    .view-all-news.mobile.events {
        padding-top: 4rem;
    }

    .events-image-part-container {
        height: 45%;
    }

    .events-card-title {
        font-size: 1.1rem;
        margin-top: 1rem;
    }

    .events-time-text {
        font-size: .8rem;
    }

    .events-button {
        right: 0.5rem;
    }

    .events-card:not(.active) {
        width: 33%;
    }

    .events-card.active {
        width: 33%;
    }

    .events-card:nth-of-type(2) {
        position: relative;
        top: 5rem;
    }

    .events-card:nth-of-type(3) {
        position: relative;
        top: 10rem;
    }

    .media-cards-container {
        flex-direction: row;
        gap: 1rem;
    }

    .mediaCenter .row .col-lg-4 .card .card-img-overlay .media-card-title {
        font-size: 1.4rem;
    }

    .mediaCenter .row .col-lg-4 .card {
        height: 15rem;
    }

    .mediaCenter .row .card .card-img-overlay .media-card-button {
        height: 4rem;
        width: 4rem;
    }

    .media-card-date {
        padding: 1rem;
    }

    .masonry-media-cards-container {
        flex-direction: column;
    }
}
    @media (min-width:992px) {
        .services-links-card {
            max-width: 31.33%;
            flex: 0 0 31.33%;
            margin: 1rem 1rem 0 1rem;
        }

        .services-links-card:nth-child(3n+1) {
            margin-right: 0;
        }

        .services-links-card:nth-child(3n+3) {
            margin-left: 0;
        }

        /* SUBPAGES HERO SECTION START */
        .heroSection div.card-img-top {
            height: 80vh;
        }

        /* SUBPAGES HERO SECTION END */
    }

    @media (min-width: 1200px) {
        .container{
            padding-left: 6rem;
            padding-right: 6rem;
        }
        .calculator-banner .basictext {
            width: 55%;
        }

        .report-page-section {
            margin-bottom: 2rem;
        }

        .faq-section .faq-card {
            padding: 3rem 3rem 1.5rem 3rem;
        }

        .faq-cards-container {
            gap: 2rem;
        }

        .important-links-overlay {
            pointer-events: none;
            opacity: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            backdrop-filter: blur(0.625rem);
            background: url('/_catalogs/Masterpage/NDS/media/Group\ 4114.png') center no-repeat;
            background-size: 10rem;

        }

        .important-links-overlay:not(.active) {
            background-size: 10rem !important;
        }

        .important-links-overlay-circle {
            height: 30rem;
            width: 30rem;
            border-radius: 50%;
            background: rgb(0, 0, 0, 0.3);
            backdrop-filter: blur(0.625rem);
            position: relative;
            mask: radial-gradient(transparent 6.875rem, #000 6.5625rem);
        }

        .important-links-container.active {
            bottom: 50%;
            height: 10rem;
            width: 10rem;
            display: block;
        }

        .important-links-x {
            border: 0.0625rem solid white;
            right: 5rem;
            top: 3rem;
            bottom: auto;
            background-color: transparent;
        }

        .important-links-x:hover {
            background-color: rgba(255, 255, 255, 0.032);

        }

        .important-links-overlay-circle-before,
        .important-links-overlay-circle-after {

            display: block;
        }

        .important-links-item::before {
            display: block;
        }

        .important-links-item {
            transition: none;
            position: absolute;
            top: 8%;
            right: 50%;
            height: 4rem;
            width: 6rem;
            display: flex;
            flex-direction: column;
            opacity: 0;
        }

        .important-links-item:nth-child(5) {
            transform: translate(50%, 200%);
        }

        .important-links-overlay.active .important-links-item:nth-child(5) {
            transform: translate(50%, 0%);
            opacity: 1;
        }

        .important-links-item:nth-child(6) {
            top: 42%;
            right: 13%;
            transform: translate(-150%, -50%);
        }
.Children3 .important-links-item:nth-child(6) {
            top: 50%;
            right: 14%;
            transform: translate(-150%, -50%);
        }
        .important-links-overlay.active .important-links-item:nth-child(6) {
            transform: translate(45%, 0%);
            opacity: 1;
        }
    .important-links-overlay.active .important-links-overlay-circle.Children3 .important-links-item:nth-child(6) {
            transform: translate(16%, 84%);
            opacity: 1;
        }
          .important-links-overlay.active .important-links-overlay-circle.Children3 .important-links-item:nth-child(4) {
            transform: translate(-24%, 84%);
            opacity: 1;
        }
        .important-links-item:nth-child(3) {
            top: auto;
            bottom: 0%;
            right: 50%;
            transform: translate(50%, -250%);
        }

        .important-links-overlay.active .important-links-item:nth-child(3) {
            transform: translate(50%, -50%);
            opacity: 1;
        }
        .important-links-overlay-circle.Children3 .important-links-item:nth-child(3) {
            transform: translate(50%, 0%);
            opacity: 1;
        }
         .important-links-overlay-circle.Children3 .important-links-item:nth-child(3) {
            top: 50%;
            bottom: auto;
            left: auto;
            right: 14%;
        }
        .important-links-item:nth-child(4) {
            top: 50%;
            bottom: auto;
            right: auto;
            left: 14%;
            transform: translate(150%, -50%);
        }
.Children3 .important-links-item:nth-child(4) {
            top: 50%;
            bottom: auto;
            right: auto;
            left: 14%;
            transform: translate(150%, -50%);
        }
        .important-links-overlay-circle.Children2 .important-links-item:nth-child(4){
             top: auto;
             bottom: 6%;
             right: auto;
             left: 50%;
             transform: translate(-45%, 50%);
        }
        .important-links-overlay.active .important-links-item:nth-child(4) {
            transform: translate(-45%, 0%);
            opacity: 1;
        }
        .important-links-overlay-circle.Children2 .important-links-overlay.active .important-links-item:nth-child(4){
            transform: translate(150%, -50%);
        }
        /**/
.important-links-item:nth-child(7) {
            bottom: 8%;
            top: auto;
            right: auto;
            left: 50%;
            transform: translate(150%, -50%);
        }
        .important-links-overlay-circle.Children2 .important-links-item:nth-child(7){
             top: auto;
             bottom: 6%;
             right: auto;
             left: 50%;
             transform: translate(-45%, 50%);
        }
        .important-links-overlay.active .important-links-item:nth-child(7) {
            transform: translate(-50%, 0%);
            opacity: 1;
        }
        .important-links-overlay-circle.Children2 .important-links-overlay.active .important-links-item:nth-child(7){
            transform: translate(150%, -50%);
        }
        /**/
        .important-links-text {
            color: white;
            margin-top: .2rem;
            color: #D5D8DA;
            width: auto;
            height: auto;
            display: block;
            justify-content: start;
            align-items: start;
            padding: 0;
            border-radius: 0;
            background-color: transparent;
            text-align: center;
            white-space: nowrap;
        }

        .important-links-icon {
            right: auto;
            position: relative;
        }

        .important-links-icon img {
            width: 50%;
            height: 100%;
        }

        .landing-swiper-slide {
            justify-content: start;
        }

        .landing-content-main {
            display: block;
        }

        img.landing-pattern-light {
            bottom: -2.5rem;
        }

        .landing-container {
            height: 70vh;
        }

        img.landing-pattern-img {
            position: absolute;
            bottom: -4rem;
        }

        .landing-content-main {
            width: 65%;
            margin-top: 3rem;
        }

        .landing-container .landing-content-container .landing-title {
            font-size: 3.2rem;
            text-align: start;
            line-height: normal;
        }

        .landing-subtitle-line {
            display: block;
        }

        .landing-swiper-pagination.swiper-pagination-bullets.swiper-pagination-vertical {
            display: block;
            transform: translateY(-90%);
        }

        .header-links-container {
            position: relative;
            top: auto;
            right: auto;
            width: auto;
            z-index: auto;
            height: auto;
            background: transparent;
            transform: translate(0);
        }

        .header-links-ul {
            flex-direction: row;
        }

        .main-header-mobile-line {
            display: none;
        }

        .main-logo-container {
            width: 5.5rem;
        }

        header.navbar {
            height: unset;
            border-bottom: 0.0625rem solid rgb(255 255 255 / 25%);
            background-color: transparent;
        }

        .main-header.dropdownactive {
            background-color: white;
            border-bottom: 0.125rem solid #F8F8F8;
        }

        .header-link {
            position: relative;
            padding-right: 0;
        }

        .header-link-dropdown {
            padding-right: 1rem;
        }

        .header-link-dropdown-text {
            color: white;
            font-size: 1rem;
            font-family: avenirmedium;
        }

        .header-link-dropdown-menu {
            width: 100vw;
            padding-top: 3rem;
            padding-bottom: 5rem;
            position: absolute;
            background: #F8F8F8;
            left: -21rem;
            height: auto;
            top: 6rem;
            pointer-events: none;
            display: grid;
            gap: 3rem;
            grid-template-columns: 4fr 2.5fr 2.5fr;
            border-top: 0.0625rem solid #EBEBEB;
            opacity: 0;
            transform: translateY(20%);
            padding-right: 5.5rem;
            padding-left: 5.5rem;

        }

        .header-link-dropdown-menu.active {
            transform: translateY(20%);
        }

        .header-link-dropdown-menu-item-container {
            padding-left: 0;
            border: 0;
        }

        .header-link-dropdown-menu-item-list {
            padding-top: 1rem;
            display: flex;
            gap: .5rem;
            flex-direction: column;
            height: 23rem;
            flex-wrap: wrap;
            width: auto;
            transform: translate(0);
            position: relative;
            background-color: transparent;
        }

        .header-link-dropdown-menu-item-container {
            border-left: 0.125rem solid #EDEDED;
            padding-left: 3rem;
        }

        .header-links-arrow img {
            display: none;
        }

        li.header-link-dropdown-menu-item-list-item {
            display: block;
            padding: 0;
            gap: 0;
            padding-left: 0;
            align-items: center;
            justify-content: space-between;
            width: auto;
            cursor: pointer;
            border: none;
        }

        .main-header.dropdownactive .header-link-dropdown.active .header-link-dropdown-menu {
            opacity: 1;
            transform: translate(0);
            pointer-events: all;
        }

        .header-link-dropdown-menu-item-title {
            color: var(--purple);
            font-size: 1.2rem;
            font-family: avenirdemi;
            padding-bottom: 1rem;
            border-bottom: 0.125rem solid #EBEBEB;
            padding-left: 0;
            padding-right: 0;
        }

        .header-link-dropdown-after {
            display: flex;
            content: '';
            position: absolute;
            opacity: 0;
            right: 0;
            top: 0;
            width: 90%;
            background-color: #F6F6F6;
            opacity: 0;
            border-top-left-radius: 1rem;
            border-top-right-radius: 1rem;
            height: 150%;
            z-index: -1;
            cursor: pointer;
        }

        .main-header.dropdownactive .header-link-dropdown-after {
            opacity: 1;
        }

        .main-header.dropdownactive .header-link-dropdown-text {
            color: black;
        }

        .main-header.dropdownactive .header-link a {
            color: black;
        }

        .main-header.dropdownactive .colored-logo {
            display: block;

        }

        .main-header.dropdownactive .white-logo {
            display: none;

        }

        .main-header.dropdownactive .header-language-container {

            border: 0.0625rem solid #E7E7E7;
            color: black;
            background-color: rgba(255, 255, 255, 0.032);
        }

        .main-header.dropdownactive .header-language-container .header-caret img:nth-child(1) {
            display: none;

        }

        .main-header.dropdownactive .header-language-container .header-caret img:nth-child(2) {
            display: block;
            width: 1.2rem;
            transform: rotate(90deg);

        }

        .main-header.dropdownactive .header-link-dropwdown-arrow img:nth-child(1) {
            display: none;

        }

        .main-header.dropdownactive .header-link-dropwdown-arrow img:nth-child(2) {
            display: block;
            width: 1.2rem;
            transform: rotate(-90deg);

        }

        .main-header.dropdownactive .header-search {
            border: 0.0625rem solid #E7E7E7;
        }

        .main-header.dropdownactive .header-search img {
            filter: brightness(0) saturate(100%) invert(33%) sepia(12%) saturate(1999%) hue-rotate(247deg) brightness(90%) contrast(93%);
        }

        .hamburger-container {
            display: none;
        }

        .header-link.mobile-menu-title {
            display: none;
        }

        .header-links-container {
            display: flex;
        }

        .header-link {
            border: none;
            height: unset;
        }

        .header-buttons-container {
            display: flex;
            position: relative;
            right: auto;
        }

        .header-caret {
            margin-left: 1rem;
        }

        .header-caret img:first-child {
            display: block;
        }

        .header-caret img:nth-child(2) {
            display: none;
        }

        .header-caret img {
            width: .7rem;
            transform: none;
        }

        .header-language-container {
            display: flex;
            position: relative;
            align-items: center;
            justify-content: center;
            opacity: 1;
            pointer-events: all;
            transition: var(--transition);
        }

        .header-link-dropwdown-arrow img:first-child {
            display: block;
        }

        .header-link-dropwdown-arrow img:nth-child(2) {
            display: none;
        }

        .header-link-dropwdown-arrow img {
            width: .7rem;

        }

        .header-search {
            width: 2.8rem;
            height: 2.8rem;
            margin: .5rem;
            margin-right: 1rem;
            border: 0.0625rem solid rgb(255 255 255 / 25%);
        }

        .header-search:hover {
            background-color: rgba(255, 255, 255, 0.032);
            border: 0.0625rem solid rgba(255, 255, 255, 0.756);
        }



        .events-section {
            justify-content: normal;
            flex-wrap: nowrap;
            flex-direction: row;
            padding-bottom: 0rem;
            padding-top: 5rem;
        }

        .upcoming-events-title {
            font-size: 2.4rem;
            margin: 0;
            margin-bottom: 3rem;
        }

        .twitter-feed-container {
            border-bottom-right-radius: 1rem;
            border-bottom-left-radius: 1rem;
            overflow: hidden;
            box-sizing: content-box;
            padding-top: 5rem;
            max-height: 34.7rem;
            margin-bottom: 5rem;
        }

        .events-card {
            height: 30rem;
        }

        .events-card-background {
            bottom: 0;
        }

        .events-card:not(.active) {
            width: calc(17% - 1rem);
        }

        .events-time-text {
            font-size: .95rem;
        }

        .events-card:not(.active) .events-card-title,
        .events-card:not(.active) .events-time,
        .events-card:not(.active) .events-button {
            display: none;


        }

        .events-card-title {
            font-size: 1.5rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            height: 5rem;
        }

        .events-button {
            right: 1.5rem;
        }

        .events-button-image {
            width: 3.5rem;
            height: 3.5rem;
        }

        .events-card.active {
            width: 67%;
        }

        .onlyOne .events-card {
            width: 100%;
        }

        .events-card:not(.active) .events-card-content {
            padding: 0;
        }

        .events-card:not(.active) .events-date-container {
            left: 50%;
            right: 50%;
        }

        .events-card:not(.active) .events-card-type {
            background-color: #F9FAFB;
            text-align: center;
        }

        .events-card:not(.active) .events-image-shadow {
            background: #8e608ec4;
        }

        .events-card:not(.active).holiday .events-image-shadow,
        .events-card:not(.active).عطلة .events-image-shadow {
            background: #4f637aba;
        }

        .events-card:not(.active).holiday .event-type-text {
            color: #4f637a;
        }



        .events-date-day {
            font-size: 2.8rem;
        }

        .events-image-line {
            margin-bottom: 1.3rem;
        }

        .events-date-month {
            font-size: 1.7rem;
        }

        .events-card:nth-of-type(2) {
            position: relative;
            top: auto;
        }

        .events-card:nth-of-type(3) {
            position: relative;
            top: auto;
        }

        .events-image-part-container {
            height: 60%;
        }

        .events-card:not(.active) .events-card-content {
            padding: 2rem;
            display: flex;
            justify-content: center;
            align-items: start;
            flex-direction: column;
            background-color: #F9FAFB;


        }

        .about-us-section .aboutUs .about-us-title {
            font-size: 2.3rem;
        }

        body .econtainer .appTitle {
            font-size: 2.25vw;
            margin-top: 1rem;
        }

        .services-card {
            width: 33%;
            padding: 2.5rem;
        }

        .siteLinks .swiper-wrapper .swiper-slide:nth-child(odd) .card {
            background-color: #723B75de;
        }

        .sitelinks-card:nth-child(even) {
            background-color: #7E4282e6;

        }

        .latestNews {
            padding-bottom: 5rem;
            padding-top: 5rem;
        }

        .newsSubtitle {
            display: inline-block;
            width: auto;
            margin: auto;
        }

        .latestNews .topSection {
            padding-bottom: 3.5rem;
            justify-content: space-between;
        }

        .view-all-news {
            display: flex;
        }

        .view-all-news.mobile {
            display: none;
        }

        .latestNews .row .col-lg-4 .card .card-body .card-title {
            margin-bottom: 1.2rem;
            font-size: 1.4rem;
        }

        .latestNews .row .col-lg-4 .card .card-body {
            padding: 2rem 1.5rem;
        }

        .mediaCenter .row .col-lg-4 .card {
            height: 18rem;
        }

        .media-subtitle {
            width: auto;
            margin: auto;
            display: inline-block;
        }

        .mediaCenter {
            padding-top: 3rem;
            padding-bottom: 5rem;
            padding-left: 6rem;
            padding-right: 6rem;
        }

        .media-header {
            padding-bottom: 3.5rem;
            justify-content: space-between;
        }

        .media-cards-container {
            flex-direction: row;
            gap: 1.5rem;
        }


        .mediaCenter .row .col-lg-4:nth-child(3n+3) .card {
            height: 28rem;
        }

        .mediaCenter .row .col-lg-4:nth-child(3n+1) .card {
            height: 30rem;
        }

        .mediaCenter .row .col-lg-4:nth-child(3n+2) .card {
            height: 22rem;
        }

        .mediaCenter .row .card .card-img-overlay .media-card-button {
            height: 5rem;
            width: 5rem;
        }

        .media-card-date {
            padding: 1rem 1.5rem;
        }

        .about-us-images {
            display: flex;
            padding-left: 7rem;
        }

        .about-us-section {
            padding-top: 10rem;
            padding-bottom: 8.5rem;
        }

        .footer-copyrights-container {
            font-size: 1rem;
        }

        .footer-container {
            padding-top: 3rem;
            background-size: cover;
            background-position: auto;
        }

        .footer-lower-links-container {
            display: flex;
        }

        .footer-items-container {
            flex-direction: row;
            padding-left: 6rem;
            padding-right: 6rem;
        }

        .footer-links {
            padding: 0;
        }

        .footer-links-container {
            gap: 1.5rem;
            margin: 0;
            border: none;
        }

        .footer-links-container:last-child{
            width: 20%;
        }

        .footer-links-container:nth-child(6) {

            padding-bottom: 0;
        }

        .footer-logo-container {
            display: flex;
        }

        .footer-mobile-logo-container img {
            width: 8rem;
        }

        .footer-link-container-title::after {
            display: none !important;
        }

        .footer-link-container-title {
            padding: 0;
            padding-left: 1rem;
            margin-right: 0;
            margin-left: 0;
            border-bottom: none;
            font-size: 1.1rem;
        }

        .footer-link-container-title::before {
            content: '';
            position: absolute;
            z-index: 0;
            left: 0;
            background-color: var(--purple);
            display: block;
            height: 100%;
            width: .22rem;
        }

        .footer-social-links-container {
            justify-content: start;
            order: 0;
            align-items: start;
        }

        .footer-mobile-logo-container {
            display: none;
        }

        .social-media-icon {
            width: 2.5rem;
            height: 2.5rem;
            margin-top: .8rem;
        }

        .footer-lower-container {
            margin-top: 8rem;
            flex-direction: row;
            gap: 0;
        }

        footer .footer-lower-links-container .footer-lower-link {
            font-size: 1rem;
        }

        /* modal page */
        .media-swiper-slide {
            width: 35%;
        }

        .media-swiper-pagination.swiper-pagination {
            width: 10%;
        }

        .media-swiper-button {
            right: 7rem;
        }

        .media-swiper-button.swiper-button-prev {
            left: 7rem;
        }

        .overview-subtitle {
            margin: unset;
            margin-bottom: .5rem;
            display: inline-block;
        }

        /* Other Page */
        .gray-section {
            width: 100%;
            height: 10rem;
        }

        .overview-images {
            display: flex;
        }

        .overview-section .overview-title {
            padding-right: 3rem;
            text-align: start;
            line-height: 1.25;
            font-size: 2.25rem;
        }

        .overview-section {
            padding-top: 5rem;
            padding-bottom: 5rem;
        }

        .overview-container {
            padding-left: 10rem;
            padding-right: 10rem;
        }

        .overview-paragraph {
            text-align: start;
        }

        .account-information-section {
            height: 20rem;
            flex-direction: row;
            display: flex;
            justify-content: space-between;
            align-items: center;
            text-align: start;
            gap: 0;
            padding-left: 6rem;
            padding-right: 6rem;
        }

        .account-information-title {
            font-size: 2.3rem;
            margin-bottom: 1.5rem;
        }

        .account-information-description {
            width: 70%;
        }

        .services-links-section {
            padding: 5rem 6rem;
        }
        .services-links-card {
            text-align: start;
            justify-content: start;
            align-items: start;
            padding: 2rem 2rem 1.5rem 2rem;
            padding-right: 3rem;
        }
        .services-links-section .services-links-title {

            font-size: 2.3rem;
        }

        .services-links-title-container {
            width: 51%;
            padding-bottom: 2rem;
            padding-top: 0;
        }

        .services-links-description {
            font-size: 1.1rem;
            line-height: 1.8;
            padding-top: 1.2rem;
        }

        .services-links-card .services-links-card-title {
            padding-bottom: 1rem;
        }

        .footer-quick-links-container {
            flex-direction: row;
            padding: 0;
        }

        .footer-quick-links-container .footer-quick-links-title {
            padding: 3rem;
            padding-top: 1.5rem;
            padding-bottom: 1.5rem;
        }


        .footer-quick-links-item {
            justify-content: center;
            align-items: center;
            padding-right: 2rem;
            padding-left: 2rem;
            width: auto;
            border-bottom: 0;
        }

        .company-code-section {
            padding: 5rem 6rem;
        }

        .company-code-section .company-code-title {
            color: black;
            font-size: 2.3rem;
            padding-bottom: 2.5rem;
        }

        .company-code-card {

            width: 75%;
            flex-direction: row;

            justify-content: space-between;
            align-items: center;
            padding: 1.5rem 2.5rem;
            gap: 1rem;
        }

        .company-code-card-right-container {
            flex-direction: row;

            text-align: start;
        }

        .services-links-button {
            margin-top: 3.5rem;
            margin-bottom: 0;
        }

        .masonry-media-card.masonry-media-card-0 {
            height: 15rem;
        }

        .masonry-media-card {
            position: relative;
        }

        .masonry-media-card.masonry-media-card-0 .media-card-inner-border {

            width: 96%;
            height: 93%;
        }

        .faq-section {
            padding-left: 6rem;
            padding-right: 6rem;
            padding-top: 4rem;
            padding-bottom: 4rem;
        }

        .faq-section .card {
            padding: 2.5rem 2rem;
            margin-bottom: 2rem;
        }

        .faqSocialResponsibility .faq-card .faq-card-item-question {
            padding: 1.8rem 2rem;
        }

        .faq-card-item-answer {
            font-size: 1rem;
            padding-right: 17rem;

        }

        .faq-card-item-question-text {
            font-family: avenirmedium;
            font-size: 1.2rem;
        }

        .faq-card-item-question {
            padding-top: 1.5rem;
            padding-bottom: 1.5rem;
        }

        .news-details-section {
            padding-left: 11rem;
            padding-right: 11rem;

        }

        .news-details-container {
            top: -12rem;
            padding: 4rem 6rem 8rem 5rem;
        }

        .news-details-date-text {
            font-size: 1rem;

        }

        .news-details-title {

            font-size: 2.25rem;

            padding-bottom: 3rem;

            padding-top: 2rem;
        }

        .news-details-paragraph {
            font-size: 1rem;
        }

        .news-details-paragraph p {
            padding-bottom: 3rem;
        }

        .survey-section {
            padding: 5rem 13rem;
        }

        .survey-card {
            padding: 2.5rem 4rem;
        }

        .survey-modal-container {
            width: 60%;
            height: 90%;
        }

        .survey-modal-image-container {
            width: 20rem;
            height: 20rem;
        }

        .survey-modal-thanks {
            width: 60%;
            font-size: 1.45rem;
        }

        .calculator-banner {
            padding: 4rem 0;
        }

        body .data-input-full-field {
            width: calc(50% - 1.5rem);
        }

        .data-input-submit {
            padding: 1rem 2.5rem;
        }

        .data-input-submit {
            padding: 1rem 2.5rem;
        }

        .data-input-modal-content {
            width: 40%;
            padding: 6rem 5rem;
        }

        .report-page-container {
            padding-left: 6rem;
            padding-right: 6rem;
        }

        .report-page-header-line {
            margin: 0 2rem;
        }
    }

    @media (min-width: 1200px) and (max-width: 1400px) {
        .masonry-media-card {
            width: 31%;
        }
    }

    @media(min-width:1600px) {

        .footer-links {

            gap: 1.3rem;

        }

        .siteLinks .swiper-wrapper .swiper-slide .card .card-text {
            line-height: 1.6;
            height: 3rem;
        }

        body {
            font-size: 1vw;
        }

        h2 {
            font-size: 2.25vw;
        }

        .landing-button-text {
            font-size: 1.2vw;
            margin-right: 0.7vw;
        }

        .important-links-container {
            right: 3vw;
            bottom: 4vw;
        }

        /* about us - home page 1600 start */
        .about-us-subtitle {
            border-radius: 2vw;
            border: 0.0625vw solid #DEDEDE;
            padding: 0.4vw 1.3vw;
            letter-spacing: 0.0625vw;
            margin-bottom: 1vw;
        }

        .siteLinks .swiper-wrapper .swiper-slide .card .icon {
            width: 2.5vw;
            height: 2.5vw;

        }

        .mediaCenter .row .col-lg-4:nth-child(3n+1) .card,
        .mediaCenter .row .col-lg-4:nth-child(3n+3) .card {
            height: 27vw;
        }

        .mediaCenter .row .col-lg-4:nth-child(3n+2) .card {
            height: 20vw;
        }

        .latestNews .row .col-lg-4 .card .card-body .card-title {
            margin-bottom: 1vw;
            font-size: 1.4vw;
        }

        .latestNews .row .col-lg-4 .card .card-body .card-text {
            margin-bottom: 2vw;
            line-height: 1.6;
        }

        .latestNews .row .col-lg-4 .card .card-img-overlay .newsDate span {
            font-size: .95vw;
        }

        .latestNews .row .col-lg-4 .card .card-img-overlay .newsDate .icon {
            width: .9vw;
            margin-right: .4vw;
        }

    }