body, html {
    font-family: Karla!important;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
h1, h5 {
    font-family: Karla;
    font-weight: 800!important;
    margin: 0;
    letter-spacing: -.05rem;
}
h1 {
    padding: 0 0 1rem 0;
}
.nav-link:focus, .nav-link:hover {
    color: #deff4d!important;;
}
.rLogo {
    height: 3rem;
}
.rnav {
    padding:1rem 2.5rem!important;
    background:#002FAF;
    font-family: Karla;
    text-transform: uppercase;
}
.rnav a {
    color: #fff;
}
.navbar-nav .nav-link.active {
    color:#DEFF4D!important;
}
li.nav-item {
    padding: 0 .65rem!important;
}
li.nav-item:last-child {
    padding: 0 0.65rem 0 2rem !important;
    margin: 0 0 0 1rem!important;
  }
.rLogin {
    border:1px solid #DEFF4D;
    border-radius: .5rem;
    background: url(../assets/user.png) left center no-repeat;
    background-size: 1.5rem;
    background-position: .5rem;
}
.rLogin > ul.dropdown-menu {
    position: absolute;
    left: 0;
    top: 2.6rem;
    min-width: auto!important;
}
.container-fluid {
    --bs-gutter-x: 0!important;
}
.topHB {
    background: url(../assets/home-top-banner.jpg);
    background-size:cover;
    margin: 5.625rem 0 0 0!important;
    padding: 3rem 0 2.5rem 0;
}
.topB {
    background: url(../assets/top-bg.jpg);
    background-size:cover;
    margin: 5.625rem 0 0 0!important;
    padding: 2rem 0 0 0;
}
.headCopy span {
    display: block;
    width: 14rem;
    height: .5rem;
    background: #DEFF4D;
    margin: 0 0 0 -5rem;
    border-radius: 0 .5rem 0 0;
}
.headCopy h1, .rForm h1 {
    color: #002FAF;
    margin: 0 0 .5rem 0;
    padding: 0;
    width: 62%;
    line-height: 2.5rem;
}
.headCopy h1 {
    text-transform: uppercase;
}
.headCopy h2 {
    color: #002FAF;
    font-size: 1.5rem;
    font-weight: 700;
}
.headCopy p {
    margin: 0 0 1rem 0!important;
    color: #002FAF;
}
.headCopy .btn-warning {
    width: 50%;
}
#content {
    margin-top:3.625rem;
}
.rpdng {
    padding: 0 5rem;
}
.rpdng h5 {
    padding: 1.5rem 0 .5rem 0;
}
.rpdng p {
    width:84%;
    margin: 0 8% 1.5rem 8%;
    text-align: justify;
}
.ourprocess {
    width: 65%;
    margin: -3rem 17.5%0 17.5%;
}

.headBannerimg {
    width: 80%;
    margin: 0 10% 2rem 10%;
    border-radius: 0 0 3rem 0;
}
.contus {
    background: url(../assets/contact-us.jpg) center no-repeat!important;
    background-size: cover;
}
.locont {
    background: #fff;
    border: 1px solid #002FAF;
    color: #002FAF;
    border-radius: 0 0 3rem 0;
    width: 30%!important;
    margin: 0 1.1% 1.5rem 1.1%;
    display: inline-block;
}
.locont:hover {
    background: #DEFF4D;
    cursor: pointer;
}
.locont img {
    padding: 1rem 0;
}
#spacer {padding:4rem 0;}

.card {
    border: none!important;
}
.card:hover {
    cursor: pointer;
}
.card img {
    width:5rem;
    height: auto;
    margin: 0 auto 1rem auto;
}

.card a {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    text-decoration: none;
    color: #002FAF;
}

.this p {
    margin: 2rem 0;
}



.this p:nth-child(2) {
    margin:1rem 0 3rem 0;
}

.this h5 {
    text-transform: uppercase;
    font-weight: 700;
}

.btn-warning {
    text-transform: uppercase;
    font-weight: 700!important;
    background: #DEFF4D!important;
    color: #002FAF!important;
    border:none!important;
}
.sjobs {
    margin: 8rem 0 0 0;
}
.sjobs h1 {
    color: #002FAF;
    text-align: center;
    letter-spacing: -.1rem;
}
.ifra-sty {
    height: 90vh!important;
    width:100%;
    padding: 0;
    margin:0 auto;
}
.s01 {
    background: #0C62FB;
    padding: 4rem 0;
    color: #fff;
}

.s02 {
    background: #B6ACF9;
    padding: 4rem 0;
    color: #fff;
}
.weiss {
    background: #fff;
    color:#002FAF;

    .rpdng h1 {
        margin:0 0 2rem 0;
    }

    .rpdng h5 {
        margin: 0;
    }

    .rpdng p {
        width:100%;
        margin: 1rem 0;
    }
 
}
.hpi {
    border-radius: 0 0 2.5rem 0;
}
.carousel {
    margin: 2rem 0 0 0;
}
.carousel-inner {
    width: 80%;
    margin: 0 10%;
}


.carousel-item {
    width: 80%!important;
    background: #fff;
    padding: 1rem;
    border-radius: 1rem;
}


.carousel-item img {
    width: 25%;
    margin: 0 2% 0 0;
}
.carousel-item .techDesc {
    width: 73%;
    color: #002FAF;
}
.carousel-item p {
    margin-bottom: 0;
}

#spacer h1 {
    margin:0 0 2rem 0;
}

.imgBorder {
    width:100%;
    margin:0 auto;
  }
  .imgBorder > span:nth-child(1) {
     width: 7.4375rem;
     height: 7.4375rem;
     background:#1BE1F2;
    display:block;
    position:absolute;
  }
  .imgBorder > span:nth-child(2) {
    padding: 0.6rem 1.25rem;
    margin: 0.9rem 0 0 0.85rem;
    z-index: 10;
    background: rgba(0, 47, 175, .6);
    display:block;
    position:absolute;
    color:#fff;
    font-size:1.25rem;
    font-weight:800;
    border-radius:0 0 .5rem 0;
  }
  .imgBorder img {
    display:block;
    position:relative;
    top:.65rem;
    left:.65rem;
    border:.25rem solid #fff;
    width: -webkit-fill-available;
  }

  
  .imgBorderR > span:nth-child(1) {
    width: 7.4375rem;
    height: 7.4375rem;
    background:rgba(255, 77, 95, 1);
   display:block;
   position:absolute;
 }
 .imgBorderR > span:nth-child(2) {
   padding: 0.6rem 1.25rem;
   margin: 0.9rem 0 0 0.85rem;
   z-index: 10;
   background:rgba(255, 77, 95, .6);
   display:block;
   position:absolute;
   color:#fff;
   font-size:1.25rem;
   font-weight:800;
   border-radius:0 0 .5rem 0;
 }
 .imgBorderR img {
   display:block;
   position:relative;
   top:.65rem;
   left:.65rem;
   border:.25rem solid #fff;
   width: -webkit-fill-available;
   border-radius: 0 0 2rem 0;
 }

 .imgBorderY > span:nth-child(1) {
    width: 7.4375rem;
    height: 7.4375rem;
    background:rgba(222, 255, 77, 1);
   display:block;
   position:absolute;
 }
 .imgBorderY img {
   display:block;
   position:relative;
   top:.65rem;
   left:.65rem;
   border:.25rem solid #fff;
   width: -webkit-fill-available;
   border-radius: 0 0 2rem 0;
 }

 .why {
    color:#FF4D5F;
 }
 .whyR {
    background: #DEFF4D!important;
    width: 45%;
    padding: .5rem 1rem 0 1rem!important;
    margin: 0!important;
 }

.proud {
    background: #DEFF4D;
    padding: 4rem 0 0 0;
}

.opc {
    display: grid;
}
.opc > .cont, .cont {
    place-self: center;
}
.pSec, .rForm {
    padding: 4rem 0;
}
.rForm {
    background: #DEFF4D;
}
.rForm h1 {
    width: 100%;
    text-align: center;
    margin: 0 0 2rem 0;
}
.rForm h2 {
    margin: 0 0 1rem 0!important;
}
.rForm input {
    margin: 0 0 1rem 5%;
}
.rForm .btn-submit {
    background: #002FAF!important;
    color: #fff;
    text-transform: uppercase;
    padding: .65rem 0;
}
.pSec h2, .rForm h2, .proud h2 {
    font-size: 1.5rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #002FAF;
    margin: 0 0 2rem 0;
}
#start {
    color: #C7B9FF;
    border-top: 0.35rem solid #DEFF4D;
    line-height: 3.5rem;
}
.sindex {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
}
.sindex > * {
    height:1.25rem;
    flex: 1 1 0;
}
.sindex span:nth-child(1) {
    background: #0C62FB;
}
.sindex span:nth-child(2) {
    background: #1BE1F2;
}
.sindex span:nth-child(3) {
    background: #FF4D5F;
}
.sindex span:nth-child(4) {
    background: #B6ACF9;
}
.sindex span:nth-child(5) {
    background: #DEFF4D;
}
/*Dropdown*/
.dropdown-menu {
    background: #002FAF!important;
    border: none!important;
}
.dropdown-menu a:hover {
    cursor: pointer;
}
.dropdown:hover>.dropdown-menu {
    display: block;
  }
  
  .dropdown>.dropdown-toggle:active {
    /*Without this, clicking will make it sticky*/
      pointer-events: none;
  }
/*Dropdown*/
.footer-bs {
    font-family: Karla;
    font-weight: 400;
    background:#002FAF;
    color:#fff;
    min-height: 320px;
    left: 0;
    padding:1.5rem 2.5rem;
    margin: 0;
}
.footer-bs a {
    color: #fff;
}
.footer-bs h4 {
    font-size: 1.25rem;
    line-height: 1.25rem;
    padding: 0 0 1.25rem 0;
    border-bottom: 1px solid #fff;
    margin: 0 0 1.25rem 0;
}
.footer-bs ul {
    list-style-type: none;
    padding:0 0 .65rem 0;
}
.footer-bs li {
    padding: 0 0 .65rem 0!important;
}
.footer-bs a {
    text-decoration: none;
}

.hti {
    width:113.8%;
    height: 100%;
    position: relative;
    margin:0;
    padding:0;
    -webkit-clip-path: polygon(15% 0, 100% 0%, 100% 100%, 0% 100%);
clip-path: polygon(15% 0, 100% 0%, 100% 100%, 0% 100%);
z-index: 10;
}
.hti-b {
    position: relative;
    background:#DEFF4D;
    width: 113.8%;
    height: 100%;
    top: -370px;
    right: .65rem;
    -webkit-clip-path: polygon(15% 0, 100% 0%, 100% 100%, 0% 100%);
    clip-path: polygon(15% 0, 100% 0%, 100% 100%, 0% 100%);
}

.aup p {
    padding: 0 0 0 2rem;
}
.smedia a {
    margin-right: 1rem;
}

@media (width >= 800px) {
    .mImg, .oPm {
        display: none;
    }
}

/* Less than or equal to 700px */
@media (width <= 576px) {

    .headBannerimg {
        width: 100%;
    margin: 2rem auto;
    border-radius: 0 0 3rem 0;
    }

    .ourprocess {
        width: 96%;
        margin: 1rem 2% 0 2%;
    }
    .headCopy .btn-warning {
        width: 100%;
    }
    .navbar {
        width: 100%!important;
    }
    li.nav-item:last-child {
        padding: 0 0.65rem 0 2.5rem !important;
        margin: 0 0 0 0.5rem!important;
        width: 90%;
    }
    .hti {
        width: 125%;
        margin: 0 0 0 -1rem;
    }
    .hti-b {
        width: 173%;
    height: 110%;
    top: -215px;
    right: 2rem;
    -webkit-clip-path: polygon(15% 0, 100% 0%, 100% 100%, 0% 100%);
    clip-path: polygon(12% 0, 100% 0%, 100% 100%, 0% 100%);
    }
    .s01 img {
        width: 100%;
        margin: 0 0 1rem 0;
    }
    .s01 .btn-warning {
        margin:0 0 3rem 0;
    }
    .s01 .btn-warning a:nth-child(3){
        margin:0;
    }

    .imgBorder, .imgBorderR, .imgBorderY {
        width: 90%;
        margin: 1rem 5% 2rem 4%;
    }

    .opc > .cont, .cont {
        place-self: center;
        width: 80%;
        text-align: justify;
    }

    .cont > p {
        margin-top: 0;
        margin-bottom: 2rem;
    }

    .bfirst img, .bsecond img {
        width: 80px;
        margin: 1rem 0 0.5rem 0;
    }
    .card a {
        margin:0 0 1rem 0;
    }

    .this p {
        width: 80%;
        text-align: justify;
        margin: 0 auto 2rem auto;
    }
    .this p:nth-child(2) {
        margin: 0 auto 2rem auto;
    }
    .carousel-item img {
        width: 80%;
        margin: 0 10% 0 10%;
    }
    .carousel-item .techDesc {
        width: 80%;
        margin: 1rem 10%;
    }
    #spacer h2 {
        width: 80%;
        margin: 0 10% 1rem 10%!important;
    }
    .aup p {
        width: 80%;
        margin: 1rem 10%;
        text-align: justify;
        padding: 0;
    }
    .navbar-toggler {
        border: 1px solid #DEFF4D!important;
    }
    .navbar-toggler-icon {
        background: url('../assets/menu-bar.png') center no-repeat!important;
        background-size: 1.1875rem!important;
    }
    .navbar-toggler:focus {
        -webkit-box-shadow: 0px 0px 6px 0px rgba(222,255,77,1);
         -moz-box-shadow: 0px 0px 6px 0px rgba(222,255,77,1);
        box-shadow: 0px 0px 6px 0px rgba(222,255,77,1)!important;
    }
    .rForm .btn-submit {
        width: 80%;
        margin: 0 auto;
    }
    .locont {
        width:70%!important;
        margin: 0 15% 1.5rem;
    }
    .locont img {
        width:60px;
        height: auto;
    }
    .rpdng {
        padding: 0 3rem;
    }
    .rpdng p {
        width: 100%;
    }
    .headCopy h1, .rForm h1 {
        width: 100%;
    }
    .headCopy h2 {
        margin: 0 0 1rem 0;
    }
    .dImg, .oPd {
        display: none;
    }
    .topB {
        background: url(../assets/top-bg.jpg);
        background-size:cover;
        margin: 3rem 0 0 0!important;
    }
    .topB .btn {
        margin: 0 0 2rem 0;
    }
    .s01 {
        padding: 4rem 0 1rem 0;
    }
    .whyR {
        width:80%;
        margin: 0 10%!important;
     }
}