/* start delete me */
.break-component {border-top: 2px dashed yellow;}
/* end delete me */

/* start common */
:root {
    --color-dark:    96, 96, 96;     /* #606060 */
    --color-green:   94, 178, 83;    /* #5EB253 */
    --color-yellow:  248, 196, 89;   /* #F8C459 */
    --color-blue:    55, 159, 207;   /* #379FCF */
    --color-grey:    204, 204, 204;  /* #cccccc */
    --unit-beaches:  100px;
}
@font-face { font-family: Noor; src: url("../fonts/Noor/AGCRegular.ttf"); }
@font-face { font-family: Noor; font-weight: 300; src: url("../fonts/Noor/AGCLight.ttf"); }
@font-face { font-family: Noor; font-weight: 700; src: url("../fonts/Noor/AGCBold.ttf"); }
@font-face { font-family: Almarai; src: url("../fonts/Almarai/Almarai-Regular.ttf"); }
@font-face { font-family: Almarai; font-weight: 300; src: url("../fonts/Almarai/Almarai-Light.ttf"); }
@font-face { font-family: Almarai; font-weight: 700; src: url("../fonts/Almarai/Almarai-Bold.ttf"); }
@font-face { font-family: Almarai; font-weight: 900; src: url("../fonts/Almarai/Almarai-ExtraBold.ttf"); }
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
*:not(i) { font-family: Almarai }
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
body { margin: 0; padding: 0; background: rgba(var(--color-dark), 1); }
.list-unstyled {margin: 0; padding: 0;}
.unit-beaches {margin: var(--unit-beaches) auto}
::placeholder { color: rgba(var(--color-grey), 1); opacity: 1; }
:-ms-input-placeholder { color: rgba(var(--color-grey), 1); }
::-ms-input-placeholder { color: rgba(var(--color-grey), 1); }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-button { width: 5px; height: 5px; }
::-webkit-scrollbar-thumb { background: #aaa; border: 1px none #ffffff; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #777; }
::-webkit-scrollbar-thumb:active { background: #666; }
::-webkit-scrollbar-track { background: #eee; border: 65px none #ffffff; border-radius: 34px; }
::-webkit-scrollbar-track:hover { background: #eee; }
::-webkit-scrollbar-track:active { background: #eee; }
::-webkit-scrollbar-corner {background: transparent;}
/* unit stylish: */
.title { font-size: 30px; }
.title h2 { color: #fff; font-size: 30px; margin: 40px auto; }
/* whatsapp button: */
.whatsapp {
    background-color: #FFFFFF52;
    border-radius: 45px; 
    height: 45px; 
    line-height: 45px; 
    display: inline-block; 
    padding: 0 15px; 
    text-shadow: 0px 6px 6px #00000029; 
    color: #fff;
    text-decoration: none;
    margin-top: 15px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    font-weight: 700;
}
.whatsapp img {
    margin-right: 10px;
}
.whatsapp:hover {
    background-color: #ffffff99;
    color: rgba(var(--color-green), 1);
    text-shadow: unset;
}
/* end common */

/* start loading_screen */
.loading_screen {
    width: 100%;
    height: 100vh;
    background: rgba(var(--color-dark), 1);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
}
.loading_screen .item {
    border-radius: 500px 200px;
    position: absolute;
    width: 425px;
    height: 600px;
    opacity: 0;
}
.loading_screen .item1 {
    right: -3vw; 
    top: -17vh; 
    background-color: rgba(var(--color-green), 1);
    -webkit-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    transform: rotate(15deg);
    -webkit-animation: fadein .5s ease-in-out .5s alternate forwards;
    -moz-animation: fadein .5s ease-in-out .5s alternate forwards;
    animation: fadein .5s ease-in-out .5s alternate forwards;
}
.loading_screen .item2 {
    left: calc(50% - 250px); 
    bottom: -9vh; 
    background-color: rgba(var(--color-yellow), 1); 
    -webkit-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    transform: rotate(15deg);
    -webkit-animation: fadein .5s ease-in-out 1.5s alternate forwards;
    -moz-animation: fadein .5s ease-in-out 1.5s alternate forwards;
    animation: fadein .5s ease-in-out 1.5s alternate forwards;
}
.loading_screen .item3 {
    left: -3vw; 
    top: -17vh; 
    background-color: rgba(var(--color-blue), 1); 
    -webkit-transform: rotate(-25deg);
    -moz-transform: rotate(-25deg);
    -ms-transform: rotate(-25deg);
    -o-transform: rotate(-25deg);
    transform: rotate(-25deg);
    -webkit-animation: fadein .5s ease-in-out 2.5s alternate forwards;
    -moz-animation: fadein .5s ease-in-out 2.5s alternate forwards;
    animation: fadein .5s ease-in-out 2.5s alternate forwards;
}
.loading_screen .item p {
    font-size: 60px;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
}
.loading_screen .item1 p {
    -webkit-transform: translateY(-50%) rotate(-15deg);
    -moz-transform: translateY(-50%) rotate(-15deg);
    -ms-transform: translateY(-50%) rotate(-15deg);
    -o-transform: translateY(-50%) rotate(-15deg);
    transform: translateY(-50%) rotate(-15deg);
}
.loading_screen .item2 p {
    -webkit-transform: translateY(-50%) rotate(-15deg);
    -moz-transform: translateY(-50%) rotate(-15deg);
    -ms-transform: translateY(-50%) rotate(-15deg);
    -o-transform: translateY(-50%) rotate(-15deg);
    transform: translateY(-50%) rotate(-15deg);
}
.loading_screen .item3 p {
    -webkit-transform: translateY(-50%) rotate(25deg);
    -moz-transform: translateY(-50%) rotate(25deg);
    -ms-transform: translateY(-50%) rotate(25deg);
    -o-transform: translateY(-50%) rotate(25deg);
    transform: translateY(-50%) rotate(25deg);
}
@media(max-width: 1000px) {
    .loading_screen .item {width: 300px; height: 450px;}
    .loading_screen .item1,
    .loading_screen .item3 {top: -10vh; }
    .loading_screen .item2 {left: calc(50% - 200px); }
    .loading_screen .item p {font-size: 40px;}
}
@media(max-width: 778px) {
    .loading_screen .item {width: 300px; height: 450px;}
    .loading_screen .item1,
    .loading_screen .item3 {top: -5vh; }
    .loading_screen .item2 {left: calc(50% - 220px); bottom: -15vh; }
}
@media(max-width: 692px) {
    .loading_screen .item {margin: 15px; width: 175px; height: 250px; position: relative; display: inline-block; left: auto; right: auto; top: auto; bottom: auto; transform: unset;}
    .loading_screen .item p {
        font-size: 30px; 
        -webkit-transform: translateY(-50%) rotate(25deg);
        -moz-transform: translateY(-50%) rotate(0);
        -ms-transform: translateY(-50%) rotate(0);
        -o-transform: translateY(-50%) rotate(0);
        transform: translateY(-50%) rotate(0);
    }
    .loading_screen .logo {margin-bottom: 50px;}
}
@media(max-width: 412px) {
    .loading_screen .item {margin: 10px; width: 170px; height: 240px;}
}
@media(max-width: 382px) {
    .loading_screen .item {margin: 10px; width: 150px;}
}
@media(max-width: 342px) {
    .loading_screen .item {margin: 10px; width: 140px; height: 220px;}
}
@media(max-width: 322px) {
    .loading_screen .item {margin: 10px; width: 130px; height: 220px;}
    .loading_screen .item p {font-size: 25px; }
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
/* end loading_screen */

/* start go_top */
.go_top i {
    font-size: 30px;
    color:  #ffffff90;
    text-align: center;
    position: fixed;
    left: 15px;
    bottom: 10px;
    z-index: 999;
    display: none;
    cursor: pointer;
    opacity: .5;
}
.go_top i:hover {
    opacity: 1;
}
/* end go_top */

/* start ramel-navbar */

.ramel-navbar .ramel-nav li:first-of-type::after {
    content: " | ";
    color: inherit;
    display: inline-block;
    margin: 0 5px;
    color: rgba(var(--color-grey), 1);
}
.ramel-navbar .ramel-nav li a {
    color: rgba(var(--color-grey), 1);
    text-decoration: none;
    font-size: 16px;
}
.ramel-navbar .ramel-nav li a:hover {
    color: #fff;
}
.ramel-navbar .ramel-nav li {
    margin: 0 5px;
}
.ramel-navbar .search {
    font-size: 0;
}
.ramel-navbar .search form {
    display: inline-block;
    border: 1px solid rgba(var(--color-grey), 1);
    border-radius: 50px;
    padding: 0 7px;
    background: #fff;
}
.ramel-navbar .search input {
    background: none;
    border: 0;
    outline: 0;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    width: 125px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.ramel-navbar .search input:focus {
    width: 156px;
}
.ramel-navbar .search i {
    color: rgba(var(--color-grey), 1);
    font-size: 16px;
    position: relative;
    top: 2px;
}
.ramel-navbar .small-screen {display: none;}
.ramel-navbar .menus {height: 450px;}
.ramel-navbar .menus .menu {
    width: 175px;
    min-width: 175px;
    height: 270px;
    border-radius: 500px 200px;
    position: relative;
}
.ramel-navbar .menus .menu.green {background-color: rgba(var(--color-green), 1);}
.ramel-navbar .menus .menu.green .submenu {background-color: rgba(var(--color-green), .5);}
.ramel-navbar .menus .menu.yellow {background-color: rgba(var(--color-yellow), 1);}
.ramel-navbar .menus .menu.yellow .submenu {background-color: rgba(var(--color-yellow), .5);}
.ramel-navbar .menus .menu.blue {background-color: rgba(var(--color-blue), 1);}
.ramel-navbar .menus .menu.blue .submenu {background-color: rgba(var(--color-blue), .5);}
.ramel-navbar .menus .menu a {
    color: #fff;
    text-decoration: none;
}
.ramel-navbar .menus .menu > a {
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    padding: 5px;
    text-align: center;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.ramel-navbar .menus .menu .submenu {
    position: absolute;
    background-color: inherit;
    opacity: 0;
    bottom: -80%;
    left: 0;
    right: 0;
    width: 170px;
    min-width: 175px;
    min-height: 270px;
    border-radius: 500px 200px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    padding: 80px 10px 50px 10px;
    text-align: center;
    z-index: -1;
}
.ramel-navbar .menus .menu:hover .submenu {opacity: 1; z-index: 999;}
.ramel-navbar .menus .menu .submenu a {
    font-size: 12px;
    display: block;
    padding: 5px 0;
}
.ramel-navbar .menus .menu .submenu a:hover {
    text-decoration: underline;
}
.ramel-navbar .toggle-menu {
    background: none;
    outline: 0;
    border: 0;
    position: relative;
    z-index: 998;
}
.ramel-navbar .toggle-menu i {color: rgba(var(--color-grey), 1);}
.ramel-navbar .title {margin: 75px auto;}
@media (min-width: 1000px) {
    .ramel-navbar .lemon-intro {
        position: relative;
        bottom: -50px; right: 250px; opacity: 0;
        -webkit-animation: move 1s ease-in-out 3.5s alternate forwards;
        -moz-animation: move 1s ease-in-out 3.5s alternate forwards;
        animation: move 1s ease-in-out 3.5s alternate forwards;
    }
    @keyframes move { 
        from { bottom: -50px; right: 250px; opacity: 0; } 
        to { bottom: 0; right: 0; opacity: 1; } 
    }
}
@media(max-width: 1199px) {
    .ramel-navbar .menus .col:last-of-type {display: none;}
}
@media(max-width: 991px) {
    .ramel-navbar .row { flex-direction: row-reverse; }
    .ramel-navbar .large-screen {display: none !important;}
    .ramel-navbar .small-screen {display: block;}
    .ramel-navbar .justify-content-start {justify-content: end !important;}
    .ramel-navbar .justify-content-end {justify-content: start !important;}
    .ramel-navbar .menus {
        display: block;
        position: fixed;
        top: 0;
        bottom: 0;
        right: -320px;
        height: 100vh;
        max-height: 100vh;
        background-color: rgba(var(--color-dark), 1);
        z-index: 999;
        width: 300px;
        border-left: 1px solid #ffffff10;
        margin: 0;
        overflow-y: auto;
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
    }
    .ramel-navbar .menus.open {right: 0;}
    .ramel-navbar .menus .close-menus {overflow: hidden; margin-bottom: 10px;}
    .ramel-navbar .menus .close-menus i { padding: 10px; float: left; color: rgba(var(--color-grey), .75); cursor: pointer;}
    .ramel-navbar .menus .col:last-of-type {display: block;}
    .ramel-navbar .menus .menu,
    .ramel-navbar .menus .menu .submenu {
        width: 100% !important;
        min-width: 100% !important;
        height: auto;
        max-height: 100%;
        min-height: 0;
        position: static;
        background-color: rgba(var(--color-dark), 1) !important;
        text-align: right;
        opacity: 1;
    }
    .ramel-navbar .menus .menu > a { -webkit-transform: translateY(0);-moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); position: static; font-size: 16px; background: #ffffff15; display: block; padding: 10px; clear: both; text-align: right; margin-bottom: 1px;}
    .ramel-navbar .menus .menu a .small-screen {float: left;}
    .ramel-navbar .menus .menu .submenu {
        -webkit-transition: unset;
        -moz-transition: unset;
        -o-transition: unset;
        transition: unset;
        border-radius: 0; 
        margin: 0; 
        padding: 10px 10px 20px 10px; 
        display: none;
    }
    .ramel-navbar .menus .menu .submenu a { font-size: 14px; } 
}
@media(max-width: 425px) {
    .ramel-navbar .menus {width: 250px;}
}
@media(max-width: 500px) {
    .ramel-navbar .toggle-menu i {font-size: 21px !important;}
    .ramel-navbar .logo {width: 90px;}
}
.web-menu .ramel-navbar .row { flex-direction: row-reverse; }
.web-menu .ramel-navbar .large-screen {display: none !important;}
.web-menu .ramel-navbar .small-screen {display: block;}
.web-menu .ramel-navbar .justify-content-start {justify-content: end !important;}
.web-menu .ramel-navbar .justify-content-end {justify-content: start !important;}
.web-menu .ramel-navbar .menus {
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    right: -320px;
    height: 100vh;
    max-height: 100vh;
    background-color: rgba(var(--color-dark), 1);
    z-index: 999;
    width: 300px;
    border-left: 1px solid #ffffff10;
    margin: 0;
    overflow-y: auto;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.web-menu .ramel-navbar .menus.open {right: 0;}
.web-menu .ramel-navbar .menus .close-menus {overflow: hidden; margin-bottom: 10px;}
.web-menu .ramel-navbar .menus .close-menus i { padding: 10px; float: left; color: rgba(var(--color-grey), .75); cursor: pointer;}
.web-menu .ramel-navbar .menus .col:last-of-type {display: block;}
.web-menu .ramel-navbar .menus .menu,
.web-menu .ramel-navbar .menus .menu .submenu {
    width: 100% !important;
    min-width: 100% !important;
    height: auto;
    max-height: 100%;
    min-height: 0;
    position: static;
    background-color: rgba(var(--color-dark), 1) !important;
    text-align: right;
    opacity: 1;
}
.web-menu .ramel-navbar .menus .menu > a { -webkit-transform: translateY(0);-moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); position: static; font-size: 16px; background: #ffffff15; display: block; padding: 10px; clear: both; text-align: right; margin-bottom: 1px;}
.web-menu .ramel-navbar .menus .menu a .small-screen {float: left;}
.web-menu .ramel-navbar .menus .menu .submenu {
    -webkit-transition: unset;
    -moz-transition: unset;
    -o-transition: unset;
    transition: unset;
    border-radius: 0; 
    margin: 0; 
    padding: 10px 10px 20px 10px; 
    display: none;
}
.web-menu .ramel-navbar .menus .menu .submenu a { font-size: 14px; } 
/* end ramel-navbar */

/* start our-vision */
.our-vision {
    width: 100%;
    max-width: 863px;
    margin: auto;
    background-color: rgba(var(--color-blue), 1);
    border-radius: 15px;
    padding: 0 75px;
}
.our-vision .vision {
    background-color: #fff;
    width: 177px;
    padding: 34px 20px;
}
.our-vision .vision h2 {text-shadow: 0px 6px 6px #00000029; font-size: 40px; font-weight: 900; color: rgba(var(--color-green), 1); margin: 20px auto;}
.our-vision .vision p {text-shadow: 0px 6px 6px #00000029; font-size: 20px; color: rgba(var(--color-blue), 1); margin: 20px auto;}
.our-vision .astronaut {
    width: 177px;
    height: 236px;
    padding: 7px;
}
.our-vision .astronaut .items {
    position: relative;
    width: 177px;
    height: 236px;
    -webkit-animation: updown 1.5s ease-in-out .5s alternate forwards infinite;
    -moz-animation: updown 1.5s ease-in-out .5s alternate forwards infinite;
    animation: updown 1.5s ease-in-out .5s alternate forwards infinite;
}
.our-vision .astronaut .items .item {
    position: absolute;
}
.our-vision .astronaut .items .head {
    top: 0;
    right: 15px;
    z-index: 3;
    -webkit-animation: rotate 1.5s ease-in-out .5s alternate forwards infinite;
    -moz-animation: rotate 1.5s ease-in-out .5s alternate forwards infinite;
    animation: rotate 1.5s ease-in-out .5s alternate forwards infinite;
}
.our-vision .astronaut .items .body {
    top: 70px;
    right: 0;
    z-index: 2;
}
.our-vision .astronaut .items .tail {
    position: absolute;
    top: 115px;
    right: 115px;
    z-index: 1;
    transform-origin: center right;
    -webkit-animation: rotateTail 1.5s ease-in-out .5s alternate forwards infinite;
    -moz-animation: rotateTail 1.5s ease-in-out .5s alternate forwards infinite;
    animation: rotateTail 1.5s ease-in-out .5s alternate forwards infinite;
}
@keyframes updown { from { top: 0; } to { top: -40px; } }
@keyframes rotate { from { transform: rotate(10deg); } to { transform: rotate(-7deg); } }
@keyframes rotateTail {  from { transform: rotate(10deg); } to { transform: rotate(-7deg); } }
@media(max-width: 554px) {
    .our-vision {padding: 0 50px 0 0;}
    .our-vision .vision {border-radius: 15px 0 0 15px;}
}
@media(max-width: 465px) { .our-vision {padding: 0 10px 0 0;} }
@media(max-width: 425px) { .our-vision .vision {padding: 34px 10px; width: 140px;} }
@media(max-width: 373px) { 
    .our-vision {padding: 0; display: block !important;}
    .our-vision .astronaut {margin-right: 40px;}
    .our-vision .vision {width: 100%; height: auto; border-radius: 0 0 15px 15px; padding: 10px 0;}
    .our-vision .vision h2,
    .our-vision .vision p {margin: 10px auto;}
}
/* end our-vision */

/* start clients */
.clients {
    max-width: 750px;
    padding: 30px 10px 10px 10px;
    margin: 75px auto 0;
    color: rgba(var(--color-grey), 1);
}
.clients::before {
    content: '';
    display: block;
    width: 100%;
    max-width: 800px;
    margin: 0 auto 30px auto;
    border-top: 2px solid rgba(var(--color-grey), .5);
}
.clients h2 {font-size: 40px; margin-bottom: 30px;}
.clients .client {
    display: flex;
    width: 200px;
    height: 130px;
    background-color: #EDEDED;
    border-radius: 200px 500px;
    padding: 15px;
}
.clients .client img {margin: auto;}
/* end clients */

/* start identity */
.identity {
    background: rgba(var(--color-yellow), 1);
    padding-bottom: 40px;
}
.identity .d-flex {
    width: 100%;
    max-width: 900px;
    margin: auto;
}
.identity .description h2 {color: #fff; font-size: 30px; text-shadow: 0px 6px 6px #00000029; font-weight: 900; margin-bottom: 20px;}
.identity .description p {color: #606060; font-size: 22px; text-shadow: 0px 3px 6px #00000029; max-width: 600px;}
@media(max-width: 575px) {
    .identity .description { padding-top: 40px !important; text-align: center; }
    .identity .description p { font-size: 16px; }
}
/* end identity */

/* start header-page */
.title-sticky {
    position: sticky;
    color: #fff;
    padding: 10px;
    width: 100%;
    top: 1px;
    font-size: 16px;
}
.title-sticky.green {background-color: rgba(var(--color-green), 1);}
.title-sticky.yellow {background-color: rgba(var(--color-yellow), 1);}
.title-sticky.blue {background-color: rgba(var(--color-blue), 1);}
.title-sticky.fixed {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 998;
}
.header-page p {
    font-size: 16px;
    color: #fff;
    line-height: 2;
}
.header-page p .more {
    color: rgba(var(--color-green), 1);
    font-weight: 700;
    display: inline-block;
    padding: 0 5px;
}
.header-page p .more:hover {
    color: rgba(var(--color-yellow), 1);
}
/* end header-page */

/* start web-development */
.web-development {
    max-width: 920px;
    margin: 75px auto 0;
}
.web-development .development {
    width: 275px;
    background-color: #E6E6E6;
    padding: 15px;
    border-radius: 10px;
}
.web-development .development .photo {
    margin-bottom: 15px;
    padding-top: 25px;
}
.web-development .development .photo img {
    margin: auto;
    height: 100px;
    width: auto;
}
.web-development .development .description p {
    font-size: 20px;
    color: rgba(var(--color-dark), 1);
    margin: 0;
    padding: 10px;
    height: 65px;
    overflow: hidden;
    line-height: 1.3;
}
/* end web-development */

/* start package-plans */
.package-plans {
    max-width: 1000px;
    padding: 30px 10px 10px 10px;
    margin: auto;
    color: rgba(var(--color-dark), 1);
}
.package-plans::before {
    content: '';
    display: block;
    width: 100%;
    max-width: 550px;
    margin: 0 auto 50px auto;
    border-top: 2px solid rgba(var(--color-grey), .5);
}
.package-plans .d-flex > div {width: 300px;}
.package-plans .package-plan {
    width: 100%;
    background-color: #F7F7F7;
    border-radius: 10px;
    height: 515px;
    position: relative;
}
.package-plans .package-plan .front {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    border-radius: 10px;
}
.package-plans .package-plan .front p {color: #717171; font-size: 25px; font-weight: 700; margin: 0;}
.package-plans .package-plan .front small {color: #9B9B9B; font-size: 17px;}
.package-plans .package-plan .back {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: auto;
    background-color: #F7F7F7;
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
    opacity: 0;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.package-plans .package-plan:hover .back {opacity: 1;}
.package-plans .package-plan .back ul {
    height: calc(100% - 60px);
    max-height: calc(100% - 60px);
    overflow-y: auto;
    display: flex;
    flex-flow: column;
    justify-content: center;
    text-align: right;
    padding-top: 50px;
}
.package-plans .package-plan .back ul li {font-size: 14px; margin: 5px auto; cursor: auto; width: 100%;}
.package-plans .package-plan .back .request {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    padding-bottom: 15px;
}
.package-plans .package-plan .back .request img {
    position: absolute;
    top: -175px;
    left: calc(50% - 15px);
    opacity: 0;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
.package-plans .package-plan .back:hover .request img {
    position: absolute;
    top: -25px;
    left: calc(50% - 15px);
    opacity: 1;
}
.package-plans .package-plan .back .request a {
    display: inline-block;
    width: 100%;
    max-width: 150px;
    background-color: rgba(var(--color-green), 1);
    border-radius: 10px;
    color: #fff;
    height: 38px;
    line-height: 38px;
    font-weight: 700;
    text-decoration: none;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.package-plans .package-plan .back .request:hover a {background-color: rgba(var(--color-blue), 1);}
/* end package-plans */

/* start android-iphone */
.android-iphone p { color: #FFFFFF; font-size: 16px; line-height: 2; max-width: 375px; margin: auto;}
.android-iphone h3 { font-weight: 700; font-size: 22px; color: #FFFFFF; }
.android-iphone .title-android { color: rgba(var(--color-yellow), 1); }
.android-iphone .title-iphone { color: rgba(var(--color-blue), 1); }
/* end android-iphone */

/* start steps */
.steps { max-width: 921px; margin: auto; }
.steps.small-screen {display: none;}
.steps h2 {font-size: 25px; font-weight: 700; color: #FFFFFF;}
.steps .step {
    width: 152px;
    height: 229px;
    border-radius: 500px 200px;
    background-color: #E6E6E6;
    padding: 70px 10px 15px 10px;
    position: relative;
    z-index: 2;
}
.steps .step p {font-size: 20px; color: #606060; margin-top: 20px;}
.steps  .request a {
    display: inline-block;
    width: 100%;
    max-width: 150px;
    background-color: rgba(var(--color-yellow), 1);
    border-radius: 10px;
    color: #fff;
    height: 38px;
    line-height: 38px;
    font-weight: 700;
    text-decoration: none;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.steps .request a:hover {background-color: rgba(var(--color-green), 1);}
/* steps stylish: */
.steps .d-flex {position: relative;}
.steps .d-flex > div:not(:last-of-type) {margin-bottom: 90px;}
.steps .d-flex:nth-of-type(1):before,
.steps .d-flex:nth-of-type(2)::before  {
    content: '';
    position: absolute;
    top: calc(50% - 50px);
    left: 10px;
    right: 10px;
    border-top: 2px solid #E6E6E6;
    z-index: 1;
}
.steps .step { position: static; }
.steps .d-flex:nth-of-type(1) > div:nth-of-type(1) .step::before,
.steps .d-flex:nth-of-type(2) > div:nth-of-type(1) .step::before {
    content: '';
    position: absolute;
    background-image: url("../images/plan-1.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 35px;
    height: 35px;
    right: calc(25% + 17px);
    top: calc(50% - 17px - 50px);
    z-index: 3;
}
.steps .d-flex:nth-of-type(1) > div:nth-of-type(3) .step::before,
.steps .d-flex:nth-of-type(2) > div:nth-of-type(3) .step::before {
    content: '';
    position: absolute;
    background-image: url("../images/plan-1.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 35px;
    height: 35px;
    left: calc(25% + 17px);
    top: calc(50% - 17px - 50px);
    z-index: 3;
}
.steps .d-flex:nth-of-type(1) > div:nth-of-type(3)::before {
    content: '';
    position: absolute;
    border-left: 2px solid #E6E6E6;
    bottom: -12px;
    left: 60px;
    height: 115px;
}
.steps .d-flex:nth-of-type(2) > div:nth-of-type(3)::before {
    content: '';
    position: absolute;
    border-left: 2px solid #E6E6E6;
    bottom: -5px;
    right: 60px;
    height: 125px;
}
.steps .d-flex:nth-of-type(1) > div:nth-of-type(3)::after {
    content: '';
    position: absolute;
    background-image: url("../images/plan-1.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 35px;
    height: 35px;
    left: 42px;
    bottom: 24px;
    z-index: 3;
}
.steps .d-flex:nth-of-type(2) > div:nth-of-type(3)::after {
    content: '';
    position: absolute;
    background-image: url("../images/plan-1.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 35px;
    height: 35px;
    right: 42px;
    bottom: 30px;
    z-index: 3;
}
@media(max-width: 650px) {
    .steps {max-width: 400px;}
    .steps h2 {font-size: 20px;}
    .steps .step {
        width: 120px;
        height: 200px;
        border-radius: 500px 200px;
        padding: 50px 10px 10px 10px;
    }
    .steps .step p {font-size: 16px;}
    .steps.large-screen {display: none;}
    .steps.small-screen {display: block;}
    .steps .d-flex > div:not(:last-of-type) {margin-bottom: 70px;}
    .steps .d-flex:nth-of-type(3)::before  {
        content: '';
        position: absolute;
        top: calc(50% - 40px);
        left: 10px;
        right: 10px;
        border-top: 2px solid #E6E6E6;
        z-index: 1;
    }
    .steps .d-flex:nth-of-type(1) > div:nth-of-type(1) .step::before,
    .steps .d-flex:nth-of-type(2) > div:nth-of-type(1) .step::before,
    .steps .d-flex:nth-of-type(3) > div:nth-of-type(1) .step::before {
        content: '';
        position: absolute;
        background-image: url("../images/plan-1.png");
        background-size: contain;
        background-repeat: no-repeat;
        width: 35px;
        height: 35px;
        right: calc(50% - 17px);
        top: calc(50% - 17px - 50px);
        z-index: 3;
    }
    .steps .d-flex:nth-of-type(3) > div:nth-of-type(1) .step::before {top: calc(50% - 17px - 41px);}
    .steps .d-flex:nth-of-type(1) > div:nth-of-type(1)::before,
    .steps .d-flex:nth-of-type(3) > div:nth-of-type(1)::before {
        content: '';
        position: absolute;
        border-left: 2px solid #E6E6E6;
        bottom: -12px;
        left: 60px;
        height: 90px;
    }
    .steps .d-flex:nth-of-type(2) > div:nth-of-type(1)::before {
        content: '';
        position: absolute;
        border-left: 2px solid #E6E6E6;
        bottom: -5px;
        right: 60px;
        height: 100px;
    }
    .steps .d-flex:nth-of-type(1) > div:nth-of-type(1)::after,
    .steps .d-flex:nth-of-type(3) > div:nth-of-type(1)::after {
        content: '';
        position: absolute;
        background-image: url("../images/plan-1.png");
        background-size: contain;
        background-repeat: no-repeat;
        width: 35px;
        height: 35px;
        left: 42px;
        bottom: 15px;
        z-index: 3;
    }
    .steps .d-flex:nth-of-type(2) > div:nth-of-type(1)::after {
        content: '';
        position: absolute;
        background-image: url("../images/plan-1.png");
        background-size: contain;
        background-repeat: no-repeat;
        width: 35px;
        height: 35px;
        right: 42px;
        bottom: 15px;
        z-index: 3;
    }
}
/* end steps */

/* start achievements */
.achievements {
    max-width: 900px;
    padding-left: 35px;
    padding-right: 35px;
    position: relative;
}
.achievements::before {
    content: '';
    display: block;
    width: 100%;
    max-width: 550px;
    margin: 0 auto 50px auto;
    border-top: 2px solid rgba(var(--color-grey), .5);
}
.achievements h2 {color: #fff; font-size: 30px;}
.achievements .achievement {
    width: 100%;
    padding: 7px;
}
.achievements .slider img {
    width: 100%;
    max-width: 100%;
}
.achievements .slick-arrow {
    background-color: transparent;
    font-size: 0;
    color: transparent;
    outline: 0;
    border: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    top: calc(50% - 21px);
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: .5;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.achievements .slick-arrow:hover {opacity: 1;}
.achievements .slick-prev {left: -40px; background-image: url("../images/slider-arrow-1.png");}
.achievements .slick-next {right: -40px; background-image: url("../images/slider-arrow-2.png");}
/* end achievements */

/* start slick slider library */
.slick-slider,
[lang="ar"] .slick-slider,
[dir="rtl"] .slick-slider,
[lang="en"] .slick-slider,
[dir="ltr"] .slick-slider {
    direction: ltr !important;
}
.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}
.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slick-list:focus {
    outline: none;
}
.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}
.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
.slick-track:before,
.slick-track:after {
    display: table;
    content: '';
}
.slick-track:after {
    clear: both;
}
.slick-loading .slick-track {
    visibility: hidden;
}
.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide {
    float: right;
}
.slick-slide.slick-loading img {
    display: none;
}
.slick-slide.dragging img {
    pointer-events: none;
}
.slick-initialized .slick-slide {
    display: block;
}
.slick-loading .slick-slide {
    visibility: hidden;
}
.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}
.slick-dots {
    list-style: none;
    text-align: center;
    margin: 0;
    padding: 0;
}
.slick-dots li {
    display: inline-block;
    padding: 2px;
}
.slick-dots li button {
    display: inline-block;
    width: 10px !important;
    max-width: 10px !important;
    min-width: 10px !important;
    height: 10px;
    background: rgba(var(--color-mauve, 1));
    font-size: 0;
    border-radius: 100%;
    display: block;
    border: 0;
    padding: 0;
    outline: 0;
}
.slick-dots .slick-active button {
    background: rgba(var(--color-mauve, 1));
}
/* end slick slider library */

/* start topic */
.topic h2 {font-size: 22px; color: #F7F7F7; font-weight: 700; line-height: 1.7;}
.topic h3 {color: rgba(var(--color-yellow), 1); font-size: 24px;}
.topic p { color: #F7F7F7; line-height: 2;}
.topic img {max-width: 100%;}
.topic .whatsapp:hover {background-color: #fff;}
.topic .request a {
    display: inline-block;
    width: 150px;
    background-color: rgba(var(--color-yellow), 1);
    border-radius: 10px;
    color: #fff;
    height: 38px;
    line-height: 38px;
    font-weight: 700;
    text-decoration: none;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.topic .request a:hover {background-color: rgba(var(--color-green), 1);}
.topic .round {border-radius: 200px 500px;}
@media(min-width:992px) { 
    .topic h2 {font-size: 26px;}
    .topic .text-18 {font-size: 18px;} 
    .topic .text-20 {font-size: 20px; max-width: 450px;} 
}
/* end topic */

/* start get-start */
.get-start { background-color: #EAF7FC; }
.get-start h2 { color: #717171; font-size: 25px; font-weight: 700;}
.get-start .whatsapp {background-color: #B7B7B76F;}
@media(min-width:992px) { .get-start h2 {font-size: 40px;} }
/* end get-start */

/* start products */
.products .product {margin-bottom: 25px;}
.products .product .photo {
    width: 300px;
    height: 275px;
    border-radius: 10px;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin: auto;
}
.products .product .photo > div {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-transition: all 7s ease-in-out;
    -moz-transition: all 7s ease-in-out;
    -ms-transition: all 7s ease-in-out;
    -o-transition: all 7s ease-in-out;
    transition: all 7s ease-in-out;
}
.products .product:hover .photo > div {
    transform: scale(1.4) rotate(15deg);
}
.products .product .description {padding: 10px;}
.products .product .description p {font-size: 14px; color: #CCCCCC; margin-bottom: 5px;}
.products .product .description h3 {font-size: 22px; color: #fff;}
.products .product .description .request a {
    display: inline-block;
    width: 150px;
    background-color: rgba(var(--color-yellow), 1);
    border-radius: 10px;
    color: #fff;
    height: 38px;
    line-height: 38px;
    font-weight: 700;
    text-decoration: none;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.products .product:hover .description .request a {background-color: rgba(var(--color-green), 1);}
/* end products */

/* start footer */
.footer {
    max-width: 920px;
    padding: 30px 10px 10px 10px;
    margin: 75px auto 0;
    color: rgba(var(--color-grey), 1);
}
.footer::before {
    content: '';
    display: block;
    width: 100%;
    max-width: 800px;
    margin: 0 auto 30px auto;
    border-top: 2px solid rgba(var(--color-grey), .5);
}
.footer a {color: inherit; text-decoration: none;}
.footer .keep-on-touch h3 {font-size: 20px;}
.footer .keep-on-touch li {padding: 5px;}
.footer .keep-on-touch i {
    display: inline-block;
    width: 42px;
    height: 42px;
    line-height: 42px;
    background-color: rgba(var(--color-grey), .20);
    border-radius: 8px;
    font-size: 20px;
}
.footer .keep-on-touch i:hover {
    background-color: rgba(var(--color-grey), .15);
}
.footer .info h4 {font-size: 20px;}
.footer .info p {font-size: 14px; margin-bottom: 0; }
.footer .links a {font-size: 14px;}
.footer .links a:hover {text-decoration: underline; color: #ddd;}
.active-page{
    color: #606060 !important;
    background: #fff !important;
}
/* end footer */