@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@500&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Work Sans', sans-serif;

    text-decoration: none !important;
    transition: 0.5s;
}

:root{
    --color:#cc1029;
    --gray:#424a4d;
    --white:white;
    --black:black;
}


.img-1{
    width: 100%;
    height: 60vh;
    object-fit: cover;
    position: relative;
}


header{
    position: relative;
    width:100%;
    height: auto;
}


.contact-topic{
    position:absolute;
    top:47%;
    left:46% !important;
}
.contact-topic h1{
    color:white;
}


.gallery-picture{
    margin-top:60px;
    margin-bottom: 60px;
    /* overflow: hidden; */
 
}
.gallery-picture .col-lg-4{
    position: relative;
    z-index: 0;
    /* overflow: hidden; */
}
.gallery-picture .mb-2 img{
    width:100%;
    height:280px;
    margin-bottom:10px;
    object-fit: cover;
  
}



@media screen and (max-width:320px){


    .img-1{
        width: 100%;
        height: 60vh;
        object-fit: cover;
        position: relative;
    }
    
    
    header{
        position: relative;
        width:100%;
        height: auto;
    }
    
    
    .contact-topic{
        position:absolute;
        top:50% !important; 
        left:30% !important;
    }
    .contact-topic h1{
        color:white;
        font-size:30px !important;
    }
    
    
.gallery-picture{
    margin-top:60px;
    margin-bottom: 60px;
    /* overflow: hidden; */
 
}
.gallery-picture .col-lg-4{
    position: relative;
    z-index: 0;
    /* overflow: hidden; */
}
.gallery-picture .mb-2 img{
    width:100%;
    height:280px;
    margin-bottom:10px;
    object-fit: cover;
  
}


}

@media screen and (min-width:321px) and (max-width:375px){


    .img-1{
        width: 100%;
        height: 60vh;
        object-fit: cover;
        position: relative;
    }
    
    
    header{
        position: relative;
        width:100%;
        height: auto;
    }
    
    
    .contact-topic{
        position:absolute;
        top:55% !important; 
        left:32% !important;
    }
    .contact-topic h1{
        color:white;
        font-size:30px !important;
    }
    
    
.gallery-picture{
    margin-top:60px;
    margin-bottom: 60px;
    /* overflow: hidden; */
 
}
.gallery-picture .col-lg-4{
    position: relative;
    z-index: 0;
    /* overflow: hidden; */
}
.gallery-picture .mb-2 img{
    width:100%;
    height:280px;
    margin-bottom:10px;
    object-fit: cover;
  
}




}

@media screen and (min-width:376px) and (max-width:425px){


    .img-1{
        width: 100%;
        height: 60vh;
        object-fit: cover;
        position: relative;
    }
    
    
    header{
        position: relative;
        width:100%;
        height: auto;
    }
    
    
    .contact-topic{
        position:absolute;
        top:40% !important; 
        left:35% !important;
    }
    .contact-topic h1{
        color:white;
        font-size:30px !important;
    }
    
    
.gallery-picture{
    margin-top:60px;
    margin-bottom: 60px;
    /* overflow: hidden; */
 
}
.gallery-picture .col-lg-4{
    position: relative;
    z-index: 0;
    /* overflow: hidden; */
}
.gallery-picture .mb-2 img{
    width:100%;
    height:280px;
    margin-bottom:10px;
    object-fit: cover;
  
}


}

@media screen and (min-width:426px) and (max-width:600px){


    .img-1{
        width: 100%;
        height: 60vh;
        object-fit: cover;
        position: relative;
    }
    
    
    header{
        position: relative;
        width:100%;
        height: auto;
    }
    
    
    .contact-topic{
        position:absolute;
        top:55% !important; 
        left:35% !important;
    }
    .contact-topic h1{
        color:white;
        font-size:30px !important;
    }
    
    
.gallery-picture{
    margin-top:60px;
    margin-bottom: 60px;
    /* overflow: hidden; */
 
}
.gallery-picture .col-lg-4{
    position: relative;
    z-index: 0;
    /* overflow: hidden; */
}
.gallery-picture .mb-2 img{
    width:100%;
    height:280px;
    margin-bottom:10px;
    object-fit: cover;
  
}




}

@media screen and (min-width:601px) and (max-width:768px){


    .img-1{
        width: 100%;
        height: 60vh;
        object-fit: cover;
        position: relative;
    }
    
    
    header{
        position: relative;
        width:100%;
        height: auto;
    }
    
    
    .contact-topic{
        position:absolute;
        top:25% !important; 
        left:42% !important;
    }
    .contact-topic h1{
        color:white;
        font-size:30px !important;
    }
    
    
.gallery-picture{
    margin-top:60px;
    margin-bottom: 60px;
    /* overflow: hidden; */
 
}
.gallery-picture .col-lg-4{
    position: relative;
    z-index: 0;
    /* overflow: hidden; */
}
.gallery-picture .mb-2 img{
    width:100%;
    height:280px;
    margin-bottom:10px;
    object-fit: cover;
  
}


}

@media screen and (min-width:769px) and (max-width:900px){

   
    .img-1{
        width: 100%;
        height: 60vh;
        object-fit: cover;
        position: relative;
    }
    
    
    header{
        position: relative;
        width:100%;
        height: auto;
    }
    
    
    .contact-topic{
        position:absolute;
        top:45% !important; 
        left:42% !important;
    }
    .contact-topic h1{
        color:white;
        font-size:30px !important;
    }
    
    
.gallery-picture{
    margin-top:60px;
    margin-bottom: 60px;
    /* overflow: hidden; */
 
}
.gallery-picture .col-lg-4{
    position: relative;
    z-index: 0;
    /* overflow: hidden; */
}
.gallery-picture .mb-2 img{
    width:100%;
    height:280px;
    margin-bottom:10px;
    object-fit: cover;
  
}


 
    }

@media screen and (min-width:901px) and (max-width:992px){

  
    .img-1{
        width: 100%;
        height: 60vh;
        object-fit: cover;
        position: relative;
    }
    
    
    header{
        position: relative;
        width:100%;
        height: auto;
    }
    
    
    .contact-topic{
        position:absolute;
        top:20% !important; 
        left:42% !important;
    }
    .contact-topic h1{
        color:white;
        font-size:30px !important;
    }
    
    
.gallery-picture{
    margin-top:60px;
    margin-bottom: 60px;
    /* overflow: hidden; */
 
}
.gallery-picture .col-lg-4{
    position: relative;
    z-index: 0;
    /* overflow: hidden; */
}
.gallery-picture .mb-2 img{
    width:100%;
    height:280px;
    margin-bottom:10px;
    object-fit: cover;
  
}





}