/*
Template Name       :   Evolo
Template Author     :   Yousef Alaa
Template Version    :
My Email            :   yousefalaa11223344@gmail.com
Date Created        :
Last Update         :
*/


/*****************************************
Table Of Contents:

01. Main Rules
02. Preloader
03. Navigation
04. Header
05. Customers
06. Services
07. Details 1
08. Details 2
09. Details Lightboxes
10. Pricing
11. Request
12. Video
13. Testimonials
14. About
15. Contact
16. Footer
17. Copyright
18. Back To Top Button
19. Extra Pages
20. Media Queries
******************************************/

/*****************************************
Colors:
- Backgrounds - turquoise #00bfd8
- Backgrounds - blue #0079f9
- Backgrounds - light gray #f7fcfd
- Buttons, bullets, icons, links - turquoise #00bfd8
- Cards border, inputs border - light gray #c4d8dc
- Text headers, navbar links - black #393939
- Text body - black #626262
******************************************/

/*
Import Google Fonts
====================
*/
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
@import url('https://fonts.googleapis.com/earlyaccess/droidarabickufi.css');

/*Start Main Rules*/

:root {
    --main-color: #00bfd8;
    --black: #393939;
    --white: #FFF;
    --p-color: #626262
}

body{font-family: 'Raleway','Oswald',serif;}

/* width */
::-webkit-scrollbar {
  width: 0;
}

/* Track */
::-webkit-scrollbar-track {
  background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: transparent;
}

p {color: var(--p-color)}

.main-button {
    all: unset;
    background-color: var(--main-color);
    color: var(--white);
    width: 130px;
    height: 45px;
    border-radius: 25px;
    text-align: center;
    margin-top: 40px;
    border: 3px solid var(--main-color);
    transition: .5s;
    cursor: pointer
}

.main-button:hover {background-color: var(--white);color: var(--main-color)}


/*End Main Rules*/

/* Start Loading Animation */
.load-animation {
    width: 100vw;height: 100vh;position: fixed;top: 0;left: 0;background-color: #FFF;
    display: flex;justify-content: center;align-items: center;z-index: 11
}

.spinner {
  margin: auto;
  width: 70px;
  text-align: center;
}

.spinner > div {
  width: 18px;
  height: 18px;
  background-color: var(--main-color);
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

/* End Loading Animation */

/* Start Nav */
nav {width: 100%;height: 60px;padding-top: 10px;transition: .2s;background: transparent/*#00a0b5*/}
nav .navbar-brand img {height: 100%;width: 130px}
nav .nav-link {color: var(--white);opacity: .5}
nav .nav-link:hover,
nav .active{color: var(--white);opacity: 1}

.navbar-nav .dropdown-menu {background: var(--white);padding: 0;right: 0}
.navbar-nav .dropdown-menu a {color: var(--main-color)}
.navbar-nav .dropdown-menu a:hover {color: var(--white);background: var(--main-color);}

.navbar-nav .dropdown-divider {margin: 0}
.navbar-nav .dropdown-item {padding: 10px 1rem;transition: all .5s}
.navbar-nav .dropdown-item:hover {padding: 10px 1.5rem}

nav .social-media-icons a {
    width: 25px;height: 25px;
    background-color: var(--main-color);
    color: var(--white);
    border-radius: 50%;
    text-align: center;
    opacity: 1;
    display: block;
    margin: 8px 7px 0
}

nav .social-media-icons a:hover {background-color: var(--white);color: var(--main-color);}

nav .navbar-toggler span i {color: var(--main-color)}
nav .navbar-toggler {border-color: var(--main-color)}

.fixed-top {z-index: 5}

.fixed-nav {
    position: fixed;left: 0;
    background: #FFF;
    padding-left: 5%;padding-right: 5%;
    box-shadow: 0 0 10px;
    overflow: visible;
    z-index: 5
}

.fixed-nav .nav-link {color: var(--main-color);opacity: .5}
.fixed-nav .nav-link:hover,
.fixed-nav .active{color: var(--main-color);opacity: 1}

/* End Nav */

/* Start Header */
header {
    background-image: url(../img/header-background.jpg);
    background-size: 100% 100%;
    padding-top: 70px;
}

header .main-button {margin-top: 10px;}

header .words h1:first-of-type {color: #FFF;margin-top: 10%;font-size: 55px;text-shadow: 0 0 10px var(--main-color);}
header .words h1:last-of-type {color: var(--black);font-size: 55px}


/* End Header */


/* Start Trusted */
.trusted {margin: 50px 0}
.trusted h3 {text-align: center}

.trusted .carousel-item img {margin: auto;display: block}

.trusted .carousel {background: #efeded;height: 70px;padding-top: 22px;}

/* End Trusted */

/* Start services */

.services h1 {color: var(--black)}
.services > p {margin-bottom: 50px}

.services article {margin-bottom: 50px;}
.services article div {border: 1px solid #CCC;border-radius: 10px}

.services article img {width: 50%;margin-top: 50px;margin-bottom: 25px}
.services article h3 {color: var(--black);margin-bottom: 20px}

.services article p {margin-bottom: 30px}

/* End services */


/* Start Plans */
.plans{margin-top: 70px}
.plans .content1 {margin-bottom: 70px}
.plans .content1 div h1 {color: var(--black);line-height: 50px;margin-bottom: 30px;}
.plans .content1 div p {line-height: 30px}

.plans .content2 {margin-bottom: 100px}
.plans .content2 div h1 {color: var(--black);line-height: 50px;margin-bottom: 30px;}
.plans .content2 div p i {color: var(--main-color)}

/* End Plans */

/* Start LightBox 1 */
#light-box-1 {
    position: fixed;top: 0;left: 0;
    width: 100%;height: 100%;z-index: 10;
    background-color: rgba(0, 0, 0, 0.7);
    transition: .5s;
    display: none;
}

.light-box-1 {
    width: 76vw;height: 90%;
    position: relative;left: calc(50% - 38vw);top: 5%;
    background-color: #FFF;
    border: 2px solid var(--main-color);
    border-radius: 5px;overflow: hidden
}

.light-box-1 > button {position: absolute;top: -26px;right: 17px;border-radius: 50%;width: 25px;height: 25px;z-index: 2}

.light-box-1 .image {width: 100%;height: 35%}
.light-box-1 .image img {height: 100%;display: block;margin: 30px auto 0}

.light-box-1 .content {width: 100%;height: 65%;overflow: hidden}
.light-box-1 .content section {float: left;width: 50%;height: 100%;}
.light-box-1 .content h1 {color: var(--black);margin-bottom: 0;}
.light-box-1 .content .short-line {display: inline-block;width: 40px;height: 5px;background-color: var(--main-color)}
.light-box-1 .content h3 {margin: 10px 0}
.light-box-1 .content > p {line-height: 22px;margin-bottom: 10px;}
.light-box-1 .content article {margin-top: 70px}
.light-box-1 .content article p {margin-bottom: 2px}
.light-box-1 .content article p i {color: var(--main-color)}
.light-box-1 .content .req-btn {width: 100px;height: 40px;margin-right: 20px;}

.light-box-1 .content .buttons button {margin-top: 20px}
.light-box-1 .content .back-btn {
    background-color: var(--white);
    color: var(--main-color);
    border: 3px solid var(--main-color);
    width: 100px;height: 45px;
    text-align: center;margin-top: 20px;
    transition: .5s;cursor: pointer;
    border-radius: 25px;
}


/* End LightBox 1 */


/* Start LightBox 2 */
#light-box-2 {
    position: fixed;top: 0;left: 0;
    width: 100%;height: 100%;z-index: 10;
    background-color: rgba(0, 0, 0, 0.7);
    transition: .5s;
    display: none;
}

.light-box-2 {
    width: 76vw;height: 90%;overflow: hidden;
    position: relative;left: calc(50% - 38vw);top: 5%;
    background-color: #FFF;
    border: 2px solid var(--main-color);
    border-radius: 5px;
}

.light-box-2 > button {position: absolute;top: -26px;right: 17px;border-radius: 50%;width: 25px;height: 25px;}

.light-box-2 .image {width: 100%;height: 35%}
.light-box-2 .image img {height: 100%;display: block;margin: 30px auto 0}

.light-box-2 .content {width: 100%;height: 65%;overflow: hidden}
.light-box-2 .content section {float: left;width: 50%;height: 100%;}
.light-box-2 .content h1 {color: var(--black);margin-bottom: 0;}
.light-box-2 .content .short-line {display: inline-block;width: 40px;height: 5px;background-color: var(--main-color)}
.light-box-2 .content h3 {margin: 20px 0}
.light-box-2 .content > p {line-height: 22px;margin-bottom: 20px;}
.light-box-2 .content article {margin-top: 70px}
.light-box-2 .content article p {margin-bottom: 5px}
.light-box-2 .content article p i {color: var(--main-color)}
.light-box-2 .content .req-btn-2 {width: 100px;height: 40px;margin-right: 20px;margin-top: 10px}

.light-box-2 .content .back-btn-2 {
    background-color: var(--white);
    color: var(--main-color);
    border: 3px solid var(--main-color);
    width: 100px;height: 45px;
    text-align: center;margin-top: 40px;
    transition: .5s;cursor: pointer;
    border-radius: 25px;
}

/* End LightBox 2 */

/* Start Options */
.options {}
.options > h1 {text-align: center;color: var(--black)}
.options > p {text-align: center;margin-bottom: 50px}

.options .row article {margin-bottom: 50px;}
.options .row article section {border: 1px solid #CCC;border-radius: 10px;padding-bottom: 50px;}
.options .row article h2 {text-align: center;color: var(--black);margin-top: 30px;font-size: 40px;}
.options .row article section > p {text-align: center;margin-top: 20px}
.options .row article h1 {text-align: center;color: var(--main-color);font-size: 45px;}
.options .row article section > span {text-align: center;color: var(--p-color);display: block;}

.options .row article div {margin: 25px auto -15px}
.options .row article div p {margin-bottom: 10px}
.options .row article div p span {margin-right: 7px}
.options .row article div p span i {color: var(--main-color)}
.options .row article button {position: absolute;bottom: -20px;left: calc(50% - 50px);width: 100px;height: 40px;}


/* End Options */

/* Start Request */
.request {background-color: #f9fafc;padding-top: 60px;}
.request div {}
.request div h1 {color: var(--black)}
.request div section:first-of-type p {line-height: 23px}

.request div section:last-of-type {margin-top: 30px;}
.request div section:last-of-type p {margin-bottom: 10px;}
.request div section:last-of-type p i {color: var(--main-color)}
.request div section:last-of-type p strong {color: var(--black)}


.request form {}
.request form input[type="text"],
.request form input[type="email"],
.request form input[type="tel"] {
    all:unset;
    display: block;
    width: 400px;
    height: 15px;
    background: #FFF;
    border: 1px solid #CCC;
    border-radius: 4px;
    padding: 15px;
    color: var(--black);
    margin: 20px 0
}
.request form select {
    display: block;
    width: 432px;
    height: 47px;
    background: #FFF;
    border: 1px solid #CCC;
    border-radius: 4px;
    padding-left: 15px;
    color: var(--p-color);
    margin: 20px 0
    }
.request form select option {}
.request form input[type="checkbox"] {}
.request form label {color: var(--black);font-size: 15px;}
.request form label a {color: var(--main-color)}

.request form .main-button {display: block;height: 40px;width: 120px}

/* End Request */

/* Start Video */
.video {background-color: #f9fafc;padding-top: 100px;}
.video h1 {text-align: center;color: var(--black)}
.video div {width: 66%;margin: auto;position: relative}
.video div img {width: 100%;}
.video div a {
    width: 66px;height: 66px;border-radius: 50%;margin: 0;text-decoration: none;
    position: absolute;right: calc(50% - 33px);top: calc(50% - 33px);line-height: 95px;
}
.video div a i {font-size: 55px;margin-left: 8px}
.video p {color: var(--p-color);text-align: center;margin-top: 30px;}
.video p strong {color: var(--black);}

/* End Video */

/* Start Testimonials */
.testimonials {background-image: url(../img/testimonials-background.jpg);background-size: 100% 100%;overflow: hidden;margin-top: 65px;min-height: 385px;}
.testimonials article {}
.testimonials article > img {width: 40vw;height: 40vw;margin-top: 50px;}

.testimonials article h1 {text-align: center;margin-top: 50px}
.testimonials article section img {margin: auto;display: block;width: 100px;height: 100px;margin-bottom: 30px}
.testimonials section p {text-align: center;line-height: 25px;white-space: nowrap}

.testimonials .carousel-indicators {bottom: -30px}
.testimonials .carousel-indicators li {background-color: var(--main-color)}

/* End Testimonials */

/* Start About Team */
.about-team {margin-top: 50px}
.about-team h1 {text-align: center;color: var(--black)}
.about-team p {text-align: center;margin-bottom: 50px;}
.about-team article {margin: 30px 0}
.about-team article h2 {text-align: center;color: var(--black);margin: 25px;white-space: nowrap}
.about-team article h3 {text-align: center;color: var(--p-color);margin-bottom: 20px;white-space: nowrap}
.about-team article section {border-radius: 50%;margin: auto;width: 14vw;height: 14vw;overflow: hidden;}
.about-team article section img {border-radius: 50%;width: 100%;height: 100%;transition: .5s}
.about-team article section img:hover{transform: scale(1.1, 1.1)}
.about-team article a {
    width: 30px;
    height: 30px;
    display: inline-block;
    background-color: var(--main-color);
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
    color: #FFF;
    text-decoration: none;
    line-height: 30px
}

.about-team article a:first-of-type {margin-left: calc(50% - 36px);}

.about-team article a:hover {opacity: .7}

/* End About Team */

/* Start Contact */
.contact {margin-top: 80px;}
.contact h1 {color: var(--black);text-align: center;}
.contact p {text-align: center;margin-bottom: 15px}
.contact p i {color: var(--main-color)}
.contact section {display: flex;justify-content: center;}
.contact section span {color: var(--main-color);margin-left: 15px;}

.contact .map {margin-top: 50px;overflow: hidden}
.contact .map iframe {width: 30vw;height: 26vw;float: right; margin-right: 40px;}


.contact form {margin-top: 50px;}
.contact form input[type="text"],
.contact form input[type="email"] {
    display: block;
    width: 400px;
    height: 43px;
    padding-left: 8px;
    border: 1px solid #CCC;
    border-radius: 6px;
    margin-bottom: 25px;
}
.contact form textarea {
    display: block;
    width: 400px;
    height: 43px;
    padding-left: 8px;
    border: 1px solid #CCC;
    border-radius: 6px;
    margin-bottom: 25px;
    resize: vertical;
    padding-top: 10px;
}

.contact form label {font-size: 15px;color: var(--p-color);}
.contact form label a {color: var(--main-color);}
.contact form .main-button {display: block;width: 180px;margin-top: 30px;}

/* End Contact */

/* Start Footer */
footer {margin-top: 70px;}
footer article {}
footer article section {margin-bottom: 35px}
footer article section h1 {color: var(--black)}
footer article section p {font-size: 16px;margin-bottom: 10px}
footer article section p i {color: var(--main-color);font-size: 15px;}
footer article section p a {color: var(--main-color)}
footer article section .social {
    background-color: var(--main-color);
    width: 40px;
    height: 40px;
    color: #FFF;
    text-decoration: none;
    display: inline-flex;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: 1
}

footer article section .social:hover {opacity: 0.7}

footer .copy {border-top: 1px solid #CCC;padding: 20px;}
footer .copy p {text-align: center;}
footer .copy p span {color: var(--main-color)}

/* End Footer */

/* Top Button */
#top-btn {
    all: unset;
    position: fixed;
    bottom: -40px;
    right: 20px;
    width: 40px;
    height: 40px;
    text-align: center;
    border-radius: 50%;
    background-color: var(--main-color);
    transition: .5s
}

#top-btn i {color: #FFF;}

#top-btn:hover {opacity: .7}

/* End Button */

/*-------------------Terms & Conditions----------------------*/
header .heading {color: var(--black);text-align: center;font-size: 50px;margin-top: 180px;}
header h6 {margin: 15px 0 0 15px;font-size: 15px;color: #CCC;cursor: pointer;}
header h6 a {color: var(--main-color)}
.conditions article {padding-left: 50px;margin-bottom: 60px;}
.conditions article h2 {font-size: 30px;color: var(--black);margin-bottom: 25px;}
.conditions article p {line-height: 22px;margin-bottom: 11px;}
.conditions article p a,
.conditions article p i {color: var(--main-color)}

/*----------------------Privacy-----------------------*/
.privacy article {margin-bottom: 50px}

.privacy article:first-of-type {overflow: hidden}
.privacy article:first-of-type > h2 {color: var(--black);margin-bottom: 25px;}
.privacy article:first-of-type > p {line-height: 23px;margin-bottom: 15px;}
.privacy article:first-of-type > p a {color: var(--main-color);text-decoration: underline}
.privacy article:first-of-type section {display: inline-block;float: left;width: 50%;margin-top: 45px;}
.privacy article:first-of-type section p {margin-bottom: 10px;line-height: 25px;}
.privacy article:first-of-type section p i {color: var(--main-color)}

.privacy article:nth-of-type(2) h2 {color: var(--black);margin-bottom: 15px;}
.privacy article:nth-of-type(2) p {margin-bottom: 15px;}
.privacy article:nth-of-type(2) ol li {color: var(--p-color);margin-bottom: 9px;line-height: 24px;}

.privacy article:nth-of-type(3) h2,
.privacy article:nth-of-type(4) h2 {color: var(--black);margin-bottom: 15px;}
.privacy article:nth-of-type(3) p,
.privacy article:nth-of-type(4) p {line-height: 24px;}

.privacy article:last-of-type {}
.privacy article:last-of-type section {}
.privacy article:last-of-type section:first-of-type {}
.privacy article:last-of-type section h2 {color: var(--black);margin-bottom: 17px}
.privacy article:last-of-type section p {margin-bottom: 23px;line-height: 23px;}
.privacy article:last-of-type section input[type="text"],
.privacy article:last-of-type section input[type="email"],
.privacy article:last-of-type section select {
    border: 1px solid #CCC;
    display: block;
    height: 40px;
    width: 400px;
    padding-left: 10px;
    border-radius: 5px;
    margin-bottom: 22px;
    background: var(--white);
    color: var(--p-color);
}
.privacy article:last-of-type section label {color: var(--p-color);}
.privacy article:last-of-type section label a {color: var(--p-color);text-decoration: underline}
.privacy article:last-of-type section .main-button {display: block}

/* Responsive Design */

@media (max-width: 1199.98px) {}


@media (max-width: 991.8px) {
    .contact .map iframe {width: 50vw;height: 40vw;float: none;margin-right: 0;margin-left: calc(50% - 25vw);}
    .contact form {margin: 50px auto;padding-left: calc(50% - 218px)}
}


@media (max-width: 767px) {
    .navbar-collapse {
        background: var(--main-color);
        width: 100%;
        padding-left: 42px;
        padding-bottom: 20px;
        position: absolute;left: 0;top: 60px;
        border-top: 1px solid #CCC;
        z-index: 6
    }
    
    .fixed-nav .nav-link {color: #FFF;opacity: .5}
    .fixed-nav .nav-link:hover,
    .fixed-nav .active{color: #FFF;opacity: 1}
    
    header {background-image: none}
    
    .plans .content1 img,
    .plans .content2 img {margin-top: 50px;margin-bottom: 50px}
    
    .testimonials {background: #FFF}
    
    .testimonials article:first-of-type {
        display: none
    }
    
    .about-team article section {width: 30vw;height: 30vw;}
    
}

@media (max-width: 739.98px) {
    #light-box-1,
    #light-box-2 {visibility: hidden}
}

@media (max-width: 575.98px) {
    .contact section {align-items: center;flex-direction: column;}
    .contact section span {margin-bottom: 20px}
    
    .services article {padding: 25px}
    .services article div {padding: 8px}
    
    .options .row article {padding: 25px}
    .options .row article button {bottom: 0}
}
    
@media (max-width: 520px) {
    .video div {width: 85%;}
    
    .testimonials article > img {width: 70vw;height: 60vw;margin-left: calc(50% - 35vw)}
}

@media (max-width: 450px) {
    .contact form {padding-left: calc(50% - 125px)}
    .contact form input[type="text"],
    .contact form input[type="email"],
    .contact form textarea {width: 250px}
    
    .request form input[type="text"],
    .request form input[type="email"],
    .request form input[type="tel"],
    .privacy article:last-of-type section input[type="text"],
    .privacy article:last-of-type section input[type="email"],
    .privacy article:last-of-type section select {width: 250px}
    .request form select {width: 280px;padding-right: 15px}
}