html {
 
}
@font-face {
    font-family: 'TitilliumMaps29L002';
    src: url('/httpdocs/landing-under-const/assets/fonts/TitilliumMaps29L002.woff2') format('woff2'),
         url('/httpdocs/landing-under-const/assets/fonts/TitilliumMaps29L002.woff') format('woff'),
         url('/httpdocs/landing-under-const/assets/fonts/TitilliumMaps29L002.otf') format('opentype'),
         url('/httpdocs/landing-under-const/assets/fonts/TitilliumMaps29L002.eot');
  }
  

body{
    margin: 0;
    font-family: 'TitilliumMaps29L002', sans-serif;
    background-image: url('https://sisily.gr/landing-under-const/sisily-desktop-background.png');
    background-size: cover;
    background-position: center;
    
    width: 100%;
    padding: 0;
    @media screen and (max-width:1024px) {
        background-image: url('https://sisily.gr/landing-under-const/mobile-background.png');
        
    }
}
#landing{
    .basic-container-width{
        width: 100%;
        .seperate-divs{
            width: 100%;
            display: flex;
            @media screen and (max-width:1024px){
                flex-direction: column-reverse;
            }
            .left-side{
                flex: 0 0 43%;
                max-width: 43%;
                z-index: 2;
                @media screen and (max-width:1280px) {
                    flex: 0 0 50%;
                    max-width: 50%;
                    
                }
                @media screen and (max-width:1024px) {
                    flex: 0 0 100%;
                    max-width: 100%;
                    
                }
                .image-full-left-side{
                    max-width: 100%;
                    height: auto;
                    @media screen and (max-width:1024px) {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                    .img-fluid{
                        max-width: 100%;
                        // @media screen and (max-width:1859px) {
                        //     max-width: 800px;    
                        // }
                        // @media screen and (max-width:1500px) {
                        //     max-width: 700px;    
                        // }
                        
                        // @media screen and (max-width:1330px) {
                        //     max-width: 670px;  
                        // }
                        // @media screen and (max-width:1280px) {
                        //     max-width: 600px;
                        // }
                        // @media screen and (max-width:1120px) {
                        //     max-width: 500px;
                        //     margin-top: 100px;                            
                        // }
                        // @media screen and (max-width:992px) {
                        //     width: 100%;
                        //     margin-top: 0;                            
                        // }
                    }
                }
                
            }
            .right-side{
                flex: 0 0 57%;
                max-width: 57%;
               width: 100%;
               display: flex;
               justify-content: center;
               @media screen and (max-width:1024px) {
                flex: 0 0 100%;
                max-width: 100%;
                
            }
               .data-seperator{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    width: 100%;
                    gap: 30px;
                    @media screen and (max-width:1800px){
                        gap:0;
                    }
                    @media screen and (max-width:992px) {
                        gap:20px;
                        
                    }
                    .logo-sisily{
                        .img-fluid{
                        @media screen and (max-width:1800px) {
                            width: 300px;
                            margin-top: 40px;
                            
                        }

                    }

                    }
                    .sisily-text{
                        font-weight: 300;
                        font-size: 30px;
                        color: #3d2873;
                        @media screen and (max-width:1800px){
                            margin-bottom: 40px;
                        }
                        @media screen and (max-width:992px) {
                            margin-bottom: 0;
                            font-size: 24px;
                        }
                        .inside-sisily-text{
                            font-weight: bold;
                            font-size: 30px;
                            color: #3d2873;
                            text-decoration: none;
                            @media screen and (max-width:992px) {
                                font-size: 24px;
                            }
                        }

                    }
                    .social-icons{
                        display: flex;
                        gap: 20px;
                        @media screen and (max-width:1800px) 
                        {
                            margin-bottom: 20px;    
                        }
                        img{
                            width: 50px;
                            height: 70px;
                            @media screen and (max-width:1440px) 
                            {
                                width: 40px;
                                height: 60px;
                            }
                            @media screen and (max-width:1280px) {
                                width: 30px;
                                height: 40px;
                            }
                        }
                    }
                    .info-store{
                        width: 100%;
                        .seperator{

                            background-color: #f3f3f375;
                            display: flex;
                            gap:60px;
                            padding: 50px 0;
                            position: relative;
                            justify-content: center;
                            @media screen and (max-width:1440px) {
                                gap:20px;
                                
                            }
                            @media screen and (max-width:1330px) {
                                gap:10px;
                                
                            }
                            @media screen and (max-width:1280px) {
                                padding: 20px 0;
                                
                            }
                            @media screen and (max-width:1024px) {
                                padding: 50px 0;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                gap: 40px;
                                
                            }
                            @media screen and (max-width:767px) {
                                flex-wrap: wrap;
                            }
                            &:before{
                                content : "";
                                position:absolute;
                                top:0;
                                left:-100%;
                                width:100%;
                                height:100%;
                                background:#f3f3f375;
                            }
                            .basic-content{
                                display: flex;
                                flex-direction: column;
                                gap: 16px;
                                position: relative;
                                @media screen and (max-width:767px) {
                                    align-items: center;
                                    justify-content: center;
                                    max-width: 180px;
                                    
                                }
                                .store-address{
                                    margin-top: 0;
                                    margin-bottom: 0;
                                    font-size: 26px;
                                    color: #3D2873;
                                    font-weight: bold;
                                    @media screen and (max-width:1440px) {
                                        font-size: 23px;
                                    }
                                    @media screen and (max-width:1330px) {
                                        font-size: 19px;
                                    }
                                    @media screen and (max-width:767px) {
                                        align-items: center;
                                        justify-content: center;
                                        
                                    }
                                }
                                .map-address{
                                    display: flex;
                                    flex-direction: column;
                                    gap: 20px;
                                    .road{
                                        display: flex;
                                        align-items: center;
                                        gap: 5px;
                                        max-width: 220px;
                                        img {
                                            height: 27px;
                                        }
                                        .address-info{
                                            a {
                                                text-decoration: none;
                                                font-size: 16px;
                                                color: #3D2873;
                                                font-weight: bold;
                                                cursor: pointer;
                                                @media screen and (max-width:1440px) {
                                                    font-size: 14px;
                                                    
                                                }
                                            }
                                        }
                                    }
                                    .phone{
                                        display: flex;
                                        align-items: center;
                                        gap: 10px;
                                        img{
                                            height: 27px;
                                        }
                                        .address-info{
                                            a {
                                                text-decoration: none;
                                                font-size: 19px;
                                                color: #3D2873;
                                                font-weight: bold;
                                                cursor: pointer;
                                                @media screen and (max-width:1440px) {
                                                    font-size: 16px;
                                                    
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                    .email-store{
                        .email{
                            display: flex;
                            align-items: center;
                            gap: 10px;
                            @media screen and (max-width:1800px) 
                            {
                                margin-top: 40px;    
                            }
                            @media screen and (max-width:992px) 
                            {
                                margin-top: 0;    
                            }
                            .email-info{
                                display: flex;
                                align-items: center;
                                gap:10px;
                                .email{
                                    .img-fluid{
                                        height: 40px;
                                        @media screen and (max-width:767px) {
                                            height: 27px;
                                            
                                        }
                                    }
                                   
                                    .email-info{
                                        a{
                                            
                                        font-size: 30px;
                                        letter-spacing: 2px;
                                        color: #3d2873;
                                        text-decoration: none;
                                        cursor:pointer;
                                        @media screen and (max-width:1280px) {
                                            font-size: 24px;
                                        }
                                        }

                                    }
                                }
                                
                            }
                        }
                    }
              
               }
          
            
            }
        }
    }
}