/*
Theme Name: Thames - Portfolio HTML template
Author: eThemeStudio
Support: xuwelkhan@gmail.com
Description: Personal Portfolio Template
Version: 2
Released: March 11, 2024
Last Update: March 24, 2024
*/
/* CSS Index
-----------------------------------
1. Theme default css
2. header
3. slider
4. about area
5. about area
6. fun fact area
7. portfolio area
8. experience area
9. skill area
10. price area
11. service area
12. testimonial area
13. brand area
14. contact area
15. blog area
16. footer area
17. extra info css
18. Profile Avatar Styles
*/
/* 1. Theme default css
-------------------------------------------------------------- */
/* font css */
@font-face {
font-family: "jost-medium-font";
src: url(../fonts/jost-medium-font/jost-medium.ttf);
}
/* common css */
:root {
--main-color: #f7b602;
--primary-color: #2d2e36;
--secondary-color: #e2ecf6;
--text-color: #b0aac0;
--meta-text-color: #9b9db1;
--section-bg: #212228;
--main-border: #474747;
}
body {
font-family: "jost-medium-font";
font-weight: 400;
}
.body-dark-mode {
/* background: #26272e; */
/* background: #ffffff; /* Changed to white for preloader visibility */
background:
linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), /* Darkening overlay */
linear-gradient(-45deg, #F0E68C, #40E0D0, #F0E68C, #40E0D0); /* Original Sand and Turquoise */
background-size: auto, 400% 400%; /* Adjust size for both layers */
animation: auroraGradient 25s ease-in-out infinite;
}
@keyframes auroraGradient {
0% {
background-position: 0% 0%;
}
50% {
background-position: 100% 100%;
}
100% {
background-position: 0% 0%;
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #ffffff;
font-weight: 400;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
color: inherit;
}
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
color: var(--main-color);
}
h2 {
font-size: 72px;
}
h3 {
font-size: 60px;
line-height: 1.16;
}
h4 {
font-size: 30px;
}
h5 {
font-size: 24px;
line-height: 1.5;
}
h6 {
font-size: 21px;
}
p {
font-family: "Open Sans", sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 1.67;
color: #b0aac0;
}
ul {
margin: 0px;
padding: 0px;
}
li {
list-style: none;
}
img {
max-width: 100%;
transition: all 0.3s ease-out 0s;
}
a,
button,
li {
transition: 0.3s;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
a:focus,
button:focus,
.btn:focus {
text-decoration: none;
outline: 0;
box-shadow: none;
}
a:focus,
a:hover,
.footer-menu li a:hover {
color: var(--main-color);
text-decoration: none;
outline: 0 none;
}
*::-moz-selection {
background: #ffffff;
color: #fff;
text-shadow: none;
}
::-moz-selection {
background: #7a7a8a;
color: #fff;
text-shadow: none;
}
::selection {
background: #7a7a8a;
color: #fff;
text-shadow: none;
}
.btn:focus {
outline: 0 none;
}
/* button */
.btn {
padding: 14px 40px 13px 40px;
font-size: 16px;
color: var(--primary-color);
border-radius: 5px;
outline: 0 none;
text-transform: capitalize;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
.btn::after {
position: absolute;
content: "";
background: #222222;
height: 155px;
left: -75px;
opacity: 0.2;
top: -50px;
-webkit-transform: rotate(35deg);
transform: rotate(35deg);
-webkit-transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
width: 50px;
z-index: 1;
}
.btn:hover::after {
left: 120%;
-webkit-transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}
.btn:hover {
color: var(--primary-color);
}
/* btn css end */
/* common css */
.jostMedium-font-family {
font-family: "jost-medium-font";
}
.openS-font-family {
font-family: "Open Sans", sans-serif;
}
.img-grayscale {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
.shadow-hover:hover {
box-shadow: 0px 5px 15px 0px rgba(7, 7, 7, 0.06);
}
.cursor-pointer {
cursor: pointer;
}
.rotate {
transition: 0.9s;
-webkit-transition: all 0.4s ease-out 0s;
-moz-transition: all 0.4s ease-out 0s;
-ms-transition: all 0.4s ease-out 0s;
-o-transition: all 0.4s ease-out 0s;
transition: all 0.4s ease-out 0s;
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
z-index: 1;
}
.rotate-hover:hover span.rotate,
.rotate-hover:hover a.rotate {
-webkit-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
transform: rotateY(360deg);
}
/* title css */
.title span {
font-size: 18px;
letter-spacing: 7px;
}
.title h2 {
font-size: 60px;
}
/* marquee css start */
.marquee {
display: block;
margin: auto auto;
white-space: nowrap;
overflow: hidden;
min-width: 100%;
height: 100%;
}
.marquee span {
color: #ffffff;
display: inline-block;
text-transform: uppercase;
white-space: nowrap;
min-width: 100%;
height: 100%;
line-height: 1.1;
font-size: 96px;
animation: marquee1 20s linear infinite;
-webkit-animation: marquee1 20s linear infinite;
opacity: .3;
}
.marquee2 span {
-webkit-text-stroke: 1px #ffffff;
-webkit-text-fill-color: transparent;
animation: marquee2 20s linear infinite;
-webkit-animation: marquee2 20s linear infinite;
}
@keyframes marquee1 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0);
}
}
@keyframes marquee2 {
0% {
transform: translate(-100%, 0);
}
100% {
transform: translate(0, 0);
}
}
/* marquee css end */
.section-text-color {
color: var(--primary-color);
}
/* slick-dots css */
.slick-dots {
position: absolute;
left: 80px;
bottom: -80px;
z-index: 11;
}
.slick-dots li {
border: 2px solid transparent;
border-radius: 50%;
width: 20px;
height: 20px;
background: transparent;
margin-right: 15px;
cursor: pointer;
display: inline-block;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}
.slick-dots button {
width: 8px !important;
height: 8px;
background: #bec9ca;
display: block;
text-indent: 1000px;
overflow: hidden;
border: 0;
border-radius: 50%;
margin: 4px auto;
cursor: pointer;
padding: 0;
}
.slick-dots li.slick-active {
border: 2px solid var(--main-color);
}
.slick-dots li.slick-active button {
background: var(--main-color);
}
/* slick-arrow css */
.slick-arrow .l-a,
.slick-arrow .r-a {
position: absolute;
right: 65px;
top: -130px;
width: 42px;
height: 42px;
line-height: 41px;
background: transparent;
color: var(--main-color);
text-align: center;
z-index: 11;
font-size: 18px;
border: 1px solid #c8ccd4;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
-o-border-radius: 50px;
transition: 0.4s;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-ms-transition: 0.4s;
-o-transition: 0.4s;
}
.slick-arrow .r-a {
left: auto;
right: 15px;
}
.slick-arrow .l-a:hover,
.slick-arrow .r-a:hover {
cursor: pointer;
background: var(--main-color);
color: var(--primary-color);
border: 1px solid var(--main-color);
}
.testimonial-active .slick-arrow .l-a,
.testimonial-active .slick-arrow .r-a {
right: auto;
top: auto;
bottom: -80px;
left: 80px;
}
.testimonial-active .slick-arrow .r-a {
left: 132px;
}
/* 2. header
--------------------------------------------------- */
.transparent-header {
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 99;
}
.header-area {
background-color: rgba(0, 0, 0, 0.8); /* Black with 80% opacity */
transition: background-color 0.3s ease;
}
/* Added to control the main header wrapper's height contribution */
.header {
padding-top: 0 !important;
padding-bottom: 0 !important;
/* Optionally, if it has a specific background causing height issues with padding:
background-clip: content-box;
*/
}
.body-overlay {
background-color: rgba(0, 0, 0, 0.5);
height: 100%;
width: 100%;
position: fixed;
top: 0;
z-index: 999;
left: 0;
opacity: 0;
visibility: hidden;
transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
}
.body-overlay.opened {
opacity: 1;
visibility: visible;
}
.sticky-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 99;
background-color: rgba(0, 0, 0, 0.8); /* Black with 80% opacity for sticky header */
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
/* backdrop-filter: blur(3px); Removed */
}
.logo a {
display: block;
}
/* Ensure the logo image in the non-sticky header is also constrained */
.header .logo img {
height: 100px; /* Increased from 85px */
width: auto; /* Maintain aspect ratio */
animation: danceAndStop 3s ease-in-out 1 forwards;
}
.sticky-menu .logo {
margin: 0 0;
}
.sticky-menu .logo img {
height: 100px; /* Increased from 85px for sticky logo */
width: auto; /* Maintain aspect ratio */
max-width: 100%; /* Allow full width up to its auto width for 100px height */
animation: danceAndStop 3s ease-in-out 1 forwards;
}
.sticky-menu .logo a.header-sticky-logo {
display: block;
position: relative;
z-index: 100;
}
.sticky-menu .header {
-webkit-box-shadow: 0 8px 4px -7px rgba(115, 115, 115, 0.1);
-moz-box-shadow: 0 8px 4px -7px rgba(115, 115, 115, 0.1);
box-shadow: 0 8px 4px -7px rgba(115, 115, 115, 0.1);
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
}
.sticky-menu .main-menu ul li > a {
padding: 10px 0; /* Increased from 5px 0 */
}
.main-menu ul li {
display: inline-block;
margin-left: 40px;
position: relative;
}
.main-menu ul li > a {
color: #000000; /* Changed from #ffffff */
font-size: 18px;
display: inline-block;
text-transform: capitalize;
padding: 20px 0; /* Increased from 15px 0 */
position: relative;
}
.main-menu ul li:hover > a, /* Desktop hover remains white */
.main-menu ul li.active a { /* Desktop active is now white */
color: #000000; /* Changed from #ffffff */
}
.main-menu ul li > a:hover::before,
.main-menu ul li > a:hover a.active::before {
background: var(--main-color);
width: 100%;
left: 0;
}
.header-btn a {
color: #ffffff;
padding: 5px 28px 4px 28px;
border: 1px solid var(--main-color);
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
font-size: 15px;
}
.header-btn a:hover,
.sticky-menu .header-btn a:hover {
background: var(--main-color);
color: var(--primary-color);
}
.sticky-menu .header-btn a {
padding: 3px 20px 2px 20px;
}
/* 3. slider
-------------------------------------------------------------- */
.slider-height {
min-height: 1080px;
}
/* ADDED for the main slider background image overlay */
.single-slider[data-background] {
position: relative; /* Needed for the pseudo-element */
z-index: 1; /* Ensure it's a stacking context */
background-repeat: no-repeat; /* Removed !important */
background-size: cover !important;
background-position: center center !important;
}
.single-slider[data-background]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: transparent; /* Adjust opacity for darkness */
z-index: -1; /* Behind the actual background image if it were also on ::before, but here it's to be under content */
}
/* START - Added for aurora gradient background on the home slider */
#home > .single-slider.slider-height {
/* background-image: linear-gradient(-45deg, #F0E68C, #40E0D0, #F0E68C, #40E0D0) !important; */ /* Sand (Khaki) and Turquoise */
/* background-size: 400% 400% !important; */
/* animation: auroraGradient 25s ease-in-out infinite; */
/* The ::before overlay from .single-slider[data-background]::before will still apply, adding a dark tint over the gradient */
}
/* END - Added for aurora gradient background on the home slider */
.slider-bg-color {
/* background: #1E1F24; */
}
.slider-img {
max-height: 100vh;
filter: brightness(0.6) !important;
margin-right: -50px;
}
.slider-content .sub-heading {
font-size: 24px;
line-height: 1.3;
letter-spacing: 7px;
font-weight: 400;
}
.slider-content h1 {
font-size: 24px;
line-height: 1.3;
position: relative; /* Ensure content is above overlay */
z-index: 1; /* Ensure content is above overlay */
}
.slider-content h2 {
font-size: 24px;
line-height: 2;
position: relative; /* Ensure content is above overlay */
z-index: 1; /* Ensure content is above overlay */
}
.slider-content h2 span {
font-size: 36px;
letter-spacing: 0px;
}
span#main {
color: var(--main-color) !important;
}
.slider-social-link {
position:fixed !important;
top: 50%;
transform: translateY(-50%) !important;
-webkit-transform: translateY(-50%) !important;
-moz-transform: translateY(-50%) !important;
-ms-transform: translateY(-50%) !important;
-o-transform: translateY(-50%) !important;
z-index:1000 !important;
}
.slider-social-link .social li a {
font-size: 18px;
color: #98c949;
width: 55px;
margin: 2px 0;
height: 50px;
line-height: 52px;
}
.slider-social-link .social li {
border: 1px solid #ffffff !important; /* Changed to white */
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
backdrop-filter: blur(5px);
transition: border-color 0.8s ease; /* Made transition slower */
}
.slider-social-link .social li:hover a {
font-size: 23px;
}
/* heartbeat scale effects*/
.slider-img::before {
position: absolute;
content: "";
border-radius: 50%;
background-color: rgb(59, 60, 70);
opacity: 0.529;
left: 5%;
top: 65px;
width: 770px;
height: 761px;
z-index: -1;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
animation: heartbeat-middle 5s infinite alternate;
-webkit-animation: heartbeat-middle 5s infinite alternate;
}
/* shape css */
.hero-shape1 {
top: 18%;
right: 5%;
}
.hero-shape2 {
bottom: 17%;
right: 12%;
}
.hero-shape3 {
bottom: 8%;
left: 6%;
}
.hero-shape4 {
top: 21%;
left: 47%;
}
/* 4. intro feature area
------------------------------------------------------------- */
.single-intro-feature-content {
box-shadow: 0px 5px 60px 0px rgba(2, 24, 93, 0.08);
padding: 55px 48px 35px 48px;
}
.single-intro-feature-content:hover {
box-shadow: 0px 5px 60px 0px rgba(2, 24, 93, 0.15);
}
.single-intro-feature-content h4 {
font-size: 24px;
}
.intro-feature-text-style {
font-size: 300px;
bottom: -110px;
line-height: 1;
right: -30px;
color: #2d2e36;
}
.intro-feature-icon {
top: 28%;
left: 7%;
}
/* 5. about area
------------------------------------------------------------- */
.about-shape1 {
width: 133px;
height: 134px;
border: 4px solid var(--main-color);
right: -25px;
top: -25px;
}
.about-shape2 {
background: var(--main-color);
width: 91px;
height: 91px;
top: 70px;
left: -12px;
}
.about-download-wrapper {
left: -75px;
bottom: -125px;
}
.d-icon {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.about-info-wrapper {
border-top: 1px solid var(--main-border);
border-bottom: 1px solid var(--main-border);
}
.about-icon {
right: 3%;
top: 5%;
}
.about-text-style {
font-size: 150px;
line-height: 1;
transform: matrix(0, -1, 1, 0, 0, 0);
-moz-transform: matrix(0, -1, 1, 0, 0, 0);
-webkit-transform: matrix(0, -1, 1, 0, 0, 0);
-ms-transform: matrix(0, -1, 1, 0, 0, 0);
bottom: 300px;
right: 68%;
}
.rotate-animation {
animation: rotation 2s linear;
-webkit-animation: rotation 2s infinite linear;
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 6. fun fact area
------------------------------------------------------------- */
.fun-fact-content p {
color: #a0a0bb;
}
.single-fact {
padding: 48px 30px;
border: 1px solid #474747;
}
.single-fact span {
font-size: 72px;
line-height: 0.4;
}
.single-fact span.per {
font-size: 72px;
}
.single-fact h3 {
font-size: 21px;
line-height: 1.5;
}
.fact-style1 {
bottom: 86%;
left: 0;
}
.fact-style2 {
bottom: -75px;
right: -5px;
}
/* 7. portfolio area
-------------------------------------------------------------- */
.single-portfolio {
padding-top: 48px;
padding-bottom: 38px;
}
.port-img {
opacity: 0;
visibility: hidden;
margin-top: -12px;
z-index: 1;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
}
.single-portfolio:hover .port-img {
opacity: 1;
visibility: visible;
transform: rotate(-12deg);
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-ms-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
}
.port-content {
font-size: 25px;
cursor: pointer;
color: var(--main-color);
border: 1px solid var(--main-border);
width: 95px;
height: 95px;
line-height: 95px;
border-radius: 50%;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
}
.port-content:hover {
background: var(--main-color);
border: 1px solid var(--main-color);
color: var(--primary-color);
}
.single-portfolio h3 {
font-size: 48px;
line-height: 1.2;
}
.award-content h3 {
font-size: 24px;
line-height: 1.3;
}
/* 8. experience area
-------------------------------------------------------------- */
.experience-img {
margin-left: -48%;
}
.experience-ser-icon {
background: transparent;
border: 1px solid var(--main-color);
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
}
.experience-content li:hover .experience-ser-icon,
.education-content li:hover .experience-ser-icon {
background: transparent;
}
.experience-content li .experience-ser-icon span,
.education-content li .experience-ser-icon span {
color: var(--main-color);
}
.experience-content li:hover .experience-ser-icon span,
.education-content li:hover .experience-ser-icon span {
background: var(--main-color);
color: var(--primary-color);
}
.experience-ser-icon span {
width: 70px;
height: 70px;
line-height: 70px;
font-size: 35px;
}
.experience-service-text h4 span {
font-size: 15px;
}
.experience-bg-img {
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
}
.experience-service-text h3 {
font-size: 30px;
}
.experience-service-text h4 {
font-size: 18px;
}
/* 9. skill area
-------------------------------------------------------------- */
.single-skill .knob {
color: #ffffff !important;
}
.progress-circular h4 {
font-size: 25px;
line-height: 1.23;
}
.skill-text-style {
font-size: 310px;
line-height: 0;
bottom: 60px;
left: -25px;
}
/* 10. price area
-------------------------------------------------------------- */
.single-price:hover {
margin-top: -20px;
}
.price-list li p,
.price-list li span {
font-size: 16px;
}
.price-list li span {
width: 20px;
height: 20px;
line-height: 1.4;
}
.price-list li span.disable {
color: #ccd2d3;
}
.rate {
font-size: 60px;
}
.price-list li {
margin-bottom: 8px;
}
.single-price .btn {
padding: 10px 35px;
}
.single-price p {
font-size: 18px;
}
.single-price h3 {
font-size: 30px;
}
/* 11. service area
-------------------------------------------------------------- */
.single-service {
box-shadow: 0px 5px 90px 0px rgba(2, 24, 93, 0.08);
}
.service-circle.service-small-circle {
width: 36px;
height: 36px;
top: -11px;
left: -14px;
background: #212529;
opacity: 0.3;
}
.service-circle.service-large-circle {
width: 58px;
height: 58px;
bottom: -12px;
right: -12px;
background: #212529;
opacity: 0.3;
}
.single-service:hover .service-circle.service-small-circle {
top: 35px;
left: 48px;
}
.single-service:hover .service-circle.service-large-circle {
bottom: 30px;
right: 32px;
}
.service-text h3 {
font-size: 30px;
}
/* 12. testimonial area
-------------------------------------------------------------- */
.testimonial-text {
font-size: 24px;
line-height: 1.75;
}
.quit {
top: 14px;
}
.quit span {
font-size: 32px;
}
.avatar-info p {
font-size: 16px;
}
.testimonial-img {
width: 132%;
}
.testimonial-bg::before {
position: absolute;
content: "";
background: var(--section-bg);
left: -100%;
top: 0;
bottom: 0;
right: 0;
border-bottom-right-radius: 12px;
border-top-right-radius: 12px;
}
.testimonial-bg {
border-bottom-right-radius: 12px;
border-top-right-radius: 12px;
}
.testimonial-text-style {
right: -10px;
}
/* 13. brand area
-------------------------------------------------------------- */
.brand-active li {
text-align: center;
}
.single-brand img {
display: inline-block;
}
.brand-active li:hover .single-brand-out {
transform: translateY(-100%);
}
.single-brand.single-brand-hover {
position: absolute;
width: 100%;
margin: 0 auto;
top: 110%;
}
.brand-active li:hover .single-brand-hover {
top: 0;
}
/* 14. contact area
-------------------------------------------------------------- */
.contact-icon {
width: 50px;
height: 50px;
line-height: 50px;
border-radius: 50%;
}
.contact-text h4 {
font-size: 24px;
}
.contact-icon span,
.contact-info input,
.contact-info textarea {
font-size: 18px;
color:white;
}
.contact-info input,
.contact-info textarea {
background: var(--primary-color);
border-color: #474747;
/* border: 0; */
}
.contact-info .massage {
min-height: 100px;
}
.contact-form .form-message.success {
color: white;
}
.contact-form .form-message.error {
color: white;
font-size:12px;
}
/* map */
.map-wrapper {
width: 100%;
min-height: 340px;
/* background: #f9f9f9; */
margin-top: -30px !important;
}
/* 15. blog area
-------------------------------------------------------------- */
.blog-meta li span {
font-size: 15px;
}
.single-blog-content h3 {
font-size: 24px;
line-height: 1.3;
}
.blog-img {
overflow: hidden;
}
.single-blog:hover img,
.zoom-img:hover {
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
}
.single-blog {
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
}
.blog-img,
.blog-img:hover {
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
.single-blog-content {
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
}
.blog-modal-img img {
border-radius: 30px;
}
/* modal */
.modal-dialog {
max-width: 1180px;
margin: 0 auto;
}
.modal-content {
background-color: var(--primary-color);
}
.modal-content h2 {
font-size: 36px;
padding: 50px 0px 20px 0px;
line-height: 1.32;
}
.pro-modal-footer h6 {
font-size: 16px;
}
.meta-wrapper {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
}
.item-meta li {
padding-bottom: 16px;
color: #fff;
}
.modal-tags li a {
color: var(--meta-text-color);
font-family: "Open Sans", sans-serif;
}
.body-dark-mode .modal-dialog .social-link li a {
color: #fff;
}
.blog-meta li a,
.blog-modal-wrapper .blog-meta li span {
font-size: 15px;
}
.blog-modal-wrapper .blog-meta li {
display: inline-block;
margin-right: 30px;
}
.blog-meta li {
margin-right: 12px;
}
.blog-meta li:last-child {
margin-right: 0;
}
.item-meta li span {
color: var(--text-color);
font-size: 15px;
}
.modal-body .btn {
padding: 11px 25px 10px 25px;
font-size: 14px;
}
/* 16. footer area
-------------------------------------------------------------- */
.subscribe-info span {
right: 25px;
top: 50%;
transform: translateY(-50%);
}
.social.social-bg li a {
font-size: 18px;
width: 42px;
height: 42px;
line-height: 42px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}
/* 17. extra info css
-------------------------------------------------------------- */
#scroll a {
position: fixed;
font-size: 20px;
width: 45px;
height: 45px;
line-height: 45px;
right: -1px;
bottom: 30px;
cursor: pointer;
z-index: 11;
color: var(--primary-color);
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
border-radius: 50%;
}
#scroll a:hover,
#scroll a:focus {
opacity: 0.9;
}
/* .side-mobile-menu start*/
.side-mobile-menu {
width: 380px;
position: fixed;
left: -125%;
top: 0;
z-index: 9999;
height: 100%;
background: black;
transition: all 0.5s ease-out;
overflow: scroll;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
}
.mean-container .mean-nav ul li {
border: none !important;
background-color: black !important;
margin: 0; /* Reset margin */
padding: 0; /* Reset padding */
}
.mean-container .mean-nav ul li a {
background: black;
/* border: 0; */
font-weight: 400;
padding: 8px 5%;
/* border-color: transparent; */
border: none !important; /* Ensure all borders are removed */
text-transform: capitalize;
color: #fff;
}
.mean-container .mean-nav ul li a:hover {
background: black;
color: #fff;
}
.side-mobile-menu.open-menubar {
left: 0;
}
.close,
.close:focus,
.close:hover {
opacity: 1;
}
.close-icon span {
font-size: 40px;
color: var(--primary-color);
background: var(--main-color);
width: 36px;
height: 36px;
display: inline-block;
line-height: 30px;
text-align: center;
border-radius: 30px;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
}
.close-icon span:hover {
box-shadow: 0px 6px 30px 0px rgba(7, 7, 7, 0.12);
}
.modal-content .close-icon span:hover {
box-shadow: none;
background: var(--main-color);
}
.mobile-menubar {
font-size: 20px;
border: 2px solid transparent;
padding: 5px 10px;
border-radius: 3px;
color: #ffffff !important; /* Changed to white */
}
.mobile-menubar:focus {
color: #000000; /* Changed from white */
}
.mean-container .mean-nav {
background: black;
}
.side-mobile-menu .close-icon {
margin-left: 15px !important;
margin-top: 0px !important;
}
.side-mobile-menu .close-icon span {
color: #fff !important;
background: var(--primary-color);
}
/* .side-mobile-menu end*/
/* Preloader specific styles */
body #preloader { /* Increased specificity */
position: fixed !important;
z-index: 9999 !important;
/* The background of #preloader itself can be transparent or white,
as #loading div will cover it */
background: #ffffff !important;
width: 100% !important;
height: 100% !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
#loading {
background-color: #ffff !important; /* Override default.css dark background */
}
#my_carusel{
margin-bottom:70px;
}
#my_carusel_inner {
width: 80%;
margin: 0 auto; /* Center the slider */
position: relative;
}
.page-title{
color:#fff;
font-size:30px;
}
.menu-title {
border-bottom: 1px solid #b2b2b2;
margin-bottom: 20px;
color:#b2b2b2;
}
.dish-meta {
color:#f7b602;
}
.menu-spacer {
margin-bottom:30px;
}
.logo-side {
display: flex;
align-items: center;
justify-content: center;
}
/* Customizations from index.html */
.elfsight-app-b2bf9e49-0c8b-45ae-becb-06de45a6dd0a {
margin-left: auto;
margin-right: auto;
}
/* Menu Customizations */
.menu-block .menu-title {
color: #ffffff;
font-size: 1.8em;
padding-bottom: 10px;
margin-bottom: 25px;
border-bottom: 3px solid #f39c12;
text-transform: uppercase;
letter-spacing: 0.05em;
text-align: center;
}
.menu-block .menu-content {
background-color: #333333;
padding: 20px;
margin-bottom: 20px;
border-radius: 8px;
transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-left-color 0.2s ease-out;
border-left: 5px solid transparent;
}
.menu-block .menu-content:hover {
transform: translateY(-3px);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
border-left-color: #f39c12;
}
.menu-block .dish-title a {
color: #f0f0f0;
font-size: 1.3em;
font-weight: 600;
}
.menu-block .dish-title a:hover {
color: #f39c12;
}
.menu-block .dish-price p {
font-size: 1.2em;
font-weight: 700;
color: #f39c12;
margin-top: 5px;
}
.menu-block .dish-meta {
color: #b0b0b0;
font-size: 0.95em;
}
.menu-block .dish-img {
display: flex;
align-items: center;
justify-content: center;
max-height: 70px; /* Match placeholder height */
overflow: hidden;
}
.menu-block .dish-img img {
border-radius: 50%; /* Keep it circular */
}
/* Menu Book Styles */
.menu-book-container {
position: relative;
width: 100%;
max-width: 900px; /* Adjust as needed, or use % */
margin: 30px auto; /* Centering the book */
padding: 20px;
background-color: #2c2c2c; /* Darker background for the book */
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.menu-book-title-container {
text-align: center;
margin-bottom: 30px;
}
.menu-book-title-container .page-title {
color: #ffffff; /* Ensure title is visible on dark bg */
font-size: 2.5em; /* Make it prominent */
}
.menu-book {
position: relative;
width: 100%;
min-height: 500px; /* Adjust based on content height */
overflow: hidden; /* Crucial for sliding effect */
}
.menu-page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; /* Ensure pages take full height */
padding: 15px;
background-color: #2c2c2c; /* Match book background or slightly lighter */
transform: translateX(100%);
transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smoother transition */
opacity: 0;
visibility: hidden; /* Hide inactive pages for accessibility */
}
.menu-page.active {
transform: translateX(0);
opacity: 1;
visibility: visible;
z-index: 10;
}
.menu-page.prev-page-slide {
transform: translateX(-100%);
opacity: 0;
visibility: hidden;
}
/* Ensure menu-block itself doesn't add extra width causing overflow */
.menu-page .menu-block {
width: 100%;
margin-bottom: 0; /* Remove bottom margin if it's now per page */
}
.menu-nav {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 20px;
margin-top: 20px;
border-top: 1px solid #444;
}
.menu-nav-button {
background-color: #f39c12;
color: #1e1e1e;
border: none;
padding: 12px 25px;
font-size: 1em;
font-weight: bold;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
text-transform: uppercase;
}
.menu-nav-button:hover {
background-color: #e68a00;
transform: translateY(-2px);
}
.menu-nav-button:disabled {
background-color: #555;
color: #888;
cursor: not-allowed;
transform: translateY(0);
}
.page-indicator {
color: #f0f0f0;
font-size: 1em;
font-weight: 500;
}
/* NEW CAROUSEL STYLES ADAPTED FROM v1.2/style.css */
:root {
--card-width: 320px; /* Slightly wider for menu content */
--card-height: 420px; /* Reduced height */
--carousel-height: 520px; /* Reduced height */
--rotation-angle: 50deg;
--translation-x: 60%;
--translation-z: -200px; /* Further back for more perspective */
--scale-side: 0.75;
--transition-speed: 0.5s;
--card-depth: 8px;
}
.menu-carousel-container { /* Renamed from .carousel-container */
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
perspective: 1200px; /* Increased perspective */
position: relative;
min-height: var(--carousel-height); /* Use min-height */
margin-top: 20px; /* Space from title */
padding-bottom: 70px; /* Space for nav buttons below */
}
.menu-carousel { /* Renamed from .carousel */
position: relative;
width: var(--card-width);
height: var(--card-height);
transform-style: preserve-3d;
transition: transform var(--transition-speed) ease-in-out;
}
.menu-carousel-card { /* Renamed from .card */
position: absolute;
top: 0;
left: 0;
width: var(--card-width);
height: var(--card-height);
border-radius: 15px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); /* Enhanced shadow for dark theme */
cursor: default; /* No cursor pointer for menu cards unless interactive */
backface-visibility: hidden;
transition: transform var(--transition-speed) ease-in-out,
opacity var(--transition-speed) ease-in-out;
opacity: 0;
transform: translateZ(calc(2 * var(--translation-z))) scale(0.5);
z-index: 1;
background-color: #1a1a1a; /* Very dark grey/almost black card background */
color: #ffffff; /* All text on card white by default */
display: flex; /* Use flex to allow scrolling content if needed */
flex-direction: column;
}
.menu-carousel-card-content-wrapper { /* New wrapper for scrolling */
overflow-y: auto;
height: 100%;
padding: 15px 10px 15px 15px; /* Reduced padding */
box-sizing: border-box;
scrollbar-width: thin; /* For Firefox - thin scrollbar */
scrollbar-color: #f39c12 #3a3a3a; /* For Firefox - thumb and track color */
}
/* Custom Scrollbar for Webkit browsers */
.menu-carousel-card-content-wrapper::-webkit-scrollbar {
width: 8px; /* Width of the scrollbar */
}
.menu-carousel-card-content-wrapper::-webkit-scrollbar-track {
background: #2c2c2c; /* Background of the scrollbar track */
border-radius: 10px;
}
.menu-carousel-card-content-wrapper::-webkit-scrollbar-thumb {
background-color: #f39c12; /* Color of the scroll thumb (the dot) */
border-radius: 10px; /* Make it rounded */
border: 2px solid #2c2c2c; /* Creates a border around the thumb, making it appear more like a dot */
}
.menu-carousel-card-content-wrapper::-webkit-scrollbar-thumb:hover {
background-color: #e68a00; /* Darker on hover */
}
.menu-carousel-card::before { /* Adapted for new card class */
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: inherit;
background-color: rgba(0, 0, 0, 0.25);
transform: translateZ(calc(-1 * var(--card-depth)));
z-index: -1;
}
/* Specific styling for menu content within cards */
.menu-carousel-card .menu-block {
width: 100%;
margin-bottom: 0;
}
.menu-carousel-card .menu-title { /* Adapting existing menu title style */
color: #ffffff; /* Changed from #f39c12 to white */
font-size: 1.25em; /* Further reduced title */
padding-bottom: 5px; /* Reduced padding */
margin-bottom: 12px; /* Reduced margin */
border-bottom: 1px solid #555555; /* Thinner border */
text-transform: uppercase;
letter-spacing: 0.05em;
text-align: center;
}
.menu-carousel-card .menu-content { /* Adapting existing menu content style */
background-color: transparent; /* Removed #2b2b2b background */
padding: 8px 0; /* Reduced padding */
margin-bottom: 10px; /* Reduced margin */
border-radius: 0; /* Optional: remove radius if no background */
border-left: none; /* Removed 3px solid #f39c12 border */
/* Adding a subtle bottom border for separation instead of background */
border-bottom: 1px solid #333333;
transition: none;
}
.menu-carousel-card .menu-content:last-child {
border-bottom: none; /* Remove border for the last item in a category */
}
.menu-carousel-card .menu-content:hover {
transform: none;
box-shadow: none;
}
.menu-carousel-card .dish-title a {
color: #ffffff; /* White text */
font-size: 0.95em; /* Further reduced dish title */
}
.menu-carousel-card .dish-title a:hover {
color: #dddddd; /* Lighter grey on hover */
}
.menu-carousel-card .dish-price p {
color: #ffffff; /* Changed from #f39c12 to white */
font-size: 0.9em; /* Further reduced price */
}
.menu-carousel-card .dish-meta {
color: #cccccc; /* Lighter grey for meta */
font-size: 0.75em; /* Further reduced meta */
line-height: 1.3; /* Adjust line height for smaller font */
}
.menu-carousel-card .dish-img img {
border-radius: 50%;
width: 45px; /* Further reduced images */
height: 45px;
}
/* Carousel State Classes Handled by JS */
.menu-carousel-card.active { /* Adapted for new card class */
transform: translateX(0) translateZ(0) rotateY(0) scale(1);
opacity: 0;
z-index: 3;
}
.menu-carousel-card.prev { /* Adapted for new card class */
transform: translateX(calc(-1 * var(--translation-x))) translateZ(var(--translation-z)) rotateY(var(--rotation-angle)) scale(var(--scale-side));
opacity: 0.8; /* Side cards slightly less opaque */
z-index: 2;
}
.menu-carousel-card.next { /* Adapted for new card class */
transform: translateX(var(--translation-x)) translateZ(var(--translation-z)) rotateY(calc(-1 * var(--rotation-angle))) scale(var(--scale-side));
opacity: 0.8; /* Side cards slightly less opaque */
z-index: 2;
}
/* Navigation */
.menu-carousel-navigation { /* Renamed from .navigation */
text-align: center;
position: absolute; /* Position buttons relative to container */
bottom: 15px; /* At the bottom of the menu-carousel-container */
left: 50%;
transform: translateX(-50%);
width: 100%;
z-index: 10; /* Above cards */
}
.menu-carousel-nav-btn { /* Renamed from .nav-btn */
background: #f39c12; /* Button background */
border: none;
font-size: 1.8rem; /* Larger buttons */
color: #2c2c2c; /* Dark text on light button */
cursor: pointer;
padding: 8px 18px;
border-radius: 50%; /* Circular buttons */
margin: 0 15px; /* Space between buttons */
transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.menu-carousel-nav-btn:hover {
background-color: #ffffff;
color: #f39c12;
transform: scale(1.1);
}
.menu-carousel-nav-btn:disabled { /* Style for disabled state if needed */
background-color: #555;
color: #888;
cursor: not-allowed;
transform: scale(1);
box-shadow: none;
}
/* Vertical Event Carousel Styles */
.vertical-event-carousel-container {
position: relative;
width: 100%;
max-width: 450px; /* Adjust as needed, consider column width */
height: 350px; /* Adjust height for viewport */
overflow: hidden;
border: 2px solid #f39c12; /* Theme border */
border-radius: 8px;
background-color: rgba(0,0,0,0.3); /* Slight dark background for items */
}
.vertical-event-carousel {
position: relative;
width: 100%;
height: 100%; /* Ensure carousel itself takes up container height */
}
.vertical-event-carousel-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; /* Each item fills the container height */
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
opacity: 0;
transition: opacity 0.5s ease-in-out;
pointer-events: none;
}
.vertical-event-carousel-item.active {
opacity: 1;
pointer-events: auto;
}
.vertical-event-carousel-item img {
max-width: 100%;
max-height: 100%;
width: auto; /* CHANGED from 100% */
height: 100%; /* Make image fill item height */
object-fit: contain; /* CHANGED from cover */
border-radius: 6px; /* Match container rounding slightly */
margin: 0 auto; /* ADDED for centering with contain */
}
.vertical-event-carousel-nav {
position: absolute;
top: 50%; /* Center vertically */
right: -60px; /* Position outside the carousel container */
transform: translateY(-50%);
display: flex;
flex-direction: column;
z-index: 10;
}
.vertical-event-carousel-prev,
.vertical-event-carousel-next {
background-color: #f39c12;
color: #1e1e1e;
border: none;
padding: 10px;
font-size: 1.2em;
font-weight: bold;
cursor: pointer;
border-radius: 50%; /* Circular buttons */
margin: 8px 0;
transition: background-color 0.3s, transform 0.2s;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
}
.vertical-event-carousel-prev:hover,
.vertical-event-carousel-next:hover {
background-color: #e68a00;
transform: scale(1.1);
}
.vertical-event-carousel-prev:disabled,
.vertical-event-carousel-next:disabled {
background-color: #555;
color: #888;
cursor: not-allowed;
transform: scale(1);
}
/* Apply background to the Meniu section */
#meniu {
/* background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../images/food.png'); */ /* Adjusted path for CSS file */
/* background-size: 100%; */
/* background-position: center center; */
padding-top: 50px;
padding-bottom: 50px;
}
/* Event Card Styling - Adapted from example.html */
.events-container {
overflow: hidden; /* Changed from visible to hidden for a cleaner 2D slide */
position: relative;
max-width: 100%;
padding: 0;
min-height: 450px;
margin-top: 0;
}
.event-card {
background-color: transparent; /* Changed from semi-transparent black */
margin-bottom: 40px; /* Increased separation - KEEPING THIS */
/* box-shadow: 0 5px 15px rgba(0,0,0,0.7); /* REMOVED */
/* border-radius: 10px; /* REMOVED - Handled by .event-card-inner */
/* overflow: hidden; /* REMOVED - Handled by .event-card-inner */
/* border-left: 5px solid #f39c12; */ /* Thicker accent - REMOVED */
}
.event-image-overlay {
/* position: absolute; REMOVED */
/* bottom: 0; REMOVED */
/* left: 0; REMOVED */
width: 100%;
background-color: rgba(0, 0, 0, 0.7) !important; /* CHANGED from transparent and made more opaque */
color: white;
padding: 10px 15px 5px 15px; /* ADJUSTED padding */
/* display: flex; REMOVED */
/* flex-direction: column; REMOVED */
/* justify-content: flex-end; REMOVED */
min-height: auto; /* CHANGED */
order: 1; /* ADDED */
text-align: left; /* CHANGED from center to left */
}
.event-image-overlay .date-day {
font-size: 1em;
font-weight: bold;
margin-bottom: 2px;
/* text-shadow: 1px 1px 3px rgba(0,0,0,0.7); REMOVED */
display: block; /* Ensure it takes full width available for text-align */
}
.event-image-overlay .date-day .day-name {
background-color: #f39c12; /* Theme color */
color: #1e1e1e; /* Dark text */
padding: 2px 6px;
border-radius: 3px;
margin-right: 5px;
font-size: 0.85em;
}
.event-image-overlay .time-info {
font-size: 0.85em;
/* display: block; REMOVED as it's overridden by display: none !important; */
/* text-shadow: 1px 1px 3px rgba(0,0,0,0.7); REMOVED */
display: block !important; /* CHANGED to make time info visible */
}
.event-details {
padding: 15px 20px; /* Adjust padding - this will give space around the content */
text-align: left !important;
background-color: transparent; /* Added black background */
}
.event-details h2 {
font-size: 1.4em;
color: #f39c12;
margin-bottom: 8px;
font-weight: 600;
text-align: center !important; /* CHANGED from left to center */
}
.event-details p {
font-size: 0.9em;
margin-bottom: 12px;
color: #cccccc;
line-height: 1.5;
/* max-width: 100%; */ /* Let it be controlled by parent's width and padding */
width: auto; /* Allow paragraph to take available width within parent's padding */
margin-left: 0 !important; /* Ensure it aligns left */
margin-right: 0 !important; /* Ensure it doesn't have auto right margin */
padding-left: 0 !important; /* Remove specific paragraph padding and ensure it sticks */
padding-right: 0 !important; /* Remove specific paragraph padding and ensure it sticks */
text-align: left !important;
}
.event-links { /* This will center the buttons themselves */
justify-content: center;
display: flex; /* If not already flex */
flex-wrap: wrap; /* Allow wrapping */
}
.event-links a {
display: inline-block;
text-decoration: none;
padding: 7px 10px;
border-radius: 4px;
font-weight: bold;
font-size: 0.75em;
margin-right: 8px; /* This provides spacing if they are next to each other */
margin-bottom: 5px; /* If they wrap */
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
text-transform: uppercase;
border: 1px solid #f39c12;
}
.event-links .read-more {
color: #f39c12;
}
.event-links .read-more:hover {
background-color: rgba(243, 156, 18, 0.15);
color: #e68a00;
}
.event-links .reserve {
background-color: #f39c12;
color: #1e1e1e; /* Dark text */
}
.event-links .reserve:hover {
background-color: #e68a00;
border-color: #e68a00;
color: #ffffff;
}
.event-links .buy-ticket { /* New style for the buy ticket button */
color: #ffffff; /* White text */
background-color: transparent; /* No background */
border: 1px solid #ffffff; /* White border */
}
.event-links .buy-ticket:hover { /* Hover state for the new button */
background-color: rgba(255, 255, 255, 0.15); /* Subtle white background on hover */
color: #ffffff; /* Keep text white on hover */
border-color: #ffffff; /* Keep border white on hover */
}
/* Addressing overflow for the home section to allow content to scroll with the page */
#home.slider-area.over-hidden,
#home .single-slider.over-hidden {
overflow: visible !important;
}
#home > .single-slider.slider-height {
min-height: 100vh; /* Ensure it's at least viewport height */
height: auto; /* Allow it to grow with content */
align-items: flex-start; /* Align content to the top of the #home section */
padding-top: 0px; /* Reduced from 35px, moving content much higher */
}
#home .slider-content { /* Ensure slider content can take available width */
width: 100%;
position: relative; /* Ensure content is above overlay */
z-index: 1; /* Ensure content is above overlay */
}
.events-main-title {
font-size: 2.5rem !important; /* Match user's value, add !important */
line-height: 0.9em !important; /* Ensure tight line height, relative to font size, with !important */
font-weight: 600; /* Slightly less than 700, more like the example */
text-transform: none; /* Remove uppercase to match "Glow in the dark" style */
letter-spacing: -0.03em; /* Slightly condense letters for a tighter look at large sizes */
margin-top: 5px; /* Reduced top margin */
margin-bottom: 50px !important; /* Significantly increased from 45px and added !important */
}
/* Increase font size for "Tulum Mamaia" in the home section */
#home .sub-heading {
font-size: 1.1rem; /* Further reduced from 1.2rem */
margin-bottom: 0 !important; /* Remove bottom margin, Events title has top margin */
margin-top: -35px; /* Adjusted to move text higher on desktop */
color: #ffffff !important; /* Change text color to white */
}
/* Style for the new mobile-only Events title */
.events-title-mobile {
display: none; /* Hidden by default (on desktop) */
font-size: 2rem; /* Adjust size as needed for mobile */
font-weight: 600;
margin-top: 10px; /* Space below 'Tulum Mamaia' */
margin-bottom: 20px; /* Space above event cards on mobile */
}
/* Make .header .logo margins smaller */
.header .logo {
margin-top: 10px !important; /* Kept from previous step */
margin-bottom: -45px !important; /* Adjusted for larger logo, was -30px */
position: relative; /* For z-index */
z-index: 100; /* Ensure logo is above header content */
}
@keyframes danceAndStop {
0% { transform: rotate(-3deg) translateY(0px); }
12.5% { transform: rotate(3deg) translateY(-5px); }
25% { transform: rotate(-3deg) translateY(0px); }
37.5% { transform: rotate(3deg) translateY(-5px); }
50% { transform: rotate(-3deg) translateY(0px); }
62.5% { transform: rotate(3deg) translateY(-5px); }
75% { transform: rotate(-3deg) translateY(0px); }
87.5% { transform: rotate(3deg) translateY(-5px); }
100% { transform: none; } /* End in normal state */
}
/* Responsive adjustments for desktop view */
@media (min-width: 992px) {
#home > .single-slider.slider-height {
padding-top: 80px !important; /* Reduced padding to move content higher */
}
}
/* Ensure Font Awesome icons are white and transition */
.fab,
.fa-brands,
.social li a i.fab,
.social li a i.fa-brands {
color: #ffffff !important; /* Changed to white */
transition: color 0.8s ease; /* Made transition slower */
}
/* Styles for social icons when they are over a dark section */
.slider-social-link.social-icons-on-dark-section .social li {
border-color: #000000 !important;
}
.slider-social-link.social-icons-on-dark-section .fab,
.slider-social-link.social-icons-on-dark-section .fa-brands,
.slider-social-link.social-icons-on-dark-section .social li a i.fab,
.slider-social-link.social-icons-on-dark-section .social li a i.fa-brands {
color: #000000 !important;
}
/* Desktop-specific styles for smaller social icons */
@media (min-width: 992px) {
.slider-social-link .social li a {
width: 45px;
height: 40px;
font-size: 16px;
line-height: 40px;
}
.slider-social-link .social li:hover a {
font-size: 20px; /* Adjusted hover font size */
}
}
/* Events Horizontal Carousel Styles */
@media (min-width: 768px) {
/* Remove or comment out old .events-carousel-nav-wrapper and .events-carousel-nav-btn styles */
/* .events-carousel-nav-wrapper {
margin-bottom: 20px;
position: relative;
z-index: 10;
width: 100%;
max-width: 1140px;
margin-left: auto;
margin-right: auto;
padding: 0 15px;
box-sizing: border-box;
}
.events-carousel-nav {
display: flex;
justify-content: space-between;
width: 100%;
}
.events-carousel-nav-btn {
background-color: transparent;
color: #ffffff;
border: 1px solid #ffffff;
border-radius: 5px;
padding: 8px 15px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
pointer-events: auto;
transition: background-color 0.3s, color 0.3s, transform 0.2s;
font-size: 0.9em;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.events-carousel-nav-btn:hover {
background-color: #ffffff;
color: #f39c12;
transform: scale(1.05);
} */
.events-container { /* This is the viewport */
overflow: hidden; /* Crucial: Hide parts of the track that are outside */
position: relative;
/* Calculate max-width for roughly 3 cards. Card: 320px, Margin: 20px */
/* 3 cards = 3 * 320 = 960px. 2 inter-card margins = 2 * 20 = 40px. Total = 1000px */
max-width: 1000px; /* For 3 cards. Adjust if you want more/less visible */
margin-left: auto; /* Center the container if it's not full width of parent */
margin-right: auto;
padding: 0; /* Reset padding, track will handle card spacing */
min-height: auto;
margin-top: 0;
/* display: flex; /* This might not be needed on the container itself anymore */
/* scroll-behavior: smooth; /* Remove, track is transformed */
/* -ms-overflow-style: none; /* Remove */
/* scrollbar-width: none; /* Remove */
}
/* .events-container::-webkit-scrollbar {
display: none;
} */
.events-container .event-card {
width: 320px; /* Fixed width for cards */
flex: 0 0 320px; /* Prevent shrinking/growing, set basis to width */
margin-right: 20px; /* Space between cards */
margin-bottom: 0; /* Reset bottom margin for flex layout */
opacity: 1; /* Ensure cards are visible */
transform: none; /* Reset any transforms */
position: static; /* Reset positioning */
transition: opacity 0.3s ease-out; /* Optional: for future effects */
/* Remove carousel specific properties */
/* transform-style: preserve-3d; */
/* z-index: 1; */
}
.events-container .event-card:last-child {
margin-right: 0; /* No margin for the last card */
}
.events-container .event-card .event-details p {
font-size: 0.8em;
line-height: 1.4;
}
/* Moved from global scope to be desktop-specific */
.events-slider-track {
display: flex;
position: relative;
transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth slide */
}
/* New Arrow Button Styles */
.event-slider-arrow {
position: absolute;
top: 50%; /* Vertically center relative to .events-container height */
transform: translateY(-50%); /* Fine-tune vertical centering */
background-color: rgba(0, 0, 0, 0.5);
color: #ffffff;
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
font-size: 20px;
line-height: 40px; /* For vertical centering of icon if not using flex */
text-align: center;
cursor: pointer;
z-index: 20; /* Ensure they are above event cards */
transition: background-color 0.3s, transform 0.2s;
display: block; /* Initially shown by JS if needed */
}
.event-slider-arrow:hover {
background-color: rgba(243, 156, 18, 0.8); /* Theme color, slightly transparent */
transform: translateY(-50%) scale(1.1);
}
.event-slider-arrow.prev {
left: -20px; /* Position outside the .events-container, adjust as needed */
}
.event-slider-arrow.next {
right: -20px; /* Position outside the .events-container, adjust as needed */
}
.event-slider-arrow:disabled {
background-color: rgba(50, 50, 50, 0.5);
color: #888888;
cursor: not-allowed;
transform: translateY(-50%) scale(1);
}
}
@media (max-width: 768px) { /* MODIFIED FROM 767px */
.events-carousel-nav-wrapper { /* Hide the wrapper and its contents on mobile */
display: none !important; /* Ensure it's hidden */
}
.events-container {
display: block !important; /* Override desktop flex/grid if any */
overflow: visible !important; /* Allow content to flow vertically */
max-width: 700px !important; /* Typical mobile container width */
margin: 30px auto !important; /* Centering for mobile */
padding: 0 15px !important; /* Some horizontal padding for mobile */
min-height: unset !important; /* Unset desktop min-height */
}
.events-slider-track {
display: block !important; /* Stack cards vertically */
transform: none !important; /* Reset any transforms from JS/desktop */
}
.events-container .event-card {
width: 100% !important; /* Full width of mobile container */
flex: none !important; /* Reset flex properties */
margin-right: 0 !important; /* Reset desktop margin */
margin-bottom: 40px !important; /* Restore mobile bottom margin (base style was 40px) */
}
/* Slider background repeat for mobile */
.single-slider[data-background] {
background-repeat: repeat !important; /* Ensure repeat on mobile */
background-size: auto !important; /* Reset background size for tiling */
}
.events-title-mobile {
display: block !important; /* Make visible on mobile */
color: #000000 !important; /* Ensure it's black */
text-align: center !important; /* Ensure it's centered */
}
}
/* END - Added for aurora gradient background on the home slider */
#about {
/* background-image: linear-gradient(-45deg, #F0E68C, #40E0D0, #F0E68C, #40E0D0) !important; */ /* Sand (Khaki) and Turquoise */
/* background-size: 400% 400% !important; */
/* animation: auroraGradient 25s ease-in-out infinite; */
position: relative; /* Ensure proper positioning for animated backgrounds or pseudo-elements */
/* overflow: hidden; is likely handled by the .over-hidden class already on the element */
}
#instagram {
background: transparent !important;
}
#contact {
background: transparent !important;
}
/* Custom style for Instagram section title */
#instagram .section-title h2 {
font-size: 36px; /* Greatly reduced font size */
/* Add any other specific styles for this h2 if needed, e.g., margin, color */
}
/* Set "About Us" section title text to black */
#about .title .theme-color {
color: #ffffff !important; /* Change to white */
}
/* Add a small gap below the "About Us" title */
#about .about-content .title {
margin-bottom: 20px; /* Adjust as needed */
}
/* Set "About Us" content text to white */
#about .about-content p {
color: #ffffff !important;
}
/* Style contact information text to white */
.contact-info-content .text-color {
color: #ffffff !important;
}
/* Style contact information headings to white */
.contact-info-content .contact-text h4 {
color: #ffffff !important;
}
/* Style contact information headings to white */
#contact .contact-text h4 {
color: #ffffff !important;
}
/* Styles for buttons on the back of the event card */
.event-back-links a { /* General style for both buttons on the back */
display: inline-block;
text-decoration: none;
padding: 7px 10px;
border-radius: 4px;
font-weight: bold;
font-size: 0.75em;
margin-right: 8px; /* This provides spacing if they are next to each other */
margin-bottom: 5px; /* If they wrap */
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
text-transform: uppercase;
border: 1px solid #f39c12;
}
.event-back-links .read-more { /* For the 'Back' button, styled like 'Detalii' */
color: #f39c12;
}
.event-back-links .read-more:hover {
background-color: rgba(243, 156, 18, 0.15);
color: #e68a00;
}
.event-back-links .reserve { /* For the 'Rezerva' button */
background-color: #f39c12;
color: #1e1e1e; /* Dark text */
}
.event-back-links .reserve:hover {
background-color: #e68a00;
border-color: #e68a00;
color: #ffffff;
}
.event-links .buy-ticket { /* New style for the buy ticket button */
color: #ffffff; /* White text */
background-color: transparent; /* No background */
border: 1px solid #ffffff; /* White border */
}
.event-links .buy-ticket:hover { /* Hover state for the new button */
background-color: rgba(255, 255, 255, 0.15); /* Subtle white background on hover */
color: #ffffff; /* Keep text white on hover */
border-color: #ffffff; /* Keep border white on hover */
}
/* Addressing overflow for the home section to allow content to scroll with the page */
#home.slider-area.over-hidden,
#home .single-slider.over-hidden {
overflow: visible !important;
}
#home > .single-slider.slider-height {
min-height: 100vh; /* Ensure it's at least viewport height */
height: auto; /* Allow it to grow with content */
align-items: flex-start; /* Align content to the top of the #home section */
padding-top: 0px; /* Reduced from 35px, moving content much higher */
}
#home .slider-content { /* Ensure slider content can take available width */
width: 100%;
position: relative; /* Ensure content is above overlay */
z-index: 1; /* Ensure content is above overlay */
}
.events-main-title {
font-size: 2.5rem !important; /* Match user's value, add !important */
line-height: 0.9em !important; /* Ensure tight line height, relative to font size, with !important */
font-weight: 600; /* Slightly less than 700, more like the example */
text-transform: none; /* Remove uppercase to match "Glow in the dark" style */
letter-spacing: -0.03em; /* Slightly condense letters for a tighter look at large sizes */
margin-top: 5px; /* Reduced top margin */
margin-bottom: 50px !important; /* Significantly increased from 45px and added !important */
}
/* Increase font size for "Tulum Mamaia" in the home section */
#home .sub-heading {
font-size: 1.1rem; /* Further reduced from 1.2rem */
margin-bottom: 0 !important; /* Remove bottom margin, Events title has top margin */
margin-top: -35px; /* Adjusted to move text higher on desktop */
color: #ffffff !important; /* Change text color to white */
}
/* Style for the new mobile-only Events title */
.events-title-mobile {
display: none; /* Hidden by default (on desktop) */
font-size: 2rem; /* Adjust size as needed for mobile */
font-weight: 600;
margin-top: 10px; /* Space below 'Tulum Mamaia' */
margin-bottom: 20px; /* Space above event cards on mobile */
}
/* Make .header .logo margins smaller */
.header .logo {
margin-top: 10px !important; /* Kept from previous step */
margin-bottom: -45px !important; /* Adjusted for larger logo, was -30px */
position: relative; /* For z-index */
z-index: 100; /* Ensure logo is above header content */
}
@keyframes danceAndStop {
0% { transform: rotate(-3deg) translateY(0px); }
12.5% { transform: rotate(3deg) translateY(-5px); }
25% { transform: rotate(-3deg) translateY(0px); }
37.5% { transform: rotate(3deg) translateY(-5px); }
50% { transform: rotate(-3deg) translateY(0px); }
62.5% { transform: rotate(3deg) translateY(-5px); }
75% { transform: rotate(-3deg) translateY(0px); }
87.5% { transform: rotate(3deg) translateY(-5px); }
100% { transform: none; } /* End in normal state */
}
/* Responsive adjustments for desktop view */
@media (min-width: 992px) {
#home > .single-slider.slider-height {
padding-top: 80px !important; /* Reduced padding to move content higher */
}
}
/* Ensure Font Awesome icons are white and transition */
.fab,
.fa-brands,
.social li a i.fab,
.social li a i.fa-brands {
color: #ffffff !important; /* Changed to white */
transition: color 0.8s ease; /* Made transition slower */
}
/* Styles for social icons when they are over a dark section */
.slider-social-link.social-icons-on-dark-section .social li {
border-color: #000000 !important;
}
.slider-social-link.social-icons-on-dark-section .fab,
.slider-social-link.social-icons-on-dark-section .fa-brands,
.slider-social-link.social-icons-on-dark-section .social li a i.fab,
.slider-social-link.social-icons-on-dark-section .social li a i.fa-brands {
color: #000000 !important;
}
/* Desktop-specific styles for smaller social icons */
@media (min-width: 992px) {
.slider-social-link .social li a {
width: 45px;
height: 40px;
font-size: 16px;
line-height: 40px;
}
.slider-social-link .social li:hover a {
font-size: 20px; /* Adjusted hover font size */
}
}
/* Events Horizontal Carousel Styles */
@media (min-width: 768px) {
/* Remove or comment out old .events-carousel-nav-wrapper and .events-carousel-nav-btn styles */
/* .events-carousel-nav-wrapper {
margin-bottom: 20px;
position: relative;
z-index: 10;
width: 100%;
max-width: 1140px;
margin-left: auto;
margin-right: auto;
padding: 0 15px;
box-sizing: border-box;
}
.events-carousel-nav {
display: flex;
justify-content: space-between;
width: 100%;
}
.events-carousel-nav-btn {
background-color: transparent;
color: #ffffff;
border: 1px solid #ffffff;
border-radius: 5px;
padding: 8px 15px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
pointer-events: auto;
transition: background-color 0.3s, color 0.3s, transform 0.2s;
font-size: 0.9em;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.events-carousel-nav-btn:hover {
background-color: #ffffff;
color: #f39c12;
transform: scale(1.05);
} */
.events-container { /* This is the viewport */
overflow: hidden; /* Crucial: Hide parts of the track that are outside */
position: relative;
/* Calculate max-width for roughly 3 cards. Card: 320px, Margin: 20px */
/* 3 cards = 3 * 320 = 960px. 2 inter-card margins = 2 * 20 = 40px. Total = 1000px */
max-width: 1000px; /* For 3 cards. Adjust if you want more/less visible */
margin-left: auto; /* Center the container if it's not full width of parent */
margin-right: auto;
padding: 0; /* Reset padding, track will handle card spacing */
min-height: auto;
margin-top: 0;
/* display: flex; /* This might not be needed on the container itself anymore */
/* scroll-behavior: smooth; /* Remove, track is transformed */
/* -ms-overflow-style: none; /* Remove */
/* scrollbar-width: none; /* Remove */
}
/* .events-container::-webkit-scrollbar {
display: none;
} */
.events-container .event-card {
width: 320px; /* Fixed width for cards */
flex: 0 0 320px; /* Prevent shrinking/growing, set basis to width */
margin-right: 20px; /* Space between cards */
margin-bottom: 0; /* Reset bottom margin for flex layout */
opacity: 1; /* Ensure cards are visible */
transform: none; /* Reset any transforms */
position: static; /* Reset positioning */
transition: opacity 0.3s ease-out; /* Optional: for future effects */
/* Remove carousel specific properties */
/* transform-style: preserve-3d; */
/* z-index: 1; */
}
.events-container .event-card:last-child {
margin-right: 0; /* No margin for the last card */
}
.events-container .event-card .event-details p {
font-size: 0.8em;
line-height: 1.4;
}
/* Moved from global scope to be desktop-specific */
.events-slider-track {
display: flex;
position: relative;
transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth slide */
}
/* New Arrow Button Styles */
.event-slider-arrow {
position: absolute;
top: 50%; /* Vertically center relative to .events-container height */
transform: translateY(-50%); /* Fine-tune vertical centering */
background-color: rgba(0, 0, 0, 0.5);
color: #ffffff;
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
font-size: 20px;
line-height: 40px; /* For vertical centering of icon if not using flex */
text-align: center;
cursor: pointer;
z-index: 20; /* Ensure they are above event cards */
transition: background-color 0.3s, transform 0.2s;
display: block; /* Initially shown by JS if needed */
}
.event-slider-arrow:hover {
background-color: rgba(243, 156, 18, 0.8); /* Theme color, slightly transparent */
transform: translateY(-50%) scale(1.1);
}
.event-slider-arrow.prev {
left: -20px; /* Position outside the .events-container, adjust as needed */
}
.event-slider-arrow.next {
right: -20px; /* Position outside the .events-container, adjust as needed */
}
.event-slider-arrow:disabled {
background-color: rgba(50, 50, 50, 0.5);
color: #888888;
cursor: not-allowed;
transform: translateY(-50%) scale(1);
}
}
@media (max-width: 768px) { /* MODIFIED FROM 767px */
.events-carousel-nav-wrapper { /* Hide the wrapper and its contents on mobile */
display: none !important; /* Ensure it's hidden */
}
.events-container {
display: block !important; /* Override desktop flex/grid if any */
overflow: visible !important; /* Allow content to flow vertically */
max-width: 700px !important; /* Typical mobile container width */
margin: 30px auto !important; /* Centering for mobile */
padding: 0 15px !important; /* Some horizontal padding for mobile */
min-height: unset !important; /* Unset desktop min-height */
}
.events-slider-track {
display: block !important; /* Stack cards vertically */
transform: none !important; /* Reset any transforms from JS/desktop */
}
.events-container .event-card {
width: 100% !important; /* Full width of mobile container */
flex: none !important; /* Reset flex properties */
margin-right: 0 !important; /* Reset desktop margin */
margin-bottom: 40px !important; /* Restore mobile bottom margin (base style was 40px) */
}
/* Slider background repeat for mobile */
.single-slider[data-background] {
background-repeat: repeat !important; /* Ensure repeat on mobile */
background-size: auto !important; /* Reset background size for tiling */
}
.events-title-mobile {
display: block !important; /* Make visible on mobile */
color: #000000 !important; /* Ensure it's black */
text-align: center !important; /* Ensure it's centered */
}
}
/* END - Added for aurora gradient background on the home slider */
#about {
/* background-image: linear-gradient(-45deg, #F0E68C, #40E0D0, #F0E68C, #40E0D0) !important; */ /* Sand (Khaki) and Turquoise */
/* background-size: 400% 400% !important; */
/* animation: auroraGradient 25s ease-in-out infinite; */
position: relative; /* Ensure proper positioning for animated backgrounds or pseudo-elements */
/* overflow: hidden; is likely handled by the .over-hidden class already on the element */
}
#instagram {
background: transparent !important;
}
#contact {
background: transparent !important;
}
/* Custom style for Instagram section title */
#instagram .section-title h2 {
font-size: 36px; /* Greatly reduced font size */
/* Add any other specific styles for this h2 if needed, e.g., margin, color */
}
/* Set "About Us" section title text to black */
#about .title .theme-color {
color: #ffffff !important; /* Change to white */
}
/* Add a small gap below the "About Us" title */
#about .about-content .title {
margin-bottom: 20px; /* Adjust as needed */
}
/* Set "About Us" content text to white */
#about .about-content p {
color: #ffffff !important;
}
/* Style contact information text to white */
.contact-info-content .text-color {
color: #ffffff !important;
}
/* Style contact information headings to white */
.contact-info-content .contact-text h4 {
color: #ffffff !important;
}
/* Style contact information headings to white */
#contact .contact-text h4 {
color: #ffffff !important;
}
/* Styles for buttons on the back of the event card */
.event-back-links a { /* General style for both buttons on the back */
display: inline-block;
text-decoration: none;
padding: 7px 10px;
border-radius: 4px;
font-weight: bold;
font-size: 0.75em;
margin-right: 8px; /* This provides spacing if they are next to each other */
margin-bottom: 5px; /* If they wrap */
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
text-transform: uppercase;
border: 1px solid #f39c12;
}
.event-back-links .read-more { /* For the 'Back' button, styled like 'Detalii' */
color: #f39c12;
}
.event-back-links .read-more:hover {
background-color: rgba(243, 156, 18, 0.15);
color: #e68a00;
}
.event-back-links .reserve { /* For the 'Rezerva' button */
background-color: #f39c12;
color: #1e1e1e; /* Dark text */
}
.event-back-links .reserve:hover {
background-color: #e68a00;
border-color: #e68a00;
color: #ffffff;
}
.event-card-back {
position: absolute; /* Positioned on top of the front */
top: 0;
left: 0;
height: 100%; /* Takes height of event-card-inner (which gets from front) */
transform: rotateY(180deg);
padding: 0; /* Remove padding so image can fill */
/* justify-content: center; REMOVED */
/* align-items: center; REMOVED */
background-color: transparent; /* Image will be the background */
color: #333333; /* Default text color for back, button styled separately */
border-radius: 10px; /* Match the front/inner radius */
overflow: hidden; /* IMPORTANT: to clip the absolute image to the rounded corners */
cursor: pointer; /* Make the entire back face indicate it's clickable */
}
.event-card-back .event-back-overlay { /* New style for the overlay on the back */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8); /* Increased opacity */
z-index: 2; /* Above back image, below button */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
text-align: center;
box-sizing: border-box;
/* cursor: pointer; /* Add cursor pointer for flip-back behavior - REMOVED FROM HERE */
}
/* Pointer event and z-index management for card faces */
.event-card-front {
pointer-events: auto; /* Interactive by default */
z-index: 2; /* On top by default */
}
.event-card-back {
pointer-events: none; /* Not interactive by default (when hidden) */
z-index: 1; /* Behind by default */
}
.event-card.is-flipped .event-card-front {
pointer-events: none; /* Becomes non-interactive when flipped */
z-index: 1; /* Goes behind when flipped */
}
.event-card.is-flipped .event-card-back {
pointer-events: auto; /* Becomes interactive when flipped and visible */
z-index: 2; /* Comes to front when flipped */
cursor: pointer; /* Add cursor pointer here for the entire back face when it's active */
}
/* 18. Profile Avatar Styles
-------------------------------------------------------------- */
.profile-avatar-container {
position: relative;
margin-left: 15px; /* Adjust as needed for spacing from other header items like buttons */
display: flex; /* Align items if needed, e.g., for sticky header adjustments */
align-items: center;
}
.profile-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
border: 2px solid var(--main-color); /* Default border, can be themed, made visible */
transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
display: flex; /* For centering the icon */
align-items: center; /* For centering the icon */
justify-content: center; /* For centering the icon */
font-size: 20px; /* Adjust icon size as needed */
color: var(--primary-color); /* Icon color */
background-color: #ffffff; /* Background for the avatar circle */
}
.profile-avatar:hover {
border-color: var(--main-color); /* Themed border on hover */
background-color: var(--main-color);
color: #ffffff;
}
.sticky-menu .profile-avatar-container {
/* Adjustments if needed when header is sticky */
/* For example, if avatar size/margin changes */
}
.sticky-menu .profile-avatar {
/* Potentially smaller avatar for sticky menu */
/* width: 35px; */
/* height: 35px; */
/* font-size: 18px; */
color: var(--primary-color); /* Icon color for sticky */
background-color: #ffffff; /* Background for sticky */
border-color: var(--main-color); /* Border for sticky */
}
.sticky-menu .profile-avatar:hover {
background-color: var(--main-color);
color: #ffffff;
}
.profile-menu {
display: none; /* Hidden by default */
position: absolute;
top: calc(100% + 10px); /* Position below the avatar with a small gap */
right: 0;
background-color: #ffffff;
color: var(--primary-color);
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 6px 18px rgba(0,0,0,0.1);
padding: 12px 15px;
width: 220px; /* Adjust width as needed */
z-index: 1050; /* Ensure it's above other content, Bootstrap dropdowns are often 1000+ */
opacity: 0;
transform: translateY(10px);
transition: opacity 0.2s ease-out, transform 0.2s ease-out;
pointer-events: none;
}
.profile-menu.active {
display: block; /* Or flex/grid if needed for layout */
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.profile-menu p {
color: var(--primary-color) !important;
margin-bottom: 10px;
font-size: 15px;
line-height: 1.5;
padding: 5px 0;
}
.profile-menu p:last-child {
margin-bottom: 0;
}
/* Mobile Menu Avatar Styles */
.mean-container .mean-nav ul li.profile-avatar-mobile-item {
display: block !important; /* Ensure the avatar item IS visible in the mobile menu. MeanMenu typically makes li block. */
}
.mean-container .mean-nav ul li.profile-avatar-mobile-item > a {
display: flex !important;
align-items: center !important;
padding: 13px 5% !important; /* Adjusted padding to match other menu items */
color: #fff !important;
/* border-top: 1px solid rgba(255, 255, 255, 0.1) !important; Removed separator */
}
.mean-container .mean-nav ul li.profile-avatar-mobile-item > a:hover {
/* Standard hover for meanmenu items, e.g., background-color: rgba(255,255,255,0.05); */
}
.profile-avatar-mobile {
width: auto; /* Adjust width to auto or a specific value if needed */
height: auto; /* Adjust height to auto */
border-radius: 0; /* Remove border-radius if it's not a circular icon */
margin-right: 8px; /* Adjust space between icon and text */
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #ffffff !important;
background-color: transparent;
}
.mean-container .mean-nav ul li.profile-avatar-mobile-item > a span {
flex-grow: 1; /* Allow text to take remaining space */
}
/* Mobile Profile Sub-Menu (simple toggle) */
.mean-container .mean-nav ul li.profile-avatar-mobile-item .mobile-profile-menu-content {
display: none; /* Hidden by default, JS will toggle */
padding-left: 10%; /* Indent further than the main link's 5% */
padding-top: 5px;
padding-bottom: 5px;
background-color: black !important; /* Ensure consistency */
border-top: 1px solid rgba(255, 255, 255, 0.05) !important; /* Subtle separator */
}
.mean-container .mean-nav ul li.profile-avatar-mobile-item .mobile-profile-menu-content p {
color: #e0e0e0 !important; /* Slightly dimmer white for sub-items */
font-size: 14px;
margin: 0 !important;
padding: 8px 0 !important;
line-height: 1.4;
cursor: pointer;
}
.mean-container .mean-nav ul li.profile-avatar-mobile-item .mobile-profile-menu-content p:hover {
color: #fff !important;
background-color: rgba(255,255,255,0.05);
}
/* Styles for the new Mobile Logout Sub-Menu */
.mean-container .mean-nav ul li.profile-avatar-mobile-item .mobile-logout-menu-content {
display: none; /* Hidden by default, JS will toggle */
padding-left: 10%; /* Indent further than the main link's 5% */
padding-top: 5px;
padding-bottom: 5px;
background-color: black !important; /* Ensure consistency */
border-top: 1px solid rgba(255, 255, 255, 0.05) !important; /* Subtle separator */
}
.mean-container .mean-nav ul li.profile-avatar-mobile-item .mobile-logout-menu-content p {
color: #e0e0e0 !important; /* Slightly dimmer white for sub-items */
font-size: 14px;
margin: 0 !important;
padding: 8px 0 !important;
line-height: 1.4;
cursor: pointer;
}
.mean-container .mean-nav ul li.profile-avatar-mobile-item .mobile-logout-menu-content p a {
color: #e0e0e0 !important; /* Ensure link color matches text */
text-decoration: none;
display: block; /* Make the whole area clickable */
}
.mean-container .mean-nav ul li.profile-avatar-mobile-item .mobile-logout-menu-content p:hover,
.mean-container .mean-nav ul li.profile-avatar-mobile-item .mobile-logout-menu-content p a:hover {
color: #fff !important;
background-color: rgba(255,255,255,0.05);
}
/* Responsive: Hide main header avatar on mobile */
@media (max-width: 991px) { /* Adjust breakpoint to match your theme (e.g., 767px for Bootstrap mobile, 991px for tablets and below) */
.header .profile-avatar-container, /* Standard header */
.sticky-menu .profile-avatar-container, /* Sticky header */
.transparent-header .profile-avatar-container /* If avatar is in a transparent header wrapper */
{
display: none !important;
}
}
#instagram .section-title {
margin-bottom: 35px;
}
#instagram.section-padding {
padding-top: 0 !important;
}
@media (min-width: 992px) {
#about {
margin-top: 20px;
}
}
@media (max-width: 991px) {
#about {
margin-bottom: 10px !important;
}
#contact.contact-area {
padding-top: 10px !important; /* Reduced from 30px */
}
}
/* Desktop Header Transparency Enhancement */
@media (min-width: 992px) {
.header-area {
background-color: rgba(0, 0, 0, 0.4) !important; /* Increased transparency for desktop */
backdrop-filter: blur(10px) !important; /* Add blur effect for frosted glass appearance */
-webkit-backdrop-filter: blur(10px) !important; /* Safari support */
}
.sticky-menu {
background-color: rgba(0, 0, 0, 0.4) !important; /* Increased transparency for sticky header on desktop */
backdrop-filter: blur(10px) !important; /* Add blur effect for frosted glass appearance */
-webkit-backdrop-filter: blur(10px) !important; /* Safari support */
}
}