@import url("https://fonts.googleapis.com/css?family=Open+Sans|Titillium+Web:600,700");
html {
    overflow-x: hidden;
}

body {
    margin-top: 0;
    background:#fff;
    font-size: 14px;
    font-weight: 400;
    font-family: 'Open Sans', sans-serif;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-font-smoothing: subpixel-antialiased;
    color: #abacae;
    line-height: 25px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
    font-size: 38px;
    color: #222222;
    font-weight: 700;
    font-family: 'Titillium Web', sans-serif;
}

a {
    cursor: pointer;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

a:hover {
    text-decoration: none;
}

a a:focus {
    outline: none;
}

p {
    font-weight: 400;
    font-family: 'Open Sans', sans-serif;
    margin: 0px;
    font-size: 14px;
}

ul,
ol {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

ul li,
ol li {
    list-style: none;
}

a:not([href]):not([tabindex]) {
    color: #fff;
}

.section-header {
    margin-bottom: 30px;
}

.section-header p {
    text-align: center;
    font-weight: 400;
    line-height: 26px;
}

.section-title {
    font-size: 30px;
    color: #222222;
    display: inline-block;
    font-weight: 700;
    text-transform: uppercase;
    position: relative;
}

.sign-in,
.sign-up,
.sign-out {
    background: transparent;
    border: 1px solid #9090e6;
    width: 8%;
    padding: 6px 10px;
    margin-right: 15px;
    font-size: 13px;
    font-family: 'Open Sans';
    border-radius: 5px;
    font-weight: bold;
    color: blue;
    cursor: pointer;
}

.padding-none {
    padding: 0px;
}

.bg-gray {
    background: #f9f9f9;
}

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: rgba(15, 17, 27, 0.8);
}

.btn {
    font-size: 14px;
    padding: 10px 30px;
    cursor: pointer;
    font-weight: 400;
    color: #fff;
    border-radius: 30px;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    display: inline-block;
}

.btn:focus,
.btn:active {
    box-shadow: none;
    outline: none;
    color: #fff;
}

.btn-common {
    background-color: #3d60f4;
    position: relative;
    z-index: 1;
    text-transform: uppercase;
}

.btn-common:hover {
    color: #fff;
    background-color: #222;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.1);
    transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
}

.btn-border {
    color: #3d60f4;
    background-color: transparent;
    border: 1px solid #3d60f4;
    border-radius: 30px;
    text-transform: uppercase;
}

.btn-border:hover {
    color: #fff;
    border-color: #3d60f4;
    background-color: #3d60f4;
}

.btn-border:focus {
    color: #fff;
    border-color: #3d60f4;
    background-color: #3d60f4;
}

.btn-lg {
    padding: 14px 33px;
    text-transform: uppercase;
    font-size: 16px;
}

.btn-rm {
    padding: 7px 18px;
    text-transform: capitalize;
}

button:focus {
    outline: none !important;
}

.icon-close,
.icon-check {
    color: #3d60f4;
}

.social-icon a {
    color: #666;
    background: #fff;
    width: 32px;
    height: 32px;
    line-height: 34px;
    display: inline-block;
    text-align: center;
    border-radius: 100%;
    font-size: 16px;
    margin: 15px 6px 12px 4px;
    transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
}

.social-icon a:hover {
    color: #fff !important;
}

.social-icon .facebook:hover {
    background: #3b5999;
}

.social-icon .twitter:hover {
    background: #4A9CEC;
}

.social-icon .instagram:hover {
    background: #D6274D;
}

.social-icon .linkedin:hover {
    background: #1260A2;
}

.social-icon .google:hover {
    background: #CE332A;
}


/* ScrollToTop */

a.back-to-top {
    display: none;
    position: fixed;
    bottom: 18px;
    right: 15px;
    text-decoration: none;
}

a.back-to-top i {
    display: block;
    font-size: 22px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    background: #3d60f4;
    border-radius: 30px;
    text-align: center;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
}

a.back-to-top:hover,
a.back-to-top:focus {
    text-decoration: none;
}


/* Preloader */

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 9999999;
}

.loader {
    top: 50%;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    position: relative;
    margin: 0 auto;
}

#loader-1:before,
#loader-1:after {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    border: 7px solid transparent;
    border-top-color: #3d60f4;
}

#loader-1:before {
    z-index: 100;
    animation: spin 1s infinite;
}

#loader-1:after {
    border: 7px solid #f2f2f2;
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.section-padding {
    padding: 60px 0;
}

hr {
    border-top: 1px dotted #ddd;
}

.feature-bg {
    background: #3d60f4;
}

.text-wrapper {
    height: 100%;
    display: table;
    padding-left: 140px;
}

.text-wrapper>div {
    vertical-align: middle;
    display: table-cell;
}

.feature-thumb {
    padding: 40px 0;
}

.feature-item {
    padding: 30px;
}

.feature-item .icon {
    float: left;
    border: 1px solid #fff;
    width: 80px;
    height: 80px;
    text-align: center;
    border-radius: 50%;
    transition: all .6s ease;
    -moz-transition: all .6s ease;
    -webkit-transition: all .6s ease;
}

.feature-item .icon i {
    font-size: 36px;
    color: #fff;
    line-height: 80px;
}

.feature-content {
    color: #fff;
    margin-left: 100px;
}

.feature-content h3 {
    color: #fff;
    text-transform: uppercase;
    font-size: 18px;
}

.feature-item:hover .icon {
    background: #fff;
}

.feature-item:hover .icon i {
    color: #3d60f4;
}


/* Services Item */

.services-item {
    background: #fff;
    margin: 15px 0;
    padding: 30px;
    border-radius: 4px;
    text-align: left;
    box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
}

.services-item .icon i {
    font-size: 42px;
    color: #3d60f4;
}

.services-item .services-content h3 {
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.services-item .services-content h3 a {
    font-size: 18px;
    color: #585b60;
}

.services-item .services-content h3 a:hover {
    color: #3d60f4;
}

.services-item:hover {
    box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.08);
}

#service {
    position: relative;
}


/* Container Outside Shape */

.container-outside {
    position: absolute;
    top: 0;
    right: 0;
    width: 47.1%;
    height: 100%;
    background: #3d60f4;
    overflow: hidden;
}

.heading {
    padding-left: 30px;
}

.d-table {
    display: table;
    width: 100%;
    height: 100%;
}

.dt-cell {
    display: table-cell;
    vertical-align: middle;
}

.skill-area img {
    border-radius: 4px;
}

.skills-section {
    margin-top: 30px;
}

.skills-section .progress-box h5 {
    color: #222222;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
}

.skills-section .progress {
    background: #f9f9f9;
    height: 10px;
    margin-bottom: 30px;
}

.skills-section .progress .progress-bar {
    background: #3d60f4;
}

.navbar-brand {
    position: relative;
    padding: 0px;
}

.navbar-brand img {
    width: 100%;
    height: 50px;
}

.top-nav-collapse {
    background: #fff;
    z-index: 999999;
    top: 0px !important;
    box-shadow: 0px 3px 6px 3px rgba(0, 0, 0, 0.06);
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    background: #fff !important;
}

.top-nav-collapse .navbar-brand {
    top: 0px;
}

.top-nav-collapse .navbar-nav .nav-link {
    color: #585b60 !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

.top-nav-collapse .navbar-nav .nav-link:hover {
    cursor: pointer;
    color: #3d60f4 !important;
}

.top-nav-collapse .navbar-nav li.active a.nav-link {
    color: #3d60f4 !important;
}

.indigo {
    background: transparent;
}

.menu-bg {
    background: transparent;
}

.navbar-expand-md .navbar-nav .nav-link i {
    font-size: 14px;
    margin-left: 5px;
    vertical-align: middle;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.navbar-expand-md .navbar-nav .nav-link {
    font-family: 'Titillium Web', sans-serif;
    color: #585b60;
    font-weight: 600;
    padding: 8px 10px;
    line-height: 40px;
    text-transform: uppercase;
    cursor: pointer;
    background: transparent;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.navbar-expand-md .navbar-nav li a:hover,
.navbar-expand-md .navbar-nav li .active>a,
.navbar-expand-md .navbar-nav li a:focus {
    color: #3d60f4;
    outline: none;
}

.navbar-expand-md .navbar-nav .active>.nav-link,
.navbar-expand-md .navbar-nav .nav-link.active,
.navbar-expand-md .navbar-nav .nav-link.open,
.navbar-expand-md .navbar-nav .open>.nav-link {
    color: #3d60f4 !important;
}

.navbar-expand-md .navbar-nav .nav-link:focus,
.navbar-expand-md .navbar-nav .nav-link:hover {
    color: #3d60f4 !important;
}

.navbar {
    padding: 0;
}

.navbar li.active a.nav-link {
    color: #3d60f4;
}

.menu-white .navbar-nav .nav-link {
    color: #fff;
}

.dropdown-toggle::after {
    display: none;
}

.dropdown-menu {
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    z-index: 99;
    min-width: 210px;
    background-color: #fff;
    white-space: nowrap;
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    animation: fadeIn 0.4s;
    -webkit-animation: fadeIn 0.4s;
    -moz-animation: fadeIn 0.4s;
    -o-animation: fadeIn 0.4s;
    -ms-animation: fadeIn 0.4s;
}

.dropdown-menu:before {
    content: "";
    display: inline-block;
    position: absolute;
    bottom: 100%;
    left: 20%;
    margin-left: -5px;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-bottom: 10px solid #fff;
}

.dropdown:hover .dropdown-menu {
    display: block;
    position: absolute;
    text-align: left;
    top: 100%;
    border: none;
    animation: fadeIn 0.4s;
    -webkit-animation: fadeIn 0.4s;
    -moz-animation: fadeIn 0.4s;
    -o-animation: fadeIn 0.4s;
    -ms-animation: fadeIn 0.4s;
}

.dropdown .dropdown-menu .dropdown-item {
    width: 100%;
    padding: 10px 20px;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #f1f1f1;
    text-decoration: none;
    display: inline-block;
    float: left;
    clear: both;
    position: relative;
    outline: 0;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}

.dropdown .dropdown-menu .dropdown-item:last-child {
    border-bottom: none;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.dropdown .dropdown-menu .dropdown-item:first-child {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.dropdown .dropdown-item:focus,
.dropdown .dropdown-item:hover,
.dropdown .dropdown-item.active {
    color: #3d60f4;
    background: #f7f7f7;
}

.dropdown-item.active,
.dropdown-item:active {
    background: transparent;
}

.fadeInUpMenu {
    -webkit-animation-name: fadeInUpMenu;
    animation-name: fadeInUpMenu;
}


/* Typography =======================*/


/* Headings */


/* Main heading for card's front cover */

.card-front {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}


/* .card-front:hover {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
} */

.card-front__heading {
    font-size: 1.5rem;
    margin-top: .25rem;
}


/* Main heading for inside page */

.inside-page__heading {
    padding-bottom: 1rem;
    width: 100%;
}


/* Mixed */


/* For both inside page's main heading and 'view me' text on card front cover */

.inside-page__heading,
.card-front__text-view {
    font-size: 1.3rem;
    font-weight: 700;
    margin-top: 0.5rem;
}

.inside-page__heading--city {
    color: #163300;
}

.card-front__text-view--city,
.card-front__text-view--ski,
.card-front__text-view--beach,
.card-front__text-view--camping,
.card-front__text-view--passport,
.card-front__text-view--people,
.card-front__text-view--time,
.card-front__text-view--parking,
.card-front__text-view--Vehicle,
.card-front__text-view--vistors,
.card-front__text-view--armory,
.card-front__text-view--plate,
.card-front__text-view--tenant {
    color: #fff
}

.inside-page__heading--ski {
    color: #2B388F;
}

.inside-page__heading--passport {
    color: #9D1866;
}

.inside-page__heading--beach {
    color: #9156A1;
}
.inside-page__heading--doc {
    color:  #00caf7;;
}

.inside-page__heading--plate {
    color: #8A4935;
}

.inside-page__heading--armory {
    color: #2B5335;
}

.inside-page__heading--camping {
    color: #0C72BA;
}

.inside-page__heading--people {
    color: #64B5B8;
}

.inside-page__heading--time {
    color: #EAB01C;
}

.inside-page__heading--parking {
    color: #8E44AC;
}

.inside-page__heading--Vehicle {
    color: #0CAEBF;
}

.inside-page__heading--vistors {
    color: #38B349;
}

.inside-page__heading--tenant {
    color: #266AD1;
}


/* Front cover */

.card-front__tp {
    color: #fafbfa;
}


/* For pricing text on card front cover */

.card-front__text-price {
    font-size: 1.2rem;
    margin-top: -.2rem;
}


/* Back cover */


/* For inside page's body text */

.inside-page__text {
    color: #333;
    font-size: 10px;
}


/* Icons ===========================================*/

.card-front__icon {
    fill: #fafbfa;
    font-size: 3vw;
    height: 3.25rem;
    margin-top: -.5rem;
    width: 3.25rem;
}


/* Buttons =================================================*/

.group-btns {
    margin-top: 5px;
}

.inside-page__btn {
    background-color: transparent;
    border: 3px solid;
    border-radius: .5rem;
    font-size: 10px;
    font-weight: 600;
    margin-top: 2rem;
    overflow: hidden;
    padding: .5rem .75rem;
    position: relative;
    text-decoration: none;
    transition: all .3s ease;
    /* width: 40%; */
    z-index: 10;
    margin-right: 6px;
}

.inside-page__btn::before {
    content: "";
    height: 100%;
    left: 0;
    /* position: absolute; */
    top: 0;
    transform: scaleY(0);
    transition: all .3s ease;
    width: 100%;
    z-index: -1;
}

.inside-page__btn--city {
    border-color: #163300;
    color: #163300;
}

.inside-page__btn--city:hover {
    background-color: #9FE870;
	color:#000;
}

.inside-page__btn--tenant {
    border-color: #266AD1;
    color: #266AD1;
}

.inside-page__btn--tenant:hover {
    background-color: #266AD1;
}

.inside-page__btn--armory {
    border-color: #2B5335;
    color: #2B5335;
}

.inside-page__btn--armory:hover {
    background-color: #2B5335;
}

.inside-page__btn--plate {
    border-color: #8A4935;
    color: #8A4935;
}

.inside-page__btn--plate:hover {
    background-color: #8A4935;
}

.inside-page__btn--ski {
    border-color: #2B388F;
    color: #2B388F;
}

.inside-page__btn--ski:hover {
    background-color: #2B388F;
}

.inside-page__btn--beach {
    border-color: #9156A1;
    color: #9156A1;
}

.inside-page__btn--beach:hover {
    background-color: #9156A1;
}
.inside-page__btn--sale {
    border-color: #20c6b6;
    color: #20c6b6;
}

.inside-page__btn--sale:hover {
    background-color: #20c6b6;
	color: #FFFFFF !important;
}
.inside-page__btn--stream {
    border-color: #D311A5;
    color: #D311A5;
}

.inside-page__btn--stream:hover {
    background-color: #D311A5;
	color: #FFFFFF !important;
}
.inside-page__btn--files {
    border-color: #E54710;
    color: #E54710;
}

.inside-page__btn--files:hover {
    background-color: #E54710;
	color: #FFFFFF !important;
}
.inside-page__btn--lms {
    border-color: #09D85D;
    color: #09D85D;
}

.inside-page__btn--lms:hover {
    background-color: #09D85D;
	color: #FFFFFF !important;
}
.inside-page__btn--asset {
    border-color: #444444;
    color: #444444;
}

.inside-page__btn--asset:hover {
    background-color: #444444;
	color: #FFFFFF !important;
}
.inside-page__btn--hospital {
    border-color: #13D9E8;
    color: #13D9E8;
}

.inside-page__btn--hospital:hover {
    background-color: #13D9E8;
	color: #FFFFFF !important;
}
.inside-page__btn--fitness {
    border-color: #CCAC0E;
    color: #CCAC0E;
}

.inside-page__btn--fitness:hover {
    background-color: #CCAC0E;
	color: #FFFFFF !important;
}
.inside-page__btn--quality {
    border-color: #481BED;
    color: #481BED;
}

.inside-page__btn--quality:hover {
    background-color: #481BED;
	color: #FFFFFF !important;
}
.inside-page__btn--doc:hover {
    background-color: #00caf7 !important;
    color: black;
}
.inside-page__btn--hotel:hover {
    background-color: #bfdb49 !important;
    color: black;
}

.inside-page__btn--document:hover {
    background-color: #f9931f !important;
    color: black;
}
.inside-page__btn--travel:hover {
    background-color: #dd47d6 !important;
    color: black;
}
.inside-page__btn--queue:hover {
    background-color: #996511 !important;
    color: black;
}
.inside-page__btn--hr:hover {
    background-color: #d14f1c !important;
    color: black;
}
.inside-page__btn--school:hover {
    background-color: #0f1d7b !important;
    color: black;
}
.inside-page__btn--lab:hover {
    background-color: #0fb5c3 !important;
    color: black;
}
.inside-page__btn--visit:hover {
    background-color: #24ba64 !important;
    color: black;
}
.inside-page__btn--camping {
    border-color: #0C72BA;
    color: #0C72BA;
}

.inside-page__btn--camping:hover {
    background-color: #0C72BA;
}

.inside-page__btn--people {
    border-color: #64B5B8;
    color: #64B5B8;
}

.inside-page__btn--people:hover {
    background-color: #64B5B8;
}

.inside-page__btn--time {
    border-color: #EAB01C;
    color: #EAB01C;
}

.inside-page__btn--time:hover {
    background-color: #EAB01C;
}

.inside-page__btn--parking {
    border-color: #8E44AC;
    color: #8E44AC;
}

.inside-page__btn--parking:hover {
    background-color: #8E44AC;
}

.inside-page__btn--Vehicle {
    border-color: #0CAEBF;
    color: #0CAEBF;
}

.inside-page__btn--Vehicle:hover {
    background-color: #0CAEBF;
}

.inside-page__btn--vistors {
    border-color: #38B349;
    color: #38B349;
}

.inside-page__btn--vistors:hover {
    background-color: #38B349;
}

.inside-page__btn--passport {
    border-color: #9D1866;
    color: #9D1866;
}

.inside-page__btn--passport:hover {
    background-color: #9D1866;
}
/*
.inside-page__btn:hover {
    color: #fafbfa !important;
}*/

.inside-page__btn:hover:hover {
    transform: scaleY(1);
}


/* Layout Structure=========================================*/

.main {
    /* background: linear-gradient( to bottom right, #eee8dd, #e3d9c6); */
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    width: 100%;
}


/* Container to hold all cards in one place */

.card-area {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    /* height: 100%; */
    justify-content: space-evenly;
    padding: 1rem;
    padding: 10% 4%;
}


/* Card ============================================*/


/* Area to hold an individual card */

.card-section {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%;
    margin-bottom: 30px;
}


/* A container to hold the flip card and the inside page */

.card {
    background-color: rgba(0, 0, 0, .05);
    box-shadow: -.1rem 1.7rem 6.6rem -3.2rem rgba(0, 0, 0, 0.5);
    height: 15rem;
    position: relative;
    transition: all 1s ease;
    width: 15rem;
}


/* Flip card - covering both the front and inside front page */


/* An outer container to hold the flip card. This excludes the inside page */

.flip-card {
    height: 15rem;
    perspective: 100rem;
    position: absolute;
    right: 0;
    transition: all 1s ease;
    visibility: hidden;
    width: 15rem;
    z-index: 100;
}


/* The outer container's visibility is set to hidden. This is to make everything within the container NOT set to hidden  */


/* This is done so content in the inside page can be selected */

.flip-card>* {
    visibility: visible;
}


/* An inner container to hold the flip card. This excludes the inside page */

.flip-card__container {
    height: 100%;
    position: absolute;
    right: 0;
    transform-origin: left;
    transform-style: preserve-3d;
    transition: all 1s ease;
    width: 100%;
}

.card-front,
.card-back {
    backface-visibility: hidden;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}


/* Styling for the front side of the flip card */


/* container for the front side */

.card-front {
    background-color: #fafbfa;
    height: 15rem;
    width: 15rem;
}


/* Front side's top section */

.card-front__tp {
    align-items: center;
    clip-path: polygon(0 0, 100% 0, 100% 90%, 57% 90%, 50% 100%, 43% 90%, 0 90%);
    display: flex;
    flex-direction: column;
    height: 12rem;
    justify-content: center;
    padding: .75rem;
}

.card-front__tp--city {
    /* background: linear-gradient( to bottom, #D84646, #D84646);
    opacity: 0.5; */
    background: #fff;
}

.card-front__tp--ski {
    /* background: linear-gradient( to bottom, #2B388F, #2B388F);
    opacity: 0.5; */
    background: #fff;
}

.card-front__tp--beach {
    /* background: linear-gradient( to bottom, #9156A1, #9156A1);
    opacity: 0.5; */
    background: #fff;
}

.card-front__tp--camping {
    /* background: linear-gradient( to bottom, #1FBEF3, #1FBEF3);
    opacity: 0.5; */
    background: #fff;
}

.card-front__tp--passport {
    /* background: linear-gradient( to bottom, #9D1866, #9D1866);
    opacity: 0.5; */
    background: #fff;
}

.card-front__tp--armory {
    /* background: linear-gradient( to bottom, #9df4b3, #9df4b3);
    opacity: 0.5; */
    background: #fff;
}

.card-front__tp--people {
    /* background: linear-gradient( to bottom, #64B5B8, #64B5B8);
    opacity: 0.5; */
    background: #fff;
}

.card-front__tp--time {
    /* background: linear-gradient( to bottom, #EAB01C, #EAB01C);
    opacity: 0.5; */
    background: #fff;
}

.card-front__tp--parking {
    /* background: linear-gradient( to bottom, #8E44AC, #8E44AC);
    opacity: 0.5; */
    background: #fff;
}

.card-front__tp--Vehicle {
    /* background: linear-gradient( to bottom, #0CAEBF, #0CAEBF);
    opacity: 0.5; */
    background: #fff;
}

.card-front__tp--vistors {
    /* background: linear-gradient( to bottom, #51DFBE, #51DFBE);
    opacity: 0.5; */
    background: #fff;
}

.card-front__tp--plate {
    /* background: linear-gradient( to bottom, #dcb9ae, #dcb9ae);
    opacity: 0.5; */
    background: #fff;
}

.card-front__tp--tenant {
    /* background: linear-gradient( to bottom, #dcb9ae, #dcb9ae);
    opacity: 0.5; */
    background: #fff;
}


/* Front card's bottom section */

.card-front__bt-1,
.card-front__bt-2,
.card-front__bt-3,
.card-front__bt-4,
.card-front__bt-5,
.card-front__bt-6,
.card-front__bt-7,
.card-front__bt-8,
.card-front__bt-9,
.card-front__bt-10,
.card-front__bt-11,
.card-front__bt-12,
.card-front__bt-13,
.card-front__bt-14,
.card-front__bt-15,
.card-front__bt-16,
.card-front__bt-17{
    align-items: center;
    display: flex;
    justify-content: center;
}

.card-front__bt-1 {
    background-color: #D84646;
}

.card-front__bt-2 {
    background-color: #2B388F;
}

.card-front__bt-3 {
    background-color: #9156A1;
}

.card-front__bt-4 {
    background-color: #4c69a4;
}

.card-front__bt-5 {
    background-color: #9D1866;
}

.card-front__bt-6 {
    background-color: #64B5B8;
}

.card-front__bt-7 {
    background-color: #EAB01C;
}

.card-front__bt-8 {
    background-color: #8E44AC;
}

.card-front__bt-9 {
    background-color: #0CAEBF;
}

.card-front__bt-10 {
    background-color: #36bc56;
}

.card-front__bt-11 {
    background-color: #2c4b34;
}

.card-front__bt-12 {
    background-color: #805041;
}

.card-front__bt-15 {
    background-color: #266AD1;
}

.card-front__bt-16 {
    background-color: #163300;
}

.card-front__bt-17 {
    background-color: #9FE870;
}

/* Styling for the back side of the flip card */

.card-back {
    background-color: #fafbfa;
    transform: rotateY(180deg);
}


/* Specifically targeting the <video> element */

img.video__container {
    /* clip-path: polygon(0% 0%, 100% 0%, 90% 50%, 100% 100%, 0% 100%); */
    height: auto;
    min-height: 100%;
    object-fit: contain;
    width: 90%;
    /* display: block !important;
    margin-left: auto !important;
    margin-right: auto !important; */
}


/* Inside page */

.inside-page {
    background-color: #fafbfa;
    box-shadow: inset 20rem 0px 5rem -2.5rem rgba(0, 0, 0, 0.25);
    height: 100%;
    padding: 1rem;
    position: absolute;
    right: 0;
    transition: all 1s ease;
    width: 15rem;
    z-index: 1;
}

.inside-page__container {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    text-align: center;
    width: 100%;
}


/* Functionality ====================================*/


/* This is to keep the card centered (within its container) when opened */

.card:hover {
    box-shadow: -.1rem 1.7rem 6.6rem -3.2rem rgba(0, 0, 0, 0.75);
    width: 30rem;
}


/* When the card is hovered, the flip card container will rotate */

.card:hover .flip-card__container {
    transform: rotateY(-180deg);
}


/* When the card is hovered, the shadow on the inside page will shrink to the left */

.card:hover .inside-page {
    box-shadow: inset 1rem 0px 5rem -2.5rem rgba(0, 0, 0, 0.1);
}

.copyright {
    background: #34363a;
    padding: 15px;
    width: 100% !important;
}

.copyright .footer-logo img {
    width: 80%;
}

.copyright p {
    line-height: 60px;
    color: #fff;
    text-align: center;
    margin: 0;
}

.copyright p a {
    color: #fff;
}

.copyright p a:hover {
    color: #3d60f4;
}
.inside-page__heading{
          font-family: cursive !important;
}
.qudra-title{
    /* text-align: center; */
    font-family: 'Asap', sans-serif;
    font-size: 45px;
    margin-bottom: -70px;
    padding: 10px 0;
    color: #9FE870;
    background: #163300;
    /* box-shadow: 0 10px 20px rgb(0 0 0 / 19%), 0 6px 6px rgb(0 0 0 / 23%); */
    box-shadow: 0 14px 28px rgb(0 0 0 / 25%), 0 10px 10px rgb(0 0 0 / 22%);
    width: 100%;
    position: fixed;
    z-index: 999999999;
}
    

.qudra-titlia{
    text-align: left;
    margin-left: 12%;
    margin-top: 1%;
}
.Qudra-logo{
    width: 100px;
    margin-left: 7%;
    margin-bottom: 2%;
}