/*---------- Font Imports ------------*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Epilogue:wght@300;400;500;600;700&display=swap");
/*--------- Element Styles -----------*/
 * {
     box-sizing: border-box;
     margin: 0px;
     padding: 0px;
    /* outline: 1px solid red;
     */
}
 html {
     scroll-behavior: smooth;
}
 body {
     font-family: "Poppins", sans-serif;
     position: relative;
     z-index: -2;
}
 ul {
     list-style: none;
}
 a {
     text-decoration: none;
     color: white;
}
 input {
     all: unset;
}
 input::-webkit-contacts-auto-fill-button {
     visibility: hidden;
     display: none !important;
     pointer-events: none;
     position: absolute;
     right: 0;
}
 textarea {
     resize: none !important;
}
 .overflow {
     overflow: hidden;
}
 main {
     position: relative !important;
     z-index: -1 !important;
}
 #alert-box{
     display: flex;
     position: absolute;
     justify-content: center;
     float: right;
     z-index: 2;
     width: 75%;
     bottom: 8%;
}
.enquiry-footer{
    margin-top: 0rem;
}
 .why-img-box{
     justify-content: center;
     align-items: center;
}
.blob{
    display: none;
}

.nav-link {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

/* Button loader */

.load {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit
}

.load::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 3px solid #fff;
    width: 30px;
    height: 30px;
    border-left: 3px solid transparent;
    border-bottom: 3px solid transparent;
    animation: loading1 1s ease infinite;
    z-index: 10
}

.load::before {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 3px dashed #fff;
    width: 30px;
    height: 30px;
    border-left: 3px solid transparent;
    border-bottom: 3px solid transparent;
    animation: loading1 2s linear infinite;
    z-index: 5
}

@keyframes loading1 {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

button.active {
    transform: scale(.85)
}

button.activeLoading .loading {
    visibility: visible;
    opacity: 1
}

button .loading {
    opacity: 0;
    visibility: hidden
}
/*---------- images ------------ */
 .about-img{
     max-width: 500px;
     /* max-height: 500px; */
}
 .years-img{
     max-width: 188.29px;
     max-height: 112.67px;
}
 .clients-img{
     max-width: 225px;
     max-height: 147px;
}
 .projects-img{
     max-width: 179px;
     max-height: 149px;
}
 .why-img{
     max-width: 500px;
     /* max-height: 471.78px; */
}
 .mission-img{
     max-width: 191.35px;
     max-height: 221.49px;
}
 .vision-img{
     max-width: 224.45px;
     max-height: 182.98px;
}
 .hardware-img{
     max-width: 327px;
     max-height: 400px;
}
 .firmware-img{
     max-width: 400px;
     max-height: 400px;
}
 .app-img{
     max-width: 449px;
     max-height: 400px;
}
 .web-img{
     max-width: 408px;
     max-height: 400px;
    margin-bottom: 24px;
    margin-left: 13%;
}
 .career-image{
     max-width: 1123px;
     max-height: 393.91px;
}
/*---------------------- Class styles ------------*/
 .display-flex-column {
     display: flex;
     flex-direction: column;
}
 .card-black {
     background: #171717 !important;
}
 .regular {
     font-size: 20px;
}
 .transparent {
     background: transparent;
}
 .white {
     color: white !important;
}
 .mt-40 {
     margin-top: 60px;
}
 .gap-6 {
     gap: 220px;
}
 .gap-7 {
     gap: 60px;
}
 .mx-6 {
     margin: 0 120px;
}
 .p-0 {
     padding-right: 0;
     padding-left: 0;
}
 .dark {
     color: white !important;
     border: white !important;
}
 .dark-rounded-bg {
     background: #0000004d !important;
}
 .dark-green {
     background-color: #00bfa54d;
}
 .black {
     color: #000 !important;
}
 .color-black {
     color: #000 !important;
     font-size: 20px;
     font-family: "Epilogue", sans-serif;
}
 .nav-left {
     left: 0 !important;
}
 .color-black:hover {
     color: #00bfa5;
}
 .color-black .active {
     color: #00bfa5 !important;
}
 .start-1 {
     right: 70%;
}
 .font-color {
     color: #00bfa5;
}
 .epilogue {
     font-family: "Epilogue", sans-serif !important;
}
 .active {
     color: #00bfa5 !important;
     transition: 0.5s color ease-in-out;
}
 .none {
     display: none;
     visibility: hidden;
}
 .whiteText {
     color: #fff;
}
 .svg {
     background-image: url(../assets/images/about_us_dark.svg);
}
 nav li a.active {
     color: #00bfa5;
     font-weight: 600;
}
 .scrolled {
     color: black;
}
 .bg-img {
     max-width: 100vw;
     min-height: 100vh;
     background-image: url(../assets/images/bg-home.png);
     background-repeat: no-repeat;
     background-position: center center;
     background-attachment: fixed;
     position: relative;
     background-size: cover;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     background-size: cover;
     -o-background-size: cover;
     opacity: 0.95;
}
 #nav-toggle {
     color: white;
     z-index: 5;
}
 .mobile-nav {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     font-size: 28px;
     display: flex;
     gap: 15px;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     background-color: rgba(255, 255, 255, 0.15);
     backdrop-filter: blur(5px);
     -webkit-backdrop-filter: blur(5px);
     color: white;
     -webkit-transition: 1s;
     -moz-transition: 1s;
     -ms-transition: 1s;
     -o-transition: 1s;
     transition: 1s;
     transform: translateX(-100%);
     z-index: 6;
     overflow: hidden;
}
 .mobile-box {
     position: relative;
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 10px;
}
 .close_icon {
     position: absolute;
     top: 5%;
     right: 6%;
     height: 50px;
}
 .mobile-nav a {
     font-weight: 500;
     text-shadow: 0px 1px 1px rgba(0, 0, 0, 1);
     z-index: 5;
}
 .show-nav {
     transform: none;
}
 .hardware {
     color: white;
     font-size: 20px;
     position: absolute;
     width: 350px;
     right: 12%;
     bottom: 4%;
     float: right;
     border-top: 2px solid white;
     padding-top: 12px;
}
 .software {
     color: white;
     font-size: 20px;
     position: absolute;
     right: 2%;
     bottom: 15%;
     transform: rotate(-90deg);
}
 .topbar {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 41px;
}
 .logo {
     width: 140px;
     height: 72px;
}
 .toggle {
     width: 63px;
     height: 63px;
     cursor: pointer;
     transition: 0.5s all ease-in-out;
}
 #toggle {
     display: flex;
     align-items: center;
     gap: 16px;
     width: 63px;
     height: 63px;
     cursor: pointer;
     margin-right: 30px;
     transition: 0.5s all ease-in-out;
}
 .rotate-180 {
     transform: scaleX(-1);
}
 .nav-bar {
     position: fixed;
     left: 5vh;
     top: 20vh;
     z-index: 9;
     transition: all 0.5s;
}
 .side-nav li {
     transition: 1s color ease-in-out;
}
 .rotate li {
     font-size: 20px;
     font-family: "Epilogue", sans-serif !important;
     transform: rotate(-90deg);
}
 .nav-rotate {
     margin-bottom: 100px;
     transform: rotate(-90deg);
}
 .nav-rotate a {
     position: relative;
     color: rgba(255, 255, 255, 0.87);
     white-space: nowrap;
     font-size: 20px;
     font-family: "Epilogue", sans-serif;
}
 .nav-rotate a:hover {
     color: #00bfa5;
}
 .hero {
     padding-left: 80px;
     padding-top: 200px;
     margin-left: -200px;
}
 .main-section {
     display: flex;
     flex-direction: column;
     align-items: start;
     padding-left: 20%;
}
 .hardware {
     color: white;
     font-size: 20px;
     position: absolute;
     width: 350px;
     right: 12%;
     bottom: 4%;
     float: right;
     border-top: 2px solid white;
     padding-top: 12px;
}
 .software {
     color: white;
     font-size: 20px;
     position: absolute;
     right: 2%;
     bottom: 15%;
     transform: rotate(-90deg);
}
 .welcome {
     padding-top: 80px;
     font-size: 24px;
     line-height: 121px;
     color: white;
}
 .green {
     color: #00bfa5;
     font-size: 100px;
     font-weight: bolder;
}
 .research {
     font-size: 100px;
     line-height: 150px;
     color: white;
}
/*--------------------------------- About ---------------------------------*/
 .about-us {
     position: relative;
     padding: 100px 0px;
     overflow: hidden !important;
     z-index: -2;
}
 .blob-1 {
     position: absolute;
     top: -4%;
     right: -5%;
     width: 444.63px;
     height: 444.63px;
     border-radius: 444.63px;
     background: rgba(0, 191, 165, 0.5);
     filter: blur(197.8010711669922px);
     z-index: -2;
}
 .about img {
     padding-bottom: 100px;
}
 .about-info {
     text-align: justify;
     font-size: 24px;
     font-family: Poppins;
     font-style: normal;
     font-weight: 300;
     line-height: 41.4px;
}
 .about-info span:nth-child(1) {
     font-size: 48px;
     margin-left: 60px;
}
 .about-info span {
     margin-left: 60px;
}
 .years {
     width: 200px;
     height: 200px;
     background: #0000001a;
     border-radius: 50%;
}
 .clients {
     width: 200px;
     height: 200px;
     background: #0000001a;
     border-radius: 50%;
}
 .project {
     width: 200px;
     height: 200px;
     background: #0000001a;
     border-radius: 50%;
}
 .years, .clients, .project p {
     font-size: 25px;
}
 .client-img {
     padding-bottom: 30px;
}
 .project-img {
     width: 190px;
     height: 230px;
}
 .about-us-tiles {
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
     gap: 20px;
}
 .about-us-years, .about-us-clients, .about-us-projects {
     min-width: calc(100% / 3 - 20px);
     min-height: 218px;
     display: flex;
     align-items: center;
     justify-content: space-around;
     border-radius: 39px;
     background: #F5F5F5;
}
 .years-img {
     width: 188px;
     height: 112px;
}
 .clients-img {
     width: 211px;
     height: 124px;
}
 .projects-img {
     width: 179px;
     height: 127px;
}
 .digits {
     font-size: 51.321px;
     font-style: normal;
     line-height: 12.449px;
     text-transform: capitalize;
     display: flex;
     align-items: center;
     justify-content: space-around;
}
 .about-us-years, .about-us-clients, .about-us-projects p {
     font-size: 25.661px;
     font-style: normal;
     font-weight: 400;
     line-height: 12.449px;
     text-transform: capitalize;
}
/*-------------------------------- Why MWSRC ---------------------------------*/
 .why {
     position: relative;
}
 .blob-2 {
     position: absolute;
     top: -13%;
     left: -12%;
     width: 444.63px;
     height: 444.63px;
     border-radius: 444.63px;
     background: rgba(0, 191, 165, 0.5);
     filter: blur(197.8010711669922px);
     z-index: -2;
     overflow: hidden;
}
 .mission {
     position: relative;
     max-width: 500px;
     height: 310px;
     background: #0000000d;
     border-radius: 45px;
     padding: 0 40px;
}
 .mission img:nth-child(1) {
     position: absolute;
     top: 16%;
     left: 12%;
     width: auto;
     height: 113px;
}
 .mission div {
     position: absolute;
     top: 14%;
     right: 25%;
     width: 223px;
     height: 114px;
     padding-left: 42px;
}
 .mission div p {
     color: #00bfa5;
     font-size: 43.922px;
     font-style: normal;
     font-weight: 300;
     text-transform: uppercase;
     margin-top: 10%;
}
 .mission .p {
     position: absolute;
     bottom: 9%;
     padding: 20px;
     font-size: 18px;
     line-height: 36px;
     text-indent: 32%;
}
 .vision {
     position: relative;
     max-width: 500px;
     height: 310px;
     background: #0000000d;
     border-radius: 45px;
     padding: 0px 40px;
     overflow: hidden;
}
 .vision img {
     position: absolute;
     max-width: 120px;
     height: 106px;
     top: 15%;
     left: 14%;
}
 .vision div {
     position: absolute;
     top: 20%;
     right: 55%;
     display: flex;
     flex-direction: column;
}
 .vision div p {
     position: absolute;
     color: #00bfa5;
     font-size: 43.922px;
     font-style: normal;
     font-weight: 300;
     text-transform: uppercase;
}
 .vision .p {
     position: absolute;
     bottom: 0%;
     text-align: justify;
     font-size: 18px;
     line-height: 36px;
     padding: 20px;
     padding-right: 60px;
     text-indent: 48%;
     text-align-last: left;
}
 .why-tiles {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 20px;
     margin-bottom: 100px;
}
 .why-mission, .why-vision {
     min-width: calc(100% / 2 - 20px);
     min-height: 310px;
     display: flex;
     align-items: center;
     gap: 30px;
     border-radius: 44.837px;
     background: rgba(0, 0, 0, 0.05);
}
 .mission-img {
     width: 190px;
     height: 220px;
}
 .vision-img {
     width: 220px;
     height: 180px;
}
 .why-mission div h1 {
     color: #00bfa5;
     font-size: 43.922px;
     font-style: normal;
     font-weight: 300;
     text-transform: uppercase;
}
 .why-vision div h1 {
     color: #00bfa5;
     font-size: 43.922px;
     font-style: normal;
     font-weight: 300;
     text-transform: uppercase;
}
 .why-mission .p {
     font-size: 20.704px;
     font-style: normal;
     font-weight: 300;
     line-height: 39.216px;
     display: inline-block;
     padding-right: 20px;
}
 .why-vision .p {
     font-size: 20.704px;
     font-style: normal;
     font-weight: 300;
     line-height: 39.216px;
     display: inline-block;
     padding-right: 20px;
}
/*------------------------------------ Service ---------------------*/
 .services {
     padding: 50px 0px;
}
 #services {
     overflow: hidden;
}
 .blob-3 {
     position: absolute;
     top: 50%;
     right: 0%;
     width: 588.225px;
     height: 593.496px;
     border-radius: 593.496px;
     background: rgba(0, 191, 165, 0.5);
     filter: blur(368.9583435058594px);
     z-index: -2;
     will-change: transform;
}
 .blob-4 {
     position: absolute;
     bottom: 32%;
     left: 2%;
     width: 512px;
     height: 517px;
     border-radius: 517px;
     background: rgba(0, 191, 165, 0.5);
     filter: blur(350px);
     z-index: -2;
}
 .h1 {
     font-size: 84px;
     font-weight: 300;
     line-height: 89.143px;
     letter-spacing: 5.04px;
     padding-bottom: 5%;
     padding: 50px 0px;
}
 #services h1 span {
     color: #00bfa5;
     font-size: 128px;
     font-weight: 300;
     line-height: 89.143px;
     letter-spacing: 7.68px;
     text-transform: lowercase;
}
 .services .Card {
     position: relative;
     width: 100%;
     height: 373px;
     background-color: #00bfa51a;
     padding: 0;
     padding-left: 10%;
     border-radius: 48px;
}
 .gap-180 {
     gap: 180px;
}
 .gap-150{
     gap:150px;
}
 .hardware-img {
     /* width: 418px; */
     /* height: 520px; */
     
     margin-left: 24%;
}
 .firmware-img {
     /* width: 370px; */
     /* height: 398px; */
     margin-bottom: 8%;
     margin-left: 24%;
}
 .app-img {
    margin-left: 12%;
}

 .services .Card .content {
     flex: 0 0 60%;
}
 .services .Card::before {
     position: absolute;
     content: url(../assets/images/curve-green.svg);
     top: 0%;
     left: 0%;
     rotate: 360deg;
}
 .services .Card:nth-child(2)::before, .services .Card:nth-child(5)::before {
     content: url(../assets/images/curve-green.svg);
}
 .services .Card h1 {
     font-size: 31px;
     font-weight: 500;
     line-height: 40px;
     letter-spacing: 0em;
     text-align: left;
     padding-bottom: 5%;
}
 .services .Card p {
     font-size: 16px;
     font-weight: 300;
     line-height: 24px;
     letter-spacing: 0.01em;
     text-align: left;
}
 .iot-mobile {
     padding-top: 10px;
}
/*------------------------------------ Career ----------------------------*/
 #career {
     position: relative;
     height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: -2;
}
 .blob-5 {
     position: absolute;
     bottom: -15%;
     left: 2%;
     width: 453px;
     height: 460px;
     border-radius: 460px;
     background: rgba(0, 191, 165, 0.5);
     filter: blur(368.9583435058594px);
     z-index: -2;
}
 .career {
     padding: 50px 0px;
}
 .career h1 {
     font-size: 84px;
     line-height: 90px;
     font-weight: 300 !important;
     padding-bottom: 50px;
     padding-top: 50px;
}
 .career h1 span:nth-child(1) {
     color: #00bfa5;
     display: inline-block;
     transform: scaleX(-1);
}
 .career h1 span:nth-child(2) {
     color: #00bfa5;
}
 .career div p {
     font-size: 32px;
     line-height: 60px;
}
 .career .mail-us {
     max-width: 357px;
     max-height: 146px;
     font-size: 60px;
     line-height: 80px;
     font-weight: normal;
     text-transform: uppercase;
     background-color: white;
     display: flex;
     padding: 16px 64px;
     justify-content: center;
     align-items: center;
     gap: 9.202px;
     border-radius: 20px;
     border: 1px solid #000;
     cursor: pointer;
     transition: 0.5s all ease-in-out;
}
 .career-mail-box {
     display: flex;
     align-items: center;
}
 .career-mail-text {
     color: #00bfa5;
     font-size: 25px;
     margin-bottom: 0px;
}
 .career-image-box {
     padding-top: 20px;
     display: flex;
     justify-content: center;
     max-width: 100%;
}
 .career-image {
     width: 100%;
}

 .dark-btn {
     background: transparent !important;
     border: 1px solid white !important;
}
 .career .mail-us span {
     color: #00bfa5;
}
/*--------------------------------- Contact Us ------------------------------*/
 .contact-us {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: space-between;
}
 #contact-us {
     position: relative;
     z-index: -10;
}
 .blob-6 {
     position: absolute;
     top: 65%;
     right: 0%;
     width: 445px;
     height: 507px;
     border-radius: 507px;
     background: rgba(0, 191, 165, 0.5);
     filter: blur(368.9583435058594px);
     z-index: -2;
}
 .contact-us .map {
     align-self: flex-end;
}
 .contact-us h1 {
     font-size: 84px;
     font-weight: 300 !important;
     line-height: 90px;
     padding-top: 100px;
}
 .contact-us span {
     color: #00bfa5;
}
 .contact-us .address {
     font-size: 24px;
     font-weight: 300;
     line-height: 52px;
}
 .contact-us div h1 {
     font-size: 32px;
     font-weight: 600;
     line-height: 71px;
}
 .contact-us .contact p {
     font-size: 24px;
     font-weight: 500;
     line-height: 56px;
     color: #00bfa5;
     margin-bottom: 0px;
}
 .map-container {
     position: relative;
     display: flex;
     flex-direction: column;
     margin-top: 10%;
}
 .map-container p {
     position: absolute;
     left: 35%;
     z-index: 4;
     color: #fff;
     font-size: 32px;
     font-weight: 600;
     line-height: 60.53px;
}
 .location {
     position: absolute;
     top: -19%;
     left: 23%;
     z-index: 3;
}
 .contact-us .map {
     width: 450px;
     height: 450px;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     border-radius: 60px;
     padding: 100px;
     overflow-y: hidden;
}
 .contact-us .map iframe {
     position: absolute;
     height: 136%;
     width: 100%;
     left: 0;
     top: 0;
     margin: -150px 0px;
     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
 .contact-us .map img {
     z-index: 9999 !important;
     margin-top: -184%;
}
 .mobile-number {
     opacity: 1 !important;
     color: #00bfa5 !important;
     -webkit-text-fill-color: #00bfa5 !important;
     -webkit-opacity: 1 !important;
}
/*--------------------------- Enquiry --------------------------------------*/
 #enquiry {
     position: relative;
     z-index: 1;
     height: 100%;
}
 .blob-7 {
     position: absolute;
     top: 0%;
     left: 0%;
     width: 521px;
     height: 529px;
     border-radius: 529px;
     background: rgba(0, 191, 165, 0.5);
     filter: blur(350px);
     z-index: -2;
}
 .blob-8 {
     position: absolute;
     bottom: -50%;
     left: -10%;
     width: 584.008px;
     height: 593.496px;
     border-radius: 593.496px;
     background: rgba(0, 191, 165, 0.5);
     filter: blur(368.9583435058594px);
     z-index: -2;
}
 .enquiry {
     margin-top: 100px;
     padding: 50px 0px;
     width: 100%;
     height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
}
 #enquiry h1 {
     font-size: 84.972px;
     font-weight: 300 !important;
     line-height: 91.63px;
     padding: 80px 0px;
     margin-top: 10%;
     margin-bottom: -15%;
}
 #enquiry h1 span {
     color: #00bfa5;
}
 .enquiry .left {
     margin-bottom: 10px;
}
 .enquiry .name, .email, .number, .subject {
     position: relative;
}
 .enquiry input {
     width: -webkit-fill-available;
     padding: 20px 15px;
     border: 2px solid #9e9e9e;
     border-radius: 5px;
     outline: none;
     box-sizing: border-box;
}
 .enquiry .name input {
     position: relative;
}
 .float {
     top: 0% !important;
     background-color: #212529 !important;
     color: white !important;
}
 .float-y {
     transform: translateY(-150%) !important;
}
 .float-com {
     top: -5% !important;
     background-color: #212529 !important;
     color: white !important;
}
 .float-light {
     top: 0% !important;
     background-color: #fff !important;
     color: #000 !important;
}
 .float-light-5 {
     top: -5% !important;
     background-color: #fff !important;
     color: #000 !important;
}
 .enquiry .name label {
     position: absolute;
     left: 4%;
     top: 50%;
     transform: translateY(-50%);
     font-size: 15.07px;
     padding: 0 5px;
     border-radius: 5px;
     transition: all 0.5s;
     pointer-events: none;
}
 .enquiry .email label {
     position: absolute;
     left: 4%;
     top: 50%;
     transform: translateY(-50%);
     font-size: 15.07px;
     padding: 0 5px;
     border-radius: 5px;
     transition: all 0.5s;
     pointer-events: none;
}
 .enquiry .number label {
     position: absolute;
     left: 4%;
     top: 50%;
     transform: translateY(-50%);
     font-size: 15.07px;
     padding: 0 5px;
     border-radius: 5px;
     transition: all 0.5s;
     pointer-events: none;
}
 .enquiry .subject label {
     position: absolute;
     left: 4%;
     top: 50%;
     transform: translateY(-50%);
     font-size: 15.07px;
     padding: 0 5px;
     border-radius: 5px;
     transition: all 0.5s;
     pointer-events: none;
}
 .enquiry .comments {
     position: relative;
}
 .enquiry .comments textarea {
     position: relative;
     padding: 20px;
     border: 2px solid #9e9e9e;
     border-radius: 5px;
     outline: none;
     background: transparent;
}
 .enquiry .comments label {
     position: absolute;
     left: 4%;
     top: 6%;
     font-size: 15.07px;
     padding: 0 5px;
     border-radius: 5px;
     transition: all 0.5s;
     pointer-events: none;
}
 .enquiry button {
     width: 160px;
     height: 80px;
     float: right;
     font-size: 26px;
     font-weight: 700;
     border: 1px solid #000;
     border-radius: 12px;
     background-color: #000;
     color: white;
     transition: 0.5s all ease-in-out;
     position: relative;
}
 .enquiry button:active {
     opacity: .5;
}
 .dark-submit {
     background-color: #00bfa5 !important;
     color: white !important;
     border: 1px solid #00bfa5 !important;
}
 .light-submit {
     background-color: #000 !important;
     color: white !important;
     border: 1px solid #000 !important;
}
 .comments textarea {
     height: 200px;
}
 .enquiry-field-1 ,.enquiry-field-2{
     display: flex;
     justify-content: center;
     flex-direction: column;
}
 .enquiry .col-12 {
     display: flex;
     justify-content: flex-end;
     padding-right: calc(var(--bs-gutter-x) * .5);
     padding-left: calc(var(--bs-gutter-x) * .5);
}
/* Footer */
 footer {
     width: 100%;
     position: relative;
}
 .footer {
     width: 100%;
}
/*---------------------------------------------------- Media Queries ---------------------------------------------------------- */
 @media screen and (min-width: 2560px) and (max-width: 2560px) {
     main {
         position: relative !important;
         z-index: -1;
    }
     .hero {
         padding-left: 2% !important;
         padding-top: 20% !important;
    }
     .nav-bar {
         left: 4vh;
         top: 26vh;
    }
     #enquiry {
         padding: 0 26%;
         margin-bottom: 100px;
    }
     #enquiry h1 {
         margin-left: -3%;
    }
     .enquiry {
         height: 100%;
         padding: 0 0 !important;
    }
     .enquiry .left {
         margin-left: -8%;
    }
     .enquiry .right {
         margin-left: 8%;
    }
     #enquiry h1 {
         margin-bottom: 0;
    }
     .mission-vision {
         margin-top: 30px;
    }
     .enquiry {
         padding:0;
         margin-bottom: 20vh;
         height: 50vh !important;
         margin-top:0px;
    }
     .enquiry .col-12{
         margin-top: 5vh;
         margin-bottom: 5vh;
    }
    #alert-box{
        left: 12%;
        position: absolute;
        bottom: 12%;
    }
    .enquiry-body{
        padding-bottom:50px;
    }
}
 @media screen and (min-width: 1441px) and (max-width: 1540px) {
     .welcome {
         font-size: 22px !important;
         line-height: 100px !important;
         padding-top: 40px !important;
    }
     .research {
         font-size: 80px !important;
         line-height: 112px !important;
    }
     .green {
         color: #00bfa5;
         font-size: 80px !important;
    }
     .nav-rotate {
         margin-bottom: 80px !important;
    }
     .vision .p {
         text-indent: 45%;
    }
     .enquiry {
         height: 100%;
    }
     #enquiry {
         margin-bottom: 4%;
    }
     #enquiry h1 {
         margin-bottom: 10px;
         padding-bottom: 0px;
    }
     .name, .email, .number, .subject, .comments {
         width: 100%;
    }
     /* .name input, .email input, .number input, .subject input {
         width: 50%;
    } */
     .enquiry {
        margin-top:0px;
         /* padding: 0 16% !important; */
    }
     .career h1 {
         font-size: 72px;
         padding-top: 30px;
         padding-bottom: 15px;
    }
     .career div p {
         font-size: 24px;
         line-height: 50px;
    }
     .career-image {
         width: 600px !important;
    }
     .contact-us h1 {
         padding-top: 50px !important;
    }
     .map-container {
         margin-top: 5% !important;
    }
    #alert-box{
            width: 85%;
        bottom: 8%;
    }
}
 @media screen and (min-width: 1440px) and (max-width: 1441px) {
    .location{
        left: -7%  !important;
    }
     #career {
         height: 100%;
    }
     #enquiry h1 {
         margin-bottom: 0;
         padding: 80px 120px !important;
    }
     .career {
         padding-left: 8%;
    }
     .career h1 {
         font-size: 72px;
         padding-top: 30px;
         padding-bottom: 15px;
    }
     .career div p {
         font-size: 30px;
    }
     .career-image {
         padding-top: 20px;
         width: 700px !important;
    }
     .map-container {
         flex-direction: unset;
    }
     .map-container p {
         left: 7% !important;
    }
     .location {
         top: -19%;
         left: -6%;
    }
     .why-img {
         height: 650px;
    }
     .contact-us {
         padding-left: 8%;
    }
     #services .h1 {
         padding-left: 8%;
    }
     .enquiry {
         padding: 0px 120px !important;
         margin-top:0px 
    }
}
 @media screen and (min-width: 1362px) and (max-width: 1599px) {
     .hero .col-lg-12 {
         padding-left: 10%;
    }
     .enquiry {
         height: 100%;
         padding: 100px 120px;
    }
     .enquiry button {
         margin-top: 3%;
    }
     .map-container p{
         /* left: 24%; */
    }
     .location{
         /* left: 10%; */
    }
     .address-box {
         padding-left: 40px;
    }
}
/* Large Screen */
 @media (min-width: 1361px) {
     .nav-rotate {
         margin-bottom: 100px;
    }
     .side-nav li a {
         font-size: 16px;
    }
     .hero {
         padding-left: 30px;
         padding-top: 0px;
         margin-left: 0px;
    }
     .welcome {
         padding-top: 80px;
         font-size: 25px;
         line-height: 121px;
         color: white;
    }
     .green {
         color: #00bfa5;
         font-size: 100px;
         font-weight: bolder;
    }
     .research {
         font-size: 100px;
         line-height: 150px;
         color: white;
    }
     .hardware {
         width: 200px;
         font-size: 16px;
         padding-top: 6px;
         letter-spacing: 1px;
         padding-left: 6px;
         bottom: 1%;
    }
     .software {
         font-size: 16px;
         letter-spacing: 1px;
    }
     .mission-vision {
         padding-left: 100px;
    }
     .vision {
         margin-left: 50px;
    }
     .enquiry {
         padding:0;
         height: 75vh;
         margin-bottom: 50px;
    }
     .career-image{
         width: 75%;
    }
}
 @media screen and (min-width: 1910px) and (max-width: 1921px) {
     .portfolio {
         margin-top: 8%;
    }
     #contact-us {
         height: 100vh;
    }
     .contact-us .col-md-6 {
         padding-left: 4%;
    }
     #enquiry {
         padding: 0 10%;
    }
     .enquiry {
         /* padding: 0px 10% !important; */
    }
     .name, .email, .number, .subject, .comments {
         width: 100%;
    }
     .name input, .email input, .number input, .subject input {
         /* width: 50%; */
    }
}
 @media screen and (min-width: 1282px) and (max-width: 1360px) {
     .hero .col-lg-12 {
         padding-left: 10%;
         padding-top: 10%;
    }
}
/******************** Medium Screens ******************/
 @media (min-width: 1025px) and (max-width: 1360px) {
     .services .iot-mobile .content h1 {
         padding-top: 30px;
    }
     .nav-bar {
         position: fixed;
         left: 8vh;
         top: 25vh;
    }
     .nav-rotate {
         margin-bottom: 60px;
    }
     .side-nav li a {
         font-size: 14px;
    }
     .hero {
         padding-left: 140px;
         padding-top: 0px;
         margin-left: 0px;
    }
     .welcome {
         padding-top: 0px;
         font-size: 25px;
         line-height: 80px;
         color: white;
    }
     .green {
         color: #00bfa5;
         font-size: 60px;
         font-weight: bolder;
    }
     .research {
         font-size: 60px;
         line-height: 100px;
         color: white;
    }
     .hardware {
         width: 200px;
         font-size: 14px;
         padding-top: 6px;
         letter-spacing: 1px;
         padding-left: 6px;
         bottom: 0%;
    }
     .software {
         font-size: 14px;
         letter-spacing: 1px;
         bottom: 12%;
    }
     .about-us {
         padding: 100px 0px;
    }
     .about img {
         width: 70%;
         padding-bottom: 100px;
    }
     .why-mission p, .why-vision p {
         font-size: 16px !important;
    }
     .why-img {
         width: 80%;
         margin-left: 100px;
    }
     .about-info {
         text-align: justify;
         font-size: 16px;
         font-weight: 300;
         line-height: 32px;
    }
     .about-info span:nth-child(1) {
         font-size: 38px;
         margin-left: 60px;
    }
     .about-info span {
         margin-left: 60px;
    }
     .years, .clients, .project p {
         font-size: 20px;
    }
     .portfolio {
         padding-left: 105px;
    }
     .mission-vision {
         padding-left: 100px;
    }
     .gap-6 {
         gap: 150px;
    }
     .mission {
         position: relative;
         width: 400px;
         height: 210px;
         background: #0000000d;
         border-radius: 45px;
         padding: 0 40px;
    }
     .mission img:nth-child(1) {
         position: absolute;
         top: 6%;
         left: 16%;
         width: 64px;
         height: 113px;
    }
     .mission div {
         position: absolute;
         top: 8%;
         right: 15%;
         width: 223px;
         height: 114px;
         padding-left: 42px;
    }
     .mission div p {
         color: #00bfa5;
         font-size: 36px;
         font-style: normal;
         font-weight: 300;
         text-transform: uppercase;
    }
     .mission .p {
         position: absolute;
         bottom: 2%;
         padding: 20px;
         font-size: 14px;
         line-height: 26px;
         padding-left: 20px;
    }
     .mission p span {
         padding-left: 0px;
    }
     .vision {
         position: relative;
         width: 400px;
         height: 210px;
         background: #0000000d;
         border-radius: 45px;
         padding: 0px 40px;
         overflow: hidden;
    }
     .vision img {
         position: absolute;
         width: 90px;
         height: 106px;
         top: 8%;
         left: 18%;
    }
     .vision div {
         position: absolute;
         top: 16%;
         right: 52%;
         display: flex;
         flex-direction: column;
    }
     .vision div p {
         position: absolute;
         top: 10%;
         color: #00bfa5;
         font-size: 43.922px;
         font-style: normal;
         font-weight: 300;
         text-transform: uppercase;
    }
     .vision .p {
         position: absolute;
         display: block;
         bottom: 2%;
        /* right: 6%;
         */
         text-align: justify;
         font-size: 14px;
         line-height: 26px;
         padding: 0px;
         padding-right: 62px;
    }
     .vision .p span {
         padding-left: 146px;
    }
     .why-tiles {
         margin-bottom: 100px;
    }
     #services .h1 {
         padding-left: 8%;
         margin-top: 0;
    }
     .services .content h1 {
         font-size: 32px;
    }
     .services .content p {
         font-size: 14px;
         line-height: 18px;
    }
     .services {
         margin-left: 12% !important;
         margin-bottom: 100px;
    }
     .services .Card {
         width: 90%;
    }
     .career {
         padding-left: 8%;
         margin-bottom: 100px;
    }
     .career div p {
         padding: 0 20px !important;
    }
     .career-mail-box {
         padding: 0 20px !important;
    }
     .career h1 {
         font-size: 72px;
         padding-top: 50px;
         padding-bottom: 15px;
    }
     .career-image {
         height: 300px !important;
    }
     .career div p {
         font-size: 22px;
         line-height: 40px;
         padding: 0 64px;
    }
     .career-mail-box {
         padding: 0 64px;
    }
     .career .col-md-2 {
         padding-left: 14%;
    }
     .career .mail-us {
         max-width: 357px;
         max-height: 146px;
         display: flex;
         justify-content: center;
         align-items: center;
         gap: 9.202px;
         font-size: 30px;
         line-height: 78px;
         font-weight: normal;
         background-color: white;
         padding: 0px 46px;
         margin-right: 60px;
    }
     #contact-us {
         /* padding: 50px 120px; */
         padding: 120px 120px 90px 120px;
         margin-bottom: 50px;
    }
     .contact-us {
         display: flex;
         align-items: center;
         justify-content: space-around;
         gap: 0px;
         padding-left: 4%;
    }
     .contact-us h1 {
         font-size: 72px;
         line-height: 80px;
         margin-left: -18%;
         padding-top: 0;
    }
     .map-container {
         margin-top: 0;
    }
     .contact-h1 {
         padding-left: 9%;
    }
     .contact-us .address {
         font-size: 20px;
         font-weight: 300;
         line-height: 20px;
         margin-left: 10%;
    }
     .contact-us div h1 {
         font-size: 30px;
         font-weight: 600;
         line-height: 60px;
         margin-left: 10%;
    }
     .contact-us .contact p {
         font-size: 18px;
         font-weight: 500;
         line-height: 48px;
         color: #00bfa5 !important;
         margin-bottom: 0px;
    }
     .contact {
         margin-left: 10%;
    }
     .contact-us .map {
         scale: 0.7;
         margin-bottom: -10%;
         margin-right: -10%;
    }
     .location {
         top: -4%;
         left: 21%;
    }
     .map-container div p {
         top: 18%;
         left: 36%;
    }
     #enquiry h1 {
         padding: 50px 115px 80px 115px !important;
         padding-left: 8%;
         margin-top: 0;
    }
     .enquiry {
         height: 100%;
         padding: 50px 112px;
    }
    .enquiry-footer{
        margin-top: 3rem !important;
    }
}
/*------------------------------------- Desktops -------------------*/
 @media (min-width: 1025px) and (max-width: 1200px) {
    .comments textarea {
        height: 175px !important;
    }
     .iot-mobile {
         background-color: rebeccapurple;
         padding-top: 30px;
    }
     .nav-rotate {
         margin-bottom: 60px;
    }
     .side-nav li a {
         font-size: 14px;
    }
     .hero {
         padding-left: 180px;
         padding-top: 0px;
         margin-left: 0px;
    }
     .welcome {
         padding-top: 80px;
         font-size: 22px;
         line-height: 60px;
         color: white;
    }
     .green {
         color: #00bfa5;
         font-size: 58px;
         font-weight: bolder;
    }
     .research {
         font-size: 58px;
         line-height: 85px;
         color: white;
    }
     .hardware {
         width: 200px;
         font-size: 16px;
         padding-top: 6px;
         letter-spacing: 1px;
         padding-left: 6px;
    }
     .software {
         font-size: 16px;
         letter-spacing: 1px;
    }
     .about img {
         width: 80%;
         padding-bottom: 100px;
    }
     .about-info {
         text-align: justify;
         font-size: 18px;
         font-weight: 300;
         line-height: 32px;
    }
     .about-info span:nth-child(1) {
         font-size: 36px;
         margin-left: 60px;
    }
     .about-info span {
         margin-left: 60px;
    }
     .years, .clients, .project {
         width: 150px;
         height: 150px;
    }
     .gap-6 {
         gap: 50px;
    }
     .mission-vision {
         padding: 0 50px !important;
    }
     .mission .p span {
         padding: 0;
    }
     .mission div {
         right: 15%;
    }
     .vision .p {
         bottom: -8%;
    }
     .services {
         margin: 0;
         padding: 0;
    }
     .services .content h1 {
         font-size: 32px;
    }
     .services .content p {
         font-size: 14px;
         line-height: 18px;
    }
     .location {
         left: 7%;
    }
     .map-container div p {
         left: 26%;
    }
     .enquiry {
         padding: 0 100px;
         height: 100%;
    }
     .enquiry .inputs {
         width: 100%;
         padding: 10px 0;
    }
     .enquiry #comments {
         width:-webkit-fill-available;
         padding: 20px 80px 10px 20px;
    }
     .gap-7 {
         gap: 40px;
    }
     .enquiry button {
         font-size: 24px;
         width: 140px;
         height: 60px;
    }
}
/* Laptops */
 @media (min-width: 1360px) and (max-width: 1370px) {
     .map-container {
         margin-top: 0 !important;
    }
     .contact-us div h1 {
         padding-top: 50px !important;
    }
}
 @media (min-width: 1020px) and (max-width: 1024px) {
     .hero {
         padding-left: 17% !important;
         padding-top: 14% !important;
    }
     .enquiry button {
         margin-top: -36% !important;
    }
     #enquiry h1 {
         padding: 50px 120px !important;
    }
     .career h1 {
         font-size: 72px;
         padding-top: 15px;
         padding-bottom: 15px;
         font-weight: 300;
    }
     .career div p {
         font-size: 24px;
         line-height: 50px;
    }
     .career-image {
         width: 600px !important;
    }
     .about-us-tiles {
         justify-content: center;
    }
    #alert-box{
        bottom: 30%;
    }
}
 @media (min-width: 769px) and (max-width: 1024px) {
     .nav-bar {
         position: fixed;
         left: 5vh;
         top: 26vh;
    }
     .topbar {
         padding: 40px 10px;
    }
     .nav-rotate {
         margin-bottom: 50px;
    }
     .side-nav li a {
         font-size: 14px;
    }
     .hero {
         padding-left: 180px;
         margin-left: 0px;
         padding-top: 40px;
    }
     .welcome {
         padding-top: 80px;
         font-size: 18px;
         line-height: 60px;
         color: white;
    }
     .green {
         color: #00bfa5;
         font-size: 48px;
         font-weight: bolder;
    }
     .research {
         font-size: 48px;
         line-height: 85px;
         color: white;
    }
     .hardware {
         width: 200px;
         font-size: 14px;
         padding-top: 6px;
         letter-spacing: 1px;
         padding-left: 6px;
    }
     .software {
         font-size: 14px;
         letter-spacing: 1px;
    }
     .about-img {
         scale: 0.9;
    }
     .about-info {
         padding-bottom: 50px;
         font-size: 20px;
         line-height: 34.4px;
         padding-top: 8%;
    }
     .portfolio {
         flex-direction: row !important;
         gap: 50px;
    }
     .years, .clients, .project {
         scale: 0.8;
    }
     .why .col-md-6 {
         padding-left: 0px;
    }
     .mission {
         margin-left: 8%;
    }
     .mission, .vision {
         width: 200%;
         scale: 0.8;
    }
     .vision .p {
         bottom: 0%;
    }
     .why-img {
         scale: 0.9;
    }
     .why-mission, .why-vision {
         min-height: 170px !important;
    }
     .why-mission div h1, .why-vision div h1 {
         font-size: 28px;
         line-height: 68px;
    }
     .why-mission .p, .why-vision .p {
         font-size: 12px;
         line-height: 25px;
    }
     .mission-img {
         width: 104px;
         height: 131px;
    }
     .vision-img {
         width: 125px;
         height: 120px;
    }
     .why-tiles {
         padding: 0 40px 0 60px;
    }
     .gap-180 {
         gap: 60px;
    }
     .services {
         padding-left: 0px;
         margin: 0;
    }
     .services .Card .content h1 {
         font-size: 28px;
         line-height: 34px;
    }
     .services .Card .content p {
         font-size: 16px;
         line-height: 22px;
    }
     #services .h1 {
         padding: 50px 80px;
    }
     .services .Card {
         scale: 0.8;
    }
     #services h1 span {
         font-size: 100px;
    }
     #career {
         height: 100%;
    }
     .career h1 {
         padding: 50px 64px;
         font-size: 56px;
    }
     .career div p {
         font-size: 24px;
         line-height: 40px;
         padding: 0 64px;
    }
     .career .mail-us {
         font-size: 40px;
         line-height: 60px;
    }
     .career-mail-box {
         padding: 0 58px;
    }
     #contact-us {
         padding-left: 80px;
    }
     .contact-us {
         display: flex;
         flex-direction: row;
         padding-left: 7%;
    }
     .contact-us h1 {
         font-size: 56px;
         padding-left: 0;
         margin-left: -3%;
    }
     .contact-us .address {
         line-height: 40px;
    }
     .contact-us .address p {
         margin-bottom: 0;
    }
     .contact-us .col-md-6 {
         align-self: flex-start;
         scale: 0.8;
    }
     .contact-us .map-container {
         align-self: flex-start;
         scale: 0.7;
         margin-top: 9%;
    }
     .contact-us h1 {
         padding-top: 50px !important;
    }
     .map-container {
         margin-top: 5% !important;
    }
     .map-container div p{
            left: 1%;
    }
    .location {
        left: -16%;
    }
     #enquiry h1 {
         padding: 80px 0px 0px 80px !important 
    }
     .enquiry {
         min-height: 100vh;
         padding: 0 64px;
    }
     .enquiry .col-md-6 {
         gap: 50px !important;
    }
     .gap-77.gap-7 {
         gap: 50px !important;
    }
     #comments {
         /* margin-bottom: -2% !important; */
    }
     #enquiry h1 {
         font-size: 56px;
         line-height: 56px;
         padding: 80px;
    }
}
 @media (min-width: 769px) and (max-width: 900px) {
     .map-container div p {
         left: -27%;
    }
     .location {
         left: -50%;
    }
     .contact-us {
         padding-left: 0px;
    }
     .contact-us .address,.mobile-number,.contact-us .contact p{
         font-size: 20px;
    }
     .contact-h1{
         padding-left: 60px;
    }
     .enquiry{
         min-height: 70vh;
         height: 70vh;
    }
     .services .content{
         padding: 20px;
    }
     .services{
         gap:0px 
    }
     .services img{
         margin-left: 0;
        ;
    }
     .services .Card{
         height: 450px;
    }
     .why-tiles{
         padding:0px 
    }
     .why-mission, .why-vision {
         gap:25px 
    }
}
 @media (min-width: 1024px) and (max-width: 1024px) {
     .enquiry button {
         margin-top: -20% !important;
    }
     .career {
         padding-left: 2%;
    }
     .gap-150{
         gap:50px;
    }
    .firmware-img {
   
    margin-left: 18%;
}
.app-img {
    margin-left: 8%;
}
}
 @media (min-width: 800px) and (max-width: 834px) {
     p {
         margin-bottom: 0 !important;
    }
     .hero {
         padding-left: 10%;
         padding-top: 25%;
    }
     .about-us-tiles {
         justify-content: center;
    }
     .about-us-years, .about-us-clients, .about-us-projects p {
         font-size: 25px !important;
         padding: 0 10px;
    }
     .digits {
         font-size: 34px;
    }
     .why-mission, .why-vision {
         min-width: calc(100% / 2);
         height: 200px !important;
    }
     .why-mission div h1, .why-vision div h1 {
         font-size: 24px;
         line-height: 28px;
    }
     .why-mission .p, .why-vision .p {
         font-size: 10px;
         line-height: 20px;
         padding-right: 10px;
    }
     .vision-img {
         width: 104px !important;
    }
     .hardware-img {
         margin-top: -14% !important;
         margin-left: -2% !important;
    }
     .firmware-img {
         margin-bottom: 2% !important;
         margin-left: -2% !important;
    }
     .app-img {
         width: 380px !important;
    }
     .web-img {
         width: 365px !important;
         margin-top: 10% !important;
    }
     .mission-vision {
         flex-direction: column;
    }
     .mission {
         scale: 1 !important;
         margin-left: -16% !important;
         margin-bottom: 15%;
    }
     .vision {
         scale: 1 !important;
         margin-left: -16%;
    }
     .services {
         padding: 50px 0px;
    }
     .services .Card .content p {
         font-size: 14px !important;
         line-height: 18px !important;
    }
     .career {
         flex-direction: column;
         align-items: center;
    }
     .career div p {
         padding-right: 0 !important;
    }
     .career-image {
         width: 80% !important;
    }
     .contact-us .col-md-6 {
         align-self: center;
         scale: 1;
         width: 100%;
    }
     .contact-us .map-container {
         align-self: center !important;
         scale: 0.8;
    }
     .contact-us .map {
         align-self: center;
         width: 100%;
         margin-left: -18%;
    }
     .location {
         left: -14% !important;
    }
     .map-container div p {
         left: -2% !important;
    }
     .enquiry {
         padding: 20px 0;
         width: 100%;
         height: 100%;
         flex-direction: column;
         gap: 0 !important;
    }
     #enquiry h1 {
         padding: 50px 80px !important;
    }
     #contactForm {
         width: 100%;
    }
     .name, .email, .subject, .number {
         width: 100%;
         margin-bottom: 8%;
    }
     .name input, .email input, .subject input, .number input {
         width: 75%;
    }
     .enquiry .col-md-6 {
         gap: 0px !important;
         width: 100%;
         padding: 0 100px !important;
    }
}
/* Tablets and iPads */
 @media (min-width: 481px) and (max-width: 768px) {
     .hero {
         padding-left: 80px;
         margin-left: 0px;
    }
     .welcome {
         padding-top: 17px;
         font-size: 28px;
         font-weight: 400;
         line-height: 60px;
         color: white;
    }
     .green {
         color: #00bfa5;
         font-size: 70px;
         line-height: 84px;
         font-weight: 600;
         font-weight: bolder;
    }
     .research {
         font-size: 70px;
         line-height: 106px;
         color: white;
    }
     .hardware {
         width: 180px;
         font-size: 14px;
         padding-top: 6px;
         letter-spacing: 1px;
         padding-left: 6px;
         bottom: 0;
    }
     .software {
         font-size: 14px;
         letter-spacing: 1px;
    }
     .about-info {
         font-size: 16px;
         padding-bottom: 50px;
    }
     .about-info span:nth-child(1) {
         font-size: 41px;
         margin-left: 52px;
    }
     .why-img {
         padding-bottom: 100px;
    }
     .mission {
         margin-bottom: 50px;
    }
     .mission .p {
         bottom: 8%;
    }
     .vision img {
         top: 10%;
    }
     .vision div {
         top: 12%;
         right: 50%;
    }
     .vision .p {
         bottom: 4%;
    }
     .portfolio {
         gap: 140px !important;
         flex-direction: column;
    }
     .mission-vision {
         flex-direction: column;
    }
     .mission, .vision {
         width: 150%;
         margin-left: -12%;
    }
     .why-mission, .why-vision {
         min-height: 170px !important;
    }
     .why-mission div h1, .why-vision div h1 {
         font-size: 24px;
         line-height: 65px;
    }
     .why-mission .p, .why-vision .p {
         font-size: 10px;
         line-height: 21px;
    }
     .digits {
         font-size: 33px !important;
    }
     .mission-img {
         width: 104px;
         height: 121px;
    }
     .vision-img {
         width: 125px;
         height: 99px;
    }
     #services .h1 {
         padding: 40px 12%;
         font-size: 56px;
         margin-top: 50px;
    }
     #services h1 span {
         font-size: 100px;
    }
     .services {
         padding: 0;
         margin: 0;
         gap: 100px;
    }
     .services .Card::before {
         top: -6%;
         left: -2%;
         scale: .7;
    }
     .services .content h1 {
         font-size: 22px;
         line-height: 26px;
         padding-bottom: 0;
    }
     .services .content p {
         font-size: 12px;
         line-height: 16px;
         margin-bottom: -8%;
    }
     .services .Card {
         height: 258px;
         margin-left: 0%;
    }
     .services .content h1 {
         font-size: 32px;
         line-height: 41px;
    }
     .services .content p {
         font-size: 12px;
         line-height: 20px;
    }
     .hardware-img {
            width: 250px !important;
    /* height: 310px !important; */
    margin-top: 25%;
    margin-left: 10%;
    }
     .firmware-card {
         width: 390px;
         height: 298px !important;
    }
     .firmware-img {
         height: 290px;
         margin-bottom: -17%;
         margin-left: 4%;
    }
     .mobile-card {
         height: 373px !important;
    }
     .app-img {
         /* width: 290px; */
         height: 250px;
         margin-bottom: -42%;
         margin-left: 4%;
    }
     .iot-web {
         height: 315px !important;
    }
     .web-img {
         /* width: 273px; */
         height: 250px;
         margin-bottom: -39%;
    }
     #career {
         height: 100%;
    }
     .career {
         padding: 0;
         flex-direction: column;
         align-items: center;
    }
     .career h1 {
         margin-top: 100px;
         margin-bottom: 20px;
         padding: 10px 12%;
         font-size: 56px;
         font-weight: 300;
    }
     .career div p {
         padding: 0;
         font-size: 22px;
         line-height: 42px;
    }
     .career .col-md-10 {
         padding-left: 8%;
    }
     .career .mail-us {
         font-size: 40px;
         padding: 0px 40px;
         margin-top: 4%;
         width: 210px;
         height: 70px;
         font-size: 28px;
    }
     .contact-us {
         padding: 0;
         margin-top: 100px;
         flex-direction: column;
         align-items: flex-start;
    }
     .contact-us h1 {
         font-size: 56px;
         padding: 0px 12%;
    }
     .contact-us div h1 {
         font-size: 24px;
         padding: 0;
    }
     .address-box {
         width: 100%;
    }
     .contact-us .col-md-6 {
         padding-left: 15%;
    }
     .contact-us .address p {
         font-size: 18px;
         line-height: 28px;
         margin-bottom: 0;
    }
     .contact-us .contact p {
         font-size: 18px;
         line-height: 34px;
    }
     .contact-us .location {
         left: -41%;
         top: -19%;
    }
     .map-container {
         align-self: center;
         margin-left: 10%;
    }
     .map-container div p {
         left: -19%;
    }
     #enquiry h1 {
         margin: 100px 0;
         padding: 0 12%;
         font-size: 56px;
    }
     .enquiry {
         padding: 20px 0;
         height: 100%;
         flex-direction: column;
    }
     .enquiry .inputs {
         margin-bottom: 35px;
         width: 100%;
         padding: 10px 20px;
         vertical-align: top;
    }
     .name label, .email label, .number label, .subject label {
         top: 30% !important;
    }
     .enquiry .comments {
         margin-top: -15%;
    }
     .enquiry .col-12 {
         display: flex;
         justify-content: flex-end !important;
         padding-right: 25%;
    }
     .enquiry button {
         width: 120px;
         height: 60px;
         font-size: 19px;
         margin: 0;
    }
    #alert-box{
        width: 100%;
        position: relative;
        justify-content: end;
    }
}
 @media (min-width: 768px) and (max-width: 768px) {
     .topbar {
         padding: 41px 10px;
         padding-left: 30px;
    }
     .logo-box {
         gap: 30px !important;
    }
     #nav-toggle img {
         height: 50px !important;
    }
     .logo {
         height: 70px !important;
         width: 130px;
    }
     .toggle {
         height: 50px !important;
    }
     .about-us-tiles {
         justify-content: center;
    }
     .mission-vision {
         margin-left: -12% !important;
    }
     .career .col-md-12 {
         padding: 0 14%;
    }
     .career-mail-box {
         padding: 16px 12% !important;
    }
     .career-image {
         padding: 15px 12%;
    }
     .enquiry .col-12 {
         margin-top:20px;
         justify-content: center;
    }
     .enquiry-field-2 {
         gap:100px;
         margin-top: 60px;
    }
    .services .Card{
        width: 525px;
        height : 350px !important;
        margin-left:8%;
    }
    .services .Card::before {
        top: -4%;
        left: -2%;
        scale: .7;
    }
    .about-info{
        padding:0px
    }
    .about-us-years, .about-us-clients, .about-us-projects p{
        padding-right: 20px;
    }
}
/*------------------------------------ Mobile ---------------------*/
 @media (min-width: 320px) and (max-width: 480px) {
     .logo {
         height: 40px;
         width: 100px;
    }
    .about-img{
        width: 250px;
        padding: 50px 0px;
    }
    .why-img{
        width: 300px;
    }
     .topbar {
         padding: 41px 10px !important;
    }
     #toggle {
         margin-right: 0 !important;
    }
     #nav-toggle img {
         height: 30px;
    }
     .logo {
         height: 40px;
         width: 100px;
    }
     .toggle {
         height: 30px;
    }
     .hero {
         padding-left: 0px;
         margin-left: 0px;
    }
     .hero .col-lg-12 {
         margin-top: -30%;
    }
     .topbar {
         padding: 40px 10px;
    }
     .welcome {
         padding-top: 38%;
         font-size: 11px;
         line-height: 17px;
         color: white;
    }
     .green {
         color: #00bfa5;
         font-weight: 400;
         font-size: 45px;
         line-height: 54px;
    }
     .research {
         font-size: 45px;
         font-weight: 400;
         line-height: 68px;
         color: white;
    }
     .hardware {
         font-size: 12px;
         width: 150px;
         right: 14%;
         bottom: 5%;
         border-top: 2px solid white;
         padding-top: 6px;
         padding-left: 4px;
    }
     .software {
         font-size: 12px;
         position: absolute;
         right: -1%;
         bottom: 14%;
         letter-spacing: 1px;
    }
     .about-info {
         font-size: 14px;
         line-height: 30px;
    }
     .about-info span:nth-child(1) {
         font-size: 32px;
         margin-left: 60px;
    }
     .year-img {
         width: 94px;
    }
     .client-img {
         width: 84px;
    }
     .project-img {
         width: 130px;
         right: 64%;
         top: -13%;
         z-index: 2;
    }
     .years, .clients, .project p {
         font-size: 18px;
    }
     .why-tiles {
         flex-wrap: wrap;
         margin-bottom: 50px;
    }
     .about-us {
         padding: 0;
    }
     .about-us-years, .about-us-clients, .about-us-projects {
         min-width: 100%;
    }
     .digits {
         font-size: 36px !important;
    }
     .digits {
         font-size: 36px !important;
    }
     .about-us-years, .about-us-clients, .about-us-projects p {
         font-size: 20px !important;
    }
     .gap-6 {
         gap: 100px;
    }
     .why-img {
         scale: 0.9;
         padding-bottom: 40px;
    }
     .mission-vision {
         padding: 0 !important;
         gap: 20px;
    }
     .mission {
         position: relative;
         width: 100%;
         height: 220px;
         background: #0000000d;
         border-radius: 45px;
         padding: 0;
    }
     .mission img:nth-child(1) {
         position: absolute;
         top: 6%;
         left: 16%;
         width: 64px;
         height: 113px;
    }
     .mission div {
         position: absolute;
         top: 8%;
         right: 8%;
         padding-left: 42px;
    }
     .mission div p {
         color: #00bfa5;
         font-size: 36px;
         font-style: normal;
         font-weight: 300;
         text-transform: uppercase;
    }
     .mission .p {
         position: absolute;
         bottom: 5%;
         left: 6%;
         right: 8%;
         padding: 0px 26px;
         font-size: 14px;
         line-height: 26px;
         text-align: justify;
         text-indent: 40%;
    }
     .vision {
         position: relative;
         height: 220px;
         background: #0000000d;
         border-radius: 45px;
         padding: 0px 40px;
         overflow: hidden;
    }
     .vision img {
         position: absolute;
         width: 80px;
         height: 106px;
         top: 4%;
         left: 16%;
    }
     .vision div {
         position: absolute;
         top: 14%;
         right: 54%;
         display: flex;
         flex-direction: column;
    }
     .vision div p {
         position: absolute;
         color: #00bfa5;
         font-size: 36px;
         font-style: normal;
         font-weight: 300;
         text-transform: uppercase;
    }
     .vision .p {
         position: absolute;
         display: inline-block;
         right: 5%;
         bottom: 4%;
         text-align: justify;
         font-size: 14px;
         line-height: 22px;
         text-indent: 48%;
         padding: 12px 39px;
    }
     .why-mission, .why-vision {
         min-height: 206px !important;
    }
     .mission-img {
         width: 127px;
         height: 147px;
    }
     .vision-img {
         width: 149px;
         height: 119px;
    }
     .why-mission div h1, .why-vision div h1 {
         font-size: 30px;
         margin-top: 1rem;
    }
     .why-mission .p, .why-vision .p {
         font-size: 13px;
         line-height: 26px;
    }
     .why-vision {
         margin-bottom: 0 !important;
         padding-bottom: 0;
    }
     #services {
         padding: 100px 8px;
         padding-bottom: 50px;
         padding-top: 0;
    }
     #services .h1 {
         font-size: 48px;
         line-height: 52px;
         padding: 0;
         margin-bottom: 50px !important;
         margin-top: 0 !important;
    }
     #services .h1 span {
         font-size: 72px;
         line-height: 0px;
         padding-bottom: 20px;
    }
     .services {
         padding: 0;
         padding-bottom: 200px;
         margin: 0;
         gap: 280px;
    }
     .services .Card:nth-child(2) {
         margin-bottom: 50px;
    }
     .services .Card {
         width: 370px;
         height: 490px;
         border-bottom-right-radius: 250px;
         flex-direction: column;
    }
     .services .Card::before {
         scale: .7;
         top: -3%;
         left: -4%;
    }
     .services .Card .content h1 {
         font-size: 24px;
         line-height: 30px;
         text-align: left;
         padding-top: 18%;
    }
     .services .Card .content p {
         font-size: 14px;
         line-height: 20px;
         text-align: left;
         padding-right: 14%;
    }
     .hardware-img {
         width: 285px;
         /* height: 395px; */
         margin-left: -2%;
         margin-top: -5%;
    }
     .firmware-img {
         height: 345px;
         margin-left: -5%;
    }
     .app-img {
        width: 345px;
        height: 315px;
         margin-left :0%;
         /* padding-bottom: 20px; */
    }
     .web-img {
         width: 325px;
         height: 315px;
             margin-bottom: 0px; 
        margin-left: 0;
    }
     #career {
         height: 100%;
    }
     .career {
         padding: 100px 26px;
         padding-bottom: 50px;
         padding-top: 0;
    }
     .career h1 {
         font-size: 52px;
         padding: 4px 0px;
         margin-bottom: 10px;
    }
     .career div p {
         width: 100%;
         font-size: 16px;
         line-height: 30px;
         padding: 0px;
         text-align: left;
    }
     .career-mail-box {
         margin: 15px 0 !important;
    }
     .career-mail-text {
         margin-bottom: 0px !important;
         font-size: 16px !important;
    }
     .career-mail-box {
         gap: 5px !important;
    }
     .career .mail-us {
         height: 0px;
         font-size: 26px;
         line-height: 78px;
         padding: 30px 46px;
         margin: auto;
    }
     .contact-us {
         padding: 0 32px;
    }
     .contact-us h1 {
         font-size: 52px;
         padding: 0px;
         margin-bottom: 10px;
    }
     .contact-us .col-md-6 h1 {
         font-size: 24px;
         line-height: 32px;
         margin-bottom: 10px;
    }
     .contact-us .address p {
         font-size: 12px !important;
         line-height: 28px;
         margin-bottom: 0;
    }
     .contact-us .contact p {
         font-size: 16px;
         line-height: 28px;
         padding-right: 0;
    }
     .map-container {
         padding: 0;
    }
     .contact-us .map {
         width: 100%;
         padding: 0;
         padding-bottom: 200px;
         height: 340px;
    }
     .contact-us .map iframe {
         margin: 0;
         margin-top: -80px;
    }
     .location {
         left: -14%;
         top: -25%;
    }
     .map-container {
         margin-top: 20%;
    }
     .map-container div p {
         left: 8%;
    }
     #enquiry {
         padding: 0 40px;
         margin: 100px 0;
         margin-left: -5%;
    }
     #enquiry h1 {
         font-size: 52px;
         padding: 20px 0;
         margin-top: -20%;
         margin-bottom: 10px;
    }
     .enquiry {
         height: 100%;
         padding: 0px;
         margin: 0;
    }
     .name label, .email label, .number label, .subject label {
         top: 33% !important;
    }
     .enquiry input {
         width: -webkit-fill-available;
         padding: 10px;
         margin-bottom: 25px;
    }
     .enquiry #comments {
         margin-bottom: 18px;
         padding: 20px;
    }
     .enquiry button {
         width: 120px;
         height: 60px;
         font-size: 19px;
    }
     .blob {
         z-index: -4 !important;
         scale: 0.6;
    }
     .enquiry-field-1,.enquiry-field-2{
         gap:0px 
    }
    #alert-box{
        position: relative ;
        width: 100%;
        
    }
}
 @media (min-width: 360px) and (max-width: 375px) {
     .hero .col-lg-12 {
         margin-top: -64%;
    }
     .location {
         left: -17%;
    }
     .map-container div p {
         left: 9%;
    }
      .app-img {
         scale: .8;
         margin-left: -3%;
         margin-top: -8%;
    }
}
 @media (min-width: 320px) and (max-width: 320px) {
     .location {
         left: -20%;
    }
     .map-container div p {
         left: 11%;
    }
     .contact-us .contact p {
         font-size: 10px;
    }
     .address-mail-box, .address-mobile-box {
         align-items: center;
    }
     .address-mail-box p, .address-mobile-box p {
         font-size: 12px !important;
    }
     .address-mail-box img, .address-mobile-box img {
         height: 12px;
    }
     .why-mission, .why-vision {
         gap: 10px;
    }
     .why-mission .p, .why-vision .p {
         font-size: 10px;
         line-height: 18px;
    }
     .why-mission div h1, .why-vision div h1 {
         font-size: 28px;
    }
     .clients-img {
         width: 180px;
    }
     .about-us-years, .about-us-clients, .about-us-projects .display-flex-column {
         padding-right: 20px;
    }
     #services {
         padding-top: 0;
         padding-bottom: 50px;
    }
     .career {
         padding: 100px 30px;
    }
     .career h1 {
         margin-top: -40%;
         margin-bottom: 20px;
    }
     #enquiry h1 {
         margin-top: -40%;
         margin-bottom: 10px;
    }
     .services .Card .content h1 {
         padding-top: 0;
    }
     .firmware-card {
         height: 600px !important;
         margin-top: 30%;
    }
     .firmware-img {
         scale: .8;
    }
     .mobile-card {
         height: 635px !important;
    }
     .app-img {
         scale: .8;
         margin-left: -3%;
         margin-top: -8%;
    }
     .web-img {
         scale: .8;
         margin-top: -12%;
         margin-left: -3%;
    }
}
 @media (min-width: 360px) and (max-width: 395px) {
     .hero .col-lg-12 {
         margin-top: -55%;
    }
     .mission .p {
         line-height: 18px;
         bottom: 13%;
         left: 10%;
         right: 10%;
         padding: 0;
    }
     .mission img:nth-child(1) {
         scale: 0.9;
         left: 10%;
    }
     .mission div {
         right: 3%;
    }
     .vision img {
         scale: 0.9;
    }
     .vision .p {
         padding: 0;
         left: 15%;
         right: 12%;
         bottom: 6%;
    }
     .why-img {
         padding-right: 0 !important;
    }
     .career div p {
         font-size: 12px !important;
    }
     .career-mail {
         height: 12px !important;
    }
     .services .Card .content h1 {
         padding-top: 20%;
    }
     .address-mail-box, .address-mobile-box {
         align-items: center;
    }
     .address-mail-box p, .address-mobile-box p {
         font-size: 12px !important;
    }
     .address-mail-box img, .address-mobile-box img {
         height: 12px;
    }
    .web-img {
        width: 325px
    }
    .services .Card{
        height: 500px;
    }
}
 @media (min-width: 280px) and (max-width: 375px) {
     .career-mail-box {
         margin: 15px 0 !important;
    }
     .career-mail-text {
         color: #00bfa5;
         font-size: 12px !important;
         margin-bottom: 0px !important;
    }
}
 @media (min-width: 280px) and (max-width: 324px) {
     .hero .col-lg-12 {
         margin-top: -75%;
    }
     .why-img {
         margin-right: 0px;
         padding-right: 0px !important;
    }
     .mission div p {
         font-size: 30px;
    }
     .mission .p {
         font-size: 14px;
         line-height: 22px;
         bottom: 4%;
    }
     .mission div {
         right: -6%;
    }
     .mission img:nth-child(1) {
         scale: 0.9;
         left: 14%;
         top: 3%;
    }
     .vision .p {
         right: 3%;
         bottom: 0%;
    }
     .vision div p {
         font-size: 30px;
    }
     .vision img {
         top: 1%;
         left: 13%;
    }
     .services .Card {
         padding-top: 28%;
    }
     .career-mail {
         height: 10px;
    }
     .career-mail-text {
         font-size: 10px !important;
    }
}
 @media (width: 1024px) and (height: 768px) {
     .career {
         padding-left: 2%;
    }
}
 @media (width: 1280px) and (height: 800px) {
     .hero .col-lg-12 {
         padding-top: 100px;
    }
}
 @media (width: 1280px) and (height: 950px) {
     .hero .col-lg-12 {
         padding-top: 130px;
         padding-left: 50px;
    }
}
 @media (width: 1280px) and (height: 1024px) {
     .hero .col-lg-12 {
         padding-top: 15%;
         padding-left: 5%;
    }
     #services .h1 {
         padding-left: 8% !important;
    }
     .career {
         padding-left: 8%;
    }
     .career-mail-box {
         padding: 0 !important;
    }
     .career div p {
         padding: 0 !important;
    }
     .contact-us h1 {
         padding-left: 8% !important;
    }
     #enquiry h1 {
         padding-left: 8% !important;
    }
}
 @media (width: 1024px) and (height: 768px) {
     .hero .col-lg-12 {
         margin-top: -15%;
    }
}
 @media (width: 1366px) and (height: 768px) {
     .welcome {
         font-size: 20px;
         line-height: 108px;
    }
     .research {
         font-size: 78px;
         line-height: 120px;
    }
     .nav-rotate {
         margin-bottom: 78px;
    }
     .iot-mobile img {
         height: 454px;
    }
     .iot-web img {
         height: 400px;
    }
     #career {
         height: 100%;
    }
     .career div p {
         font-size: 24px;
         line-height: 48px;
    }
     .career-image {
         height: 300px;
    }
     .location {
         left: 1%;
    }
     .map-container p {
         position: absolute;
         left: 17%;
    }
     .enquiry {
         padding: 5% 5% !important;
         margin-left: 4%;
    }
     .map-container p{
         left: 24%;
    }
     .location{
         left: 10%;
    }
}
 @media (width: 1280px) and (height: 616px) {
     #services .h1 {
         padding-bottom: 0 !important;
    }
     #career {
         height: 100vh;
    }
     .career-image {
         height: 235px !important;
    }
     .contact-h1 {
         line-height: 0px !important;
         padding-top: 50px !important;
    }
     #enquiry h1 {
         padding-top: 15px;
    }
}
 @media (width: 1360px) and (height: 642px) {
     .contact-us h1 {
         margin-left: -11%;
    }
     .location {
         left: 26% !important;
    }
     .map-container div p {
         left: 40% !important;
    }
}
/*------------------- CSS specific to iOS devices ---------*/
 @supports (-webkit-touch-callout: none) {
     .why-tiles {
         margin-top: -5%;
    }
     #services .h1 {
         padding-top: 0;
         margin-top: -12%;
    }
     .bg-img {
         display: block;
         max-width: 100vw;
         min-height: 100vh;
         background: url(../assets/images/bg-home.png);
         background-repeat: no-repeat;
         background-position: center center;
         position: relative;
         background-size: cover;
         -webkit-background-size: cover;
         -moz-background-size: cover;
         background-size: cover;
         -o-background-size: cover;
         opacity: 0.95;
    }
}
/*--------------------- Target firefox browser --------------------*/
 @supports (-moz-appearance:none) {
     .blob {
         display: none !important;
    }
     .enquiry input {
         padding-right: 180px;
    }
     @media (width: 1280px) and (min-height: 600px) and (max-height: 700px) {
         .enquiry input {
             padding-right: 100px;
        }
         .right {
             margin-top: -.5%;
        }
         .blob {
             z-index: -5 !important;
        }
    }
     @media (width: 1326px) and (min-height: 400px) and (max-height: 482px) {
         .nav-bar {
             top: 30vh;
        }
         .nav-rotate {
             margin-bottom: 30px;
        }
         .side-nav li a {
             font-size: 10px;
        }
         .enquiry input {
             padding-right: 100px;
        }
         .right {
             margin-top: -.5%;
        }
         .location {
             left: 25% !important;
        }
         .map-container div p {
             left: 40% !important;
        }
    }
     @media (width: 1366px) and (max-height: 626px) {
         .right {
             margin-top: -0.8%;
        }
    }
}
 @media (width: 1366px) and (max-height: 626px) {
     .welcome {
         font-size: 17px;
         line-height: 26px;
    }
     .green {
         font-size: 70px;
         line-height: 84px;
    }
     .research {
         font-size: 70px;
         line-height: 106px;
    }
     .nav-bar {
         position: fixed;
         left: 8vh;
         top: 25vh;
    }
     .side-nav li a {
         font-size: 12px !important;
    }
     .nav-rotate {
         margin-bottom: 65px !important;
    }
     .iot-web {
         margin-bottom: 5%;
    }
     .career-image {
         height: 225px;
         margin-bottom: 120px;
    }
     .career div p {
         font-size: 20px;
         line-height: 50px;
    }
     .contact-us .address {
         font-size: 20px;
         font-weight: 300;
         line-height: 38px;
    }
     .contact-us .map {
         width: 400px;
         height: 400px;
         margin-top: 12%;
    }
     .contact-h1 {
         padding-top: 0 !important;
    }
     .contact-us .map iframe {
         margin: -130px 0;
    }
     .map-container p {
         top: 15%;
    }
     .location {
         top: -4%;
         left: 20%;
    }
     #enquiry h1 {
         padding-top: 0;
    }
     .enquiry {
         padding: 0 !important;
         margin-top: 15% !important;
    }
     main {
         z-index: -5;
    }
}
 @media (min-width: 992px) {
     #enquiry-head{
         padding-top:125px 
    }
}