/* Google fonts CDN */
@import url('https://fonts.googleapis.com/css2?family=Roboto&family=Open+Sans&family=Lato&family=Montserrat&family=Poppins&family=Playfair+Display&family=Merriweather&family=Oswald&family=Raleway&family=Source+Code+Pro&display=swap');

/* **************** */
/* GLobal.css start */
/* **************** */

/* Use following values as variables */
:root {
    --theme-color-1: #334bff;
    --theme-color-2: #33ff96;
    --main-heading-font: "Roboto", sans-serif;
    --sub-heading-font: "Roboto", sans-serif;
    --body-text-font: "Roboto", sans-serif;
    --std-padding: 40px;
    --header-height: 100px;
}

* {
    padding: 0;
    margin: 0;
    font-family: var(--body-text-font);
    box-sizing: border-box;
}

body {
    background-color: rgb(0, 0, 0);
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    cursor: pointer;
}

/* Use all reusable classes in global.css file */

.page-content-main-container {
    min-height: 100vh;
}

.page-content-main-container.header-padding-top {
    padding-top: var(--header-height);
}

.bg-cover {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.padding-x {
    padding-left: var(--std-padding);
    padding-right: var(--std-padding);
}

.page-width {
    max-width: 1400px;
    margin: auto;
}

.page-text {
    font-size: 14px;
    color: #252525;
    margin-bottom: 0;
}

.clickable-text {
    color: rgb(92, 92, 255);
    cursor: pointer;
}

/* Carusel updates */
.page-carousel .slick-btn {
    position: absolute;
    top: 50%;
    z-index: 5;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background-color: var(--theme-color-1);
    color: #fff;
    border: 0;
    border-radius: 50%;
    font-size: 14px;
    opacity: 0.5;
    transition: all 0.3s;
}

.page-carousel .slick-btn:hover {
    opacity: 1;
}

.page-carousel .slick-btn:focus {
    outline: 0;
}

.page-carousel .slick-btn.prevBtn {
    left: -10px;
}

.page-carousel .slick-btn.nextBtn {
    right: -10px;
}

.page-carousel .slick-slide {
    height: fit-content;
}

.whatsapp-container{
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 10000;
}

.whatsapp-container .whatsapp-btn{
    border: 0;
    height: 40px;
    width: 40px;
    background-color: #25D366;
    color: #fff;
    font-size: 28px;
    border-radius: 7px;
}

.search-bar-container{
    background-color: #fff;
    border: 1px solid gray;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.search-bar-container .search-input{
    border: 0;
    padding: 3px 10px;
    min-width: 200px;
}

.search-bar-container .search-input:focus{
    outline: 0;
}

.search-bar-container .search-btn{
    width: 40px;
    border: 0;
    background-color: var(--theme-color-1);
    color: #fff;
}

.search-bar-container .search-btn:focus{
    outline: 0;
}

/* ************** */
/* GLobal.css End */
/* ************** */


/* *************************** */
/*         Media Queries      */
/* ************************* */

/* Large laptop */
@media screen and (max-width:1400px) {}

/* Small laptop */
@media screen and (max-width:1200px) {}

/* Tablet */
@media screen and (max-width:992px) {
    :root {
        --std-padding: 30px;
        --header-height: 90px;
    }
}

@media screen and (max-width:768px) {
    :root {
        --header-height: 80px;
    }
}

/* Large mobile */
@media screen and (max-width:576px) {
    :root {
        --std-padding: 20px;
        --header-height: 50px;
    }

    .whatsapp-container .whatsapp-btn{
        height: 30px;
        width: 30px;
        font-size: 20px;
        border-radius: 5px;
    }

    .search-bar-container .search-input{
        min-width: 100px;
        width: 100px;
    }

}

/* Small mobile */
@media screen and (max-width:375px) {}

@media screen and (max-width:320px) {}

/* *************************** */
/*         Media Queries END     */
/* ************************* */