custom footer chatgpt css

/* Style the footer container */

#custom-footer {

    background-color: #fff; /* White background */

    padding: 1px;

    width: 1200px;

    max-width: 90%;

    margin: 0 auto;

}

/* Reduce the margin bottom for <h3> elements within .footer-column */

.footer-column h3 {

    margin-bottom: 5px; /* Adjust the margin as needed */

}

/* Style the black line at the top */

.footer-top-line {

    height: 1px;

    background-color: #333; /* Black color for the line */

	margin-bottom: 15px;

}

/* Style the footer columns */

.footer-columns {

    display: flex;

    flex-wrap: wrap;

    gap: 20px;

}

/* Style individual footer columns */

.footer-column {

    flex: 1;

}

/* Increase the width of the first column */

.footer-columns .footer-column:first-child {

    flex: 1.8; /* Adjust the flex value to increase the width */

}

/* Style social media icons */

.social-icons {

    margin-top: 5px;

}

/* Initial style for social media icons */

.social-icons a {

    display: inline-block;

    margin-right: 10px; /* Adjust spacing between icons */

    font-size: 24px;

    color: #333; /* Icon color */

    text-decoration: none;

    transition: transform 0.3s ease; /* Add a smooth transition effect */

}

/* Hover animation */

.social-icons a:hover {

    transform: scale(1.2); /* Increase the size of the icon on hover */

    color: #0073e6; /* Change the icon color on hover */

}

/* Style footer links and contact information */

.footer-column ul {

    list-style: inside;

	margin-top: 0;

    padding: 0;

}

.footer-column li {

    margin-bottom: 2px;

}

/* Adjust spacing and fonts as needed */

/* New CSS for mobile view */

@media (max-width: 768px) {

	/* Increase the width of the first column */

	.footer-columns .footer-column:first-child {

		flex: 100%; /* Adjust the flex value to increase the width */

	}

	.footer-column:nth-child(2) {

		flex: 28%; /* Adjust the flex value to increase the width */

	}

	.footer-column:nth-child(3) {

		flex: 55%; /* Adjust the flex value to increase the width */

		margin-right: 0; 

		margin-left: 0; 

	}

}