body {
    font-family: "Noto Sans Arabic", sans-serif;
}

.sub_container{
    width: 75%;
    margin: auto;
    text-align: center;
    background-color: #ffffff;
}
.row_banner{
    display: flex;
    padding: 20px;
    justify-content: space-between;
}
.grid_container{
    margin: 60px;
    display: grid;
    grid-template-columns: 40% 60%;
}
.grid_container .grid_itme{
    position: relative;
}

.grid_itme h1{
    position: absolute;
    text-align: left;
    top: 90px;
    left: 0px;
    font-weight: 800;
    font-size: 2.5rem;
}
.grid_itme p{
    position: absolute;
    text-align: left;
    top: 200px;
    left: 0px;
    line-height: 1.8rem;
}
@media (max-width: 1309px) {
  .grid_container{
   display: flex;
   flex-wrap: wrap;
}
.grid_itme h1{
    display: none;
}
.grid_itme p{
    display: none;
}
}
.features{
    padding-top: 60px;
    padding-bottom: 60px;
    text-align: center;
    
}

.features .container{
    padding-top: 60px;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(250px, 1fr));
    grid-gap: 20px;
    justify-content: baseline;

}
.features .feat{
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
}

.features h1{
    font-size: 2.5rem;
    font-weight: 800;
    margin: 30px;
}
.features .feat p{
    color: #878a99!important;
    font-size: 0.9rem;
    text-wrap: wrap;
}
.title_sase_servcies{
    text-align: center;
    padding: 40px;
}
.title_sase_servcies h1{
    font-size: 2.5rem;
    font-weight: 800;
    
}

.grid_sase{
    height: auto;
    margin: 40px;
    padding: 20px;
    background-image: url("/electronic_services_website/static/assets/images/shanghai.jpg");
    background-position: center 70%;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    display: grid;
    grid-template-columns: 50% 50%;
    border-radius: 12px;
    justify-items: center;
}
.sase_container {
    width: 80%;
    position: relative;
    margin: 50px;
    padding: 40px;
    border-radius: 12px;
    background: #2F5DAB;
    background: linear-gradient(169deg, rgba(47, 93, 171, 1) 0%, rgba(47, 93, 171, 0.43) 57%, rgba(56,65,74,.15) 100%);
}
.sort_icon{
    position: absolute;
    right: -160px;
    bottom: 130px;
}
.sase_container h3{
    font-size: 2.6rem;
    font-weight: 800;
}
.sase_container p {
    /* font-size: 0.9rem; */
    font-family: inherit;
    color: #ffffff;
    font-weight: 700;
}

.row {
   --vz-gutter-x: 0;
}
.text-main {
    color:#2F5DAB !important;
}
.container_list{
    position: relative;
    right: 0px;
    padding-left: 22px;
    text-align: start;
    border: 1px solid;
    border-radius: 13px;
    border-color: #F4D401;
    padding-top: 10px;
    margin-left: 29px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}
.text-main-sub {
    color:#2F5DAB !important;
}

.text-theme {
    color:#F4D401 !important
}

.bg-main {
    background-color:#2F5DAB !important
}
.border-main {
    border:#2F5DAB !important
}

.bg-theme {
    background-color:#F4D401 !important
}

.border-theme {
    border-color:#F4D401 !important
}

.nft-hero .bg-overlay {
    background-color: #2F5DAB !important
}

.navbar-landing .navbar-nav .nav-item .nav-link {
    color: #fff;
}

.navbar-landing .navbar-nav .nav-item .nav-link.active,
.navbar-landing .navbar-nav .nav-item .nav-link:focus,
.navbar-landing .navbar-nav .nav-item .nav-link:hover {
    color:#F4D401 !important;
}

.plan-box {
 box-shadow: 0 6px 12px rgba(56,65,74,.15);
}

.icon-effect::before {
    background: #f4d4012e !important;
}

.footer-social-link .avatar-title:hover {
    background-color:#F4D401 !important;
}

.img-fluid {
    height: 50px !important;
}

.footer-list li a:hover {
   color:#F4D401 !important;
   font-weight: bold !important;
}

.fixed-top {
    background-color: #2F5DAB !important;
}

.text-carousel {
    position: absolute;
    top: 145px;
    z-index: 1000;
}
.text-services {
    position: relative;
    top: -120px;
    z-index: 1000;
}

.bg-overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    right: 0;
    bottom: 0;
    left: 0;
    top: 0;
    opacity: .4;
    background-color: #2F5DAB !important;
    background: linear-gradient(160deg, rgb(0, 0, 0) 0%, rgba(22, 21, 21, 0.671) 54%, rgba(0, 0, 0, 0) 100%);
    z-index: 500;
}


.contact-us-p {
    margin-left: 3rem;
}
.contact-us-btn {
    padding: 19px 57px;
    font-weight: 700;
    font-size: 15px;
}
.badge-gradient-main {
    /* background: linear-gradient(135deg,#7b869996 0,#2F5DAB 100%); */
    background: #F4D401;
}
.ff-secondary {
    font-size: 20px !important;
}
.img-border-2 {
    width: 190px;
    height: 503px;
    border-radius: 125px;
}
.img-border-1 {
    width: 160px;
    height: 400px;
    margin-top: 100px;
    border-radius: 166px;
    border: 1px solid #F4D401;
    z-index:2;
}
.service-card {
    background-repeat: no-repeat;
    height: 300px;
    border-radius: 13px;
    z-index:2;
}
.one-partner {
    background: white;
    width: 100px;
    height: 95px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 9px;
}
.imag-card {
    position: relative;
    cursor: pointer;
}
.imag-card:before {
    content: "";
    height: 300px;
    max-width: 356px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 13px;
    position: absolute;
    top: 0;
    left: -16px;
    right: 0;
    bottom: 0;
    background: #e5e3df;

    -webkit-transform: rotate(-9deg);
    -moz-transform: rotate(-9deg);
    -o-transform: rotate(-9deg);
    -ms-transform: rotate(-9deg);
    transform: rotate(-11deg);
    z-index:1;
}

.pesudo-theme {
    position: relative;
}

.pesudo-theme:before {
    content: "";
    height: 690px;
    width: 250px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -95px;
    background: #F4D401;
    z-index: 1;
    margin-left: auto;
}

.inline{
    max-width:400px;
    margin:auto;
}
.input-icons span {
    position: absolute;
    font-size:12px;
    color:#878a99;
    margin-right: 10px;
    display: flex;
    align-items: center;
}
.input-icons span i{
    font-size:16px;
    padding: 10px;
}
.input-icons {
    width: 100%;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
.input-field {
    width: 100%;
    padding: 45px;
    margin-bottom: 3px;
}
.footer-list li a {
   color: #fff;
}
.footer-list .social a:hover {
    color: #F4D401 !important;
    font-weight: bold !important;
}


.pesudo-border-one {
    position: relative;
}

.pesudo-border-one:before {
    content: "";
    height: 385px;
    width: 170px;
    position: absolute;
    left: 184px;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: 1;
    margin-left: auto;
    border: 1px solid #F4D401;
    border-radius: 166px;
}

.pesudo-border-two {
    position: relative;
}

.pesudo-border-two:before {
    content: "";
    height: 505px;
    width: 185px;
    position: absolute;
    left: 200px;
    top: 15px;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: 1;
    margin-left: auto;
    border: 1px solid #F4D401;
    border-radius: 166px;
}
.body-login {
    height: 100vh;
    background: url('/static/assets/images/services/2.png');
    background-size: cover;
    background-repeat: no-repeat;
    text-align: end;
    padding: 15px 5px;
}
.form-login {
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    .card {
        width: -webkit-fill-available;
    }
}
.plan-overlay {
    background: url('/static/assets/images/identity.png');
    background-size: contain;
    position: absolute;
    height: 100%;
    width: 100%;
    right: 0;
    bottom: 0;
    left: 0;
    top: 0;
    opacity: .1;
    z-index: 1;
}
.service-body {
    height:25vh;
    max-height:25vh;
}
.service-body img {
        height:25vh;
        max-height:25vh;
    }
.faq {
  width: 60%;
  min-height: 440px;
  height: auto;
  background: white;
  border-radius: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  z-index:4;
}
@media only screen and (max-width: 1200px) {
    .pesudo-theme {
        display: none !important;
    }

    .div-footer {
        width:0;
    }

    .contact-info {
        margin-top:115px
    }

    .text-services {
        left: 60px;
    }
}

@media only screen and (max-width: 990px) {
    .text-carousel {
        display: none !important;
    }
}
.div-footer {
    display: flex;
    justify-content: inherit;
    flex-direction: column;
    align-items: end;
}
.ff-secondary {
    font-size: 12px !important;
}
.active-list {
    color: #fff !important;
    background: #2F5DAB !important;
}
.service-card {
    position: relative;
    cursor: pointer;
}
.service-card-before {
    text-align: start;
    height: 200px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 13px;
    position: absolute;
    top: 50px;
    left: 30px;
    bottom: 0;
    background: #fff;
    z-index: 1;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
}
.list-item{
   padding: 20px;
   background-color: #e9ebec;
   list-style-type: none;

}

@media (max-width: 1333px) {
    .grid_sase{
   display: none;
  }
  .sase_container{
   display: none;
  }
  .grid_container{
   display: none;
  }
  .title_sase_servcies{
   display: none;
  }
  .text-white {
    --vz-text-opacity: 1;
    /* color: rgba(var(--vz-white-rgb),var(--vz-text-opacity))!important; */
    font-size: 20px;
    position: relative;
}
.contact-us-btn {
    padding: 12px 15px;
    font-weight: 700;
    font-size: 13px;
}
}