@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&family=Sen:wght@700&display=swap');

body {
    font-family   : 'Raleway', sans-serif;
    // font-family: 'Sen', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Sen', sans-serif;
}

// mandatory includes
nav{
    -webkit-transition: 0.6s ease;
    transition        : 0.6s ease;
}

.main-top{
    -webkit-transition: 0.6s ease;
    transition        : 0.6s ease;
}
.white-bg-header {
    background: #fff;
    box-shadow: 0 3px 6px 3px rgba(0, 0, 0, 0.06);
}
.bg-transparent {
    background-color: transparent !important;
}
// mandatory includes


// Modified Bootstrap
.btn-danger {
    background: #e71111;

    &:hover,
    &:active,
    &:focus,
    &:active:focus {
        background: #e71111 !important;
    }
}

.badge-danger {
    background: #e71111;
}

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

    &-cell {
        vertical-align: middle;
    }
}

.badge-light {
    background : #ededed;
    font-family: 'Sen', sans-serif;
    padding    : 0.1rem 0.4rem;
    border     : 1px solid rgba(0, 0, 0, 0.1);
    box-shadow : 1px 2px 10px -2px rgba(0, 0, 0, 0.28);
}

.card-img,
.card-img-top {
    border-top-left-radius : 0;
    border-top-right-radius: 0;
}

// Modified Bootstrap

// custom stylesheet

.imt-6 {
    margin-top: -6px;
}

// shapes and animations
.shape1 {
    position         : absolute;
    top              : 20%;
    z-index          : -1;
    left             : 30px;
    -webkit-animation: rotate3d 4s linear infinite;
    animation        : rotate3d 4s linear infinite;
    opacity          : .4;
}

.shape2 {
    position: absolute;
    z-index : -1;
    top     : 60%;
    left    : 15%;
}

.shape3 {
    position         : absolute;
    left             : 20%;
    bottom           : 25%;
    z-index          : -1;
    -webkit-animation: animationFramesOne 15s infinite linear;
    animation        : animationFramesOne 15s infinite linear;
}

.shape4 {
    position         : absolute;
    right            : 15%;
    bottom           : 23%;
    z-index          : -1;
    -webkit-animation: animationFramesOne 20s infinite linear;
    animation        : animationFramesOne 20s infinite linear;
}

.shape5 {
    position         : absolute;
    right            : 5%;
    top              : 10%;
    z-index          : -1;
    -webkit-animation: movebounce 5s linear infinite;
    animation        : movebounce 5s linear infinite;
    opacity          : .2;
}

.shape6 {
    position: absolute;
    z-index : -1;
    top     : 40%;
    right   : 10%;
}

.shape7 {
    position         : absolute;
    left             : 25%;
    top              : 15%;
    z-index          : -1;
    -webkit-animation: animationFramesOne 20s infinite linear;
    animation        : animationFramesOne 20s infinite linear;
}

.shape8 {
    position: absolute;
    z-index : -1;
    top     : 15%;
    right   : 10%;
}

@-webkit-keyframes movebounce {
    0% {
        -webkit-transform: translateY(0px);
        transform        : translateY(0px);
    }

    50% {
        -webkit-transform: translateY(20px);
        transform        : translateY(20px);
    }

    100% {
        -webkit-transform: translateY(0px);
        transform        : translateY(0px);
    }
}

@keyframes movebounce {
    0% {
        -webkit-transform: translateY(0px);
        transform        : translateY(0px);
    }

    50% {
        -webkit-transform: translateY(20px);
        transform        : translateY(20px);
    }

    100% {
        -webkit-transform: translateY(0px);
        transform        : translateY(0px);
    }
}

@-webkit-keyframes moveleftbounce {
    0% {
        -webkit-transform: translateX(0px);
        transform        : translateX(0px);
    }

    50% {
        -webkit-transform: translateX(20px);
        transform        : translateX(20px);
    }

    100% {
        -webkit-transform: translateX(0px);
        transform        : translateX(0px);
    }
}

@keyframes moveleftbounce {
    0% {
        -webkit-transform: translateX(0px);
        transform        : translateX(0px);
    }

    50% {
        -webkit-transform: translateX(20px);
        transform        : translateX(20px);
    }

    100% {
        -webkit-transform: translateX(0px);
        transform        : translateX(0px);
    }
}

.rotateme {
    -webkit-animation-name           : rotateme;
    animation-name                   : rotateme;
    -webkit-animation-duration       : 20s;
    animation-duration               : 20s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count        : infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function        : linear;
}

@-webkit-keyframes rotateme {
    from {
        -webkit-transform: rotate(0deg);
        transform        : rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        transform        : rotate(360deg);
    }
}

@keyframes rotateme {
    from {
        -webkit-transform: rotate(0deg);
        transform        : rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        transform        : rotate(360deg);
    }
}

@-webkit-keyframes rotate3d {
    0% {
        -webkit-transform: rotateY(0deg);
        transform        : rotateY(0deg);
    }

    100% {
        -webkit-transform: rotateY(360deg);
        transform        : rotateY(360deg);
    }
}

@keyframes rotate3d {
    0% {
        -webkit-transform: rotateY(0deg);
        transform        : rotateY(0deg);
    }

    100% {
        -webkit-transform: rotateY(360deg);
        transform        : rotateY(360deg);
    }
}

@-webkit-keyframes animationFramesOne {
    0% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
    }

    20% {
        -webkit-transform: translate(73px, -1px) rotate(36deg);
    }

    40% {
        -webkit-transform: translate(141px, 72px) rotate(72deg);
    }

    60% {
        -webkit-transform: translate(83px, 122px) rotate(108deg);
    }

    80% {
        -webkit-transform: translate(-40px, 72px) rotate(144deg);
    }

    100% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
    }
}

@keyframes animationFramesOne {
    0% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
    }

    20% {
        -webkit-transform: translate(73px, -1px) rotate(36deg);
    }

    40% {
        -webkit-transform: translate(141px, 72px) rotate(72deg);
    }

    60% {
        -webkit-transform: translate(83px, 122px) rotate(108deg);
    }

    80% {
        -webkit-transform: translate(-40px, 72px) rotate(144deg);
    }

    100% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
    }
}

/* Top Button register */
/* Button 2 */

.btn-2 {
    box-shadow        : 0 6px #b50d12;
    -webkit-transition: none;
    -moz-transition   : none;
    transition        : none;

    &:hover {
        box-shadow: 0 4px #b50d12;
        margin-top: 3px;
        background: #dc3545;
    }

    &:active,
    &:focus,
    &:active:focus {
        box-shadow: 0 0px #b50d12;
        margin-top: 6px;
        background: #dc3545;
    }

}

.btn-danger:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0px #b50d12;
    margin-top: 6px;
}

section.hero-banner {
    position  : relative;
    height    : 800px;
    z-index   : 1;
    background: transparent url(../img/hero-bg.jpg) right top no-repeat;

    h1 {
        font-family: 'Sen', sans-serif;
        font-size: clamp(2.5rem, 6vw, 4.8rem);
    }

    p {
        font-size: clamp(1.6rem, 5vw, 2rem);
    }

    .topform {
        padding         : 2rem;
        margin-top      : -11px;
        background-color: #fff;
        border-radius   : 5px;
        border          : 1px solid rgba(0, 0, 0, 0.2);
        box-shadow      : 1px 2px 10px -2px rgba(0, 0, 0, 0.15);

        label {
            font-weight: 700;
            font-size  : 0.9rem;
            font-family: 'Sen', sans-serif;
        }

        .form-control {
            background   : #eee;
            border       : 1px solid #eeeeee;
            border-radius: 0;

            &::placeholder {
                font-size: 0.88rem;
            }

            &:focus,
            &:active {
                outline   : none;
                border    : 1px solid #ddd;
                box-shadow: none;
            }
        }
    }
}

section.stats {
    z-index : 1;
    position: relative;

    .topmargin-4 {
        margin-top: -6rem;
    }

    .card {
        border       : 1px dashed rgba(231, 17, 17, 0.26);
        border-radius: 2px;
    }

    .card.property {
        background         : url(../img/stats/properties.png) #fff;
        background-size    : contain;
        background-position: center;
        background-repeat  : no-repeat;
    }

    .card.bed {
        background         : url(../img/stats/dream.png) #fff;
        background-size    : contain;
        background-position: center;
        background-repeat  : no-repeat;
    }

    .card.people {
        background         : url(../img/stats/people.png) #fff;
        background-size    : contain;
        background-position: center;
        background-repeat  : no-repeat;
    }

    .card-title {
        font-family: 'Sen', sans-serif;
        font-size  : 5rem;
    }

    .card-subtitle {
        font-size: 2rem;
    }
}

.bar {
    height       : 5px;
    width        : 90px;
    background   : #f2cbcb;
    margin       : 20px auto;
    position     : relative;
    border-radius: 30px;

    &::before {
        content                          : '';
        position                         : absolute;
        left                             : 0;
        top                              : -2.7px;
        height                           : 10px;
        width                            : 10px;
        border-radius                    : 50%;
        background                       : #e71111;
        -webkit-animation-duration       : 3s;
        animation-duration               : 3s;
        -webkit-animation-timing-function: linear;
        animation-timing-function        : linear;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count        : infinite;
        animation-direction              : alternate;
        -webkit-animation-name           : MOVE-BG;
        animation-name                   : MOVE-BG;
    }
}

@-webkit-keyframes MOVE-BG {
    from {
        -webkit-transform: translateX(0);
        transform        : translateX(0);
    }

    to {
        -webkit-transform: translateX(88px);
        transform        : translateX(88px);
    }
}

@keyframes MOVE-BG {
    from {
        -webkit-transform: translateX(0);
        transform        : translateX(0);
    }

    to {
        -webkit-transform: translateX(88px);
        transform        : translateX(88px);
    }
}

section.rooms {

    .bt {
        &-blue {
            border-top: 2px solid #49C2DF;
        }

        &-pink {
            border-top: 2px solid #F36F8F;
        }

        &-yellow {
            border-top: 2px solid #F8AC3A;
        }
    }

    .badge {
        padding    : .5em .8em;
        font-size  : 100%;
        z-index    : 1;
        position   : relative;
        font-family: 'Sen', sans-serif;

        &-blue {
            background-color: #49C2DF;
            color           : #fff;
        }

        &-pink {
            background-color: #F36F8F;
            color           : #fff;
        }

        &-yellow {
            background-color: #F8AC3A;
            color           : #fff;
        }
    }

    .card-img-top {
        margin-top: -2.5rem;
    }
}

section.features {
    .feature-icon {
        width             : 128px;
        height            : 115px;
        background        : url(../img/shapes/feature.png) no-repeat !important;
        text-align        : center;
        padding           : 30px;
        margin            : auto;
        margin-top        : 65px;
        position          : relative;
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition   : all 0.2s ease-in-out;
        -o-transition     : all 0.2s ease-in-out;
        -ms-transition    : all 0.2s ease-in-out;
        transition        : all 0.2s ease-in-out;
        cursor            : pointer;
    }

    .feature-icon:after {
        width             : 128px;
        height            : 115px;
        background        : url(../img/shapes/feature.png) no-repeat !important;
        content           : '';
        position          : absolute;
        left              : 0;
        right             : 0;
        top               : 0;
        opacity           : 0;
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition   : all 0.2s ease-in-out;
        -o-transition     : all 0.2s ease-in-out;
        -ms-transition    : all 0.2s ease-in-out;
        transition        : all 0.2s ease-in-out;
        pointer-events    : none;
    }

    .feature-icon:hover::after {
        opacity               : 0.6;
        transition            : all 0.2s ease-in-out;
        -webkit-animation     : bigono 0.4s linear;
        -moz-animation        : bigono 0.4s linear;
        animation             : bigono 0.4s linear;
        font-style            : normal;
        font-weight           : normal;
        font-variant          : normal;
        text-transform        : none;
        -webkit-font-smoothing: antialiased;
        -webkit-transition    : all 0.2s ease-in-out;
        -moz-transition       : all 0.2s ease-in-out;
        -o-transition         : all 0.2s ease-in-out;
        -ms-transition        : all 0.2s ease-in-out;
        transition            : all 0.2s ease-in-out;
    }

    @-webkit-keyframes bigono {
        0% {
            opacity  : 2;
            transform: scale(1);
        }

        50% {
            opacity  : 0.6;
            transform: scale(1.1);
        }

        100% {
            opacity  : 2;
            transform: scale(1);
        }
    }

    @-moz-keyframes bigono {
        0% {
            opacity  : 2;
            transform: scale(1);
        }

        50% {
            opacity  : 0.6;
            transform: scale(1.1);
        }

        100% {
            opacity  : 2;
            transform: scale(1);
        }
    }

    @keyframes bigono {
        0% {
            opacity  : 2;
            transform: scale(1);
        }

        50% {
            opacity  : 0.6;
            transform: scale(1.1);
        }

        100% {
            opacity  : 2;
            transform: scale(1);
        }
    }

    .feature-icon img {
        height: 100%;
    }
}

.listbook {
    .leftblock {
        background   : #a358e0;
        background   : -webkit-linear-gradient(left top, #e71111, #e67575);
        background   : -o-linear-gradient(bottom right, #e71111, #e67575);
        background   : -moz-linear-gradient(bottom right, #e71111, #e67575);
        background   : linear-gradient(to bottom right, #e71111, #e67575);
        border-radius: 25px;
        position     : relative;
        padding      : 30px 30px 60px;
        overflow     : hidden;

        &-title {
            text-transform: uppercase;
            font-weight   : bold;
            font-size     : 32px;
            letter-spacing: 1px;
            color         : #ffffff;
            margin-top    : 5px;

            span {
                font-weight   : 500;
                display       : block;
                font-size     : 18px;
                letter-spacing: 0;
                text-transform: none;
                margin-top    : 5px;
            }
        }

        &::after {
            content       : '';
            background    : url(../img/shapes/leftblock.png) no-repeat;
            right         : 30px;
            bottom        : 0;
            z-index       : 0;
            pointer-events: none;
            width         : 323px;
            position      : absolute;
            height        : 293px;
        }

        &::before {
            content       : '';
            height        : 450px;
            width         : 450px;
            background    : rgb(44, 44, 44);
            position      : absolute;
            border-radius : 100%;
            left          : -120px;
            z-index       : 0;
            pointer-events: none;
            opacity       : 0.1;
            top           : -50px;
        }

        &-banner {
            position : absolute;
            right    : 18px;
            z-index  : 2;
            top      : 62%;
            transform: translateY(-50%);
        }

    }



    input {
        border       : 0;
        height       : 60px;
        border-radius: 25px;
        outline      : none;
        padding-left : 60px;
        line-height  : 61px;
        box-shadow   : 12px 12px 30px 0 rgba(77, 77, 119, .10);
        font-weight  : 500;
        color        : #8ba2ad;
    }


    input[type=submit] {
        position          : absolute;
        right             : 22%;
        z-index           : 1;
        /* top            : 3px; */
        bottom            : 62px;
        font-size         : 14px;
        height            : 55px;
        border            : 0;
        border-radius     : 25px;
        color             : #fff;
        padding           : 0 21px;
        font-weight       : 500;
        letter-spacing    : 0.5px;
        outline           : none;
        box-shadow        : none;
        background        : #a358e0;
        background        : -webkit-linear-gradient(left top, #e33131, #ff0000);
        background        : -o-linear-gradient(bottom right, #e33131, #ff0000);
        background        : -moz-linear-gradient(bottom right, #e33131, #ff0000);
        background        : linear-gradient(to bottom right, #e33131, #ff0000);
        cursor            : pointer;
        opacity           : 0.8;
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition   : all 0.2s ease-in-out;
        -o-transition     : all 0.2s ease-in-out;
        -ms-transition    : all 0.2s ease-in-out;
        transition        : all 0.2s ease-in-out;

        &:hover {
            outline           : none;
            box-shadow        : none;
            opacity           : 1;
            background        : linear-gradient(to bottom right, #ff0000, #e33131);
            -webkit-transition: all 0.2s ease-in-out;
            -moz-transition   : all 0.2s ease-in-out;
            -o-transition     : all 0.2s ease-in-out;
            -ms-transition    : all 0.2s ease-in-out;
            transition        : all 0.2s ease-in-out;
        }
    }



    .rightblock {
        background   : #a358e0;
        background   : -webkit-linear-gradient(left top, #ffd94d, #f8f0c6);
        background   : -o-linear-gradient(bottom right, #ffd94d, #f8f0c6);
        background   : -moz-linear-gradient(bottom right, #ffd94d, #f8f0c6);
        background   : linear-gradient(to bottom right, #ffd94d, #f8f0c6);
        border-radius: 25px;
        position     : relative;
        padding      : 30px 30px 41px;
        overflow     : hidden;

        &::before {
            content       : '';
            height        : 400px;
            width         : 400px;
            background    : #ff0000;
            position      : absolute;
            border-radius : 100%;
            right         : -110px;
            z-index       : 0;
            pointer-events: none;
            opacity       : 0.12;
            top           : -110px;
        }


        &-title {
            text-transform: uppercase;
            font-weight   : 700;
            font-size     : 32px;
            letter-spacing: 1px;
            color         : #2c2c2c;
            margin-top    : 5px;

            span {
                font-weight   : 500;
                display       : block;
                font-size     : 18px;
                letter-spacing: 0;
                text-transform: none;
                margin-top    : 5px;
                color         : #3e3e3e;
            }
        }

        h6 {
            font-size: 1.2rem;
        }

        span.icon {
            background   : linear-gradient(to bottom right, #ff0000, #e33131);
            border-radius: 50px;
            padding      : 5px 8px;
            opacity      : 0.8;
        }

    }
}

.footer {
    position        : relative;
    z-index         : 1;
    background-color: #f7fafd;
    border-top      : 1px dashed #fa7373;

    a{
        color: #000;   
    }
    
    a:hover{
        color: #2c2c2c;   
        text-decoration: none;
    }

    .shape1 {
        position         : absolute;
        top              : -8px;
        z-index          : -1;
        left             : 90px;
        -webkit-animation: rotate3d 4s linear infinite;
        animation        : rotate3d 4s linear infinite;
        opacity          : 0.4;
    }
}