@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:44%;
}
.contact-topic h1{
    color:white;
}


.services .service-title {
    margin-bottom: 4%;
    margin-top:50px;
}

.services .service-title h5 {
    color: var(--color);
    font-family: 'Work Sans', sans-serif;
    font-weight:bolder;
    font-size: 30px;
}


.services .service-title p{
    font-size: 17px;
    font-family: 'Work Sans', sans-serif;
}

.services .service-title a {
    width: 150px;
    margin-top: 2%;
    padding: 1% 1.5%;
    background-color: var(--c2);
    color: var(--white);
    text-decoration: none;
    border-radius: 5px;
    font-family: 'Work Sans', sans-serif;
    transition: 1s;
}

.services .service-title a:hover {
    transition: 1s;
    background-color: var(--black);
    font-weight: 500;
    color: var(--white);
}

.services button {
    margin-bottom: 3%;
    text-align: justify;
    font-family: 'Work Sans', sans-serif;
    background: none;
    color: var(--black);
    transition: 0.5s;
    font-size: 16px;
    width: 100%;
}

.services button:hover {
    color: white !important;
    background-color: black !important;
}

.-services .nav-pills {
    border-bottom: 3px solid var(--color);
    background-color: var(--white);
    width: 100%;
    /* width: 100%;
    flex-direction: row !important; */
}

.services .nav-pills .active {
    background: var(--color) !important;
    border-left: 5px solid var(--black) !important;
    color: var(--white) !important;
    width:22%;
}


.services .tab-content {
    width:100%;
}


.services .tab-content .tab-pane {
    height: auto;
    width: 100%;
}

.services .tab-content .tab-pane img {
    width:100%;
    height:360px;
    object-fit: cover;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.nav-link{
    width:20% !important;
    text-align: center !important;
    margin-left:8%;
}
.tab-pane  ul li{
    color:black;
    font-weight:600;
}
#v-pills-messages p{
     text-align: center;
}
#v-pills-messages .ground {
    margin-top:35px;
    width:100%;
    height:auto;
    object-fit: cover;
}
.gallery-picture{
    margin-top:20px;
}

video{
    width:50%;
    height:250px;
}










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


    .services .service-title {
        margin-bottom: 4%;
        margin-top:50px;
    }
    
    .services .service-title h5 {
        color: var(--color);
        font-family: 'Work Sans', sans-serif;
        font-weight:bolder;
        font-size: 30px;
    }
    
    
    .services .service-title p{
        font-size: 17px;
        font-family: 'Work Sans', sans-serif;
    }
    
    .services .service-title a {
        width: 150px;
        margin-top: 2%;
        padding: 1% 1.5%;
        background-color: var(--c2);
        color: var(--white);
        text-decoration: none;
        border-radius: 5px;
        font-family: 'Work Sans', sans-serif;
        transition: 1s;
    }
    
    .services .service-title a:hover {
        transition: 1s;
        background-color: var(--black);
        font-weight: 500;
        color: var(--white);
    }
    
    .services button {
        margin-bottom: 3%;
        text-align: justify;
        font-family: 'Work Sans', sans-serif;
        background: none;
        color: var(--black);
        transition: 0.5s;
        font-size: 16px;
        width: 100%;
    }
    
    .services button:hover {
        color: white !important;
        background-color: black !important;
    }
    
    .-services .nav-pills {
        border-bottom: 3px solid var(--color);
        background-color: var(--white);
        width: 100%;
        /* width: 100%;
        flex-direction: row !important; */
    }

    .services .nav-pills .nav-link{
           width: 100% !important;
    }
    
    .services .nav-pills .active {
        background: var(--color) !important;
        border-left: 5px solid var(--black) !important;
        color: var(--white) !important;
      
    }
    
    
    .services .tab-content {
        width:100%;
       
    }
    
    
    .services .tab-content .tab-pane {
        height: auto;
        width: 100%;
    }
    
    .services .tab-content .tab-pane img {
        width:100%;
        height:360px;
        object-fit: cover;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    }
    
    .nav-link{
        width:20% !important;
        text-align: center !important;
        margin-left:8%;
    }
    .tab-pane  ul li{
        color:black;
        font-weight:600;
    }
    #v-pills-messages p{
         text-align: center;
    }
    #v-pills-messages img{
        margin-top:25px;
        width:100%;
        height:auto;
        object-fit: cover;
    }
    
    video{
        width:100%;
        height:220px;
    }
    




}

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

    .services .service-title {
        margin-bottom: 4%;
        margin-top:50px;
    }
    
    .services .service-title h5 {
        color: var(--color);
        font-family: 'Work Sans', sans-serif;
        font-weight:bolder;
        font-size: 30px;
    }
    
    
    .services .service-title p{
        font-size: 17px;
        font-family: 'Work Sans', sans-serif;
    }
    
    .services .service-title a {
        width: 150px;
        margin-top: 2%;
        padding: 1% 1.5%;
        background-color: var(--c2);
        color: var(--white);
        text-decoration: none;
        border-radius: 5px;
        font-family: 'Work Sans', sans-serif;
        transition: 1s;
    }
    
    .services .service-title a:hover {
        transition: 1s;
        background-color: var(--black);
        font-weight: 500;
        color: var(--white);
    }
    
    .services button {
        margin-bottom: 3%;
        text-align: justify;
        font-family: 'Work Sans', sans-serif;
        background: none;
        color: var(--black);
        transition: 0.5s;
        font-size: 16px;
        width: 100%;
    }
    
    .services button:hover {
        color: white !important;
        background-color: black !important;
    }
    
    .-services .nav-pills {
        border-bottom: 3px solid var(--color);
        background-color: var(--white);
        width: 100%;
        /* width: 100%;
        flex-direction: row !important; */
    }

    .services .nav-pills .nav-link{
           width: 100% !important;
    }
    
    .services .nav-pills .active {
        background: var(--color) !important;
        border-left: 5px solid var(--black) !important;
        color: var(--white) !important;
      
    }
    
    
    .services .tab-content {
        width:100%;
       
    }
    
    
    .services .tab-content .tab-pane {
        height: auto;
        width: 100%;
    }
    
    .services .tab-content .tab-pane img {
        width:100%;
        height:360px;
        object-fit: cover;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    }
    
    .nav-link{
        width:20% !important;
        text-align: center !important;
        margin-left:8%;
    }
    .tab-pane  ul li{
        color:black;
        font-weight:600;
    }
    #v-pills-messages p{
         text-align: center;
    }
    #v-pills-messages img{
        margin-top:25px;
        width:100%;
        height:auto;
        object-fit: cover;
    }
    
        
    video{
        width:100%;
        height:220px;
    }
    







}

@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:26%;
}
.contact-topic h1{
    color:white;
    font-size:32px;
}


    .services .service-title {
        margin-bottom: 4%;
        margin-top:50px;
    }
    
    .services .service-title h5 {
        color: var(--color);
        font-family: 'Work Sans', sans-serif;
        font-weight:bolder;
        font-size: 30px;
    }
    
    
    .services .service-title p{
        font-size: 17px;
        font-family: 'Work Sans', sans-serif;
    }
    
    .services .service-title a {
        width: 150px;
        margin-top: 2%;
        padding: 1% 1.5%;
        background-color: var(--c2);
        color: var(--white);
        text-decoration: none;
        border-radius: 5px;
        font-family: 'Work Sans', sans-serif;
        transition: 1s;
    }
    
    .services .service-title a:hover {
        transition: 1s;
        background-color: var(--black);
        font-weight: 500;
        color: var(--white);
    }
    
    .services button {
        margin-bottom: 3%;
        text-align: justify;
        font-family: 'Work Sans', sans-serif;
        background: none;
        color: var(--black);
        transition: 0.5s;
        font-size: 16px;
        width: 100%;
    }
    
    .services button:hover {
        color: white !important;
        background-color: black !important;
    }
    
    .-services .nav-pills {
        border-bottom: 3px solid var(--color);
        background-color: var(--white);
        width: 100%;
        /* width: 100%;
        flex-direction: row !important; */
    }

    .services .nav-pills .nav-link{
           width: 100% !important;
    }
    
    .services .nav-pills .active {
        background: var(--color) !important;
        border-left: 5px solid var(--black) !important;
        color: var(--white) !important;
      
    }
    
    
    .services .tab-content {
        width:100%;
       
    }
    
    
    .services .tab-content .tab-pane {
        height: auto;
        width: 100%;
    }
    
    .services .tab-content .tab-pane img {
        width:100%;
        height:360px;
        object-fit: cover;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    }
    
    .nav-link{
        width:20% !important;
        text-align: center !important;
        margin-left:8%;
    }
    .tab-pane  ul li{
        color:black;
        font-weight:600;
    }
    #v-pills-messages p{
         text-align: center;
    }
    #v-pills-messages img{
        margin-top:25px;
        width:100%;
        height:auto;
        object-fit: cover;
    }
    video{
        width:100%;
        height:220px;
    }
    



    
}

@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:60%;
        left:33%;
    }
    .contact-topic h1{
        color:white;
        font-size:32px;
    }
    
    
        .services .service-title {
            margin-bottom: 4%;
            margin-top:50px;
        }
        
        .services .service-title h5 {
            color: var(--color);
            font-family: 'Work Sans', sans-serif;
            font-weight:bolder;
            font-size: 30px;
        }
        
        
        .services .service-title p{
            font-size: 17px;
            font-family: 'Work Sans', sans-serif;
        }
        
        .services .service-title a {
            width: 150px;
            margin-top: 2%;
            padding: 1% 1.5%;
            background-color: var(--c2);
            color: var(--white);
            text-decoration: none;
            border-radius: 5px;
            font-family: 'Work Sans', sans-serif;
            transition: 1s;
        }
        
        .services .service-title a:hover {
            transition: 1s;
            background-color: var(--black);
            font-weight: 500;
            color: var(--white);
        }
        
        .services button {
            margin-bottom: 3%;
            text-align: justify;
            font-family: 'Work Sans', sans-serif;
            background: none;
            color: var(--black);
            transition: 0.5s;
            font-size: 16px;
            width: 100%;
        }
        
        .services button:hover {
            color: white !important;
            background-color: black !important;
        }
        
        .-services .nav-pills {
            border-bottom: 3px solid var(--color);
            background-color: var(--white);
            width: 100%;
            /* width: 100%;
            flex-direction: row !important; */
        }
    
        .services .nav-pills .nav-link{
               width: 100% !important;
        }
        
        .services .nav-pills .active {
            background: var(--color) !important;
            border-left: 5px solid var(--black) !important;
            color: var(--white) !important;
          
        }
        
        
        .services .tab-content {
            width:100%;
           
        }
        
        
        .services .tab-content .tab-pane {
            height: auto;
            width: 100%;
        }
        
        .services .tab-content .tab-pane img {
            width:100%;
            height:360px;
            object-fit: cover;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        }
        
        .nav-link{
            width:20% !important;
            text-align: center !important;
            margin-left:8%;
        }
        .tab-pane  ul li{
            color:black;
            font-weight:600;
        }
        #v-pills-messages p{
             text-align: center;
        }
        #v-pills-messages img{
            margin-top:25px;
            width:100%;
            height:auto;
            object-fit: cover;
        }
        video{
            width:100%;
            height:220px;
        }
        


    }

    @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:45%;
        left:33%;
    }
    .contact-topic h1{
        color:white;
        font-size:32px;
    }
    
    
        .services .service-title {
            margin-bottom: 4%;
            margin-top:50px;
        }
        
        .services .service-title h5 {
            color: var(--color);
            font-family: 'Work Sans', sans-serif;
            font-weight:bolder;
            font-size: 30px;
        }
        
        
        .services .service-title p{
            font-size: 17px;
            font-family: 'Work Sans', sans-serif;
        }
        
        .services .service-title a {
            width: 150px;
            margin-top: 2%;
            padding: 1% 1.5%;
            background-color: var(--c2);
            color: var(--white);
            text-decoration: none;
            border-radius: 5px;
            font-family: 'Work Sans', sans-serif;
            transition: 1s;
        }
        
        .services .service-title a:hover {
            transition: 1s;
            background-color: var(--black);
            font-weight: 500;
            color: var(--white);
        }
        
        .services button {
            margin-bottom: 3%;
            text-align: justify;
            font-family: 'Work Sans', sans-serif;
            background: none;
            color: var(--black);
            transition: 0.5s;
            font-size: 16px;
            width: 100%;
        }
        
        .services button:hover {
            color: white !important;
            background-color: black !important;
        }
        
        .-services .nav-pills {
            border-bottom: 3px solid var(--color);
            background-color: var(--white);
            width: 100%;
            /* width: 100%;
            flex-direction: row !important; */
        }
    
        .services .nav-pills .nav-link{
               width: 100% !important;
        }
        
        .services .nav-pills .active {
            background: var(--color) !important;
            border-left: 5px solid var(--black) !important;
            color: var(--white) !important;
          
        }
        
        
        .services .tab-content {
            width:100%;
           
        }
        
        
        .services .tab-content .tab-pane {
            height: auto;
            width: 100%;
        }
        
        .services .tab-content .tab-pane img {
            width:100%;
            height:360px;
            object-fit: cover;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        }
        
        .nav-link{
            width:20% !important;
            text-align: center !important;
            margin-left:8%;
        }
        .tab-pane  ul li{
            color:black;
            font-weight:600;
        }
        #v-pills-messages p{
             text-align: center;
        }
        #v-pills-messages img{
            margin-top:25px;
            width:100%;
            height:auto;
            object-fit: cover;
        }
        video{
            width:100%;
            height:220px;
        }

    }

@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:20% !important;
        left:33%;
    }
    .contact-topic h1{
        color:white;
        font-size:32px;
    }
    
    
        .services .service-title {
            margin-bottom: 4%;
            margin-top:50px;
        }
        
        .services .service-title h5 {
            color: var(--color);
            font-family: 'Work Sans', sans-serif;
            font-weight:bolder;
            font-size: 30px;
        }
        
        
        .services .service-title p{
            font-size: 17px;
            font-family: 'Work Sans', sans-serif;
        }
        
        .services .service-title a {
            width: 150px;
            margin-top: 2%;
            padding: 1% 1.5%;
            background-color: var(--c2);
            color: var(--white);
            text-decoration: none;
            border-radius: 5px;
            font-family: 'Work Sans', sans-serif;
            transition: 1s;
        }
        
        .services .service-title a:hover {
            transition: 1s;
            background-color: var(--black);
            font-weight: 500;
            color: var(--white);
        }
        
        .services button {
            margin-bottom: 3%;
            text-align: justify;
            font-family: 'Work Sans', sans-serif;
            background: none;
            color: var(--black);
            transition: 0.5s;
            font-size: 16px;
            width: 100%;
        }
        
        .services button:hover {
            color: white !important;
            background-color: black !important;
        }
        
        .-services .nav-pills {
            border-bottom: 3px solid var(--color);
            background-color: var(--white);
            width: 100%;
            /* width: 100%;
            flex-direction: row !important; */
        }
    
        .services .nav-pills .nav-link{
               width: 100% !important;
        }
        
        .services .nav-pills .active {
            background: var(--color) !important;
            border-left: 5px solid var(--black) !important;
            color: var(--white) !important;
          
        }
        
        
        .services .tab-content {
            width:100%;
           
        }
        
        
        .services .tab-content .tab-pane {
            height: auto;
            width: 100%;
        }
        
        .services .tab-content .tab-pane img {
            width:100%;
            height:360px;
            object-fit: cover;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        }
        
        .nav-link{
            width:20% !important;
            text-align: center !important;
            margin-left:8%;
        }
        .tab-pane  ul li{
            color:black;
            font-weight:600;
        }
        #v-pills-messages p{
             text-align: center;
        }
        #v-pills-messages img{
            margin-top:25px;
            width:100%;
            height:auto;
            object-fit: cover;
        }
        
        video{
            width:100%;
            height:220px;
        }




}