/* Importing Google Fonts */
@import url('https://fonts.googleapis.com/css?family=Roboto:wght@100;300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap');

/* Reset CSS Resets default browser styles for consistency */
* {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    box-sizing: border-box;
    outline: none;
    border: none;
    text-decoration: none;
    text-transform: capitalize;
}

/* Global HTML styles */
html {
    font-size: 95.5%; /* Set base font size */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    scroll-padding-top: 9rem; /* Set top padding for smooth scrolling */
    scroll-behavior: smooth; /* Enable smooth scrolling */
}

/* Custom scrollbar styles */
html::-webkit-scrollbar {
    width: .8rem; /* Set scrollbar width */
}

html::-webkit-scrollbar-track {
    background: transparent; /* Set scrollbar track background */
}

html::-webkit-scrollbar-thumb {
    background: #fff; /* Set scrollbar thumb color */
    border-radius: 5rem; /* Round the scrollbar thumb */
}

/* Background Image for Body */
body {
    background-image: url(Images/cup-coffee-with-drawing-foam.jpg); /* Set background image for body */
}

/* Navigation Bar */
.navbar {
    width: 85%; /* Set navbar width */
    margin: auto; /* Center navbar */
    padding: 35px 0; /* Add vertical padding */
    display: flex; /* Use flexbox layout */
    align-items: center; /* Center items vertically */
    justify-content: space-between; /* Space items out horizontally */
}

.icon img {
    float: left; /* Float icon to the left */
    background-color: rgba(8, 4, 0, 0.8); /* Set background color with transparency */
    border-radius: 50%; /* Make icon circular */
}

/* Logo */
.logo {
    color: white; /* Set logo text color to white */
    font-size: 30px; /* Set font size for the logo */
    font-family: 'Caveat', cursive; /* Use 'Caveat' font */
    padding-left: 10px; /* Add padding to the left of the logo */
    float: left; /* Float the logo to the left */
    padding-top: 10px; /* Add padding to the top of the logo */
}

/* Navigation Links */
.navbar ul li {
    list-style: none; /* Remove default list style */
    display: inline-block; /* Display list items inline */
    margin: 0 20px; /* Add horizontal margin */
    position: relative; /* Set position to relative */
}

/* Navigation Link Anchor */
.navbar ul li a {
    text-decoration: none; /* Remove underline */
    color: white; /* Set text color to white */
    text-transform: uppercase; /* Transform text to uppercase */
    font-weight: bold; /* Make text bold */
    font-family: Arial, Helvetica, sans-serif; /* Use Arial or Helvetica font */
    font-size: 1.2rem; /* Set font size */
}

/* Navigation Link Hover Animation */
.navbar ul li::after {
    content: ''; /* Add empty content */
    height: 3px; /* Set height of the underline */
    width: 0%; /* Set initial width to 0 */
    background: white; /* Set background color to white */
    position: absolute; /* Position absolutely */
    left: 0; /* Align to the left */
    bottom: -10px; /* Position below text */
    transition: 0.5s; /* Add transition effect */
}

.navbar ul li:hover::after {
    width: 100%; /* Expand underline on hover */
}

/* About Section */
#about {
    width: 100%; /* Set width to 100% */
    height: 100%; /* Set height to 100% */
    padding: 70px 0; /* Add vertical padding */
}

/* Heading in About Section */
.heading {
    text-align: center; /* Center align text */
    margin-bottom: 50px; /* Add bottom margin */
    color: #b2744c; /* Set text color */
    font-size: 80px; /* Set font size */
    font-weight: bold; /* Make text bold */
    font-family: 'Caveat', cursive; /* Use 'Caveat' font */
}

.heading span {
    color: white; /* Set span text color to white */
    font-weight: bold; /* Make text bold */
    font-family: 'Caveat', cursive; /* Use 'Caveat' font */
    font-size: 80px; /* Set font size */
}

/* About Section Content */
.about-content {
    display: flex; /* Use flexbox layout */
    align-items: center; /* Align items vertically */
    justify-content: center; /* Center items horizontally */
    gap: 20px; /* Add gap between items */
    flex-wrap: wrap; /* Allow items to wrap */
}

/* Image Container in About Section */
.image-container img {
    border-radius: 30px; /* Round the edges of the image */
    width: 700px; /* Set image width */
    height: 600px; /* Set image height */
}

/* Text Container in About Section */
.text-container {
    max-width: 600px; /* Set max width */
}

.text-container h3 {
    font-size: 40px; /* Set font size */
    margin-bottom: 20px; /* Add bottom margin */
    font-family: 'Caveat', cursive; /* Use 'Caveat' font */
    color: #b2744c; /* Set text color */
}

.text-container p {
    font-size: 22px; /* Set font size */
    font-family: 'Caveat', cursive; /* Use 'Caveat' font */
    color: whitesmoke; /* Set text color */
}

/* About Section Button */
#about-btn {
    width: 200px; /* Set button width */
    height: 36px; /* Set button height */
    background: transparent; /* Set background to transparent */
    border: 2px solid #b2744c; /* Set border color */
    color: #b2744c; /* Set text color */
    border-radius: 5px; /* Round button edges */
    font-weight: bold; /* Make text bold */
    cursor: pointer; /* Change cursor to pointer on hover */
}

#about-btn:hover {
    background-color: #b2744c; /* Change background color on hover */
    color: white; /* Change text color on hover */
}

/* Responsive Design for About Section */
@media (max-width: 982px) {
    .about-content {
        flex-direction: column; /* Stack items vertically */
        text-align: center; /* Center align text */
    }

    #about p {
        font-size: 8px; /* Adjust font size */
    }
}

@media (max-width: 766px) {
    #about p {
        font-size: 15px; /* Adjust font size */
    }
}

/* Footer Styles */
.footer {
    padding: 0px; /* Remove padding */
    margin: 0; /* Remove margin */
    box-sizing: border-box; /* Use border-box sizing */
    background-color: black; /* Set background color to black */
    color: white; /* Set text color to white */
}

/* Footer Container */
.footer-container {
    width: 100%; /* Set width to 100% */
    padding: 60px 30px 20px; /* Add padding */
}

/* Footer Logo */
.footer-logo {
    text-align: center; /* Center align text */
    margin-bottom: 20px; /* Add bottom margin */
}

/* Footer Links */
.footer-links {
    margin: 30px 0; /* Add vertical margin */
    text-align: center; /* Center align text */
}

/* Footer Links Heading */
.footer-links h1 {
    font-size: 1.5em; /* Set font size */
    margin-bottom: 20px; /* Add bottom margin */
}

/* Footer Links List */
.footer-links ul {
    display: flex; /* Use flexbox layout */
    justify-content: center; /* Center align items */
    flex-wrap: wrap; /* Allow items to wrap */
    list-style-type: none; /* Remove default list style */
    padding: 0; /* Remove padding */
}

/* Footer Links List Items */
.footer-links ul li {
    margin: 10px; /* Add margin */
}

/* Footer Links Anchor */
.footer-links ul li a {
    color: white; /* Set text color to white */
    text-decoration: none; /* Remove underline */
    font-size: 1.3em; /* Set font size */
    opacity: 0.9; /* Set opacity */
    transition: 0.5s; /* Add transition effect */
}

/* Footer Links Hover Effect */
.footer-links ul li a:hover {
    background-color: rgba(8, 4, 0, 0.8); /* Set hover background color */
    transition: 0.5s; /* Add transition effect */
}

.footer-links ul li a:hover i {
    color: white; /* Set icon color on hover */
    transition: 0.5s; /* Add transition effect */
}

/* Social Icons */
.social-icons {
    display: flex; /* Use flexbox layout */
    justify-content: center; /* Center align items */
    margin-top: 20px; /* Add top margin */
}

/* Social Icons Links */
.social-icons a {
    text-decoration: none; /* Remove underline */
    padding: 10px; /* Add padding */
    background-color: white; /* Set background color */
    margin: 10px; /* Add margin */
    border-radius: 50%; /* Round the edges */
    display: flex; /* Use flexbox layout */
    align-items: center; /* Center align items */
    justify-content: center; /* Center align items */
}

/* Social Icons */
.social-icons a i {
    font-size: 2em; /* Set font size */
    color: black; /* Set icon color */
    opacity: 0.9; /* Set opacity */
}

/* Social Icons Hover Effect */
.social-icons a:hover {
    background-color: rgba(8, 4, 0, 0.8); /* Set hover background color */
    transition: 0.5s; /* Add transition effect */
}

.social-icons a:hover i {
    color: white; /* Set icon color on hover */
    transition: 0.5s; /* Add transition effect */
}

/* Responsive Design for Footer Links */
@media (max-width: 700px) {
    .footer-links ul {
        flex-direction: column; /* Stack items vertically */
    }

    .footer-links ul li {
        width: 100%; /* Set width to 100% */
        text-align: center; /* Center align text */
    }
}