/* Base CSS */

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

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300&display=swap') ;

.alignleft {
    float: left;
    margin-right: 15px;
}

.alignright {
    float: right;
    margin-left: 15px;
}

.aligncenter {
    display: block;
    margin: 0 auto 15px;
}

a:focus {
    outline: 0 solid
}

img {
    max-width: 100%;
    height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 15px;
    color: #07171D;
}

body {
    color: #07171D;
    font-weight: 400;
    font-family: 'Cairo', sans-serif !important;
}

.selector-for-some-widget {
    box-sizing: content-box;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

ul {
    margin: 0;
    padding: 0;
}

a:hover {
    text-decoration: none
}

a,
button,
input,
textarea {
    outline: none !important;
}

.section-padding {
    padding: 80px 0;
}


/* -------------------- HEADER AREA START ------------------ */

.header__area .container {
    max-width: 1920px;
}

.header__blk {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logp__area a {
    display: inline-block;
}

.logp__area {
    background: #A1CD51;
    padding: 23px 0;
    padding-right: 30px;
    padding-left: 15px;
    position: relative;
    z-index: 1;
    width: 260px;
}

.logo__rtl:before {
    right: -20px;
}

.logp__area:before {
    position: absolute;
    left: -20px;
    height: 100%;
    width: 40px;
    content: '';
    background: #A1CD51;
    top: 0;
    z-index: -1;
}


.header__area {
    background: #248EA7;
    position: fixed;
    top: 0;
    z-index: 22;
    left: 0;
    right: 0;
}

.header__menu nav ul li {
    display: inline-block;
    margin-right: 49px;
}

.header__menu {
    margin-right: 45px;
}

.header__menu nav ul li:last-child {
    margin-right: 0;
}

.header__menu ul li a {
    font-size: 16px;
    color: #fff;
    transition: .3s all;
    margin-left: 0 !important;
    transition: .3s all;
}

.header__menu ul li a:hover {
    color: #A1CD51;
}


/* -------------------- HEADER AREA END ------------------ */


/* -------------------- HERO AREA START ------------------ */

.hero__inner__blk {
    max-width: 595px;
    margin: 0 auto;
    text-align: center;
}

.hero__inner__blk h4 {
    font-size: 54px;
    text-align: center;
    color: #fff;
}

.hero__area {
    position: relative;
    z-index: 1;
    min-height: 90vh;
    padding-top: 80px;
    margin-top: 101px;
}

.video-container {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    height: 100%;
    background-attachment: fixed;
    width: 100%;
}

html,
body {
    height: 100%;
}

.video-container video {
    height: 100%;
    width: 100%;
    object-fit: initial;
}

.click_to_next_section {
    display: inline-block;
    margin-top: 30px;
}

/* -------------------- HERO AREA END ------------------ */


/* -------------------- SERVICE AREA START ------------------ */

.service__content h4 {
    font-size: 22px;
    font-weight: 600;
    color: #3D5975;
}

.service__content p {
    margin: 0;
    font-size: 15px;
    color: #3B3A3ABD;
    line-height: 25px;
}

.service__content {
    background: #F7F7F7;
    padding: 20px;
}

.similar__btn h4 {
    font-weight: 700;
    text-align: center;
    font-size: 55px;
    position: relative;
    padding-bottom: 20px;
}

.similar__btn h4:before {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 116px;
    height: 10px;
    content: '';
    background: #A1CD51;
    bottom: 0;
}

.similar__btn {
    margin-bottom: 55px;
}

.service__area {
    padding: 80px 0;
    padding-top: 60px;
}

/* -------------------- SERVICE AREA END ------------------ */


/* -------------------- ABOUT AREA START ------------------ */

.about__title h4 {
    text-align: left;
}

.about__title h4:before {
    left: 0;
    transform: unset;
}


.about__rtl__title h4:before {
    right: 0;
    transform: unset;
}

.about__rtl__title h4 {
    text-align: right !important;
}

.about__area {
    padding: 70px 0;
    position: relative;
    z-index: 1;
    background-image: url(../img/about_bg.jpg);
}

.about__content p {
    margin: 0;
    font-size: 15px;
    color: #3B3A3ABD;
    line-height: 25px;
}

.about__area::before {
    background: #fff;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 53%;
    background-attachment: fixed;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    z-index: -1;
}

.about__rtl::before {
    right: 0;
    top: 0;
}


.bg-holder {
    background-size: cover;
    background-position: 50% 50%;
}

.single__count__blk p {
    text-align: center;
    font-size: 22px;
    margin: 0;
    font-weight: 700;
    color: #3D5975;
}

.single__count__blk h4 {
    text-align: center;
    font-weight: 900;
    color: #3D5975;
    font-size: 60px;
    margin-bottom: 5px;
}

.count__area {
    background: #A1CD51;
    padding: 40px 0;
}

.single__count__blk {
    position: relative;
}

.single__count__blk::after {
    position: absolute;
    right: -12px;
    top: 50%;
    height: 70px;
    width: 2px;
    content: '';
    background: #fff;
    transform: translateY(-50%);
}

.project__thumb {
    position: relative;
    z-index: 1;
    overflow: hidden;
    cursor: pointer;
}

.project__overlay {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: flex-end;
    background: #ffffffad;
    visibility: hidden;
    opacity: 0;
    transition: .3s all;
}

.p_ico_1 a {
    font-size: 18px;
    color: #454445;
}

.project__ico {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 32px;
    padding-top: 0;
}

.project__name {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.project__name h4 {
    margin: 0;
    color: #4443439e;
    font-size: 20px;
}

.project__thumb img {
    transition: .4s all;
    width: 100%;
}

.project__thumb:hover .project__overlay {
    visibility: visible;
    opacity: 1;
}

.project__thumb:hover>img {
    transform: scale(1.2);
}

.project__area {
    padding: 60px 0;
}

video {
    margin: 0 auto;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    background-size: cover;
    transition: 1s opacity;
}


.video-parallax {
    -webkit-transition-position: fixed;
    position: fixed;
}

.main {
    background: #fff;
}

/* -------------------- ABOUT AREA END ------------------ */


/* -------------------- BRAND AREA START ------------------ */

.brand__area {
    background: #F7F7F7;
    padding: 60px 0;
    /* border-bottom: 1px solid #000; */
}

.brand__inner__blk .col-2 {
    width: 20%;
}

.single__brand {
    text-align: center;
}

.single__brand a img {
    transition: .3s all;
    filter: grayscale(100%);
}

.single__brand a:hover img {
    filter: grayscale(0);
}

/* -------------------- BRAND AREA END ------------------ */


/* -------------------- CONTACT AREA START ------------------ */
/* .form_contact_us {
border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;


} */



.map__area iframe {
    height: 340px;
    width: 100%;
}

.contact__similar__content h4 {
    font-size: 25px;
    font-weight: 700;
    color: #1E2D3B;
}

.contact__similar__content p {
    margin: 0;
    font-size: 15px;
    color: #3B3A3ABD;
    line-height: 25px;
}

.contact__mail a {
    margin: 0;
    font-size: 15px;
    color: #3B3A3ABD;
    line-height: 29px;
}

.single__contact__item input {
    width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

.single__contact__item textarea {
    background: #fefefe;
    border: 1px solid #c5c5c5;
    width: 100%;
    padding: 4px 15px;
    transition: .3s all;
    height: 200px;
    resize: none;
    border-radius: 4px;
    
}

.single__contact__item label {
    color: #1E2D3B;
    font-size: 15px;
    margin-top: 8px;
}

.single__contact__item input:hover {
    background: #fdfdfd;
    border-color: #a1cd51;
}

.single__contact__item textarea:hover {
    background: #fdfdfd;
    border-color: #a1cd51;
}

.quote__title h4:before {
    position: absolute;
    left: 0;
    width: 64px;
    height: 10px;
    content: '';
    background: #A1CD51;
    top: -31px;
}

.rtl__before h4:before {
    position: absolute;
    right: 0;
    width: 64px;
    height: 10px;
    content: '';
    background: #A1CD51;
    top: -31px;
}


.quote__title h4 {
    font-size: 25px;
    font-weight: 700;
    color: #1E2D3B;
    position: relative;
}

.sub__btn {
    text-align: right;
}

.sub__btn button {
    background: #2594AF;
    width: 150px;
    padding: 7px;
    border: transparent;
    font-size: 17px;
    color: #ffffff;
    transition: .3s all;
    margin-top: 5px;
}

.sub__btn button:hover {
    color: #ffffff;
    background: #A1CD51;
}

.copyright__blk p {
    font-size: 14px;
    color: #545454;
    margin: 0;
}

.footer__area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 130px;
    padding: 30px 0;
}

.map__area {
    margin-bottom: 50px;
}

.footer__social {
    display: flex;
    gap: 10px;
}

.contact__area {
    padding-top: 60px;
}

.header__menu a.active {
    color: #A1CD51;
}

.hero_bg {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
}

.hero_bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.count__area .row .col-lg-3.col-md-4.col-6:last-child .single__count__blk:before {
    display: none;
}

.service__thumb img {
    width: 100%;
}

.massage__blk {
    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 333;
    cursor: pointer;
}

.rtl__page__blk .massage__blk {
    right: auto;
    left: 25px;
    bottom: 72px;
}

/* -------------------- CONTACT AREA END ------------------ */


/* -------------------- OFFCANVAS MENU AREA START ------------------ */

.btn12 {
    position: absolute;
    width: 60px;
    height: 60px;
    top: 300px;
    left: 315px;
    transition-duration: 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
}

.btn12 .icon {
    transition-duration: 0.5s;
    position: absolute;
    height: 4px;
    width: 30px;
    top: 30px;
    background-color: #212121;
}

.btn12 .icon:before {
    transition-duration: 0.5s;
    position: absolute;
    width: 30px;
    height: 4px;
    background-color: #212121;
    content: "";
    top: -10px;
}

.menu.btn12.open .icon:before {
    background-color: #fff;
}

.menu.btn12.open .icon:after {
    background-color: #fff;
}

.btn12 .icon:after {
    transition-duration: 0.5s;
    position: absolute;
    width: 30px;
    height: 4px;
    background-color: #212121;
    content: "";
    top: 10px;
}

.btn12.open .icon {
    transition-duration: 0.5s;
    background: transparent;
}

.btn12.open .icon:before {
    transform: rotateZ(45deg) scaleX(1.25) translate(6.5px, 6.5px);
}

.btn12.open .icon:after {
    transform: rotateZ(-45deg) scaleX(1.25) translate(6px, -6px);
}

.btn12:hover {
    cursor: pointer;
}

/* -------------------- OFFCANVAS MENU AREA END ------------------ */



/* -------------------- CLICK TO TOP AREA START ------------------ */
#button {
    display: inline-block;
    background-color: #1E2D3B;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 50%;
    position: fixed;
    bottom: 100px;
    right: 30px;
    transition: background-color .3s,
        opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
    font-family: "Font Awesome 5 pro";
    margin: 0 !important;
}

.rtl__page__blk #button {
    left: 30px;
    right: auto;
    bottom: 150px;
}

#button::after {
    content: "\f077";
    font-weight: normal;
    font-style: normal;
    font-size: 2em;
    line-height: 50px;
    color: #fff;
    font-family: "Font Awesome 5 pro";
}

#button:hover {
    cursor: pointer;
    background-color: #333;
}

#button:active {
    background-color: #555;
}

#button.show {
    opacity: 1;
    visibility: visible;
}

/* Styles for the content section */

.content {
    width: 77%;
    margin: 50px auto;
    font-family: 'Merriweather', serif;
    font-size: 17px;
    color: #6c767a;
    line-height: 1.9;
}

@media (min-width: 500px) {
    .content {
        width: 43%;
    }

    #button {
        margin: 30px;
    }
}

.content h1 {
    margin-bottom: -10px;
    color: #03a9f4;
    line-height: 1.5;
}

.content h3 {
    font-style: italic;
    color: #96a2a7;
}

.rtl__page__blk .header__menu ul li {
    margin-right: 47px;
}

.rtl__page__blk .header__menu {
    margin-left: 45px;
    margin-right: 0;
}

.rtl__page__blk .header__menu ul li:last-child {
    margin-right: 47px;
}

.rtl__page__blk .header__menu ul li:first-child {
    margin-right: 0;
}

.btn-check:focus+.btn-secondary,
.btn-secondary:focus {
    box-shadow: unset;
}

.header__menu nav {
    display: flex;
    align-items: center;
}

.header__menu .dropdown {
    margin-left: 30px;
}

.header__menu .dropdown .btn-secondary {
    background: transparent;
}

.header__menu .dropdown-menu {
    min-width: 100%;
}

.header__menu .dropdown-menu li {
    width: 100%;
    text-align: center;
}

.header__menu .dropdown-menu li a {
    color: #444;
    margin: 0 !important;
}

.header__menu .dropdown_rtl {
    margin-left: 0;
    margin-right: 30px;
}


.gallery__slider__rtl {
    flex-direction: row-reverse;
}

.modal-body .owl-nav {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
}

.modal-body .owl-nav button {
    height: 50px;
    width: 50px;
    border-radius: 3px;
    font-size: 22px !important;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 5px;
    color: #fff !important;
    background: #A1CD51 !important;
}

.modal-body .owl-nav button.owl-next {
    left: auto;
    right: 5px;
}


/* -------------------- CLICK TO TOP AREA END ------------------ */


.vcontainer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.vcontainer .vvideo {
    height: 12rem;
    width: 25rem;
    margin: 2rem;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .5);
    overflow: hidden;
    border-radius: 1rem;
}


.vcontainer .vvideo video {
    height: 100%;
    width: 100%;
    object-fit: cover;
    outline: none;
    border: none;
    cursor: pointer;
}

.vcontainer .vvideo video:hover {
    transition: .2s linear;
    transform: scale(1.3);
}


.vcontainer .vvideo .active {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: auto;
    width: 80%;
    box-shadow: 0 0 100vh rgba(0, 0, 0, .7);

}



/* ------------------ PROJECT POPUP AREA START --------------- */

.project__popup__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    
}

.project__popup {
    position: relative;
    z-index: 1;
}

.project__popup>a {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 46px;
    width: 46px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #5e5e5eb2;
    line-height: 1;
    color: #fff;
}

.project__popup {
    position: relative;
    z-index: 1;
    height: 240px;
}

/* ------------------ PROJECT POPUP AREA END --------------- */

.square-holder {
    padding:30px;
  border: 1px solid #cecece;
  align-items: center;
  display:flex;
  align-items: center;
  justify-content: center;
  margin-bottom:20px;
  background-color:#f1f1f1;
  min-height:200px
  }
  
  .square-holder img {
    max-width:100%;
    max-height: 129px;
    filter: grayscale(100%);
    transition: all 0.3s;
  }
  
  .square-holder:hover img{
    filter:none;
  }