/*
  [CSS Index]

  ---

  Template Name: Exid - Creative Portfolio Template
  Author:  ex-nihilo
  Version: 1.0
*/

/*
  1. TEMPLATE BACKGROUNDS
    1.1. single IMG BACKGROUND
    1.2. facts parallax IMG BACKGROUND
    1.3. services skills IMG BACKGROUND
    1.4. slick fullscreen slideshow ZOOM/FADE IMG BACKGROUND
         ken burns slideshow IMG BACKGROUND
    1.5. works gallery IMG BACKGROUND
  2. reset
  3. layout
    3.1. upper section
    3.2. lower section
  4. border animation
  5. clearfix
  6. vertical spacer
  7. arrow indicator
  8. dot pattern
  9. copyright
  10. the button
  11. hero
  12. navigation
    12.1. navigation btn
    12.2. navigation icon
    12.3. navigation bg and links
    12.4. navigation effect
    12.5. navigation IMG
  13. section
    13.1. section intro
    13.2. section headings
    13.3. section introduction
    13.4. section title
  14. post block
  15. chart
  16. post all
  17. facts
    17.1. facts counter
    17.2. facts parallax
  18. works
    18.1. works gallery
    18.2. works description
  19. preloader
  20. center container
  21. link effect
  22. go home
  23. contact form
    23.1. contact form placeholders
    23.2. contact email
  24. news
    24.1. news modal
    24.2. news modal video
  25. scroll indicator
  26. social icons
  27. videos
    27.1. YouTube video
	27.2. Vimeo video
  28. ken burns slideshow
  29. typed text
  30. overlay
  31. logo
  32. Magnific Popup v1.1.0 CUSTOM
  33. Slick v1.6.0 CUSTOM
  34. Owl Carousel v2.2.0 CUSTOM
  35. divider
*/

/* 1. TEMPLATE BACKGROUNDS */
/* 1.1. single IMG BACKGROUND */
.bg-img-SINGLE {
    background-image: url(../img/background/SINGLE-bg.jpg);
}

/* 1.2. facts parallax IMG BACKGROUND */
.parallax-facts {
    background-image: url(../img/background/parallax-facts-bg.jpg);
}

/* 1.3. services skills IMG BACKGROUND */
.post-block-services-1 {
    background-image: url(../img/services/services-bg-1.jpg);
}

.post-block-services-2 {
    background-image: url(../img/services/services-bg-2.jpg);
}

/* 1.4. slick fullscreen slideshow ZOOM/FADE IMG BACKGROUND
            ken burns slideshow IMG BACKGROUND */
.bg-img-1,
.kenburns-slide-1 {
    background-image: url(../img/background/hero-bg-1.jpg);
}

.bg-img-2,
.kenburns-slide-2 {
    background-image: url(../img/background/hero-bg-2.jpg);
}

.bg-img-3,
.kenburns-slide-3 {
    background-image: url(../img/background/hero-bg-3.jpg);
}

.bg-img-4,
.kenburns-slide-4 {
    background-image: url(../img/background/hero-bg-4.jpg);
}

/* 1.5. works gallery IMG BACKGROUND */
.works-img-1 {
    background-image: url(../img/works/works-img-1.jpg);
}

.works-img-2 {
    background-image: url(../img/works/works-img-2.jpg);
}

.works-img-3 {
    background-image: url(../img/works/works-img-3.jpg);
}

.works-img-4 {
    background-image: url(../img/works/works-img-4.jpg);
}

.works-img-5 {
    background-image: url(../img/works/works-img-5.jpg);
}

.works-img-6 {
    background-image: url(../img/works/works-img-6.jpg);
}

.works-img-7 {
    background-image: url(../img/works/works-img-7.jpg);
}

.works-img-8 {
    background-image: url(../img/works/works-img-8.jpg);
}

/* 2. reset */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    line-height: 170%;
}

body {
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
    content: "";
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

*:focus {
    outline: none;
}

/* remove dotted outline from links,
    button and input element */
a:focus,
a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
    border: 0;
    outline: 0;
}

/* IE10 scrollbar FIX */
html {
    -ms-overflow-style: scrollbar;
}

/* 3. layout */
body {
    font-family: "Tajawal", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    text-align: center;
    background: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

a {
    color: #c5a773;
    text-decoration: none;
    outline: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

a:hover,
a:visited,
a:active,
a:focus {
    color: #c5a773;
    text-decoration: none;
    outline: none;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

p {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

p {
    font-size: 14px;
    font-weight: 400;

    color: #fff;
    line-height: 2;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

p a,
p a:hover {
    color: #c5a773;
    font-weight: 700;
    text-decoration: none;
    outline: none;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

strong {
    font-weight: bold;
}

::-moz-selection {
    background: #c5a773;
    color: #fff;
}

::selection {
    background: #c5a773;
    color: #fff;
}

.nopadding {
    padding: 0 !important;
    margin: 0 !important;
}

/* 3.1. upper section */
.upper-section {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    left: 0;
    top: 0;
    margin: 0;
}

/* 3.2. lower section */
#about,
#works,
#contact {
    background: #fff;
}

#about p,
#about h3,
#works p,
#works h3,
#contact p,
#contact h3 {
    color: #111;
}

#about h3 {
    margin: -4px auto 0 auto;
}

@media all and (min-width: 1920px) {
    #about h3 {
        margin: -7px auto 0 auto;
    }
}

#contact h3 {
    margin: -4px auto;
}

@media all and (min-width: 1920px) {
    #contact h3 {
        margin: -7px auto;
    }
}

#contact p {
    margin: -7px auto -6px auto;
}

#facts,
#services,
#news {
    position: relative;
    height: auto;
    min-height: inherit;
    overflow: hidden;
    margin-left: 0;
    margin-right: 0;
    background: #14171b;
}

/* 4. border animation */
.border-animation {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

@media only screen and (max-width: 880px) {
    .border-animation {
        display: none;
        visibility: hidden;
    }
}

.border-animation-top,
.border-animation-right,
.border-animation-bottom,
.border-animation-left {
    position: absolute;
    background: rgba(255, 255, 255, 1);
    z-index: 2;
}

.border-animation-top,
.border-animation-bottom {
    width: 0;
    height: 1px;
    -webkit-transition: width 1s ease-in;
    -moz-transition: width 1s ease-in;
    -ms-transition: width 1s ease-in;
    -o-transition: width 1s ease-in;
    transition: width 1s ease-in;
}

.border-animation-right,
.border-animation-left {
    width: 1px;
    height: 0;
    -webkit-transition: height 1s 1s;
    -moz-transition: height 1s 1s;
    -ms-transition: height 1s 1s;
    -o-transition: height 1s 1s;
    transition: height 1s 1s;
}

.border-animation-top {
    left: 150px;
    top: 150px;
}

.border-animation-right {
    right: 150px;
    top: 150px;
}

.border-animation-bottom {
    right: 150px;
    bottom: 150px;
}

.border-animation-left {
    left: 150px;
    bottom: 150px;
}

/* 5. clearfix */
.clearfix::after {
    content: "";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}

/* 6. vertical spacer */
.vertical-spacer {
    position: relative;
    width: 1px;
    height: 80px;
    background: #fff;
    margin: 1px auto;
}

.vertical-spacer.vertical-spacer-dark {
    background: #111;
}

@media all and (min-width: 1920px) {
    .vertical-spacer {
        height: 90px;
    }
}

@media only screen and (max-width: 995px) {
    .vertical-spacer {
        height: 70px;
    }
}

.vertical-spacer.vertical-spacer-facts {
    height: 40px;
}

@media all and (min-width: 1920px) {
    .vertical-spacer.vertical-spacer-facts {
        height: 45px;
    }
}

@media only screen and (max-width: 995px) {
    .vertical-spacer.vertical-spacer-facts {
        height: 35px;
    }
}

/* 7. arrow indicator */
.arrow-indicator-left,
.arrow-indicator-right {
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
}

@media only screen and (max-width: 995px) {
    .arrow-indicator-left,
    .arrow-indicator-right {
        display: none;
        visibility: hidden;
    }
}

.arrow-indicator-left {
    border-right: 20px solid #1f232a;
}

.arrow-indicator-right {
    border-left: 20px solid #1f232a;
}

.arrow-indicator,
.arrow-indicator-reverse {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 40px !important;
    -webkit-pointer-events: none;
    -moz-pointer-events: none;
    pointer-events: none;
    z-index: 99;
}

.arrow-indicator {
    top: 50%;
    left: auto;
    right: -20px;
}

.arrow-indicator-reverse {
    top: 50%;
    left: 0;
    right: auto;
}

/* 8. dot pattern */
.dot-pattern-wrapper,
.dot-pattern-wrapper-reverse {
    position: absolute;
    display: block;
    width: -webkit-calc(33% - 160px);
    width: -moz-calc(33% - 160px);
    width: calc(33% - 160px);
    height: -webkit-calc(100% - 160px);
    height: -moz-calc(100% - 160px);
    height: calc(100% - 160px);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-pointer-events: none;
    -moz-pointer-events: none;
    pointer-events: none;
    z-index: 0;
}

.dot-pattern-wrapper {
    top: 80px;
    left: 0;
    bottom: 80px;
    right: 80px;
    margin-left: 65px;
}

.dot-pattern-wrapper-reverse {
    top: 80px;
    left: auto;
    bottom: 80px;
    right: 0;
    /* margin-right: 79px; */
    margin-right: 76px;
}

.dot-pattern {
    position: relative;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    background-image: radial-gradient(
        rgba(119, 119, 119, 0.75) 5%,
        transparent 0
    );
    background-size: 30px 30px;
}

/* 9. copyright */
.copyright {
    position: relative;
    margin: 0 auto;
    text-align: center;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin: 0 auto;
    color: #111;
    font-weight: 600;
}

.copyright a,
.copyright a:hover {
    color: #c5a773;
    text-decoration: none;
    font-weight: 600;
}

/* 10. the button */
.the-button-wrapper {
    position: relative;
    width: 165px;
    height: auto;
    line-height: 1.5;
    margin: 0 auto;
    padding: 0;
    left: 0;
    text-align: center;
    cursor: pointer;
}

@media all and (min-width: 1920px) {
    .the-button-wrapper {
        width: 205px;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 640px) {
    .the-button-wrapper {
        width: 165px;
        margin: 0 auto;
    }
}

.the-button-wrapper.the-button-wrapper-more {
    width: 165px;
    margin: 0 auto;
}

.the-button-wrapper.the-button-wrapper-home {
    margin: -6px auto 0 auto;
}

@media all and (min-width: 1920px) {
    .the-button-wrapper.the-button-wrapper-home {
        margin: -2px auto 0 auto;
    }
}

.the-button {
    position: relative;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.1em;
    color: #c5a773;
    background: none;
    padding: 10px 40px 0 40px;
    margin-top: 10px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
}

.the-button.the-button-light {
    color: #fff;
}

@media all and (min-width: 1920px) {
    .the-button {
        font-size: 12px;
        letter-spacing: 0.25em;
    }
}

@media only screen and (max-width: 640px) {
    .the-button {
        font-size: 10px;
        letter-spacing: 0.1em;
    }
}

.the-button.the-button-more {
    font-size: 10px;
    letter-spacing: 0.1em;
    margin: 3px auto 12px auto;
}

.the-button:hover::before,
.the-button.the-button-more:hover::before {
    width: 100%;
}

.the-button:hover::after,
.the-button.the-button-more:hover::after {
    width: 100%;
}

.the-button::before {
    content: "";
    position: absolute;
    width: 15px;
    height: 38px;
    top: -2px;
    left: -6px;
    border: 1px solid #c5a773;
    border-right: none;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

.the-button.the-button-light::before {
    border: 1px solid #fff;
    border-right: none;
}

@media all and (min-width: 1920px) {
    .the-button::before {
        width: 20px;
        height: 47px;
        top: -5px;
    }
}

@media only screen and (max-width: 640px) {
    .the-button::before {
        width: 15px;
        height: 38px;
        top: -2px;
    }
}

.the-button.the-button-more::before {
    width: 15px;
    height: 38px;
    top: -2px;
}

.the-button::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 38px;
    top: -2px;
    right: -6px;
    border: 1px solid #c5a773;
    border-left: none;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

.the-button.the-button-light::after {
    border: 1px solid #fff;
    border-left: none;
}

@media all and (min-width: 1920px) {
    .the-button::after {
        width: 20px;
        height: 47px;
        top: -5px;
    }
}

@media only screen and (max-width: 640px) {
    .the-button::after {
        width: 15px;
        height: 38px;
        top: -2px;
    }
}

.the-button.the-button-more::after {
    width: 15px;
    height: 38px;
    top: -2px;
}

.contact-form-submit-wrapper {
    position: relative;
    width: 205px;
    height: auto;
    line-height: 1.5;
    padding: 0;
    left: 0;
    margin: 42px auto -9px auto;
}

@media all and (min-width: 1920px) {
    .contact-form-submit-wrapper {
        margin: 42px auto -5px auto;
    }
}

.the-button-submit {
    width: 165px;
    top: -19px;
    border: none;
}

@media all and (min-width: 1920px) {
    .the-button-submit {
        width: 205px;
        border: none;
    }
}

@media only screen and (max-width: 640px) {
    .the-button-submit {
        width: 165px;
        top: -19px;
    }
}

/* 11. hero */
.hero-fullscreen {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    z-index: 0;
}

.hero-bg,
.hero-bg-show {
    -webkit-transition: -webkit-transform 3s ease;
    -moz-transition: -moz-transform 3s ease-out;
    -ms-transition: -ms-transform 3s ease-out;
    -o-transition: -o-transform 3s ease-out;
    transition: transform 3s ease;
}

.hero-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-transform: scale(1.8);
    -moz-transform: scale(1.8);
    -ms-transform: scale(1.8);
    -o-transform: scale(1.8);
    transform: scale(1.8);
    opacity: 0;
    -moz-opacity: 0;
    -webkit-opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.hero-bg-show {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    -moz-opacity: 1;
    -webkit-opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.hero-fullscreen-FIX {
    width: 100%;
    height: 100%;
}

/* 12. navigation */
/* 12.1. navigation btn */

@media all and (min-width: 1920px) {
}

@media only screen and (max-width: 880px) {
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
}

/* 12.2. navigation icon */

/* 12.3. navigation bg and links */

@media only screen and (max-width: 880px) {
}

@media only screen and (max-width: 640px) {
}

@media only screen and (max-width: 995px) {
}

/* 12.4. navigation effect */

/* 12.5. navigation IMG */

/* 13. section */
.sections {
    position: relative;
    z-index: 5;
}

@media only screen and (max-width: 1200px) {
    .sections {
        width: 100% !important;
    }
}

@media only screen and (max-width: 640px) {
    .sections {
        padding: 0 10px;
    }
}

/* 13.1. section intro */
.section-intro p,
#contact .section-intro p {
    font-family: "Tajawal", sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    text-transform: none;
    text-align: center;

    line-height: 1.5;
    margin: -7px auto 0 auto;
}

@media only screen and (max-width: 995px) {
    .section-intro p,
    #contact .section-intro p {
        font-size: 20px;
    }
}

@media only screen and (max-width: 880px) {
    .section-intro p,
    #contact .section-intro p {
        font-size: 18px;
        margin: -5px auto 0 auto;
    }
}

.section-intro p a,
.section-intro p a:hover,
#contact .section-intro p a,
#contact .section-intro p a:hover {
    text-decoration: none;
}

h2.section-subtitle {
    font-family: "Tajawal", sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.05em;
    color: #c5a773;
    margin: -3px auto;
}

/* 13.2. section headings */
h1.home-page-title {
    position: relative;
    font-family: "Tajawal", Arial, sans-serif;
    font-style: normal;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    color: #fff;
    width: 100%;
    line-height: 100%;
    z-index: 1;
}

h1.home-page-title {
    font-size: 125px;
    margin: 0 auto -16px auto;
}

@media all and (min-width: 1920px) {
    h1.home-page-title {
        font-size: 145px;
        margin: 0 auto -19px auto;
    }
}

@media only screen and (max-width: 1200px) {
    h1.home-page-title {
        font-size: 105px;
        margin: 0 auto -13px auto;
    }
}

@media only screen and (max-width: 995px) {
    h1.home-page-title {
        font-size: 85px;
        margin: 0 auto -10px auto;
    }
}

@media only screen and (max-width: 880px) {
    h1.home-page-title {
        font-size: 75px;
        margin: 0 auto -9px auto;
    }
}

@media only screen and (max-width: 640px) {
    h1.home-page-title {
        font-size: 65px;
        margin: 0 auto -7px auto;
    }
}

h3 {
    font-family: "Tajawal", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: -0.02em;
    margin: 0 auto;
    padding: 0;
    line-height: 1.25;
    color: #fff;
}

@media all and (min-width: 1920px) {
    h3 {
        line-height: 1.5;
    }
}

/* 13.3. section introduction */
.introduction.introduction-on,
.introduction.introduction-off {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

.introduction.introduction-on {
    opacity: 1;
    -moz-opacity: 1;
    -webkit-opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    visibility: visible;
}

.introduction.introduction-off {
    opacity: 0;
    -moz-opacity: 0;
    -webkit-opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transform: scale(0.75);
    -moz-transform: scale(0.75);
    -ms-transform: scale(0.75);
    -o-transform: scale(0.75);
    transform: scale(0.75);
    visibility: hidden;
}

/* 13.4. section title */
.section-title h2 {
    font-family: "Tajawal", sans-serif;
    font-weight: 800;
    font-size: 45px;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    text-decoration: none;
    color: #c5a773;
    margin: -16px auto;
    padding: 0;
}

@media only screen and (max-width: 880px) {
    .section-title h2 {
        font-size: 40px;
        margin: -15px auto;
    }
}

@media only screen and (max-width: 640px) {
    .section-title h2 {
        font-size: 35px;
        margin: -13px auto;
    }
}

.section-title-line > span {
    position: relative;
    display: inline-block;
    line-height: 1px;
    padding: 0 80px;
}

@media all and (min-width: 1920px) {
    .section-title-line > span {
        padding: 0 90px;
    }
}

@media only screen and (max-width: 995px) {
    .section-title-line > span {
        padding: 0 47px;
    }
}

.section-title-line > span::before,
.section-title-line > span::after {
    content: "";
    position: absolute;
    display: block;
    width: 40px;
    height: 1px;
    top: 0;
    background-color: #c5a773;
}

@media all and (min-width: 1920px) {
    .section-title-line > span::before,
    .section-title-line > span::after {
        width: 45px;
    }
}

@media only screen and (max-width: 995px) {
    .section-title-line > span::before,
    .section-title-line > span::after {
        width: 35px;
    }
}

.section-title-line > span::before {
    left: 0;
}

.section-title-line > span::after {
    right: 0;
}

/* 14. post block */
.post-block-wrapper {
    position: relative;
    min-height: 550px;
}

@media all and (min-width: 1920px) {
    .post-block-wrapper {
        min-height: 600px;
    }
}

@media only screen and (max-width: 995px) {
    .post-block-wrapper {
        min-height: 500px;
    }
}

.post-block {
    position: absolute;
    height: auto;
    min-height: 550px;
    top: 0;
    bottom: 0;
    padding: 0 100px;
    z-index: 10;
}

@media all and (min-width: 1920px) {
    .post-block {
        min-height: 600px;
        padding: 0 150px;
    }
}

@media only screen and (max-width: 995px) {
    .post-block {
        min-height: 500px;
        padding: 0 15px;
    }
}

@media only screen and (max-width: 880px) {
    .post-block {
        padding: 0 10px;
    }
}

.post-block.post-block-bg-dark {
    background: #1f232a;
}

.post-block-all {
    position: relative;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: 10;
}

/* 15. chart */
.chart-wrapper {
    margin: 60px auto;
}

.chart-about,
.chart-services {
    position: relative;
    display: inline-block;
    width: 110px;
    height: 110px;
    margin: 0 auto;
    text-align: center;
}

.chart-about canvas,
.chart-services canvas {
    position: absolute;
    top: 0;
    left: 0;
}

.percent-about,
.percent-services {
    display: inline-block;
    line-height: 110px;
    color: #111;
    z-index: 2;
}

.percent-services {
    color: #fff;
}

.percent-about::after,
.percent-services::after {
    content: "%";
    margin-left: 0.1em;
    font-size: 0.8em;
    color: #111;
}

.percent-services::after {
    color: #fff;
}

/* 16. post all */
.post-all-heading {
    font-family: "Tajawal", sans-serif;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: -0.02em;
    color: #c5a773;
    margin: -6px auto -7px auto;
    padding: 0;
    line-height: 1.25;
}

@media all and (min-width: 1920px) {
    .post-all-heading {
        line-height: 1.5;
        margin: -10px auto -11px auto;
    }
}

@media only screen and (max-width: 880px) {
    .post-all-heading-services {
        padding-top: 8px;
    }
}

.post-all p {
    text-align: center;
    color: #fff;
}

.post-all {
    margin-top: 5px;
}

/* 17. facts */
/* 17.1. facts counter */
.facts-wrapper {
    position: relative;
    margin: -15px auto 0 auto;
}

.facts-number {
    position: relative;
    font-family: "Tajawal", sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    color: #fff;
    bottom: -9px;
    letter-spacing: -0.02em;
}

@media only screen and (max-width: 995px) {
    .facts-number {
        bottom: -8px;
    }
}

.facts-title {
    font-family: "Tajawal", sans-serif;
    font-size: 13px;
    color: #c5a773;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    margin: 0 auto;
    position: relative;
    top: -5px;
}

@media only screen and (max-width: 880px) {
    .facts-description.facts-description-top {
        margin-bottom: 30px;
    }
}

/* 17.2. facts parallax */
.parallax {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 148px 0 139px 0;
}

@media only screen and (max-width: 995px) {
    .parallax {
        padding: 99px 0 89px 0;
    }
}

.parallax-facts {
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    border: none;
    z-index: 1;
}

/* 18. works */
/* 18.1. works gallery */
#works-wrapper {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: -10px;
    margin-bottom: -10px;
}

.works-grid {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.works-grid .works-item {
    width: 50%;
    height: 33vw;
    border: 10px solid #fff;
}

@media all and (min-width: 1920px) {
    .works-grid .works-item {
        width: 25%;
        height: 25vw;
    }
}

@media only screen and (max-width: 880px) {
    .works-grid .works-item {
        width: 50%;
        height: 50vw;
    }
}

@media only screen and (max-width: 480px) {
    .works-grid .works-item {
        width: 100%;
        height: 100vw;
    }
}

.works-img-all {
    position: relative;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.works-end-item {
    position: relative;
    width: 100%;
    height: 20px;
    background: #fff;
}

/* 18.2. works description */
.works-description {
    position: absolute;
    padding: 0 15px;
    margin-bottom: -4px;
    bottom: -20px;
    left: 0;
    right: 0;
    opacity: 0;
    -moz-opacity: 0;
    -webkit-opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -ms-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    transition: all 0.8s ease;
    text-align: center;
    -webkit-pointer-events: none;
    -moz-pointer-events: none;
    pointer-events: none;
    z-index: 10;
}

.works-description h3 {
    font-family: "Tajawal", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 auto -5px auto;
    padding: 0;
    text-align: center;
    letter-spacing: -0.02em;
    color: #c5a773;
}

@media all and (min-width: 1920px) {
    .works-description h3 {
        margin: 0 auto -7px auto;
    }
}

.works-description-second {
    color: #fff;
    margin: -3px auto -2px auto;
}

.works-item-size:hover .works-description,
.works-item-size:focus .works-description {
    bottom: 5px;
    opacity: 1;
    -moz-opacity: 1;
    -webkit-opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.works-item-size {
    position: relative;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.works-item-single {
    position: relative;
    margin-bottom: 0;
    float: left;
}

.works-item-single::after {
    content: "";
    display: block;
    clear: both;
}

.works-item-single:hover .works-item-bg {
    opacity: 1;
    -moz-opacity: 1;
    -webkit-opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    cursor: pointer;
}

.works-item-bg {
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    -moz-opacity: 0;
    -webkit-opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    background: rgba(20, 23, 27, 0.85);
}

.works-item .works-img-all {
    -webkit-transition: all 0.8s ease-out;
    -moz-transition: all 0.8s ease-out;
    -ms-transition: all 0.8s ease-out;
    -o-transition: all 0.8s ease-out;
    transition: all 0.8s ease-out;
}

.works-item:hover .works-img-all {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

/* 19. preloader */
.preloader-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #090b0c;
    z-index: 999999;
}

#preloader {
    position: fixed;
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #090b0c;
    z-index: 999999;
}

#preloader-status {
    display: table-cell;
    vertical-align: middle;
}

.preloader-position {
    position: relative;
    margin: 0 auto;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

.loader {
    position: relative;
    width: 45px;
    height: 45px;
    left: 50%;
    top: 50%;
    margin-left: -22px;
    margin-top: 2px;
    -webkit-animation: rotate 1s infinite linear;
    -moz-animation: rotate 1s infinite linear;
    -ms-animation: rotate 1s infinite linear;
    -o-animation: rotate 1s infinite linear;
    animation: rotate 1s infinite linear;
    border: 3px solid rgba(255, 255, 255, 0.15);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

.loader span {
    position: absolute;
    width: 45px;
    height: 45px;
    top: -3px;
    left: -3px;
    border: 3px solid transparent;
    border-top: 3px solid rgba(255, 255, 255, 0.75);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* 20. center container */
.center-container {
    position: relative;
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;
}

.center-block {
    display: table-cell;
    vertical-align: middle;
}

/* 21. link effect */

/* 22. go home */

@media only screen and (max-width: 880px) {
}

@media only screen and (max-width: 880px) {
}

/* 23. contact form */
#contact-form {
    width: 100%;
    margin: -20px auto 0 auto;
    padding: 0;
    text-align: center;
}

form {
    margin: 0;
    padding: 0;
}

#form input {
    position: relative;
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #111;
    border-left: none;
    border-right: none;
    border-top: none;
    padding: 5px 5px;
    background: none;
    margin: 10px 0 10px 0;
    font-family: "Tajawal", sans-serif;
    font-size: 13px;
    letter-spacing: 0.05em;
    line-height: 1.5;
    font-style: normal;
    font-weight: normal;
    text-align: center;
    color: #111;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

textarea {
    position: relative;
    width: 100%;
    height: 100px;
    border-bottom: 1px solid #111;
    border-left: none;
    border-right: none;
    border-top: none;
    padding: 5px 5px;
    background: none;
    margin: 5px;
    font-family: "Tajawal", sans-serif;
    font-size: 13px;
    letter-spacing: 0.05em;
    line-height: 1.5;
    font-style: normal;
    font-weight: normal;
    text-align: center;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

#form textarea {
    color: #111;
    margin: 10px 0 10px 0;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

#form input:hover,
#form textarea:hover {
    border-color: rgba(255, 38, 74, 0.5);
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

#form input:focus,
#form textarea:focus {
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

.success {
    font-family: "Tajawal", sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-align: center;
    color: #111;
    margin: 0 auto;
    padding: 19px 0 0 0;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#form .error {
    position: absolute;
    display: block;
    font-size: 9px;
    text-transform: uppercase;
    color: #c5a773;
    margin: 0;
    padding: 0;
    letter-spacing: 0.15em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 200px !important;
    font-weight: 700;
}

.make-space {
    margin-left: 15px;
    margin-right: 15px;
}

/* 23.1. contact form placeholders */
::-webkit-input-placeholder {
    font-size: 12px;
    color: #111;
}
:-ms-input-placeholder {
    font-size: 12px;
    color: #111;
}
::-moz-placeholder {
    font-size: 12px;
    color: #111;
}
input:-moz-placeholder {
    font-size: 12px;
    color: #111;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-ms-input-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}

textarea:focus::-webkit-input-placeholder {
    color: transparent;
}
textarea:focus:-ms-input-placeholder {
    color: transparent;
}
textarea:focus::-moz-placeholder {
    color: transparent;
}
textarea:focus:-moz-placeholder {
    color: transparent;
}

/* 23.2. contact email */
.post-email-title {
    position: relative;
    top: 0;
    font-family: "Tajawal", sans-serif;
    font-size: 25px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: -0.02em;
    color: #fff;
    line-height: 1;
    margin: -8px auto 0 auto;
    z-index: 10;
}

@media all and (min-width: 1920px) {
    .post-email-title {
        font-size: 30px;
        margin: -10px auto 0 auto;
    }
}

@media only screen and (max-width: 640px) {
    .post-email-title {
        font-size: 20px;
    }
}

@media only screen and (max-width: 480px) {
    .post-email-title {
        font-size: 18px;
        margin: -5px auto 0 auto;
    }
}

.post-email-title a,
.post-email-title a:hover {
    line-height: 1.5;
    color: #c5a773;
    text-decoration: none;
}

/* 24. news */
#news-carousel {
    z-index: 10;
}

#news .section-news-item {
    opacity: 0.25;
    -moz-opacity: 0.25;
    -webkit-opacity: 0.25;
    filter: alpha(opacity=25);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
    -webkit-transform: scale3d(0.8, 0.8, 1);
    -moz-transform: scale3d(0.8, 0.8, 1);
    -ms-transform: scale3d(0.8, 0.8, 1);
    -o-transform: scale3d(0.8, 0.8, 1);
    transform: scale3d(0.8, 0.8, 1);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#news .owl-item.active.center .section-news-item {
    opacity: 1;
    -moz-opacity: 1;
    -webkit-opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-transform: scale3d(1, 1, 1);
    -moz-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    -o-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}

.owl-carousel .owl-item img {
    margin: 0;
    padding: 0;
}

.section-news-item .section-news-content img {
    max-width: 100%;
    -webkit-transition: all 0.8s ease-out;
    -moz-transition: all 0.8s ease-out;
    -ms-transition: all 0.8s ease-out;
    -o-transition: all 0.8s ease-out;
    transition: all 0.8s ease-out;
}

.section-news-item:hover .section-news-content img {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

.section-news-content {
    position: relative;
    overflow: hidden;
    margin: 0;
    width: 100%;
    min-width: 250px;
    height: auto;
    text-align: left;
    -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}

.section-news-content img {
    max-width: 100%;
    vertical-align: top;
    margin: 0;
    padding: 0;
    opacity: 1;
    -moz-opacity: 1;
    -webkit-opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.section-news-content .date,
.modal-content .date {
    position: relative;
    width: 100%;
    background: none;
    text-align: center;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #fff;
    margin: -20px auto -2px auto;
    padding: 75px 0 0 0;
}

.modal-content .date {
    color: #111;
    font-weight: 600;
}

.section-news-content figcaption {
    position: relative;
    width: 100%;
    background: #1f232a;
    padding: 0 90px;
}

@media all and (min-width: 1920px) {
    .section-news-content figcaption {
        padding: 0 100px;
    }
}

@media only screen and (max-width: 995px) {
    .section-news-content figcaption {
        padding: 0 45px;
    }
}

.section-news-content h3,
.modal-content h3 {
    font-family: "Tajawal", sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.05em;
    color: #fff;
    margin: -2px auto -1px auto;
}

@media all and (min-width: 1920px) {
    .section-news-content h3,
    .modal-content h3 {
        margin: -3px auto;
    }
}

.modal-content h3 {
    color: #111;
}

.section-news-content p {
    color: #fff;
    text-align: center;
    margin: -3px auto;
    padding: 0;
}

.section-news-txt a,
.section-news-txt a:hover {
    text-decoration: none;
    font-weight: 600;
}

/* 24.1. news modal */
.news-modal .modal-content {
    min-height: 100%;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin: 0;
    padding: 0;
    border: 0;
}

.news-modal .modal-content img {
    margin: 1px 0;
}

.modal-body p {
    position: relative;
    bottom: 1px;
    margin: -7px auto 0 auto;
    color: #111;
}

@media only screen and (max-width: 995px) {
    .modal-body p {
        margin: -5px auto 0 auto;
    }
}

/* 24.2. news modal video */
.news-modal-video-container {
    position: relative;
    height: 0;
    padding-top: 30px;
    padding-bottom: 56.25%;
    margin: 1px 0;
    overflow: hidden;
    border: none;
}

.news-modal-video-container iframe,
.news-modal-video-container object,
.news-modal-video-container embed {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: none;
}

/* 25. scroll indicator */
.scroll-indicator-wrapper {
    position: absolute;
    width: 1px !important;
    height: 100%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    opacity: 1;
    -moz-opacity: 1;
    -webkit-opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    visibility: visible;
    -webkit-transition: all 0.7s;
    -moz-transition: all 0.7s;
    -ms-transition: all 0.7s;
    -o-transition: all 0.7s;
    transition: all 0.7s;
}

.scroll-indicator-wrapper.scroll-indicator-wrapper-position-secondary {
    opacity: 0;
    -moz-opacity: 0;
    -webkit-opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    visibility: hidden;
    -webkit-transform: translateY(200px);
    -moz-transform: translateY(200px);
    -ms-transform: translateY(200px);
    -o-transform: translateY(200px);
    transform: translateY(200px);
    -webkit-transition: all 0.7s;
    -moz-transition: all 0.7s;
    -ms-transition: all 0.7s;
    -o-transition: all 0.7s;
    transition: all 0.7s;
}

.scroll-indicator {
    position: absolute;
    bottom: 50px;
    left: 50%;
    -webkit-transform: translate(-50%, 50%);
    -moz-transform: translate(-50%, 50%);
    -ms-transform: translate(-50%, 50%);
    transform: translate(-50%, 50%);
    z-index: 1005;
}

@media all and (min-width: 1920px) {
    .scroll-indicator {
        bottom: 60px;
    }
}

.scroll-line {
    display: block;
    width: 1px;
    height: 50px;
    background: none;
}

@media all and (min-width: 1920px) {
    .scroll-line {
        height: 60px;
    }
}

.scroll-line::before {
    content: "";
    display: block;
    width: 1px;
    height: 50%;
    top: 0;
    background-color: #fff;
    -webkit-animation: scroll-down 2s ease-in-out infinite;
    -ms-animation: scroll-down 2s ease-in-out infinite;
    animation: scroll-down 2s ease-in-out infinite;
}

@-webkit-keyframes scroll-down {
    0% {
        height: 0;
    }
    50% {
        height: 100%;
    }
    70% {
        height: 100%;
        transform: scaleY(0.5);
        transform-origin: bottom;
    }
    100% {
        height: 100%;
        transform: scaleY(0);
        transform-origin: bottom;
    }
}
@-ms-keyframes scroll-down {
    0% {
        height: 0;
    }
    50% {
        height: 100%;
    }
    70% {
        height: 100%;
        transform: scaleY(0.5);
        transform-origin: bottom;
    }
    100% {
        height: 100%;
        transform: scaleY(0);
        transform-origin: bottom;
    }
}
@keyframes scroll-down {
    0% {
        height: 0;
    }
    50% {
        height: 100%;
    }
    70% {
        height: 100%;
        transform: scaleY(0.5);
        transform-origin: bottom;
    }
    100% {
        height: 100%;
        transform: scaleY(0);
        transform-origin: bottom;
    }
}

/* 26. social icons */
.social-icons {
    position: relative;
    font-family: "Tajawal", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    font-style: normal;
    text-transform: uppercase;
    color: #111;
    background: none;
    border: none;
    width: auto;
    height: auto;
    line-height: 2;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    transition: all 1.5s ease;
    margin: -3px auto -4px auto;
}

.social-icons a,
.social-icons a:hover {
    outline: none;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

.social-icons li a:hover,
.social-icons li a:visited,
.social-icons li a:active,
.social-icons li a:focus {
    font-family: "Tajawal", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    font-style: normal;
    text-transform: uppercase;
}

.social-icons li {
    display: inline;
    padding: 0;
}

.social-icons li span {
    color: #111;
    padding: 0 10px;
}

/* 27. videos */
/* 27.1. YouTube video */
.YT-bg {
    display: none;
}

@media only screen and (max-width: 995px) {
    .YT-bg {
        position: relative;
        height: 100%;
        background-image: url(../img/background/YT-bg.jpg);
        background-repeat: no-repeat;
        background-position: center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -ms-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        /* uncomment the following to show an image for mobile devices */
        /* display: block; */
    }
}

#videoContainment {
    position: absolute;
    display: block;
    width: 100% !important;
    height: 100% !important;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: #090b0c;
    z-index: 0;
}

/* 27.2. Vimeo video */
.vimeo-bg {
    display: none;
}

@media only screen and (max-width: 995px) {
    .vimeo-bg {
        position: relative;
        height: 100%;
        background-image: url(../img/background/vimeo-bg.jpg);
        background-repeat: no-repeat;
        background-position: center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -ms-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        /* uncomment the following to show an image for mobile devices */
        /* display: block; */
    }

    #vimeo-videoContainment {
        display: none;
    }
}

#vimeo-videoContainment {
    position: absolute;
    display: block;
    width: 100% !important;
    height: 100% !important;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: #090b0c;
    z-index: 0;
}

#vimeo-videoContainment iframe,
#vimeo-videoContainment object,
#vimeo-videoContainment embed {
    border: none;
}

/* 28. ken burns slideshow */
.kenburns-slide-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    z-index: 0;
}

.kenburns-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    -moz-opacity: 0;
    -webkit-opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-animation: KenBurnsSlideShow 24s linear infinite 0s;
    -moz-animation: KenBurnsSlideShow 24s linear infinite 0s;
    -ms-animation: KenBurnsSlideShow 24s linear infinite 0s;
    -o-animation: KenBurnsSlideShow 24s linear infinite 0s;
    animation: KenBurnsSlideShow 24s linear infinite 0s;
}

.kenburns-slide-1,
.kenburns-slide-2,
.kenburns-slide-3,
.kenburns-slide-4 {
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.kenburns-slide-1 {
    opacity: 1;
    -moz-opacity: 1;
    -webkit-opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.kenburns-slide-2 {
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -ms-animation-delay: 6s;
    -o-animation-delay: 6s;
    animation-delay: 6s;
}

.kenburns-slide-3 {
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -ms-animation-delay: 12s;
    -o-animation-delay: 12s;
    animation-delay: 12s;
}

.kenburns-slide-4 {
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -ms-animation-delay: 18s;
    -o-animation-delay: 18s;
    animation-delay: 18s;
}

@-webkit-keyframes KenBurnsSlideShow {
    0% {
        opacity: 0;
        -webkit-transform: scale(1);
    }
    5% {
        opacity: 1;
    }
    25% {
        opacity: 1;
    }
    30% {
        opacity: 0;
        -webkit-transform: scale(1.1);
    }
    100% {
        opacity: 0;
        -webkit-transformm: scale(1);
    }
}

@-moz-keyframes KenBurnsSlideShow {
    0% {
        opacity: 0;
        -moz-transform: scale(1);
    }
    5% {
        opacity: 1;
    }
    25% {
        opacity: 1;
    }
    30% {
        opacity: 0;
        -moz-transform: scale(1.1);
    }
    100% {
        opacity: 0;
        -moz-transform: scale(1);
    }
}

@-o-keyframes KenBurnsSlideShow {
    0% {
        opacity: 0;
        -o-transform: scale(1);
    }
    5% {
        opacity: 1;
    }
    25% {
        opacity: 1;
    }
    30% {
        opacity: 0;
        -o-transform: scale(1.1);
    }
    100% {
        opacity: 0;
        -o-transform: scale(1);
    }
}

@keyframes KenBurnsSlideShow {
    0% {
        opacity: 0;
        transform: scale(1);
        -ms-transform: scale(1);
    }
    5% {
        opacity: 1;
    }
    25% {
        opacity: 1;
    }
    30% {
        opacity: 0;
        transform: scale(1.1);
        -ms-transform: scale(1.1);
    }
    100% {
        opacity: 0;
        transform: scale(1);
        -ms-transform: scale(1);
    }
}

/* 29. typed text */
h1.typed-effect .typed-title {
    color: #fff;
}

.typed-cursor {
    opacity: 1;
    -moz-opacity: 1;
    -webkit-opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}

@-webkit-keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-moz-keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* 30. overlay */
.overlay::before {
    content: "";
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
}

.overlay-dark-65::before {
    background: rgba(17, 17, 17, 0.6);
    -webkit-pointer-events: none;
    -moz-pointer-events: none;
    pointer-events: none;
}

.overlay-dark-65-video::before {
    background: rgba(17, 17, 17, 0.6);
    -webkit-pointer-events: auto;
    -moz-pointer-events: auto;
    pointer-events: auto;
}

.corner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 140px solid rgba(17, 17, 17, 0.55);
    -webkit-pointer-events: none;
    -moz-pointer-events: none;
    pointer-events: none;
    z-index: 1;
}

@media only screen and (max-width: 880px) {
    .corner-overlay {
        border: 100px solid rgba(17, 17, 17, 0.55);
    }
}

@media only screen and (max-width: 640px) {
    .corner-overlay {
        border: 10px solid rgba(17, 17, 17, 0.55);
    }
}

.corner-overlay,
.corner-overlay::after,
.corner-overlay::before {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.parallax-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(17, 17, 17, 0.85);
    z-index: 0;
}

/* 31. logo */

@media all and (min-width: 1920px) {
}

@media only screen and (max-width: 880px) {
}

/* 32. Magnific Popup v1.1.0 CUSTOM */
.mfp-arrow-left::after {
    font-family: "Tajawal";
    content: "\f124";
    font-size: 18px;
    color: #fff;
    margin-top: 22px;
}

.mfp-arrow-right::after {
    font-family: "Tajawal";
    content: "\f125";
    font-size: 18px;
    color: #fff;
    margin-top: 22px;
}

.mfp-zoom-out-cur,
.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
    cursor: crosshair;
}

.mfp-arrow-left::after,
.mfp-arrow-left::before {
    border-right: none;
}

.mfp-arrow-right::after,
.mfp-arrow-right::before {
    border-left: none;
}

.mfp-title {
    font-family: "Tajawal", sans-serif;
    font-size: 13px;
    line-height: 1.5;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.05em;
}

.popup-gallery-slider a:visited,
.popup-gallery-slider a:active,
.popup-gallery-slider a:focus {
    color: #fff;
}

.popup-gallery-slider a:hover {
    color: #090b0c;
}

/* 33. Slick v1.6.0 CUSTOM */
.slick-slide {
    height: 100%;
    background: none;
}

.slick-slider {
    margin-bottom: 0;
    margin-top: 0;
    cursor: auto;
}

.slick-track,
.slick-list {
    -webkit-perspective: 2000;
    perspective: 2000;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.slick-fullscreen-img-fill {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    text-align: center;
}

.slick-fullscreen-img-fill img {
    position: relative;
    display: inline-block;
    min-width: 100%;
    max-width: none;
    min-height: 100%;
}

.slick-fullscreen .slick-fullscreen-item .slick-fullscreen-img-fill,
.slick-fullscreen-slideshow-zoom-fade
    .slick-fullscreen-item
    .slick-fullscreen-img-fill {
    height: 100vh;
    background: none;
}

.slick-fullscreen .slick-fullscreen-item .slick-fullscreen-img-fill .bg-img,
.slick-fullscreen-slideshow-zoom-fade
    .slick-fullscreen-item
    .slick-fullscreen-img-fill
    .bg-img {
    position: relative;
    width: auto;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.slick-fullscreen,
.slick-fullscreen-slideshow-zoom-fade {
    background: none;
}

.slick-fullscreen .slick-slide,
.slick-fullscreen-slideshow-zoom-fade .slick-slide {
    display: none;
    float: left;
    height: 100%;
}

.slick-initialized .slick-slide {
    display: block;
}

.slick-fullscreen-slideshow-zoom-fade .slick-fullscreen-item .bg-img {
    -webkit-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
    -moz-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
    -ms-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
    -o-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
    transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3);
}

.slick-fullscreen-slideshow-zoom-fade
    .slick-fullscreen-item.slick-active
    .bg-img {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

/* 34. Owl Carousel v2.2.0 CUSTOM */
.owl-buttons {
    position: static;
}

.owl-prev,
.owl-next {
    position: absolute;
    display: block;
    top: 50%;
    padding: 0 !important;
    margin-top: -35px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 12px;
    text-align: center;
    -webkit-transition: all 0.27s cubic-bezier(0, 0, 0.58, 1);
    -moz-transition: all 0.27s cubic-bezier(0, 0, 0.58, 1);
    -ms-transition: all 0.27s cubic-bezier(0, 0, 0.58, 1);
    -o-transition: all 0.27s cubic-bezier(0, 0, 0.58, 1);
    transition: all 0.27s cubic-bezier(0, 0, 0.58, 1);
    opacity: 0;
    -moz-opacity: 0;
    -webkit-opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

#news-carousel .owl-prev,
#news-carousel .owl-next {
    color: #fff;
}

@media only screen and (max-width: 480px) {
    #news-carousel .owl-prev,
    #news-carousel .owl-next {
        display: none;
        visibility: hidden;
    }
}

.owl-prev {
    left: -50px;
    background-color: transparent !important;
}

.owl-next {
    right: -50px;
    background-color: transparent !important;
}

.owl-prev::before,
.owl-next::before {
    content: "";
    position: absolute;
    display: block;
    width: 50px;
    height: 50px;
    background: #c5a773;
    -webkit-transition: all 0.27s cubic-bezier(0, 0, 0.58, 1);
    -moz-transition: all 0.27s cubic-bezier(0, 0, 0.58, 1);
    -ms-transition: all 0.27s cubic-bezier(0, 0, 0.58, 1);
    -o-transition: all 0.27s cubic-bezier(0, 0, 0.58, 1);
    transition: all 0.27s cubic-bezier(0, 0, 0.58, 1);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

#news-carousel .owl-prev::before,
#news-carousel .owl-next::before {
    background: #c5a773;
}

.owl-prev::before {
    left: 55px;
    top: 9px;
}

#news-carousel .owl-prev::before {
    left: 75px;
}

@media only screen and (max-width: 880px) {
    #news-carousel .owl-prev::before {
        left: 45px;
    }
}

.owl-next::before {
    right: 55px;
    top: 9px;
}

#news-carousel .owl-next::before {
    right: 75px;
}

@media only screen and (max-width: 880px) {
    #news-carousel .owl-next::before {
        right: 45px;
    }
}

.owl-prev .owl-custom,
.owl-next .owl-custom {
    position: relative;
}

.owl-prev .owl-custom {
    position: relative;
    top: 8px;
    left: 54px;
}

#news-carousel .owl-prev .owl-custom {
    left: 74px;
}

@media only screen and (max-width: 880px) {
    #news-carousel .owl-prev .owl-custom {
        left: 44px;
    }
}

.owl-next .owl-custom {
    position: relative;
    top: 8px;
    right: 54px;
}

#news-carousel .owl-next .owl-custom {
    right: 74px;
}

@media only screen and (max-width: 880px) {
    #news-carousel .owl-next .owl-custom {
        right: 44px;
    }
}

.owl-prev:hover,
.owl-next:hover {
    -webkit-transition: 0 none;
    -moz-transition: 0 none;
    -ms-transition: 0 none;
    -o-transition: 0 none;
    transition: 0 none;
}

.owl-prev:hover::before,
.owl-next:hover::before,
.owl-prev:active::before,
.owl-next:active::before,
.owl-carousel:hover .owl-prev,
.owl-carousel:hover .owl-next {
    opacity: 1;
    -moz-opacity: 1;
    -webkit-opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.owl-carousel:hover .owl-prev {
    left: -30px;
}

.owl-carousel:hover .owl-next {
    right: -30px;
}

/* 35. divider */
.inner-divider-home,
.inner-divider-large,
.inner-divider,
.inner-divider-half {
    position: relative;
    width: 100%;
    margin: 0 auto;
    background: none;
    z-index: -1;
}

.inner-divider-home {
    height: 50px;
}

@media only screen and (max-width: 995px) {
    .inner-divider-home {
        height: 25px;
    }
}

.inner-divider-large {
    height: 130px;
}

@media all and (min-width: 1920px) {
    .inner-divider-large {
        height: 150px;
    }
}

@media only screen and (max-width: 995px) {
    .inner-divider-large {
        height: 100px;
    }
}

.inner-divider {
    height: 50px;
}

@media all and (min-width: 1920px) {
    .inner-divider {
        height: 75px;
    }
}

.inner-divider-half {
    height: 25px;
}

.visible-mobile-devices {
    display: none;
    visibility: hidden;
}

@media only screen and (max-width: 995px) {
    .visible-mobile-devices {
        display: block;
        visibility: visible;
    }
}

 body {
     font-family: Tajawal, sans-serif;
     margin: 0;
     padding: 0;
     background-color: #f9f9f9;
 }

.container {
    width: 80%;
    margin: 20px auto;
}

.contact-section {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.contact-info,
.contact-form {
    width: 48%;
}

.contact-info h3,
.contact-form h3 {
    margin-bottom: 20px;
    font-size: 24px;
    color: #333;
}

.contact-info p {
    margin: 10px 0;
    line-height: 1.6;
    color: #666;
}

.contact-info .icon {
    margin-right: 10px;
    color: #333;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.contact-form button {
    background-color: #d4a35e;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

.contact-form button:hover {
    background-color: #b5894d;
}

.map {
    margin: 20px 0;
}

iframe {
    width: 100%;
    height: 400px;
    border: none;
}

/* Social Media Icons */
.social-icons {
    margin-top: 20px;
    display: flex;
    gap: 15px;
}

.social-icon {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: #000;
    color: white;
    font-size: 20px;
    text-decoration: none;
    transition: background-color 0.3s, transform 0.3s;
}

.social-icon:hover {
    background-color: #a19258;
    transform: scale(1.1);
}

.social-icon.facebook {
    background-color: #3b5998;
}

.social-icon.twitter {
    background-color: #000000;
    /* اللون الجديد لتويتر */
}

.social-icon.instagram {
    background-color: #e4405f;
}

.social-icon.linkedin {
    background-color: #0077b5;
}

.social-icon.facebook:hover {
    background-color: #2d4373;
}

.social-icon.twitter:hover {
    background-color: #333333;
}

.social-icon.instagram:hover {
    background-color: #c32aa3;
}

.social-icon.linkedin:hover {
    background-color: #005582;
}

/* تنسيق القسم تحت الهيدر */
.header-section1 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* محاذاة النصوص لليمين */
    padding: 50px 140px;
    background-image: url('{{ asset('front-assets/img/project/20.jpg') }}');
    background-size: cover;
    background-position: center;
    height: 400px;
    color: white;
}

.header-content1 {
    max-width: 50%;
    background: rgba(0, 0, 0, 0.5);
    /* خلفية شفافة للنص */
    padding: 30px;
    border-radius: 22px;
    text-align: right;
    margin-top: 90px;
}

.header-title1 {
    font-size: 36px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 20px;
}

.header-description1 {
    font-size: 18px;
    color: #ddd;
    line-height: 1.6;
    margin-bottom: 30px;
}

.cta-button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    color: #333;
    background-color: #C5A773;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.cta-button:hover {
    background-color: #a19258;
    color: white;
}

/* تصميم للجوال */
@media (max-width: 768px) {
    .header-section1 {
        flex-direction: column;
        text-align: center;
        height: auto;
        padding: 30px 20px;
    }

    .header-content1 {
        max-width: 100%;
    }

    .header-title1 {
        font-size: 28px;
    }

    .header-description1 {
        font-size: 16px;
    }

    .cta-button {
        font-size: 14px;
        padding: 8px 16px;
    }
}

/* تحسين قسم الحقائق ليكون ستة أعمدة في صف واحد */
.section-parallax {
    padding: 60px 0;
    background-color: #222;
    color: #fff;
    text-align: center;
}

.facts-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.facts-wrapper .col-xs-6 {
    flex: 1 1 15%;
    /* اجعل كل عمود يأخذ نسبة من الصف الكامل */
    max-width: 15%;
    padding: 20px;
    box-sizing: border-box;
}

.facts-number {
    font-size: 2em;
    font-weight: bold;
    color: #C5A773;
}

.facts-title {
    font-size: 1em;
    color: #ddd;
    margin-top: 10px;
    display: block;
}

/* استجابة للشاشات الأصغر */
@media (max-width: 992px) {
    .facts-wrapper .col-xs-6 {
        flex: 1 1 30%;
        /* نصف العرض في الشاشات المتوسطة */
        max-width: 30%;
    }
}

@media (max-width: 768px) {
    .facts-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .facts-wrapper .col-xs-6 {
        flex: 1 1 100%;
        /* عرض كامل في الشاشات الصغيرة */
        max-width: 100%;
    }
}

.section-group {
    padding: 60px 20px;
    text-align: center;
    background-color: #fff;
}

.section-group h2 {
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 40px;
    color: #333;
}


/* إعدادات للشاشات الصغيرة */
@media (max-width: 768px) {
    .logo-item {
        max-width: 100px;
    }

    .section-group h2 {
        font-size: 1.5em;
    }
}

/* إعدادات الأيقونة الثابتة */
.fixed-icon {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background-color: transparent;
    color: #C5A773;
    font-size: 2em;
    padding: 15px;
    border-radius: 50%;
    text-align: center;
    z-index: 1000;
    transition: transform 0.3s;
    animation: blink 1.5s infinite;
    /* تأثير الوميض */
}

/* تأثير الوميض */
@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* تكبير الأيقونة عند التمرير فوقها */
.fixed-icon:hover {
    transform: scale(1.1);
}