* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     text-decoration: none;
     list-style: none;
}



.navbar-nav .nav-item .nav-link {
     color: #F0E58B;
     font-size: 18px;
     font-weight: bold;
}

.hero {
     background-image: url('../img/hero-background.webp');
     z-index: -1;
     clip-path: polygon(0 0, 400% 0, 0 100%, 0 80%);
     padding-bottom: 2rem;
     background-size: cover;
     background-repeat: no-repeat;

}





.typewriter h1 {
     overflow: hidden;
     /* Ensures the content is not revealed until the animation */
     border-right: .15em solid #F0E58B;
     /* The typwriter cursor */
     white-space: nowrap;
     /* Keeps the content on a single line */
     margin: 0 0;
     /* Gives that scrolling effect as the typing happens */
     letter-spacing: .1em;
     /* Adjust as needed */
     animation:
          typing 3.5s steps(40, end),
          blink-caret .75s step-end infinite;
     font-size: 40px;
     width: 100%;

     color: #F0E58B;
     margin-top: 10%;
}

/* The typing effect */
@keyframes typing {
     from {
          width: 0
     }

     to {
          width: 100%
     }
}

/* The typewriter cursor effect */
@keyframes blink-caret {

     from,
     to {
          border-color: transparent;
     }

     50% {
          border-color: #F0E58B;
     }
}






.centersection {
     background-image: url('../img/center-section-background.png');
     background-repeat: no-repeat;
     background-size: cover;

}

.text {
     color: #fff;
     font-size: 18px;
     margin-top: 5%;
     letter-spacing: 2%;
     line-height: 1.6;

}


.textcenter {


     backdrop-filter: blur(6px) saturate(102%);
     -webkit-backdrop-filter: blur(6px) saturate(102%);
     background-color: rgba(231, 231, 145, 0.1);
     border-radius: 12px;
     border: 1px solid rgba(209, 213, 219, 0.3);


}


.button {
     background-color: #F0E58B;
     color: #050926;
     font-weight: bold;
     font-size: 16px;
     margin-left: 10%;
}


.herobutton {
     background-color: #F0E58B;
     color: #050926;
     font-weight: bold;
     font-size: 40px;
}


.herobutton2 {
     background-color: #050926;
     color: #F0E58B;
     font-weight: bold;
     font-size: 40px;
}


.herobutton3 {
     background-color: #050926;
     color: #F0E58B;
     font-weight: bold;
     font-size: 16px;
}



.offers {


     border: 5px solid #050926;
     width: 245px;
     min-height: 94px;
     margin: -2px auto 0;
     text-transform: uppercase;
     flex-shrink: 0%;
     display: flex;
     flex-direction: column;
     font-size: 16px;
     font-weight: bold;
     padding: 1%;
     margin-bottom: 2%;
}


.offers_special {
     border: 2px solid black;
     background-color: #050926;
     justify-content: center;
     text-align: center;
     width: 245px;
     min-height: 94px;
     margin: -2px auto 0;
     text-transform: uppercase;
     flex-shrink: 0%;
     display: flex;
     flex-direction: column;
     font-size: 20px;
     font-weight: bold;
     padding: 30%;
     margin-bottom: 2%;
}



.image {
     height: 100%;

}

.rounded {
     margin-top: -10%
}

.bg-body {
     box-shadow: 5px 10px 8px 10px rgba(1, 3, 15, 0.12);
}




.spam {
     display: none;
}




.forminput {
     border: none;
     border-bottom: 2px solid #F0E58B;
     width: 100%;
}

.forminput:focus {
     outline: 0;
}


@media screen and (max-width : 1400px) {
     .typewriter h1 {
          font-size: 20px;
          color: #F0E58B;
          width: 65%;
     }


}


@media screen and (max-width : 1400px) {
     .text {
          font-size: 16px;
          color: #fff;
     }
}



@media screen and (max-width : 540px) {
     .typewriter h1 {
          font-size: 12px;
          color: #F0E58B;
          width: 65%;
     }


}


@media screen and (max-width : 540px) {
     .text {
          font-size: 11px;
          color: #fff;
     }
}



@media screen and (max-width : 540px) {
     .herobutton {
          background-color: #F0E58B;
          color: #050926;
          font-weight: bold;
          font-size: 13px;
     }
}



.foot {
     background-image: url('../img/hero-background.webp');
     padding: 1%;
}

.tt {
     margin-left: 20%;
}

.reason {
     margin-top: 10%;
}

.countt {
     background-image: url('../img/center-section-background.png');
     background-size: cover;
     background-repeat: no-repeat;
     margin-top: 15%;
     margin-bottom: 5%;
}

/*  */



#oopss {
     background: linear-gradient(-45deg, #050926, #050926);
     position: fixed;
     left: 0px;
     top: 0;
     width: 100%;
     height: 100%;
     line-height: 1.5em;
     z-index: 9999;
}

#oopss #error-text {
     font-size: 40px;
     display: flex;
     flex-direction: column;
     align-items: center;
     font-family: 'Shabnam', Tahoma, sans-serif;
     color: #fff;
     direction: rtl;
}

#oopss #error-text img {
     margin: 85px auto 20px;
     height: 342px;
}

#oopss #error-text span {
     position: relative;
     font-size: 3.3em;
     font-weight: 900;
     margin-bottom: 50px;
}

#oopss #error-text p.p-a {
     font-size: 19px;
     margin: 30px 0 15px 0;
}

#oopss #error-text .back {
     background: #fff;
     color: black;
     font-size: 30px;
     text-decoration: none;
     margin: 2em auto 0;
     padding: .7em 2em;
     border-radius: 500px;
     box-shadow: 0 20px 70px 4px rgba(0, 0, 0, 0.1), inset 7px 33px 0 0px #F0E58B;
     font-weight: 900;
     transition: all 300ms ease;
}

#oopss #error-text .back:hover {
     -webkit-transform: translateY(-13px);
     transform: translateY(-13px);
     box-shadow: 0 35px 90px 4px rgba(0, 0, 0, 0.3), inset 0px 0 0 3px #000;
}

@font-face {
     font-family: Shabnam;
     src: url("https://cdn.rawgit.com/ahmedhosna95/upload/ba6564f8/fonts/Shabnam/Shabnam-Bold.eot");
     src: url("https://cdn.rawgit.com/ahmedhosna95/upload/ba6564f8/fonts/Shabnam/Shabnam-Bold.eot?#iefix") format("embedded-opentype"), url("https://cdn.rawgit.com/ahmedhosna95/upload/ba6564f8/fonts/Shabnam/Shabnam-Bold.woff") format("woff"), url("https://cdn.rawgit.com/ahmedhosna95/upload/ba6564f8/fonts/Shabnam/Shabnam-Bold.woff2") format("woff2"), url("https://cdn.rawgit.com/ahmedhosna95/upload/ba6564f8/fonts/Shabnam/Shabnam-Bold.ttf") format("truetype");
     font-weight: bold;
}

@font-face {
     font-family: Shabnam;
     src: url("https://cdn.rawgit.com/ahmedhosna95/upload/ba6564f8/fonts/Shabnam/Shabnam.eot");
     src: url("https://cdn.rawgit.com/ahmedhosna95/upload/ba6564f8/fonts/Shabnam/Shabnam.eot?#iefix") format("embedded-opentype"), url("https://cdn.rawgit.com/ahmedhosna95/upload/ba6564f8/fonts/Shabnam/Shabnam.woff") format("woff"), url("https://cdn.rawgit.com/ahmedhosna95/upload/ba6564f8/fonts/Shabnam/Shabnam.woff2") format("woff2"), url("https://cdn.rawgit.com/ahmedhosna95/upload/ba6564f8/fonts/Shabnam/Shabnam.ttf") format("truetype");
     font-weight: normal;
}