/* TemplateMo 584 Pod Talk https://templatemo.com/tm-584-pod-talk */ /*--------------------------------------- CUSTOM PROPERTIES ( VARIABLES ) -----------------------------------------*/ :root { /* New Color Palette: Deep Blue, Soft Teal, and a touch of Coral with Dark Grays */ --primary-color: #364F6B; /* Deep Blue - for main actions, active states */ --secondary-color: #7EC8E3; /* Soft Teal - for accents, hover states */ --accent-color: #FC5185; /* Vibrant Coral - for highlights, strong call-to-actions */ --text-color-dark: #222222; /* Very dark gray for main text */ --text-color-light: #555555; /* Medium gray for secondary text */ --background-light: #F8F9FA; /* Off-white for section backgrounds */ --background-dark: #1A1A1A; /* Near-black for footer and some hero elements */ --white-color: #ffffff; --border-color: #E0E0E0; /* Light gray for borders */ /* Gradient for specific sections (retaining the yellow-pink-black theme for hero) */ --gradient-hero-start: #FFD700; /* Yellow */ --gradient-hero-mid: #FF69B4; /* Hot Pink */ --gradient-hero-end: #1A1A1A; /* Near Black */ /* Font Families: Open Sans for body, Merriweather for titles */ --body-font-family: "Open Sans", sans-serif; --title-font-family: "Merriweather", serif; /* Font Sizes */ --h1-font-size: 64px; --h2-font-size: 52px; --h3-font-size: 38px; --h4-font-size: 32px; --h5-font-size: 26px; --h6-font-size: 20px; --p-font-size: 17px; --menu-font-size: 15px; --copyright-font-size: 14px; /* Border Radii */ --border-radius-large: 50px; /* Slightly less extreme */ --border-radius-medium: 12px; /* Smoother corners */ --border-radius-small: 6px; /* Font Weights */ --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; } /* Add Google Fonts Import - Make sure to update your HTML with these links too! */ /* */ body { background-color: var(--white-color); font-family: var(--body-font-family); line-height: 1.7; /* Increased for better readability */ color: var(--text-color-light); } /*--------------------------------------- TYPOGRAPHY -----------------------------------------*/ h1, h2, h3, h4, h5, h6 { color: var(--text-color-dark); font-family: var(--title-font-family); font-weight: var(--font-weight-bold); line-height: 1.3; } h1 { font-size: var(--h1-font-size); } h2 { font-size: var(--h2-font-size); } h3 { font-size: var(--h3-font-size); } h4 { font-size: var(--h4-font-size); } h5 { font-size: var(--h5-font-size); } h6 { font-size: var(--h6-font-size); } p { color: var(--text-color-light); font-size: var(--p-font-size); font-weight: var(--font-weight-normal); margin-bottom: 1.2rem; /* Slightly more space */ } ul li { color: var(--text-color-light); font-size: var(--p-font-size); font-weight: var(--font-weight-normal); } a, button { touch-action: manipulation; transition: all 0.3s ease-in-out; /* Smoother transitions */ } a { display: inline-block; color: var(--primary-color); text-decoration: none; } a:hover { color: var(--accent-color); /* Hover to vibrant coral */ } b, strong { font-weight: var(--font-weight-bold); } ::selection { background-color: var(--secondary-color); /* Teal selection */ color: var(--white-color); } /*--------------------------------------- SECTION -----------------------------------------*/ .section-title-wrap { position: relative; text-align: center; /* Center the title and line */ } .section-title-wrap::after { content: ""; background: var(--border-color); width: 80%; /* Shorter line */ height: 1px; /* Thinner line */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } .section-title { background: var(--background-light); border-radius: var(--border-radius-medium); /* Use medium radius */ display: inline-block; position: relative; z-index: 2; margin-bottom: 0; padding: 12px 30px; /* More padding */ font-size: var(--h4-font-size); /* Ensure readability */ color: var(--text-color-dark); } .section-padding { padding-top: 120px; padding-bottom: 120px; } main { position: relative; z-index: 1; } .section-bg { background-color: var(--background-light); } /* Background gradient for the first section */ .first-section { background: linear-gradient(135deg, var(--gradient-hero-start) 0%, var(--gradient-hero-mid) 50%, var(--gradient-hero-end) 100%); /* Diagonal gradient */ background-size: 200% 200%; /* For animating gradient */ animation: gradientShift 15s ease infinite alternate; /* Slower, oscillating animation */ position: relative; top: 0; left: 0; padding-top: 180px; /* Adjust for navbar */ padding-bottom: 120px; color: var(--white-color); /* Text should be white on this background */ } @keyframes gradientShift { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } } .first-section h1, .first-section p { color: var(--white-color); } .section-overlay { background-color: transparent; /* Overlay not needed if gradient is direct background */ position: absolute; top: 0; left: 0; pointer-events: none; width: 100%; height: 100%; opacity: 0; /* Make it transparent */ } .section-overlay + .container { position: relative; z-index: 2; } /*--------------------------------------- CUSTOM ICON COLOR -----------------------------------------*/ .custom-icon { color: var(--accent-color); /* Use accent for icons */ } /*--------------------------------------- CUSTOM BUTTON -----------------------------------------*/ .custom-btn { background: var(--primary-color); border: 2px solid var(--primary-color); border-radius: var(--border-radius-large); color: var(--white-color); font-family: var(--body-font-family); /* Use body font for buttons */ font-size: var(--p-font-size); font-weight: var(--font-weight-semibold); line-height: normal; transition: all 0.3s ease-in-out; padding: 12px 28px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Subtle shadow */ } .custom-btn:hover { background: var(--accent-color); /* Accent color on hover */ border-color: var(--accent-color); color: var(--white-color); transform: translateY(-2px); /* Lift effect */ box-shadow: 0 6px 15px rgba(0,0,0,0.2); } .custom-border-btn { background: transparent; border: 2px solid var(--white-color); /* White border for hero button */ color: var(--white-color); } .custom-border-btn:hover { background: var(--white-color); border-color: var(--white-color); color: var(--primary-color); /* Primary color text on white hover */ } .custom-btn-bg-white { border-color: var(--white-color); color: var(--white-color); } /*--------------------------------------- NAVIGATION -----------------------------------------*/ .navbar { background-color: rgba(0, 0, 0, 0.6); /* Slightly transparent dark background */ backdrop-filter: blur(5px); /* Frosted glass effect */ position: fixed; /* Fixed navigation */ top: 0; right: 0; left: 0; z-index: 99; /* Higher z-index for fixed nav */ padding-top: 15px; padding-bottom: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } .navbar .navbar-brand, .navbar .navbar-brand:hover { color: var(--white-color); font-family: var(--title-font-family); /* Use title font for brand */ font-weight: var(--font-weight-bold); } .navbar .logo-image { width: 90px; /* Slightly smaller logo */ } .logo-image { width: 100px; height: auto; } .navbar-brand, .navbar-brand:hover { font-size: var(--h4-font-size); /* Adjusted brand font size */ display: inline-block; } .navbar-brand span { font-family: var(--title-font-family); } .navbar-nav .nav-link { display: inline-block; color: var(--white-color); font-family: var(--body-font-family); /* Use body font for nav links */ font-size: var(--menu-font-size); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: 0.8px; /* More spacing */ position: relative; padding-top: 10px; padding-bottom: 10px; } .navbar-expand-lg .navbar-nav .nav-link { padding-right: 20px; padding-left: 20px; } .navbar-nav .nav-link.active, .navbar-nav .nav-link:hover { color: var(--secondary-color); /* Teal on hover/active */ } .navbar .dropdown-menu { background: var(--white-color); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); /* Slightly stronger shadow */ border: 0; display: inherit; opacity: 0; min-width: 10rem; margin-top: 15px; /* Closer to nav item */ padding: 10px 0; transition: all 0.3s ease-in-out; pointer-events: none; border-radius: var(--border-radius-medium); } .navbar .dropdown-menu::before { content: ""; width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 10px solid var(--white-color); position: absolute; top: -8px; left: 15px; } .navbar .dropdown-item { display: block; /* Make dropdown items block level for full clickable area */ color: var(--text-color-light); font-family: var(--body-font-family); font-size: var(--menu-font-size); font-weight: var(--font-weight-normal); text-transform: none; /* No uppercase for dropdown items */ letter-spacing: 0; padding: 8px 20px; /* Better padding */ } .navbar .dropdown-item.active, .navbar .dropdown-item:active, .navbar .dropdown-item:focus, .navbar .dropdown-item:hover { background: var(--background-light); /* Light background on hover */ color: var(--primary-color); /* Deep blue text on hover */ } .navbar .dropdown-toggle::after { content: "\f282"; display: inline-block; font-family: bootstrap-icons !important; font-size: var(--menu-font-size); font-style: normal; font-weight: normal !important; font-variant: normal; text-transform: none; line-height: 1; vertical-align: -0.125em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; left: 2px; border: 0; } @media screen and (min-width: 992px) { .navbar .dropdown:hover .dropdown-menu { opacity: 1; margin-top: 0; pointer-events: auto; } } .navbar .custom-border-btn { border-color: var(--secondary-color); /* Teal border */ color: var(--secondary-color); /* Teal text */ } .navbar .custom-border-btn:hover { background: var(--secondary-color); border-color: transparent; color: var(--white-color); } .navbar-toggler { border: 0; padding: 0; cursor: pointer; margin: 0; width: 30px; height: 35px; outline: none; } .navbar-toggler:focus { outline: none; box-shadow: none; } .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon { background: transparent; } .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before, .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after { transition: top 300ms 50ms ease, -webkit-transform 300ms 350ms ease; transition: top 300ms 50ms ease, transform 300ms 350ms ease; transition: top 300ms 50ms ease, transform 300ms 350ms ease, -webkit-transform 300ms 350ms ease; top: 0; } .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before { transform: rotate(45deg); } .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after { transform: rotate(-45deg); } .navbar-toggler .navbar-toggler-icon { background: var(--white-color); transition: background 10ms 300ms ease; display: block; width: 30px; height: 2px; position: relative; } .navbar-toggler .navbar-toggler-icon:before, .navbar-toggler .navbar-toggler-icon:after { transition: top 300ms 350ms ease, -webkit-transform 300ms 50ms ease; transition: top 300ms 350ms ease, transform 300ms 50ms ease; transition: top 300ms 350ms ease, transform 300ms 50ms ease, -webkit-transform 300ms 50ms ease; position: absolute; right: 0; left: 0; background: var(--white-color); width: 30px; height: 2px; content: ""; } .navbar-toggler .navbar-toggler-icon::before { top: -8px; } .navbar-toggler .navbar-toggler-icon::after { top: 8px; } /*--------------------------------------- CAROUSEL -----------------------------------------*/ /* The first-section now handles its own gradient background directly */ .first-section { background-image: none; /* Remove previous image */ background: linear-gradient(135deg, var(--gradient-hero-start) 0%, var(--gradient-hero-mid) 50%, var(--gradient-hero-end) 100%); /* Diagonal gradient */ background-size: 200% 200%; animation: gradientShift 15s ease infinite alternate; padding-top: 180px; /* Adjusted for fixed navbar */ padding-bottom: 120px; color: var(--white-color); } .owl-carousel { text-align: center; } .owl-carousel-image { display: block; border-radius: var(--border-radius-medium); /* Apply corner radius to images */ } .owl-carousel .owl-item .owl-carousel-verified-image { display: inline-block; width: 25px; /* Slightly smaller verified icon */ height: auto; position: relative; right: 5px; } .verified-image { display: inline-block; width: 18px; /* Smaller overall */ height: auto; } .owl-carousel .owl-item { opacity: 0.7; /* Increased opacity for non-active items */ } .owl-carousel .owl-item.active.center { opacity: 1; } .owl-carousel-info-wrap { border-radius: var(--border-radius-medium); position: relative; overflow: hidden; text-align: left; box-shadow: 0 8px 20px rgba(0,0,0,0.1); /* Clearer shadow */ } .owl-carousel-info { background-color: var(--background-light); position: absolute; bottom: 0; right: 0; left: 0; padding: 25px 30px; /* Adjusted padding */ border-top: 3px solid var(--accent-color); /* Highlight with accent color */ } .owl-carousel-info h4 { color: var(--primary-color); /* Deep blue for titles in carousel info */ } .owl-carousel-info p { font-size: var(--p-font-size) - 2px; /* Slightly smaller text in carousel info */ line-height: 1.5; } .badge { background-color: var(--secondary-color); /* Teal badge color */ font-family: var(--body-font-family); /* Body font for badges */ border-radius: var(--border-radius-small); /* Smaller badge radius */ color: var(--white-color); padding: 5px 10px; /* More compact padding */ font-size: 0.85em; font-weight: var(--font-weight-medium); } .owl-carousel-info-wrap .social-share, .team-thumb .social-share { position: absolute; right: 0; bottom: 0; transform: translateY(100%); /* Start hidden */ transition: transform 0.3s ease-in-out; } .owl-carousel-info-wrap:hover .social-share, .team-thumb:hover .social-share { transform: translateY(0); /* Slide up on hover */ } .owl-carousel-info-wrap .social-icon, .team-thumb .social-icon { opacity: 1; /* Always visible if parent shows it */ transform: none; padding-right: 15px; /* Adjust padding */ padding-left: 15px; } .owl-carousel .owl-item.active.center .owl-carousel-info-wrap:hover .social-icon, .team-thumb:hover .social-icon { transform: translateY(0); /* Ensure no vertical shift */ opacity: 1; } .owl-carousel-info-wrap .social-icon-item, .owl-carousel-info-wrap .social-icon-link, .team-thumb .social-icon-item, .team-thumb .social-icon-link { display: block; margin-bottom: 8px; /* Smaller margin */ margin-left: auto; } .owl-carousel-info-wrap .social-icon-link { margin-top: 4px; margin-bottom: 4px; } .owl-carousel .owl-dots { background-color: var(--background-light); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); border-radius: var(--border-radius-large); display: inline-block; margin: auto; margin-top: 50px; /* More space below carousel */ padding: 12px 20px; padding-bottom: 5px; } .owl-theme .owl-nav.disabled + .owl-dots { margin-top: 50px; } .owl-theme .owl-dots .owl-dot span { background: var(--border-color); /* Lighter dot color */ width: 10px; height: 10px; margin: 5px 4px; } .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background: var(--primary-color); /* Primary color for active/hover dot */ } /*--------------------------------------- CUSTOM BLOCK -----------------------------------------*/ .custom-block { border: 1px solid var(--border-color); /* Lighter border */ border-radius: var(--border-radius-medium); position: relative; overflow: hidden; padding: 25px; /* Less padding */ transition: all 0.3s ease-in-out; background-color: var(--white-color); } .custom-block:hover { background: var(--white-color); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); /* Stronger hover shadow */ border-color: var(--secondary-color); /* Teal border on hover */ transform: translateY(-5px); /* More pronounced lift */ } .custom-block-info { display: block; padding: 10px 0px; /* Adjusted padding */ padding-bottom: 0; } .custom-block-image-wrap { position: relative; display: block; height: 100%; } .custom-block-image-wrap > a { display: block; } .custom-block-image { border-radius: var(--border-radius-medium); display: block; width: 100px; /* Adjusted size */ height: 100px; object-fit: cover; } .custom-block-image-detail-page .custom-block-image { width: 100%; height: 250px; /* Slightly taller */ } .custom-block .custom-block-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .custom-block-icon-wrap { border-radius: var(--border-radius-medium); position: relative; overflow: hidden; } .custom-block-icon-wrap .section-overlay { opacity: 0.15; /* Lighter overlay */ } .custom-block-btn-group { position: absolute; bottom: 0; right: 0; left: 0; margin: 15px; /* Less margin */ } .custom-block-btn-group .custom-block-icon { position: relative; top: 0; left: 0; transform: none; } .custom-block-icon { background: var(--primary-color); border-radius: var(--border-radius-small); /* Smaller radius */ font-size: var(--p-font-size) - 2px; color: var(--white-color); text-align: center; width: 30px; height: 30px; line-height: 30px; transition: all 0.3s; } .custom-block-icon:hover { background: var(--secondary-color); color: var(--white-color); } .custom-block .custom-btn { font-size: var(--menu-font-size); padding: 6px 14px; } .custom-block .custom-block-info + div .badge { background-color: var(--text-color-dark); /* Dark text color for special badges */ color: var(--white-color); border-radius: var(--border-radius-large) !important; /* Full pill shape */ font-size: var(--menu-font-size) - 2px; display: flex; justify-content: center; align-items: center; /* Center vertically */ width: 35px; height: 35px; line-height: 1; /* Adjust line height for vertical centering */ margin-top: 5px; margin-bottom: 5px; } .custom-block .custom-block-info + div .badge:hover { background-color: var(--accent-color); /* Accent on hover */ } .custom-block-full { background-color: var(--background-light); border-color: transparent; border-left: 5px solid var(--primary-color); /* Left border highlight */ } .custom-block-full:hover { border-color: var(--accent-color); /* Accent on hover */ border-left: 5px solid var(--accent-color); /* Keep left border highlight */ } .custom-block-full .custom-block-info { padding: 25px; /* More padding */ padding-bottom: 0; } .custom-block-full .custom-block-image { width: 100%; height: 220px; object-fit: cover; } .custom-block-full .social-share { position: absolute; top: 15px; /* Closer to top */ right: 15px; /* Closer to right */ margin: 0; } .custom-block-top small { color: var(--text-color-light); font-family: var(--body-font-family); font-size: var(--p-font-size) - 2px; /* Smaller text */ } .custom-block-top .badge { background-color: var(--secondary-color); color: var(--white-color); display: inline-block; vertical-align: middle; height: 28px; line-height: 22px; padding: 4px 10px; } .custom-block-bottom a:hover span { color: var(--primary-color); } .custom-block-bottom a span { font-family: var(--body-font-family); /* Body font for bottom links */ color: var(--text-color-light); text-transform: uppercase; margin-left: 5px; } .custom-block-overlay { border-color: transparent; padding: 0; box-shadow: none; /* Remove default shadow */ } .custom-block-overlay .custom-block-image { margin: auto; width: 100%; height: 230px; /* Slightly taller */ transition: all 0.4s ease-in-out; } .custom-block-overlay:hover .custom-block-image { transform: scale(1.05); /* Zoom effect on hover */ border-radius: var(--border-radius-medium); /* Apply radius on zoom */ } .custom-block-overlay-info { padding: 20px 25px 25px 25px; /* More padding */ text-align: center; /* Center info in overlay blocks */ } .custom-block-overlay-info h5 a { color: var(--primary-color); /* Primary color for overlay titles */ } /*--------------------------------------- PROIFLE BLOCK -----------------------------------------*/ .profile-block { margin-top: 20px; } .profile-block-image { border-radius: 50%; /* Fully round profile images */ width: 60px; /* Slightly larger */ height: 60px; object-fit: cover; margin-right: 15px; border: 2px solid var(--secondary-color); /* Teal border for profile pics */ } .profile-block p { color: var(--text-color-dark); /* Darker text for names */ font-weight: var(--font-weight-medium); } .profile-block p strong { display: block; font-family: var(--title-font-family); font-size: var(--p-font-size); color: var(--primary-color); /* Primary color for role */ } .profile-detail-block { border: 1px solid var(--border-color); border-radius: var(--border-radius-medium); padding: 30px 40px; background-color: var(--background-light); /* Light background for detail block */ } .profile-detail-block p { margin-bottom: 0; } /*--------------------------------------- ABOUT & TEAM SECTION -----------------------------------------*/ .about-image { border-radius: var(--border-radius-medium); display: block; box-shadow: 0 10px 30px rgba(0,0,0,0.1); } .team-thumb { border-radius: var(--border-radius-medium); position: relative; overflow: hidden; box-shadow: 0 8px 20px rgba(0,0,0,0.08); /* Consistent shadow */ } .team-thumb:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.15); } .team-info { background-color: var(--white-color); position: absolute; bottom: 0; right: 0; left: 0; padding: 25px 30px; border-top: 3px solid var(--secondary-color); /* Teal highlight */ } .team-info h4 { color: var(--primary-color); } .team-info .badge { background-color: var(--accent-color); /* Coral badges for team roles */ color: var(--white-color); } /*--------------------------------------- PAGINATION -----------------------------------------*/ .pagination { border: 1px solid var(--border-color); border-radius: var(--border-radius-large); padding: 15px; /* Less padding */ background-color: var(--background-light); } .page-link { border: 0; border-radius: var(--border-radius-small); color: var(--text-color-light); font-family: var(--body-font-family); margin: 0 3px; /* Tighter spacing */ padding: 8px 16px; font-size: var(--menu-font-size); } .page-link:hover, .page-item:first-child .page-link:hover, .page-item:last-child .page-link:hover { background-color: var(--secondary-color); color: var(--white-color); } .page-item:first-child .page-link { margin-right: 8px; } .active > .page-link, .page-link.active { background-color: var(--primary-color); /* Primary color for active page */ border-color: var(--primary-color); color: var(--white-color); } /*--------------------------------------- CONTACT -----------------------------------------*/ .contact-info p strong { font-family: var(--title-font-family); min-width: 100px; /* Wider for alignment */ color: var(--text-color-dark); } .contact-info p a { color: var(--primary-color); border-bottom: 1px solid var(--primary-color); padding-bottom: 2px; } .contact-info p a:hover { color: var(--accent-color); border-color: var(--accent-color); } .google-map { border-radius: var(--border-radius-medium); box-shadow: 0 8px 20px rgba(0,0,0,0.1); } .contact-form .form-floating > textarea { border-radius: var(--border-radius-small); height: 160px; border: 1px solid var(--border-color); /* Consistent border */ padding: 15px; /* More internal padding */ font-size: var(--p-font-size); } .contact-form .form-control { border: 1px solid var(--border-color); /* Consistent border */ } /*--------------------------------------- SUBSCRIBE FORM -----------------------------------------*/ .subscribe-form-wrap { border: 1px solid var(--border-color); /* Lighter border */ border-radius: var(--border-radius-medium); /* Use medium radius */ width: 90%; /* Wider form */ max-width: 500px; /* Max width for larger screens */ position: relative; top: 20px; /* Adjusted position */ padding: 30px; background-color: var(--white-color); box-shadow: 0 5px 15px rgba(0,0,0,0.05); } .subscribe-form-wrap h6 { background: var(--primary-color); /* Primary color background */ border-radius: var(--border-radius-medium); color: var(--white-color); text-align: center; position: relative; bottom: 60px; /* Lifted higher */ margin-bottom: -35px; /* Adjusted negative margin */ padding: 10px 15px; font-size: var(--h6-font-size); } .subscribe-form #subscribe-email { border: 1px solid var(--border-color); /* Add a subtle border */ border-radius: var(--border-radius-small); margin-bottom: 15px; /* More space */ padding: 12px 20px; } .subscribe-form #submit { border-radius: var(--border-radius-small); /* Consistent radius */ background: var(--secondary-color); /* Teal submit button */ border-color: var(--secondary-color); color: var(--white-color); padding: 12px 20px; } .subscribe-form #submit:hover { background: var(--accent-color); /* Coral on hover */ border-color: var(--accent-color); } /*--------------------------------------- CUSTOM FORM -----------------------------------------*/ .custom-form .form-control { border-radius: var(--border-radius-small); color: var(--text-color-dark); font-family: var(--body-font-family); font-size: var(--p-font-size); margin-bottom: 20px; padding-top: 12px; padding-bottom: 12px; padding-left: 18px; border: 1px solid var(--border-color); /* Defined border */ outline: none; } .form-floating > label { padding-left: 18px; color: var(--text-color-light); /* Lighter label text */ } .custom-form button[type="submit"] { background: var(--primary-color); border: none; border-radius: var(--border-radius-large); color: var(--white-color); font-family: var(--title-font-family); /* Use title font for form buttons */ font-size: var(--p-font-size); font-weight: var(--font-weight-semibold); transition: all 0.3s ease-in-out; margin-bottom: 0; padding: 12px 28px; } .custom-form button[type="submit"]:hover, .custom-form button[type="submit"]:focus { background: var(--accent-color); border-color: transparent; transform: translateY(-2px); } /*--------------------------------------- SEARCH FORM -----------------------------------------*/ .search-form .form-control { border: 1px solid var(--border-color); /* Added border */ border-radius: var(--border-radius-small); margin-bottom: 0; padding: 8px 15px; } .search-form button[type="submit"] { background: var(--primary-color); border-color: var(--primary-color); max-width: 50px; height: 100%; padding-left: 15px; border-radius: var(--border-radius-small); /* Consistent radius */ } .search-form button[type="submit"]:hover { background: var(--accent-color); border-color: var(--accent-color); } /*--------------------------------------- SITE FOOTER -----------------------------------------*/ .site-footer { background: var(--background-dark); /* Dark background for footer */ margin-top: -100px; /* Reduced negative margin */ padding-top: 120px; padding-bottom: 180px; /* More padding at bottom */ color: var(--white-color); } .site-footer > .container { position: relative; top: 0px; /* Aligned better */ padding-top: 80px; /* Adjusted padding */ } .site-footer-title, .site-footer p { color: var(--white-color); } .site-footer p strong { font-family: var(--body-font-family); /* Use body font for strong in footer */ } .site-footer p a { color: var(--secondary-color); /* Teal links in footer */ border-bottom: 1px solid var(--secondary-color); padding-bottom: 2px; } .site-footer p a:hover { color: var(--accent-color); border-color: var(--accent-color); } .site-footer-thumb a img { display: block; width: 100px; /* Smaller footer logo */ min-width: 100px; height: auto; } .site-footer-links { margin-bottom: 0; padding-left: 0; } .site-footer-link-item { display: inline-block; list-style: none; margin-right: 12px; margin-left: 12px; } .site-footer-link { color: var(--white-color); font-size: var(--menu-font-size); line-height: inherit; font-family: var(--body-font-family); font-weight: var(--font-weight-normal); } .site-footer-link:hover { color: var(--secondary-color); /* Teal on hover */ } /*--------------------------------------- SOCIAL ICON -----------------------------------------*/ .social-icon { margin: 0; padding: 0; } .social-icon-item { list-style: none; display: inline-block; vertical-align: top; } .social-icon-link { background: var(--primary-color); /* Primary color for social icons */ border-radius: 50%; /* Make them perfectly round */ color: var(--white-color); font-size: var(--p-font-size) - 1px; display: flex; /* Use flexbox for centering */ align-items: center; /* Center vertically */ justify-content: center; /* Center horizontally */ margin-right: 8px; /* Tighter spacing */ width: 38px; /* Slightly smaller */ height: 38px; line-height: 1; /* Reset line height for flex centering */ transition: background 0.3s ease-in-out, transform 0.2s ease-in-out; } .social-icon-link:hover { background: var(--accent-color); /* Accent color on hover */ transform: translateY(-3px); /* Lift effect on hover */ } /*--------------------------------------- RESPONSIVE STYLES -----------------------------------------*/ @media screen and (min-width: 2160px) { .first-section { background-size: 100% 90%; } } @media screen and (min-width: 1600px) { .site-footer { padding-top: 200px; /* Adjusted */ } } @media screen and (max-width: 1240px) { .first-section { background-size: 150% 150%; /* Adjusted for better gradient coverage */ } } @media screen and (max-width: 991px) { h1 { font-size: 44px; } h2 { font-size: 34px; } h3 { font-size: 28px; } h4 { font-size: 24px; } h5 { font-size: 20px; } h6 { font-size: 18px; } .first-section { background-size: 180% 180%; /* Further adjusted for smaller screens */ padding-top: 120px; /* Reduced for smaller screens */ padding-bottom: 80px; } .section-padding { padding-top: 70px; padding-bottom: 70px; } .navbar-nav { background-color: var(--primary-color); /* Primary color for mobile nav */ border-radius: var(--border-radius-medium); padding: 20px; /* Less padding */ margin-top: 15px; /* Space below toggler */ box-shadow: 0 5px 15px rgba(0,0,0,0.2); } .navbar-nav .nav-link { padding: 8px 0; /* Adjusted padding */ } .navbar-nav .dropdown-menu { position: relative; left: 0; /* Align dropdown with parent menu */ opacity: 1; pointer-events: auto; max-width: none; /* Allow full width */ margin-top: 8px; margin-bottom: 10px; padding: 5px 0; box-shadow: none; /* No shadow for nested dropdown */ } .navbar .dropdown-menu::before { display: none; /* Hide caret for mobile dropdown */ } .navbar-expand-lg .navbar-nav { padding-bottom: 10px; } .nav-tabs .nav-link:first-child { margin-right: 3px; } .nav-tabs .nav-link { font-size: var(--copyright-font-size) - 1px; padding: 8px; } .copyright-text { text-align: center; } .site-footer { margin-top: -80px; /* Adjusted */ padding-top: 100px; padding-bottom: 120px; } .subscribe-form-wrap { width: 100%; margin-left: 0; margin-right: 0; } } @media screen and (max-width: 540px) { .first-section { background-size: 250% 250%; /* Even larger for small mobiles */ padding-top: 100px; padding-bottom: 60px; } .custom-block .custom-block-top { flex-direction: column; align-items: flex-start; /* Align left */ } .custom-block .custom-block-top small:last-child { margin-top: 8px; margin-bottom: 8px; } .profile-detail-block { padding: 20px 25px; /* Smaller padding */ } } @media screen and (max-width: 480px) { h1 { font-size: 26px; } h2 { font-size: 28px; } h3 { font-size: 24px; } h4 { font-size: 20px; } h5 { font-size: 18px; } .section-title { font-size: var(--h5-font-size); padding: 8px 20px; } .custom-btn { padding: 10px 20px; font-size: var(--menu-font-size); } .owl-carousel-info { padding: 20px 25px; } .subscribe-form-wrap h6 { bottom: 50px; margin-bottom: -25px; font-size: var(--p-font-size); } .site-footer-link-item { margin-right: 8px; margin-left: 8px; } } @media screen and (max-width: 414px) { .search-form { max-width: 180px; } .site-footer-link-item { display: block; /* Stack links on very small screens */ margin: 5px 0; } } /* Existing cookie banner import - ensure the font is consistent if possible */ /* @import url("../css2-1"); -- This should be removed from here if you're importing fonts in HTML head */ /* Cookie Banner styles adjusted for new color scheme */ .cookie-wrapper { position: fixed; bottom: 30px; /* Closer to bottom */ left: 30px; /* Closer to left */ width: 45%; /* Slightly wider */ max-width: 450px; /* Ensure it doesn't get too wide on large screens */ background: var(--white-color); padding: 20px 30px 25px; transition: all 0.4s ease-in-out; /* Smoother transition */ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* Stronger shadow */ z-index: 9999; /* Highest z-index */ border-radius: var(--border-radius-medium); } .cookie-wrapper.show { /* Changed from .show to .cookie-wrapper.show for specificity */ left: 30px; /* Keep it on the left */ } @media (max-width: 772px) { .cookie-wrapper { width: 90%; /* Almost full width on mobile */ bottom: 20px; left: 5%; /* Centered horizontally */ transform: translateX(0); /* Remove transform if set earlier */ right: auto; /* Remove right property */ } } .cookie-wrapper.hidden { /* Added class for hiding */ opacity: 0; pointer-events: none; transform: translateY(100%); /* Slide down to hide */ } .cookie-wrapper i { color: var(--primary-color); font-size: 36px; /* Larger icon */ text-align: center; display: block; /* Make icon take full width for centering */ margin-bottom: 10px; } .cookie-wrapper h2 { color: var(--text-color-dark); font-weight: var(--font-weight-bold); /* Bolder heading */ text-align: center; font-size: var(--h5-font-size); margin-bottom: 15px; } .data { text-align: center; } .data p { font-size: var(--p-font-size) - 1px; line-height: 1.6; margin-bottom: 15px; } .data p a { color: var(--primary-color); text-decoration: underline; /* Underline for clarity */ text-align: center !important; font-weight: var(--font-weight-medium); } .data p a:hover { color: var(--accent-color); text-decoration: none; } .buttons { padding-top: 15px; text-align: center; display: flex; /* Use flex for button layout */ justify-content: center; gap: 15px; /* Space between buttons */ } .buttons .cookie-button { border: 2px solid var(--primary-color); color: var(--white-color); padding: 10px 25px; /* More padding */ background: var(--primary-color); cursor: pointer; width: auto; /* Auto width based on content */ max-width: 180px; /* Max width for consistency */ transition: all 0.3s ease-in-out; border-radius: var(--border-radius-small); font-size: var(--p-font-size) - 1px; font-weight: var(--font-weight-semibold); } .buttons #acceptBtn:hover { background-color: transparent; color: var(--primary-color); transform: translateY(-2px); } #declineBtn { background-color: transparent; color: var(--primary-color); border: 2px solid var(--primary-color); /* Explicit border for decline */ } #declineBtn:hover { background-color: var(--primary-color); color: var(--white-color); transform: translateY(-2px); } #result { color: var(--primary-color); font-size: 15px; margin-top: 10px; }