@charset "utf-8";
/* CSS Document */
/* @import url('https://fonts.googleapis.com/css2?family=Tajawal&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Serif&display=swap'); */

/* @font-face {
    font-family: 'sultan';
    src: 'Sultan.woff';
} */

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

p {
    font-size: 1.5vw
}

h1 {
    font-size: 3.3vw
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Sultan', sans-serif;
    direction: rtl;
    text-align: right;
}

.navigation {
    height: 55px;
    background: #295c42;
    position: absolute;
    top: 0;
    z-index: 999;
    width: 100%;

}

.brand {
    position: absolute;
    padding-left: 20px;
    float: left;
    line-height: 55px;
    text-transform: uppercase;
    font-size: 1.4em;
}

.brand a img {
    width: 210px;
    margin-top: 10px;
    text-decoration: none;
}

.nav-container {
    max-width: 1000px;
    margin: 0 auto;
}

nav {
    float: right;
    margin-right: 250px;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    float: right;
    position: relative;
}

nav ul li a,
nav ul li a:visited {
    display: block;
    padding: 0 20px;
    line-height: 55px;
    color: #fff;
    background: #295c42;
    text-decoration: none;
}

nav ul li a {
    background: #295c42;
    color: #FFF;
}

nav ul li a:hover,
nav ul li a:visited:hover,
nav ul li.active {
    background: #054425;
    color: #ffffff;
}

.navbar-dropdown li a {
    background: #3e3f40;
}

nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
    padding-left: 4px;
    content: ' \025BE';
}

nav ul li ul li {
    min-width: 190px;
}

nav ul li ul li a {
    padding: 15px;
    line-height: 20px;
}

.navbar-dropdown {
    position: absolute;
    display: none;
    z-index: 1;
    background: #fff;
    box-shadow: 0 0 35px 0 rgba(0, 0, 0, 0.25);
}

/* Mobile navigation */
.nav-mobile {
    display: none;
    position: absolute;
    top: 22px;
    left: 0;
    background: transparent;
    height: 55px;
    width: 70px;
}

.sticky {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 9999
}

.overlay {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.overlay.liner {
    background: -webkit-linear-gradient(-45deg, #22583d 15%, rgba(0, 0, 0, .7), rgba(80, 68, 37, .7) 110%)
}

.overlay.black {
    background-color: #044223a6;
}

.overlay.gold {
    background-color: #22583d9e;
}

.texe,
.serv {
    width: 80%;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}

.go-dawn {
    position: absolute;
    bottom: 5%;
    left: 50%;
    margin-left: -16px;
    display: block;
    background-size: 14px auto;
    border-radius: 50%;
    z-index: 2;
    -webkit-animation: bounce 2s infinite 2s;
    animation: bounce 2s infinite 2s;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    transform: scale(1);
}

a.go-dawn {
    color: #fff;
    font-size: 1.2vw;
}

.title {
    background: url(../img/title.png)no-repeat;
    background-size: 7vh;
    background-position: right;
}

.title h1 {
    margin-right: 4vw
}

.btn {
    background: #054425;
    color: #fff;
    outline: none;
    border: none;
    font-size: 1.3vw;
    padding: 5px 10px;
    border: 1px solid #71f3ae;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.btn:hover {
    background: #295c42;
    color: #fff;
    border: 1px solid #71f3ae;
}

.wrapper {
    margin-top: -4%
}

.who,
.staff,
.searv,
.finale,
.consult,
.searv {
    height: 100vh;
    position: relative;
    color: #fff;
    background-size: 100% 100% !important;
}

.ourAchevment {
    height: 150vh;
    position: relative;
    color: #fff;
    background-size: 100% 100% !important;
}

.home {
    background: url(../img/home.jpg)no-repeat center top;
    text-align: center;
    height: 108vh;
    color: #fff
}

.home h1.en {
    font-family: 'PT Serif', serif;
    margin-bottom: 10%;
}

.who {
    background: url(../img/who.jpg)no-repeat center;
}

.who img {
    position: absolute;
    left: 0;
    height: 104vh;
    top: -4vh;
    width: 35vw;
}

.staff {
    background: url(../img/staff.jpg)no-repeat center;
    overflow: hidden
}

.staff img {
    position: absolute;
    left: -20%;
    height: 75vh;
    width: 56%;
    bottom: -12%;
    opacity: .2;
}

.info {
    width: 45%;
    position: absolute;
    top: 25%;
    right: 10%;
    transform: translate(-50%, -50%);
}

.info1 {
    width: 80%;
    position: absolute;
    top: 5%;
    right: 10%;
    transform: translate(-50%, -50%);
}

.searv {
    background: url(../img/serv.jpg)no-repeat center;
    overflow: hidden
}

.searv h1 {
    text-align: center;
    margin-top: 4%
}

.serv {
    width: 55vw;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}

.searv .ser {
    background: #fff;
    border-radius: 20px;
    margin: 3% auto;
    overflow: hidden;
    color: #333;
    position: relative;
    height: 38vh;
}

.searv .ser p {
    font-size: 1.3vw
}

.searv .ser .left {
    width: 36vw;
    padding: 20px 10px;
    float: left
}

.finale {
    background: url(../img/litigation.jpg)no-repeat center;
    overflow: hidden
}

.ourAchevment {
    background: url(../img/staff.jpg)no-repeat center;
    overflow: hidden
}

.box-achievment {
    flex: 1 1 24rem;
    margin-right: 10px;
    padding-right: 3.5rem;
    padding-bottom: 10px;
    border-right: 1px solid #aaa;
    position: relative;
}

.box-achievment span {
    font-size: 20px;
    color: #fff;
    border-radius: 5rem;
    padding: 1px 26px;
    background-color: #01140a;
}

.box-achievment p {
    padding-top: 10px;
    font-size: 15px;
    color: #fff;
    line-height: 1.5;
    margin-bottom: 7px;
}

select {
    padding: 5px;
    border-radius: 20px;
    padding-right: 50px;
    font-size: 1.4vw;
    width: 100%;
    font-family: 'Tajawal', sans-serif;
    background: #f1f1f0;
    border: 1px solid #ccc;
    position: relative;
    font-weight: 500;
    outline: none;

}

.form-select {
    /* padding: 5px; */
    /* border-radius: 20px; */
    /* padding-right: 50px; */
    font-size: 25px;
    width: 100%;
    /* font-family: 'Tajawal', sans-serif; */
    /* background: #f1f1f0; */
    /* border: 1px solid #ccc; */
    /* position: relative; */
    font-weight: 600;
    /* outline: none; */
}

select:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f007";
}

.searv .ser img {
    position: absolute;
    right: 0;
    top: 0;
    height: 38vh;
    width: 18vw;
}

.consult {
    background: url(../img/home.jpg)no-repeat
}

.consult .cons {
    background: #fff;
    border-radius: 20px;
    width: 55vw;
    margin: 3% auto;
    overflow: hidden;
    color: #333;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.consult .cons h1 {
    text-align: center
}

.consult span {
    position: absolute
}

.consult span.g-line {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%);
    background: #f79e32;
    height: 3vh;
    width: 10.25vw;
    right: 0;
    top: 3vh;
}

.consult span.b-line {
    clip-path: polygon(0 0, 66% 0, 100% 100%, 24% 100%);
    background: #2B2B2B;
    height: 3vh;
    width: 1.5vw;
    right: 10vw;
    top: 3vh;
}

.consult .cons-title {
    position: relative
}

.consult fieldset {
    border: none
}

.consult .cons form {
    width: 85%;
    margin: 3% auto 0;
    padding: 3% 0;
}

.consult .cons input[type="text"],
.consult .cons input[type="email"] {
    outline: none;
    border: none;
    background: #f1f1f0;
    width: 100%;
    height: 35px;
    font-family: 'Tajawal', sans-serif;
    padding: 5px 10px;
    margin-bottom: 25px;
    font-size: 1.3vw
}

.consult .cons textarea {
    outline: none;
    border: none;
    background: #f1f1f0;
    width: 100%;
    font-family: 'Tajawal', sans-serif;
    padding: 5px 10px;
    font-size: 1.3vw
}

.consult .cons .btn {
    font-family: 'Tajawal', sans-serif;
    margin-top: 20px
}

footer {
    background: #0d0d0d;
    padding: 3%;
    color: #fff;
    position: relative
}

footer>div {
    display: inline-block
}

footer .links {
    width: 35%
}

footer .two-col {
    overflow: hidden
}

footer .two-col li {
    width: 50%;
    float: right;
    padding: 5px 0;
    list-style: none;
    font-size: 1.3vw
}

footer .two-col li a {
    color: #fff;
    text-decoration: none;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    background: #054425;
    border-radius: 15px;
    border: 1px solid #054425;
    padding: 3px;
}

footer .two-col li a:hover {
    text-decoration: none;
    background: #22583d;
    color: #fafafa;
    border-radius: 10px;
    border: 1px solid #054425;
}

footer .contact {
    width: 30%
}

footer .contact li {
    list-style: none;
    font-size: 1vw;
    color: #fff;
    position: relative;
    padding-right: 30px;
    line-height: 1.7
}

footer .contact .fa-map-marker-alt {
    margin-top: 10px
}

footer .contact li i {
    position: absolute;
    right: 0;
    top: 3px;
    font-size: 1.3vw
}

footer .footer-logo {
    width: 30%;
    text-align: center
}

footer .footer-logo img {
    width: 80%
}

.copy>div {
    width: 49%;
    display: inline-block;
    text-align: center;
    font-size: 1vw
}

.copy p {
    font-size: 1.3vw
}

#elevator_item {

    position: absolute;
    right: 6%;
    top: -8%;
    -webkit-transition: opacity .4s ease-in-out;
    -moz-transition: opacity .4s ease-in-out;
    -o-transition: opacity .4s ease-in-out;
    opacity: 1;
    display: none;
    text-align: center;
    color: #fff
}

#elevator_item.off {
    opacity: 0;
    visibility: hidden
}

#elevator {
    display: block;
    width: 50px;
    height: 50px;
    line-height: 60px;
    background-color: #295c42;
    border: 1px solid #054425;
    cursor: pointer;
    color: #fff;
    border-radius: 15px;


}

#elevator:hover {
    background-color: #fafafa;
    color: #295c42;
    border: 1px solid #295c42;
}

a,
a:hover {
    text-decoration: none
}

@media only screen and (max-width: 800px) {
    .nav-mobile {
        display: block;
    }

    nav {
        width: 100%;
        padding: 55px 0 15px;
        margin-right: 0
    }

    nav ul {
        display: none;

    }

    nav ul li {
        float: none;
    }

    nav ul li a {
        padding: 15px;
        line-height: 20px;
        background: #262626;
    }

    .navbar-dropdown {
        position: static;
    }

    .home,
    .who,
    .staff,
    .searv,
    .finale,
    .ourAchevment,
    .consult {
        background-size: cover !important
    }

    .staff img,
    .who img {
        display: none
    }

    .info {
        width: 85%;
    }

    .info1 {
        width: 85%;
    }

    .texe {
        width: 94%;
        right: -45%;
        position: absolute;
        left: 45%
    }

    .info p,
    .texe p {
        text-align: right;
    }

    .consult .cons {
        height: auto;
        width: 95%
    }

    .searv .ser .left {
        width: 95%
    }

    .consult span {
        display: none
    }

    .searv .ser .right,
    .searv .ser img {
        display: none
    }

    footer .links,
    footer .contact,
    .footer-logo {
        width: 100% !important
    }

    .searv .ser {
        margin-bottom: 55px;
        height: auto
    }

    .copy>div {
        width: 100%
    }

    #elevator {
        width: 40px;
        height: 40px;
        line-height: 55px;
    }

    #elevator_item {
        top: -4%;
    }

    .searv .overlay,
    .consult .overlay {
        padding: 5% 0
    }

    .overlay {
        padding: 12% 0
    }

    .home {
        margin-top: -14%;
    }

    .serv {
        width: 90%;
        height: auto
    }

    .ser {
        height: auto
    }

    p {
        font-size: 18px !important
    }

    h1 {
        font-size: 30px
    }

    select {

        font-size: 18px;
    }

    .btn,
    footer .two-col li,
    footer .contact li i {

        font-size: 18px;
    }

    footer .contact li {
        font-size: 16px
    }

    a.go-dawn {
        font-size: 20px;
    }

    .title h1 {
        margin-right: 7vw;
    }

    .consult .cons input[type="text"],
    .consult .cons input,
    [type="email"],
    .consult .cons textarea,
    .copy p {
        font-size: 14px !important
    }
}

@media screen and (min-width:800px) and (max-width:1024px) {

    .consult .cons {
        width: 70%
    }

    .searv .ser {
        width: 80%
    }

    .consult span {
        display: none
    }

    p {
        font-size: 18px !important
    }

    h1 {
        font-size: 30px
    }

    select {

        font-size: 18px;
    }

    .btn,
    footer .two-col li,
    footer .contact li i {

        font-size: 18px;
    }

    footer .contact li {
        font-size: 16px
    }

    a.go-dawn {
        font-size: 20px;
    }

    .consult .cons input[type="text"],
    .consult .cons input,
    [type="email"],
    .consult .cons textarea,
    .copy p {
        font-size: 14px !important
    }

    .serv {
        width: 80%
    }

    .title h1 {
        margin-right: 6vw;
    }

}

@media screen and (min-width:1024px) and (max-width:1300px) {
    .searv .ser {
        width: 58vw;
    }

    .consult span.g-line {

        width: 170px;
    }

    .consult span.b-line {

        right: 164px;
    }

    nav {
        width: 95%;
    }

    .title h1 {
        margin-right: 5vw;
    }
}

@media screen and (min-width:800px) {
    .nav-list {
        display: block !important;

    }

    .consult .cons input[type="text"],
    .consult .cons input[type="email"] {
        height: 5vh
    }
}

@media screen and (max-width:500px) {
    .title h1 {
        margin-right: 14vw;
    }
}

#navbar-toggle {
    position: absolute;

    top: 15px;
    cursor: pointer;
    padding: 10px 35px 16px 0px;
}

#navbar-toggle span,
#navbar-toggle span:before,
#navbar-toggle span:after {
    cursor: pointer;
    border-radius: 1px;
    height: 3px;
    width: 30px;
    background: #ffffff;
    position: absolute;
    display: block;
    content: '';
    transition: all 300ms ease-in-out;
}

#navbar-toggle span:before {
    top: -10px;
}

#navbar-toggle span:after {
    bottom: -10px;
}

#navbar-toggle.active span {
    background-color: transparent;
}

#navbar-toggle.active span:before,
#navbar-toggle.active span:after {
    top: 0;
}

#navbar-toggle.active span:before {
    transform: rotate(45deg);
}

#navbar-toggle.active span:after {
    transform: rotate(-45deg);
}

footer {
    background-image: radial-gradient(circle, #054425 79%, #295c42 100%);
}

.copy {
    background-image: linear-gradient(72deg, #295c42 0%, #054425 35%, #295c42 100%);
    color: #fafafa;
    border-radius: 5px;
}