* { 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 */
a{text-decoration: none; color: #9b2121; font-weight: 700;}
img{width: 100%; height: auto; margin: 0px auto;}

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


/* General Style for h1 to h6 headings */
h1 {font-size: 2rem; font-weight: bold; color: #9b2121; margin: 20px 0px; }
h2 {font-size: 1.5rem; font-weight: bold; color: #9b2121; margin: 18px 0px;}
h3 {font-size: 1.25rem; font-weight: bold; color: #9b2121; margin: 16px 0px;}
h4 {font-size: 1rem; font-weight: normal; color: #9b2121; margin: 14px 0px;}
h5 {font-size: 1rem; font-weight: bold; color: #9b2121; margin: 12px 0px;}
h6 {font-size: 1rem; font-weight: bold; color: #9b2121; margin: 10px 0px;}


table { width: 100%; border-collapse: collapse;}
th, td { padding: 12px; text-align: left; border: 1px solid #ddd;}
th { background-color: #f4f4f4; font-weight: bold;}
/* Add hover effect for interactivity */
tr:hover { background-color: #f1f1f1; }




.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;}

.pt-1{padding: 4px 0px 0px 0px;}
.pt-2{padding: 8px 0px 0px 0px;}
.pt-3{padding: 16px 0px 0px 0px;}
.pt-4{padding: 32px 0px 0px 0px;}
.pt-5{padding: 64px 0px 0px 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;}

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

.justify-content-start{justify-content: flex-start; display: flex;}
.justify-content-center{justify-content: center; display: flex;}
.justify-content-end{justify-content: flex-end; display: flex;}

.align-items-start{align-items: flex-start; display: flex;}
.align-items-center{align-items: center; display: flex;}
.align-items-end{align-items: flex-end; display: flex;}

.text-white{color: #fff; font-size: medium;}
.text-center{text-align: center; margin: 0px auto;}
.text-center p{margin: 0px auto; text-align: center; margin: 10px 0px; font-size: 16px;}

.space-between{ justify-content: space-between;}






/* Row styles */
.row{display: flex; flex-wrap: wrap; width: 100%;
    /* padding: 20px; */
    /* gap: 20px; */
    max-width: 1400px;}

[class*="col-"] {
    padding: 10px;
    /* background-color: #4CAF50; */
    /* color: white; */
    text-align: center;
    border-radius: 5px;
    /* margin: 5px; */
  }

/* Column styles */
.col-1{background-color:transparent; flex: 0 0 8.33%;}
.col-2{background-color:transparent; flex: 0 0 16.66%;}
.col-3{background-color:transparent; flex: 0 0 25%;}
.col-4{background-color:transparent; flex: 0 0 33.33%;}
.col-5{background-color:transparent; flex: 0 0 41.66%;}
.col-6{background-color:transparent; flex: 0 0 50%;}
.col-7{background-color:transparent; flex: 0 0 58.33%;}
.col-8{background-color:transparent; flex: 0 0 66.66%;}
.col-9{background-color:transparent; flex: 0 0 75%;}
.col-10{background-color:transparent; flex: 0 0 83.33%;}
.col-11{background-color:transparent; flex: 0 0 91.66%;}
.col-12{background-color:transparent; flex: 0 0 100%;}

/* Optional: Styling for alternate columns */
[class*="col-"]:nth-child(even) { /* background-color: #8BC34A; */ }




/* Base Common classes for all screen sizes */

.mobileshow{display:none;}
.desktopshow{display:block;}



header {background-color: #1F2937; padding: 10px; }
.navbar { display: flex; 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;}


.bg1{background-color: #9b2121;}
.bg2{background-color: #1F2937;}
.bg3{background-color: #eeedec;}

.border{border: #fff 1px solid; padding: 5px;}
.borderpink{border: #9b2121 1px solid; padding: 20px; border-radius: 10px;}
.borderpink img{border-radius: 20px;}
.borderdark{border: #1F2937 1px solid; padding: 5px;}
.bordergolden{border: #d18803 1px solid; padding: 5px;}

.textwaring{color: #f38c06;}

.container-fluid{width: 100%;margin: 0 auto;}

.container {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    padding: 20px;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}


.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 */
}

.content img{float: left; width: 280px; /* or float: right; */
    margin-right: 15px; /* Adds space on the right side of the image */
    margin-bottom: 10px; /* Adds space below the image */}
    .content p{float: left;}


/* 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;}


.callnow{background-color: #4CAF50; color: #fff; max-width: 150px; padding: 10px 20px; border-radius: 20px;}
.whatsapp{background-color: #1F2937; color: #fff; max-width: 150px; padding: 10px 20px; border-radius: 20px;}


.price {
    background-color:transparent;
    padding: 20px;
    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;
}
.price ul{padding: 0; margin: 0;}
.price ul li{text-decoration: none; list-style-type: none; border-bottom: #E11D48 1px solid; padding-bottom: 0px; line-height: 45px;}
.price img{width: 15px; height: auto; margin-right: 20px !important; line-height: 45px;}


.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;}



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

    .price { flex: 1 1 calc(50% - 20px); }

    .mobileshow{display:block;}
    .desktopshow{display:none;}

    .navbar { display: flex; justify-content: space-between; align-items: center; max-width: 1400px; margin: 0 auto;}
    .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;}


}


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

    .my-5{margin: 10px 0px;}

    .mobileshow{display:block;}
    .desktopshow{display:none;}

    .container{padding: 10px;}
    .containerInner{padding: 10px;}

    
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
        flex: 1 1 calc(100% - 10px);
    }

    [class*="col-"] { padding: 10px 0px; }

    .price {flex: 1 1 100%;}

    h1 {font-size: 1.8rem;}
    h2 {font-size: 1.6rem;}
    h3 {font-size: 1.4rem;}
    h4 {font-size: 1.2rem;}
    h5 {font-size: 1rem;}
    h6 { font-size: 0.9rem;}

    
    table { border: 0; }
    table thead { display: none; }
    table, table tbody, table tr, table td { display: block; width: 100%; }
    table tr { margin-bottom: 10px; }
    table td { text-align: left; padding-left: 10%; position: relative; }
    table td::before { content: attr(data-label); position: absolute; left: 10px; top: 10px; font-weight: bold; }

        
    .callnow{max-width: 110px; padding: 10px 18px;}
    .whatsapp{max-width: 110px; padding: 10px 18px;}

    .borderpink {padding: 10px;}



}