/* Theme Name: ArkiGa
Author: Firefly Agency
Website: www.fireflyagency.ae
Author URI: www.fireflyagency.ae
Description: Website created by FireFly Agency
*/

.wp-pagenavi .current{
display: inline-block;
width: 50px;
height: 50px;
line-height: 48px;
text-align: center;
border: 1px solid #0063A8;
color: #ffffff;
background: #0063A8;
border-radius: 50px !important;
margin:0px 5px;
}

.wp-pagenavi .page{
display: inline-block;
width: 50px;
height: 50px;
line-height: 48px;
text-align: center;
border: 1px solid #F5F3ED;
color: #0063A8;
background: #F5F3ED;
border-radius: 50px !important;
text-decoration: none;
margin:0px 5px;
}

body {
    color: #0063A8;
    background: #FFF;
    font-family: "Titillium Web";
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

html {
    scroll-padding-top: 100px;
    scroll-behavior: smooth;
}

.headerlogo { max-width:200px; }
.pages, .nextpostslink, .previouspostslink {display:none}

.container {
    max-width: 100%;
    padding-left: 13%;
    padding-right: 13%;
}

section.herosection .container.navbar-wrapp {
    padding-left: 10%;
    padding-right: 10%;
}

.navbar-wrapp {
    position: fixed;
    z-index: 1002;
    margin-top: 2%;
}

.navbar {
    border: 1px solid #F5F3ED;
    background: #FFF;
    border-radius: 10px;
}

.nav-link {
    color: #0063A8;
    font-size: 16px;
    font-weight: 600;
}

.nav-link.active {
    color: #959595 !important;
}

.nav-link.active.dropdown-toggle::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M5.2056 5.60001L6.99935 7.39376L8.7931 5.60001L9.62435 6.41668L6.99935 9.04168L4.37435 6.41668L5.2056 5.60001ZM6.99935 1.16668C6.1924 1.16668 5.43407 1.3198 4.72435 1.62605C4.01463 1.9323 3.39727 2.34793 2.87227 2.87293C2.34727 3.39793 1.93164 4.01529 1.62539 4.72501C1.31914 5.43473 1.16602 6.19307 1.16602 7.00001C1.16602 7.80695 1.31914 8.56529 1.62539 9.27501C1.93164 9.98473 2.34727 10.6021 2.87227 11.1271C3.39727 11.6521 4.01463 12.0677 4.72435 12.374C5.43407 12.6802 6.1924 12.8333 6.99935 12.8333C7.80629 12.8333 8.56463 12.6802 9.27435 12.374C9.98407 12.0677 10.6014 11.6521 11.1264 11.1271C11.6514 10.6021 12.0671 9.98473 12.3733 9.27501C12.6796 8.56529 12.8327 7.80695 12.8327 7.00001C12.8327 6.19307 12.6796 5.43473 12.3733 4.72501C12.0671 4.01529 11.6514 3.39793 11.1264 2.87293C10.6014 2.34793 9.98407 1.9323 9.27435 1.62605C8.56463 1.3198 7.80629 1.16668 6.99935 1.16668ZM6.99935 2.33334C8.30213 2.33334 9.4056 2.78543 10.3098 3.68959C11.2139 4.59376 11.666 5.69723 11.666 7.00001C11.666 8.30279 11.2139 9.40626 10.3098 10.3104C9.4056 11.2146 8.30213 11.6667 6.99935 11.6667C5.69657 11.6667 4.5931 11.2146 3.68893 10.3104C2.78477 9.40626 2.33268 8.30279 2.33268 7.00001C2.33268 5.69723 2.78477 4.59376 3.68893 3.68959C4.5931 2.78543 5.69657 2.33334 6.99935 2.33334Z' fill='%23959595'/%3E%3C/svg%3E");
}

.nav-link:hover,
.nav-link:focus {
    color: #0063A8;
}

.navbar-nav .dropdown-item {
    font-size: 16px;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.offcanvas-body ul li a {
    position: relative;
    padding-bottom: 5%;
}

.offcanvas-body ul li a:before {
    content: "";
    width: 100%;
    height: 1px;
    position: absolute;
    background: #0063A8;
    bottom: 0;
    left: 0;
}

.top-icons {
    gap: 30px;
}

.dropdown-toggle::after {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 0.3rem;
    vertical-align: middle;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M5.2056 5.60001L6.99935 7.39376L8.7931 5.60001L9.62435 6.41668L6.99935 9.04168L4.37435 6.41668L5.2056 5.60001ZM6.99935 1.16668C6.1924 1.16668 5.43407 1.3198 4.72435 1.62605C4.01463 1.9323 3.39727 2.34793 2.87227 2.87293C2.34727 3.39793 1.93164 4.01529 1.62539 4.72501C1.31914 5.43473 1.16602 6.19307 1.16602 7.00001C1.16602 7.80695 1.31914 8.56529 1.62539 9.27501C1.93164 9.98473 2.34727 10.6021 2.87227 11.1271C3.39727 11.6521 4.01463 12.0677 4.72435 12.374C5.43407 12.6802 6.1924 12.8333 6.99935 12.8333C7.80629 12.8333 8.56463 12.6802 9.27435 12.374C9.98407 12.0677 10.6014 11.6521 11.1264 11.1271C11.6514 10.6021 12.0671 9.98473 12.3733 9.27501C12.6796 8.56529 12.8327 7.80695 12.8327 7.00001C12.8327 6.19307 12.6796 5.43473 12.3733 4.72501C12.0671 4.01529 11.6514 3.39793 11.1264 2.87293C10.6014 2.34793 9.98407 1.9323 9.27435 1.62605C8.56463 1.3198 7.80629 1.16668 6.99935 1.16668ZM6.99935 2.33334C8.30213 2.33334 9.4056 2.78543 10.3098 3.68959C11.2139 4.59376 11.666 5.69723 11.666 7.00001C11.666 8.30279 11.2139 9.40626 10.3098 10.3104C9.4056 11.2146 8.30213 11.6667 6.99935 11.6667C5.69657 11.6667 4.5931 11.2146 3.68893 10.3104C2.78477 9.40626 2.33268 8.30279 2.33268 7.00001C2.33268 5.69723 2.78477 4.59376 3.68893 3.68959C4.5931 2.78543 5.69657 2.33334 6.99935 2.33334Z' fill='%230063A8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    border: none;
}

.dropdown-toggle.rotated::after {
    transform: rotate(180deg) !important;
}

.innovative {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.Support {
    z-index: 1001;
}

.bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: -1;
}

h1 {
    color: #FFF;
    font-family: "Titillium Web";
    font-size: 80px;
    font-weight: 700;
    line-height: 92px;
}

.leftpadding {
    padding-left: 12%;
}

.herocontent {
    bottom: 18%;
}

.btn {
    padding: 13px 30px;
    border-radius: 10px;
    font-size: 14px;
}

.btn:focus {
    border: 0;
}

.whitebtn:focus,
.whitebtn {
    background: #FFF;
    color: #0063A8;
}

.whitebtn:hover {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%), #F5F3ED;
    color: #0063A8;
}

.whitebtn:hover svg path {
    fill: #0063A8;
}

.whitebtn.blue:hover {
    background: #0063A8;
    color: #FFFFFF
}

.whitebtn.blue:hover svg path {
    fill: #FFFFFF;
}

.whitebackground {
    background: #FFF;
    color: #0063A8;
}

.off.whitebtn {
    background: #F5F3ED;
    color: #0063A8;
}

h3 {
    text-align: center;
    font-size: 45px;
    font-weight: 300;
}

article .spacing {
    padding-top: 8%;
    padding-bottom: 9%;
}

.offwhitebackground {
    background: #F5F3ED;
    color: #0063A8;
}

h2 {
    font-size: 60px;
    font-weight: 600;
}

h4 {
    font-size: 40px;
    font-weight: 600;
}

h5 {
    font-size: 20px;
}


p {
    font-size: 18px;
}

.bluebtn {
    background: #0063A8;
    color: #FFFFFF
}

.padding-right {
    padding-right: 10%;
}

.spacing {
    padding-top: 5%;
    padding-bottom: 5%;
}

.customwidth-left {
    width: 54%;
}

.customwidth-right {
    width: 46%;
}

.border-right {
    border-right: 1px solid #F5F3ED;
}

.pointer {
    cursor: pointer;
}

.our-system .card .card-body {
    height: 279px;
}

svg.active circle {
    fill: #0063A8;
}

svg.active path {
    fill: #DFF7FF;
}

.navigation svg:hover circle {
    fill: #0063A8;
}

.navigation svg:hover path {
    fill: #DFF7FF;
}

p.cardtext {
    color: #959595;
    font-size: 14px;
}

.our-project .card {
    background: #F5F3ED;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}



.our-project .col.desktopview .card:hover .cardbody {
    position: absolute;
    margin-top: 85% !important;
}

.our-project .desktopview .card:hover .content {
    display: block !important;
}

.our-project .desktopview .card:hover .cardbody p.subtitle {
    display: none !important;
}

.link p {
    font-size: 16px;
    font-weight: 400;
    color: #0063A8;
}

.owl-nav {
    display: none !important;
}

.our-industry .card {
    background: #F5F3ED;
    border-bottom-left-radius: 13px;
    border-bottom-right-radius: 13px;
}

.bold {
    font-weight: 600;
}

.bluecard {
    border-radius: 20px;
    background: #0063A8;
    color: #FFFFFF;
}

.choose-us .bluecard p {
    color: #FFF;
    font-size: 16px;
    font-weight: 400;
}

.our-Insights a p {
    color: #0063A8;
}

.our-Insights .card {
    border-radius: 20px;
}

.our-Insights h5 {
    font-size: 18px;
}

.bluebackground {
    background: #0063A8;
    color: #FFFFFF;
}


.form-control:focus {
    box-shadow: none;
}

.form-control {
    opacity: 2;
    font-size: 16px;
    padding: 2%;
}

.form-control:not(textarea) {
    width: 90%;
}

textarea.form-control {
    width: 94%;
    height: 65px;
}

textarea::placeholder, input::placeholder {
    color: #FFFFFF !important;
    opacity: 1 !important;
    font-size: 14px;
}

footer {
    background: #1E1E1E;
    ;
}

footer a p,
footer p {
    color: #FFF;
    font-size: 15px;
}

footer .contact a p {
    font-size: 15px;
}

footer .internal-linking p {
    font-size: 15px;
}

hr {
    color: #959595;
    opacity: 1;
}

.about .customwidth-left {
    width: 43%;
}

.about .customwidth-right {
    width: 57%;
}

.about .padding-right {
    padding-right: 5%;
}

.Vision-Mission .card {
    border-radius: 20px;
}

.Vision-Mission img {
    height: 485px;
}

.card-head {
    /* height: 353px; */
    background: #D9D9D9;
    border-radius: 20px;
}

.system-architecture h2 {
    color: #FFFFFF;
}



.contactform {
    border-radius: 25px;
    padding: 5% 5%;
}

.contactform textarea::placeholder, .contactform input::placeholder {
    color: #0063A8 !important;
}

.contactform .border-bottom {
    border-bottom: 1px solid #0063A8 !important;
}

.contactform .form-control {
    color: #0063A8 !important;
}

.product-specification {
    border-radius: 20px;
}

th {
    border-color: #FFF;
    color: #0063A8;
    font-size: 18px;
    font-weight: 400;
    padding-bottom: 5% !important;
}


.flow p {
    font-size: 16px;
    color: #959595;
}

.custom-pagination {
    width: 50px;
    height: 50px;
    line-height: 36px;
    text-align: center;
    border: 1px solid #F5F3ED;
    color: #0063A8;
    background: #F5F3ED;
    border-radius: 50px !important;
}

.custom-pagination.active {
    background: #0063A8;
    color: #FFFFFF;
}

.custom-pagination:hover {
    background: #0063A8;
    color: #FFFFFF;
}

.herosection.project {
    height: 638px;
}

.btn.filters {
    border-radius: 50px;
    padding: 8px 22px;
}


.quickcontact-form {
    border-radius: 20px;
    border: 1px solid #959595;
    background: #FFF;
}

.quickcontact-form .form-control {
    color: #959595 !important;
    font-size: 16px;
}

.quickcontact-form textarea::placeholder, .quickcontact-form input::placeholder {
    color: #959595 !important;
    font-size: 16px !important;
}

.certifications .customwidth-left {
    width: 59%;
}

.certifications .customwidth-right {
    width: 41%;
}

.certifications .leftpadding {
    padding-left: 5%;
}

.certifications h2 {
    font-size: 52px;
}

.approach h5 {
    font-size: 16px;
}

.approach p {
    font-size: 16px;
}

.herosection.oublogs .spacing {
    padding-top: 15%;
}

.blog-cards p,
.oublogs p {
    color: #959595 !important;
}

p.readarticle {
    color: #0063A8 !important;
}

.blog-cards h5 {
    font-size: 18px;
}

.oublogs .custom-pagination {
    background: #FFFFFF;
    border: 1px solid #FFFFFF;
}

.oublogs .custom-pagination:hover {
    background: #0063A8;
    color: #FFFFFF;
}

.oublogs .custom-pagination.active {
    background: #0063A8;
}

.event-space .product-specification {
    padding: 5% 6%;
    margin-top: -47%;
    z-index: 1000;
    position: relative;
}

.why-work .card-body p {
    font-size: 16px;
}

.borderbtn {
    background: #F5F3ED;
    border: 1px solid #0063A8;
    border-radius: 50px;
    color: #0063A8;
}

.borderbtn:hover,
.borderbtn.active {
    background: #0063A8;
    color: #FFFFFF;
}

.sortbyfilter {
    border-radius: 50px;
}

.current-opening p {
    font-size: 16px;
}

.current-opening .blog-cards p.content {
    color: #0063A8 !important;
}

svg.dropdown {
    top: 50%;
    right: 54px;
    pointer-events: none;
}

.choosefile {
    top: -20%;
    right: 50px;
    transform: translateY(-50%);
    cursor: pointer;
    padding: 3px 17px;
    border-radius: 7px;
}

.form-control.fullwidth {
    width: 95%;
}

.button-position {
    top: 12%;
    right: 15%;
}

.bottom-position {
    bottom: 13%;
}

.col.mobileview {
    display: none !important;
}

.form-check-label {
    color: #0063A8;
    font-size: 16px;
    cursor: pointer;
}

.projectdropdwon.dropdown-menu {
    width: 100%;
    max-width: 800px;
    top: 85%;
    border-radius: 20px;
    margin-top: 10px;
}

.projectdropdwon.dropdown-menu p {
    color: #0063A8;
}

.form-check-input {
    border: 1px solid #0063A8;
    cursor: pointer;
}

.form-check-input:focus {
    box-shadow: none;
}

.mobileview {
    display: none;
}

.card.product-specification .card-img-top {
    object-fit: cover;
    border-radius: 20px;

}

.jobs p.title {
    color: #959595;
}

.dropdownicon {
    top: 50%;
    right: 60px;
    pointer-events: none;
}

.jobs .card {
    height: 250px;
}

.modal.bottom-modal {
    width: 100%;
    height: 85vh;
    top: unset;
    bottom: 0;
    left: 0;
    background: #F5F3ED;
    position: fixed;
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
    display: block !important;
}

.modal.show.bottom-modal {
    transform: translateY(0);
}

.modal-dialog {
    width: 100%;
    max-width: 100%;
    margin: 0;
    height: 100%;
}

.modalcards .card {
    height: 630px;
}

.modal.right-modal {
    width: 50%;
    height: 100vh;
    left: unset;
    right: 0;
    background: #FFF;
}

p.close {
    color: #0063A8;
}

.jobdetails ul {
    margin-left: 4%;
}

.jobdetails ul li,
.jobdetails p {
    color: #959595;
}

.contact-dropdown:hover .contact.dropdown-menu {
    display: block;
    margin-top: 0;
}

.system-dropdown:hover .system.dropdown-menu {
    display: flex;
    margin-top: 0;
}

.dropdown-item {
    color: #0063A8;
    font-size: 16px;
    font-weight: 600;
}

.dropdown-item:hover {
    color: #0063A8;
}

.dropdown-item:focus {
    color: #0063A8;
    background: #FFF;
}

.disabled {
    pointer-events: none;
}

.show-flex {
    display: flex !important;
}

.img-wrapper {
    overflow: hidden;
}

.bluebtn:hover {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%), #0063A8;
    color: #FFFFFF;
}

.bluebtn:focus {
    background: #0063A8;
    color: #FFFFFF;
}

.sticky-header {
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 1055;
    padding: 1rem 0;
}

.our-Insights .card .card-body {
    height: 180px;
}

.justify-content {
    justify-content: space-between !important;
}

svg {
    transition: transform 0.3s ease !important;
    cursor: pointer;
}

svg:hover {
    transform: scale(1.2) !important;
}

th a:hover,
th a {
    color: #0063A8;
}

.owl-dots{margin-top:30px !important;}

.owl-theme .owl-dots .owl-dot span {
    background: #cbdae9;
}

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: #0063A8;
}

.system.dropdown-menu {
    flex-wrap: wrap;
    flex-direction: row;
    list-style: none;
    padding: 20px;
    gap: 30px;
}

.system.dropdown-menu>li {
    min-width: 200px;
}

li.bottom-width {
    min-width: 665px !important;
}

.system.dropdown-menu ul {
    list-style: none;
    padding: 0;
}

::selection,
::-moz-selection {
    background: rgba(170, 170, 170, 0.3);
}

.heading {
    width: max-content;
    display: flex;
    flex-direction: column;
}

.heading>div {
    overflow: hidden;
}

.heading>div>h1 {
    width: max-content;
    white-space: nowrap;
    margin: 0;
    line-height: 117%;
}

.slide-up {
    animation: slide-up 0.9s cubic-bezier(0.65, 0, 0.35, 1) both;
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.8s ease, opacity 0.8s ease;
    animation-delay: 0.1s;
}

h1, h2, h3, .heading h5, .heading h4, p.animated-para, th.animated-para, .btn.animated-para, .card.animated-para, .img-container.animated-para {
    transform: translateY(20px);
    opacity: 0;
}

@keyframes slide-up {
    0% {
        transform: translateY(100px);
        opacity: 0;
    }

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

.animated-para {
    animation-delay: 0.2s;
}

.animated-para.btn {
    animation-delay: 0.7s;
}

.img-container {
    overflow: hidden;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.img-container img {
    transition: transform 0.3s ease-in-out;
}

.img-container:hover img {
    transform: scale(1.1);
}

.slide-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
}

.btn_text-wrapper {
    display: inline-block;
    position: relative;
    overflow: hidden;
}

.btn_text {
    display: block;
    transition: transform 0.4s ease;
    white-space: nowrap;
}

.btn_text--default {
    transform: translateY(0%);
}

.btn_text--hover {
    position: absolute;
    top: 100%;
    left: 0;
    transform: translateY(0%);
}

.slide-button:hover .btn_text--default {
    transform: translateY(-100%);
}

.slide-button:hover .btn_text--hover {
    transform: translateY(-100%);
}

.circular-text-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 10px 10px 0;
    width: 200px;
    height: 200px;
}

.circular-text-container .bg-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

.circular-text-container .center-image {
    position: absolute;
    width: 30%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease;
    z-index: 2;
    pointer-events: auto;
    cursor: pointer;
}

.circular-text-container .center-image:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.circular-text {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.circular-text span {
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: 0 0;
    font-size: 14px;
    color: white;
    text-transform: uppercase;
    font-weight: 500;
    white-space: pre;
}

.nav-link.pe-none {
    color: #959595;
}

.googleMap .factory-office,
.googleMap .head-office {
    height: 669px;
}

@media (min-width:1600px){
    .contact-heroimg,
    .sustainability-heroimg,
    .freestanding-img {
        height: 670px;
    }
}

@media (max-width: 1599.98px) {

    .container {
        max-width: 100%;
        padding-left: 13%;
        padding-right: 13%;
    }

    .nav-link {
        font-size: 13px;
    }

    .navbar-nav .dropdown-item {
        font-size: 13px;
    }

    h1 {
        font-size: 74px;
    }

    h3 {
        font-size: 36px;
    }

    h2 {
        font-size: 50px;
    }

    th {
        font-size: 16px;
    }

    .link p {
        font-size: 14px;
    }

    p.cardtext {
        font-size: 14px;
    }

    .Vision-Mission img {
        height: 538px;
    }

    .about-heroimage {
        height: 90dvh;
    }

    .our-project .card {
        height: auto;
    }

    .our-project .col.desktopview .card:hover .cardbody {
        margin-top: 75% !important;
    }

    .contact-heroimg,
    .sustainability-heroimg,
    .freestanding-img {
        height: 670px;
    }

    .certifications h2 {
        font-size: 42px;
    }

    .system.dropdown-menu {
        gap: 10px;
    }

    .system.dropdown-menu>li {
        min-width: 170px;
    }

    li.bottom-width {
        min-width: 554px !important;
    }

    .modalcards .card {
        height: 550px;
    }

    p {
        font-size: 16px;
    }

}

@media (max-width: 1535.98px) {

    .container {
        max-width: 100%;
        padding-left: 13%;
        padding-right: 13%;
    }

    h3 {
        font-size: 32px;
    }

    h5 {
        font-size: 18px;
    }

    .our-Insights h5 {
        font-size: 18px;
    }

    .about .padding-right {
        padding-right: 2%;
    }


    li.bottom-width {
        min-width: 360px !important;
    }

    .modalcards .card {
        height: 520px;
    }

    p {
        font-size: 16px;
    }

}

@media (max-width: 1440.98px) {

    .container {
        max-width: 100%;
        padding-left: 13%;
        padding-right: 13%;
    }

    h1 {
        font-size: 60px;
        line-height: 72px;
    }

    h2 {
        font-size: 46px;
    }

    .top-icons {
        gap: 18px;
    }

    .nav-link {
        font-size: 13px;
    }

    .navbar-nav .dropdown-item {
        font-size: 10px;
    }

    .our-Insights h5 {
        font-size: 14px;
    }

    .circular-text span {
        font-size: 12px;
    }

    footer .contact a p,
    footer a p, footer p {
        font-size: 14px;
    }

    .Vision-Mission img {
        height: 520px;
    }

    .about-heroimage {
        height: 70dvh;
    }


    .about .customwidth-left {
        width: 55%;
    }

    .about .customwidth-right {
        width: 45%;
    }

    .about .padding-right {
        padding-right: 4%;
    }

    .our-project .card {
        height: 510px;
    }

}

@media (max-width: 1399.98px) {

    .container {
        max-width: 100%;
        padding-left: 10%;
        padding-right: 10%;
    }

    section.herosection .container.navbar-wrapp {
        padding-left: 8%;
        padding-right: 8%;
    }

    h1 {
        line-height: 67px;
    }

    h2 {
        font-size: 44px;
    }

    .circular-text-container {
        width: 135px;
        height: 135px;
    }

    .circular-text span {
        font-size: 10px;
    }

    .circular-text-container .center-image {
        width: 20%;
    }

    .leftpadding {
        padding-left: 10%;
    }

    .owl-theme .owl-nav.disabled+.owl-dots {
        display: none;
    }

    .about .customwidth-left,
    .about .customwidth-right {
        width: 50%;
    }

    .our-project .card {
        height: auto;
    }

    .our-project .card .cardbody {
        
    }

    .our-project .col.desktopview .card:hover .cardbody {
        margin-top: 97% !important;
    }

    .our-project .projectdetails .col.desktopview .card:hover .cardbody {
        margin-top: 77% !important;
    }

    .blog-cards h5 {
        font-size: 16px;
    }

    .system.dropdown-menu>li {
        min-width: 165px;
    }

    .about-heroimage {
        height: 75dvh;
    }

}

@media (max-width: 1199.98px) {

    .container {
        max-width: 100%;
        padding-left: 10%;
        padding-right: 10%;
    }

    h3 {
        font-size: 26px;
    }

    h2 {
        font-size: 40px;
    }

    h4 {
        font-size: 34px;
    }

    .our-system .card .card-body {
        height: 240px;
    }

    .choose-us .bluecard p {
        font-size: 14px;
    }


    textarea::placeholder, input::placeholder {
        font-size: 12px;
    }

    .Vision-Mission img {
        height: 505px;
    }

    .our-project .col.desktopview .card:hover .cardbody {
        margin-top: 90% !important;
    }

    .our-project .projectdetails .col.desktopview .card:hover .cardbody {
        margin-top: 91% !important;
    }


    .freestanding-img {
        height: 600px;
    }

    .btn {
        padding: 13px 15px;
    }

    .modalcards .card {
        height: 485px;
    }

    .system.dropdown-menu {
        gap: 0px;
    }

    .about-heroimage {
        height: 80dvh;
    }

    .circular-text-container {
        width: 110px;
        height: 110px;
    }

    .circular-text span {
        font-size: 8px;
    }
}

@media (max-width: 991.98px) {
    .headerlogo { padding-left:10px; }
    .container {
        max-width: 100%;
        padding-left: 8%;
        padding-right: 8%;
    }

    .top-icons {
        display: none !important;
    }

    .navbar .navbar-nav {
        display: none;
    }

    h1 {
        font-size: 44px;
        line-height: 51px;
    }

    h3 {
        font-size: 22px;
    }

    h2 {
        font-size: 28px;
    }

    p {
        font-size: 14px;
    }

    h5 {
        font-size: 18px;
    }

    .our-system .card .card-body {
        height: 255px;
    }

    .leftpadding {
        padding-left: 8%;
    }

    section.herosection .container.navbar-wrapp {
        padding-left: 6%;
        padding-right: 6%;
    }

    .about .customwidth-left {
        width: 100%;
        margin-top: 15%;
    }

    .about .padding-right {
        padding-right: 0;
    }

    .about-content {
        margin-top: 15%;
        margin-bottom: 4%;
    }

    .btn {
        padding: 9px 15px;
    }

    .our-project .projectdetails .col.desktopview .card:hover .cardbody,
    .our-project .col.desktopview .card:hover .cardbody {
        margin-top: 84% !important;
    }

    .certifications .customwidth-right {
        width: 100%;
    }

    .certifications .leftpadding {
        padding-left: 0;
    }

    .about .customwidth-left.teamjoining {
        margin-top: 25%;
    }
}

@media (max-width: 767.98px) {

    .container {
        max-width: 100%;
        padding-left: 4%;
        padding-right: 4%;
    }

    .leftpadding {
        padding-left: 4%;
    }

    .container.pe-0 {
        padding-right: 4% !important;
    }

    h3 {
        font-size: 18px;
    }

    .our-system .card .card-body {
        height: 220px;
    }

    .our-Insights .card .card-body {
        height: 159px;
    }

    .padding-right {
        padding-right: 0;
    }

    .form-control:not(textarea) {
        width: 100%;
    }

    textarea.form-control {
        width: 99%;
    }

    section.herosection .container.navbar-wrapp {
        padding-left: 3%;
        padding-right: 3%;
    }

    .spacing {
        padding-top: 10%;
        padding-bottom: 10%;
    }

    .customwidth-left {
        width: 100%;
    }

    .customwidth-right {
        width: 100%;
    }

    .about .padding-right {
        padding-right: 4%;
    }

    .about-content {
        margin-top: 22%;
        margin-bottom: 8%;
    }

    .col.mobileview, .mobileview {
        display: block !important;
    }

    .desktopview {
        display: none;
    }

    .map-div.desktopview {
        display: block;
    }

    .map-div.mobileview {
        display: none !important;
    }

    

    .owl-theme .owl-nav.disabled+.owl-dots {
        display: block;
    }

    .navigation {
        display: none !important;
        margin-top: 0 !important;
    }

    .our-project .card {
        height: auto;
    }

    .link p {
        font-size: 12px;
    }

    .heroimage {
        height: 450px;
    }

    .certifications .leftpadding {
        padding-left: 4%;
    }

    .button-position {
        top: 28%;
        flex-wrap: wrap;
    }

    .bottom-position {
        bottom: 18%;
    }
}

@media (max-width: 575.98px) {

    .container {
        max-width: 100%;
        padding-left: 4%;
        padding-right: 4%;
    }

    h1 {
        font-size: 28px;
        line-height: 34px;
    }

    .btn {
        width: 100%;
        padding: 9px 30px;
        font-size: 14px;
    }

    h3 {
        font-size: 14px;
    }

    p {
        font-size: 14px;
    }

    h4 {
        font-size: 26px;
    }

    .container.pe-0 {
        padding-right: 4% !important;
    }

    .card-body .btn {
        width: 94%;
    }

    .jobs .card-body .btn {
        width: 45%;
    }

    .our-system .card .card-body {
        height: 240px;
    }

    .about .padding-right {
        padding-right: 0;
    }

    .heroimage {
        height: 500px;
    }

    .flow p {
        font-size: 14px
    }

    .about .customwidth-left {
        margin-top: 25%;
    }

    .about .customwidth-left.about-content {
        margin-top: 35%;
    }

    th {
        font-size: 14px;
    }

    .map-div.desktopview {
        display: none;
    }

    .map-div.mobileview {
        display: block !important;
    }

    .about .customwidth-left.teamjoining {
        margin-top: 45%;
    }

    .nav-link {
        font-size: 16px;
    }

    .navbar-nav .dropdown-item {
        font-size: 16px;
    }

    .button-position {
        top: 18%;
    }

    .button-position .btn {
        padding: 9px 35px;
        justify-content: center;
    }
}

@media (max-width: 420.98px) {

    .container {
        max-width: 100%;
        padding-left: 4%;
        padding-right: 4%;
    }

    h1 {
        font-size: 24px;
    }

    h3 {
        font-size: 18px;
    }

    h2 {
        font-size: 23px;
    }

    .flow p {
        font-size: 12px
    }

    .our-system .card .card-body {
        height: 260px;
    }

    .about-content {
        margin-top: 35%;
    }

    .about .customwidth-left {
        margin-top: 30%;
    }

    th {
        font-size: 12px;
    }
}