/*---------- GOOGLE FONT IMPORT ----------*/
@import url('https://fonts.googleapis.com/css2?family=Lato&family=Montserrat&family=Open+Sans&display=swap');

/* Base reset */

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Open sans', sans-serif;
    font-size: 1.2rem;
    background-color: #fff;
    min-height: 100vh;
    overflow-x: hidden;
}

h2, h3{
    font-family: 'Lato', sans-serif;
}

/****** Navigation & Canvas ***********/
.brand-name {
   vertical-align: middle;
}

.navbar-brand:hover{
    color:rgb(25, 75, 225);
}

footer .navbar-brand:hover{
    color:rgb(29, 34, 48);
}

.navbar-toggler{
    border: 0;
}

.offcanvas-body a:hover{
    color:#fff;
    background-color: #00B4D8;
    text-align: center;
}

.nav-link, .offcanvas-title {
    color: #03045E;
}

.booking-highlight{
    border: 1px solid #0077B6;
    background-color: #0077B6;
    border-radius: 5px;
}

/**************** Hero images  **************/
.hero-container {
    position: relative;
}

.page-top{
    margin-top: 5vh;
}

.hero-image1 {
    aspect-ratio: 3 / 4; 

    min-height: 40vh;
    background: linear-gradient(rgba(9, 3, 22, 0.1), rgba(9, 3, 22, 0.1)), url(https://res.cloudinary.com/dep46gq6m/image/upload/v1681826348/sm-hero1_umfe9c.jpg);
    background-blend-mode: overlay;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    font-size: 10vw;
}

.hero-image2 {
    aspect-ratio: 3 / 4; 
    min-height: 40vh;
    background: linear-gradient(rgba(9, 3, 22, 0.1), rgba(9, 3, 22, 0.4)), url(https://res.cloudinary.com/dep46gq6m/image/upload/v1681827238/sm-hero2_ksg9yr.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-blend-mode: overlay;
    font-size: 10vw;
}

.hero-image3{
    aspect-ratio: 2 / 3; 
    min-height: 40vh;
    background: linear-gradient(rgba(9, 3, 22, 0.1), rgba(9, 3, 22, 0.4)), url(https://res.cloudinary.com/dep46gq6m/image/upload/v1681837721/day-workstation-hero2_jgebgk.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-blend-mode: overlay;
    font-size: 10vw;
}

.image-txt1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    padding: 2rem;
    color:#fff;
    background-color: rgba(56, 54, 54, 0.2);
    backdrop-filter: blur(8px);
}

.image-txt2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    padding: 2rem;
    color: #fff;
    background-color: rgba(50, 43, 43, 0.1);
    backdrop-filter: blur(5px);
}

.hero-text{
    font-family: 'Montserrat', sans-serif;
    font-size: 250%;
    font-weight: 600;
}

/**************** Form  **************/
 .form-page{
    min-height: 95vh;
    display: grid;
    align-content: center;
}

.booking-info {
    min-height: 100vh;
    display: grid;
    align-content: center;
}

.link {
    color: #03045E;
    text-decoration: none;
}

.link:hover,
.link:active {
    color: #0077B6;
    text-decoration: underline;
}

/* ********* Booking Detail************** */
.booking-details {
    margin-top: 10vh;
    min-height: 120vh;
}

.booking-details-card li {
    list-style: none;
}

.booking-details-card i {
    color: #00B4D8;
}

.modal {
    --bs-modal-bg: #f4f4f9;
    --bs-modal-border-radius: 0;
}

/*********** Map ************/
.location-content{
    background-color: #0077B6;
    color: #fff;
}

#map {
   min-height: 22rem;
   min-width: 18.5rem;
   border: 0;
   padding: 0;
}

/*********** Buttons ************/
.btn {
    flex: 1 1 auto;
    margin: 10px;
    padding: 10px;
    text-align: center;
    transition: 0.5s;
    background-size: 200% auto;
    color: #fff;
    border-radius: 10px;
}
  
.btn-login:hover, 
.btn-signup:hover,
.btn-bookspace:hover,
.btn-location:hover {
    background-position: right center;
    text-transform: uppercase;
    color: #fff;
}
  
.btn-login,
.btn-signup,
.btn-bookspace,
.btn-location {
    background-image: linear-gradient(to right, #00B4D8 0%, #03045E 51%, #0077B6 100%);
}

/*********** Contact Form ***********/

.contact-form input,
.contact-form textarea {
    box-shadow: none;
    border-color: #03045E;
}

.btn-enquiry {
    width: 100%;
    padding: 1rem 2rem 1rem 1rem;
    text-align: center;
    background-color: #90E0EF;
    color: #000;
    margin: 1rem 0 0.8rem 0;
    border-radius: 3px;
    z-index: 5;
}

  .btn-enquiry:hover {
    background-color: #03045E;
    color: #fff;
}

  /***********  Footer ***********/
.bg-footer{
    background-color: #0077B6;
    color: #fff;
}

.social-links i {
    font-size: 1.4rem;
    color: #fff;
    transition: all .3s ease-in-out;
}

.social-links a>i:hover { 
    transform: translateY(3px);
    color: #03045E;
    background: #fff;
}

.git-link a{
    text-decoration: none;
    color: #fff;
    font-size: 0.8rem;
}

.site-use {
    font-size: 0.8rem;
    color: #fff;
    margin-top: 0.8rem;
}

/**************** Media Query  **************/
/* Tablets & ipads*/
@media only screen and (min-width : 481px) {
    h1 {
        font-size: 3.5rem; 
    }
}

/**** Laptops *****/
@media only screen and (min-width : 769px) {
    h1 {
        font-size: 3rem;  
    }
}

/***** Booking ****/
@media (min-width:300px){
    .booking-page,
    .form-page {
        width: 100%;
    }
}

@media (min-width:768px){
    .form-page {
        margin-top: 2rem;
        width: 70%;
    }
}

/******** Hero images **********/
@media (min-width: 768px) {
    .hero-image1 {
      aspect-ratio: 3 / 4;
      min-height: 40vh;
      background-image: linear-gradient(rgba(9, 3, 22, 0.1), rgba(9, 3, 22, 0.1)), url(https://res.cloudinary.com/dep46gq6m/image/upload/v1682031209/md-hero1_ohojvt.jpg);
      background-repeat: no-repeat;
      background-blend-mode: overlay;
      background-size: cover;
      background-position: center;
    }
}

@media (min-width: 1024px) {
    .hero-image1 {
      aspect-ratio: 4 / 3;
      min-height: 60vh;
      background-image: linear-gradient(rgba(9, 3, 22, 0.1), rgba(9, 3, 22, 0.1)), url(https://res.cloudinary.com/dep46gq6m/image/upload/v1682032278/office-desk1_scxqbz.jpg);
      background-repeat: no-repeat;
      background-blend-mode: overlay;
      background-size: cover;
      background-position: center;
    }

    .hero-image2 {
        aspect-ratio: 4 / 3;
        min-height: 60vh;
        background-image: linear-gradient(rgba(9, 3, 22, 0.1), rgba(9, 3, 22, 0.4)), url(https://res.cloudinary.com/dep46gq6m/image/upload/v1682033120/lg-hero2_wsxfcc.jpg);
        background-repeat: no-repeat;
        background-blend-mode: overlay;
        background-size: cover;
        background-position: center;
    }
}
  
@media (min-width: 1200px) {
    .hero-image1 {
        aspect-ratio: 16 / 9;
        min-height: 80vh;
        background-image: linear-gradient(rgba(9, 3, 22, 0.1), rgba(9, 3, 22, 0.1)), url(https://res.cloudinary.com/dep46gq6m/image/upload/v1681819424/office-desk-main_jco5cx.jpg);
        background-blend-mode: overlay;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    } 
      
      .hero-image2 {
        aspect-ratio: 16 / 9;
        min-height: 80vh;
        background-image: linear-gradient(rgba(9, 3, 22, 0.1), rgba(9, 3, 22, 0.4)), url(https://res.cloudinary.com/dep46gq6m/image/upload/v1681820253/private-workspace_tizfjv.jpg);
        background-blend-mode: overlay;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
    
      .hero-image3 {
        aspect-ratio: 16 / 9;
        min-height: 80vh;
        background-image: linear-gradient(rgba(9, 3, 22, 0.1), rgba(9, 3, 22, 0.4)), url(https://res.cloudinary.com/dep46gq6m/image/upload/v1681820292/day-workstation-hero3_rsphtp.jpg);
        background-blend-mode: overlay;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
}