/* General body styling */ body { font-family: 'Instrument Serif', serif; background-color: #f7f7f7; color: #333; margin: 0; padding: 0; } /* Hero Section */ #hero { background: linear-gradient(to right, #ff7e5f, #feb47b); /* Warm gradient from pink to orange */ color: white; padding: 80px 0; text-align: center; } #hero h1 { font-size: 3rem; font-weight: 600; } #hero .lead { font-size: 1.3rem; margin-top: 20px; font-weight: 400; color: #333; /* Slightly dark color for better contrast */ } /* About Section */ #about { background-color: #f9f9f9; padding: 60px 0; text-align: center; } #about .section-title { font-size: 2rem; color: #ff6f61; /* Warm coral */ margin-bottom: 20px; } #about p { font-size: 1.1rem; line-height: 1.8; color: #333; /* Darker color for the text */ } #about p strong { color: #6a1b9a; /* Purple for strong highlighted words */ } /* Certifications Section */ #certifications { background: #f0f8ff; /* Light Sky Blue */ padding: 60px 0; } #certifications .section-title { font-size: 2rem; color: #007bff; /* Bright blue */ text-align: center; margin-bottom: 30px; } #certifications .card { border: 1px solid #ddd; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; background-color: #ffffff; border-radius: 8px; margin-bottom: 20px; } #certifications .card:hover { transform: translateY(-10px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); } #certifications .card-body { padding: 20px; } #certifications .card-title { font-size: 1.25rem; color: #333; font-weight: 600; margin-bottom: 15px; } #certifications .card-text { font-size: 1rem; color: #777; } #certifications a { text-decoration: none; /* Remove underline from the links */ } #certifications a:hover { text-decoration: underline; /* Add underline on hover for better interaction */ } /* Adjust text size for smaller screens */ @media (max-width: 767px) { #certifications .card-title { font-size: 1.1rem; } #certifications .card-text { font-size: 0.9rem; } } /* Skills Section */ #skills { background: #ffecd2; /* Soft peach color */ padding: 60px 0; } #skills .section-title { font-size: 2rem; color: #6a1b9a; /* Purple color for the title */ margin-bottom: 30px; text-align: center; } #skills .carousel-item img { max-width: 120px; margin: 10px; transition: transform 0.3s ease-in-out; /* Smooth scaling effect */ } #skills .carousel-item img:hover { transform: scale(1.1); /* Slight zoom on hover */ } #skills .carousel-inner { padding: 20px 0; /* Space between carousel items */ } #skills .carousel-control-prev-icon, #skills .carousel-control-next-icon { background-color: #6a1b9a; /* Uniform purple color for carousel controls */ } /* Optional: adjust the size of the carousel control icons */ .carousel-control-prev-icon, .carousel-control-next-icon { background-size: 30px; /* Adjust size of control icons */ } /* Contact Section */ #contact { background-color: #f9f9f9; /* Light background */ padding: 60px 0; } #contact .section-title { font-size: 2rem; color: #6a1b9a; /* Purple color for the title */ margin-bottom: 30px; text-align: center; } .contact-form { background-color: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } .contact-form .form-label { color: #333; font-weight: 600; } .contact-form .form-control { border-radius: 8px; border: 1px solid #ddd; padding: 10px; font-size: 1rem; margin-bottom: 15px; } .contact-form .form-control:focus { border-color: #6a1b9a; /* Focus color */ box-shadow: 0 0 8px rgba(106, 27, 154, 0.4); /* Purple glow on focus */ } .contact-form button { background-color: #6a1b9a; color: white; border: none; padding: 12px 30px; font-size: 1rem; border-radius: 8px; cursor: pointer; transition: background-color 0.3s ease; } .contact-form button:hover { background-color: #4a148c; /* Darker purple on hover */ } /* Social Media Section */ #social { background-color: #fff; padding: 40px 0; } #social h3 { font-size: 1.8rem; color: #333; margin-bottom: 20px; } .social-icons a { font-size: 2rem; color: #6a1b9a; margin: 0 15px; transition: color 0.3s ease; } .social-icons a:hover { color: #4a148c; /* Darker purple on hover */ } /* Responsive Adjustments */ @media (max-width: 767px) { .contact-form { padding: 20px; } .contact-form .form-control { font-size: 0.9rem; } .contact-form button { font-size: 0.9rem; } #social h3 { font-size: 1.5rem; } } /* Footer Styling */ footer { background-color: #333; color: white; padding: 20px 0; text-align: center; } footer p { margin: 0; } footer #year { font-weight: bold; }