/*-------------------------------------------------------
08. Margin Padding Css
---------------------------------------------------------*/
/*margins paddings*/
.p-50 {
    padding: 50px;
}

.pb-140 {
    padding-bottom: 14rem;
}

.pd-50 {
    padding: 5rem 0;
}

.pr-120 {
    padding-right: 12rem;
}

.de-padding {
    padding: 12rem 0;
}

.de-pt {
    padding-top: 12rem;
}

.de-pb {
    padding-bottom: 12rem;
}

.pd-0 {
    padding: 0;
}

.pl-30 {
    padding-left: 3rem;
}

.pl-40 {
    padding-left: 4rem;
}

.pl-50 {
    padding-left: 5rem;
}

.pl-60 {
    padding-left: 6rem;
}

.pl-300 {
    padding-left: 30rem;
}

.pt-64 {
    padding-top: 6.4rem;
}

.pt-0 {
    padding-top: 0rem;
}

.pt-10 {
    padding-top: 1rem;
}

.pt-20 {
    padding-top: 2rem;
}

.pt-30 {
    padding-top: 3rem;
}

.pt-40 {
    padding-top: 4rem;
}

.pt-50 {
    padding-top: 5rem;
}

.pt-60 {
    padding-top: 6rem;
}

.pt-70 {
    padding-top: 7rem;
}

.pt-80 {
    padding-top: 8rem;
}

.pt-90 {
    padding-top: 9rem;
}

.pt-100 {
    padding-top: 10rem;
}

.pr-30 {
    padding-right: 3rem;
}

.pr-40 {
    padding-right: 4rem;
}

.pr-50 {
    padding-right: 5rem;
}

.pr-60 {
    padding-right: 6rem;
}

.pb-0 {
    padding-bottom: 0rem;
}

.pb-10 {
    padding-bottom: 1rem;
}

.pb-20 {
    padding-bottom: 2rem;
}

.pb-30 {
    padding-bottom: 3rem;
}

.pb-40 {
    padding-bottom: 4rem;
}

.pb-50 {
    padding-bottom: 5rem;
}

.pb-60 {
    padding-bottom: 6rem;
}

.pb-70 {
    padding-bottom: 7rem;
}

.pb-80 {
    padding-bottom: 8rem;
}

.pb-90 {
    padding-bottom: 9rem;
}

.pb-100 {
    padding-bottom: 10rem;
}

.pb-256 {
    padding-bottom: 25.6rem;
}

.pl-60 {
    padding-left: 6rem;
}

.mr-100 {
    margin-right: 10rem;
}

.mt-64 {
    margin-top: 6.4rem;
}

.mt-0 {
    margin-top: 0;
}

.mt-10 {
    margin-top: 1rem;
}

.mt-20 {
    margin-top: 2rem;
}

.mt-30 {
    margin-top: 3rem;
}

.mt-40 {
    margin-top: 4rem;
}

.mt-50 {
    margin-top: 5rem;
}

.mt-60 {
    margin-top: 6rem;
}

.mt-70 {
    margin-top: 7rem;
}

.mt-80 {
    margin-top: 8rem;
}

.mt-90 {
    margin-top: 9rem;
}

.mt-100 {
    margin-top: 10rem;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-10 {
    margin-bottom: 1rem;
}

.mb-15 {
    margin-bottom: 1.5rem;
}

.mb-20 {
    margin-bottom: 2rem;
}

.mb-30 {
    margin-bottom: 3rem;
}

.mb-40 {
    margin-bottom: 4rem;
}

.mb-50 {
    margin-bottom: 5rem;
}

.mb-60 {
    margin-bottom: 6rem;
}

.mb-70 {
    margin-bottom: 7rem;
}

.mb-80 {
    margin-bottom: 8rem;
}

.mb-90 {
    margin-bottom: 9rem;
}

.mb-100 {
    margin-bottom: 10rem;
}

.ml-300 {
    margin-left: 30rem;
}

.ml-30 {
    margin-left: 3rem;
}

.ml-40 {
    margin-left: 4rem;
}

.ml-50 {
    margin-left: 5rem;
}

.ml-60 {
    margin-left: 6rem;
}

.ml-70 {
    margin-left: 7rem;
}

.ml-80 {
    margin-left: 8rem;
}

.ml-90 {
    margin-left: 9rem;
}

.ml-100 {
    margin-left: 100rem;
}

.mr-300 {
    margin-right: 30rem;
}

.mr-20 {
    margin-right: 20px;
}

.mr-30 {
    margin-right: 3rem;
}

.mr-40 {
    margin-right: 4rem;
}

.mr-50 {
    margin-right: 5rem;
}

.mr-60 {
    margin-right: 6rem;
}

.mr-70 {
    margin-right: 7rem;
}

.mr-80 {
    margin-right: 8rem;
}

.mr-90 {
    margin-right: 9rem;
}

.mr-100 {
    margin-right: 100rem;
}

.margin-center {
    margin: 0 auto;
}

.hero-shapes img.hero-plane-1 {
    top: -80px;
    left: 40%;
}
.hero-sub-title .hero-line {
    width: 4rem;
    height: 1px;
    position: absolute;
    top: 18%;
    left: 0;
    translate: 0 -50%;
    z-index: 1;
    background-color: var(--clr-def);
}

.hero-sub-title .hero-line::before {
    position: absolute;
    content: '';
    height: 1px;
    width: 30px;
    z-index: -1;
    background: var(--clr-def);
    opacity: 1;
    top: 5px;
    left: 0;
}

.hero-sub-title .hero-line::after {
    position: absolute;
    content: '';
    height: 1px;
    width: 20px;
    z-index: -1;
    background: var(--clr-def);
    opacity: 1;
    top: 10px;
    left: 0;
}

.about-opt .about-yr .about-yr-element::before {
    position: absolute;
    content: '';
    height: 20px;
    width: 20px;
    z-index: -1;
    background: #202942;
    opacity: 1;
    top: 0;
    right: -16px;
    clip-path: polygon(100% 0, 0 0, 0 100%);
}

.about-bottom .about-btm-btn {
    padding-right: 1rem;
    margin-right: 3rem;
    border-right: 1px solid #BBBBBB;
}

.hero-single .hero-content p {
    line-height: 3.2rem;
    margin-bottom: 5rem;
    color: var(--clr-white);
    padding-right: 21%;
    font-size: 18px;
}


.navbar-bar-shape{
    left: 0;
}

.top-bar-shape {
    right: -20rem;
    width: 400px;
    height: 100%;
}

.step-box .step-desc {
    transform: translateX(-50px);
}

.hero-btn .btn-1.btn-md {
    margin-right: 30px;
}

.feature-p-1 {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
}

.feature-p-2 {
    position: absolute;
    top: 0;
    right: 40px;
    z-index: -1;
}

.fade-in {
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 1.5s;
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
      transform: translatex(-100%);

	}
	100% {
		opacity: 1;
      transform: translatex(0%);
	}
}


.fade-out {
	opacity: 1;
	animation-name: fadeOutOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 1.5s;
}

@keyframes fadeOutOpacity {
	0% {
		opacity: 0;
      transform: translatex(100%);

	}
	100% {
		opacity: 1;
      transform: translatex(0%);
	}
}

.about-location {
    position: absolute;
    bottom: 0;
    left: -288px;
    z-index: -1;
}

.about-jahaj-2 {
    position: absolute;
    bottom: 0;
    right: -38rem;
    z-index: -1;
}


.bsnav-mobile .navbar {
    right: inherit;
    transform: translate3d(-300px, 0, 0);
    left: 0;
}

.top-box {
    margin-left: 3rem !important;
}