    * {
        user-select: none;
        box-sizing: border-box;
    }
    html,
    body,
    div,
    span,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    pre,
    abbr,
    address,
    cite,
    code,
    del,
    dfn,
    em,
    img,
    ins,
    kbd,
    q,
    samp,
    small,
    strong,
    sub,
    sup,
    var,
    b,
    i,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td,
    article,
    aside,
    canvas,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section,
    summary,
    time,
    mark,
    audio,
    video {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 10px;
        vertical-align: baseline;
        background: transparent;
        text-decoration: none;
    }
    body {
        line-height: 1;
        font-family: 'Antonio', sans-serif;
    }
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section {
        display: block;
    }
    nav ul {
        list-style: none;
    }
    blockquote,
    q {
        quotes: none;
    }
    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
        content: '';
        content: none;
    }
    a {
        margin: 0;
        padding: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
        text-decoration: none;
        list-style: none;
    }
    /* change colours to suit your needs */
    
    ins {
        background-color: #ff9;
        color: #000;
        text-decoration: none;
    }
    /* change colours to suit your needs */
    
    mark {
        background-color: #ff9;
        color: #000;
        font-style: italic;
        font-weight: bold;
    }
    del {
        text-decoration: line-through;
    }
    abbr[title],
    dfn[title] {
        border-bottom: 1px dotted;
        cursor: help;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    /* change border colour to suit your needs */
    
    hr {
        display: block;
        height: 3px;
        border: 0;
        border-top: 2px solid #444;
        margin: 1rem 0;
        padding: 0;
    }
    input,
    select {
        vertical-align: middle;
    }
    /*all resets complete */
    
    .whatsapp {
        width: 5rem;
        height: 5rem;
        position: fixed;
        bottom: 2rem;
        right: 2rem;
        background: #075e54;
        border-radius: 5px;
        z-index: 10000;
    }
    .whatsapp a {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 100%;
        text-decoration: none;
    }
    .whatsapp a i {
        font-family: 'FontAwesome', sans-serif;
        font-size: 5rem;
        color: #fff;
        transition: all 0.5s ease;
    }
    .whatsapp a:hover {
        background: #fff;
    }
    .whatsapp a:hover i {
        color: #075e54;
        text-decoration: none;
    }
    /*promo popup*/
    
    .promo {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 5000;
        background-color: #fff;
        border-radius: 20px;
        display: none;
    }
    .contentBox {
        position: relative;
        width: 30rem;
        height: 35rem;
        display: flex;
        background: url(images/offer-dec.png);
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
        box-shadow: 0px 5px 15px rgba(0, 0, 0, 1);
        border-radius: 20px;
    }
    button.prom {
        position: absolute;
        bottom: 0rem;
        ;
        left: 50%;
        transform: translate(-50%);
        width: 50%;
        height: 2rem;
        margin: 1rem auto;
        border: none;
        outline: none;
        background: #00215d!important;
        border-radius: 20px;
        list-style: none;
        text-decoration: none;
    }
    .promo a {
        font-size: 1.3rem;
        text-decoration: none;
        list-style: none;
        color: #fff;
        padding: 0rem 0 .5rem 0;
    }
    .closed {
        position: absolute;
        top: 1rem;
        right: 1rem;
        width: 3rem;
        height: 3rem;
        background: transparent;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }
    .closed i {
        color: #00215d;
        font-size: 2.5rem;
        cursor: pointer;
        list-style: none;
        text-decoration: none;
    }
    @media only screen and (min-width:768px) {
        .contentBox {
            position: relative;
            width: 55rem;
            height: 55rem;
        }
        button.prom {
            position: absolute;
            bottom: 0rem;
            left: 50%;
            transform: translate(-50%);
            width: 50%;
            height: 3.5rem;
            margin: 1rem auto;
            border: none;
            outline: none;
            border-radius: 20px;
        }
        .promo a {
            font-size: 1.65rem;
            text-decoration: none;
            list-style: none;
            font-weight: 600;
        }
    }
    /*top contact*/
    
    .top {
        background: #fa6200;
        height: 8rem;
        width: 100%;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: space-between;
        text-decoration: none;
        list-style: none;
        /*    border-bottom:2px solid #1b5932;*/
    }
    .top i {
        color: #fff;
        margin-right: .3rem;
        font-size: 1.3rem;
        padding: .5rem;
        border-radius: 50%;
        border: 3px solid #fff;
    }
    .top p {
        color: #00215d;
        font-family: 'Montserrat', sans-serif;
        font-size: 1.3rem;
        display: block;
        margin: 0 auto;
        padding: 1rem 1rem;
        line-height: 6rem;
        font-weight: 700;
    }
    .top a.top-2 {
        float: left;
    }
    @media only screen and (min-width:768px) {
        .top {
            display: block;
        }
        .top img {
            display: none;
        }
        .top i {
            font-size: 2rem;
            padding: 1rem;
            margin-right: 1rem;
        }
        .top p {
            font-size: 1.8rem;
            line-height: 6rem;
        }
    }
    @media only screen and (min-width:1024px) {
        .top i {
            font-size: 2.2rem;
        }
        .top p {
            font-size: 2rem;
        }
    }
    @media only screen and (min-width:1280px) {
        .top i {
            font-size: 1.8rem;
        }
        .top p {
            font-size: 2rem;
        }
    }
    /*navigation start*/
    
    header {
        color: #444;
    }
    .header {
        z-index: 999;
        position: fixed;
        top: 8rem;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 2rem 2rem;
        background: #fff;
        height: 8rem;
    }
    .header.sticky {
        top: 0;
        background: #fff;
        padding: .5rem 2rem;
        transition: all 0.5s ease-in;
        box-shadow: 2px 3px 5px #00215d;
        width: 99%;
        height: 6rem;
    }
    .header.sticky:hover {
        letter-spacing: 1px;
        color: #fff;
        font-weight: 500;
    }
    .header .brand {
        height: 8rem;
    }
    .header .brand img {
        width: 8rem;
    }
    .header .menu {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .header .menu a {
        font-size: 1.8rem;
        font-weight: 600;
        text-decoration: none;
        color: #00215d;
        margin: 0 3rem;
        padding: .5rem 1.5rem;
        border-radius: 25px;
        transition: all 0.2s ease-in;
        font-family: 'Montserrat', sans-serif;
    }
    .menu a:hover {
        background: #00215d;
        color: #fa6200;
        font-weight: 200;
    }
    .header .btn {
        color: #00215d;
        cursor: pointer;
        display: none;
    }
    .header i {
        font-size: 2.5rem;
    }
    @media (max-width:1060px) {
        .header .btn {
            display: flex;
            margin-right: 4rem;
        }
        .header .menu {
            position: fixed;
            background: rgba(250, 98, 0, 0.85);
            flex-direction: column;
            min-width: 25rem;
            height: 100vh;
            top: 6rem;
            right: -100%;
            padding: 8rem 2rem;
            transition: all 0.5s ease;
        }
        .header .menu.active {
            right: 0;
        }
        .header .menu .close-btn {
            position: absolute;
            top: 0;
            left: 0;
            margin: 2.5rem;
            color: #00215d;
        }
        .header .menu a {
            display: block;
            font-size: 2rem;
            margin: 2rem;
            padding: 0 1.5rem;
        }
    }
    @media (max-width:500px) {
        .header .btn {
            display: flex;
        }
        .header .menu {
            position: fixed;
            background: rgba(250, 98, 0, 0.85)!important;
            flex-direction: column;
            width: 25%;
            height: 100vh;
            top: 6rem;
            right: -100%;
            padding: 8rem 1rem;
            transition: all 0.5s ease;
        }
    }
    /*landing page start*/
    /*architecture header*/
    
    header.arc {
        height: 60vh;
        width: 100%;
        background: ;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        border: 2px dotted red;
    }
    header.flr {
        height: 60vh;
        width: 100%;
        background: url(images/landing-floor.png);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    header.con {
        height: 60vh;
        width: 100%;
        background: ;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    /*slider section*/
    
    .intro-section .container .row {
        height: calc(90vh - 14rem);
        margin-top: 8rem;
        background: #fff;
    }
    .intro-section {
        position: relative;
    }
    .custom-owl-carousel {
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
    }
    .intro-section:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 80%;
        top: 0rem;
        left: 0;
        background-color: #00215d;
        border-bottom-right-radius: 200px;
    }
    h2.land {
        color: #fff;
        font-family: 'Montserrat', sans-serif;
        font-size: 2rem;
        margin-left: 1rem;
        padding: 3rem 1rem 0rem 1rem;
    }
    p.land {
        color: #fff;
        font-family: 'Montserrat', sans-serif;
        font-size: 1.2rem;
        padding: 0 2rem 0 1rem;
    }
    p.land a {
        color: #fff;
        border: 2px solid #fff;
        border-radius: 10px;
        font-size: 1.3rem;
        margin: 1rem;
        background: #fa6200;
    }
    .custom-owl-carousel .owl-custom-direction a {
        display: inline-block;
        z-index: 1;
        color: #fa6200;
        padding: 1rem 1.5rem;
        position: relative;
        background: #fff;
        float: left;
        margin: 1rem .25rem 0 0;
    }
    .custom-owl-carousel .owl-custom-direction a:first-child {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }
    .custom-owl-carousel .owl-custom-direction a:last-child {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }
    .custom-owl-carousel .owl-custom-direction {
        position: absolute;
        bottom: 0rem;
        z-index: 9;
        left: 50%;
        transform: translateX(50%);
    }
    .owl-custom-direction a i {
        font-size: 2rem;
    }
    .slide-one-item-alt {
        border-top-left-radius: 200px;
        overflow: hidden;
        box-shadow: 0 30px 100px -20px rgba(0, 0, 0, 1);
        width: 100%;
    }
    .slide-one-item-alt img {
        width: 85%;
        height: 95%;
    }
    @media only screen and (min-width:768px) {
        .intro-section .container .row {
            height: calc(90vh - 13.5rem);
            margin-top: 8rem;
            background: #fff;
        }
        .intro-section:before {
            content: "";
            position: absolute;
            height: 100%;
            width: 100%;
            top: 0rem;
            left: 0;
            background-color: #00215d;
            border-top-right-radius: 200px;
            border-bottom-right-radius: 0px;
        }
        h2.land {
            color: #fff;
            font-family: 'Monserrat', sans-serif;
            font-size: 3rem;
            font-weight: 500;
            margin-top: 2rem;
        }
        p.land {
            color: #fff;
            font-family: 'Montserrat', sans-serif;
            font-size: 1.6rem;
            padding: 1rem 6rem 0 2rem;
            font-weight: 400;
            letter-spacing: .5px;
        }
        p.land a {
            color: #fff;
            border: 2px solid #fff;
            border-radius: 4px;
            font-size: 1.6rem;
            margin-left: 2rem;
            background: #fa6200;
            font-weight: 600;
        }
        .custom-owl-carousel .owl-custom-direction a {
            display: inline-block;
            z-index: 1;
            color: #fa6200;
            padding: 1rem 1.5rem;
            position: relative;
            background: #fff;
            float: left;
            margin: .25rem .5rem 0 0;
        }
        .slide-one-item-alt {
            width: 85%;
            height: 85%;
        }
        .slide-one-item-alt img {
            width: 100%;
            height: 100%;
        }
    }
    @media only screen and (min-width:1024px) {
        .intro-section .container .row {
            height: calc(100vh - 13.5rem);
            margin-top: 8rem;
            background: #fff;
        }
        .intro-section:before {
            content: "";
            position: absolute;
            height: 95%;
            width: 70%;
            top: 0rem;
            left: 0;
            background-color: #00215d;
            border-top-right-radius: 0px;
            border-bottom-right-radius: 200px;
        }
        h2.land {
            color: #fff;
            font-family: 'Montserrat', sans-serif;
            font-size: 3.5rem;
            width: 100%;
            margin-left: 0rem;
            font-weight: 500;
        }
        p.land {
            color: #fff;
            font-family: 'Montserrat', sans-serif;
            font-size: 1.8rem;
            padding: 1rem .5rem 2rem 1rem;
            letter-spacing: 1px;
        }
        p.land a {
            color: #fff;
            border: 2px solid #fff;
            border-radius: 4px;
            font-size: 1.7rem;
            margin-left: 0rem;
            background: #fa2600;
            margin-top: 2rem;
        }
        .custom-owl-carousel .owl-custom-direction a {
            display: inline-block;
            z-index: 1;
            color: #fa6200;
            padding: .5rem 1.5rem;
            position: relative;
            background: #fff;
            float: left;
            margin: .25rem .5rem .5rem 0;
        }
        .slide-one-item-alt {
            width: 90%;
            height: 90%%;
        }
        .slide-one-item-alt img {
            width: 100%;
            height: 100%;
        }
    }
    /*main section start   */
    
    main {
        max-width: 99%;
        margin: 0 auto;
        font-family: 'Montserrat', sans-serif;
        background: url(images/bg-1.png);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        height: 100%;
    }
    h2 {
        color: #00215d;
        text-transform: capitalize;
    }
    h3 {
        color: #fa6200;
        text-transform: capitalize;
    }
    p {
        color: #161616;
    }
    a {
        color: #00215d;
        list-style: none;
        text-decoration: none;
    }
    i {
        color: #fa6200;
    }
    h1 {
        color: #fa6200;
        text-transform: capitalize;
    }
    h4 {
        color: #fa6200;
    }
    /*services*/
    
    .services {
        width: 100%;
        margin: 0 auto;
        background: transparent;
        padding: 2rem 0 0 0;
    }
    button.cta {
        margin: 1rem 0rem 4rem 4rem;
        border: none;
        outline: none;
        background: #00215d;
        font-size: 1.3rem;
        padding: .5rem 1rem;
        border-radius: 5px;
        cursor: pointer;
    }
    button.cta a {
        text-decoration: none;
        list-style: none;
        color: #fff;
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        letter-spacing: .5px;
    }
    .wrap {
        margin: 0 auto;
        text-align: center;
    }
    h2.serv {
        padding: 6rem 0 2rem 0;
    }
    .ser-wrap1,
    {
        width: 100%;
        padding: 0;
    }
    .part1 {
        display: block;
    }
    .part1 h1.serv {
        text-align: center;
        padding: 3rem 0 0 0;
        font-size: 2.3rem;
    }
    .wrap .part1 img {
        padding: 0rem 1rem;
        width: 100%;
    }
    h4.serv {
        text-align: center;
        padding: 2rem 0;
        font-size: 1.4rem;
    }
    .wrap img {
        width: 65%;
        margin: 0 auto;
        text-align: center;
    }
    p.serv {
        text-align: left;
        margin-left: 5rem;
        font-size: 1.3rem;
        padding: .5rem 0;
    }
    p.serv i {
        margin-right: 1rem;
        font-size: 2rem;
    }
    .bimage,
    .bimage2,
    .bimage3,
    {
        height: 15rem;
        width: 90%;
        margin: 0 auto;
        text-align: center;
        box-shadow: 5px 5px 10px rgba(2, 33, 93, 1);
        /*    clip-path: polygon(0 0, 50% 46%, 100% 100%, 0% 100%);*/
    }
    .bimage {
        background: url(images/bgi-1.png);
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .bimage2 {
        background: url(images/bgi-2.png);
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .bimage3 {
        background: url(images/bgi-3.png);
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    /*-----------services mq-----*/
    
    @media only screen and (min-width:768px) {
        button.cta {
            margin: 2rem 0rem 6rem 6rem;
            border: none;
            outline: none;
            background: #00215d;
            font-size: 1.3rem;
            padding: .5rem 1rem;
            border-radius: 5px;
            cursor: pointer;
        }
        button.cta a {
            text-decoration: none;
            list-style: none;
            color: #fff;
            font-family: 'Montserrat', sans-serif;
            font-weight: 400;
            letter-spacing: .5px;
        }
        h2.serv {
            padding: 8rem 0 1rem 0;
            margin-left: 5rem;
            font-size: 3.5rem;
        }
        .wrap {
            text-align: center;
            margin: 0 auto
        }
        .part1 {
            display: block;
        }
        .part1 h1.serv {
            text-align: center;
            padding: 8rem 0 0 0;
            font-size: 3rem;
        }
        .wrap .part1 img {
            padding: 0;
            width: 75%;
        }
        .wrap img#pic {
            padding: 0 4rem;
            width: 90%;
        }
        h4.serv {
            text-align: center;
            padding: 2rem 0;
            font-size: 2rem;
        }
        p.serv {
            text-align: left;
            margin-left: 5rem;
            font-size: 1.5rem;
            padding: .5rem 0;
        }
        p.serv i {
            margin-right: .5rem;
            font-size: 3rem;
        }
        .bimage,
        .bimage2,
        .bimage3,
        {
            height: 28rem;
            width: 90%;
            margin: 0 auto;
            text-align: center;
            box-shadow: 5px 5px 10px rgba(2, 33, 93, 1);
            /*    clip-path: polygon(0 0, 50% 46%, 100% 100%, 0% 100%);*/
        }
        .bimage {
            background: url(images/bgi-1.png);
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
        }
        .bimage2 {
            background: url(images/bgi-2.png);
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
        }
        .bimage3 {
            background: url(images/bgi-3.png);
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
        }
    }
    @media only screen and (min-width:1024px) {
        button.cta {
            margin: 2rem 0rem 6rem 8rem;
            border: none;
            outline: none;
            background: #00215d;
            font-size: 1.7rem;
            padding: .5rem 1rem;
            border-radius: 5px;
            cursor: pointer;
        }
        button.cta a {
            text-decoration: none;
            list-style: none;
            color: #fff;
            font-family: 'Montserrat', sans-serif;
            font-weight: 400;
            letter-spacing: .5px;
        }
        h2.serv {
            padding: 8rem 0 1rem 0;
            margin-left: 5rem;
            font-size: 4.2rem;
        }
        .wrap {
            text-align: center;
            margin: 0 auto
        }
        .part1 {
            display: block;
        }
        .part1 h1.serv {
            text-align: center;
            padding: 10rem 0 0 0;
            font-size: 3.8rem;
        }
        .wrap .part1 img {
            padding: 0;
            width: 70%;
        }
        .wrap img#pic {
            padding: 0 4rem;
            width: 70%;
        }
        h4.serv {
            text-align: center;
            padding: 2rem 0;
            font-size: 3rem;
        }
        p.serv {
            text-align: left;
            margin-left: 10rem;
            font-size: 1.7rem;
            padding: .5rem 0;
        }
        p.serv i {
            margin-right: .5rem;
            font-size: 3rem;
        }
        .bimage,
        .bimage2,
        .bimage3,
        {
            height: 35rem;
            width: 90%;
            margin: 0 auto;
            text-align: center;
            box-shadow: 5px 5px 10px rgba(2, 33, 93, 1);
            /*    clip-path: polygon(0 0, 50% 46%, 100% 100%, 0% 100%);*/
        }
        .bimage {
            background: url(images/bgi-1.png);
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
        }
        .bimage2 {
            background: url(images/bgi-2.png);
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
        }
        .bimage3 {
            background: url(images/bgi-3.png);
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
        }
    }
    @media only screen and (min-width:1200px) {
        .part1 h1.serv {
            text-align: center;
            padding: 6rem 0 0 0;
            font-size: 3.5rem;
        }
        .wrap .part1 img {
            padding: 0;
            width: 50%;
        }
        .wrap img#pic {
            padding: 0 4rem;
            width: 50%;
        }
        h4.serv {
            text-align: center;
            padding: 2rem 2rem;
            ;
            font-size: 2.5rem;
        }
        p.serv {
            text-align: left;
            margin-left: 20rem;
            font-size: 1.5rem;
            padding: .5rem 0;
        }
        p.serv i {
            margin-right: .5rem;
            font-size: 2rem;
        }
        .bimage,
        .bimage2,
        .bimage3,
        {
            height: 35rem;
            width: 90%;
            margin: 0 auto;
            text-align: center;
            box-shadow: 5px 5px 10px rgba(2, 33, 93, 1);
            /*    clip-path: polygon(0 0, 50% 46%, 100% 100%, 0% 100%);*/
        }
        .bimage {
            background: url(images/bgi-1.png);
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
        .bimage2 {
            background: url(images/bgi-2.png);
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
        .bimage3 {
            background: url(images/bgi-3.png);
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
    }
    /*   about section start  */
    
    .about {
        width: 90%;
        margin: 0 auto;
        background: transparent;
        padding: 2rem 0 0 0;
    }
    .logos {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        height: 10rem;
        line-height: 8ren;
        display: none;
    }
    .logos img {
        height: 100%;
    }
    h2.ab {
        padding: 6rem 0 2rem 0;
        text-align: center;
        font-size: 3.5rem;
    }
    h3.ab {
        text-align: center!important;
        padding: 1rem 0 2rem 0;
        font-size: 3rem;
    }
    p.ab {
        text-align: left;
        text-indent: 4px;
        padding: .5px 0;
        font-size: 1.4rem;
        color: #161616;
    }
    p.vis {
        text-align: left;
        text-indent: 4px;
        padding: .5px 0 2rem 0;
        font-size: 1.4rem!important;
        color: #161616;
    }
    .vision-icon {
        display: flex;
        justify-content: space-around;
        align-items: center;
        display: none!important;
    }
    .vision-icon i {
        font-size: 5rem!important;
        margin: 3rem;
        padding: 1rem;
        border: 2px solid transparent!important;
        border-radius: 50%;
        background: transparent!important;
        color: #00215d;
    }
    h3.soc {
        padding: 5rem 0 .5rem 0!important;
        color: #00215d!important;
        font-size: 3.5rem;
    }
    .soci {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        height: 6rem!important;
        margin-bottom: 3rem;
    }
    .social i {
        line-height: 6rem!important;
        font-size: 4.5rem!important;
    }
    .fa-facebook-square {
        color: #1877f2;
    }
    .fa-instagram {
        color: #c13584;
    }
    .fa-youtube {
        color: #ff0000;
    }
    .s-bg {
        height: 20rem;
        width: 90%;
        margin: 3rem auto;
        text-align: center;
        box-shadow: 5px 5px 10px rgba(2, 33, 93, 1);
        background: url(images/soc-bg.png);
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .viss {
        margin: 2rem auto;
        text-align: center;
    }
    /*--------------------about mq-----------------*/
    
    @media only screen and (min-width:768px) {
        .about {
            width: 90%;
            margin: 0 auto;
            background: transparent;
            padding: 2rem 0 0 0;
        }
        .logos {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            height: 10rem;
            line-height: 8ren;
            display: none;
        }
        .logos img {
            height: 100%;
        }
        h2.ab {
            padding: 6rem 0 2rem 0;
            text-align: center;
            font-size: 3.2rem;
            text-align: left;
        }
        h3.ab {
            text-align: left;
            padding: 1rem 0 2rem 0;
            font-size: 2rem;
        }
        p.ab {
            text-align: left;
            text-indent: 4px;
            padding: .5px 0;
            font-size: 1.2rem;
            color: #161616;
        }
        p.vis {
            text-align: left;
            text-indent: 4px;
            padding: .5px 0 2rem 0;
            font-size: 1.2rem;
            color: #161616;
        }
        .vision-icon {
            display: flex;
            justify-content: space-around;
            align-items: center;
            display: block!important;
        }
        .vision-icon i {
            font-size: 3rem;
            margin: 3rem;
            padding: 1rem;
            border: 2px solid #00215d;
            border-radius: 50%;
            background: #161616;
        }
        h3.soc {
            padding: 1rem 0 2rem 0;
            color: #00215d!important;
        }
        .soci {
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            height: 5rem;
        }
        .social i {
            line-height: 4rem;
            font-size: 3rem;
        }
    }
    /*-------------pages---------------*/
    
    .pages {
        width: 85%;
        margin: 0 auto;
        padding: 6rem 0 0 0;
        background: transparent;
        display: flex;
        justify-content: center;
        . align-items: center;
    }
    .pages iframe {
        margin: 0 auto;
        text-align: center;
    }
    .pages-2 {
        width: 85%;
        margin: 0 auto;
        padding: 6rem 0 0 0;
        background: transparent;
        display: flex;
        justify-content: center;
        . align-items: center;
    }
    .pages-2 iframe {
        margin: 0 auto;
        text-align: center;
    }
    /*contact section start*/
    
    .contact {
        width: 100%;
        background: transparent;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        display: grid;
        align-items: center;
    }
    .contact-wrap {
        width: 80%;
        height: auto;
        margin: auto;
        display: flex;
        flex-wrap: wrap;
    }
    .contact-in {
        padding: 4rem 3rem;
    }
    .contact-in:nth-child(1) {
        flex: 30%;
        background: rgba(2, 33, 93, 1);
        border-top-left-radius: 100px;
    }
    .contact-in:nth-child(2) {
        flex: 45%;
        background: rgba(2, 33, 93, 1);
        border-top-right-radius: 100px;
    }
    .contact-in:nth-child(3) {
        flex: 25%;
        padding: 0;
    }
    h2.cont {
        padding: 6rem 0 2rem 0;
        text-align: center;
        font-size: 2.5rem;
        color: #00215d!important;
    }
    h3.cont {
        text-align: left;
        padding: 0 0 1rem 0;
        font-size: 2.5rem;
        color: #fa6200!important;
    }
    h4.cont {
        text-align: left;
        padding: .5rem 0 0 0;
        font-size: 1.8rem;
    }
    p.cont {
        font-size: 1.3rem;
        color: #fff!important;
        padding: .2rem;
        letter-spacing: 1px;
    }
    .contact-wrap i {
        color: #fff!important;
        margin-right: 1rem;
    }
    .socico {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        margin-top: 2rem;
    }
    .socico i {
        font-size: 3rem;
    }
    /*form*/
    
    .contact-in form {
        width: 100%;
        height: auto;
    }
    .contact-in-input {
        width: 100%;
        height: 4rem;
        margin-bottom: 2rem;
        border: 1px solid #fa6200;
        border-top-right-radius: 20px;
        border-bottom-left-radius: 20px;
        outline: none;
        padding-left: .5rem;
        background: transparent;
        color: #fff;
        font-size: 1.2rem;
        letter-spacing: 1px;
    }
    .contact-in-input::placeholder {
        color: #fff;
    }
    .contact-in textarea {
        width: 100%;
        height: 14rem;
        margin-bottom: 2rem;
        border: 1px solid #fa6200;
        border-top-right-radius: 20px;
        border-bottom-left-radius: 20px;
        outline: none;
        padding-left: .5rem;
        padding-top: 1rem;
        background: transparent;
        color: #fff;
        font-size: 1.2rem;
        letter-spacing: 1px;
        resize: none;
    }
    .contact-in textarea::placeholder {
        color: #fff;
    }
    .contact-in button {
        width: 100%;
        height: 4rem;
        margin-bottom: 2rem;
        border: 1px solid #fa6200;
        border-top-right-radius: 20px;
        border-bottom-left-radius: 20px;
        outline: none;
        background: transparent;
        color: #fff;
        font-size: 1.2rem;
        letter-spacing: 1px;
        font-size: 2rem;
        transition: all 0.5s ease-in-out;
    }
    .contact-in button:hover {
        font-size: 1.95rem;
        background: rgba(250, 98, 0, 0.75);
    }
    .contact-in iframe {
        width: 100%;
        height: 100%;
    }
    @media only screen and (max-width:480px) {
        .contact-in:nth-child(1) {
            flex: 50%;
            background: #00215d;
        }
        .contact-in:nth-child(2) {
            flex: 50%;
            background: #fff;
        }
        .contact-in:nth-child(3) {
            flex: 100%;
        }
    }
    @media only screen and (max-width:360px) {
        .contact-in:nth-child(1) {
            flex: 100%;
            background: #161616;
        }
        .contact-in:nth-child(2) {
            flex: 100%;
            background: #161616;
        }
        .contact-in:nth-child(3) {
            flex: 100%;
        }
    }
    /*-----------------------------------------------------------------------------------------Floors Page*/
    
    .gallery {
        width: 100%;
        background: transparent;
        height: 100%;
        padding: 0;
        margin: 0 auto;
    }
    h2.gal {
        padding: 3rem 0 2rem 0;
        font-size: 2.5rem;
        color: #00215d;
        text-align: left;
        margin-left: 2rem;
    }
    .wrapper {
        margin: 3rem auto;
        max-width: 130rem;
        text-align: center;
    }
    .wrapper nav {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    nav .items {
        display: flex;
        /*    max-width:7rem;*/
        width: 100%;
        justify-content: space-between;
    }
    nav .items .item {
        padding: .25rem .25rem;
        font-size: 1rem;
        font-family: 'Montserrat', sans-serif;
        color: #fa6200;
        border: 2px solid #00215d;
        border-radius: 10px;
        margin: .1rem;
        cursor: pointer;
        transition: all 1s ease;
    }
    nav .items .active,
    nav .items .item:hover {
        color: #fff;
        background: #00215d;
        border: 2.05px solid #fa6200;
        font-size: .95rem;
    }
    /*gallery images*/
    
    .photos {
        display: flex;
        flex-wrap: wrap;
        margin-top: 3rem;
    }
    .photos .image {
        width: calc(100%);
        padding: .5rem;
    }
    /*javascrip display or hide selected images*/
    
    .photos .image.hide {
        display: none;
    }
    .photos .image.show {
        display: block;
        animation: image 0.5s ease;
    }
    @keyframes image {
        0% {
            transform: scale(0.5);
        }
        100% {
            transform: scale(1);
        }
    }
    .photos .image span {
        display: flex;
        width: 100%;
        overflow: hidden;
    }
    .photos .image img {
        width: 100%;
        height: 100%;
        vertical-align: middle;
        transition: 0.3s ease-out;
    }
    .photos .image:hover img {
        transform: scale(1.1);
    }
    /*--------------------image preview box*/
    
    .preview-box {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.9);
        max-width: 28rem;
        width: 100%;
        background: transparent;
        box-shadow: 0 0 15px (#00215d);
        border-radius: 3px;
        padding: 0 .5rem 1rem .5rem;
        z-index: 5;
        opacity: 0;
        pointer-events: none;
        overflow: hidden;
    }
    /*------javascript functions*/
    
    .preview-box.show {
        opacity: 1;
        pointer-events: auto;
        transform: translate(-50%, -50%) scale(1);
    }
    .preview-box .details {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 1.5rem 1rem 1rem;
    }
    .preview-box .details .title {
        display: flex;
        font-weight: 400;
        font-size: 1.3rem;
        color: #fff;
        letter-spacing: .5px;
    }
    .details .title p {
        margin-left: 1rem;
        color: #fff;
        font-weight: 500;
        font-size: 1.3rem;
        letter-spacing: .5px;
    }
    .details .icon {
        font-size: 1.8rem;
        cursor: pointer;
        color: #fff;
    }
    .preview-box .image-box {
        display: flex;
        width: 100%;
    }
    .image-box img {
        width: 100%;
        height: 100%;
        border-radius: 0 0 3px 3px;
    }
    /*shadow----------------------------------*/
    
    .shadow {
        position: fixed;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        z-index: 2;
        display: none;
        background: rgba(0, 0, 0, 0.85);
    }
    .shadow.show {
        display: block;
    }
    /*------------------------------------------------------------------------------------floors pages-------------------------------------------------*/
    
    .img-break {
        text-align: center;
        padding: 1rem 0;
        margin: 0 auto;
        width: 100%;
    }
    .floors {
        width: 90%;
        background: transparent;
        margin: 0 auto;
        padding: 0;
    }
    h2.arch {
        padding: 8rem 0 2rem 0;
        font-size: 2.5rem;
        color: #00215d;
        text-align: left;
    }
    h1.fl {
        font-size: 1.5rem;
        padding: 0 0 2rem 0;
        color: rgba(22, 22, 22, 0.5);
        text-align: center;
    }
    h1.fl i {
        font-size: 1rem;
        margin-left: .5rem;
    }
    h3.fl {
        text-align: center;
        font-size: 1.5rem;
        padding: 1rem 0 0 0;
    }
    p.fl {
        text-align: left;
        margin-left: 1rem;
        text-indent: .5rem;
        padding: .5rem 0;
        font-size: 1.2rem;
        color: #161616;
    }
    /*-------------------------------*/
    
    .additional {
        width: 100%;
        height: 100% auto;
        background: rgba(2, 33, 93, 1);
        padding: 2rem;
        border-top-right-radius: 200px;
    }
    h2.add {
        color: #fff!important;
        font-size: 1.8rem;
        padding: 4rem 0 1rem 0;
        text-align: left;
    }
    h4.add {
        padding: 0 1rem .5rem 0;
        color: #fff!important;
        font-size: 1.5rem;
    }
    p.add {
        text-align: left;
        margin-left: .5rem;
        color: #fff!important;
        font-size: 1.3rem;
        font-weight: 300;
        letter-spacing: .5px;
    }
    p.add i {
        margin-right: 1rem;
        font-size: 1.5rem;
    }
    h2.flq {
        font-size: 1.5rem;
        padding: 2rem 0 2rem 0;
        color: rgba(22, 22, 22, 0.5);
        text-align: center;
    }
    h2.flq i {
        color: #00215d;
    }
    /*---------------------------------*/
    /*sub pages mq--------------------------*/
    
    @media only screen and (min-width:768px) {
        .floors {
            width: 90%;
            background: transparent;
            margin: 0 auto;
            padding: 0;
        }
        h2.arch {
            padding: 8rem 0 2rem 0;
            font-size: 3.5rem;
            color: #00215d;
            text-align: left;
        }
        h1.fl {
            font-size: 1.6rem;
            padding: 1rem 0 2rem 0;
            color: rgba(22, 22, 22, 0.3);
            text-align: center;
            font-weight: 200!important;
        }
        h1.fl i {
            font-size: 2rem;
            margin-left: .5rem;
            color: rgba(250, 98, 0, 0.4);
        }
        h3.fl {
            text-align: center;
            font-size: 1.8rem;
            padding: 1rem 0 .5rem 0;
        }
        p.fl {
            text-align: left;
            margin-left: 0;
            text-indent: .5rem;
            padding: 1rem 0;
            font-size: 1.4rem;
            color: #161616;
            width: 75%;
            margin: 0 auto;
        }
        /*-------------------------------*/
        .additional {
            width: 75%;
            background: rgba(2, 33, 93, 1);
            padding: 1rem;
            border-top-right-radius: 200px;
            margin: 0 auto;
        }
        h2.add {
            color: #fff!important;
            font-size: 2rem;
            padding: 2rem 0 2rem 0;
            text-align: left;
        }
        h4.add {
            padding: 0 1rem .5rem 0;
            color: #fff!important;
            font-size: 1.6rem;
        }
        p.add {
            text-align: left;
            margin-left: .5rem;
            color: #fff!important;
            font-size: 1.5rem;
            font-weight: 300;
            letter-spacing: .5px;
        }
        p.add i {
            margin-right: 1rem;
            font-size: 1.7rem;
        }
        h2.flq {
            font-size: 1.6rem;
            padding: 4rem 0 3rem 0;
            color: rgba(22, 22, 22, 0.4);
            text-align: center;
        }
        h2.flq i {
            color: rgba(2, 33, 93, 0.6);
        }
        /*-------------gallery-----------------*/
        .gallery {
            width: 90%;
            background: transparent;
            height: 100%;
            padding: 0;
            margin: 0 auto;
        }
        h2.gal {
            padding: 3rem 0 2rem 0;
            font-size: 3.5rem;
            color: #00215d;
            text-align: left;
            margin-left: 0rem;
        }
        .wrapper {
            margin: 3rem auto;
            max-width: 130rem;
            text-align: center;
        }
        .wrapper nav {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        nav .items {
            display: flex;
            /*    max-width:7rem;*/
            width: 100%;
            justify-content: space-between;
        }
        nav .items .item {
            padding: .5rem .5rem;
            font-size: 1.3rem;
            margin: .5rem;
        }
        nav .items .active,
        nav .items .item:hover {
            color: #fff;
            background: #00215d;
            border: 2.05px solid #fa6200;
            font-size: 1.28rem;
        }
        /*gallery images*/
        .photos {
            display: flex;
            flex-wrap: wrap;
            margin-top: 3rem;
        }
        .photos .image {
            width: calc(100% / 2);
            padding: 1rem;
        }
        /*javascrip display or hide selected images*/
        .photos .image.hide {
            display: none;
        }
        .photos .image.show {
            display: block;
            animation: image 0.5s ease;
        }
        @keyframes image {
            0% {
                transform: scale(0.5);
            }
            100% {
                transform: scale(1);
            }
        }
        .photos .image span {
            display: flex;
            width: 100%;
            overflow: hidden;
        }
        .photos .image img {
            width: 100%;
            height: 100%;
            vertical-align: middle;
            transition: 0.3s ease-out;
        }
        .photos .image:hover img {
            transform: scale(1.1);
        }
        /*--------------------image preview box*/
        .preview-box {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.9);
            max-width: 50rem;
            width: 100%;
            background: transparent;
            box-shadow: 0 0 15px (#00215d);
            border-radius: 3px;
            padding: 0 .5rem 1rem .5rem;
            z-index: 5;
            opacity: 0;
            pointer-events: none;
            overflow: hidden;
        }
        /*------javascript functions*/
        .preview-box.show {
            opacity: 1;
            pointer-events: auto;
            transform: translate(-50%, -50%) scale(1);
        }
        .preview-box .details {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 1.5rem 1rem 1rem;
        }
        .preview-box .details .title {
            display: flex;
            font-weight: 400;
            font-size: 1.4rem;
            color: #fff;
            letter-spacing: .5px;
        }
        .details .title p {
            margin-left: 1rem;
            color: #fff;
            font-weight: 500;
            font-size: 1.4rem;
            letter-spacing: .5px;
        }
        .details .icon {
            font-size: 1.8rem;
            cursor: pointer;
            color: #fff;
        }
        .preview-box .image-box {
            display: flex;
            width: 90%;
        }
        .image-box img {
            width: 100%;
            height: 100%;
            border-radius: 0 0 3px 3px;
        }
        /*shadow----------------------------------*/
        .shadow {
            position: fixed;
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            z-index: 2;
            display: none;
            background: rgba(0, 0, 0, 0.85);
        }
        .shadow.show {
            display: block;
        }
    }
    @media only screen and (min-width:1024px) {
        .floors {
            width: 90%;
            background: transparent;
            margin: 0 auto;
            padding: 0;
        }
        h2.arch {
            padding: 8rem 0 2rem 0;
            font-size: 3.5rem;
            color: #00215d;
            text-align: left;
        }
        h1.fl {
            font-size: 1.8rem;
        }
        h1.fl i {
            font-size: 2.2rem;
        }
        h3.fl {
            text-align: left;
            font-size: 2rem;
            padding: 1rem 0 .5rem 0;
        }
        p.fl {
            text-align: left;
            margin-left: 0;
            text-indent: 1rem;
            padding: 1rem 0;
            font-size: 1.5rem;
            width: 100%;
        }
        /*-------------------------------*/
        .additional {
            width: 80%;
            background: #161616;
            padding: 1rem;
            border-top-right-radius: 200px;
            border-top-left-radius: 200px;
            margin: 0 auto;
        }
        h2.add {
            color: #fff!important;
            font-size: 2.2rem;
            padding: 2rem 0 2rem 0;
            text-align: center;
        }
        h4.add {
            padding: 0 1rem 2rem 0;
            color: #fa6200!important;
            font-size: 1.8rem;
            text-align: center;
        }
        p.add {
            text-align: center;
            margin-left: .5rem;
            color: #fff!important;
            font-size: 1.65rem;
            font-weight: 400;
            letter-spacing: .5px;
        }
        p.add i {
            margin-right: 1rem;
            font-size: 1.9rem;
        }
        h2.flq {
            font-size: 1.8rem;
            padding: 4rem 0 3rem 0;
            color: rgba(22, 22, 22, 0.4);
            text-align: center;
        }
        h2.flq i {
            color: rgba(2, 33, 93, 0.6);
            font-size: 2rem;
        }
        /*-------------gallery-----------------*/
        .gallery {
            width: 90%;
            background: transparent;
            height: 100%;
            padding: 0;
            margin: 0 auto;
        }
        h2.gal {
            padding: 3rem 0 2rem 0;
            font-size: 3.5rem;
            color: #00215d;
            text-align: left;
            margin-left: 0rem;
        }
        .wrapper {
            margin: 3rem auto;
            max-width: 130rem;
            text-align: center;
        }
        .wrapper nav {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        nav .items {
            display: flex;
            /*    max-width:7rem;*/
            width: 100%;
            justify-content: space-between;
        }
        nav .items .item {
            padding: 1rem 1.5rem;
            font-size: 1.5rem;
            margin: .5rem;
        }
        nav .items .active,
        nav .items .item:hover {
            color: #fff;
            background: #00215d;
            border: 2.05px solid #fa6200;
            font-size: 1.48rem;
        }
        /*gallery images*/
        .photos {
            display: flex;
            flex-wrap: wrap;
            margin-top: 3rem;
        }
        .photos .image {
            width: calc(100% / 2);
            padding: 1rem;
            cursor: pointer;
        }
        /*javascrip display or hide selected images*/
        .photos .image.hide {
            display: none;
        }
        .photos .image.show {
            display: block;
            animation: image 0.5s ease;
        }
        @keyframes image {
            0% {
                transform: scale(0.5);
            }
            100% {
                transform: scale(1);
            }
        }
        .photos .image span {
            display: flex;
            width: 100%;
            overflow: hidden;
        }
        .photos .image img {
            width: 100%;
            height: 100%;
            vertical-align: middle;
            transition: 0.3s ease-out;
        }
        .photos .image:hover img {
            transform: scale(1.1);
        }
        /*--------------------image preview box*/
        .preview-box {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.9);
            max-width: 70rem;
            width: 100%;
            background: transparent;
            box-shadow: 0 0 15px (#00215d);
            border-radius: 3px;
            padding: 0 .5rem 1rem .5rem;
            z-index: 5;
            opacity: 0;
            pointer-events: none;
            overflow: hidden;
        }
        /*------javascript functions*/
        .preview-box.show {
            opacity: 1;
            pointer-events: auto;
            transform: translate(-50%, -50%) scale(1);
        }
        .preview-box .details {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 1.5rem 1rem 1rem;
        }
        .preview-box .details .title {
            display: flex;
            font-weight: 400;
            font-size: 1.4rem;
            color: #fff;
            letter-spacing: .5px;
        }
        .details .title p {
            margin-left: 1rem;
            color: #fff;
            font-weight: 500;
            font-size: 1.4rem;
            letter-spacing: .5px;
        }
        .details .icon {
            font-size: 1.8rem;
            cursor: pointer;
            color: #fff;
        }
        .preview-box .image-box {
            display: flex;
            width: 90%;
            cursor: pointer;
        }
        .image-box img {
            width: 100%;
            height: 100%;
            border-radius: 0 0 3px 3px;
        }
        /*shadow----------------------------------*/
        .shadow {
            position: fixed;
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            z-index: 2;
            display: none;
            background: rgba(0, 0, 0, 0.85);
        }
        .shadow.show {
            display: block;
        }
    }
    /*-------------------------og*/
    
    .og {
        display: none;
    }
    /*footer area*/
    
    footer {
        height: 100%;
        width: 100%;
        background: #fa6200;
        margin: 0 auto;
    }
    p.foot {
        line-height: 5rem;
        color: #00215d;
        text-align: center;
        font-weight: 600;
    }
    @media only screen and (min-width:768px) {
        footer {
            height: 8rem;
            width: 100%;
            background: #fa6200;
            margin: 0 auto;
        }
        p.foot {
            line-height: 8rem;
            color: #00215d;
            text-align: center;
            font-weight: 600;
            font-size: 1.5rem;
        }
    }
    .itemscope .itemtype {
        display: none;
    }
