body {
    background-color: black;
    color: white;
    opacity: 0;
    animation: fadeIn 1s ease-in-out forwards;
}
@keyframes fadeIn {
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}
.active {
    color: grey;

}
.inactive {
    color: white;
}

.container {
    display:flex;
    flex-direction: column;
}

.sec1 {

    width:100%;
    text-align:center;
    color:white;
    background-color:black
}

.sec1img1 {
    max-width:60%;
    height:auto;
    float: none;
    margin: 20px auto;
    display: block;
    border:2px white;
    border-style:solid;
}

.sec2 {
    padding-bottom:50px;
    color:black;
    background-color:white;
    text-align:center;
    height:auto;
}

.sec2services {
    display:flex;
    justify-content:center;
    align-items:stretch;
    gap:0;
    border:1px black;
    margin:auto;
    max-width:auto;
}

.sec2box1 {
    background-color:gray;
    height: auto;
    position:relative;
    text-align:center;
    flex:1;
    border:3px black;
    border-style:solid;
    margin-left:10px;
}

.sec2box2 {
    background-color:gray;
    height:auto;
    position:relative;
    text-align:center;
    flex:1;
    border:3px black;
    border-style:solid;
    margin-left:10px;
    margin-right:10px;
}

.sec2box3 {
    background-color:gray;
    height:auto;
    position:relative;
    text-align:center;
    flex:1;
    border:3px black;
    border-style:solid;
    margin-right:10px;
}

.sec3 {
    height:445px;
    background-color:black;
    color:white;
    display:flex;
    align-items:flex-start;
    gap:20px;
    max-width:1000px;
    margin: 0 auto;
    padding:20px;
    min-height:auto;
}

.sec3imgcont {
    flex: 0 0 350px;

    max-width:350px;
    max-height: 450px;
}

.sec3imgcont img {
    width: 100%;
    height:100%;
    object-fit: cover;
    justify-content:center;
    border:2px white;
    border-style:solid;
}

.sec3text {
    flex-grow: 1;
    text-align: center;
}

@media (max-width: 750px) {
    .sec2services {
        flex-direction: column;
    }
    .sec2box1 {
    background-color:gray;
    height: auto;
    position:relative;
    text-align:center;
    flex:1;
    border:3px black;
    border-style:solid;
    margin-left:10px;
    margin-right:10px;
    }
    .sec2box2 {
    background-color:gray;
    height:auto;
    position:relative;
    text-align:center;
    flex:1;
    border:3px black;
    border-style:solid;
    margin-left:10px;
    margin-right:10px;
    }
    .sec2box3 {
    background-color:gray;
    height:auto;
    position:relative;
    text-align:center;
    flex:1;
    border:3px black;
    border-style:solid;
    margin-left:10px;
    margin-right:10px;
    }
    .sec3 {
        flex-direction:column;
        max-width:100%;
        align-items:center;
    }
    .sec3imgcont {
        flex: 1 1 auto;
        max-width:90%;
        order:-1;
        justify-content:center;
    }
}