/*
Media Query mixin
See https://github.com/sass-mq/sass-mq/ for original full version.
@example scss
.element {
@include mq($from: mobile) {
color: red;
}
@include mq($to: tablet) {
color: blue;
}
@include mq(mobile, tablet) {
color: green;
}
@include mq($from: tablet, $and: '(orientation: landscape)') {
color: teal;
}
@include mq(em(950px)) {
color: hotpink;
}
@include mq(em(950px), $media-feature: height) {
color: hotpink;
}
@include mq(tablet, $media-type: screen) {
color: hotpink;
}
// Advanced use:
$custom-breakpoints: (L: 900px, XL: 1200px);
@include mq(L, $bp: $custom-breakpoints) {
color: hotpink;
}
}
*/
/*
Margin / Padding Quick Resets
example: top & bottom margin set to $spacing-unit
.element {
@include push--ends;
}
example: left & right padding set to $spacing-unit--small
.element {
@include soft--sides($spacing-unit--small);
}
*/
/*
Helper mixins
*/
/*
Form input placeholder text
example:
input,
textarea {
@include input-placeholder {
color: $grey;
}
}
*/
/*
Retina images
example:
.element {
@include retina {
background-image: url(../img/background@2x.png);
}
}
*/
/*
Content margins
fore removing first/last child margins
example: default
.element {
@include content-margins;
}
output:
.element > *:first-child {
margin-top: 0;
}
.element > *:last-child {
margin-bottom: 0;
}
example: empty selector
.element {
@include content-margins('false');
}
output:
.element:first-child {
margin-top: 0;
}
.element:last-child {
margin-bottom: 0;
}
*/
/*
CSS Triangle
used for creating CSS only triangles
example:
.element {
&::before {
@include css-triangle(blue, down);
}
}
*/
/*
Hide text
example:
.element {
@include hide-text;
}
*/
/*
Responsive ratio
Used for creating scalable elements that maintain the same ratio
example:
.element {
@include responsive-ratio(400, 300);
}
*/
/*
Icon
For using fontastic icons in pseudo elements
*/
/*
Colours
background, colour, etc. match up with colour map in _variables.scss
modify to suit per project
*/
/*
Fluid Property
http://www.adrenalinmedia.com.au/the-agency/insights/this-changes-everything-css-fluid-properties.aspx
HTML:
Text to replace
example:
h1 {
@include fp(font-size, 50, 100); // 50px at 320, 100px at 1920;
}
output:
h1 {
font-size: calc(3.125vw + 40px); //This is the magic!
}
@media (max-width:320px){ //Clips the start to the min value
font-size:50px;
}
@media (min-width:1920px){ //Clips the end to the max value
font-size:100px;
}
*/
/*
Misc
*/
/*
Font face
example:
@include font-face('Clarendon', 'clarendon-webfont');
@include font-face('Clarendon', 'clarendon-webfont', $w--bold, italic);
*/
/*
REMs
*/
/*
EMs calculator
*/
/*
Grids
*/
/*
Photoshop letter spacing
use:
for simple conversion between Photoshop letter-spacing to ems
prerequisits:
$ls list must exist in variables file
example:
.awesome-heading {
letter-spacing: ls('awesome-heading');
}
could generate (if "awesome-heading") is 2nd in the list:
.awesome-heading {
letter-spacing: -0.01em;
}
*/
/*
Map deep get
Get values from anywhere in a variable list
http://css-tricks.com/snippets/sass/deep-getset-maps/
*/
/*
Strip unit
*/
/*
Very simple number functions
*/
/*
Photoshop letter spacing
use:
get the value of a particular breakpoint
example:
.box {
width: breakpoint('phone-wide');
}
would generate:
.box {
width: 480px;
}
*/
/*
Colour map lookup, retrieving base value by default
*/
/*
SVG inliner
*/
/*
Media Query mixin
See https://github.com/sass-mq/sass-mq/ for original full version.
@example scss
.element {
@include mq($from: mobile) {
color: red;
}
@include mq($to: tablet) {
color: blue;
}
@include mq(mobile, tablet) {
color: green;
}
@include mq($from: tablet, $and: '(orientation: landscape)') {
color: teal;
}
@include mq(em(950px)) {
color: hotpink;
}
@include mq(em(950px), $media-feature: height) {
color: hotpink;
}
@include mq(tablet, $media-type: screen) {
color: hotpink;
}
// Advanced use:
$custom-breakpoints: (L: 900px, XL: 1200px);
@include mq(L, $bp: $custom-breakpoints) {
color: hotpink;
}
}
*/
/*
Margin / Padding Quick Resets
example: top & bottom margin set to $spacing-unit
.element {
@include push--ends;
}
example: left & right padding set to $spacing-unit--small
.element {
@include soft--sides($spacing-unit--small);
}
*/
/*
Helper mixins
*/
/*
Form input placeholder text
example:
input,
textarea {
@include input-placeholder {
color: $grey;
}
}
*/
/*
Retina images
example:
.element {
@include retina {
background-image: url(../img/background@2x.png);
}
}
*/
/*
Content margins
fore removing first/last child margins
example: default
.element {
@include content-margins;
}
output:
.element > *:first-child {
margin-top: 0;
}
.element > *:last-child {
margin-bottom: 0;
}
example: empty selector
.element {
@include content-margins('false');
}
output:
.element:first-child {
margin-top: 0;
}
.element:last-child {
margin-bottom: 0;
}
*/
/*
CSS Triangle
used for creating CSS only triangles
example:
.element {
&::before {
@include css-triangle(blue, down);
}
}
*/
/*
Hide text
example:
.element {
@include hide-text;
}
*/
/*
Responsive ratio
Used for creating scalable elements that maintain the same ratio
example:
.element {
@include responsive-ratio(400, 300);
}
*/
/*
Icon
For using fontastic icons in pseudo elements
*/
/*
Colours
background, colour, etc. match up with colour map in _variables.scss
modify to suit per project
*/
/*
Fluid Property
http://www.adrenalinmedia.com.au/the-agency/insights/this-changes-everything-css-fluid-properties.aspx
HTML:
Text to replace
example:
h1 {
@include fp(font-size, 50, 100); // 50px at 320, 100px at 1920;
}
output:
h1 {
font-size: calc(3.125vw + 40px); //This is the magic!
}
@media (max-width:320px){ //Clips the start to the min value
font-size:50px;
}
@media (min-width:1920px){ //Clips the end to the max value
font-size:100px;
}
*/
/*
Misc
*/
/*
Font face
example:
@include font-face('Clarendon', 'clarendon-webfont');
@include font-face('Clarendon', 'clarendon-webfont', $w--bold, italic);
*/
/*
REMs
*/
/*
EMs calculator
*/
/*
Grids
*/
/*
Photoshop letter spacing
use:
for simple conversion between Photoshop letter-spacing to ems
prerequisits:
$ls list must exist in variables file
example:
.awesome-heading {
letter-spacing: ls('awesome-heading');
}
could generate (if "awesome-heading") is 2nd in the list:
.awesome-heading {
letter-spacing: -0.01em;
}
*/
/*
Map deep get
Get values from anywhere in a variable list
http://css-tricks.com/snippets/sass/deep-getset-maps/
*/
/*
Strip unit
*/
/*
Very simple number functions
*/
/*
Photoshop letter spacing
use:
get the value of a particular breakpoint
example:
.box {
width: breakpoint('phone-wide');
}
would generate:
.box {
width: 480px;
}
*/
/*
Colour map lookup, retrieving base value by default
*/
/*
SVG inliner
*/
*:focus {
outline: none; }
html {
font-size: 100%; }
@media (max-width: 1024px) {
html {
font-size: 90%; } }
@media (max-width: 767px) {
html {
font-size: 85%; } }
body {
font-size: 1rem;
font-family: "Nunito Sans", sans-serif;
font-weight: 400;
padding: 0;
margin: 0;
background: #fff;
overflow-X: hidden; }
a {
text-decoration: none;
color: #828282; }
a:hover {
color: #46a4e5;
text-decoration: none; }
.last-margin-0 > *:last-child {
margin-bottom: 0 !important; }
#data-9523 {
position: relative;
height: 100vh;
color: #fff; }
#data-9523 .bg-overlay {
position: fixed;
width: 100%;
height: 100vh;
background-color: #000;
z-index: 999; }
#data-9523 .section {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
background-position: center;
font-size: 14px; }
#data-9523 .section-wrapper {
position: relative;
z-index: 22;
width: 60%;
height: 100vh;
min-height: 500px; }
@media (max-width: 820px) {
#data-9523 .section-wrapper {
width: 75%; } }
#data-9523 .content {
display: flex;
align-items: center;
height: calc(100% - 184px);
padding-top: 20vw; }
#data-9523 .content ul {
margin: 0;
padding: 0;
list-style: none; }
#data-9523 .content-title {
font-size: 28px;
font-weight: 900;
text-transform: uppercase;
margin-bottom: 2rem; }
#data-9523 .content-btn {
display: flex;
align-items: center;
margin-top: 2rem; }
#data-9523 .content-btn > * {
margin-right: 1rem;
display: inline-block; }
#data-9523 .content-btn img {
width: 34px; }
#data-9523 .content-btn a {
font-size: 14px;
text-transform: uppercase;
color: #fff; }
#data-9523 .content-btn a:hover {
text-decoration: none; }
#data-9523 .content-btn span {
font-weight: 800;
font-size: 1.4rem;
display: inline-flex; }
#data-9523 .content-subtitle {
font-size: 2rem;
margin-top: 2rem;
font-weight: 800; }
#data-9523 .group-title {
font-size: 22px;
font-weight: 800;
margin: 1rem 0 0.5rem; }
#data-9523 .content-text {
font-size: 14px;
font-weight: 400px;
margin-top: 2rem; }
#data-9523 .content-numbers {
display: flex;
line-height: 1.1;
width: 380px;
flex-wrap: wrap; }
#data-9523 .content-numbers .content-item {
display: flex;
flex-direction: column;
text-align: center;
flex: 0 0 33.3%;
max-width: 33.3%;
margin-top: 0.9375rem; }
#data-9523 .content-numbers span.num {
font-size: 2.5rem;
font-weight: 900; }
#data-9523 .content-numbers span.group-name {
color: #9152a1;
font-size: 1rem;
text-transform: uppercase; }
#data-9523 .p-title {
font-weight: 900;
margin-top: 1rem; }
#data-9523 .content-col {
display: flex;
justify-content: space-between;
align-items: flex-start; }
#data-9523 .content-col-text {
flex: 1;
font-size: 14px; }
#data-9523 .content-col-img {
width: 230px;
margin-left: 1rem; }
#data-9523 .content-col-title {
font-weight: 900;
font-size: 1.5rem;
margin-bottom: 1rem; }
#data-9523 .wheel {
position: absolute;
top: 0;
right: -40vw;
bottom: 0;
display: flex;
align-items: center;
overflow: hidden;
z-index: 99; }
#data-9523 .wheel-wrapper {
width: 80vw;
height: 80vw;
position: relative;
right: 0vw;
cursor: grab; }
@media (max-width: 820px) {
#data-9523 .wheel-wrapper {
right: -55vw; } }
#data-9523 .wheel-wrapper:active {
cursor: grabbing; }
#data-9523 .wheel-img {
width: 100%; }
#data-9523 .wheel-item {
position: absolute;
width: 18vw;
z-index: -1; }
#data-9523 .wheel-item-1 {
top: 34vw;
left: 4vw; }
#data-9523 .wheel-item-2 {
top: 50vw;
left: 10vw;
transform: rotate(-36deg); }
#data-9523 .wheel-item-3 {
bottom: 6vw;
left: 23vw;
transform: rotate(-72deg); }
#data-9523 .wheel-item-4 {
bottom: 6vw;
left: 40vw;
transform: rotate(-108deg); }
#data-9523 .wheel-item-5 {
bottom: 18vw;
right: 8vw;
transform: rotate(-144deg); }
#data-9523 .wheel-item-6 {
bottom: 34vw;
right: 3vw;
transform: rotate(-180deg); }
#data-9523 .wheel-item-7 {
bottom: 50vw;
right: 8vw;
transform: rotate(144deg); }
#data-9523 .wheel-item-8 {
top: 6vw;
left: 40vw;
transform: rotate(108deg); }
#data-9523 .wheel-item-9 {
top: 5vw;
left: 22vw;
transform: rotate(72deg); }
#data-9523 .wheel-item-10 {
top: 17vw;
left: 9vw;
transform: rotate(36deg); }
#data-9523 .logo {
position: absolute;
z-index: 995;
left: 0;
top: 0;
width: 100%; }
#data-9523 .logo .container {
position: relative; }
#data-9523 .footer {
position: absolute;
bottom: 20px;
right: 0;
left: 0;
z-index: 100; }
#data-9523 .footer.sticky {
position: fixed; }
#data-9523 .footer-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 65%; }
#data-9523 .control {
display: flex;
font-size: 14px;
text-transform: uppercase; }
#data-9523 .control > div {
margin-right: 1rem;
cursor: pointer; }
#data-9523 .control img {
width: 14px;
margin: 0.5rem; }
#data-9523 .turn {
display: flex;
flex-direction: column; }
#data-9523 .turn img {
align-self: center;
width: 40px; }
#data-9523 .turn span {
text-align: center;
font-size: 12px;
text-transform: uppercase;
margin-top: 0.5em;
margin-right: -0.2em; }
#data-9523.sticky .content-btn {
margin-bottom: 60px !important; }
#data-9523.sticky .footer {
position: fixed;
bottom: 0px;
background: rgba(0, 0, 0, 0.9);
padding: 0.5rem 0px; }
#zain-world {
background: url(../images/zain-world-bg.png);
background-size: cover; }
#zain-world .main-contents {
perspective: 340px;
-webkit-perspective: 340px; }
#zain-world .country-list li.country-item {
list-style: none;
margin-bottom: 1.375rem;
font-size: 0.875rem; }
#zain-world .country-list li.country-item a {
color: #fff; }
#zain-world .country-list li.country-item span {
display: inline-block;
position: relative;
padding-right: 1.5625rem;
margin-right: 1.5625rem; }
#zain-world .country-list li.country-item span:after {
background-image: linear-gradient(0deg, #707070 0%, white 53%, #707070 100%);
content: "";
position: absolute;
right: 0px;
width: 1px;
height: 100%; }
#zain-world .country-stats {
background: rgba(2, 23, 43, 0.5);
border: solid 2px #9152a1;
border-radius: 15px;
padding: 1.5625rem; }
#zain-world .country-stats ul {
display: flex;
padding-left: 0px;
margin-left: 0px; }
#zain-world .country-stats li {
list-style: none;
font-size: 0.875rem;
color: #fff;
flex: 1;
text-transform: uppercase; }
#zain-world .country-stats li span {
width: 30px;
margin-right: 10px;
display: inline-block; }
#zain-world .country-stats li span img {
max-width: 100%; }
#zain-world .country-stats li:first-child {
position: relative;
max-width: 70%;
flex: 0 0 70%; }
#zain-world .country-stats li:first-child:after {
content: ":";
position: absolute;
right: 25px; }
#zain-world .flex-row {
display: flex;
align-items: center;
justify-content: space-between; }
#zain-world .flex-row ul {
padding-left: 0px; }
#zain-world .flex-row .list-countries {
max-width: 300px;
flex: 0 0 300px; }
#zain-world .flex-row .list-countries .country-item a {
transition: all 0.6s ease; }
#zain-world .flex-row .list-countries .country-item a:hover {
font-weight: 800; }
#zain-world .flex-row .list-countries .country-item a.active {
font-weight: 800; }
#zain-world .flex-row .country-stats-wrapper {
max-width: 330px;
flex: 0 0 330px; }
#zain-world .flex-row .countries-map {
position: relative;
overflow: hidden; }
#zain-world .flex-row .countries-map #canvas {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
left: 0px;
top: 0px; }
.stars {
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 2px;
box-shadow: -1243px 260px #e8e8e8, 157px 373px #dedede, -975px -384px #d6d6d6, -1100px -445px #fcfcfc, -785px -141px #cfcfcf, -585px 401px #d1d1d1, 1067px 124px #d6d6d6, -158px -442px #e0e0e0, -123px 346px #d9d9d9, 576px -80px #d4d4d4, 632px 339px whitesmoke, -1253px 411px #c2c2c2, 787px -217px #c7c7c7, 1487px 113px #dbdbdb, 1197px -252px white, 813px -182px #e0e0e0, -218px 71px #d1d1d1, -1497px 275px #fafafa, 629px -435px #fcfcfc, -789px 399px #dedede, 1483px -234px #ebebeb, 802px -149px #f2f2f2, 46px 453px #dbdbdb, -360px 228px whitesmoke, 1203px 31px #d6d6d6, 498px 183px #c7c7c7, 1239px 22px #e0e0e0, -834px 354px #e8e8e8, -1282px 297px #dbdbdb, 493px -151px #c4c4c4, 165px -407px #f0f0f0, 176px -148px #e3e3e3, -1209px -123px #c9c9c9, -40px -156px #d4d4d4, 790px -401px #e6e6e6, -519px 235px #c2c2c2, -644px 370px #e6e6e6, -726px -266px #cccccc, 1417px 397px #c9c9c9, 189px 22px whitesmoke, 607px 477px #d9d9d9, -464px -103px #f7f7f7, 545px 87px #fafafa, 1451px -386px #c9c9c9, 413px -97px #d9d9d9, -1106px 326px #f7f7f7, 418px 323px #ebebeb, 1316px -18px #cfcfcf, 411px 211px #cfcfcf, -530px -78px #ededed, -591px 378px #c7c7c7, -494px 29px white, 1290px 470px #dbdbdb, -591px 389px #dedede, 653px 396px #e0e0e0, 523px -237px #f7f7f7, 374px 175px #ebebeb, 1134px -456px #e3e3e3, -1388px -122px #c7c7c7, -478px -308px #c9c9c9, 1435px 2px #c2c2c2, 355px 258px #e3e3e3, 343px 301px #d6d6d6, 1183px 439px #dedede, 26px -59px #c4c4c4, 875px 376px #f2f2f2, -742px 245px #dedede, 862px -134px white, 1255px 409px #f0f0f0, -110px 155px #dedede, 1233px -2px #e8e8e8, 1441px 64px #e6e6e6, 737px -130px #c9c9c9, 601px -227px #d4d4d4, 898px -246px #f0f0f0, 27px 131px whitesmoke, -477px 97px whitesmoke, 1364px -146px #d6d6d6, 1492px -153px #fcfcfc, 510px 358px #d1d1d1, -13px -216px #d1d1d1, -777px -103px #cfcfcf, 923px -406px #fafafa, 193px 423px #dedede, 1111px -393px #d6d6d6, 1203px -321px #f2f2f2, -1318px 175px #e3e3e3, -924px 349px #d4d4d4, -400px -185px #d9d9d9, -1299px 331px #e8e8e8, -148px -461px #d1d1d1, -512px 452px #c4c4c4, -700px -411px #dbdbdb, 404px 318px #f2f2f2, 75px -284px #cccccc, 490px 121px #d6d6d6, -867px -32px #f0f0f0, -965px -122px #cfcfcf, 311px -303px #c4c4c4, -252px 270px #cfcfcf, 1329px -372px #c2c2c2, 1023px 477px #c2c2c2, 1466px -268px #d6d6d6, 4px -231px #c9c9c9, 1157px -98px #d1d1d1, -1118px 350px #c7c7c7, -1377px 116px white, 1356px 57px #d4d4d4, -569px 469px #d4d4d4, 279px 410px #c7c7c7, 757px -131px #e3e3e3, -1492px 80px #c9c9c9, -191px 342px #ededed, 694px 318px #f0f0f0, -108px -223px white, 39px -298px #cccccc, 161px 233px #ebebeb, -956px 365px #c2c2c2, -812px 340px #ebebeb, 186px 351px #c7c7c7, 288px -460px #ededed, 1279px 335px #fafafa, -570px 292px #c4c4c4, 311px 387px #c9c9c9, 252px 295px #d1d1d1, 517px 44px #c9c9c9, -464px -303px #dedede, 1359px 131px #e6e6e6, -1px 338px white, 965px -404px #d1d1d1, 214px 394px #ebebeb, 285px -425px #fafafa, 1349px 179px #c4c4c4, -807px -26px #cfcfcf, -554px -180px #c9c9c9, -1379px -477px #e6e6e6, 320px -26px #e6e6e6, 152px -411px #e8e8e8, -631px -197px #f0f0f0, -438px 413px #fafafa, -730px 359px #cccccc, 1171px 417px #c9c9c9, -651px -200px #f0f0f0, 1473px -324px #f0f0f0, -1227px -189px #ebebeb, 546px 304px #e6e6e6, -1361px -402px #c2c2c2, -244px 200px #cfcfcf, 259px -22px #e3e3e3, 968px -335px #ebebeb, 544px 233px #c9c9c9, 1212px -472px #fcfcfc, 1213px 224px #c9c9c9, 1445px -13px #c2c2c2, 1223px -248px #c9c9c9, 831px -37px #c9c9c9, -281px 56px #dedede, 428px -166px #d4d4d4, 704px 144px #f0f0f0, -592px -461px #f0f0f0, -669px -9px whitesmoke, 765px 155px #d1d1d1, -984px -434px #d4d4d4, 57px -375px #f7f7f7, -13px 212px #f7f7f7, -1057px -463px #d4d4d4, -1181px -386px #e0e0e0, -745px -59px #e6e6e6, -27px 251px #c7c7c7, 418px -447px #d4d4d4, -250px 221px #fcfcfc, 476px 252px whitesmoke, -375px -49px #c7c7c7, -27px 95px #e6e6e6, 213px -198px #dedede, 983px -424px #f7f7f7, -1363px 311px #d6d6d6, 282px 61px #c2c2c2, -44px 291px #d9d9d9, 376px 61px #f0f0f0, -1212px 455px #ededed, 1152px 200px #f7f7f7, -953px -187px #cfcfcf, -882px 97px #d9d9d9, 1009px 322px #fcfcfc, 1472px 371px #d6d6d6, -368px 406px #f2f2f2, 1411px -335px #e0e0e0, -771px 176px #cccccc, 1121px -432px #d1d1d1, 1073px -135px #e3e3e3, -629px -77px #c2c2c2, -457px 232px #d9d9d9, -510px 44px white, 822px 109px #c9c9c9, -1228px -392px #fcfcfc, 1367px -391px #dedede, -1399px -332px #c9c9c9, -1462px -193px #e3e3e3, 1312px -412px #c9c9c9, -593px -421px #fafafa, 953px 124px #d1d1d1, -1060px 99px #c9c9c9, -1196px -384px #d1d1d1, -975px 356px white, -455px 3px #c9c9c9, 1232px -437px #d4d4d4, 668px 112px #fafafa, 177px -204px #dbdbdb, 990px -244px #e6e6e6, 730px -460px #f0f0f0, -1019px -196px #f7f7f7, 1245px 72px #f0f0f0, -1450px -436px #c2c2c2, -93px 66px #f2f2f2, 816px -332px #fafafa, 897px 123px #fafafa, 921px 298px #c4c4c4, -932px 138px white, 403px 139px #e6e6e6, -132px 25px #cfcfcf, -152px 225px #dedede, -7px 393px whitesmoke, -369px -305px whitesmoke, 1349px -146px white, -918px -168px #cfcfcf, 1492px 39px #cfcfcf, -1446px -190px #c2c2c2, 568px -246px #c9c9c9, 931px 459px #c2c2c2, 655px -151px #c4c4c4, 15px -141px #dbdbdb, -207px -450px #dedede, -433px -12px #c4c4c4, 1459px -450px #dbdbdb, 135px 103px #c7c7c7, -151px -352px #f2f2f2, -112px 173px #c2c2c2, 164px -253px #f0f0f0, 814px -437px #c2c2c2, -1424px -250px #e8e8e8, 298px -21px #fafafa, 1238px -179px #f2f2f2, -1225px 116px #cccccc, 31px 239px #d1d1d1, -1272px 144px #f2f2f2, 28px 116px #dedede, -1000px 331px #ebebeb, 309px 7px #cfcfcf, 550px -357px #c4c4c4, 5px -223px #fcfcfc, 635px -421px #dedede, 365px 428px #d4d4d4, 239px 7px #c7c7c7, -1468px -147px #d4d4d4, 241px 310px #c2c2c2, -384px 4px #d4d4d4, -1496px -80px whitesmoke, 509px 89px #f2f2f2, -1376px 298px #cccccc, -1312px -434px #d9d9d9, 376px -431px #f2f2f2, 446px 125px #fafafa, -1342px -218px #fafafa, 454px -100px #c9c9c9, 993px -394px #e0e0e0, 1105px -475px #d6d6d6, -48px 398px #ebebeb, 1159px -162px #d4d4d4, -223px 251px #d4d4d4, 1335px -310px #c9c9c9, -935px 418px #f0f0f0, 886px 118px #dbdbdb, -1492px -165px #fafafa, -67px 315px #e6e6e6, -123px -9px #d6d6d6, 1046px 25px #cccccc, 809px 58px #fcfcfc, 783px 361px #d1d1d1, -1496px -108px #f2f2f2, -1132px 345px #e3e3e3, -158px -308px #e0e0e0, -1349px 21px #cccccc, -794px 254px #cccccc, 1267px -122px #c4c4c4, 1230px 410px #e8e8e8, 1428px -190px #c7c7c7, -345px 365px #e6e6e6, -360px 175px #d4d4d4, -1241px 26px #e8e8e8, 1043px 199px #d6d6d6, 718px -190px #f7f7f7, -1393px 12px #c4c4c4, 627px -266px #f7f7f7, -618px 422px #ebebeb, -1032px -392px #c7c7c7, -429px 468px #ededed, 180px 34px #f2f2f2, -1064px -184px #e6e6e6, 1350px 421px #dedede, -1222px 303px #cfcfcf, -1495px -345px #c4c4c4, -454px -194px #e6e6e6, 830px -470px #dbdbdb, -469px 73px #ededed, 1369px 231px #fcfcfc, -522px 336px #e3e3e3, 635px 187px #e3e3e3, -137px -432px #d9d9d9, 661px 296px #dbdbdb, -1361px 269px #c2c2c2, 666px -104px #c4c4c4, 1225px 453px #d1d1d1, 917px -331px #d1d1d1, 964px -372px #cfcfcf, -811px 328px #ededed, -1056px 360px #cfcfcf, -227px -279px #cfcfcf, 581px 28px #f2f2f2, 1487px 197px #f0f0f0, -1276px 59px #c4c4c4, -498px -166px #fafafa, 1031px 407px #dedede, 8px 319px #f0f0f0, -1083px 53px #dbdbdb, 956px -56px #e8e8e8, 1010px -436px #dedede, -407px 2px white, 510px 349px #e8e8e8, 365px 406px #d1d1d1, -685px 332px #f0f0f0, -1489px -7px #e3e3e3, 882px 40px #d6d6d6, 497px -8px #dedede, 559px -17px #cccccc, -574px -284px #e0e0e0, -23px -124px white, -507px -67px #f2f2f2, 524px 88px #e8e8e8, 493px -20px #cfcfcf, -371px -161px #d6d6d6, 740px -200px #f0f0f0, 617px 395px #c4c4c4, 361px -243px #cfcfcf, -391px 310px #fcfcfc, -1049px 429px #f7f7f7, -890px -116px white, 835px -202px white, -251px 159px #fcfcfc, 34px -274px #cccccc, -634px -302px #e6e6e6;
animation: fly 3s linear infinite;
transform-style: preserve-3d; }
.stars:before,
.stars:after {
content: "";
position: absolute;
width: inherit;
height: inherit;
box-shadow: inherit; }
.stars:before {
transform: translateZ(-300px);
animation: fade1 3s linear infinite; }
.stars:after {
transform: translateZ(-600px);
animation: fade2 3s linear infinite; }
@keyframes fly {
from {
transform: translateZ(0px); }
to {
transform: translateZ(300px); } }
@keyframes fade1 {
from {
opacity: .5; }
to {
opacity: 1; } }
@keyframes fade2 {
from {
opacity: 0; }
to {
opacity: .5; } }
.purple {
color: #9052a1; }
.spacing {
margin-right: 5px; }
.table {
background: #fff; }
.table thead {
border-left: 0;
border-right: 0;
background: #9053a1; }
.table thead tr {
border: 0; }
.table thead tr td {
font-weight: bold;
padding: 8px;
color: #fff; }
.table tr {
border-bottom: 1px solid #fff; }
.table td {
border-top: 0; }
.table td:first-child {
width: 30%;
font-weight: 600; }
.table p {
color: #000 !important;
line-height: 1.4;
margin: 0; }
.table p:not(:last-child) {
margin-bottom: 10px; }
.table ol {
color: #fff;
padding: 0 0 0 15px; }
.table ol li {
line-height: 1.3; }
.table .light-purple {
background: #c2a5ce; }
.table .purple {
background: #b895c5; }
.table.table-small {
width: 71%; }
.table-wrapper {
margin-bottom: 20px; }
.custom-table {
margin: 1.875rem 0;
display: table;
table-layout: fixed;
width: 100%; }
.custom-table.rule img {
max-width: 10px; }
.custom-table.rule .trow > div {
text-align: left; }
.custom-table p {
color: #000 !important; }
.custom-table .purple {
background: #b895c5; }
.custom-table .highlight {
background: #c2a5ce; }
.custom-table .table-head {
background-color: #9052a1;
padding: 10px;
color: #fff !important; }
.custom-table .trow {
display: table;
table-layout: fixed;
border-bottom: 1px solid #000;
width: 100%;
background: #fff; }
.custom-table .trow.bg-skyblue > div {
color: #fff; }
.custom-table .trow.bg-darkskyblue > div {
color: #fff; }
.custom-table .trow.bg-dark2skyblue > div {
color: #fff; }
.custom-table .trow.table-footer > div {
color: #fff; }
.custom-table .trow.table-tp-headfull > div {
color: #fff; }
.custom-table .trow.head {
border: 2px solid #9053a1; }
.custom-table .trow.head .trow {
border: 0; }
.custom-table .trow > div {
display: table-cell;
font-size: 14px;
color: #000;
padding: 10px;
text-align: center;
vertical-align: middle; }
.custom-table .trow > div:first-child {
width: 30%;
text-align: left; }
.custom-table .trow .th {
color: #fff;
font-size: 16px;
font-weight: 700;
padding: 10px;
border: 0;
vertical-align: middle; }
.custom-table.table-small {
width: 70%;
margin: auto; }
.custom-table.table-theme2 .trow.head {
background: #9053a1; }
.custom-table.table-theme2 .trow .highlight {
color: #000;
border-color: #000; }
#lebanon-share-chart.chart .highcharts-color-1,
#iraq-share-chart.chart .highcharts-color-1 {
fill: #8e9091; }
body[data-section-wrapper="financial-review"] {
background: url(../images/financial-review-bg.jpg) top center no-repeat;
background-size: cover;
background-attachment: fixed; }
body[data-section-wrapper="financial-review"] .custom-table .trow.head {
background: #77c4ed;
border: 0; }
body[data-section-wrapper="financial-review"] .custom-table .trow.table-footer {
background: #4eb9e9;
border-bottom: none !important; }
body[data-section-wrapper="financial-review"] .custom-table .trow.sky-blue > div {
color: #4eb9e9; }
body[data-section-wrapper="financial-review"] .custom-table .trow.table-tp-head {
border: 0;
background: transparent; }
body[data-section-wrapper="financial-review"] .custom-table .trow.table-tp-head > div:nth-child(3), body[data-section-wrapper="financial-review"] .custom-table .trow.table-tp-head > div:nth-child(4) {
background-color: #4eb9e9;
font-weight: 800;
color: #fff; }
body[data-section-wrapper="financial-review"] .custom-table .trow.table-tp-head > div:last-child {
border-left: 1px solid #fff; }
body[data-section-wrapper="financial-review"] .custom-table .trow.table-tp-headfull {
background-color: #4eb9e9;
border: 0; }
body[data-section-wrapper="financial-review"] .custom-table .border-btm {
border-bottom: 1px solid #4eb9e9; }
body[data-section-wrapper="financial-review"] .custom-table .border-top {
border-top: 1px solid #4eb9e9 !important; }
body[data-section-wrapper="financial-review"] .custom-table .b-right {
border-right: 1px solid #fff !important; }
body[data-section-wrapper="financial-review"] .custom-table p {
font-size: 14px; }
body[data-section-wrapper="financial-review"] .custom-table p:not(:last-child) {
margin-bottom: 7px; }
body[data-section-wrapper="financial-review"] h3.table-heading {
color: #808285; }
body[data-section-wrapper="financial-review"] h2 {
color: #77c4ed !important; }
body[data-section-wrapper="financial-review"] .main-header .title .layer {
background: #77c4ed; }
body[data-section-wrapper="financial-review"] h5 {
font-weight: 800; }
body[data-section-wrapper="financial-review"] .level {
padding-left: 65px; }
[data-width="0%"] {
width: 0% !important; }
[data-width="4%"] {
width: 4% !important; }
[data-width="5%"] {
width: 5% !important; }
[data-width="6%"] {
width: 6% !important; }
[data-width="8%"] {
width: 8% !important; }
[data-width="9%"] {
width: 9% !important; }
[data-width="12%"] {
width: 12% !important; }
[data-width="20%"] {
width: 20% !important; }
[data-width="22%"] {
width: 22% !important; }
[data-width="23%"] {
width: 23% !important; }
[data-width="24%"] {
width: 24% !important; }
[data-width="25%"] {
width: 25% !important; }
[data-width="26%"] {
width: 26% !important; }
[data-width="28%"] {
width: 28% !important; }
[data-width="30%"] {
width: 30% !important; }
[data-width="38%"] {
width: 38% !important; }
[data-width="50%"] {
width: 50% !important; }
[data-width="80%"] {
width: 80% !important; }
.bg-darkskyblue {
background-color: #3CAFE8 !important; }
.bg-dark2skyblue {
background-color: #1FA5E4 !important; }
body[data-page="innerpage"] {
min-height: 100vh; }
body[data-page="innerpage"] h2 {
font-size: 2.625rem;
font-weight: 800;
color: #9053a1;
margin: 0 0 1.25rem 0; }
body[data-page="innerpage"] h3 {
color: #fff;
font-size: 2.25rem;
font-weight: 800;
margin: 0 0 0.9375rem 0; }
body[data-page="innerpage"] h4 {
color: #fff;
font-size: 1.875rem;
font-weight: 700; }
body[data-page="innerpage"] h4.title {
color: #fff;
font-size: 1.875rem;
font-weight: 700;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: start;
flex-wrap: nowrap;
line-height: 22px;
margin-bottom: 1.5625rem;
white-space: nowrap; }
body[data-page="innerpage"] h4.title span {
width: 100%;
height: 5px;
background: #9052a1;
display: inline-block;
margin-left: 10px; }
body[data-page="innerpage"] h5 {
font-size: 1.6875rem;
color: #fff;
font-weight: 700;
margin: 0 0 1.5625rem 0; }
body[data-page="innerpage"] h5.section-title {
position: relative;
margin-top: 2.5rem;
font-size: 2.1875rem;
font-weight: 800; }
body[data-page="innerpage"] h5.section-title span {
width: 100%;
height: 15px;
background: #00a979;
display: block;
margin-bottom: 10px; }
body[data-page="innerpage"] h6 {
color: #fff;
font-weight: 800;
font-size: 1.125rem; }
body[data-page="innerpage"] .white {
color: #fff; }
body[data-page="innerpage"] .bg-green {
background: #00a774; }
body[data-page="innerpage"] .bg-skyblue {
background: #4eb9e9 !important; }
body[data-page="innerpage"] .sky-blue {
color: #4eb9e9; }
body[data-page="innerpage"] .bg-grey {
background: #a8a9ad !important;
background: linear-gradient(90deg, #a8a9ad 0%, #f6f6f7 50%, #939598 100%) !important; }
body[data-page="innerpage"] ul,
body[data-page="innerpage"] ol {
padding-left: 15px;
color: #fff; }
body[data-page="innerpage"] ul.bullets,
body[data-page="innerpage"] ol.bullets {
padding-left: 20px; }
body[data-page="innerpage"] .main-contents {
padding-bottom: 5rem; }
body[data-page="innerpage"] p {
color: #fff; }
body[data-page="innerpage"] p.sub-heading {
color: #00a774;
font-size: 1.125rem; }
body[data-page="innerpage"] p.regular {
font-weight: 300; }
body[data-page="innerpage"] .inner {
margin-bottom: 1.5625rem; }
body[data-page="innerpage"] .custom-table.big .trow > div:first-child {
width: 40%; }
body[data-section-wrapper="governance"] {
background: url(../images/governance-bg.jpg) center center no-repeat;
background-attachment: fixed; }
body[data-section-wrapper="governance"] .main-header .layer {
background: #0fb792; }
body[data-section-wrapper="governance"] .custom-table .trow.head {
background: #00a774;
border: 0; }
body[data-section-wrapper="governance"] .custom-table.left .trow > div {
text-align: left; }
body[data-section-wrapper="governance"] h4.title {
margin-top: 1.25rem; }
body[data-section-wrapper="governance"] h4.title span {
background: #00a774; }
.address img {
margin-bottom: 10px; }
.address h6 {
margin-bottom: 5px; }
.address p {
line-height: 1.3;
margin-bottom: 0; }
#BOD-message {
background: url(../images/BOD-message-bg.jpg) center center no-repeat;
background-size: cover;
background-attachment: fixed; }
.directors-msg h2 {
color: #fff !important; }
.directors-msg h2 {
font-weight: 900 !important; }
.directors-msg h5 {
font-weight: 700 !important; }
.chairman-statement p {
color: #fff; }
.chairman-statement .image-wrapper {
position: relative; }
.chairman-statement .image-wrapper .image {
float: left;
margin-right: 1.25rem; }
.chairman-statement .image-wrapper .image img {
max-width: 500px;
max-height: 400px; }
.chairman-statement .image-wrapper .inner p {
color: #9255b1;
font-size: 1.375rem;
font-weight: 700;
padding-right: 200px; }
.chairman-statement .image-wrapper .name {
font-weight: 700;
font-size: 1.25rem;
margin: 0;
line-height: 1;
margin-top: 10px; }
.chairman-statement .image-wrapper:after {
width: 100%;
display: block;
content: "";
clear: both; }
.chairman-statement .quotation {
position: relative;
padding-left: 70px;
margin-top: 3.125rem; }
.chairman-statement .quotation:before {
content: "";
position: absolute;
width: 52px;
height: 43px;
background: url(../images/quotation-icon.png) left top no-repeat;
left: 0;
top: 0; }
.chairman-statement ol {
color: #fff;
padding-left: 20px; }
@media (max-width: 991px) {
.chairman-statement .quotation {
padding-left: 0;
padding-top: 20px; }
.chairman-statement .quotation:before {
top: -30px;
zoom: .8; } }
.regulatory .regulatory-spec {
display: flex;
margin-bottom: 2.1875rem; }
.regulatory .regulatory-spec .icon {
width: 100px; }
.regulatory .regulatory-spec .detail {
flex: 1;
color: #fff; }
.regulatory .regulatory-spec .detail h4 {
font-weight: 800; }
.regulatory .regulatory-spec-wrapper {
padding: 50px 0; }
.regulatory .regulatory-spec-wrapper .row {
justify-content: center;
align-items: center; }
.regulatory .regulatory-spec-wrapper .image-slider {
position: relative; }
.regulatory .regulatory-spec-wrapper .image-slider .item {
position: relative;
height: 110px;
display: flex !important;
align-items: center;
justify-content: center; }
.regulatory .regulatory-spec-wrapper .image-slider .item img {
margin: auto;
opacity: .4; }
.regulatory .regulatory-spec-wrapper .specs-slider {
position: relative; }
.regulatory .regulatory-spec-wrapper .slick-current .item img {
opacity: 1; }
.regulatory .regulatory-spec-wrapper .detail {
padding-left: 20px;
padding-top: 110px; }
.regulatory .regulatory-spec-wrapper .slick-custom-arrow {
cursor: pointer;
color: #fff;
position: relative;
left: 30px; }
.regulatory .regulatory-spec-wrapper .slick-custom-arrow:hover {
color: #9152a1; }
.regulatory .critical-messages {
display: flex;
flex-wrap: wrap;
padding: 20px 0; }
.regulatory .critical-messages .message {
max-width: 19%;
flex: 0 0 19%;
padding: 10px;
text-align: center;
background: #a8a9ad;
background: -moz-linear-gradient(left, #a8a9ad 0%, #cfd0d2 50%, #939598 98%);
background: -webkit-linear-gradient(left, #a8a9ad 0%, #cfd0d2 50%, #939598 98%);
background: linear-gradient(to right, #a8a9ad 0%, #cfd0d2 50%, #939598 98%);
margin: 0 1% 10px 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center; }
.regulatory .critical-messages.big .message {
max-width: 24%;
width: 100%;
min-height: 120px; }
.regulatory .critical-messages.extra-big .message {
max-width: 32%;
width: 100%;
min-height: 120px; }
.customer-experience .box {
background: #d1d2d4;
color: #3e3e3f;
padding: 15px;
margin-bottom: 1.875rem; }
.customer-experience .box h5 {
font-weight: 700;
font-size: 1.25rem; }
.customer-experience .box p {
color: #3e3e3f; }
.customer-experience .box .image span {
font-size: 2.1875rem;
font-weight: 800; }
.introduction .chart-heading {
margin: 2.1875rem 0;
text-align: center; }
.board-members .box img {
border-bottom: 7px solid #00a774;
margin-bottom: 5px;
float: left;
width: 140px;
margin-right: 12px; }
.board-members .box span {
display: block;
color: #fff;
font-size: 1.1875rem;
font-weight: 800;
line-height: 1;
margin-bottom: 15px; }
.board-members .paragraph {
font-size: 14px;
line-height: 1.6;
margin: 0 0 25px 0; }
.directors-chart {
text-align: center;
margin-bottom: 50px; }
.directors-chart .box {
display: inline-block;
vertical-align: top;
position: relative;
padding-top: 40px; }
.directors-chart .box + .box {
margin-left: 14px; }
.directors-chart .chart-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
position: relative;
margin-top: 20px; }
.directors-chart .chart-row.first .line-vertical {
max-height: none;
height: 82px; }
.directors-chart .chart-row.second {
justify-content: space-between; }
.directors-chart .chart-row.third .line-vertical {
max-height: none;
height: 100px; }
.directors-chart .chart-row.fourth {
justify-content: flex-start; }
.directors-chart .chart-row.fourth .line-horizontal {
max-width: 92%; }
.directors-chart .chart-row.fourth .box {
padding-top: 40px; }
.directors-chart .chart-row.fourth .box.align-right-top {
padding: 0; }
.directors-chart .chart-row.fourth .label-primary.sm {
min-width: 100px;
min-height: 76px; }
.directors-chart .chart-row.fifth .label-primary.sm {
min-width: 100px;
min-height: 76px; }
.directors-chart .chart-row.fifth .box {
flex: 1; }
.directors-chart .chart-row.fifth .line-horizontal {
max-width: 88.5%; }
.directors-chart .align-right-top {
position: absolute;
right: 0;
top: 0; }
.directors-chart .align-right-top .line-vertical {
height: 150px;
max-height: none; }
.directors-chart .label {
font-size: 1rem;
font-weight: 800;
color: #3e3e3f;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 15px;
background: #b2ddce;
margin-bottom: 12px;
position: relative;
z-index: 1;
line-height: 1; }
.directors-chart .label.executive {
font-size: 1rem;
font-weight: 800; }
.directors-chart .label.main {
min-width: 260px;
min-height: 50px; }
.directors-chart .label.sm {
display: flex;
font-size: 14px;
min-width: 170px;
min-height: 40px;
padding: 5px; }
.directors-chart .label.medium {
min-height: 55px; }
.directors-chart .label-primary {
font-size: 10px;
background: #d1d2d4; }
.directors-chart .label-primary.sm {
font-size: 11px; }
.line-horizontal {
max-width: 86.2%;
width: 100%;
height: 4px;
background: #00a774;
position: absolute;
left: 0;
right: 0;
top: 0px;
margin: auto; }
.line-vertical {
width: 4px;
max-height: 70px;
height: 100%;
background: #00a774;
position: absolute;
left: 0;
right: 0;
top: 0px;
margin: auto; }
.line-vertical.bottom {
max-height: none;
height: 185px; }
.customer-experience .inner-wrapper {
width: 800px;
margin: auto;
position: relative;
margin-top: 20px;
margin-bottom: 20px; }
.customer-experience .country-name {
font-size: 2.8125rem;
color: #fff;
font-weight: 800;
margin: 1.25rem 0 1.875rem 0;
text-align: center;
letter-spacing: 2px; }
.customer-experience .col-wrapper {
display: flex;
position: relative;
padding-bottom: 1.875rem; }
.customer-experience .col-wrapper .col-right,
.customer-experience .col-wrapper .col-left {
width: 50%;
padding: 0 15px; }
.customer-experience .col-wrapper .col-left {
margin-right: 20px; }
.customer-experience .col-wrapper .col {
width: 70%;
max-width: 70%; }
.customer-experience .vertical-line {
position: absolute;
height: 100%;
width: 5px;
background: #b091c8;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: -1; }
.customer-experience .desc {
width: 100%;
height: 100%;
background: #fff;
color: #000;
padding: 20px;
font-size: 1.125rem;
font-weight: 600; }
.customer-experience .desc h6 {
color: #000;
margin-bottom: 15px; }
.customer-experience ul {
color: #000 !important;
margin-top: 10px; }
#key-performance {
background: url(../images/key-performance-bg.jpg) center top no-repeat;
background-size: cover;
background-attachment: fixed; }
.key-performance {
background-color: rgba(0, 0, 0, 0.3);
padding: 80px 0;
position: relative; }
.key-performance .custom-row {
display: flex;
align-items: flex-start;
margin: 30px 0 80px 0;
height: 230px;
border-bottom: 2px solid #a070af; }
.key-performance .custom-row .box {
width: 20%;
text-align: center;
margin-right: 6px;
height: 100%;
position: relative; }
.key-performance .custom-row .box:first-child {
margin: 0; }
.key-performance .custom-row .box .head {
background: transparent;
font-size: 0.9375rem;
color: #fff;
font-weight: 800;
padding: 5px 10px;
margin-bottom: 15px;
position: absolute;
bottom: 0;
width: 40%;
display: flex;
flex-wrap: wrap;
justify-content: center; }
.key-performance .custom-row .box .body {
background: #cccdcf;
background: -moz-linear-gradient(top, #cccdcf 0%, #fbfbfb 42%, #fbfbfb 56%, #c2c3c5 100%);
background: -webkit-linear-gradient(top, #cccdcf 0%, #fbfbfb 42%, #fbfbfb 56%, #c2c3c5 100%);
background: linear-gradient(to bottom, #cccdcf 0%, #fbfbfb 42%, #fbfbfb 56%, #c2c3c5 100%);
font-size: 14px;
font-weight: 800;
padding: 5px 10px;
height: 0;
display: flex;
align-items: flex-end;
justify-content: center;
transition: all .6s ease-out;
position: absolute;
left: 0;
bottom: 10px;
width: 40%; }
.key-performance .custom-row .box .body:before {
content: "";
position: absolute;
width: 10px;
height: 10px;
background: #cccdcf;
background: -moz-linear-gradient(top, #cccdcf 0%, #fbfbfb 42%, #fbfbfb 56%, #c2c3c5 100%);
background: -webkit-linear-gradient(top, #cccdcf 0%, #fbfbfb 42%, #fbfbfb 56%, #c2c3c5 100%);
background: linear-gradient(to bottom, #cccdcf 0%, #fbfbfb 42%, #fbfbfb 56%, #c2c3c5 100%);
bottom: -15px;
left: 50%;
transform: translateX(-50%); }
.key-performance .custom-row .box .country {
position: absolute;
bottom: -28px;
text-align: center;
font-size: 14px;
color: #fff;
left: 16px; }
.key-performance .desc h1 {
color: #fff;
font-weight: 800;
letter-spacing: 0px;
margin: 0;
padding-left: 70px;
position: relative; }
.key-performance .desc h1:before {
content: "";
position: absolute;
background: url(../images/icons/quotation-icon.png) left top no-repeat;
width: 60px;
height: 42px;
left: 0; }
.progress-review {
padding-bottom: 40px; }
.progress-review + .progress-review {
padding-bottom: 20px; }
.progress-review .sim-cetagory {
position: absolute;
font-size: 0.9375rem;
color: #fff;
bottom: -22px;
left: 0;
text-transform: capitalize; }
.progress-review .sim-cetagory.post {
right: 0;
left: auto; }
.progress-review .wrapper {
max-width: 400px; }
.progress-review .box {
display: flex;
flex-wrap: wrap;
margin-top: 0.9375rem;
position: relative; }
.progress-review .box i {
font-style: normal;
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%); }
.progress-review .prepaid {
background: #fff;
width: 0;
height: 40px;
color: #fff;
font-size: 0.875rem;
margin-left: 0;
padding-left: 0;
position: relative;
display: flex;
align-items: center;
justify-content: center;
transition: all 1s ease; }
.progress-review .prepaid i {
color: #b895c5;
right: auto;
left: 5px; }
.progress-review .year {
font-size: 0.875rem;
color: #fff;
position: absolute;
right: 0;
top: -25px; }
.progress-review .postpaid {
background: #8e9091;
width: 0px;
height: 40px;
color: #fff;
font-size: 0.875rem;
padding-left: 5px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin-right: -40px;
margin-top: 0;
transition: all 2s ease; }
.progress-review .postpaid .sim-cetagory {
left: auto;
right: 0; }
.progress-review .reviews {
font-size: 2.5rem;
font-weight: 800;
color: #ffffff; }
.progress-review .add-gap i {
margin-left: 1.875rem; }
.progress-review .add-gap .reviews {
right: -90px; }
.procedure-steps-title {
background: #9052a1;
text-align: center;
display: table;
margin: auto;
padding: 10px;
font-weight: 600;
line-height: 1; }
.procedure-steps {
display: flex;
max-width: 600px;
margin: auto;
margin: 5rem auto; }
.procedure-steps .label-wrapper {
width: 60px; }
.procedure-steps .label-wrapper label {
position: relative;
background: #a070af;
color: #fff;
padding: 15px 25px;
font-weight: 600;
font-size: 0.9375rem;
text-align: center;
margin: 0;
z-index: 9;
transform: rotate(-90deg);
transform-origin: center;
min-height: auto;
min-width: 350px;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 2px;
left: -98px;
top: 145px; }
.procedure-steps .label-wrapper label.review {
left: auto;
right: 154px;
top: 148px; }
.procedure-steps ul {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative; }
.procedure-steps ul:after {
position: absolute;
content: "";
width: 207px;
height: 30px;
background: url(../images/icons/arrow-long.png) left top no-repeat;
bottom: -30px;
right: -26px; }
.procedure-steps ul:before {
position: absolute;
content: "";
width: 207px;
height: 30px;
background: url(../images/icons/arrow-long.png) left top no-repeat;
top: -29px;
right: -26px;
transform: rotateX(180deg); }
.procedure-steps ul li {
color: #fff;
border: 1px solid #fff;
height: 60px;
width: 230px;
display: flex;
align-items: center;
justify-content: center;
position: relative; }
.procedure-steps ul li:not(:last-child) {
margin-bottom: 12px; }
.procedure-steps ul li:before {
position: absolute;
content: "";
background: url(../images/icons/arrow-double.png) left top no-repeat;
width: 38px;
height: 14px;
left: -70px;
top: 50%;
transform: translateY(-50%); }
.procedure-steps ul li:after {
position: absolute;
content: "";
background: url(../images/icons/arrow-double.png) left top no-repeat;
width: 38px;
height: 14px;
right: -70px;
top: 50%;
transform: translateY(-50%); }
.progress-label {
color: #fff;
font-size: 1.5rem;
font-weight: 800;
padding: 20px 0;
text-align: center;
display: block; }
.main-progress {
max-width: 100%;
padding: 0px 1.25rem 1.25rem 2.8125rem;
background-color: #b895c5;
margin-bottom: 15px; }
.business-operations .chart {
max-width: 260px;
height: 260px;
margin: auto; }
.business-operations .chart rect {
fill: transparent; }
.business-operations .chart .highcharts-series path {
stroke: none; }
.business-operations .chart .highcharts-credits {
display: none; }
.business-operations .chart .highcharts-data-label-connector {
fill: none !important; }
.business-operations .chart .highcharts-color-0 {
fill: #9052a1; }
.business-operations .chart .highcharts-color-1 {
fill: #b895c5; }
.business-operations .chart .highcharts-color-2 {
fill: #8e9091; }
.business-operations .chart .highcharts-color-3 {
fill: #4d2971; }
.business-operations .chart .highcharts-color-4 {
fill: #00ae7f; }
.business-operations .chart .highcharts-label text,
.business-operations .chart .highcharts-label tspan {
fill: #ffffff;
stroke: none;
font-weight: 300 !important;
font-size: 14px; }
.business-operations .chart .highcharts-tooltip text,
.business-operations .chart .highcharts-tooltip tspan {
fill: #000; }
.galance-index {
background: url(../images/company-overview-bg.jpg);
background-size: cover;
color: #fff; }
.galance-index .grey-box {
padding-top: 1.25rem;
background: rgba(255, 255, 255, 0.8);
margin-bottom: 1.5625rem; }
.galance-index .box {
display: flex;
align-items: flex-start;
flex-direction: column;
margin-bottom: 2.5rem; }
.galance-index .box p {
color: #333;
display: inline-block;
line-height: 1;
padding: 4px;
padding-bottom: 2px;
margin-bottom: 1px;
font-weight: 700; }
.galance-index .box p.value {
font-size: 3.75rem;
color: #333;
padding: 0;
background: transparent;
font-weight: 900;
margin-bottom: 5px; }
.galance-index .main-header .title .layer {
background: #8b8f91;
opacity: 0.8; }
.galance-index .inner {
margin: 1.875rem 0 2.5rem 0;
padding-bottom: 4.375rem; }
.galance-index .inner img {
float: right;
max-width: 200px;
margin-left: 20px;
margin-bottom: 20px; }
.galance-index .link-to-subpage {
font-weight: 800;
color: #fff; }
.galance-index .link-to-subpage:hover {
text-decoration: underline; }
@-webkit-keyframes fadeIn {
0% {
transform: translateX(0); }
100% {
transform: translateX(-100%); } }
@keyframes fadeIn {
0% {
transform: translateX(0); }
100% {
transform: translateX(-100%); } }
#technology-page .chart-area {
height: 400px; }
#technology-page .chart-area .highcharts-series-group rect {
fill: #c5c5c5; }
.drone-video {
text-align: right;
padding: 1.25rem 8.75rem 0 0; }
.drone-video a {
display: inline-block;
color: red;
font-weight: 600;
font-size: 0.9375rem;
background: #fff;
padding: 1.25rem; }
.drone-video a:hover {
color: #b05ec1; }
.link {
position: absolute;
top: 40px;
right: 100px;
background: transparent;
border: 0; }
.link:hover {
border: 0;
background: transparent; }
.link a {
color: #fff;
font-size: 1.25rem;
border-bottom: 1px solid transparent;
transition: .4s ease all; }
.link a:hover, .link a:active {
border: 0;
background: transparent;
border-bottom: 1px solid #fff; }
@media screen and (max-width: 1199px) {
.line-horizontal {
max-width: 81.3%; }
.directors-chart .chart-row.fourth .line-horizontal {
max-width: 89%; }
body[data-section-wrapper="financial-review"] .main-header .title {
font-size: 2rem; } }
@media screen and (max-width: 991px) {
.regulatory .regulatory-spec-wrapper .detail {
padding-top: 0; }
.introduction .scroll-wrapper {
overflow: hidden !important;
overflow-x: auto !important; }
.introduction .scroll-wrapper .directors-chart {
width: 1050px; }
.introduction .scroll-wrapper .directors-chart .chart-row.fourth .line-horizontal {
max-width: 90%; }
.introduction .scroll-wrapper .directors-chart .chart-row.third .line-vertical {
height: 94px; }
.line-horizontal {
max-width: 83.5%; }
.custom-table {
margin: 0; }
.custom-table .trow .th {
font-size: 14px; }
body[data-page="innerpage"] h2 {
font-size: 2.125rem; }
body[data-page="innerpage"] h3 {
font-size: 1.625rem; }
body[data-page="innerpage"] .main-contents {
padding-bottom: 3.5rem; }
body[data-page="innerpage"] h4 {
font-size: 1.375rem; }
body[data-page="innerpage"] h5 {
margin-bottom: 0.9375rem; }
body[data-page="innerpage"] h5.section-title {
font-size: 1.375rem;
margin-top: 10px; }
body[data-page="innerpage"] h5.section-title span {
height: 10px; }
body[data-section-wrapper="financial-review"] .main-header .title {
font-size: 1.5rem; } }
@media screen and (max-width: 767px) {
.board-members .box img {
width: 131px; }
.board-members .box span {
margin-bottom: 10px; }
body[data-section-wrapper="financial-review"] .main-header .title {
font-size: 1.0625rem; }
body[data-section-wrapper="financial-review"] .main-header .title span.sub-heading {
font-size: 1rem; }
.main-progress {
padding: 1.25rem; } }
@media screen and (max-width: 575px) {
.board-members .box img {
width: 124px; }
body[data-page="innerpage"] h2 {
font-size: 1.75rem; }
body[data-page="innerpage"] h6 {
font-size: 1rem; }
body[data-section-wrapper="financial-review"] .main-header .title {
font-size: 1rem; }
body[data-section-wrapper="financial-review"] .main-header .title span.sub-heading {
font-size: 0.875rem; } }
@media screen and (max-width: 5375px) {
body[data-section-wrapper="financial-review"] .main-header .title {
font-size: 0.9375rem; }
body[data-section-wrapper="financial-review"] .main-header .title span.sub-heading {
font-size: 0.875rem; } }
.clear:after {
clear: both;
display: block;
content: ""; }
body {
background: url(../images/background.jpg) top center no-repeat;
background-size: cover;
height: 100vh;
overflow: hidden; }
img {
max-width: 100%; }
@media (min-width: 1200px) {
.drone-video {
position: ABSOLUTE;
bottom: 0;
right: 0; } }
@media (min-width: 1200px) {
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl {
max-width: 1260px; }
body[data-page="innerpage"] .main-contents.business-operations {
padding-bottom: 6rem; } }
.page-background {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1; }
.clouds-image {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-image: url(../images/cloud-image.png);
background-position: 0 0;
background-repeat: repeat-x; }
.h-list {
margin: 0;
padding: 0;
display: flex;
align-items: center; }
.h-list > * {
margin-right: 15px;
list-style-type: none;
line-height: 1.3; }
.h-list > *:last-child {
margin-right: 0 !important; }
.v-list {
margin: 0;
padding: 0; }
.v-list > * {
margin: 0 0 15px;
line-height: 1.3;
list-style-type: none; }
.v-list > *:last-child {
margin-bottom: 0 !important; }
.lang {
font-size: 1.125rem;
color: #fff; }
.main-header {
color: white;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
transition: all 0.4s ease; }
.main-header .container {
display: flex;
justify-content: space-between;
align-items: center;
height: 136px;
transition: all 0.4s ease;
position: relative; }
.main-header .title {
position: relative;
font-size: 3rem;
transition: all 0.4s ease; }
.main-header .title h1 {
font-size: inherit;
font-weight: 800;
line-height: 1.1;
margin: 0;
overflow: hidden;
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 43px; }
.main-header .title h1 span {
display: block; }
.main-header .layer {
content: "";
width: 110px;
height: 100%;
background: #b091c8;
transform: skew(-45deg);
position: absolute;
top: 0;
left: 5%;
z-index: 0;
opacity: 0.3;
transition: all 0.4s ease; }
.main-header .menu-icon {
position: relative;
top: auto;
bottom: auto;
margin-left: 1.875rem;
transition: all 0.4s ease; }
.main-header.compact {
background: #4d2955; }
.main-header.compact .title {
font-size: 1.25rem; }
.main-header.compact .container {
height: 70px; }
.main-header.compact .menu-icon {
width: 40px;
height: 40px; }
.main-header.compact .menu-icon img {
max-width: 50%; }
.main-header.compact .pulse-wrapper {
width: calc(100% + 35px);
height: calc(100% + 35px); }
@media (max-width: 1600px) {
.main-header .title {
font-size: 2.375rem; }
.main-header .title:after {
height: 170px; } }
@media (max-width: 1500px) {
.main-header .menu-icon {
width: 65px;
height: 65px; }
.main-header .menu-icon span img {
max-width: 50%; }
.main-header .title {
font-size: 2.6875rem; } }
@media (max-width: 767px) {
.main-header .container {
height: 70px; }
.main-header .layer {
width: 77px;
left: 10%; }
.main-header .ar layer {
right: 10%;
left: auto; } }
#loader {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
transition: all 0.4s ease-out;
pointer-events: none;
background: #000; }
.swiper {
width: 100%;
pointer-events: none;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
background: url(../images/background.jpg) top center no-repeat;
background-size: cover;
transform: translateX(-100%); }
.scene-1 {
position: relative;
opacity: 0; }
.scene-1 .lang {
position: absolute;
top: 25px; }
.scene-1 .landing-graphic-1 {
position: absolute;
right: -20px;
top: 20px;
z-index: 1;
width: 132px;
animation: rotation 8s infinite linear; }
.scene-1 .landing-graphic-2 {
position: absolute;
right: -130px;
top: 120px;
z-index: 1;
width: 200px; }
.scene-1 .landing-graphic-3 {
position: absolute;
right: -140px;
top: 120px;
z-index: 1;
width: 90px;
animation: rotation 6s infinite linear; }
.scene-1 .video {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
object-fit: cover; }
.scene-1 .container {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
position: relative; }
.scene-1 .video-caption {
width: 550px; }
.scene-1 .video-caption .zain-logo {
max-width: 250px;
opacity: 0;
transform: translateY(70px); }
.scene-1 .video-caption .tagline {
margin: 0;
text-transform: uppercase;
padding: 120px 0;
line-height: 1;
font-weight: 900;
text-align: justify;
color: white; }
.scene-1 .video-caption .tagline span {
display: block; }
.scene-1 .video-caption .tagline .top {
font-size: 2.875rem;
font-weight: 300;
display: block;
height: 40px;
overflow: hidden; }
.scene-1 .video-caption .tagline .middle {
font-size: 3.5625rem;
letter-spacing: 2px;
overflow: hidden; }
.scene-1 .video-caption .tagline .bottom {
font-size: 1.6875rem;
font-weight: 400;
display: block;
letter-spacing: 11px; }
.scene-1 .video-caption .continue {
display: inline-flex;
position: relative;
opacity: 0;
top: 70px;
font-size: 1.125rem;
text-transform: uppercase;
color: #fff;
padding-left: 45px;
letter-spacing: 12px; }
@media (max-width: 767px) {
.scene-1 .video-caption .tagline .top {
font-size: 1.875rem;
height: inherit; }
.scene-1 .video-caption .tagline .middle {
font-size: 2.25rem; }
.scene-1 .video-caption .tagline .bottom {
font-size: 1.125rem;
letter-spacing: 7px; }
.scene-1 .video-caption .tagline {
padding: 90px 0; }
.scene-1 .video-caption .continue {
letter-spacing: 4px;
padding-left: 55px; }
.scene-1 .ar .video-caption .continue {
padding-right: 55px;
padding-left: 0; }
.scene-1 .pulse-dot {
left: 15px; }
.scene-1 .ar .pulse-dot {
right: 15px;
left: auto; } }
@media (max-width: 500px) {
.scene-1 .video-caption .tagline .top {
font-size: 1.5625rem; }
.scene-1 .video-caption .tagline .middle {
font-size: 1.8125rem; }
.scene-1 .video-caption .tagline .bottom {
font-size: 0.8125rem;
letter-spacing: 7px; }
.scene-1 .video-caption .continue {
letter-spacing: 0; } }
.main-nav-items {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100vh;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
height: 100%;
opacity: 0;
z-index: -999;
overflow: hidden;
overflow-y: auto; }
.main-nav-items .year-at-glance {
position: absolute;
top: 50px; }
.main-nav-items .year-at-glance .image-wrapper {
-webkit-transform: skew(-25deg, 0deg);
-ms-transform: skew(-25deg, 0deg);
transform: skew(-25deg, 0deg);
width: 280px;
height: 60px;
overflow: hidden;
position: relative;
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.4);
transition: all 0.4s ease; }
.main-nav-items .year-at-glance .image-wrapper img {
position: absolute;
left: -5%;
zoom: 0.6;
transform: skew(25deg, 0deg);
max-width: 120%; }
@media screen and (min-width: 1025px) {
.main-nav-items .year-at-glance:hover .image-wrapper {
transform: skew(-25deg, 0deg) scale(1.1); } }
.main-nav-items .year-at-glance h3 {
position: absolute;
right: 0px;
top: 0px;
transform: none;
font-weight: 900;
font-size: 1.25rem;
text-transform: uppercase;
color: #fff;
margin: 0; }
.main-nav-items .year-at-glance .number {
position: absolute;
left: 0px;
bottom: 0px;
font-weight: 900;
font-size: 5rem;
text-transform: uppercase;
color: #fff;
left: -120px;
line-height: 0.7; }
.main-nav-items .year-at-glance .line {
width: 19px;
height: 55px;
position: absolute;
transform: skew(45deg, 0deg);
top: -23px;
left: 22px;
z-index: 0; }
.main-nav-items .year-at-glance .line.small {
width: 5px;
top: -30px;
left: 40px; }
.main-nav-items .year-at-glance .line.grey {
background: #d0d2d3; }
.main-nav-items .nav-item {
position: relative;
transform: translateY(10%); }
.main-nav-items .nav-item .abs-link {
border: solid 1px red; }
.main-nav-items .nav-item:not(:nth-child(4)) {
margin-right: 7.5rem; }
.main-nav-items .nav-item .image-wrapper {
-webkit-transform: skew(-25deg, 0deg);
-ms-transform: skew(-25deg, 0deg);
transform: skew(-25deg, 0deg);
width: 270px;
height: 350px;
overflow: hidden;
position: relative;
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.4);
transition: all 0.4s ease; }
.main-nav-items .nav-item .image-wrapper img {
position: absolute;
left: -62%;
zoom: 0.6;
transform: skew(25deg, 0deg);
max-width: inherit; }
@media screen and (min-width: 1025px) {
.main-nav-items .nav-item:hover .image-wrapper {
transform: skew(-25deg, 0deg) scale(1.1); } }
.main-nav-items .nav-item h3 {
position: absolute;
left: -50px;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
font-weight: 900;
font-size: 2.375rem;
text-transform: uppercase;
color: #fff;
margin: 0; }
.main-nav-items .nav-item .number {
position: absolute;
left: 0px;
bottom: 0px;
font-weight: 900;
font-size: 5rem;
text-transform: uppercase;
color: #fff;
left: -120px;
line-height: 0.7; }
.main-nav-items .nav-item .line {
width: 65px;
height: 115px;
position: absolute;
transform: skew(45deg, 0deg);
top: -23px;
left: 22px;
z-index: 0; }
.main-nav-items .nav-item .line.small {
width: 7px;
top: -40px;
left: 77px; }
.main-nav-items .nav-item .line.purple {
background: #9152a1; }
.main-nav-items .nav-item .line.green {
background: #00a774; }
.main-nav-items .nav-item .line.blue {
background: #52b9e9; }
.main-nav-items .nav-item .nav-graphic {
position: absolute;
left: 40%;
top: -70px;
z-index: -1;
width: 132px;
animation: rotation 8s infinite linear; }
@media (max-width: 1500px) {
.main-nav-items .nav-item .image-wrapper {
width: 210px;
height: 280px; }
.main-nav-items .nav-item .number {
font-size: 4.0625rem; }
.main-nav-items .nav-item h3 {
font-size: 2.1875rem; } }
@media (max-width: 991px) {
.main-nav-items .nav-item .image-wrapper {
width: 130px; }
.main-nav-items .nav-item:not(:nth-child(4)) {
margin-right: 70px; }
.main-nav-items .ar .nav-item:not(:nth-child(4)) {
margin-left: 70px;
margin-right: 0; }
.main-nav-items .nav-item h3 {
left: -30px;
font-size: 1.5rem; }
.main-nav-items .ar .nav-item h3 {
right: -30px;
left: auto; }
.main-nav-items .nav-item .number {
font-size: 3.75rem; } }
@media (max-width: 767px) {
.main-nav-items .nav-item:not(:nth-child(4)) {
margin-right: 0px; }
.main-nav-items .ar .nav-item:not(:nth-child(4)) {
margin-left: 0px; }
.main-nav-items .nav-item .image-wrapper {
transform: none; }
.main-nav-items .nav-item .image-wrapper img {
transform: none; } }
.download-report {
flex: 0 0 100%;
width: 100%;
text-align: center;
transform: translateY(100%);
position: fixed;
left: 0;
bottom: 0;
letter-spacing: 3px;
color: #fff;
font-size: 1.5625rem;
font-weight: 600;
text-transform: uppercase;
padding: 20px 0;
z-index: 100; }
.download-report a {
color: #fff;
position: relative;
display: block;
padding: 0px 3.75rem; }
.download-report a:hover {
color: #000; }
.download-report a .download-icon {
display: inline-block;
padding-left: 1rem; }
.download-report a .pdf-icon {
display: inline-block;
padding-right: 1rem; }
.download-report span {
display: block;
letter-spacing: 2px; }
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg); }
to {
-webkit-transform: rotate(360deg); } }
.abs-link {
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
z-index: 9; }
.nav-sub-items .sub-item {
position: absolute;
height: 100vh;
width: 120%;
left: -20%;
top: 0px;
transform: translateX(-100%); }
.nav-sub-items .sub-item .image-wrapper {
background: #000;
width: 50%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
transform: skew(-7deg); }
.nav-sub-items .sub-item .sub-menu {
width: 50%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
height: 100%;
left: 50%;
position: absolute; }
.nav-sub-items .sub-item ul {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
flex-direction: column;
transform: skew(-7deg); }
.nav-sub-items .sub-item ul li {
flex: 1;
transform: translateX(-200%);
opacity: 0; }
.nav-sub-items .sub-item ul li a {
color: #fff;
transform: skew(7deg); }
@keyframes pulse {
0% {
opacity: 0.2;
transform: scale(1.5); }
70% {
opacity: 0.5;
transform: scale(0.9); }
100% {
opacity: 0.2;
transform: scale(1.5); } }
@keyframes pulse-animation {
0% {
opacity: 1;
-webkit-transform: scale(0.5); }
25% {
opacity: 0.80; }
100% {
opacity: 0;
-webkit-transform: scale(1); } }
@keyframes pulse-animation2 {
0% {
opacity: 1;
-webkit-transform: scale(0.25); }
25% {
opacity: 0.80; }
100% {
opacity: 0;
-webkit-transform: scale(1); } }
.pulse-wrapper {
position: absolute;
width: 120px;
height: 120px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1; }
.pulse-wrapper .pulse {
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
top: 0;
left: 0;
opacity: 0.1;
background: #9128a7; }
.pulse-wrapper .pulse.pulse-1 {
animation: pulse-animation 3s infinite; }
.pulse-wrapper .pulse.pulse-2 {
animation: pulse-animation 3s infinite;
animation-delay: -0.7s; }
.pulse-wrapper .pulse.pulse-3 {
animation: pulse-animation 3s infinite;
animation-delay: -1.4s; }
.pulse-dot {
width: 11px;
height: 11px;
border-radius: 50px;
display: block;
background: white;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%); }
.pulse-dot .pulse.pulse-1 {
animation: pulse-animation2 3s infinite; }
.pulse-dot .pulse.pulse-2 {
animation: pulse-animation2 3s infinite;
animation-delay: -0.7s; }
.pulse-dot .pulse.pulse-3 {
animation: pulse-animation2 3s infinite;
animation-delay: -1.4s; }
.pulse-dot .pulse-wrapper {
width: 35px;
height: 35px; }
.pulse-dot .pulse-wrapper .pulse {
background: white; }
.menu-icon {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: 8%;
bottom: 120px;
width: 75px;
height: 75px;
border-radius: 50%;
cursor: pointer;
z-index: 1000; }
.menu-icon a {
display: block;
width: 100%;
height: 100%; }
.menu-icon span {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
border-radius: 41px;
background-color: #b05ec1; }
.arabic-text {
color: white;
position: absolute;
font-size: 1.375rem;
top: 105px;
right: 15%; }
.report-section {
display: flex;
width: 110%;
position: relative;
left: -10%; }
.report-section .section-preview {
width: 50%;
position: relative;
height: 100vh;
display: flex;
justify-content: flex-end; }
.report-section .section-preview .image-view .view-bg {
transform: skew(-8deg);
box-shadow: 10px 0 15px rgba(0, 0, 0, 0.35);
background: url(../images/strategic-review-banner.png) top center no-repeat;
background-size: cover; }
.report-section .image-holder {
width: 55%;
position: relative;
box-shadow: 10px 0 15px rgba(0, 0, 0, 0.35);
height: 100vh;
display: flex;
justify-content: flex-end;
transform: skew(-15deg);
margin: 0;
z-index: 99;
overflow: hidden; }
.report-section .image-holder:after {
content: "";
transform: skew(15deg);
position: absolute;
top: 0;
left: 0;
width: calc(100% + 160px);
height: 100%;
background: url(../images/strategic-review-banner.png) top center no-repeat;
background-size: cover; }
.report-section .image-holder .inner {
display: flex;
width: 430px;
flex-direction: column;
color: white;
height: 100%;
justify-content: space-between;
padding: 105px 0 70px;
transform: skew(15deg) translateX(25px);
z-index: 100; }
.report-section .image-holder .inner h1 {
font-size: 2.5625rem;
letter-spacing: 6px;
position: relative;
font-weight: 900;
line-height: 1;
margin: 0; }
.report-section .image-holder .inner h1 .image {
position: absolute;
display: block;
left: -186px;
top: -132px;
z-index: -1;
width: 387px;
height: 300px; }
.report-section .image-holder .inner p {
line-height: 1.1;
font-size: 1.5625rem;
font-weight: 300;
padding-left: 230px;
text-transform: uppercase;
margin: 0;
text-align: left;
opacity: 0; }
.report-section .image-holder .inner h3 {
font-size: 4.375rem;
font-weight: 900;
margin: 0;
color: white; }
.report-section .links-holder {
flex-grow: 1;
display: flex;
align-items: center; }
.report-section .nav-list {
display: block;
transform: skew(-15deg); }
.report-section .nav-list .nav-item {
display: block;
opacity: 0;
transform: skew(15deg) translateY(-10px);
padding: 15px 0;
color: white;
text-transform: uppercase;
font-size: 1.5rem;
font-weight: 800;
letter-spacing: 4px;
text-align: left;
opacity: 0px;
pointer-events: none; }
.report-section .nav-list .nav-item.active {
pointer-events: all; }
.report-section .nav-list .nav-item.parent-nav-item {
pointer-events: none;
color: #52b9e8; }
.report-section .nav-list .nav-item.sub-nav-item {
font-weight: 400; }
.report-section .nav-list .nav-item:hover {
color: #dfa9ec; }
.report-section .inner-sections {
position: absolute;
width: 100%;
height: 100vh;
top: 0px;
z-index: 100; }
.report-section .inner-sections .inner-item {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
transition: all 0.7s linear;
transform: translateX(-100%);
box-shadow: 10px 0 15px rgba(0, 0, 0, 0.35);
overflow: hidden; }
.report-section .inner-sections .inner-item img {
position: absolute;
left: 15%;
transform: skew(15deg);
width: auto;
max-width: none; }
.report-section .inner-sections .inner-item.active {
transform: translateX(-5%); }
.report-section .inner-sections img {
width: 100%;
height: 100%; }
.report-section.governance .image-holder:after {
background: url(../images/governance-banner.png) top center no-repeat;
background-size: cover; }
.report-section.governance .menu-icon span {
background: #01a773; }
.report-section.governance .pulse-wrapper .pulse {
background: #096549; }
.report-section.governance .nav-list .nav-item:hover {
color: #01a773; }
.report-section.financial-review .image-holder:after {
background: url(../images/financial-review-banner.png) top center no-repeat;
background-size: cover; }
.report-section.financial-review .menu-icon span {
background: #52b9e8; }
.report-section.financial-review .pulse-wrapper .pulse {
background: #0d6693; }
.report-section.financial-review .nav-list .nav-item:hover {
color: #52b9e8; }
@media (max-width: 1700px) {
.report-section .nav-list .nav-item {
font-size: 16px;
padding: 9px 0; } }
@media (max-width: 1500px) {
.report-section .nav-list {
transform: skew(-15deg) translateX(-50px); }
.report-section .nav-list .nav-item {
font-size: 16px; }
.report-section .arabic-text {
right: 10%; }
.report-section .ar .arabic-text {
left: 10%;
right: auto; }
.report-section .menu-icon {
right: 10%; }
.report-section .ar .menu-icon {
left: 10%;
right: auto; } }
@media (max-width: 1199px) {
.report-section .image-holder .inner {
width: 330px; }
.report-section .image-holder .inner p {
padding-left: 0; }
.report-section .image-holder .inner p {
padding-right: 0; } }
@media (max-width: 991px) {
.report-section .nav-list .nav-item {
font-size: 15px; }
.report-section .image-holder {
width: 60%; }
.report-section .image-holder .inner {
min-height: 500px; }
.report-section .arabic-text {
top: 15px;
right: 15px; }
.report-section .ar .arabic-text {
left: 15px;
right: auto; }
.report-section .menu-icon {
right: 15px;
bottom: auto;
zoom: .8;
top: 25px; }
.report-section .ar .menu-icon {
left: 15px;
right: auto; } }
@media (max-width: 767px) {
.report-section .image-holder {
width: 60%;
height: 100%; }
.report-section .image-holder .inner {
width: 220px; }
.report-section .image-holder .inner h1 {
font-size: 25px; }
.report-section .image-holder .inner p {
font-size: 16px; }
.report-section .image-holder .inner h3 {
font-size: 40px; }
.report-section .nav-list {
transform: skew(-15deg) translateX(-70px); }
.report-section .nav-list .nav-item {
font-size: 14px;
padding: 10px 0;
letter-spacing: inherit;
text-transform: capitalize; } }
@media (max-width: 500px) {
.report-section {
width: 100%;
left: 0;
height: 100vh; }
.report-section .inner-sections {
display: none; }
.report-section .image-holder {
transform: none !important;
justify-content: flex-start;
width: 100%;
padding-left: 15px; }
.report-section .image-holder {
padding-right: 15px;
padding-left: 0; }
.report-section .image-holder:after {
width: 100%;
transform: none; }
.report-section .image-holder .inner {
padding: 30px 0 70px;
padding-left: 0.9375rem; }
.report-section .ar .image-holder .inner {
padding-right: 0.9375rem;
padding-left: 0px; }
.report-section .image-holder .inner h1 .image {
max-width: 300px; }
.report-section .image-holder .inner {
transform: none; }
.report-section .nav-list {
transform: none; }
.report-section .nav-list .nav-item {
transform: none;
text-align: right; }
.report-section .arabic-text {
position: fixed; }
.report-section .menu-icon {
position: fixed; }
.report-section .links-holder {
position: absolute;
top: 0;
right: 15px;
height: 100%;
z-index: 100; }
.report-section .ar .links-holder {
left: 15px;
right: auto; } }
@media (max-width: 767px) {
body {
overflow-y: auto !important;
background-attachment: fixed; } }
.main-contents {
padding-top: 220px; }
#key-milestones-page {
background: #3a2a49 url(../images/key-milestones-background.jpg) bottom left repeat-x;
background-size: cover; }
.key-milestones {
display: flex; }
.key-milestones .years-list {
margin-right: 8.75rem;
overflow: hidden;
flex-shrink: 0;
flex-basis: 50px;
position: relative;
text-align: center; }
.key-milestones .years-list .slick-current .item {
font-weight: 700;
color: white; }
.key-milestones .slick-custom-arrow {
cursor: pointer;
color: #878787; }
.key-milestones .slick-custom-arrow:hover {
color: #9152a1; }
.key-milestones .slick-slide {
box-shadow: none;
outline: none;
border: 0; }
.key-milestones .year-slider .item {
display: block;
outline: none;
color: rgba(255, 255, 255, 0.5);
margin: 0.9375rem 0;
font-size: 1.125rem;
font-weight: 400; }
.key-milestones .year-slider .item:hover {
color: white; }
.key-milestones .year-slider .slick-center .item {
font-weight: 800;
color: white; }
.key-milestones .data {
color: white;
padding-top: 0.9375rem;
overflow: hidden; }
.key-milestones .data h2 {
font-size: 2.5625rem;
font-weight: 800;
margin: 0 0 1.25rem;
padding-left: 2.1875rem;
transition: all 0.4s ease;
transform: translateY(50px); }
.key-milestones .data .v-list {
font-size: 1.25rem;
font-weight: 300; }
.key-milestones .data .v-list > li {
position: relative;
padding-left: 2.1875rem;
transition: all 0.3s ease;
transform: translateY(30px); }
.key-milestones .data .v-list > li:nth-child(2) {
transition: all 0.4s ease;
transform: translateY(50px); }
.key-milestones .data .v-list > li:nth-child(3) {
transition: all 0.5s ease;
transform: translateY(70px); }
.key-milestones .data .v-list > li:nth-child(4) {
transition: all 0.6s ease;
transform: translateY(90px); }
.key-milestones .data .v-list > li:nth-child(5) {
transition: all 0.7s ease;
transform: translateY(110px); }
.key-milestones .data .v-list > li .pulse-dot {
width: 6px;
height: 6px;
top: 11px;
left: 9px;
transform: none;
background: #9152a1; }
.key-milestones .data .v-list > li .pulse-wrapper {
width: 25px;
height: 25px; }
.key-milestones .data .v-list > li .pulse {
background: #a356b3; }
.key-milestones .data > *:last-child {
margin-bottom: 0; }
.key-milestones .data .slick-active h2 {
transform: translateY(0); }
.key-milestones .data .slick-active .v-list > li {
transform: translateY(0); }
.key-milestones.year-review .scroll-holder {
height: calc(100vh - 260px);
overflow-y: auto; }
.key-milestones.year-review .years-list {
flex-basis: 130px; }
.key-milestones.year-review .data {
background: rgba(0, 0, 0, 0.5);
padding: 0.3125rem 0.9375rem; }
.key-milestones.year-review .data h2 {
padding-left: 0; }
.key-milestones.year-review .data .mCSB_scrollTools {
left: auto;
right: 0; }
.key-milestones.year-review .data .mCSB_inside > .mCSB_container:not(.mCS_no_scrollbar_y) {
padding: 0 18px 0 0; }
.key-milestones.year-review .data .image {
border: solid 4px white;
min-width: 100%;
max-width: 100%;
max-height: 200px;
object-fit: cover; }
.key-milestones.year-review .data .item .row {
margin-bottom: 20px;
align-items: center; }
.key-milestones.year-review .data .item p {
line-height: 1.25rem;
font-size: 1.125rem;
padding: 0.5rem; }
.key-milestones.year-review .data .item p:last-child {
margin-bottom: 0; }
.key-milestones.year-review .data .item .row:last-child {
margin-bottom: 0; }
@media (max-width: 1600px) {
.key-milestones.year-review .scroll-holder {
height: calc(100vh - 220px); } }
@media (max-width: 767px) {
.key-milestones.year-review .scroll-holder {
height: calc(100vh - 160px); } }
@media (max-width: 767px) {
.key-milestones .years-list {
margin-right: 1.875rem; }
.key-milestones .ar .years-list {
margin-left: 1.875rem;
margin-right: 0; } }
.background-video {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -1;
object-fit: cover; }
#technology-page .tech-area {
position: relative; }
#technology-page .navigation {
font-size: 1.8125rem;
font-weight: 300;
text-align: center;
position: absolute;
left: 0;
top: 115px; }
#technology-page .navigation .arrow:hover path {
fill: white;
cursor: pointer; }
#technology-page .navigation .h-list span {
display: block;
line-height: 1;
margin-right: 0.4375rem;
color: white; }
#technology-page .navigation .h-list .current-slide {
color: #9152a1; }
#technology-page .text-holder {
overflow: hidden;
letter-spacing: 1px;
font-weight: 400;
text-align: center;
width: 480px;
position: absolute;
top: 140px;
left: 50%;
transform: translateX(-50%);
font-size: 1rem;
letter-spacing: 1px;
color: #ffffff; }
@media (min-width: 1700px) {
#technology-page .tech-area {
padding-top: 70px; }
#technology-page .text-holder {
top: 200px; } }
@media (max-width: 767px) {
#technology-page {
height: auto !important; } }
.more-link {
text-transform: uppercase;
color: white;
position: relative;
letter-spacing: 6px;
padding: 10px 10px 10px 40px;
font-size: 0.875rem;
font-weight: 400;
display: inline-flex; }
.more-link:hover {
color: white; }
.more-link.swipe-hover:after, .more-link.swipe-hover:before {
height: 24px; }
.explore-link {
display: inline-flex;
outline: none;
font-size: 1.125rem;
padding: 0.4375rem 0.625rem;
position: relative;
text-transform: uppercase;
color: white;
font-weight: 600;
text-align: center; }
.explore-link:before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 28px;
height: 1px;
background: white; }
.explore-link:after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 28px;
height: 1px;
background: white; }
.explore-link:hover {
color: white; }
.explore-link:hover span:before,
.explore-link:hover span:after {
width: 2px;
opacity: 1;
left: calc(100% + 6px); }
.explore-link span {
position: relative;
display: inline-flex; }
.explore-link span:before {
content: "";
width: 120px;
transition: all 0.1s ease;
opacity: 0;
height: 100%;
position: absolute;
top: 0;
left: 50px;
background: white;
transform: skewX(-10deg); }
.explore-link span:after {
content: "";
width: 100px;
transition: all 0.2s ease;
opacity: 0;
height: 100%;
position: absolute;
top: 0;
left: 50px;
background: white;
transform: skewX(-10deg); }
@keyframes scrollAnimation {
0% {
opacity: 1; }
to {
opacity: 0;
transform: translateY(25px); } }
#drone-page .view {
height: 100vh;
position: relative;
background: url(../images/drone-background.jpg) top left no-repeat;
background-size: cover;
padding-top: 13.75rem; }
#drone-page .view:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.7); }
#drone-page .view-2 {
background: url(../images/drone-background2.jpg) top left no-repeat;
background-size: cover; }
#drone-page .view .container {
position: relative;
z-index: 1; }
#drone-page:after {
background: rgba(0, 0, 0, 0.7); }
#drone-page .zain-drone {
color: white;
line-height: 1.2; }
#drone-page .zain-drone .vs-anchor {
display: flex;
position: relative;
overflow: hidden;
justify-content: center;
height: 46px; }
#drone-page .zain-drone .vs-anchor:before {
content: "";
position: absolute;
width: 4px;
height: 5px;
background: #fff;
top: 10px;
left: 50%;
margin-left: -2px;
border-radius: 50%;
-webkit-animation-duration: 1.7s;
animation-duration: 1.7s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: scrollAnimation;
animation-name: scrollAnimation; }
#drone-page .zain-drone .vs-anchor svg {
display: block;
width: 25px; }
#drone-page .zain-drone .tabs-list {
margin-bottom: 30px; }
#drone-page .zain-drone .tab-content {
margin-bottom: 30px; }
#drone-page .zain-drone .tabs-list a {
display: block;
margin-right: 60px;
position: relative;
font-size: 1.75rem;
text-transform: uppercase;
font-weight: 800;
transition: .4s ease all; }
#drone-page .zain-drone .tabs-list a:hover {
color: #fff; }
#drone-page .zain-drone .tabs-list a:not(:last-child)::after {
content: "";
width: 3px;
height: 20px;
background: white;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -30px; }
#drone-page .zain-drone .tabs-list a.active {
color: white; }
#drone-page .zain-drone .tab-pane > *:last-child {
margin-bottom: 0; }
#drone-page .down-arrow {
cursor: pointer; }
#drone-page .down-arrow:hover {
opacity: 0.8; }
#drone-page .grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr; }
#drone-page .grid .item {
height: 240px;
background: transparent;
transition: all 0.4s ease;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px;
position: relative;
color: white; }
#drone-page .grid .item.gallery h2 {
background: transparent url(../images/camera.png) 8px center no-repeat;
height: 113px;
padding-top: 30px; }
#drone-page .grid .item h2 {
text-transform: uppercase;
font-size: 2rem;
font-weight: 900;
margin: 0;
color: #fff; }
@media (max-width: 500px) {
#drone-page .data {
padding-top: 1.125rem; } }
#drone-page .data p {
margin-bottom: 25px;
line-height: 1.3; }
#drone-page .data > *:last-child {
margin-bottom: 0; }
.swipe-hover {
position: relative; }
.swipe-hover:before {
content: "";
width: 120px;
transition: all 0.1s ease;
opacity: 0;
height: 100%;
position: absolute;
top: 50%;
left: 50px;
background: white;
transform: translateY(-50%) skewX(-10deg); }
.swipe-hover:after {
content: "";
width: 100px;
transition: all 0.2s ease;
opacity: 0;
height: 100%;
position: absolute;
top: 50%;
left: 50px;
background: white;
transform: translateY(-50%) skewX(-10deg); }
.swipe-hover:hover::before {
width: 2px;
opacity: 1;
left: calc(100% + 6px); }
.swipe-hover:hover::after {
width: 2px;
opacity: 1;
left: calc(100% + 6px); }
.layer-overlay {
position: fixed;
top: 0;
left: 0;
cursor: pointer;
pointer-events: none;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
z-index: 10;
opacity: 0;
transition: opacity 0.4s ease; }
.data-layer {
width: 70%;
pointer-events: none;
opacity: 0;
transition: all 0.4s ease;
position: fixed;
top: 0;
left: -60%;
display: flex;
justify-content: flex-end;
z-index: 10001;
height: 100vh;
padding: 80px 260px 100px 20px; }
.data-layer .cross-icon {
position: absolute;
top: 0;
right: -160px;
display: block;
cursor: pointer;
color: #9152a1;
transition: all 0.6s ease; }
.data-layer .cross-icon:hover {
transform: rotate(180deg); }
.data-layer .title {
color: black !important;
font-size: 1.75rem;
line-height: 1.2;
font-weight: 800;
margin: 0 0 15px;
text-transform: uppercase; }
.data-layer .inner {
width: 65%;
position: relative;
display: flex;
flex-direction: column; }
.data-layer .scroll {
text-align: left;
line-height: 1.2;
overflow-y: auto;
height: 60vh; }
.data-layer .mCSB_container > *:last-child {
margin-bottom: 0; }
.data-layer:after {
content: "";
width: 100%;
height: 100%;
background: #d8d3d6;
transform: skewX(-19deg);
position: absolute;
top: 0;
left: -130px;
z-index: -1; }
.data-layer.bg1:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: transparent url(../images/data-layer-bg1.jpg) 10% bottom no-repeat; }
.data-layer h3 {
font-size: 1.125rem;
font-weight: 600; }
.data-layer .image:not(:last-child) {
margin-bottom: 15px; }
.scrollbar-inner2 > .scroll-element.scroll-y {
left: 0;
right: auto; }
.scroll.scrollbar-inner2.scroll-content.scroll-scrolly_visible {
padding-left: 18px; }
.scrollbar-inner2::-webkit-scrollbar {
display: none;
height: 0;
width: 0; }
.scroll-wrapper.scroll.scrollbar-inner2::-webkit-scrollbar {
display: none;
height: 0;
width: 0; }
.show-data-layer .data-layer {
left: -5%;
opacity: 1;
pointer-events: inherit; }
.show-data-layer .layer-overlay {
opacity: 1;
pointer-events: inherit; }
.show-data-layer .main-header {
pointer-events: none;
z-index: 0; }
.accordion {
position: relative;
padding-left: 40px; }
.accordion:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
background: #9152a1; }
.accordion h3 {
font-size: 1.375rem;
padding: 10px 0;
color: white;
cursor: pointer;
line-height: 1.1;
margin: 0;
text-transform: uppercase;
font-weight: 900; }
.accordion h3[aria-expanded="true"] {
color: #9152a1;
position: relative; }
.accordion h3:after {
content: "";
transition: opacity 0.4s ease;
width: 13px;
height: 15px;
background: #c3a6cf;
z-index: 1; }
.accordion h3[aria-expanded="true"]:after {
position: absolute;
top: 14px;
left: -45px; }
.accordion .card-body {
padding: 0.625rem 0; }
.accordion .v-list > li {
position: relative;
padding-left: 13px; }
.accordion .v-list > li:after {
content: "";
width: 6px;
height: 6px;
border-radius: 6px;
background: white;
position: absolute;
top: 7px;
left: 0; }
.scroll-holder {
overflow-y: auto;
height: calc(100vh - 300px); }
.scroll-holder .mCSB_container > *:last-child {
margin-bottom: 0; }
.scroll-holder .mCSB_scrollTools {
width: 3px; }
.scroll-holder .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
background-color: white;
border-radius: 0;
width: 100%; }
.scroll-holder .mCSB_scrollTools .mCSB_draggerRail {
background: #c3a6cf;
width: 3px; }
#strategy-page h2 {
font-size: 1.6875rem;
margin-bottom: 20px;
text-transform: uppercase;
font-weight: 900;
color: white; }
#strategy-page .tab-pane > *:last-child {
margin-bottom: 0; }
#strategy-page .tabs-list {
position: fixed;
left: 0;
bottom: 0;
width: 100%; }
#strategy-page .tabs-list .nav {
display: flex;
justify-content: space-between; }
#strategy-page .tabs-list .nav .slick-instance {
width: 100%; }
#strategy-page .tabs-list .nav .nav-item-bottom {
width: 25%; }
#strategy-page .tabs-list .nav a {
display: block;
line-height: 1;
position: relative;
color: white;
text-transform: uppercase;
font-size: 1.25rem; }
#strategy-page .tabs-list .nav a .pulse-dot {
background: #9152a1;
display: none; }
#strategy-page .tabs-list .nav a .pulse-dot .pulse {
background: #a356b3; }
#strategy-page .tabs-list .nav a.active {
font-weight: 900;
padding-left: 35px; }
#strategy-page .tabs-list .nav a.active .pulse-dot {
display: block; }
#strategy-page .step {
cursor: pointer; }
#strategy-page .step figure {
display: block;
margin: 0 0 0.75rem;
position: relative;
border-bottom: solid 4px #9152a1; }
#strategy-page .step figure:after {
content: attr(data-num);
font-size: 2.25rem;
position: absolute;
top: 3px;
left: 6px;
color: white;
font-weight: 900;
display: block;
line-height: 1; }
#strategy-page .step:hover label {
color: #9152a1;
cursor: pointer; }
#strategy-page .step figure img {
max-width: 100%;
min-width: 100%; }
#strategy-page .step label {
font-size: 1.125rem;
margin: 0;
display: block;
line-height: 1.1;
color: white;
text-transform: uppercase;
font-weight: 900; }
#strategy-page .music-bars {
padding-top: 1.875rem;
display: flex;
overflow: hidden; }
#strategy-page .music-bars .item {
display: flex;
align-items: flex-end; }
#strategy-page .music-bars .item span {
height: 1.0625rem;
width: 3px;
display: flex;
margin-right: 10px;
background: #716b7c; }
#strategy-page .music-bars .item span.h-36 {
height: 2.25rem; }
#strategy-page .music-bars .item span.h-23 {
height: 1.4375rem; }
#strategy-page .tabs-holder {
color: white; }
#strategy-page .icons-slider {
padding: 0 50px 38px; }
#strategy-page .icons-slider .item {
display: flex !important;
align-items: center;
justify-content: center;
height: 150px; }
#strategy-page .icons-slider .slick-track {
display: flex;
align-items: center; }
#strategy-page .icons-slider .image {
max-height: 70%;
margin: auto;
opacity: 0.4;
transition: all 0.4s ease; }
#strategy-page .icons-slider .slick-center .image {
opacity: 1;
max-height: 100%; }
#strategy-page .slides {
text-align: center;
position: relative; }
#strategy-page .slides .item {
padding: 0 115px; }
#strategy-page .slides .arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
color: #878787;
z-index: 100; }
#strategy-page .slides .arrow:hover {
color: #9152a1; }
#strategy-page .slides .arrow-left {
left: 0; }
#strategy-page .slides .arrow-right {
right: 0; }
#strategy-page .slides .item p {
margin-bottom: 1.5625rem; }
#strategy-page .view-4 h2 {
font-size: 1.25rem; }
#risk-management-page .risk-management {
color: white;
padding-bottom: 50px;
overflow: hidden; }
#risk-management-page .risk-management .accordion h3 {
font-size: 1.375rem;
margin: 0;
text-transform: uppercase;
font-weight: 900; }
#risk-management-page .risk-management > *:last-child {
margin-bottom: 0; }
#sustainablity-page .view {
height: 100vh;
position: relative;
background: url(../images/sustainability-bg1.jpg) top left no-repeat;
background-size: cover;
padding-top: 13.75rem; }
#sustainablity-page .view-1 {
color: white; }
#sustainablity-page .view-1 p {
text-align: center;
line-height: 20px; }
#sustainablity-page .view-1 p:last-of-type {
margin-bottom: 0; }
#sustainablity-page .view-1 h4 {
margin-top: 25px; }
#sustainablity-page .view-1 .scroll-holder {
max-height: calc(100vh - 477px); }
#sustainablity-page .explore {
padding-top: 2.5rem !important;
cursor: pointer;
text-align: center; }
#sustainablity-page .explore figure {
display: inline-flex;
position: relative;
margin: 0 auto;
transition: all 1s ease;
clip-path: none; }
#sustainablity-page .explore span {
display: block;
color: white;
font-weight: 900;
font-size: 1.125rem;
text-transform: uppercase;
padding-top: 7px; }
#sustainablity-page .explore:hover {
opacity: 0.8; }
#sustainablity-page .explore:hover figure {
transform: rotate(360deg);
clip-path: circle(50%); }
#sustainablity-page .view-1:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.7); }
#sustainablity-page .view .container {
position: relative;
z-index: 1; }
#sustainablity-page:after {
background: rgba(0, 0, 0, 0.7); }
#sustainablity-page h2 {
font-size: 1.75rem;
text-transform: uppercase;
font-weight: 900; }
#sustainablity-page .scroll-height {
max-height: 165px; }
#sustainablity-page .control {
padding-bottom: 2px; }
#sustainablity-page .control .nav-link:hover {
color: #9152a1; }
#sustainablity-page #data-9523 .footer-container {
justify-content: center;
position: relative; }
#sustainablity-page #data-9523 .turn {
position: absolute;
right: 0;
bottom: 0; }
.list-style-none {
list-style: none; }
.supply-chain {
max-width: 100%;
width: 385px;
margin: auto;
text-align: center; }
.supply-chain ul {
text-align: center;
padding-left: 0;
list-style: none; }
.supply-chain ul:not(:last-child) {
margin-bottom: 55px; }
.supply-chain ul:nth-child(2) li {
margin: unset;
position: relative; }
.supply-chain ul:nth-child(2) li:first-child {
margin-right: 10px; }
.supply-chain ul:nth-child(2) li:before {
position: absolute;
content: '';
width: 38px;
height: 13px;
background: url(../images/icons/arrow-double.png) 0px 0px no-repeat;
top: -33px;
left: 65%;
transform: translateX(-50%) rotate(127deg); }
.supply-chain ul:nth-child(2) li:after {
position: absolute;
content: '';
width: 38px;
height: 13px;
background: url(../images/icons/arrow-double.png) 0px 0px no-repeat;
bottom: -36px;
left: 65%;
transform: translateX(-50%) rotate(50deg); }
.supply-chain ul:nth-child(2) li:last-child:before {
top: -47px;
left: 30%;
transform: translateX(-50%) rotate(57deg); }
.supply-chain ul:nth-child(2) li:last-child:after {
bottom: -48px;
left: 38%;
transform: translateX(-50%) rotate(128deg); }
.supply-chain ul li {
width: 150px;
background-color: #9152a1;
color: #ffffff;
font-size: 0.875rem;
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
margin: auto; }
.data-layer.bg1[data-wrapper='strategy-data-layer']:before {
background: url(../images/data-layer-strategy.png) 10% bottom no-repeat;
zoom: 0.8; }
.data-layer.bg1[data-wrapper='strategy-data-layer']:after {
background: #fff; }
.data-layer.bg1[data-wrapper='strategy-growth-vertical']:before {
background: transparent; }
.data-layer.bg1[data-wrapper='strategy-growth-vertical']:after {
background: #fff; }
.data-layer.bg1[data-wrapper='zain-drone']:before {
background: transparent; }
.data-layer.bg1[data-wrapper='zain-drone']:after {
background: #fff url(../images/data-layer-zaindrone.png) 10% bottom no-repeat;
background-size: cover; }
.data-layer.bg1[data-wrapper='sustainability']:before {
background: transparent; }
.data-layer.bg1[data-wrapper='sustainability']:after {
background: #fff; }
[data-page="innerpage"] {
overflow-y: auto !important;
overflow: auto !important;
height: auto !important;
background-attachment: fixed; }
[data-page="innerpage"] .main-contents {
position: relative;
z-index: 1; }
[data-page="innerpage"] .main-contents:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.3);
z-index: -1;
pointer-events: none; }
[data-section-wrapper="governance"] .main-contents:after {
background: rgba(0, 0, 0, 0.7); }
[data-section-wrapper="governance"] .main-header.compact {
background: #1c513f; }
[data-section-wrapper="governance"] .main-header .menu-icon span {
background: #01a773; }
[data-section-wrapper="governance"] .main-header .pulse-wrapper .pulse {
background: #096549; }
[data-section-wrapper="governance"] .main-header.financial-review .image-holder:after {
background: url(../images/financial-review-banner.png) top center no-repeat;
background-size: cover; }
[data-section-wrapper="governance"] .main-header.financial-review .menu-icon span {
background: #52b9e8; }
[data-section-wrapper="governance"] .main-header.financial-review .pulse-wrapper .pulse {
background: #0d6693; }
[data-section-wrapper="governance"] .main-header.financial-review .nav-list .nav-item:hover {
color: #52b9e8; }
[data-section-wrapper="governance"]:after {
background: rgba(0, 0, 0, 0.7); }
[data-section-wrapper="financial-review"] .main-header.compact {
background: #1c3f52; }
[data-section-wrapper="financial-review"] .main-header .layer {
background: #52b9e8; }
[data-section-wrapper="financial-review"] .main-header .menu-icon span {
background: #52b9e8; }
[data-section-wrapper="financial-review"] .main-header .pulse-wrapper .pulse {
background: #0d6693; }
[data-section-wrapper="financial-review"] .main-contents:after {
background: rgba(0, 0, 0, 0.7); }
html {
overflow: auto !important; }
#galance-2019 {
background: url(../images/2019galance-bg.png) center center no-repeat;
background-attachment: fixed; }
#galance-2019 .main-contents:after {
background: rgba(0, 0, 0, 0.7); }
.img-wrap {
float: left;
padding: 0rem 0.9375rem 0.3125rem 0rem; }
.ar .img-wrap {
padding: 0rem 0rem 0.3125rem 0.9375rem; }
.sustainability-bg {
display: none; }
.customer-exp-country-list .country-item > div {
margin: 15px 0px;
overflow: hidden; }
.customer-exp-country-list .box {
height: calc(100% - 15px);
padding-bottom: 15px;
overflow: hidden; }
.customer-exp-country-list .box h6 {
color: #3e3e3f; }
.customer-exp-country-list .box p:last-of-type {
margin-bottom: 0px; }
.customer-exp-country-list .box p + img {
display: block;
margin-top: 5px; }
.customer-exp-country-list .h-250 {
max-height: 250px; }
.customer-exp-country-list .w-300 {
max-width: 300px; }
@media (max-width: 1600px) {
.main-contents {
padding-top: 11.25rem; } }
@media (max-width: 1500px) {
.main-contents {
padding-top: 10.3125rem; }
#strategy-page .icons-slider .item {
height: 135px; }
#strategy-page .slides .item {
padding: 0px 5rem; }
#strategy-page .slides .item p {
margin-bottom: 20px; }
#strategy-page h2 {
margin-bottom: 17px; }
#strategy-page .music-bars {
padding-top: 1.3rem; }
.explore-link {
font-size: 1.0625rem;
padding: 5px 0; }
.pulse-wrapper {
width: 115px;
height: 115px; }
#drone-page .view {
padding-top: 10rem; }
.zain-drone .pt-5 {
padding-top: 2rem !important; }
#drone-page .grid .item {
height: 230px;
padding: 20px 25px; }
#sustainablity-page #data-9523 .content-title {
margin-bottom: 1.5rem; }
#sustainablity-page #data-9523 .content-text {
margin-top: 1.5rem; }
#sustainablity-page #data-9523 .content-col-title {
margin-bottom: 10px; }
#sustainablity-page #data-9523 .content-btn {
margin-top: 5px;
margin-bottom: 10px; }
#sustainablity-page .view-1 .scroll-holder {
max-height: calc(100vh - 467px); }
.data-layer.bg1:before {
zoom: 0.6 !important; }
.scene-1 .landing-graphic-1 {
right: 28px; }
.scene-1 .landing-graphic-2 {
right: -82px; }
.scene-1 .landing-graphic-3 {
right: -50px; } }
.main-menu-open {
transform: scale(0); }
.main-header .title h1 span.sub-heading {
color: #808285;
margin-top: 0.3125rem;
font-size: 20px; }
.main-header.compact .title h1 span.sub-heading {
font-size: 13px;
margin: 0; }
.key-milestones.year-review .scroll-holder {
padding-right: 0.9375rem; }
.landing-page-cover-md {
display: none;
position: fixed;
width: 100%;
height: 100%; }
.landing-page-cover-sm {
display: none;
position: fixed;
width: 100%;
height: 100%; }
.responsive-main-image {
display: none; }
.sustainability-bg {
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
z-index: -1; }
@media (min-width: 1201px) {
.grid .item:hover .data {
max-height: 250px;
opacity: 1;
padding-top: 1.125rem; }
.data {
max-height: 0;
opacity: 0;
transition: all 1s ease; }
.key-milestones .data, .key-milestones .slick-initialized.data {
max-height: none;
opacity: 1; }
#drone-page .grid .item:hover {
background-position: 28px 20px;
background-color: rgba(0, 0, 0, 0.7); } }
@media (max-width: 1199px) {
.landing-page-cover-md {
display: block; }
#landing-video {
display: none; }
body#technology-page .navigation {
z-index: 100; }
#strategy-page .step figure:after {
font-size: 24px;
top: 50%;
transform: translateY(-50%); }
#drone-page .grid .item {
padding: 15px; }
#drone-page .grid .item h2 {
font-size: 1rem; }
#drone-page .grid .item.gallery h2 {
padding-top: 38px; }
#drone-page .zain-drone .tabs-list a {
font-size: 18px;
margin-right: 28px; }
#drone-page .zain-drone .tabs-list a:not(:last-child)::after {
right: -14px; }
#strategy-page .tabs-list .nav a {
padding-right: 5px;
margin-bottom: 15px;
font-size: 0.875rem; }
#strategy-page .music-bars {
padding-top: 0; }
.data-layer {
width: 80%; } }
@media (max-width: 1200px) {
.grid .item .data {
padding-top: 1.125rem; }
.sustainability-bg {
display: block; }
#sustainablity-page .view-2 {
background: none; }
.sections .section {
background: none !important; }
#sustainablity-page, #drone-page {
min-height: 100vh !important;
height: 100% !important; }
.custom-table .trow .th {
font-size: 15px;
padding: 9px; }
.chairman-statement .image-wrapper .inner p {
padding-right: 0; }
.responsive-main-image {
display: block; }
.responsive-main-image img {
position: fixed;
height: 100%;
width: 100%;
z-index: -1; }
.background-video {
display: none; }
#key-performance {
background: none; }
#key-milestones-page {
background: none;
background-color: #3a2a49; }
#strategy-page {
background: none; }
#zain-world {
background: none; }
#BOD-message {
background: none; }
.scene-1 .landing-graphic-1 {
right: 52px; }
.scene-1 .landing-graphic-2 {
right: -62px; }
.scene-1 .landing-graphic-3 {
right: -26px; }
.scene-1 .video-caption .tagline .top {
font-size: 41px; }
.scene-1 .video-caption .tagline .middle {
font-size: 52px; }
.scene-1 .video-caption .tagline .bottom {
font-size: 22px; }
.main-nav-items .nav-item .number {
left: -75px; }
.main-nav-items .nav-item .image-wrapper img {
left: 50%;
transform: skew(25deg, 0deg) translateX(-50%); }
.download-report {
letter-spacing: 2px;
font-size: 1.2625rem; }
.report-section .menu-icon {
right: 5%; }
.regulatory .regulatory-spec-wrapper .slick-custom-arrow {
left: 50%;
transform: translateX(-50%); } }
@media (max-width: 1024px) {
.rotating-slider ul.slides li.active h2 {
padding-top: 5px; }
.swipe-hover:after {
content: none; }
.swipe-hover:before {
content: none; }
.swipe-hover:hover:after {
content: none; }
.swipe-hover:hover:before {
content: none; }
.explore-link span:after {
content: none; }
.explore-link span:before {
content: none; }
.explore-link:hover span:after {
content: none; }
.explore-link:hover span:before {
content: none; }
.key-performance h5 {
margin-bottom: 3.125rem !important;
margin-top: 1.25rem !important; } }
@media (max-width: 991px) {
.hide-on-lg {
display: none;
visibility: hidden; }
.drone-video {
text-align: center !important;
padding: 1.25rem 0.7rem !important; }
#technology-page .rotating-slider ul li .inner {
padding-top: 12px; }
.scene-1 .landing-graphic-1,
.scene-1 .landing-graphic-2,
.scene-1 .landing-graphic-3 {
display: none; }
.scene-1 .lang {
right: 15px; }
#data-9523 .content-numbers {
width: 100%; }
#data-9523 .wheel {
display: none; }
#data-9523 .section-wrapper {
width: 100%; }
#data-9523 .footer-container {
width: 100%; }
#data-9523 .turn {
display: none; }
#data-9523 .content > div {
width: 100%; }
#data-9523 .content-numbers span.num {
font-size: 2rem; }
#sustainablity-page .view {
padding-top: 10.75rem; }
.more-link {
letter-spacing: 3px;
padding: 10px 5px 10px 30px; }
#customer-experience .image.text-center {
margin: 20px auto; }
.img-wrap {
float: none;
padding: 0rem 0 1rem 0rem;
max-width: 100% !important; }
.data-layer.bg1:before {
background: none; }
.regulatory .critical-messages .message {
max-width: 32% !important;
flex: 0 0 32%; }
body[data-page="innerpage"] h2 {
font-size: 2rem; }
.data-layer.bg1[data-wrapper='strategy-data-layer']:before {
background: none; }
.table-wrapper.big {
overflow: hidden;
overflow-x: auto; }
.table-wrapper.big .custom-table {
width: 1050px; }
.data-layer .inner {
width: 90%; }
.scene-1 .video-caption .continue {
top: -50px; }
.main-nav-items .nav-item .line {
width: 65px;
height: 75px;
top: -28px;
left: 30px; }
.main-nav-items .nav-item .line.small {
top: -40px;
left: 90px; }
.report-section .image-holder .inner {
width: 265px; }
#strategy-page {
padding-bottom: 150px; }
#strategy-page .tabs-list {
background: rgba(0, 0, 0, 0.8);
padding-top: 15px;
border-top: solid 1px rgba(255, 255, 255, 0.3); }
#strategy-page .tabs-list .nav a {
text-transform: capitalize;
font-size: 13px;
line-height: 1.2; }
#strategy-page .step label {
font-size: 15px; }
#strategy-page .icons-slider {
padding: 0 0 30px; }
#strategy-page .slides .item {
padding: 0; }
#strategy-page .icons-slider .item {
height: 100px; }
.key-milestones.year-review .years-list {
flex-basis: unset;
margin-right: 0px;
padding: 0px 3.125rem; }
body {
height: 100%; }
.key-milestones {
flex-direction: column; }
.key-milestones.year-review .scroll-holder {
height: auto;
max-height: 200vh; }
.years-list .prev-arrow {
left: 0px;
right: auto; }
.key-milestones .slick-custom-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0px;
transform: translateY(-50%) rotate(270deg); }
.years-list .next-arrow {
top: 25%; }
.main-header .title {
font-size: 2rem; }
.key-milestones .years-list {
margin-right: 0px; }
.stars {
display: none; } }
@media (max-width: 767px) {
[data-width="87%"] {
width: 87% !important; }
[data-width="88%"] {
width: 88% !important; }
[data-width="76%"] {
width: 76% !important; }
[data-width="69%"] {
width: 69% !important; }
[data-width="68%"] {
width: 68% !important; }
[data-width="65%"] {
width: 65% !important; }
[data-width="58%"] {
width: 58% !important; }
[data-width="54%"] {
width: 54% !important; }
[data-width="46%"] {
width: 46% !important; }
[data-width="42%"] {
width: 42% !important; }
[data-width="35%"] {
width: 35% !important; }
[data-width="32%"] {
width: 32% !important; }
[data-width="31%"] {
width: 31% !important; }
[data-width="24%"] {
width: 24% !important; }
[data-width="13%"] {
width: 13% !important; }
[data-width="12%"] {
width: 12% !important; }
.regulatory .regulatory-spec-wrapper {
padding: 20px 0;
padding-bottom: 0; }
.scene-1 .video-caption .zain-logo {
max-width: 180px; }
.chairman-statement .image-wrapper .image {
float: none;
margin: 0; }
.chairman-statement .image-wrapper .name {
padding-top: 30px;
margin-bottom: 15px; }
#sustainablity-page .view-1 .scroll-holder {
max-height: 200px;
height: auto; }
#sustainablity-page .view {
padding-top: 6.75rem; }
#data-9523 .content-numbers span.num {
font-size: 1.8rem; }
#data-9523 .section-wrapper {
width: 100%; }
#data-9523 .section-wrapper {
height: 100%; }
#data-9523 .content-col {
flex-direction: column; }
#data-9523 .content-col-img {
width: auto;
margin-left: 0;
margin: 12px 0; }
#sustainablity-page .control {
position: relative;
margin-left: auto; }
.risk-management .accordion {
margin-top: 30px; }
.risk-management .accordion:after {
left: 3px; }
.regulatory .regulatory-spec-wrapper .slick-custom-arrow {
position: absolute;
transform: rotate(90deg);
left: 30px;
top: 97px;
z-index: 100; }
.regulatory .regulatory-spec-wrapper .slick-custom-arrow.prev-arrow {
left: 70px;
top: 111.3px; }
.regulatory .regulatory-spec-wrapper .specs-slider {
margin-top: 30px; }
.table-wrapper {
overflow: hidden;
overflow-x: auto; }
.table-wrapper .custom-table {
width: 800px;
max-width: unset; }
.table-wrapper .table {
width: 800px;
max-width: unset; }
.table-wrapper.p-fixed .custom-table {
width: 100%;
max-width: 100%; }
#zain-world .flex-row {
flex-direction: column !important;
align-items: unset; }
.chairman-statement .image-wrapper .image img {
max-width: 100%; }
.key-milestones.year-review .data .image {
max-height: 220px;
margin-bottom: 10px;
margin-top: 10px; }
#drone-page .view-2 {
padding-top: 50px; }
#drone-page .zain-drone .tabs-list {
flex-direction: column;
align-items: flex-start; }
#drone-page .zain-drone .tabs-list a {
display: block;
margin: 0 0 10px;
padding-left: 15px; }
#drone-page .zain-drone .tabs-list a:after {
left: 0;
right: auto; }
#drone-page .zain-drone .tabs-list a:last-child {
margin-bottom: 0; }
#drone-page .view {
height: inherit;
padding-bottom: 50px; }
#drone-page {
overflow: hidden !important; }
#drone-page .grid {
grid-template-columns: 1fr 1fr;
position: relative; }
#drone-page .grid:after {
content: "";
width: 1px;
height: 100%;
position: absolute;
top: 0;
left: 50%;
background: white; }
#drone-page .grid .item {
border-right: 0 !important; }
body[data-page="innerpage"] h5 {
font-size: 1.22rem; }
.h1,
h1 {
font-size: 2.2rem; }
.key-performance .custom-row .box .body {
width: 50%; }
.key-performance .custom-row .box .head {
width: 50%; }
.report-section .nav-list .nav-item {
padding: 5px 0; }
body {
height: 100%; }
body#technology-page {
height: 100vh; }
body#technology-page .rotating-slider {
position: fixed;
left: 50%;
transform: translateX(-50%); }
body#technology-page .navigation {
top: 10px; }
body#technology-page .text-holder {
width: 100%;
position: relative;
padding-top: 70px;
top: auto;
left: auto;
transform: none; }
.rotating-slider-lg .slides-lg li h2 {
font-size: 15px; }
.scene-1 .landing-graphic-1 {
zoom: .7; }
.scene-1 .landing-graphic-2 {
zoom: .7; }
.scene-1 .landing-graphic-3 {
zoom: .7; }
.scene-1 .video-caption .tagline .top {
font-size: 36px; }
.scene-1 .video-caption .tagline .middle {
font-size: 47px; }
.scene-1 .video-caption .tagline .bottom {
font-size: 18px; }
.main-header .menu-icon {
width: 40px;
height: 40px; }
.main-header .pulse-wrapper {
width: calc(100% + 35px);
height: calc(100% + 35px); }
.main-header .title {
font-size: 1.25rem; }
.main-header .title h1 {
min-height: auto; }
.data-layer {
width: 100%;
padding: 30px; }
.data-layer .title {
padding-left: 0;
padding-right: 35px; }
.data-layer .cross-icon {
width: 20px;
height: 20px;
right: 0; }
.data-layer .inner {
width: 100%;
justify-content: center;
overflow: hidden; }
.data-layer:after {
transform: none;
width: 100%;
left: 0; }
.data-layer .scroll {
max-height: 80vh;
height: inherit; }
.show-data-layer .data-layer {
left: 0; }
.main-contents {
padding-top: 7.5rem; }
.main-nav-items {
overflow-y: auto; }
.main-nav-items .year-at-glance {
position: absolute; }
.main-nav-items .year-at-glance .image-wrapper {
transform: none; }
.main-nav-items .year-at-glance .image-wrapper img {
transform: none; }
.main-nav-items .nav-item {
margin-top: 180px; }
.main-nav-items .nav-item:hover .image-wrapper {
transform: none; }
.main-nav-items .nav-item .image-wrapper img {
transform: translateX(-50%); }
.main-nav-items .nav-item .number {
left: -30px; }
.main-nav-items .nav-item:not(:nth-child(4)) {
margin-right: 50px; }
.key-performance .desc h1 {
font-size: 1.0625rem;
padding-left: 40px; }
.key-performance .desc h1:before {
zoom: 0.5; }
#strategy-page .tabs-list .nav a {
width: 50%; } }
@media (max-width: 575px) {
.landing-page-cover-sm {
display: block; }
.landing-page-cover-md {
display: none; }
.main-nav-items .nav-item {
width: 42%;
margin-left: auto;
margin-right: auto !important;
text-align: center;
margin-top: 65px; }
.main-nav-items .nav-item:not(:nth-child(4)) {
margin-top: 200px; }
.main-nav-items .nav-item .image-wrapper {
margin: auto; }
.main-nav-items .nav-item h3 {
left: 0;
font-size: 1.125rem; }
.main-nav-items .nav-item .number {
left: 0;
font-size: 2.8rem; }
#data-9523 .content-title {
font-size: 23px; }
#data-9523 .group-title {
font-size: 18px; }
.rotating-slider ul.slides li h2 {
font-size: 10px !important;
letter-spacing: 0; }
.procedure-steps {
position: relative; }
.procedure-steps .label-wrapper {
width: 0; }
.procedure-steps .label-wrapper label {
padding: 14px 12px;
min-width: 280px;
font-size: 13px;
letter-spacing: 1;
top: 129px;
left: -118px; }
.procedure-steps .label-wrapper label.review {
left: -162px;
top: 126px; }
.procedure-steps ul:after, .procedure-steps ul:before {
zoom: .8;
right: 23px; }
.procedure-steps ul li {
height: 50px;
width: 190px; }
.procedure-steps ul li:after, .procedure-steps ul li:before {
zoom: .8; }
.procedure-steps ul li:before {
left: -54px; }
.procedure-steps ul li:after {
right: -54px; }
.regulatory .critical-messages .message {
max-width: 48% !important;
flex: 0 0 48%;
margin-right: 2%; }
.h1,
h1 {
font-size: 2rem; }
.scene-1 .landing-graphic-1 {
right: 68px; }
.scene-1 .landing-graphic-2 {
right: -30px; }
.scene-1 .landing-graphic-3 {
right: 0px; }
.scene-1 .video-caption .tagline .top {
font-size: 30px;
letter-spacing: normal; }
.scene-1 .video-caption .tagline .middle {
font-size: 38px;
letter-spacing: normal; }
.scene-1 .video-caption .tagline .bottom {
font-size: 16px;
letter-spacing: normal; }
.download-report {
font-size: 1rem; }
.h-list > * {
margin-right: 6px; }
.link {
top: 20px;
right: 50px; } }
@media (max-width: 500px) {
#drone-page .grid {
grid-template-columns: 1fr; }
#drone-page .grid:after {
content: none; }
#drone-page .grid .item {
border-right: 0 !important; }
.scene-1 .video-caption .continue {
top: 0px; }
.key-performance .custom-row .box .body {
width: 60%; }
.key-performance .custom-row .box .head {
width: 60%; } }
@media (max-width: 414px) {
.procedure-steps ul li {
width: 150px; }
.procedure-steps ul li:before, .procedure-steps ul li:after {
zoom: .7; }
.procedure-steps .label-wrapper label {
padding: 11px 12px;
padding-bottom: 7px; } }
.table-md {
width: 80%;
margin: auto; }
.table-sm {
width: 70%;
margin: auto; }
.rotating-slider-lg {
display: none; }
@media screen and (max-width: 991px) and (min-width: 768px) {
.internal-audit {
height: 100vh; }
.conduct-and-standards {
height: 100vh; }
.conduct-and-standards p {
margin-bottom: 7px; } }
@media (max-width: 991px) {
#technology-page .text-holder {
top: 120px; }
.rotating-slider-lg {
display: block; }
.rotating-slider-lg .slides-lg {
padding: 0; }
.rotating-slider-lg .slides-lg li {
text-transform: uppercase;
margin: 0;
text-align: center; }
.rotating-slider-lg .slides-lg li h2 {
font-size: 16px;
font-weight: 800;
color: #9053a1; }
.rotating-slider ul.slides li h2 {
font-size: 14px; }
#technology-page {
height: 100vh; }
#strategy-page .slides .arrow {
bottom: auto;
top: -90px;
transform: none; }
#strategy-page .slides .arrow-right {
left: auto;
right: 0; }
.table-wrapper.big {
overflow: hidden;
overflow-x: auto; }
.table-wrapper.big .custom-table {
width: 1050px; }
.data-layer .inner {
width: 90%; }
.scene-1 .video-caption .continue {
top: -50px; }
.main-nav-items .nav-item .line {
width: 65px;
height: 75px;
top: -28px;
left: 30px; }
.main-nav-items .nav-item .line.small {
top: -40px;
left: 90px; }
.report-section .image-holder .inner {
width: 265px; }
#strategy-page {
padding-bottom: 150px; }
#strategy-page .tabs-list {
background: rgba(0, 0, 0, 0.8);
padding-top: 15px;
border-top: solid 1px rgba(255, 255, 255, 0.3); }
#strategy-page .tabs-list .nav a {
text-transform: capitalize;
font-size: 13px;
line-height: 1.2; }
#strategy-page .step label {
font-size: 15px; }
#strategy-page .icons-slider {
padding: 0 0 30px; }
#strategy-page .slides .item {
padding: 0; }
#strategy-page .icons-slider .item {
height: 100px; } }
@media (max-width: 767px) {
#zain-world .flex-row .list-countries .country-item {
padding: 0px 25px; }
#zain-world .flex-row .list-countries .country-item a {
font-size: 0; }
.download-report {
position: static;
margin-top: 25px;
zoom: .9; }
.regulatory .regulatory-spec-wrapper .slick-custom-arrow {
position: absolute;
transform: rotate(90deg);
left: 30px;
top: 45px;
z-index: 100; }
.regulatory .regulatory-spec-wrapper .slick-custom-arrow.prev-arrow {
left: auto;
top: 58.3px;
right: 30px; }
.regulatory .regulatory-spec-wrapper .specs-slider {
margin-top: 30px; }
.table-wrapper {
overflow: hidden;
overflow-x: auto; }
.table-wrapper .custom-table {
width: 800px; }
.table-wrapper.p-fixed .custom-table {
width: 100%;
max-width: 100%; }
#zain-world .flex-row {
flex-direction: column !important;
align-items: unset; }
.chairman-statement .image-wrapper .image img {
max-width: 100%; }
.key-milestones.year-review .data .image {
max-height: 220px;
margin-bottom: 10px;
margin-top: 10px; }
#drone-page .view-2 {
padding-top: 50px; }
#drone-page .zain-drone .tabs-list {
flex-direction: column;
align-items: flex-start; }
#drone-page .zain-drone .tabs-list a {
display: block;
margin: 0 0 10px;
padding-left: 0px; }
#drone-page .zain-drone .tabs-list a:first-child {
padding-bottom: 10px; }
#drone-page .zain-drone .tabs-list a:after {
width: 20px !important;
height: 3px !important;
transform: none !important;
right: 0 !important;
bottom: 0 !important;
top: auto !important; }
#drone-page .zain-drone .tabs-list a:after {
left: 0;
right: auto; }
#drone-page .zain-drone .tabs-list a:last-child {
margin-bottom: 0; }
#drone-page .view {
height: inherit;
padding-bottom: 50px; }
#drone-page {
overflow: hidden !important; }
#drone-page .grid {
grid-template-columns: 1fr 1fr;
position: relative; }
#drone-page .grid:after {
content: "";
width: 1px;
height: 100%;
position: absolute;
top: 0;
left: 50%;
background: white; }
#drone-page .grid .item {
border-right: 0 !important; }
body[data-page="innerpage"] h5 {
font-size: 1.22rem; }
.h1,
h1 {
font-size: 2.2rem; }
.key-performance .custom-row .box .body {
width: 50%; }
.key-performance .custom-row .box .head {
width: 50%; }
.report-section .nav-list .nav-item {
padding: 5px 0; }
.scene-1 .landing-graphic-1 {
zoom: .7; }
.scene-1 .landing-graphic-2 {
zoom: .7; }
.scene-1 .landing-graphic-3 {
zoom: .7; }
.scene-1 .video-caption .tagline .top {
font-size: 36px; }
.scene-1 .video-caption .tagline .middle {
font-size: 47px; }
.scene-1 .video-caption .tagline .bottom {
font-size: 18px; }
.main-header .menu-icon {
width: 40px;
height: 40px; }
.main-header .pulse-wrapper {
width: calc(100% + 35px);
height: calc(100% + 35px); }
.main-header .title {
font-size: 1.25rem; }
.data-layer {
width: 100%;
padding: 20px 30px; }
.data-layer .title {
padding-left: 0;
padding-right: 35px; }
.data-layer .cross-icon {
width: 20px;
height: 20px;
right: 0;
z-index: 100; }
.data-layer .cross-icon:hover {
transform: none; }
.data-layer .inner {
width: 100%;
justify-content: center; }
.data-layer:after {
transform: none;
width: 100%;
left: 0; }
.data-layer .scroll {
max-height: 50vh;
height: 80%; }
.show-data-layer .data-layer {
left: 0; }
.main-contents {
padding-top: 7.5rem; }
.sustainability-bg {
display: block;
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
z-index: -1; }
#sustainablity-page .view-2 {
background: none; }
.sections .section {
background: none !important; }
.procedure-steps .label-wrapper label {
left: -123px; }
.procedure-steps ul li:before {
left: -58px; }
.procedure-steps ul li:after {
right: -58px; } }
@media (max-width: 575px) {
.main-header .title {
font-size: 1.125rem; }
.main-header.compact .title {
font-size: 1.125rem; }
.download-report {
letter-spacing: normal; }
.download-report a {
margin-bottom: 10px;
padding: 0px 12px; }
.h1,
h1 {
font-size: 2rem; }
.scene-1 .landing-graphic-1 {
right: 68px; }
.scene-1 .landing-graphic-2 {
right: -30px; }
.scene-1 .landing-graphic-3 {
right: 0px; }
.scene-1 .video-caption .tagline .top {
font-size: 1.875rem;
letter-spacing: normal; }
.scene-1 .video-caption .tagline .middle {
font-size: 2.375rem;
letter-spacing: normal; }
.scene-1 .video-caption .tagline .bottom {
font-size: 1rem;
letter-spacing: normal; } }
@media (max-width: 500px) {
#zain-world .flex-row .list-countries .country-item {
padding: 0px 20px; }
.report-section.governance .image-holder:before, .report-section.financial-review .image-holder:before {
content: '';
position: absolute;
background: rgba(0, 0, 0, 0.2);
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 10; }
#drone-page .grid {
grid-template-columns: 1fr; }
#drone-page .grid:after {
content: none; }
#drone-page .grid .item {
border-right: 0 !important; }
.scene-1 .video-caption .continue {
top: 0px; }
.key-performance .custom-row .box .body {
width: 60%; }
.key-performance .custom-row .box .head {
width: 60%; } }
#strategy-page .nav-toggler {
display: none; }
@media (max-width: 767px) {
#strategy-page .nav-toggler {
display: block;
border: solid 1px #b05ec1;
margin: 0 auto 15px;
border-radius: 10px;
cursor: pointer;
background: rgba(0, 0, 0, 0.2);
color: white;
max-width: 300px;
position: relative;
padding: 10px 15px; }
#strategy-page .nav-toggler .arrow {
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
display: block; }
#strategy-page .nav-toggler.active + .nav {
opacity: 1;
pointer-events: inherit; }
#strategy-page .nav-toggler.active .arrow {
transform: translateY(-50%) rotate(180deg); }
#strategy-page .tabs-list .nav {
display: flex;
position: absolute;
justify-content: space-between;
background: black;
width: 300px;
flex-direction: column;
padding: 15px;
border: solid 1px rgba(255, 255, 255, 0.2);
border-radius: 10px;
opacity: 0;
pointer-events: none;
bottom: 95px;
left: 50%;
transform: translateX(-50%); }
#strategy-page .tabs-list .nav a {
width: 100%; }
#strategy-page .tabs-list .nav a.active .pulse-dot {
display: none; }
#strategy-page .tabs-list .nav a.active {
padding-left: 0; }
#strategy-page .tabs-list .nav > *:last-child {
margin-bottom: 0; } }
/*# sourceMappingURL=main.css.map */