/*
*  [Master Stylesheet]
*  Project: HTML Template
*  Date: 10/11/22
*  Author: Devbug
**/

@import "section.css";
@import "forms.css";
@import "carousel.css";
@import "card.css";
@import "cover.css";
@import "gallery.css";
@import "buttons.css";
@import "animation.css";
@import url(../../vendors/owl.carousel/dist/assets/owl.carousel.min.css);
@import url(../../vendors/owl.carousel/dist/assets/owl.theme.default.min.css);

html {
    box-sizing: border-box;
    scroll-behavior: smooth;}

*, *::after, *::before {
    box-sizing: inherit;}

body {
    margin: 0;
    padding: 0;
    font-family: 'Be Vietnam Pro', sans-serif;
    overflow-x: hidden;}

:root {
    --white: hsl(0, 0%, 100%);
    --almostwhite: hsl(0, 10%, 94%);
    --black: hsl(0, 0%, 0%);
    --almostblack: hsl(0, 0%, 9%);
    --gray: hsl(210, 11%, 15%);
    --lgray: hsl(0, 0%, 50%);
    --dviolet: hsl(275, 89%, 7%);
    --violet: hsl(282, 100%, 50%);
    --violet2: hsl(265, 82%, 55%);
    --almostblue: hsl(237, 68%, 73%);
    --aquablue: hsl(211, 85%, 41%);
    --dirtywhite: hsl(0, 25%, 96.9%);
    --blue: hsl(223, 73%, 30%);
    --aquagreen: hsl(204, 57%, 53%);
    --aquamarine: hsl(191, 58%, 58%);
    --lightaquagreen: hsl(206.1, 65.7%, 93.1%);
    --lightaqua:hsl(199, 62%, 82%);}

/*Classes */
.hr-6 {
    background-color: var(--gray);
    width: 50px;}

.hr-5 {
    background-color: var(--gray);
    width: 100px;}

.hr-4 {
    background-color: var(--gray);
    width: 200px;}

.hr-3 {
    background-color: var(--gray);
    width: 300px;}

.hr-2 {
    background-color: var(--gray);
    width: 400px;}

.hr-1 {
    background-color: var(--gray);
    width: 500px;}

.mbt-1 {
    margin-bottom: 40px;}

.bg-blue {
    background-color: var(--blue);}

.bg-aquagreen {
    background-color: var(--aquagreen);}

.bg-lightaquagreen {
    background-color: var(--lightaquagreen);}

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

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

.font-18 {
    font-size: 18px;}

.font-20 {
    font-size: 20px;}

.font-24 {
    font-size: 24px;}

.font-36 {
    font-size: 36px;}

.font-48 {
    font-size: 48px;}

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

.font-64 {
    font-size: 64px;}

.text-aquablue {
    color: var(--aquablue);}

.text-gray {
    color: var(--gray);}

.text-lgray {
    color: var(--lgray);}

.fade {
    opacity: 0;}

.show {
    opacity: 1;}
    
.fadeInBottom {
    animation: fadeInBottom 1s ease-in-out 0.3s forwards;}

.fadeInBottom-2 {
    animation: fadeInBottom 1s ease-in-out 0.4s forwards;}

.fadeInBottom-3 {
    animation: fadeInBottom 1s ease-in-out 0.6s forwards;}

.zoomIn {
    animation: zoomIn-noopacity 0.5s ease-in-out 1.6s forwards;}

    .zoomIn2 {
        animation: zoomIn-noopacity 0.5s ease-in-out 0.6s forwards;}

.zoomIn-2 {
    animation: zoomIn 0.5s ease-in-out 1.6s forwards;}

.overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    background-color: var(--almostblack);
    z-index: 0;
    opacity: 0.6;}

@media (min-width: 47rem) {
    .reveal{
        position: relative;
        transform: translateY(150px);
        opacity: 0;
        transition: 1s all ease;}
        .reveal.active{
            transform: translateY(0);
            opacity: 1;}}
    @media (min-width: 67rem) {
        .reveal{
            position: relative;
            transform: translateY(150px);
            opacity: 0;
            transition: 1s all ease;}
            .reveal.active{
                transform: translateY(0);
                opacity: 1;}}

/* Navigation **/
.navbar {
    background-color: var(--white);
    padding: 2.5rem 3.5rem;
    transition: 0.4s;}
.navbar .navbar-nav {
    background-color: var(--aquablue);}
    .navbar .navbar-brand img {
        width: 120px;}
    .navbar .navbar-nav .nav-item:hover {
        background-color: var(--lightaqua);}
    .navbar .navbar-nav .nav-item.active {
        background-color: var(--lightaqua);}
    .navbar .navbar-nav .nav-item.active .nav-link{
        color: var(--blue);}
        .navbar .navbar-nav .nav-item .nav-link {
            padding-left: 1rem;
            padding-right: 1rem;
            color: var(--white);}
        .navbar .navbar-nav .nav-item .nav-link:hover {
            color: var(--blue);}
        .navbar .navbar-nav .nav-item .dropdown-menu .dropdown-item {
            color: var(--blue);}
    @media (max-width: 46rem) {
        .navbar {
            padding: 1rem !important;}
        .navbar .navbar-nav{
            background-color: var(--white);}
            .navbar .navbar-nav .nav-item.active {
                background-color: var(--white);}
            .navbar .navbar-nav .nav-item.active .nav-link{
                color: var(--blue);}
                .navbar .navbar-nav .nav-item .nav-link {
                    color: var(--blue);}}
/* Footer */
footer {
    overflow-x: hidden;}
    footer .row {
        color: var(--white);
        background-color: var(--aquablue);
        padding-left: 2.675rem;
        padding-right: 2.675rem;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        text-align: center;}
        footer .row .social_icons a:not(:last-child){
            margin-bottom: 10px;}
            footer .row img{
                margin-bottom: 20px;}
            footer .pattern {
                transform: rotate(-180deg);}
.footer1 {
    background-color: var(--aquagreen);
    background-image: linear-gradient(hsla(0, 0%, 13%, 0.7), hsla(240, 1%, 13%, 0.7)), url('../img/footer1-bg.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;}
    .footer1 > .row {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
        margin-left: 1rem;
        margin-right: 1rem;}
        @media (min-width: 47rem) {
            .footer1 > .row {
                padding-left: 2.5rem;
                padding-right: 2.5rem;
                max-width: 1450px;
                margin: 0 auto;}}
            @media (min-width: 67rem) {
                .footer1 > .row {
                    padding-left: 2.5rem;
                    padding-right: 2.5rem;
                    max-width: 1450px;
                    margin: 0 auto;}}
    .footer1 .contact__social {}
    .footer1 .contact__social img{
        width: 50px;}
        .footer1 .contact__social-icons {
            display: flex;
            justify-content: space-between;
            align-items: center;}
    .footer1 .contact__info {
        margin-bottom: 40px;}
    .footer1 .contact__info p {
        font-size: 14px;}
        @media (min-width: 47rem) {
            .footer1 .contact__info p {
                font-size: 16px;}}
            @media (min-width: 67rem) {
                .footer1 .contact__info p {
                    font-size: 16px;}}

/* Partners section style **/
.partners {
    max-width: 1450px;
    margin: 0 auto;
    padding-top: 40px;
    padding-bottom: 40px;}
    .partners h3 {
        font-weight: 900;
        font-size: 60px;}
        .partners p {
            color: #4396cc;
            font-size: 20px;}
    .partners__logo {
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;}
        .partners__logo .item img {
            width: 160px;}

/* Services section style **/
.services {
    color: var(--white);
    background: var(--blue);
    position: relative;
    padding-top: 60px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;}
    @media (min-width: 47rem) {
        .services {
            padding: 3rem;}
            .services .row {
                max-width: 1450px;
                margin: 0 auto;}}
        @media (min-width: 67rem) {
            .services {
                padding: 3rem;}
                .services .row {
                    max-width: 1450px;
                    margin: 0 auto;}}
.services::before {
    content: '';
    background-image: url('../img/pattern.png');
    background-position: -84px -167px;
    background-repeat: no-repeat;
    background-size: cover;
    height: 367px;
    width: 110%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.4;}
    @media (min-width: 47rem) {
        .services::before {
            background-position: -30px -316px;
            height: 215px;
            width: 50%;}}
        @media (min-width: 67rem) {
            .services::before {
                background-position: -30px -316px;
                height: 215px;
                width: 50%;}}
.services h3 {
    font-weight: 900;}
    .services h3 > span {
        color: var(--white);
        font-weight: 500;
        font-size: 60px;}
.services .hk-sec-desc {
    color: var(--white);
    font-size: 20px;}
.services .btn {
    color: var(--white);
    background-color: var(--aquagreen);}
.services p span {
    color: var(--aquagreen);
    font-size: 20px;}
.services img {
    width: 100px;}
.services .card {
    background-color: var(--blue);
    justify-content: center;
    align-items: center;}
    .services .card .card-body p {
        font-weight: 300;
        font-size: 18px;}

/* Reviews section style **/
.reviews {
    position: relative;
    padding-top: 60px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;}
    @media (min-width: 47rem) {
        .reviews {
            padding: 3rem;}
            .reviews .row {
                max-width: 1450px;
                margin: 0 auto;}}
        @media (min-width: 67rem) {
            .reviews {
                padding: 3rem;}
                .reviews .row {
                    max-width: 1450px;
                    margin: 0 auto;}}
    .reviews::before {
        content: '';
        background-image: url('../img/pattern.png');
        background-position: -48px -169px;
        background-repeat: no-repeat;
        background-size: cover;
        height: 367px;
        width: 110%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0.4;}
        @media (min-width: 47rem) {
            .reviews::before {
                background-position: -30px -316px;
                height: 215px;
                width: 50%;}}
            @media (min-width: 67rem) {
                .reviews::before {
                    background-position: -30px -316px;
                    height: 215px;
                    width: 50%;}}
    .reviews h3 {
        font-weight: 900;}
        .reviews h3 > span {
            font-weight: 500;
            font-size: 60px;}
    .reviews .hk-sec-desc {
        font-size: 20px;}
        .dropdown:hover .dropdown-menu{
            display: block;}
        .dropdown-menu{
            margin-top: 0;}
            .dropdown-menu a {
                color: #868686;}

/* About Us section style**/
.aboutus .db-sec-header .row.db-sec-wrapper {
    padding-bottom: 60px;}
.aboutus .db-sec-header .row.db-sec-wrapper::before {
    content: '';
    background-image: url('../img/pattern.png');
    background-position: -84px -167px;
    background-repeat: no-repeat;
    background-size: cover;
    height: 367px;
    width: 110%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.4;}
    @media (min-width: 47rem) {
        .aboutus .db-sec-header .row.db-sec-wrapper::before {
            background-position: -30px -316px;
            height: 215px;
            width: 50%;}}
            @media (min-width: 67rem) {
                .aboutus .db-sec-header .row.db-sec-wrapper::before {
                    background-position: -30px -316px;
                    height: 215px;
                    width: 50%;}}
    .aboutus .db-sec-header{
        color: var(--white);}
    .aboutus h1 {
        color: var(--gray);
        font-size: 48px;
        margin-bottom: 40px;}
        @media (min-width: 47rem) {
            .aboutus h1 {
                font-size: 64px;
                margin-bottom: 60px;}}
            @media (min-width: 67rem) {
                .aboutus h1 {
                    font-size: 64px;
                    margin-bottom: 60px;}}

/* About Us section style**/
.policy .db-sec-header .row.db-sec-wrapper {
    padding-bottom: 60px;}
.policy .db-sec-header .row.db-sec-wrapper::before {
    content: '';
    background-image: url('../img/pattern.png');
    background-position: -84px -167px;
    background-repeat: no-repeat;
    background-size: cover;
    height: 367px;
    width: 110%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.4;}
    @media (min-width: 47rem) {
        .policy .db-sec-header .row.db-sec-wrapper::before {
            background-position: -30px -316px;
            height: 215px;
            width: 50%;}}
            @media (min-width: 67rem) {
                .policy .db-sec-header .row.db-sec-wrapper::before {
                    background-position: -30px -316px;
                    height: 215px;
                    width: 50%;}}
    .policy .db-sec-header{
        color: var(--white);}
    .policy h1 {
        color: var(--gray);
        font-size: 48px;
        margin-bottom: 40px;}
        @media (min-width: 47rem) {
            .policy h1 {
                font-size: 64px;
                margin-bottom: 60px;}}
            @media (min-width: 67rem) {
                .policy h1 {
                    font-size: 64px;
                    margin-bottom: 60px;}}

/* Gallery page section style**/
.gallerypage .db-sec-header .row.db-sec-wrapper {
    padding-bottom: 60px;}
.gallerypage .db-sec-header .row.db-sec-wrapper::before {
    content: '';
    background-image: url('../img/pattern.png');
    background-position: -84px -167px;
    background-repeat: no-repeat;
    background-size: cover;
    height: 367px;
    width: 110%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.4;}
    @media (min-width: 47rem) {
        .gallerypage .db-sec-header .row.db-sec-wrapper::before {
            background-position: -30px -316px;
            height: 215px;
            width: 50%;}}
            @media (min-width: 67rem) {
                .gallerypage .db-sec-header .row.db-sec-wrapper::before {
                    background-position: -30px -316px;
                    height: 215px;
                    width: 50%;}}
    .gallerypage .db-sec-header{
        color: var(--white);}
    .gallerypage h1 {
        color: var(--gray);
        font-size: 48px;
        margin-bottom: 40px;}
        @media (min-width: 47rem) {
            .gallerypage h1 {
                font-size: 64px;
                margin-bottom: 60px;}}
            @media (min-width: 67rem) {
                .gallerypage h1 {
                    font-size: 64px;
                    margin-bottom: 60px;}}

/* Book page section style **/
.book.cover {
    background-image: linear-gradient(hsla(0, 0%, 5%, 0.7), hsla(0, 0%, 7%, 0.7)), url('../img/book-cover-bg.jpg');;}
.book.cover h1 {
    font-size: 72px;}
    .book.cover .cover__wrapper p {
        font-size: 16px;}
        @media (min-width: 47rem) {
            .book.cover .cover__wrapper p {
                font-size: 24px;}}
                @media (min-width: 67rem) {
                    .book.cover .cover__wrapper p {
                        font-size: 24px;}}

/* Charity page section style **/
.charity .db-sec-header .row.db-sec-wrapper::before {
    content: '';
    background-image: url('../img/pattern.png');
    background-position: -84px -167px;
    background-repeat: no-repeat;
    background-size: cover;
    height: 367px;
    width: 110%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.4;}
    @media (min-width: 47rem) {
        .charity .db-sec-header .row.db-sec-wrapper::before{
            background-position: -30px -316px;
            height: 215px;
            width: 50%;}}
            @media (min-width: 67rem) {
                .charity .db-sec-header .row.db-sec-wrapper::before {
                    background-position: -30px -316px;
                    height: 215px;
                    width: 50%;}}
    .charity .db-sec-header {
        color: var(--white);}
        .charity .db-sec-header .row.db-sec-wrapper {
            padding-bottom: 60px;}

/* Login page section style**/
.login {}
.login__image img {
    height: 206px;}
    @media (min-width: 47rem) {
        .login__image img {
            height: 347px;
            margin-left: 150px;
            margin-top: -73px;}}
.login__image p {
    color: var(--lgray);}
.login.navbar {
    padding: 1rem 3.5rem;}
    .login.cover {}
        .login .formtype__register-account {
            margin-bottom: 0;}

/* Partnership page section style**/
.partnership__image img {
    height: 206px;}
    @media (min-width: 47rem) {
        .partnership__image img {
            height: 285px;
            margin-left: 150px;
            margin-top: -73px;}}
.partnership__image p {
    color: var(--lgray);}
.partnership.navbar {
    padding: 1rem 3.5rem;}
    .partnership.cover {}
        .partnership .formtype__register-account {
            margin-bottom: 0;}

/* Fillup form carowner page section style**/
.carowners__form-image img {
    height: 206px;}
    @media (min-width: 47rem) {
        .carowners__form-image img {
            height: 480px;}}
.carowners__form-image p {
    color: var(--lgray);}
.carowners__form.navbar {
    padding: 1rem 3.5rem;}
    .carowners__form.cover {}
        .carowners__form .formtype__register-account {
            margin-bottom: 0;}
.carowners__form select {
    width: 30%;}
    .carowners__form .input-select {
    gap: 10%;}
.carowners__form input[type=date] {
    width: 50%;}
    .carowners__form .input-date {
    gap: 7%;}
.carowners__form input[type=text], .carowners__form input[type=password] {
    width: 70%;
    box-sizing: border-box;
    border-radius: 0;
    border: 0;
    outline: 0;
    border-bottom: 1px solid var(--lgray);}
    .carowners__form .form-group {
        margin-bottom: 0;}
        .carowners__form .form-group label{
            font-size: 14px;}
            .carowners__form .form-group .form-control{
                padding: 0;
                font-size: 14px;}

/* Fillup form customer page section style**/
.customer__form-image img {
    height: 206px;}
    @media (min-width: 47rem) {
        .customer__form-image img {
            height: 480px;}}
.customer__form-image p {
    color: var(--lgray);}
.customer__form.navbar {
    padding: 1rem 3.5rem;}
    .customer__form.cover {}
        .customer__form .formtype__register-account {
            margin-bottom: 0;}
.customer__form select {
    width: 30%;}
    .customer__form .input-select {
    gap: 10%;}
.customer__form input[type=date] {
    width: 50%;}
    .customer__form .input-date {
    gap: 7%;}
.customer__form input[type=text], .customer__form input[type=password] {
    width: 70%;
    box-sizing: border-box;
    border-radius: 0;
    border: 0;
    outline: 0;
    border-bottom: 1px solid var(--lgray);}
    .customer__form .form-group {
        margin-bottom: 0;}
        .customer__form .form-group label{
            font-size: 14px;}
            .customer__form .form-group .form-control{
                padding: 0;
                font-size: 14px;}