* {margin: 0; padding: 0; box-sizing: border-box;}

/* Header */
header{background: linear-gradient(rgba(40, 58, 90, 0.7), rgba(40, 58, 90, 0.7)), url("../images/4.jpg") center center;
background-size: cover; color: #fff;}
header .nav-menu li {list-style: none;}
header .nav-menu a {text-decoration: none; }
header .hamburger {display: none;}
header .hamburger .bar {display: block; width: 25px; height: 3px; margin: 5px auto; 
    -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background-color: #fff;}
header .nav-menu {display: flex; justify-content: space-between; align-items: center;}
header .nav-menu #language{display: none;}
header .nav-menu .nav-item .nav-link {color: #fff;}
header .nav-menu .nav-item .nav-link:hover::after{width: 100%;}
header .nav-menu .nav-item .nav-link::after { content: ''; background-color: #fff; display: block; width: 0; height: 2px; transition: width .3s;}
/* header .active{} */

@media only screen and (max-width: 1200px) 
{    
    header {overflow: hidden;}
    header .nav-menu {position: fixed; left: -100%; top: 5rem; flex-direction: column; background-color: #fff;
        width: 100%; border-radius: 10px; text-align: center; transition: 0.3s; z-index: 2;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.1); overflow-y: scroll;}
    header .nav-menu.active {left: 0;}
    header .nav-menu .nav-item {margin: 1rem 0;}
    header .nav-menu .nav-item .nav-link {color: black}
    header .nav-menu #language{display: inline-block;}    
    header .hamburger {display: inline-block; cursor: pointer; margin-top: -25px; border: none;}
    header .hamburger.active .bar:nth-child(2) {opacity: 0;}
    .hamburger.active .bar:nth-child(1) {transform: translateY(8px) rotate(45deg);}
    .hamburger.active .bar:nth-child(3) {transform: translateY(-8px) rotate(-45deg);}
    header .language {display: none;}
}
@media only screen and (max-width: 990px) 
{ 
    header .hamburger {display: inline-block; cursor: pointer; margin-top: -10px;}    
}

header .content{margin-top: 120px; margin-left: 8%;}
header .content .text{line-height: 30px;}
header .content .button, .services .services-content .button, .about-us .about-us-content .button, .business .business-content .button
{display: inline-flex; align-items: center; justify-content: center; border: 1px solid #D3B372; border-radius: 50px; padding: 3px;}
header .content button, .services .services-content a, .about-us .about-us-content a, .business .business-content button
{background-color: #D3B372; border: 1px solid #D3B372; border-radius: 50px; color: #fff; padding: 12px 30px; position: relative;}
header .content button:hover {background-color: #D3B372; color: #fff; border: 1px solid #D3B372;}
.services .services-content a:after, .about-us .about-us-content a:after, .business .business-content button:after
{background: #fff; height: 100px; content: ''; left: -75px; opacity: .4; position: absolute; top: -25px; transform: rotate(35deg);
    transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1); width: 50px; z-index: 1;}
header .content button:hover:after, .services .services-content a:hover:after, .about-us .about-us-content a:hover:after, .business .business-content button:hover:after
{left: 120%; transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);}
header .content button:hover{box-shadow: 0 0 10px 0 #D3B372 inset, 0 0 10px 4px #D3B372;}

header .language {margin-top: 50px; margin-left: -8%;}
header .language .lang{border: 1px solid #fff; display: inline-block; width: 2px; height: 150px;}
header .language .buttons{transform: rotate(270deg);}
header .language .buttons .english{border-radius: 0%; border-bottom-left-radius: 35%; border: none; background-color: #223152; color: #fff;}
header .language .buttons .arabic{border-radius: 0%; border-top-right-radius: 35%; border: none; border: none; margin-left: -5px;}
header .language .buttons .arabic:hover {background-color: #223152; color: #fff;}
header .language .buttons .english:hover {background-color: #fff; color: #223152;}

@media only screen and (max-width: 575px) 
{
    header .content {margin-left: 0%;}
    header .hamburger {display: inline-block; cursor: pointer; margin-top: -40px; margin-left: 80%;} 
    header .nav-logo, footer .logo {width: 40%;}  
    .discover .discover-content {margin: 0px 20%;} 
}

@media only screen and (max-width: 320px) 
{
    header .content{margin-top: 100px;}
}

/* Services */
.services, .about-us, .business{margin-top: 150px; overflow: hidden;}
.services .services-content .title, .about-us .about-us-content .title, .business .business-content .title{font-size: 45px; font-weight: bold;}
.services .services-content .text, .about-us .about-us-content .text, .business .business-content .text{line-height: 28px; font-size: 18px;}
.services .services-content .button, .about-us .about-us-content .button, .business .business-content .button { box-shadow: 0 5px 27px rgba(0, 0, 0, 0.1);}

/* Contact */
.contact{margin-top: 150px; background: linear-gradient(rgba(40, 58, 90, 0.75), rgba(40, 58, 90, 0.75)), url("../images/1.jpg") fixed center center;
    background-size: cover; padding: 100px 0;} 
.contact .all {display: flex; justify-content: space-around}
.contact .contact-content{background-color: #fff; border-bottom-left-radius: 22%; border-bottom-right-radius: 8%; border-top-left-radius: 8%; border-top-right-radius: 22%; padding: 50px 0px 40px 0px;}
.contact .contact-content .black-text{font-size: 17px; font-weight: bold;}
.contact .contact-content .gray-text{color: #7F7F7F;}

/* Footer */
footer{margin-top: 150px; background: linear-gradient(rgba(40, 58, 90, 0.9), rgba(40, 58, 90, 0.9)), url("../images/3.jpg") center center;
    background-size: cover; padding: 100px 0 50px 0; color: #fff;}
footer .foot ul li a, footer .foot .social a{color: #fff; text-decoration: none; font-size: 14px;}
footer .foot ul li {line-height: 30px;}
footer .foot ul hr{box-shadow: 0 1px 0px rgba(255, 255, 255, 1)}
.copyright{background-color: #223152; color: #fff; padding: 20px;}