﻿p{
    text-align:justify;
}
.theme-color {
    color: #01A3D4;
}

.projectLink:hover{
    background-color:#01A3D4;
    color:#fff;
}
.projectDetail h4{
    color:#01A3D4;
}
.jobPostingCard{
    background-color:aliceblue;
    padding:20px;
    border-radius:10px;
    margin-bottom:50px;
}

.flip-card {
    background-color: transparent;
    width: 500px;
    height: 500px;
    margin:auto;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
}


/* This container is needed to position the front and back side */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
    background-color: #bbb;
    color: black;
    cursor:pointer;
}

/* Style the back side */
.flip-card-back {
    background-color: #01A3D4;
    color: #fff;
    transform: rotateY(180deg);
    padding: 20px;
    text-align: center !important;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}



    .flip-card-back div{
        max-height:300px;
        overflow:auto;
    }


        .flip-card-back div::-webkit-scrollbar-thumb{
            width:5px;
            background:#fff;
            color:#fff;
        }
        .flip-card-back div::-webkit-scrollbar {
            width: 5px;
            background: #fff;
            color: #fff;
        }



        .flip-card-back h4 {
            text-align: center;
            color: #fff;
            font-size: 14px;
        }

    .flip-card-back p {
        text-align: left;
        margin-bottom: 5px !important;
        color: #fff;
        font-size:12px;
    }

.flip-card-front img {
    width: 500px;
    height: 500px;
    object-fit: contain;
    background: #fff;
}
.indWrap .imgWrap {
    background:#01A3D4;
    width:120px;
    height:120px;
    border-radius:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:auto;

}
.featureWrap{
    background-color:aliceblue;
    padding:15px;
    border-radius:10px;
    text-align:center;
    margin-bottom:30px;
}
.featureWrap h2{
    margin-top:0px;
}
.featureWrap span{
    font-size:14px;
}
.projectDetails.card-body {
    background-color: aliceblue !important;
    padding: 25px;
    border-radius: 20px;
    margin-bottom:40px;
}
    .projectDetails.card-body img {
        border-radius: 5px;
    }

.card-header button{
    background:#01A3D4;
    color:#fff;
    border-radius:5px;
}

.card-header button:hover    {
    background: #01A3D4;
    color: #fff;
    border-radius: 5px;
}

@media (min-width: 1400px) {
    .container {
        width: 1340px;
    }
}

@media (min-width: 1500px) {
    .container {
        width: 1440px;
    }
}

@media (min-width: 1600px) {
    .container {
        width: 1540px;
    }
}

@media (min-width: 1700px) {
    .container {
        width: 1640px;
    }
}

.designProcess{
    background-color:aliceblue;
    border-radius:10px;
    padding:20px ;
    margin-bottom:30px;
}

.designProcess p{
    margin-bottom:0px;
}