@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;
}

.wear{
    margin-top:50px;
    
}

.wear h3{
   color: var(--color);
   font-weight:600;
}
.gallery-picture{
    margin-top:30px;
}

.gallery-picture .mb-2 img{
    width:100%;
    height:270px;
    margin-bottom:10px;
    object-fit: cover;
}

.equipment h3{
    color:var(--color);
    font-weight:600;
}

.ground{
    width:100%;
    height:auto;
}





@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:45%;
        left:16% !important;
    }
    .contact-topic h1{
        color:white;
        font-size:18px;
    }

    
.wear{
    margin-top:50px;
    
}

.wear h3{
   color: var(--color);
   font-weight:600;
}
.gallery-picture{
    margin-top:30px;
}

.gallery-picture .mb-2 img{
    width:100%;
    height:270px;
    margin-bottom:10px;
    object-fit: cover;
}

.equipment h3{
    color:var(--color);
    font-weight:600;
}

    


}


@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:43%;
        left:22% !important;
    }
    .contact-topic h1{
        color:white;
        font-size:18px;
    }

    
.wear{
    margin-top:50px;
    
}

.wear h3{
   color: var(--color);
   font-weight:600;
}
.gallery-picture{
    margin-top:30px;
}

.gallery-picture .mb-2 img{
    width:100%;
    height:270px;
    margin-bottom:10px;
    object-fit: cover;
}

.equipment h3{
    color:var(--color);
    font-weight:600;
}

    




}

@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:38%;
        left:24% !important;
    }
    .contact-topic h1{
        color:white;
        font-size:18px;
    }

    
.wear{
    margin-top:50px;
    
}

.wear h3{
   color: var(--color);
   font-weight:600;
}
.gallery-picture{
    margin-top:30px;
}

.gallery-picture .mb-2 img{
    width:100%;
    height:270px;
    margin-bottom:10px;
    object-fit: cover;
}

.equipment h3{
    color:var(--color);
    font-weight:600;
}

    




}

@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:50%;
        left:24% !important;
    }
    .contact-topic h1{
        color:white;
        font-size:18px;
    }

    
.wear{
    margin-top:50px;
    
}

.wear h3{
   color: var(--color);
   font-weight:600;
}
.gallery-picture{
    margin-top:30px;
}

.gallery-picture .mb-2 img{
    width:100%;
    height:270px;
    margin-bottom:10px;
    object-fit: cover;
}

.equipment h3{
    color:var(--color);
    font-weight:600;
}

    




}

@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:24%;
        left:38% !important;
    }
    .contact-topic h1{
        color:white;
        font-size:18px;
    }

    
.wear{
    margin-top:50px;
    
}

.wear h3{
   color: var(--color);
   font-weight:600;
}
.gallery-picture{
    margin-top:30px;
}

.gallery-picture .mb-2 img{
    width:100%;
    height:270px;
    margin-bottom:10px;
    object-fit: cover;
}

.equipment h3{
    color:var(--color);
    font-weight:600;
}

    




}