.elementor-1008 .elementor-element.elementor-element-c6dd99f{--display:flex;--margin-top:50px;--margin-bottom:50px;--margin-left:0px;--margin-right:0px;}.elementor-1008 .elementor-element.elementor-element-3d2a54c{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS for container, class: .elementor-element-c6dd99f */.smyrni-hero{

height:90vh;

position:relative;

overflow:hidden;

border-radius:35px;

margin-bottom:80px;


}



.smyrni-hero img{

width:100%;

height:100%;

object-fit:cover;

}



.hero-overlay{

position:absolute;

z-index:2;

left:8%;

top:50%;

transform:translateY(-50%);

color:white;

max-width:500px;

}



.hero-overlay h1{

font-size:65px;

line-height:1.05;

margin-bottom:25px;
color: white;
font-family: Georgia;

}



.hero-overlay p{

font-size:22px;

line-height:1.6;

margin-bottom:35px;
font-family: Abel;





}



.hero-btn{

background:#8CDEE3;

padding:18px 35px;

border-radius:50px;

color:#333;

text-decoration:none;

font-weight:600;

transition:.3s ;
font-family: Georgia;

}



.hero-btn:hover{

background:#F9B6BA;

color:white;

}





.smyrni-hero::after{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

background:linear-gradient(

90deg,

rgba(0,0,0,.65),

rgba(0,0,0,.15)

);

}






.intro-section{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

margin-bottom:90px;

}



.intro-left h2{

font-size:45px;

font-family: Georgia;

margin-bottom:25px;

}



.intro-left p{

font-size:18px;

line-height:1.9;
font-family: Abel;

}



.intro-right img{

width:100%;

border-radius:30px;

}






.tour-icons{

display:grid;

grid-template-columns:repeat(5,1fr);

gap:20px;

margin-bottom:100px;

}



.tour-card{

background:white;

padding:35px;

border-radius:30px;

text-align:center;

box-shadow:0 10px 30px rgba(0,0,0,.08);

transition:.3s;
font-family: Georgia;

}



.tour-card:hover{

transform:translateY(-8px);

}



.tour-card i{

font-size:35px;

color:#8CDEE3;

margin-bottom:20px;

}



.tour-card h3{

margin-bottom:10px;

color:#284B50;

}



.tour-card p{

color:#666;

}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3d2a54c *//* ===========================
   EXPERIENCE TIMELINE
=========================== */


.experience-timeline{

max-width:900px;
margin:100px auto;

}


.experience-timeline > h2,
.smyrni-gallery > h2{

text-align:center;
font-size:45px;

margin-bottom:60px;
font-family: Georgia;

}



.timeline-item{

display:flex;
gap:30px;
position:relative;
margin-bottom:45px;

}



.timeline-item:not(:last-child)::after{

content:"";

position:absolute;

left:32px;

top:65px;

width:2px;

height:70px;

background:#F9B6BA;

}



.timeline-icon{

width:65px;
height:65px;

min-width:65px;

border-radius:50%;

background:#8CDEE3;

color:white;

display:flex;

align-items:center;

justify-content:center;

font-size:25px;

z-index:2;

transition:.3s;

}



.timeline-item:hover .timeline-icon{

background:#219DA5;

}



.timeline-content{

background:#fff9f2;

padding:25px 30px;

border-radius:25px;

flex:1;

}



.timeline-content h3{

margin:0 0 12px;

font-size:24px;


font-family: Abel;

}



.timeline-content p{

margin:0;

font-size:17px;

line-height:1.7;

color:#666;

}







/* ===========================
   MASONRY GALLERY
=========================== */


.smyrni-gallery{

max-width:1200px;

margin:120px auto;

}



.gallery-grid{


columns:4;

column-gap:20px;


}



.gallery-grid img{

width:100%;

margin-bottom:20px;

border-radius:25px;

display:block;

break-inside:avoid;

transition:.4s;

}



.gallery-grid img:hover{

transform:scale(1.03);

}





/* ===========================
   BOOKING CARD
=========================== */


.tour-booking{

margin:100px auto;

max-width:1100px;

}



.booking-card{

background:#8CDEE3;

padding:55px;

border-radius:40px;

color:white;

text-align:center;

box-shadow:0 25px 60px rgba(0,0,0,.15);
font-family: Georgia;

}



.booking-card h2{

font-size:38px;

margin-bottom:45px;

}




.booking-info{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

margin-bottom:45px;

}




.booking-info div{

background:rgba(255,255,255,.08);

padding:25px;

border-radius:20px;

}



.booking-info i{

font-size:30px;

color:#F9B6BA;

margin-bottom:15px;


}



.booking-info strong{

display:block;

font-size:18px;
font-family: Abel;
color: black;

}



.booking-info p{

font-size:15px;

line-height:1.5;

color:black;
font-family: Abel;

}




.book-btn{

display:inline-block;

background:#F9B6BA;

color:white;

padding:18px 45px;

border-radius:50px;

text-decoration:none;

font-weight:600;

transition:.3s;

}



.book-btn:hover{

background:white;

color:#284B50;

}







/* ===========================
   EXTRA INFO
=========================== */


.extra-info{

display:grid;

grid-template-columns:1fr 1fr;

gap:30px;

margin:80px auto;

max-width:1100px;

}



.extra-info > div{

background:#fff9f2;

padding:40px;

border-radius:30px;

text-align:center;

}



.extra-info i{

font-size:40px;

color:#F9B6BA;

margin-bottom:20px;

}



.extra-info h3{

font-family: Georgia;

font-size:25px;

}






/* ===========================
   RESPONSIVE
=========================== */


@media(max-width:1000px){


.gallery-grid{

columns:3;

}



.booking-info{

grid-template-columns:repeat(2,1fr);

}



.tour-icons{

grid-template-columns:repeat(2,1fr);

}


}




@media(max-width:768px){



.smyrni-hero{

height:70vh;

}




.hero-overlay{

left:25px;

right:25px;

}



.hero-overlay h1{

font-size:38px;

}



.hero-overlay p{

font-size:17px;

}




.intro-section{

grid-template-columns:1fr;

gap:30px;

}



.intro-left h2{

font-size:32px;


}



.tour-icons{

grid-template-columns:1fr;

}




.experience-timeline{

padding:0 20px;

}



.experience-timeline > h2,
.smyrni-gallery > h2{

font-size:32px;

}




.timeline-item{

gap:15px;

}



.timeline-icon{

width:50px;

min-width:50px;

height:50px;

font-size:20px;


}



.timeline-item:not(:last-child)::after{

left:24px;

}



.timeline-content{

padding:20px;

}



.timeline-content h3{

font-size:20px;


}





.gallery-grid{

columns:2;

column-gap:12px;

}



.gallery-grid img{

margin-bottom:12px;

border-radius:18px;

}




.booking-card{

padding:30px 20px;

}



.booking-card h2{

font-size:28px;

}




.booking-info{

grid-template-columns:1fr;

}



.extra-info{

grid-template-columns:1fr;

padding:0 20px;

}


}/* End custom CSS */