code for aditional css
/* --- Premium Footer CSS --- */
/* Footer Main Container */
/* --- Premium Footer CSS Background Fix --- */
.site-footer,
.footer-widgets-container,
.site-info {
background-color: #333333 !important; /* Isse white background force-remove ho jayega */
color: #f0f0f0 !important;
border-top: none !important;
}
.site-footer {
padding: 60px 0 30px;
font-family: Arial, sans-serif;
}
background-color: #333333; /* Dark Grey Background for premium feel */
color: #f0f0f0; /* Light text */
padding: 60px 0 30px; /* Top/Bottom padding */
font-family: Arial, sans-serif;
}
/* Footer Columns - Flex Layout */
.site-footer .footer-widgets {
display: flex;
justify-content: space-around;
flex-wrap: wrap; /* Stack columns on mobile */
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.footer-column {
flex: 1 1 23%; /* Approx 4 columns */
margin-bottom: 30px;
min-width: 250px; /* Prevents columns from becoming too narrow */
}
/* Footer Section Headings */
.footer-heading {
font-size: 18px;
font-weight: 700;
color: #ffffff;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 1px;
}
.footer-subheading {
color: #cccccc;
font-size: 16px;
margin-bottom: 10px;
}
/* Brand Logo (Refined from header logo design) */
.footer-logo {
display: flex;
align-items: center;
gap: 4px; /* Space between words */
font-weight: bold;
font-size: 28px; /* Slightly larger for footer main column */
margin-bottom: 20px;
}
.brand-text1 {
color: #ffffff; /* White in footer */
}
.brand-text2.tak-box {
background-color: #d81b60; /* Dark pinkish-red background (Tak color) */
color: #ffffff; /* White text within the pink box */
padding: 2px 8px; /* Correct padding */
border-radius: 4px; /* Proper rounded corners */
font-size: 20px; /* Refined size within box */
}
/* Paragraph Text in Footer */
.footer-about p {
font-size: 14px;
line-height: 1.6;
color: #cccccc;
}
/* Footer Unordered Lists (Links & Categories) */
.site-footer .footer-column ul {
list-style: none;
padding: 0;
margin: 0;
}
.site-footer .footer-column ul li {
margin-bottom: 10px;
}
.site-footer .footer-column ul li a {
text-decoration: none;
color: #cccccc;
font-size: 14px;
transition: color 0.3s ease;
}
.site-footer .footer-column ul li a:hover {
color: #d81b60; /* Highlight color on hover */
}
/* Social Media Icons */
.social-icons {
display: flex;
gap: 15px;
font-size: 22px;
margin-bottom: 20px;
}
.social-icons a {
color: #cccccc;
text-decoration: none;
transition: transform 0.3s, color 0.3s;
}
.social-icons a:hover {
transform: scale(1.1); /* Slight grow on hover */
color: #ffffff;
}
/* Simple Icon styling (use standard class names) */
.social-icons .fa-facebook:before { content: "\f09a"; }
.social-icons .fa-twitter:before { content: "\f099"; }
.social-icons .fa-instagram:before { content: "\f16d"; }
.social-icons .fa-youtube-play:before { content: "\f167"; }
/* Newsletter Form styling */
.newsletter-input {
width: 100%;
padding: 10px;
border: 1px solid #444;
background-color: #222;
color: #fff;
border-radius: 4px;
margin-bottom: 10px;
font-size: 14px;
}
.newsletter-submit {
width: 100%;
padding: 10px;
background-color: #d81b60; /* Matching highlight */
color: #ffffff;
border: none;
border-radius: 4px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s ease;
font-size: 14px;
}
.newsletter-submit:hover {
background-color: #b31450; /* Slightly darker pink on hover */
}
/* --- Copyright Section Update (Cleaner and Seperate) --- */
.site-footer .footer-bottom-bar {
text-align: center;
border-top: 1px solid #444; /* Seprator line */
padding-top: 25px;
margin-top: 30px;
font-size: 13px;
color: #999;
}
.footer-bottom-bar p {
margin: 0;
}
.footer-bottom-links {
margin-top: 5px;
}
.footer-bottom-links a {
text-decoration: none;
color: #999;
margin: 0 5px;
transition: color 0.3s;
}
.footer-bottom-links a:hover {
color: #ffffff;
}
/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
.site-footer .footer-widgets {
flex-direction: column; /* Stack columns on mobile */
align-items: center;
text-align: center;
}
.footer-column {
flex: 1 1 100%;
margin-bottom: 30px;
min-width: 0;
}
.footer-logo {
justify-content: center; /* Center logo on mobile */
}
.social-icons {
justify-content: center;
}
}
0 टिप्पणियाँ