* {
    --primary: #FBAF02;
    --second: #ECF9FF;

    --opacity-50: #1F417280;
    --opacity-100: #1F4172;

    /* --primary-backgrooud: #110d0a; */
    --primary-backgrooud: #000;


  }
  body[data-font=opensans],body[data-font=opensans]
  button,body[data-font=opensans]
  h1,body[data-font=opensans] h2,body[data-font=opensans]
  h3,body[data-font=opensans] h4,body[data-font=opensans]
  h5,body[data-font=opensans] h6,body[data-font=opensans]
  input,body[data-font=opensans] textarea{font-family:'Almarai'}

html {
    margin: 0;
    padding: 0;
}

/* background: radial-gradient(circle, #110d0a 24%, #FBAF02 52%); */


.landing-logo {
    position: relative;
    z-index: 5;
    /* background: radial-gradient(110.39% 112.39% at 50.13% 70.61%, #FBAF02 -123.3%, #000000 100%); */
    min-height: 230px;
    /* box-shadow: -1px 78px 204px 1px rgba(251, 175, 2,0.41); */
    /* -webkit-box-shadow: -1px 78px 204px 1px rgba(251, 175, 2,0.41); */
    /* -moz-box-shadow: -1px 78px 204px 1px rgba(251, 175, 2,0.41); */
    background-color: #000;
}
.landing-logo .cover-logo-img {
    margin-top: 33px;
    width: 145px;
}
/* .landing-logo .overly {
    background: radial-gradient(60.39% 115.39% at 50.13% 39.61%, #FBAF02 -73.3%, #000000 100%);
    z-index: 1;
    position: absolute;
    height: 300px;
    width: 95%;
} */
.landing {
    /* -webkit-mask-image: linear-gradient(transparent, red);
    mask-image: linear-gradient(transparent, red); */
    /* -webkit-mask-image: linear-gradient(180deg, #FBAF02 5%, rgb(219, 44, 44) 68%, rgb(158, 49, 49) 100%, transparent 95%);
    mask-image: linear-gradient(180deg, #FBAF02 5%, rgb(173, 37, 37) 68%, rgb(154, 34, 34) 100%, transparent 95%); */
    margin-top: -1px;
}

.main-button .button-sec .one,
.main-button .button-sec .tow {
    margin: 0 35px;
}
.main-button .menu {
    background-color: var(--primary);
    color: #fff;
    padding: 7px 65px;
    font-size: 24px;
}
.main-button .branchs {
    background-color: var(--primary-backgrooud);
    border: solid 1px var(--primary);
    color: #fff;
    padding: 7px 65px;
    font-size: 24px;
}

.social-media p {
    color: #fff;
}
.social-media .links .social-link {
    margin: 10px;
    padding: 7px 12px;
    background-color: #fff;
    color: var(--primary-backgrooud);
    border-radius: 7px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.8);
}
.social-media .links .social-link:hover {
    /* transform: scale(1.3) !important;
    transition: transform 0.8s ease !important; */
    -webkit-transform: translateY(-7px);
    transform: translateY(-7px);
    transition: .6s;
    cursor: pointer;
}
.social-media .links li:hover,
.main-button .menu:hover,
.main-button .branchs:hover,
.footer .location:hover,
.footer .phone:hover {
    /* transform: scale(1.3) !important;
    transition: transform 0.8s ease !important; */
    -webkit-transform: translateY(-7px);
    transform: translateY(-7px);
    transition: .6s;
    cursor: pointer;
}


.footer {
    background-color: var(--primary-backgrooud);
    color: #fff;
    margin-top: -1px;
}
.footer .location {
    background-color: #fff;
    color: var(--primary-backgrooud);
    padding: 6px 40px;
    font-size: 24px;
}
.footer .phone {
    color: #fff;
    margin-top: -8px;
}
.footer .copy-right {
    width: fit-content;
    background-color: #1F41721A;
    margin: auto;
    padding: 7px 40px;
}
.btn-close {
    opacity: 1 !important;
}
.modal-content {
    margin-top: 105px;
    background-color: #00000069;
    color: #fff !important;
}
.modal-body .branch-info {
    background-color: var(--primary-backgrooud);
    color: #fff;
    border-radius: 6px;
    padding: 7px;
    margin: 21px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    border: 0.01rem solid #fff;
}

/* media css */
@media (min-width:767px){
    .landing {
        max-height: 700px;
        padding: 0;
        overflow: hidden;
    }
    .landing .cover-img {
        width: 100%;
        max-height: 700px;
    }

    .main-button {
        /* margin-top: -100px; */
        background-color: var(--primary-backgrooud);
    }
    .main-button .button-sec {
        display: flex;
        justify-content: center;
    }
    .social-media {
        /* margin-top: 28px; */
        background-color: var(--primary-backgrooud);
    }

    .modal-dialog {
        /* max-width: var(--bs-modal-width); */
        max-width: 770px;
    }
    .modal-body .branch-box {
        display: flex;
    }
    .social-media .links .social-link i {
        font-size: 21px;
    }
  }
@media (max-width:767px){
    .landing {
        max-height: 900px;
        padding: 0;
        overflow: hidden;
    }
    .landing .cover-img {
        width: 100%;
        max-height: 900px;
    }

    .main-button {
        margin-top: -2px;
        background-color: var(--primary-backgrooud);
    }
    .main-button .button-sec {
        display: block;
    }
    .main-button .button-sec .one,
    .main-button .button-sec .tow {
        margin: 10px 35px;
    }
    .social-media {
        margin-top: -2px;
        background-color: var(--primary-backgrooud);
    }
    .modal-body {
        display: flex;
        justify-content: center;
    }
    .modal-body .branch-box {
        display: block;
    }
    .modal-body .branch-info {
        font-size: 18px !important;
        padding: 12px !important;
    }
    .social-media .links .social-link i {
        position: relative;
        top: 3px;
        font-size: 25px;
    }
    .social-media .links .social-link {
        margin: 8px !important;
        padding: 12px 12px !important;
    }
}