﻿/*addded by esraa ahmed*/   
.p-0 {
    padding:0;
}
.p-2{
    padding:0.5rem !important;
}
.pb-2{
    padding-bottom:0.5rem !important;
}
.pt-3{
    padding-top:1rem !important;
}
.mb-2 {
    margin-bottom:0.5rem !important;
}
.px-3 {
    padding-left:1.5rem !important;
    padding-right:1.5rem !important;
}
.logIcn-2 {
     display:none;
     float: right;
    padding: 5px 10px;
    font-size: 21px;
}
.userAlt{
    float: right;
    padding: 5px 10px;
    font-size: 21px;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar .navbar-collapse {
    text-align: center;
}
.logList{
    margin-right:0 !important;
}
.User-sm-screen {
    display:none;
}
.navbar-header .divLog {
    display:none;
}
.lang-sm-screen {
    display:none;
}
.lang-sm-screen .langSlct .dropdown-menu a {
    color:#fff !important;
}
.errorEmailMsg {
    padding-left: 5%;
}
@media only screen and (max-width: 930px){
        nav li {
            padding: 0 0.5rem 0 0.5rem !important;
        }
}
@media only screen and (max-width: 760px) {
.navbar .navbar-nav{
float:left;
}
.logList{
    display:none !important;
}
.linksCtn{
    text-align:left;
}
}
@media only screen and (max-width: 901px){
    .log-item{
        display:none !important;
    }
    .md-screen-log{
        display:inline !important;
    }
    .User-sm-screen-show{
        display:block;
    }
    .User-sm-screen-hide {
         display:none;
    }
    .divLog{
        width:100%;
    }
    ul.dropdown-menu{
       left: auto;
       right: 0;
       width: max-content !important;
    }
    nav li {
    padding: 0 0.5rem 0 0.5rem !important;
}
}
@media only screen and (max-width: 767px){
    .logIcn-2 {
        display: inline;
    }
        .md-screen-log{
        display:none !important;
    }
    .User-sm-screen-show{
        display:block;
    }
    .User-sm-screen-hide{
         display:none;
    }
    .divLog{
        width:100%;
    }
       ul.dropdown-menu{
       left: auto !important;
       right: 0 !important;
       width: max-content !important;
    }
       .navbar-collapse .divLog {
           display:none;
       }
       .navbar-header .divLog {
          display:block;
        }
       .lang-sm-screen {
    display:block !important;
}
       .langList{
           display:none !important;
       }
} 
 /*end*/   
.HeaderofAboutCont {
    padding-top: 1px;
}
.AboutImgCont {
    border-right: 1px solid white;
    border-bottom: 1px solid white;
}
.AboutCont  {
    padding-bottom:30px;
}
.HeadrImg{
    width:100%;
}
.FrstVCont , .ScndVCont{
    height:auto;
}
.FrstVCont{
    margin-bottom:1px;
}
.FrstVido , .ScndtVido {
    width:100% !important;
}
.videoSpace{
    object-fit: inherit;
    display: block;
}
.AboutTitle , .TimeLineTitle , .OurCompTitle  {
    margin: 0 auto;
    float: none;
    text-align: center;
    padding-bottom: 40px;
    padding-top: 30px;
  }
.AboutTitle span , .TimeLineTitle span,.TimeLineTitle label  ,.OurCompTitle span{
    font-weight:bold;
}
.AboutTitle span:before , .AboutTitle span:after {
    content: "";
    width: 42px;
    background: #4f84c9;
    height: 3px;
    display: block;
    position: absolute;
    top: 50%;
    left: -38%;
    z-index: -1;
}
.TimeLineTitle span:before, .TimeLineTitle span:after {
    content: "";
    width: 65px;
    background: #4f84c9;
    height: 3px;
    display: block;
    position: absolute;
    top: 50%;
    left: -11.5%;
    z-index: -1;
}
.mrgnCenter{
    margin:0 auto !important; 
    float:none !important;
}
.OurCompTitle span , .TimeLineTitle span , .AboutTitle span{
    position:relative;
}
.OurCompTitle span:before, .OurCompTitle span:after {
    content: "";
    width: 80px;
    background: #4f84c9;
    height: 3px;
    display: block;
    position: absolute;
    top: 50%;
    left: -40%;
    z-index: -1;
}
.AboutTitle span:after{
      left: 104%;
}

.OurCompTitle span:after {
    left: 102%;
}
.TimeLineTitle span:after {
    left: 101%;
}
  .sec1aboutTxt ,.sec2aboutTxt {
    padding-bottom: 15px;
    text-align: justify;
    color: #464646;
    font-weight: bold;
    font-size: 15.5px;
}
  .sec2aboutTxt{
      display:none;
  }
  .readMore , .readLess{
    font-size: 14px;
    color: #4f84c9;
    cursor: pointer;
    padding: 0px !important;
    padding-left: 5px;
  }
  .slierContent {
      padding-bottom:50px;
  }
  .slide {
        background-size: contain;
        background-repeat: round;
        height: 350px;
        margin-right: 1px !important;
        width: 250px !important;
    }

    .bx-wrapper .bx-pager {
        display: none;
    }

    .bx-wrapper .bx-next {
        right: -28px;
    }

    .bx-wrapper {
        margin: 0 auto;
        max-width: 1265px    !important;
        box-shadow: none !important;
        height: 361px;
    }
    .bx-viewport {
        height: 350px !important;
    }
        .bx-wrapper .bx-prev {
            left: -28px;
        }

    .YearNumb, .MonthCont, .TmText {
        text-align: center;
        color: white;
    }
    .MonthCont {
    color: darkgray;
}

    .YearNumb {
        padding-bottom: 5px;
    }

    .YearNumb span {
            font-size: 44px;
        }

     .YearNumb span:after {
                content: "";
                width: 50px;
                height: 1px;
                background: white;
                display: list-item;
                position: absolute;
                left: 99px;
            }

    .MonthCont {
        font-size: 21px;
    }
    .TmText {
        padding: 5px;
    }

    .TimelineSliderCont {
        margin-top: 40px;
    }
    .LogoComCont{
    text-align: center;
    padding-bottom: 28px;
}
    .LogoComCont img {
    width: 100%;
}
    .AboutCom , .ComData {
    margin: 0 auto;
    float: none;
    text-align: left;
}
    span.txtComp {
    display: inline-block;
    padding-bottom: 20px;
    font-size: 14px;
}
    .DataComCont{
        font-size:14px;
        color: #7a7a7a;
    }
    .comSec {
    margin-bottom: 50px;
 
}
    .VsblComSec{
            border-left: 1px solid lightgray ;
    }
    .bx-wrapper .bx-controls-direction a{
        z-index: 100;
        width: 19px;
    }

  .comSec:nth-child(1) .VsblComSec , .comSec:nth-child(4) .VsblComSec , .comSec:nth-child(7) .VsblComSec , .comSec:nth-child(10) .VsblComSec {
    border-left: 0px;
}

.CompCont .ComContent .comSec , .HomePageCont h1{
    padding-left: 10px;
    transition: all .7s ease-in-out;
    transform: translate3d(20px, 0, 0);
    opacity: 0;
}
.CompCont .ComContent .comSec.active , .HomePageCont h1.active {
      transform: translate3d(0px, 0, 0);
      padding-left: 0px;
      opacity: 1;
    }
   
.HomePageCont h1.AboutTitle{
    padding-left:0px;
    opacity:1;
}
.modal-header .LogoComCont  .close {
    position: absolute;
    right: 0%;
    top: 14%;
    font-size: 25px;
}
.ComData {
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 5px;
    text-align: justify;
}
    label.saidBy {
    font-size: 10px;
    color: #afaeae;
    font-weight: bold;
}
    .CompwebSite {
    color: #4f84c9;
    font-weight: bold;
    text-align: center;
}
    .CompwebSite label{
    font-weight: bold;
        max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
}
.collap-Expand{
    width: 12%;
    height: 30px;
    position: absolute;
    border-radius: 50%;
    border: 0px;
    left: 45%;
    /* top: 245px; */
    background: transparent;
}
    .collap-Expand:hover , .collap-Expand:focus {
        outline:none;
    }
button.collap-Expand i {
    font-size: 16px;
    /*margin-left: 5%;*/
    color: #afafaf;
}
.ComPopupCont .modal-content {
    background-color: rgb(249, 249, 249);
    border-radius: 0px;
    border: 0px;
    box-shadow: none !important;
}
.ComPopupCont .modal-dialog {
    padding-top: 10%;
}
 .ComPopupCont .modal-header {
    padding: 0px;
    /*padding-top: 11px;*/
    border-bottom: 0px;
    padding-right: 17px;
    height: 60px;
    background-color: rgb(222, 222, 222) !important;
}
.ComPopupCont .modal-body {
    padding: 10px;
}
.ComPopupCont .modal-footer {
    border-top: 0px;
    text-align: center;
    padding:0px;
    padding-bottom: 30px;
}
.ComPopupCont .modal-footer button{
    
    border-radius: 0px;
    width: 160px;
    border: 0px;
    background-image: none;
    background-color: rgba(206, 206, 206, 0.6);
    box-shadow: none;
    height: 35px;
    color: #8e8e8e;;
    font-weight: bold;
    font-size: 18px;
    text-shadow: none;

}
.ComPopupCont .modal-footer button:hover , .ComPopupCont .modal-footer button:focus{
    background-color:rgb(202, 202, 202);
}
button.JoinTeamBtn {
    background-color: #1980c3;
    border: 0px;
    height: 55px;
    width: 160px;
    margin: 0 auto;
    float: none;
    color: white;
    font-weight: bold;
    font-size: 16px;
}
.btnTeamCont {
    text-align: center;
    margin-bottom: 80px !important;
    margin-top: 10px !important;
}
.btnTeamCont a , .btnTeamCont a:hover , .btnTeamCont a:focus {
    color:white;
    text-decoration:none;
}
body.modal-open .supreme-container , body.modal-open .HeaderOfLayout{
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: blur(3px);
}


.modal.modal-wide{
	overflow-x: hidden;
}
.modal.modal-wide .modal-dialog {
	width: 94%;
}
.modal-wide .modal-body {
	overflow-y: auto;
}
.ComPopupCont .modal-header .LogoComCont  img{
    width: 390px;
    padding-top: 3px;
}
.PlayFull2 ,.PlayFull1 , .hideSec , .readLess{
    display:none;
}

@-webkit-keyframes ezCustTrans {
	100% {
		-webkit-transform:  rotateY(0deg) rotateX(0deg) translateZ(0px);
		-moz-transform:  rotateY(0deg) rotateX(0deg) translateZ(0px);
		-ms-transform:  rotateY(0deg) rotateX(0deg) translateZ(0px);
		transform:  rotateY(0deg) rotateX(0deg) translateZ(0px);
		opacity: 1;
	}
}
@keyframes ezCustTrans {

    100% {
		-webkit-transform: rotateY(0deg) rotateX(0deg) translateZ(0px);
		-moz-transform:  rotateY(0deg) rotateX(0deg) translateZ(0px);
		-ms-transform:  rotateY(0deg) rotateX(0deg) translateZ(0px);
		transform:  rotateY(0deg) rotateX(0deg) translateZ(0px);
		opacity: 1;
	}
}
.ezCustTrans {
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
	-webkit-animation-name: ezCustTrans;
	animation-name: ezCustTrans;
}          
/*Responsive*/
@media screen and (min-width: 768px){
    .PlayFull1 , .PlayFull2{
    display:none !important;
}
}
@media screen and (max-width: 767px) and (min-width: 300px) {
          video.videoSpace::-webkit-media-controls {
  display: none;
}
          video.videoSpace::-webkit-media-controls-panel {
  display: none!important;
 -webkit-appearance: none;
}

/* Old shadow dom for play button */

video.videoSpace::-webkit-media-controls-play-button {
  display: none!important;
  -webkit-appearance: none;
}

/* New shadow dom for play button */

/* This one works */

video.videoSpace::-webkit-media-controls-start-playback-button {
  display: none!important;
  -webkit-appearance: none;
}

    button#play-pause-button.PlayFull2 , button#play-pause-button.PlayFull1 {
    display: inline-block;
    background-color: transparent;
    box-shadow: none;
    position: absolute;
    margin: 0 auto;
    color: #ffffff;
    width: 100% !important;
    height: 40px !important;
    border: 2px solid transparent;
    text-align: center;
    outline: none;
    font-size: 29px;
}
 button#play-pause-button.PlayFull2 i , button#play-pause-button.PlayFull1 i {
    padding-left: 0px !important;
    margin-right: 0px !important;
}
 .bx-viewport {
    height: 300px !important;
}
.TmText {
        font-size: 13px;
    }

}
@media screen and (max-width: 767px) and (min-width: 460px) {
    button#play-pause-button.PlayFull2 , button#play-pause-button.PlayFull1 {
   top:28%;
    }
}
@media screen and (max-width: 460px) and (min-width: 300px) {
    button#play-pause-button.PlayFull2 , button#play-pause-button.PlayFull1 {
top: 12%;

    }
}
@media screen and (max-width: 767px) and (min-width: 511px) {
    .VsblComSec {
    border-left: 0px;
}
    .TimeLineTitle span{
        font-size:16px;
    }
    .TimeLineTitle span:before, .TimeLineTitle span:after {
    left: -19.5%;
}
    .TimeLineTitle span:after {
    left: 101%;
}
        .AboutImgCont {
        border: 1px solid white;
}
            .entireBody {
        padding-top: 65px;
    }
    .sec1aboutTxt, .sec2aboutTxt , .readMore , .readLess{
    font-size: 13px;
    padding: 13px;
}
        .comSec {
        padding-bottom: 50px;
        border-bottom: 1px solid #e6e6e6;
    }
}

@media screen and (max-width: 1050px) and (min-width: 300px) {
     .FooterData {
     top:0px; 
    font-size: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
    display:block;
}
    footer .LogoContLay , footer .LogoCSCont{
        display:none;
    }
    .entireBody {
    padding-top: 55px;
}
}

@media screen and (max-width: 920px) and (min-width: 674px) {
    .FooterData {
    font-size: 10px;
}
}
@media screen and (max-width: 673px) and (min-width: 511px) {
    .FooterData {
    font-size: 9px;

}

}
@media screen and (max-width: 1050px) and (min-width: 768px) {
    .entireBody {
        padding-top: 60px;
    }
}

@media screen and (max-width: 510px) and (min-width: 300px) {

   .VsblComSec {
    border-left: 0px;
}
   /*.TimelineCont {
       display:none;
   }*/
     .entireBody {
        padding-top: 64px;
    }
     .FooterData {
    font-size: 8px;

}
     .sec1aboutTxt, .sec2aboutTxt , span.txtComp , .readMore , .readLess{
         font-size:13px;
         padding:13px;
     }

     .OurCompTitle , .AboutTitle{
         padding-top:15px ;
         padding-bottom:15px;
     }
     .OurCompTitle span, .TimeLineTitle span, .AboutTitle span{
       font-size: 20px;
     }
          .OurCompTitle span::after, .AboutTitle span::after,.TimeLineTitle span::after , .OurCompTitle span::before,.TimeLineTitle span::before, .AboutTitle span::before{
           display:none;

          }
          .OurCompTitle::after, .AboutTitle::after,.TimeLineTitle::after , .OurCompTitle::before,.TimeLineTitle::before, .AboutTitle::before{
            content: "";
            position: absolute;
            top: 33px;
            background-color: #4485d2;
            width: 20px;
            height: 2px;
             }

        
         .showSec{
             display:none;
         }
          /*.VideoOfAboutCont {
              display:none;
          }*/
          
.CompCont .ComContent .comSec , .HomePageCont h1{
    padding-left:0px;
    transition: none;
    transform: none;
    opacity:1;
}
.CompCont .ComContent .comSec.active , .HomePageCont h1.active {
      transform: none;
      padding-left: 0px;
      opacity: 1;
    }
    .AboutImgCont {
        border: 1px solid white;
}
   .ComPopupCont .modal-header .LogoComCont img {
    width: 270px;
}
    .comSec {
        padding-bottom: 50px;
        border-bottom: 1px solid #e6e6e6;
    }
    .hideSec{
        display:block;
    }
}
.ComContent {
    padding-top: 40px;
}
@media only screen and (max-width : 1440px) {
    .slide {
        width: 246px !important;
    }
}
@media only screen and (max-width : 1366px){
    .bx-wrapper {
    max-width: 998px !important;
}
}
@media screen and (width: 360px) {
label.saidBy {
     padding: 13px; 
}
}
@media screen and (max-width: 440px) and (min-width: 300px) {
    .slide {
        width: 250px !important;
    }
    .YearNumb span:after {
    left: 113px;
}
}
@media screen and (max-width: 510px) and (min-width: 460px) {
    .AboutTitle::before {
        left: 32%;
    }

    .AboutTitle::after {
        left: 61%;
    }

    .OurCompTitle::before {
        left: 22%;
    }

    .OurCompTitle::after {
        left: 70%;
    }

    .TimeLineTitle::after, .TimeLineTitle::before {
        top: 41px;
    }

    .TimeLineTitle::before {
        left:27%;
    }

    .TimeLineTitle::after {
        left: 65%;
    }
}
@media screen and (max-width: 460px) and (min-width: 300px) {
        .AboutTitle::before {
       left: 26%;
    }

    .AboutTitle::after {
        left: 64%;
    }

    .OurCompTitle::before {
        left:11%;
    }

    .OurCompTitle::after {
        left: 77%;
    }

    .TimeLineTitle::after, .TimeLineTitle::before {
        top: 41px;
    }

    .TimeLineTitle::before {
         left: 18%;
    }

    .TimeLineTitle::after {
            left: 70%;
    }  
}

/*@media screen and (min-width: 768px) {
    .CompCont .ComContent .comSec {
        width: 50% !important;
    }
}*/