* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

body { font-family: Arial, sans-serif; }


/* Base Common classes for all screen sizes */

p{margin: 10px 0px; font-size: 18px; font-weight: normal; text-align: justify;}

/* General Style for h1 to h6 headings */
h1 {
    font-size: 2.5rem;
    font-weight: bold;
    color: #000;
    margin: 20px 0px; 
}

h2 {
    font-size: 2rem;
    font-weight: bold;
    color: #E11D48;
    margin: 18px 0px;
}

h3 {
    font-size: 1.75rem;
    font-weight: bold;
    color: #E11D48;
    margin: 16px 0px;
}

h4 {
    font-size: 1.5rem;
    font-weight: normal;
    color: #E11D48;
    margin: 14px 0px;
}

h5 {
    font-size: 1.25rem;
    font-weight: bold;
    color: #000;
    margin: 12px 0px;
}

h6 {
    font-size: 1.15rem;
    font-weight: bold;
    color: #000;
    margin: 10px 0px;
}


a{text-decoration: none; color: #E11D48; font-weight: 700;}
img{width: 100%; height: auto; margin: 0px auto;}

.p-1{padding: 4px;}
.p-2{padding: 8px;}
.p-3{padding: 16px;}
.p-4{padding: 32px;}
.p-5{padding: 64px;}

.py-1{padding: 4px 0px;}
.py-2{padding: 8px 0px;}
.py-3{padding: 16px 0px;}
.py-4{padding: 32px 0px;}
.py-5{padding: 64px 0px;}

.m-1{margin: 4px;}
.m-2{margin: 8px;}
.m-3{margin: 16px;}
.m-4{margin: 32px;}
.m-5{margin: 64px;}

.my-1{margin: 4px 0px;}
.my-2{margin: 8px 0px;}
.my-3{margin: 16px 0px;}
.my-4{margin: 32px 0px;}
.my-5{margin: 64px 0px;}



.border{border: #fff 1px solid; padding: 5px;}

.bgdark{background-color: #1F2937; color: #fff;}
.bgdark a{text-decoration: none; font-weight: 700; color: #E11D48;}
.bgdark a:hover{color:black;}

.bgpink{background-color: oklch(.637 .237 25.331); color: #fff;}
.bgpink a{text-decoration: none; font-weight: 700; color: #1F2937;}
.bgpink a:hover{color: black;}

.text-base{color: #E11D48;}
.text-white{color: #fff;}
.text-center{text-align: center; margin: 0px auto;}

.buttonPink{background-color: #E11D48; padding: 10px 20px; text-align: center; font-size: 16px; border-radius: 30px; text-decoration: none; color: #fff !important;}
.buttonPink a{text-decoration: none;}

.container {
    /* display: flex; */
    flex-wrap: wrap;        /* Allow items to wrap to the next line */
    justify-content: space-between; /* Distribute items evenly */
    gap: 20px;              /* Add space between items */
    padding: 20px;          /* Padding inside the container */
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;         /* Center the container */
}

.containerInner {
    display: flex;
    flex-wrap: wrap;        /* Allow items to wrap to the next line */
    justify-content: space-between; /* Distribute items evenly */
    gap: 20px;              /* Add space between items */
    padding: 20px;          /* Padding inside the container */
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;         /* Center the container */
}


ul{ margin-left: 30px;}
ul li{margin: 10px 0px;}


/* Base Common classes for all screen sizes */


header {background-color: #1F2937; padding: 0px; }

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}
.navbar .logo {
    color: white;
    font-size: 24px;
    font-weight: bold;
}
.nav-links {
    list-style: none;
    display: flex;
}

.nav-links li {
    margin: 0 15px;
}

.nav-links a {
    color: white;
    text-decoration: none;
    font-size: 18px;
}

.hamburger {
    display: none;
    font-size: 30px;
    color: white;
    cursor: pointer;
}


.banner img{width: 100%;height: auto;}


/* Item styling */
.item {
    background-color: #1F2937;
    color: white;
    padding: 20px;
    text-align: center;
    border-radius: 8px;
    flex: 1 1 calc(20% - 20px); /* Each item takes up ~20% of the row width, accounting for gaps */
    box-sizing: border-box;
}
.item img{width: 100%; height: auto;}

/* Service */
.serviceItem {
    background-color: #1F2937;
    color: white;
    padding: 20px;
    text-align: center;
    border-radius: 8px;
    flex: 1 1 calc(33% - 20px); /* Each item takes up ~20% of the row width, accounting for gaps */
    box-sizing: border-box;
}
.serviceItem img{width: 100%; height: auto;}

/* Styling Tags */
.tags{padding: 10px 0px;}
.tags ul{list-style-type: none; justify-content: center;}
.tags ul li{display:inline-block; margin: 8px 2px;}
.tags ul li a{color: #000; padding: 4px 10px; border-radius: 3px; text-decoration: none; font-size: 15px;
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));}
.tags ul li a:hover{color: #000 !important;}


.LinkList ul{list-style: none;}
.LinkList ul li{ text-decoration: none !important; list-style: none; line-height: 35px;}
.LinkList li a{text-decoration: none !important; color: #666; font-weight: 700;}
.LinkList li a:hover{color: #f23f30;}


/* Accordion Styles */
.accordion {margin: 0 auto; background-color: #fccdc9; padding: 20px;}
.accordion-item {border: 1px solid #E11D48; margin-bottom: 10px;}
.accordion-header {width: 100%; padding: 15px; background-color:transparent; color:#000; text-align: left; border: none; cursor: pointer; font-size: 18px; margin-bottom: 10px;}
.accordion-content {display: none; padding: 15px; background-color: #f9f9f9; border-top: 1px solid #ccc;}
.accordion-header:focus {outline: none;}
.accordion-header.active + .accordion-content {display: block;}

.col-2 {
    background-color:transparent;
    color: #000;
    padding: 20px;
    text-align: center;
    border-radius: 8px;
    flex: 1 1 calc(50% - 20px); /* Each item takes up ~20% of the row width, accounting for gaps */
    box-sizing: border-box;
}


.blogItem {
    background-color:transparent;
    padding: 20px;
    text-align: center;
    border-radius: 8px;
    flex: 1 1 calc(33% - 20px); /* Each item takes up ~20% of the row width, accounting for gaps */
    box-sizing: border-box;
}
.blogItem img{width: 100%; height: auto;}


/* Media Query for Medium Screens */
@media screen and (max-width: 1024px) {

    .item { flex: 1 1 calc(33.33% - 20px); }

}



/* Media Query for Small Screens */
@media screen and (max-width: 768px) {

    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    h3 {
        font-size: 1.75rem;
    }

    h4 {
        font-size: 1.5rem;
    }

    h5 {
        font-size: 1.25rem;
    }

    h6 {
        font-size: 1rem;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: #1F2937;
        position: absolute;
        top: 60px;
        left: 0;
        padding: 10px 0;
        text-align: center;
    }
    .nav-links.active {display: flex;}
    .nav-links li {margin: 10px 0; }
    .hamburger {display: block;}

    .item { flex: 1 1 calc(50% - 20px); }
    .serviceItem { flex: 1 1 calc(50% - 20px); }
    .blogItem { flex: 1 1 calc(50% - 20px); }

    .accordion-header {font-size: 16px;}
    .accordion-content {font-size: 14px;}


}



/* Media Query for Extra Small Screens */
@media screen and (max-width: 480px) {

    h1 {
        font-size: 1.8rem; /* Smaller size for mobile */
    }

    h2 {
        font-size: 1.6rem;
    }

    h3 {
        font-size: 1.4rem;
    }

    h4 {
        font-size: 1.2rem;
    }

    h5 {
        font-size: 1rem;
    }

    h6 {
        font-size: 0.9rem;
    }

    .item {flex: 1 1 100%;}
    .serviceItem {flex: 1 1 100%;}
    .blogItem {flex: 1 1 100%;}

    .callNow{position: fixed; bottom: 0; background-color: #b8184d; color: #fff; padding: 4px;}
    .whatsapp{position: fixed; bottom: 0; background-color: #029c75; color: #fff; padding: 4px;}

    
/* Position the buttons fixed at the bottom */
.fixed-buttons {
    position: fixed;
    bottom: 10px;  /* Space from the bottom */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;  /* Keep the buttons on top */
    display: flex;
    gap: 15px;
}

/* Style for individual buttons */
.call-button,
.whatsapp-button {
    display: block; text-align: center; line-height: 50px;
    width: 150px;  /* Adjust size as necessary */
    height: 50px; /* Adjust size as necessary */
}

.call-button img,
.whatsapp-button img {
    width: 100%;
    height: 100%;
}

/* Add background color for button */
.call-button {
    background-color: #990000; /* WhatsApp color */ color: #fff;
    /* border-radius: 50%; */
}

.whatsapp-button {
    background-color: #023b35; /* WhatsApp green color */ color: #fff;
    /* border-radius: 50%; */
}


}