/*------------------------------------------------------------------
[Master Stylesheet]

Project:  Nevica
Version:  1.0
Assigned to:  Alex Zaymund
Primary use:  Nevica
-------------------------------------------------------------------*/


/* FONTS*/
@import 'https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900|Montserrat:400,500,600,700';
@import '../fonts/fontawesome-free-5.8.1/css/all.min.css';
@import '../fonts/stroke/style.css';
@import '../fonts/elegant/style.css';
@import '../fonts/pe-icon-7-stroke/css/pe-icon-7-stroke.css';
@import '../fonts/simple-line-icons/css/simple-line-icons.css';
@import '../fonts/nevica/font/flaticon.css';





/* PLUGIN CSS */

@import '../libs/bootstrap-4.1.3/bootstrap.css';                /* bootstrap */
@import '../plugins/headers/header.css';                /* header */
@import '../plugins/headers/yamm.css';                /* header */
@import '../plugins/slider-pro/slider-pro.css';         /* main slider */
@import '../plugins/slick/slick.css';         /* sliders */
@import '../plugins/slick/slick-theme.css';         /* sliders */
@import '../plugins/magnific-popup/magnific-popup.css';            /* modal */
@import '../plugins/animate/animate.css';                        /* animations */
@import '../plugins/flowplayer/skin/playful.css';          /* video-player */
@import '../plugins/noUiSlider/nouislider.css';          /* slider number */
@import '../plugins/bootstrap-select/css/bootstrap-select.min.css';                /* bootstrap-select */



/* MAIN CSS */

@import 'main.css';
@import 'color.css';
@import 'responsive.css';



.whatsapp-icon {
    position: fixed;
    bottom: 10px;   /* Distance from the bottom */
    left: 10px;     /* Distance from the left */
    font-size: 30px; /* Size of the icon */
    color: #25D366; /* WhatsApp green color */
    z-index: 1000;
    background-color: white;
    border-radius: 50%; /* Ensures the icon is circular */
    padding: 15px;  /* Adjust the padding to center the icon within the circle */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
    width: 50px;  /* Set the width of the icon */
    height: 50px; /* Set the height of the icon to match the width for a perfect circle */
    display: flex;  /* Use flexbox for centering the icon content */
    justify-content: center;
    align-items: center;
    cursor: pointer; /* Makes the icon clickable */
}

.whatsapp-icon:hover {
    color: #128C7E; /* Slightly darker green on hover */
    background-color: #e8f5e9; /* Optional: A light background color on hover */
}



/* Custom class for both buttons */
.custom-btn {
    background-color: #25D366; /* Set the desired background color (WhatsApp green) */
    color: white; /* White text color */
    border: none;
}

.custom-btn:hover {
    background-color: #128C7E; /* Darker green on hover */
}
/* Example custom media query for small screens */
@media (max-width: 576px) {
    .btn {
        font-size: 16px; /* Larger text on small screens */
        padding: 1Opx;  /* Increase padding for larger buttons */
    }

    .d-flex {
        flex-direction: column;  /* Stack buttons vertically on small screens */
        align-items: center; /* Center buttons */
    }

    .btn {
        width: 50%; /* Make buttons full width on small screens */
    }

    
}