/* -------------------------------------------------- 1. Font Awesome (move this into your ideally) -------------------------------------------------- */ @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css'); /* -------------------------------------------------- 2. Global & Reset -------------------------------------------------- */ html { width: 100%; height: 100%; box-sizing: border-box; overflow-x: hidden; } body { background-color: beige !important; width: 100%; height: 100%; overflow-x: hidden; margin: 0; padding: 0; } *, *::before, *::after { box-sizing: inherit; } /* -------------------------------------------------- 3. Header Top (Call/WhatsApp & About Us + Icons) -------------------------------------------------- */ /* General Layout */ .header-top, .custom-header, .advert-container { width: 100%; max-width: 100%; overflow-x: hidden; padding: 0.5rem 10px; margin: 0 auto; } .header-top { margin-top: 40px; } .custom-header { margin-top: 5px; } .header-top .row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .header-link { border: 1px solid red; padding: 5px 10px; border-radius: 5px; display: inline-flex; white-space: nowrap; justify-content: center; align-items: center; text-align: center; } .header-link i { margin-right: 5px; /* for phone icon */ } .header-top .header-link:hover h4 { color: red; } .social-icons { display: flex; flex-wrap: wrap; } .social-icons a { font-size: 1.2rem; color: #007BFF; transition: color .3s ease; margin-left: .5rem; border: 1px solid red; display: inline-flex; align-items: center; justify-content: center; } .social-icons a:hover { color: red; } @media (max-width: 600px) { .header-top .row { display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; /* FORCE single line */ } /* Shrink CALL and ABOUT US buttons */ .header-link { padding: 3px 6px; font-size: 0.75rem; margin-right: 5px; } .header-link i { margin-right: 3px; font-size: 0.85rem; } /* Shrink ABOUT US link */ .about-social-group .header-link { padding: 3px 6px; font-size: 0.75rem; margin-right: 5px; } /* Shrink social icons and spacing */ .social-icons { display: flex; flex-wrap: nowrap; gap: 3px; } .social-icons a { font-size: 1rem; width: 25px; height: 25px; padding: 3px; margin-left: 0; /* remove left margin */ border-radius: 3px; } .social-icons a i { margin: auto; font-size: 0.9rem; } } /* -------------------------------------------------- 4. Advert Container -------------------------------------------------- */ .advert-container { display: flex; align-items: center; justify-content: center; height: 120px; overflow: hidden; } .gallery-item img { width: auto; max-width: 350px; height: 100px; object-fit: contain; } /* Date and time display */ #currentDate, #currentTime { background-color: #007BFF; color: #fff; display: inline-block; padding: .5rem 1rem; margin-bottom: .5rem; border: 1px solid red; } @media (max-width: 600px) { .advert-container { display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: nowrap; padding: 0.5rem; gap: 10px; overflow-x: auto; /* Allows side scrolling if very tight */ } .advert-container-left, .advert-container-right { flex: 0 0 auto; max-width: 35%; } .advert-container-middle { text-align: center; } .gallery-item img { width: 100%; max-height: 80px; object-fit: contain; } #currentDate, #currentTime { display: block; /* Block-like but background hugs text */ background-color: #007BFF; color: #FFF; padding: 2px 6px; margin: 2px 0; /* small vertical space between date & time */ font-size: 14px; white-space: nowrap; border-radius: 4px; } } /* -------------------------------------------------- 5. Navbar -------------------------------------------------- */ .navbar { margin-top: 0.5px; margin-bottom: 0; font-weight: bold; padding: 10px; margin: 20px 0; background-color: #007BFF; } .navbar-nav .nav-link { padding: 0px; font-size: 1rem; color: #fff !important; } .navbar-nav .nav-link:hover { color: red !important; } .navbar-toggler { display: none; /* Initially hidden */ border: 2px solid #FFF; /* White border for the toggler button */ background-color: black; /* Black background for the button */ color: #FFF; /* White text color */ } @media (max-width: 992px) { .navbar { background-color: #fff; } .navbar .nav-link { color: #000 !important; } .navbar-toggler { display: flex; justify-content: center; align-items: center; width: 70px; padding: 0px; position: fixed; top: 10px; right: 10px; z-index: 1000; } .navbar-toggler:hover { background-color: red; } } /* -------------------------------------------------- 6. Search Box -------------------------------------------------- */ .search-box { position: relative; z-index: 10; width: 100%; margin: 1rem 0; } /* -------------------------------------------------- 7. Back to Top -------------------------------------------------- */ .back-to-top-container { position: fixed; bottom: 20px; right: 20px; z-index: 999; } .back-to-top { display: none; background: #000; color: #fff; padding: 10px 12px; border-radius: 50%; transition: background-color .3s ease; } .back-to-top:hover { background-color: #444; } .back-to-top i { font-size: 1.5rem; } /* -------------------------------------------------- 8. Cards & Galleries -------------------------------------------------- */ .card-img-top { width: 100%; height: 200px; object-fit: cover; } .breadcrumb { width: 100%; /* Full width of the container */ max-width: 500px; /* Maximum width */ height: auto; /* Adjust height based on content */ margin: 50px auto; /* Center align and spacing */ display: flex; align-items: center; justify-content: center; } .breadcrumb img { width: 100%; /* Make the image fit within the breadcrumb */ height: auto; /* Maintain aspect ratio */ } /* -------------------------------------------------- 9. Post Details (Single Post Page) -------------------------------------------------- */ .post-details { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: .9rem; } .post-details .author-info, .visit-count { white-space: nowrap; margin: 0; } .post-details .additional-info { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; } .share-links { display: flex; gap: .5rem; margin: 0; font-size: .9rem; } .share-links a { text-decoration: none; font-weight: bold; transition: opacity .2s ease; } .share-links a:hover { opacity: .7; } @media (max-width: 768px) { .post-details { flex-direction: column; align-items: flex-start; } } /* -------------------------------------------------- 10. Comments & Replies -------------------------------------------------- */ .reply-box { margin-top: .5rem; } textarea { width: 100%; min-height: 50px; max-height: 150px; resize: both; padding: .5rem; border-radius: 4px; border: 1px solid #ccc; } button, .reply-button { margin-top: .5rem; padding: .5rem 1rem; background-color: #007BFF; color: #fff; border: none; border-radius: 8px; cursor: pointer; transition: background-color .3s ease; } button:hover, .reply-button:hover { background-color: #0056b3; } .comment-reply-wrapper { margin-top: .5rem; } /* -------------------------------------------------- 11. Related Posts -------------------------------------------------- */ .related-posts .row { gap: 1rem; } /* -------------------------------------------------- 12. Google Translate -------------------------------------------------- */ #google_translate_element { padding-top: 13px; position: absolute; margin-top: 20px; right: 10px; } /* -------------------------------------------------- 14. Responsive adjustments -------------------------------------------------- */ @media (max-width: 768px) { .advert-container { height: 80px; } .gallery-item img { height: 60px; max-width: 200px; } .custom-header, .header-top { flex-direction: column; align-items: flex-start; } } /* Small screen navbar styles */ @media screen and (max-width: 992px) { /* Style for the navbar-toggler button */ .navbar-toggler { border: 2px solid #FFF; /* White border */ border-radius: 5px; /* Rounded corners */ background-color: #2099de; /* Background color */ color: #FFF; /* Text color */ display: flex; /* Enable flexbox */ justify-content: center; /* Center contents horizontally */ align-items: center; /* Vertically center contents */ width: 70px; padding: 5px 10px; /* Adjust padding for smaller look */ position: fixed; /* Fixed position */ top: 40px; /* Space from the bottom */ right: 10px; /* Space from the left */ text-align: center; /* Ensure text is center-aligned */ z-index: 1000; /* Ensure it stays on top of other elements */ } .navbar-toggler:hover { background-color: red; /* Light background color on hover */ } .category-menu-container, .search-box { display: block; } .category-menu-container:hover { display: block; /* Keep the category menu container visible when hovered */ } } .sidebar-card ul li img { border: 1px solid red !important; border-radius: 4px !important; } .sidebar-card ul li a { font-size: 14px; line-height: 1.2; } .sidebar-card h5 { font-size: 16px; margin-bottom: 0; }