/* General CSS rule for all */
body {
    font-family: 'Nunito', Helvetica, sans-serif;
    color: #333333;
    
}

#intro {
      background-image: url("../img/header.jpg");
      height: 100vh;
    }

    #intro {
        margin-top: -58.59px;
      }


/* Her for my text elements */
h1, h2, h3, h4, h5, h6{
    font-family: 'Poppins', sans-serif;
    color: #000000;
}

/*Change the colors of buttons*/
    .btn-primary {
      background-color: #0278e5 !important;
      border-color: #0278e5 !important;
      
    }
    .btn-primary:hover {
      background-color: #2a8eec !important;
      border-color: #2a8eec !important;
    }

    .btn-secondary {
      background-color: #7f52b7 !important;
      border-color: #7f52b7 !important;
      color: #fff;
    }
    .btn-secondary:hover {
      background-color: #a272db !important;
      border-color: #a272db !important;
    }

    /* floating button display */
    #floating-button {
        display: none;
    }

    /* logo switch */
    .desk-logo {
        display: block;
    }
    .mob-logo {
        display: none;
    }

    
    @media (max-width: 768px) {
        .desk-logo {
            display: none;
        }
        .mob-logo {
            display: block;
        }
    }

/* Home Page Section 2 css */

/* Css rules for all cards */
/* Card image */
.card .card-img{
    margin-top: 20px;
    height: 220px;
    width: 200px;
}
.cardBackground{
    color: #fff;
    height: 500px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.about-card{
    height: 330px;
}




/* images for each page card */
.bgc-1{
    background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)),
                    url('../img/big-card-1.png');
}
.bgc-services{
    background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)),
                    url('../img/bg-services.png');
}
.bgc-destination{
    background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)),
                    url('../img/bg-destinations.png');
}
.bgc-contact{
    background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)),
                    url('../img/contact-img.png');
}


/* css rule for navigation in-active & active state */
.navbar .nav-link {
    font-family: 'Poppins', sans-serif;
    font-weight: medium;
}
.navbar .nav-link.active {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    color: #0278e5 !important;
}

.footer{
    padding-top: 20px;
    border-radius: 30px;
    background-color: #f5f5f5;
}

/* css for contact form card */
.form-card{
    box-shadow: 0 4px 8px 0 rgba(117, 117, 117, 0.027), 0 6px 20px 0 rgba(122, 122, 122, 0.19);
    border-radius: 30px;
    padding: 30px;

}
.form-width{
    width: 20rem;
}
/* contact page paragraph */
.contact-p{
    color: #555;
    font-size: 20px;
    font-weight: medium;
    margin-bottom: 12px;
}

 /*for large desktops and above go here */
@media (min-width: 992px) {
    #intro {
        margin-top: -58.59px;
      }

    /* Section top and bottom margin */
    .content-section{
        
        margin-bottom: 100px;
    }

    /*font sizing*/
    body {
        font-size: 16px;
    }
    h1{
        font-size: 64px;
    }
    h2{
        font-size: 48px;
    }

    /* change card hight */
    .offer-card {
        padding-top: 50px;
        padding-bottom: 50px;
        padding-left: 20px;
        padding-right: 20px;
        height: 500px;
        }
    /* change cardBackground padding */
    .cardBackground{
        padding-left: 250px;
        padding-right: 250px;
    }
    /* about page subheading padding bottom */
    .about-subheading {
        padding-left : 100px;
        padding-right: 100px;
    }
    /* form width large screens */
    .form-width{
    width: 32rem;
    }

    /* padding for subheading bodytext */
    .p-padding{
        padding-left: 250px;
        padding-right: 250px;
    }

    /* display scroll button on bigger screens */
    #floating-button {
        position: fixed; /* Fixes the button relative to the viewport */
        bottom: 20px;    /* Positions it 20px from the bottom */
        right: 20px;     /* Positions it 20px from the right */
        z-index: 1000;   /* Ensures it's on top of other elements */
        display: none; /* Hidden by default, will be shown via JS when needed */
        background-color: #f15c0e; /* Example styling */
        color: #fff;
        padding: 10px 15px;
        border: none;
        border-radius: 50%; /* For a circular button */
        cursor: pointer;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional shadow */
    }

}