html,
body {
    margin: 0;
    height: 100%;
    padding: 0;
    background-color: grey;
    border: none;
    min-width: 360px;
}

.non-scroll {
    overflow: hidden;
}

body > .wrapper {
    display: flex;
    min-height: 100%;
    flex-direction: column;
}

i {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    height: 100%;
    width: 100%;
}

h1 {
    margin: 0;
}
u,
li {
    padding: 0;
}

body > .wrapper > div {
    background-color: white;
    flex: 1 1 auto;
    width: 100%;
}

.feedback-wrapper {
    background-color: #496178;
    width: 100%;
    padding: 25px 0;
}

.feedback-wrapper > h1 {
    font-family: "Montserrat-Bold";
    font-size: 24px;
    color: #fff;
    width: 100%;
    text-align: center;
}

/*
.feedback {
    height: 100%;
    overflow-y: auto;
    display: grid;
    justify-content: center;
    align-items: center;
}
*/
.feedback-wrapper iframe {
    background-color: white;
    transition: 0.5s;
    display: flex;
    margin: 0 auto;
}

/*Preloader Start*/
.areaForLoader {
    background: white;
    overflow: hidden;
    position: fixed;
    left: 0;
    top: 0;
    right:0;
    bottom:0;
    z-index: 9999;
}

.load {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    /*change these sizes to fit into your project*/
    width:100px;
    height:100px;
  }
.load hr {
    border:0;
    margin:0;
    width:40%;
    height:40%;
    position:absolute;
    border-radius:50%;
    animation:spin 2s ease infinite
}
  
.load :first-child {
    background:#19A68C;
    animation-delay:-1.5s}
.load :nth-child(2) {
    background:#ff4e44;
    animation-delay:-1s}
.load :nth-child(3) {
    background:#fd9c46;
    animation-delay:-0.5s}
.load :last-child {
    background:#496178}
  
@keyframes spin{
    0%,100%{transform:translate(0)}
    25%{transform:translate(160%)}
    50%{transform:translate(160%, 160%)}
    75%{transform:translate(0, 160%)}
}
/*Preloader End*/
/*Header Start*//*
header {
}
*/
header {
    z-index: 99;
}

header .contact-section {
    background-color: #fd9c46;
    height: 50px;
    width: 100%;
    margin: 0 auto;
}

.header-wrapper {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1600px;
    height: 100%;
}

.header-wrapper > .contact,
.header-wrapper > .social-media {
    display: flex;
    margin: 0 15px;
    height: 100%;
    list-style: none;
}

.header-wrapper .contact > li,
.header-wrapper .social-media > li {
    align-items: center;
    display: flex;
    height: 100%;
    padding: 0 10px;
    position: relative;
}

header .contact > li:first-child,
header .social-media > li:first-child {
    padding: 0 10px 0 0;
    margin: 0 0 0 10px;
}

header .contact > li:last-child,
header .social-media > li:last-child {
    padding: 0 0 0 10px;
    margin: 0 10px 0 0;
}

header .contact > li::after {
    background-color: #fff;
    bottom: auto;
    content: "";
    height: 14pt;
    position: absolute;
    right: 0;
    width: 2px;
}

header .contact > li:last-child:after {
    width: 0;
}

a,
a:hover {
    text-decoration: none;
}

header a,
header span {
    display: flex;
    color: #fff;
    font-family: "Montserrat-Medium";
    font-size: 14pt;
    align-items: center;
}

header .icon-wrapper {
    height: 25px;
    margin: auto 10px auto 5px;
    width: 25px;
}

header li:first-child .icon-wrapper {
    margin: auto 10px auto 10px;
}
/*Header End*/
/*Nav Start*/
.nav-section {
    background-color: white;
    height: 100px;
    width: 100%;
}

.nav-wrapper {
    display: flex;
    max-width: 1600px;
    margin: 0 auto;
    height: 100px;
    width: 100%;
}

.nav-wrapper > .logo {
    display: flex;
    align-items: center;
    margin: auto 30px;
    justify-content: center;
    height: 50px;
    width: 363px;
}

.logo-wrapper {
    display: flex;
    height: 50px;
    width: 363px;
}

nav {
    display: flex;
    align-items: center;
}

.nav-items {
    display: flex;
    margin: 1% 0 0 0;
    position: relative;
    padding: 0;
}

.nav-items > li {
    align-items: center;
    background-color: #fff;
    display: flex;
    height: 60px;
    position: relative;
    z-index: 0;
}

.nav-items a {
    color: #496178;
    font-size: 15pt;
    font-family: "Montserrat-Bold", sans-serif;
    padding: 0 20px;
}

.nav-items li:hover a {
    color: #fff;
    font-family: "Montserrat-Bold", sans-serif;
}

.nav-items li::before {
    background-color: #fd9c46;
    bottom: 0;
    content: "";
    display: flex;
    height: 0;
    position: absolute;
    transition: 0.3s;
    width: 100%;
    z-index: -1;
}

.nav-items li:hover::before {
    height: 100%;
}
/*Nav End*/
/*Splash-screen Start*/
#splash-screen {
    width: 100%;
}

#splash-screen img {
    display: block;
    margin: 0 auto;
    width: inherit;
}

nav > footer {
    display: none;
}

nav footer > ul {
    margin: 0;
}

/*Splash-screen End*/
/*Confidential Section Start*/
.confidential-wrapper {
    background-color: #fff;
    position: relative;
    width: 100%;
}

.confidential {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}
.confidential h1,
.confidential h2,
.confidential p,
.confidential ul > li,
.confidential a {
    color: #496178;
}

.confidential p,
.confidential ul > li,
.confidential a {
    font-family: "Montserrat-Regular";
}

.confidential h1 {
    font-family: "Montserrat-Bold";
    text-align: center;
    margin: 25px 0;
}

.confidential h2 {
    font-family: "Montserrat-SemiBold";
    margin: 15px 30px;
}

.confidential p {
    margin: 10px 30px;
}

.confidential p:last-child {
    margin: 30px 30px;
}
/*Confidential Section End*/
/*Advantages Section Start*/
#advantages-wrapper {
    background-color: #fff;
    position: relative;
    width: 100%;
}

.advantages {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}

.advantage {
    margin: 25px;
    width: 275px;
}

.advantage h1 {
    margin: 25px 10px;
    font-family: "Montserrat-SemiBold";
    font-size: 20pt;
    text-align: center;
    color: #496178;
}

.advantage .icon-wrapper {
    display: block;
    width: 120px;
    height: 100px;
    margin: 25px auto;
}
/*Advantages Section End*/
/*Services Block Start*/
.services-wrapper {
    background-color: #fd9c46;
    position: relative;
    padding: 25px 0;
    width: 100%;
}

.services-wrapper > h1 {
    font-family: "Montserrat-Bold";
    font-size: 36px;
    color: #fff;
    width: 100%;
    text-align: center;
}

.services {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}

.service .service-wrapper {
    perspective: 1200;
    transform-style: preserve-3d;
  
}

.services .service-wrapper .flipper {
    margin: 25px auto;
    width: 320px;
    height: 340px;
    position: relative;
    transform-style: preserve-3d;
    transition: .7s linear;  
}


.services .service,
.services .description {
    box-sizing: border-box;
    position: absolute;
    height: 100%;
    width: 100%;
    border-radius: 15px;
    backface-visibility: hidden;
}

.services .service {
    background: #fff;
    transform: rotateY(0deg);
}

.services .description {
    background: #fff;
    transform: rotateY(-180deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.services .description ul {
    margin: 0 15px;
    padding: 0;
}

.services .description li {
    color:#496178;
    font-size: 14pt;
    text-align: center;
    font-family: Montserrat-Medium;
    text-indent: 25px;
    list-style: none;
    padding-bottom: 10px;
}

.services .service-wrapper:hover .flipper {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
}


.services h1 {
    margin: -10px 10px;
    font-family: "Montserrat-SemiBold";
    font-size: 20pt;
    text-align: center;
    color: #496178;
}

.services h3 {
    /*margin: 35px 10px 25px 10px;*/
    font-family: "Montserrat-SemiBold";
    font-size: 16pt;
    text-align: center;
    color: #496178;
}

.services .service .icon-wrapper {
    display: block;
    width: 120px;
    height: 120px;
    margin: 25px auto;
}

.services .service .icon-wrapper i {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    height: 100%;
    width: 100%;
}

.services .service .button-wrapper {
    /*display: flex;*/
    display: none;
    justify-content: center;
    align-items: center;
    height: 60px;
    width: 165px;
    margin: 20px auto 25px auto;
}

.services .service button {
    display: block;
    font-family: "Montserrat-Medium";
    border: none;
    outline: none;
    background-color: #fd9c46;
    padding: 10px;
    color: #fff;
    border-radius: 10px;
    font-size: 20px;
    height: 55px;
    width: 150px;
    transition: 0.2s;
    margin: 0 auto;
}

.services .service button:hover,
.services .service button:active,
.services .service button:target,
.services .service button:focus {
    background-color: #ff9436;
    height: 60px;
    width: 160px;
    font-size: 21px;
}
/*Services Block End*/
/*Brands Start*/

/*Brans End*/
.brands-wrapper {
    background: #496178;
    width: 100%;
}

.brands {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    padding: 25px 0;
    width: 100%;
    justify-content: space-evenly;
    max-width: 1600px;
}

.brands h1 {
    font-family: "Montserrat-Bold";
    font-size: 34px;
    color: #fff;
    width: 100%;
    text-align: center;
}

.brand {
    margin: 25px;
}

.brand .icon-wrapper {
    display: block;
    width: 180px;
    height: 100px;
}

/*Album Start*/
.album-wrapper {
    background: #fff;
    width: 100%;
}

.album-wrapper h1 {
    font-family: "Montserrat-Bold";
    color: #496178;
    text-align: center;
    margin: 20px auto;
    font-size: 34px;
}

.album-wrapper h3 {
    font-family: "Montserrat-Medium";
    font-size: 18px;
    color: #496178;
    text-align: center;
    margin: 20px auto;
}

.album-wrapper a {
    font-family: "Montserrat-Medium";
    color: #496178;
}

.album-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.album-items img {
    display: block;
    margin: 15px;
    width: 300px;
    height: 280px;
    border-radius: 15px;
    object-fit: cover;
}

/*Album End*/
/*Footer Start*/
footer {
    background-color: #fd9c46;
    align-items: center;
    display: flex;
    height: auto;
    justify-content: center;
    margin: auto 0 0 0;
    width: 100%;
}
footer > .container {
    padding: 15px 0;
}

footer ul {
    list-style: none;
}

footer .container > li:first-child {
    padding: 15px 0 0 0;
}

footer .container > li {
    padding: 15px 0;
}

footer .container > li:last-child {
    padding: 5px 0 15px 0;

}

footer .container li ul {
    display: flex;
    justify-content: center;
}

footer .container li ul li {
    display: flex;
    justify-content: center;
    padding: 5px 0 0 0;
    margin: 0 20px 0 0;
}

footer .container li ul li:last-child {
    margin: 0;
}

footer .container .contact .icon-container {
    margin: 0 14px 0 0;
}

footer .container .icon-container {
    height: 26px;
    width: 26px;
}

footer .container a {
    color: #fff;
    display: flex;
    font-family: "Montserrat-Medium", sans-serif;
    font-size: 16pt;
}

footer .container .copyright {
    display: flex;
    justify-content: center;
    padding: 15px 0 15px 0;
    position: relative;
}
    
footer .container .copyright ul li {
    margin: 0;
    align-items: center;
    padding: 0 7px;
    position: relative;
}

footer .container .copyright ul li::after {
    background-color: #fff;
    content: "";
    height: 85%;
    position: absolute;
    right: 0;
    width: 1px;
}

footer .container .copyright ul li:last-child:after {
    height: 0;
}


footer .container .copyright span {
    color: #fff;
    font-family: "Montserrat-Light", sans-serif;
    font-size: 11pt;
}

footer .container .copyright a {
    font-family: "Montserrat-SemiBold", sans-serif;
    font-size: 11pt;
}

.icon-container i,
.logo-container i {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    height: 100%;
    width: 100%;
}
/*Footer End*/
/*Metrics Notice Start*/
.metrics-notice-wrapper {
    position: fixed;
    bottom: 10px;
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0);
    transition: 2s;
}

.metrics-notice-wrapper-close {
    bottom: -100%;
}

.metrics-notice {
    position: relative;
    max-width: 1600px;
    border: 1px solid #ff4e44;
    background-color: #fff;
    padding: 10px;
}


.metrics-notice p,
.metrics-notice a {
    font-family: "Montserrat-Regular", sans-serif;
}

.metrics-notice p {
    color: #496178;
}

.metrics-notice a {
    color:#fd9c46;
}

.metrics-notice .metrics-notice-accept-button {
    position: absolute;
    top: 2px;
    right: 2px;
    height: 26px;
    width: 26px;
}
/*Metrics Notice End*/

/*MediaQuary for Splash-screen Start*/
@media (max-width:1769.99px) {
    #splash-screen {
        display: inline-block;
        overflow: hidden;
        width: 100%;
    }
    
    #splash-screen img {
        float: right;
        width: 100%;
        max-width: none;
        min-width: 864px;
    }
/*
    @media (max-height:930px) {
        #splash-screen img {
            height: 64vh;
        }
    }

    @media (max-height:860px) {
        #splash-screen img {
            height: 62vh;
        }
    }

    @media (max-height:780px) and (max-width:1170px) {
        #splash-screen img {
            height: 58vh;
        }
    }*/
    
}
/*Media for Splash-screen End*/


@media (max-width:1365.99px) and (min-width:973px) {
    /*Header Start*/
    header .contact-section {
        height: 35px;
    }

    .header-wrapper > .contact,
    .header-wrapper > .social-media {
        padding: 0;
    }

    header .contact > li::after {
        height: 13pt;
    }

    header a,
    header span {
        font-size: 13pt;
    }

    header .icon-wrapper {
        height: 23px;
        width: 23px;
    }
    /*Header End*/
    /*Nav Start*/
    .nav-section {
        height: 80px;
    }
    
    .nav-wrapper {
        height: 80px;
    }
    
    .nav-wrapper > .logo {
        margin: auto 15px;
        height: 35px;
        width: 265px;
    }
    
    .logo-wrapper {
        display: flex;
        height: 35px;
        width: 265px;
    }
    
    .nav-items > li {
        height: 50px;
    }

    .nav-items a {
        font-size: 13pt;
    }
    /*Nav End*/
    /*Advantages Section Start*/
    .advantages {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    
    .advantage {
        margin: auto;
    }
    /*Advantages Section End*/





}

/*Media for Services Block Start*/
@media (max-width:1279.99px) {
    .services {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }
    
    .services .service-wrapper {
        margin: 25px;
    }
    
}
/*Media for Services Block Start*/


@media (max-width:1023.99px) {
    /*Header Start*/
    .open-nav {
        position: fixed;
        width: 100%;
    }

    header {
        display: flex;
        flex-direction: column;
    }

    header > div {
        flex: 1 1 auto;
    }

    header .contact-section {
        height: 10px;
    }

    .header-wrapper {
        display: none;
    }
    /*Header End*/
    /*Nav Start*/
    .nav-wrapper {
        background:#fff;
        width: 100%;
        min-height: 100%;
    }

    .logo .nav-button-wrapper {
        perspective: 1200;
        transform-style: preserve-3d;
    }
    
    .logo .nav-button-wrapper #nav-button-flipper {
        margin: auto;
        width: 25px;
        height: 25px;
        position: relative;
        transform-style: preserve-3d;
        transition: .7s linear;  
    }
    
    .logo .icon-wrapper-menu,
    .icon-wrapper-close {
        box-sizing: border-box;
        position: absolute;
        height: 100%;
        width: 100%;
        backface-visibility: hidden;
    }
    
    .logo .icon-wrapper-menu {
        background: #fff;
        transform: rotateY(0deg);
    }
    
    .icon-wrapper-close {
        background: #fff;
        transform: rotateY(-180deg);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .logo .flipper-show {
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

    .nav-wrapper {
        flex-direction: column;
    }

    .nav-section,
    .nav-wrapper {
        height: 50px;
    }

    .logo-wrapper,
    .nav-wrapper > .logo {
        margin: auto;
        height: 50px;
        width: 217px;
    }

    .open-nav nav {
        background: #fff;
        position: absolute;
        top: 60px;
        height: calc(100vh - 60px);
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    nav {
        display: none;
    }

    .nav-items {
        margin: auto 0;
        display: block;
        width: 100%;
    }

    .nav-items li {
        justify-content: center;
    }

    .nav-button-wrapper {
        display: flex;
        position: absolute;
        width: 50px;
        height: 50px;
        justify-content: center;
        align-items: center;
        right: 0;
    }

    .icon-wrapper {
        height: 30px;
        width: 30px;
    }

    nav footer {
        display: block;
    }
    /*Nav End*/
    /*Footer Start*/
    footer ul,
    footer > .container {
        padding: 0;
    }    

    footer .container > li {
        padding: 5px 0;
    }

    footer .container > li:last-child {
        padding: 5px 0 15px 0;
    }

    footer .container li ul {
        display: block;
    }

    footer .container li ul li {
        margin: 0;
    }   

    footer .container .icon-container {
        height: 18px;
        width: 18px;
    }

    footer .container a {
        font-size: 12pt;
    }

    footer .container .copyright {
        margin: 5px 0 0 0;
    }

    footer .container .copyright::before {
        background-color: #fff;
        content: "";
        height: 1px;
        position: absolute;
        top: 0;
        width: 25px;
    }

    footer .container .copyright ul li {
        padding: 5px 0 0 0;
        margin: 0 7px 0 0;
    }

    footer .container .copyright ul li::after {
        height: 0;
    }

    footer .container .copyright span,
    footer .container .copyright a {
        font-size: 8pt;
    }
    /*Footer End*/
    /*Metrics Notice Start*/
    .metrics-notice-wrapper {
        bottom: 0;
    }
    
    .metrics-notice-wrapper-close {    
        bottom: -100%;
    } 
    /*Metrics Notice End*/
}

@media (max-width:699.99px) {

    .feedback-wrapper iframe {
        width: 100%;
    }

}