*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth; 
}

body{
    min-height: 100vh;
    background-color:#222222;     

}

#header {
    position: relative;
    min-height: 70vh; 
    overflow: hidden;
    display: flex;
    flex-direction: column;
}


#header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(17,17,17,0.65),rgba(17,17,17,0.65)),url('barber.jpg');
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: auto; 
    z-index: -1;
    
   
    image-rendering: auto; 
    filter: blur(8px);  
    transform: scale(1.05); 
}
        
#head{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1; 
    height: 500px;
}

#title{
    text-transform: uppercase;
    letter-spacing: -1.5px;
    color: rgba(255,255,255,0.9);
    font-size: 50px;
    border-bottom: 1px solid;
    border-top: 1px solid;
    font-weight: 200;
}

#sub{
    margin-top: 10px;
    font-size: 25px;
    color: rgba(255,255,255,0.4);
}
#est{
    color: rgba(255, 255, 255, 0.6);
    font-size:15px;
}
#menu {
    position: fixed;
    top: 0;
    left: 0;         
    width: 100%;     
    z-index: 999;
    transition: all 0.4s ease; 
    padding:20px 10px;
}

#menu ul {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: flex-end;
    gap: 50px;
    list-style: none;
    transition: all 0.4s ease;
}
#menu.scrolled ul {
    justify-content: center;
    gap: 40px; 
}


#menu.scrolled {
    background-color: rgba(17, 17, 17, 0.95);
    backdrop-filter: blur(5px); 
    padding: 10px 0;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

#menu ul li a{
    display: flex;
    text-decoration: none;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 100;
    margin-top: 15px;
    background-image: linear-gradient(to right,transparent,rgb(155, 169, 209),transparent);
    background-position: center bottom;
    background-repeat: no-repeat;
    padding: 10px;
    background-size: 0% 1px;
    transition: 0.3s ease;
   
}

#menu ul li a:hover {
    background-image: linear-gradient(to right, transparent, rgb(161, 209, 210), transparent);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% 1px;
    color: rgba(255, 255, 255, 1); 
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.6); 
}
#info{

    height:500px;
}
#menu.scrolled ul {
    justify-content: center; 
}

#title2{
   
    font-size:40px;
    color:rgba(255, 255, 255, 0.8);
    font-weight: 200;
    letter-spacing: -1.5px;
    background-image: linear-gradient(to right,transparent,white,transparent);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% 1px;
    padding: 10px;
}
#sign {
    font-family: 'Inter', sans-serif;
    font-size: 14px;                   
    font-weight: 100;                 
    text-transform: uppercase;         
    letter-spacing: -1px;               
    color: rgba(255, 255, 255, 0.55);  
    
    
    font-style: normal !important;     
    transform: none !important;        
    display: inline-block;
}


#about-photo {
    flex: 1; 
    height: 500px;
    object-fit: cover;
    filter: brightness(0.65); 
    border-radius: 14px;
}
#about {
    display: flex;
    justify-content: center;
    padding: 80px 20px; 
}
#info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1100px; 
    gap: 60px; 
    height: auto; 
}
.about-paragraph {
    color: rgba(255, 255, 255, 0.5);
    font-size: 18px;
    line-height: 1.6;
    margin-top: 20px;
    font-weight: 100;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif ;
}
.about-text {
    flex: 1; 
    
}

.services {
    display: flex;
    align-items: center;    
    text-align: center;
    padding: 30px 0;        
    overflow: hidden;       
    width: 100%;
}

#services {
    color: rgba(255, 255, 255, 0.5);
    font-size: 24px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 200;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}


#services::before,
#services::after {
    content: "";
    flex-grow: 1;          
    height: 1px;            
    background: rgba(255, 255, 255, 0.2); 
}


#services::before {
    margin-right: 30px;    
}


#services::after {
    margin-left: 30px;      
}


.serve {
    display: flex;
    justify-content: center;
    padding: 0;         
    margin: 0;          
    overflow: hidden; 
    width: 100%;
}

#serve {
    position: relative;
    display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    width: 100%;        
    max-width: 100%;     
    padding: 40px 20px;  
}

#serve::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(17, 17, 17, 0.7), rgba(17, 17, 17, 0.7)), url('offer.jpeg'); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center;
    z-index: -1;
    filter: blur(4px);  
    transform: scale(1.05); 

    
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}




.serve-text {
    flex: 1; 
}

#title3 {
    display: inline-block;
    font-size: 40px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 200;
    letter-spacing: -1.5px;
    background-image: linear-gradient(to right, transparent, rgb(91, 82, 82), transparent);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% 2px;
    padding: 10px;
    margin-bottom: 20px;
}

#list {
    color: rgba(255, 255, 255, 0.7);
    font-size: 18px;
    line-height: 1.6;
    font-weight: 100;
    outline: none;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 14px;
    background-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 5px rgb(71, 67, 67);
    
    width: 100%;
    
    max-width: 1100px;  
    margin: 0 auto;    
    padding: 30px;   
    box-sizing: border-box;
}

#list ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 100%;    
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; 
    gap: 20px 40px; 
}   

#list ul li {
    font-size: 18px; 
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    list-style-type: none;
    letter-spacing: -0.5px;
    font-style: italic;
    font-weight: 200;
    
    display: flex;
    justify-content: space-between; 
    align-items: center;           
    padding: 10px 0;                 
    
   
    width: calc(50% - 20px); 
     
    box-sizing: border-box;
}


@media (max-width: 768px) {
    #list ul li {
        width: 100%;
    }
}




#serve-photo {
    flex: 1; 
    height: 400px;
    object-fit: cover;
    filter: brightness(0.65);
    border-radius: 14px;
}
#Contact{
    height: 600px;

}
#title4 {
    color: rgba(255, 255, 255, 0.5);
    font-size: 24px;
    text-transform: uppercase;
    font-weight: 200;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start; 
    width: 100%;  
    margin-top: 100px;               
}

#title4::before {
    content: "";
    flex-grow: 1;                
    max-width: 150px;           
    height: 1px;            
    background: rgba(255, 255, 255, 0.2); 
    margin-right: 20px;         
}
#info2 {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
    margin: 50px auto 0 auto;   
    padding: 30px 40px; 
    width: 100%;
    max-width: 450px; 
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1); 
    background: rgba(0, 0, 0, 0.1);
    
}

#odo,#til{
    font-size:15px;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 1px;
    
}
#odo{
text-decoration: none;
}
#book{
    text-decoration: none;
    border: 1px solid;
    border-radius: 14px;
    height:60px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 25px;
    width: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top:15px ;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: -1px;
    transition: all 0.3s ease;
}
#book:hover{
    color: rgba(255, 255, 255, 0.8);
}

#name{
    color: beige;
    font-size: 10px;
    letter-spacing: 2px;
}
#insta{
    text-decoration: none;
    border: 1px solid;
    border-radius: 14px;
    display: flex;
    height:30px;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.4);
    padding: 10px;
    width: 400px;
    transition: all 0.3s ease;

}
#insta:hover{
    color: rgba(255, 255, 255, 0.8);
}

.reveal {
    opacity: 0;
    transform: translateY(40px); /* Σπρώχνει το στοιχείο 40px πιο κάτω */
    transition: all 0.9s ease-out; /* Ορίζει την ταχύτητα του εφέ (0.8 δευτερόλεπτα) */
}


.reveal.active {
    opacity: 1;
    transform: translateY(0); /* Έρχεται στην κανονική του θέση */
}
#find{
    font-size:20px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: -0.5px;
}

#rights a {
    display: flex;
    justify-content: space-between; 
    align-items: center;           
    width: 100%;                 
    padding: 15px 40px;           
    box-sizing: border-box;
    text-decoration: none;         
}


#rights a span {
    color: beige;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;    
}


@media (max-width: 768px) {
    #rights a {
        flex-direction: column;
        gap: 10px;
        text-align: center;
        padding: 15px 20px;
    }
}

#clock {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

#time {
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin: 0; 
}

#clock ul {
    list-style: none; 
    padding: 0;      
    margin: 0;
    display: flex;          
    flex-direction: column; 
    gap: 15px;              
}

#clock ul li {
    display: flex;            
    justify-content: space-between; 
    gap: 50px;  
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);               
}
/* ==========================================================================
   RESPONSIVE DESIGN FOR MOBILE DEVICES (max-width: 768px)
   ========================================================================== */
@media screen and (max-width: 768px) {
    
    /* 1. HEADER & MENU */
    #menu ul {
        justify-content: center; 
        gap: 15px;               
        padding: 0 10px;
    }
    
    #menu ul li a {
        font-size: 16px;         
        padding: 5px;
    }
    
    #title {
        font-size: 35px;         
    }
    
    #sub {
        font-size: 20px;         
    }

    
    #book {
        width: 90%;           
        max-width: 320px;      
        font-size: 18px;       
        height: 50px;          
    }

    /* 2. ABOUT US SECTION */
    #about {
        padding: 40px 15px;      
    }
    
    #info {
        flex-direction: column;  
        gap: 30px;
        text-align: center;      
    }
    
    #about-photo {
        width: 100%;             
        height: 300px;           
    }
    
    #title2 {
        font-size: 32px;
    }

    /* 3. SERVICES SEPARATOR */
    #services {
        font-size: 16px;         
        letter-spacing: 1px;
    }
    
    #services::before { margin-right: 15px; }
    #services::after { margin-left: 15px; }

    /* 4. OUR SERVICES LIST */
    #serve {
        padding: 20px 10px;
    }
    
    #title3 {
        font-size: 32px;
    }
    
    #list {
        padding: 15px;           
    }
    
    #list ul li {
        font-size: 14px;         
        gap: 15px;               
    }

    
    #Contact {
        height: auto;           
        padding-bottom: 5px;   
    }

    #title4 {
        margin-top: 5px;      
        justify-content: center;
    }

    #title4::before {
        display: none;         
    }

    #info2 {
        width: 95%;             
        margin: 30px auto 0 auto;
        padding: 25px 20px;     

    #odo, #til {
        font-size: 14px;        
        text-align: center;
    }

    
    #insta {
        width: 100%;            
        max-width: 280px;       
        font-size: 16px;
    }

   
    #clock {
        width: 100%;
        gap: 15px;
    }

    #clock ul li {
        gap: 20px;             
        font-size: 14px;        
    }

    /* 6. FOOTER RIGHTS */
    #rights a {
        flex-direction: column;
        gap: 10px;
        text-align: center;
        padding: 15px 20px;
    }
}