.clr-white {color: white}
.clr-black {color: black}
.text-start{text-align: start;}
.clr-heading{color: #85A98F}
.bg-black {background-color: black}
.bg-main {background-color: #421f40}
.text-uper-case{text-transform: uppercase;}
.text-decoration-none {text-decoration: none;}
.list-style-none {list-style-type: none;}
.line-height-1 {line-height: 1.7;}
.margin-start {margin-block-start:0rem;}
.margin-end {margin-block-end:0rem;}
.max-100 {max-width: 100%;}
.clr-transparent{color: transparent;}
.text-uppercase{text-transform: uppercase;} 
.letter-spacing-6{letter-spacing: 6px}
.w-48{width: 48%}
.padding-20{padding: 20px}


#header {
        z-index: 1111;
    position: relative;
    width: -webkit-fill-available;
    color: white;
    
}
 #header .logo-main img {
    width: 100px;
}

 #header .fa-bars {
        color: white;
    background: #873559;
    padding: 10px;
    border-radius: 5px;
}
 #header .phone-nav {
      position: absolute;
    background: #873559;
    width: 100%;
    left: 0;
    top: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
}

 #header .container {
    margin-left: auto;
    margin-right: auto;
    max-width: 1300px;
    padding-left: 20px;
    padding-right: 20px;
}

@media (min-width: 1024px) {
     #header .container {
        padding-left: 30px;
        padding-right: 30px;
    }
}



 #header .desktop {
    display: block;
}
 #header .phone {
    display: none !important;
}
#phone-nav {
    display: none !important;
}
@media only screen and (max-width: 750px) {
    #phone-nav {
    display: none;
}
 #phone-nav.opened {
    display: block !important;
}
     #header .desktop {
        display: none !important;
    }
     #header .phone {
        display: block !important;
    }
}



#hero .container {
    margin-left: auto;
    margin-right: auto;
    max-width: 1300px;
    padding-left: 20px;
    padding-right: 20px;
}

@media (min-width: 1024px) {
     #hero .container {
        padding-left: 30px;
        padding-right: 30px;
    }
}
#hero{
    background-image: url(../images/bg.jpg);
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}
#hero .overlay {
    content: '';
    background-color: black;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0.7;
}

#hero .hero-btn{
        background: #873559;
    padding: 18px 36px;
    color: white;
    outline: none;
    border: 2px solid goldenrod;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.5s;
} 
#hero .hero-btn:hover{
    opacity: 0.7;
    transition: 0.5s;
}
#hero .text img{
    height: 450px;
    object-fit: contain;
}
@media only screen and (max-width:900px){
    .flex-column-md{flex-direction: column;}
    .w-100-md{width: 100% !important}
}




.container{
    margin-left: auto;
    margin-right: auto;
    max-width: 1304px;
    padding-left: 20px;
    padding-right: 20px;
}
@media (min-width: 1024px) {
    .container {
        padding-left: 30px;
        padding-right: 30px;
    }
}


.book {background-color: black;}

.book-wrapper {
    background-color: #873559;
    color: white;
    width: 30%;
    border-radius: 4px;
    position: relative;
}
.book-wrapper svg {
        position: absolute;
    left: 0;
    top: 0%;
}
.book-content {
    padding:15px;
}
.book-img {
    width: 60px;
}


@media only screen and (max-width:950px){
    .book-wrapper {width: 45% !important;}
}

@media only screen and (max-width:750px){
    .book-wrapper {width: 100% !important;}
}

.about {
    background-color: #060505;
}
.about-content , .about-img{
    transition: 0.3s ease-in-out;
    transform: rotate(-5deg);
}
.about-content:hover , .about-img:hover{
    transition: 0.3s ease-in-out;
    transform: rotate(0deg);
}

.contact {
    background-color: #421f40;
}
.input-fields {
    padding: 20px;
    color:black;
    background: white;
    outline: none;
    border: none;
}
.contact-btn{
    padding: 20px;
    width: 15%;
    /* text-align: center; */
    background-color: #a84e77;
    color: white;
    outline: none;
    border: none;
    font-size: larger;
    font-weight: 200;
    transition: 0.5s;
    cursor: pointer;
}
.contact-btn:hover{
    opacity: 0.7;
    transition: 0.5s;
}


 #footer .container{
	margin-left: auto;
    margin-right: auto;
    max-width: 1304px;
    padding-left: 20px;
    padding-right: 20px;
}
@media (min-width: 1024px) {
    #footer .container {
        padding-left: 30px;
        padding-right: 30px;
    }
}
#footer {
    background-color: black;
}
#footer .copyright{
    background-color:#873559;
}
@media only screen and (max-width:900px){
    .flex-column-md{flex-direction: column;}
    .w-100-md{width: 100% !important}
}
#gSingle-v1 .container {
                        margin-left: auto;
                        margin-right: auto;
                        max-width: 1300px;
                        padding-left: 20px;
                        padding-right: 20px;
                    }

                    @media (min-width: 1024px) {
                        #gSingle-v1 .container {
                            padding-left: 30px;
                            padding-right: 30px;
                        }
                    }

                    #gSingle-v1 .iframe-wrapper iframe {
                        width: 80%;
                        display: flex;
                        margin: auto;
                        min-height: 500px;
                        border: none;
                        outline: none;
                    }

                    @media only screen and (max-width: 650px) {
                        #gSingle-v1 .iframe-wrapper iframe {
                            width: 100% !important;
                            min-height: 350px !important;
                        }
                    } 
                    #gSingle-v2-banner .banner-heading {
    font-size: 60px;
}
#gSingle-v2-banner .banner-content {
    background: #873559;
    padding: 60px 0 55px;
}
#gSingle-v2 iframe { width: 80%;
                        display: flex;
                        margin: auto;
                        min-height: 500px;
                        border: none;
                        outline: none;
                    }
#gSingle-v2-banner .banner-content:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    bottom: 0;
    background-repeat: no-repeat;
    z-index: -1;
    background-image: url(../../assets/images/shape.png);
    background-size: cover;
}

@media only screen and (max-width: 600px) {
    #gSingle-v2-banner .banner-heading {
        font-size: 40px !important;
    }
    #gSingle-v2-banner .banner-content {
        padding: 35px 0 40px;
    }
    #gSingle-v2 iframe {
        width: 90% !important;
        height: 50vh !important;
    }
}