@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');

body {
    padding:0px;
    margin:0px;
    background-size:cover;
    width:100vw;
    height:100vh;
    overflow:hidden;
    font-family: 'Josefin Sans', sans-serif;
    background:linear-gradient(0deg,rgba(0, 0, 0, 0.71),rgba(0,0,0,0.5));


}
.video { /* This is to make the video appear behind everything else */
    position: fixed;
    z-index: -1000; /* Z-Index is -1000 just to be safe */
    right: 0;
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
    background:linear-gradient(0deg,rgba(0,0,0,0.5),rgba(0,0,0,0.5));


  }
  
  .content { /* This is for the content */
    position: fixed;
    z-index: 1; /* This can be set to any number greater than -1000. */
    bottom: 0;
    background: rgba(0, 0, 0, 0.615);
    color: #f1f1f1;
    width: 100%;
    padding: 20px;
  }
 
  
#loading {
    width: 100vw;
    height: 100vh;
    position: fixed;
    background:rgba(206, 145, 55, 0.126);
    z-index: 999;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
#spinner {
    animation: rotate 0.56s infinite linear;
    width:50px;
    height:50px;
    border:12px solid #fff;
    border-bottom:12px solid rgb(2206, 145, 55, 0.126);
    border-radius:50%;
    margin:0;
}
#hero .hero-img {
    text-align: center;
  }
  #hero .hero-img img {
    width: 50%;
  }
  #hero .hero-img img {
    width: 0%;
  }
  @media (max-width:2px) {
    #hero .hero-img img {
      width: 3%;
    }}

@keyframes rotate {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
#box {
    width:100vw;
    height:100vh;
    z-index:9;
    position:fixed;
    top:0;
}
.container div {
    font-size:25px;
    margin:20px 0px;
    transition:0.4s ease-in-out;
}
#box div {
    width:16.66vw;
    height:100%;
    display:inline-block;
}
.box1 {
    background:rgb(206, 145, 55, 0.126);
}
.box2 {
    background:rgb(206, 145, 55, 0.126);
    margin-left:-5px;
}
#menu {
    width:100%;
    text-align:center;
    margin:6vh 0px;
    display:none;
}
#menu a {
    margin:0px 6%;
    font-size:19px;
    color:#fff;
    text-decoration:underline;
}
#middle {
    width:100vw;
    height:90vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    position:fixed;
    top:0;
    text-align:center;
    z-index:1;
    color:#fff;
    padding-bottom:10vh;
}
#middle h1 {
    color:rgba(255, 180, 50, 0.774);
    font-size:70px;
    text-decoration:underline;
}
#projects {
    width: 10vw;
    height: 10vw;
    text-align: center;
    font-size: 25px;
    background: transparent;
    color: #fff;
    position: fixed;
    top: 0;
    right: 45vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 4;
    transition: 0.4s ease-in-out;
    border-radius: 0px 0px 100px 100px;
}

#about {
    width:10vw;
    height:10vw;
    text-align:center;
    font-size:25px;
    transform:rotate(-90deg);
    background:transparent;
    color:#fff;
    position:fixed;
    left:0;
    bottom:40vh;
    display:flex;
    flex-direction: column;
    justify-content:center;
    z-index:4;
    transition:0.4s ease-in-out;
    border-radius:0px 0px 100px 100px;
}
#work {
    width:10vw;
    height:10vw;
    text-align:center;
    font-size:25px;
    transform:rotate(90deg);
    background:transparent;
    color:#fff;
    position:fixed;
    right:0;
    bottom:40vh;
    display:flex;
    flex-direction: column;
    justify-content:center;
    z-index:4;
    transition:0.4s ease-in-out;
    border-radius:0px 0px 100px 100px;

}
#contact {
    width:10vw;
    height:10vw;
    text-align:center;
    font-size:25px;
    background:transparent;
    color:#fff;
    position:fixed;
    bottom:0;
    left:45vw;
    display:flex;
    flex-direction: column;
    justify-content:center;
    z-index:4;
    transition:0.4s ease-in-out;
    border-radius:100px 100px 0px 0px;
}
#projects:hover {
    background:rgba(220, 175, 38, 0.9);
    cursor:pointer;
}
#about:hover {
    background:rgba(220, 175, 38, 0.9);
    cursor:pointer;
}
#work:hover {
    background:rgba(220, 175, 38, 0.9);
    cursor:pointer;
}
#contact:hover {
    background:rgba(220,175,38,0.9);
    cursor:pointer;
}
#middle table {
    width:30%;
    margin:6vh auto;
}
#middle table tr td {
    text-align:center;
}
.social {
    color:#fff;
    font-size:22px;
    border-radius:50%;
    transition:0.4s ease-in-out;
    margin:0px 8px;
    text-align:center;
}
.social:hover { 
    cursor: pointer;
    color:rgb(182, 157, 15);
}
.container {
    width:90vw;
    height:90vh;
    padding:5vh 5vw;
    background:rgb(145, 108, 14);
    color:#fff;
    z-index:9;
    position:fixed;
    max-height:100vh;
    overflow-y:auto;
    display:none;

}
.containermagour{
    width:90vw;
    height:90vh;
    padding:5vh 5vw;
    /* background:rgb(145, 108, 14); */
    color:#fff;
    z-index:9;
    position:fixed;
    max-height:100vh;
    overflow-y:auto;
    display:none;
    background:linear-gradient(0deg,rgb(136 92 8 / 78%),rgb(254 203 95 / 72%)),url(),url("https://www.pf.org.sa/wp-content/uploads/2023/10/magour-scaled.jpg") center center;

}
.container div {
    font-size:25px;
    margin:20px 0px;
    transition:0.4s ease-in-out;
}
.container div:hover {
    cursor:pointer;
}
.container section {
    margin:8vh 0px;
}
#used div{
    font-size:14px !important;
    display:inline-block;
    padding:8px 10px;
    border:2px solid #fff;
    margin:0px 10px;
    border-radius:50px;
}
#used:hover {
    cursor:text;
}
#used div:hover {
    cursor:text;
}
.container h1 {
    font-size:60px;
    text-decoration:underline;
}
.container p {
    font-size:21px;
}
.btn_one {
    font-size:18px;
    font-family: 'Josefin Sans', sans-serif;
    color:#fff;
    background:transparent;
    border:3px solid #fff;
    padding:8px 40px;
    border-radius:80px;
    font-weight:bold;
    margin:2vh 10px;
    transition:0.4s ease-in-out;
}
.btn_one:hover {
    cursor:pointer;
    color:rgb(255, 50, 50);
    background:#fff;
}
.btn_two {
    font-size:18px;
    font-family: 'Josefin Sans', sans-serif;
    color:rgb(255, 50, 50);
    background:#fff;
    border:3px solid #fff;
    padding:8px 40px;
    border-radius:80px;
    font-weight:bold;
    margin:2vh 10px;
    transition:0.4s ease-in-out;
}
.text-mag{
    width:10vw;
    height:10vw;
    text-align:center;
    font-size:25px;
    transform:rotate(90deg);
    background:transparent;
    color:#030303;
    position:fixed;
    right:0;
    bottom:40vh;
    display:flex;
    flex-direction: column;
    justify-content:center;
    z-index:4;
    transition:0.4s ease-in-out;
    border-radius:0px 0px 100px 100px;
}
.btn_two:hover {
    cursor:pointer;
    padding:8px 60px;
}
.container form input {
    width:46%;
    margin:20px 1%;
    background:transparent;
    border:0px;
    border-bottom:3px solid rgba(255,255,255,0.5);
    padding:8px 10px;
    font-family: 'Poppins', sans-serif;
    font-size:18px;
    transition:0.4s ease-in-out;
    color:#fff;
    font-weight:bold;
}
.container form textarea {
    width:96%;
    margin:20px 1%;
    padding:8px 10px;
    border:0px;
    border-bottom:3px solid rgba(255,255,255,0.5);
    padding:8px 10px;
    font-family: 'Poppins', sans-serif;
    font-size:18px;
    background:transparent;
    resize:none;
    transition:0.4s ease-in-out;
    color:#fff;
    font-weight:bold;
}
.container form input:focus {
    outline:none;
    border-bottom:3px solid rgba(255, 255, 255,1);
}
.container form textarea:focus {
    outline:none;
    border-bottom:3px solid rgba(255, 255, 255,1);
}
::placeholder {
    color:#fff;
}
#footer {
    color:#fff;
    width:92vw;
    padding:5vh 4vw;
    text-align:right;
    position:fixed;
    z-index:1;
    bottom:0;
    font-size:10px;
    font-weight:bold;
}
#footer a {
    color:rgb(145, 108, 14) ;
}
#particles-js {
    position:fixed;
    width:100vw;
    height:100vh;
}
::-webkit-scrollbar {
    width:5px;
    height:5px;
}
::-webkit-scrollbar-track {
    background: #fff; 
}
::-webkit-scrollbar-thumb {
    background: rgb(255, 50, 50); 
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 50, 50,0.8); 
}
::selection {
	color: #fff;
	background: rgb(255, 50, 50);
}

@media (max-width: 800px){ 
    #projects {
        display:none;
    }
    #about {
        display:none;
    }
    #contact {
        display:none;
    }
    #work {
        display:none;
    }
    #footer {
        text-align:center;
    }
    #middle {
        width:90vw;
        padding:0px 5vw;
    }
    #middle table {
        width:80%;
    }
    .container form input {
        width:90%;
    }
    .container form textarea {
        width:90%;
    }
    #menu {
        display:inline-block;
    }
    #onlywide {
        display:none !important;
    }
    .box2 {
        margin-left:0px !important;
    }
    #box div {
        width:100%;
    }
}


.services {
    max-width: 293px;
    height: 263px;
}
.exp{
	padding-top: 76px;
}
.service-area {
    margin: 80px 0px 40px 0px;
}

.service-wrap {
    width: 100%;
    height: 100%;
    border: 1px solid #B5B5B5;
    text-align: center;
    display: block;
    border-radius: 50%;
}
.service-wrap i {
    margin-top: 40px;
    transition: all 0.3s ease;
}
.service-wrap:hover i {
    color: #e66f69;
}
.service-wrap p {
    padding: 0px 40px;
    font-size: 13px;
}
.service-wrap h3 {
    margin: 10px 0px;
}
.pe-dj {
    font-size: 5em;
}
.nav-tabs-dropdown {
    display: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  
  .nav-tabs-dropdown:before {
    content: "\e114";
    font-family: 'Glyphicons Halflings';
    position: absolute;
    right: 30px;
  }
  
  @media screen and (min-width: 769px) {
    #nav-tabs-wrapper {
      display: block!important;
    }
  }
  @media screen and (max-width: 768px) {
      .nav-tabs-dropdown {
          display: block;
      }
      #nav-tabs-wrapper {
          display: none;
          border-top-left-radius: 0;
          border-top-right-radius: 0;
          text-align: center;
      }
     .nav-tabs-horizontal {
          min-height: 20px;
          padding: 19px;
          margin-bottom: 20px;
          background-color: #f5f5f5;
          border: 1px solid #e3e3e3;
          border-radius: 4px;
          -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
          box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
     }
      .nav-tabs-horizontal  > li {
          float: none;
      }
      .nav-tabs-horizontal  > li + li {
          margin-left: 2px;
      }
      .nav-tabs-horizontal > li,
      .nav-tabs-horizontal > li > a {
          background: transparent;
          width: 100%;
      } 
      .nav-tabs-horizontal  > li > a {
          border-radius: 4px;
      }
      .nav-tabs-horizontal  > li.active > a,
      .nav-tabs-horizontal  > li.active > a:hover,
      .nav-tabs-horizontal  > li.active > a:focus {
          color: #ffffff;
          background-color: #428bca;
      }


.ctn{
    width: 50%;
    height: 100%;
}

.container h1{
    font-size: 4vw;
    line-height: 1;
}

.container .ctn:last-child h1{
    text-align: right;
}


/*  STRAMBLE */

.stramble .target{
    position: relative;
}

.stramble .strambable{
    display: inline-block;
    cursor: pointer;
    pointer-events: all;
    overflow: hidden;
}

.stramble .strambable:hover .letter{
    transform: translate(0, -100%);
}


.stramble .target .letter{
    position: relative;
    display: inline-block;
    transition: transform ease-out 150ms;
}
.stramble .target .letter:after{
    content: attr(data-letter);
    position: absolute;
    left: 0;
    top: 100%;
}



.round .target .content{
    display: inline-block;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-content: center;
    width: 75px;
    height: 75px;
    cursor: pointer;
    position: relative;
    z-index: 5;
}
.arrow{
    user-select: none;
    opacity: .8;
    z-index: 6;
    position: absolute;
    top: 50%;
    right: 90px;
    transform: translateY(-50%);
}

.arrow.reverse{
    transform: translateY(-50%) rotate(180deg);
}

.round .content:hover .title{
    transform: translate(110px, -50%);
    opacity: .6;
}

.round .content.reversed:hover .title{
    transform: translate(-110px, -50%);
}

.round .content:before{
    content: '';
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #1a00fa;
    z-index: 4;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.rounded,.rounded:before, .rounded:after{
    content: '';
    border-radius: 50%;
    background-color: #1a00fa;
    opacity: .7;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    width: 0;
    height: 0;
    transition: all ease-in-out .3s;
}

.round .rounded{
    opacity: .6;
}
.round .content:hover .rounded{
    width: 130%;
    height: 130%;
}

.round .content:hover .rounded:before{
    width: 130%;
    height: 130%;
}

.round .content:hover .rounded:after{
    width: 130%;
    height: 130%;
}
.rounded:before{
    opacity: .4;
    transition-delay: 100ms;
}

.rounded:after{
    opacity: .1;
    transition-delay: 200ms;

}

.round .title{
    font-size: 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: transform ease-out .3s,
                opacity ease-out .2s;
    opacity: 0;
    z-index: 3;
    color: #1a00fa;
}

.round .reversed .title{
    text-align: right;
}

.mylink{
  position: absolute;
  z-index: 150;
  bottom: 0;
  right: 0;
  width: 100%;
  text-align: right;
  padding: .6rem;
}

.mylink a{
  font-family: Calibri;
  color: #fff;
  border-bottom: 1px solid #fff;
  opacity: .5;
  transition: opacity .3s;
  text-decoration: none
}
.mylink a:hover{
  opacity: 1
}

  }