@import url(css/main.css);



.mytop{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--purple);
    background-image: url(/images/workimages/header.png);
    transform:scaleX(-1);
    background-size: cover;
    object-position: bottom;
}

body{
}

.mymargin{
    height: 5vh;
}
.mytop h1{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--white);
    padding-top: 18vh;
    padding-bottom: 10vh;
    padding-left: 13vw;
    padding-right: 13vw;
    font-size: 4vw;
    transform:scaleX(-1);
    font-family: 'Poppins',sans-serif;
}

.num-i-container{
    display: flex;
    flex-direction: row;
    height: 250px;
    padding-left: 13vw;
    padding-right: 8vw;
    padding-top: 5vh;
    background-color: var(--light-grey);
    }

.num-items{
    display: flex;
    flex: 1;
    flex-direction: column;
    transition: 0.4s;
    width: 25%;
    }

.num-items h1{
    position: absolute;
    font-family: 'poppins';
    font-size: 60px;
    font-weight: 550;
    opacity: 0.65;
    letter-spacing: 3px;
    color: var(--light-purple);
}


.num-items h2{
    position: absolute;
    font-family: 'poppins';
    color: var(--mid-black);
    font-weight: 700;
    margin-top: 45px;
    font-size: 18px;
}

.n-i-line{
    position: absolute;
    width: 60px;
    height: 5px;
    margin-top: 70px;
    background-color: var(--orange);
    transition: 0.4s;

}

.num-items:hover .n-i-line{
    display: flex;
    flex-direction: row;
    width: 85px;
    transition: 0.4s;
    }

    .num-items h3{
        display: flex;
        position: absolute;
        font-family: 'poppins';
        color: var(--mid-black);
        font-weight: 400;
        margin-top: 85px;
        font-size: 15px;
        padding-right: 4vw;
        width: 20%;
    }

    .des-container-big{
        margin-left: 6vw;
        margin-right: 6vw;
        margin-top: 32px;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .des-item-big{
        display: flex;
        padding: 0px;
        
        }
        #givespaceright{
            margin-left: 24px;
        }

        #givespaceleft{
            padding-left: 32px;
        }

    .des-item-big .des-right h2{
        font-size: max(1vw,14px);
        padding-left: 24px;
        margin-top: 24px;
        line-height: 1.4;
        font-weight: 200;
        letter-spacing: 0.4px;
        font-family: 'Poppins', sans-serif;
        -webkit-text-stroke: 0.1px;
    
    
    }
    
    .des-item-big .des-right h2 a{
        line-height: 1.4;
        text-decoration: none;
        color: var(--pink);
        font-weight: 200;
        letter-spacing: 0.4px;
        font-family: 'Poppins', sans-serif;
        -webkit-text-stroke: 0.1px;
    }

    #grey-content{
        margin-top: 24px;
    }

    .about-people-wrapper{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        background-color: var(--white);
        margin-top: 8vh;
        margin-bottom: 8vh;
        margin-left: 6vw;
        margin-right: 6vw;
    }

    .a-p-item{
        margin: 15%;
        align-items: center;
        justify-content: center;
        text-align: center;

    }
    .a-p-item img{
        width: 211px;
        height: 211px;
        object-fit: cover;
        mask-repeat: no-repeat;
        -webkit-mask-image: url("/images/mask.png");
        mask-image: url("/images/mask.png");
        -webkit-mask-repeat: no-repeat;
    }
    .a-p-item h1{
        font-family: 'poppins';
        font-size: 1.5rem;
        font-weight: 500;
    }

    .a-p-item h2{
        font-family: 'poppins';
        font-size: 1rem;
        font-weight: 400;
        color: var(--light-purple);
    }

    h4 a{
        text-decoration: none;
        color: var(--white);
    }

    h4:hover a{
        text-decoration: none;
        color: var(--pink);
        transition: 0.2s;
    }

    .livenbrathe-sm2 h1{
        color: var(--dark-grey);
        font-size: 3.5rem;
        margin-top: 0vh;
        text-align: center;
        font-weight: 600;
        text-align: center;
    }

    .des-right h5{
        font-family: 'poppins';
        font-size: 1.4rem;
        font-weight: 600;
        color: var(--dark-grey);

    }

    .des-right h6{
        font-family: 'poppins';
        font-size: 1.0rem;
        font-weight: 280;
        margin-top: 2vh;
        color: var(--mid-black);

    }

    .des-right h6 a{
        cursor: pointer;
        font-family: 'poppins';
        font-size: 1.0rem;
        font-weight: 280;
        margin-top: 2vh;
        color: var(--pink);
        text-decoration: none;

    }

    .des-container-about{
    margin-left: 10vw;
    margin-right: 10vw;
    margin-top: 1vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    }

    .des-item-about{
    width: 44vw;
    display: flex;
    padding: 20px;
    
    }

    
    @media only screen and (max-width: 1100px){

        *{
            box-sizing: border-box;
        }
        .abc{

        }

        
    .mytop h1{
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: var(--white);
        padding-top: 18vh;
        padding-bottom: 12vh;
        padding-left: 3vw;
        padding-right: 3vw;
        font-size: 2.5vw;
        transform:scaleX(-1);
    }

    .num-i-container{
        display: flex;
        flex-direction: row;
        height: 300px;
        padding-left: 13vw;
        padding-right: 8vw;
        padding-top: 5vh;
        background-color: var(--light-grey);
        }
    
    .num-items{
        display: flex;
        flex: 1;
        flex-direction: column;
        transition: 0.4s;
        width: 25%;
        }
    
    .num-items h1{
        position: absolute;
        font-family: 'poppins';
        font-size: 60px;
        font-weight: 550;
        opacity: 0.65;
        letter-spacing: 3px;
        color: var(--light-purple);
    }
    
    
    .num-items h2{
        position: absolute;
        font-family: 'poppins';
        color: var(--mid-black);
        font-weight: 700;
        margin-top: 45px;
        font-size: 18px;
    }
    
    .n-i-line{
        position: absolute;
        width: 60px;
        height: 5px;
        margin-top: 70px;
        background-color: var(--orange);
        transition: 0.4s;
    
    }
    
    .num-items:hover .n-i-line{
        display: flex;
        flex-direction: row;
        width: 85px;
        transition: 0.4s;
        }
    
        .num-items h3{
            display: flex;
            position: absolute;
            font-family: 'poppins';
            color: var(--mid-black);
            font-weight: 400;
            margin-top: 85px;
            font-size: 15px;
            padding-right: 4vw;
            width: 20%;
        }

        .livenbrathe-sm2 h1{
            color: var(--dark-grey);
            font-size: 3rem;
            margin-top: 0vh;
            text-align: center;
            font-weight: 600;
            text-align: center;
        }
    
        .about-people-wrapper{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            background-color: var(--white);
            margin-top: 8vh;
            margin-bottom: 8vh;
            margin-left: 6vw;
            margin-right: 6vw;
        }
    
        .a-p-item{
            margin: 15%;
            align-items: center;
            justify-content: center;
            text-align: center;
    
        }
        .a-p-item img{
            width: 211px;
            height: 211px;
            object-fit: cover;
            mask-repeat: no-repeat;
            -webkit-mask-image: url("/images/mask.png");
            mask-image: url("/images/mask.png");
            -webkit-mask-repeat: no-repeat;
        }

        .des-container-big{
            margin-left: 5vw;
            margin-right: 5vw;
            margin-top: 2vh;
            display: grid;
            grid-template-columns: 1fr 1fr;
            }
        
            .des-item-big{
            width: 40vw;
            display: flex;
            padding: 20px;
    
            
    }

    .livenbrathe-sm2 {
		padding-left: 4vw;
		padding-right: calc(4vw);
		background-color: var(--white);
		color: var(--dark-grey);
		font-size: 54px;
		text-align: center;
		font-weight: 800;
		line-height: 1.2;
		display: flex;
		width: 100%;
		margin-top: 5vw;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.livenbrathe-sm2 h1 {
		font-family: 'Poppins', sans-serif;
		font-size: min(6vw,36px);
	}

	.livenbrathe-sm2 h3 {
		color: var(--light-purple);
		font-size: min(4vw,24px);

		font-weight: 500;
		line-height: 1.4;
		padding-top: 16px;
		font-family: 'Poppins', sans-serif;
		text-align: center;
		padding-left: 8vw;
		padding-right: 8.5vw;
	}
}
@media only screen and (max-width: 930px){

    *{
        box-sizing: border-box;
    }
    .abc{

    }
    .num-i-container{
        display: grid;
        grid-template-columns: 1fr 1fr;
        transition: 0.4s;
        width: 100%;
        height: 380px;
        padding-left: 13vw;
        padding-right: 5vw;
        }

        .num-items{
            display: flex;
            flex: 1;
            flex-direction: column;
            transition: 0.4s;
            width: 90%;
            }

            .num-items h3{
                display: flex;
                position: absolute;
                font-family: 'poppins';
                color: var(--mid-black);
                font-weight: 400;
                margin-top: 85px;
                font-size: 15px;
                padding-right: 4vw;
                width: 40%;
            }
}
@media only screen and (max-width: 750px){


    .livenbrathe-sm2 {
		padding-left: 4vw;
		padding-right: calc(4vw);
		background-color: var(--white);
		color: var(--dark-grey);
		font-size: 54px;
		text-align: center;
		font-weight: 800;
		line-height: 1.2;
		display: flex;
		width: 100%;
		margin-top: 5vw;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.livenbrathe-sm2 h1 {
		font-family: 'Poppins', sans-serif;
		font-size: min(6vw,36px);
	}

	.livenbrathe-sm2 h3 {
		color: var(--light-purple);
		font-size: min(4vw,24px);

		font-weight: 500;
		line-height: 1.4;
		padding-top: 16px;
		font-family: 'Poppins', sans-serif;
		text-align: center;
		padding-left: 8vw;
		padding-right: 8.5vw;
	}

    *{
        box-sizing: border-box;
    }
    .abc{

    }

    .mytop{
        background-color: var(--purple);
        background-image: url(/images/workimages/header.png);
        transform:scaleX(-1);
    }
    
    body{
    }
    
    .mymargin{
        height: 5vh;
    }
    .mytop h1{
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: var(--white);
        padding-top: 70px;
        padding-bottom: 24px;
        padding-left: 3vw;
        padding-right: 3vw;
        font-size: 9vw;
        transform:scaleX(-1);
    }
    
    .num-i-container{
        display: grid;
        grid-template-columns: 1fr;
        height: 750px;
        padding-left: 4vw;
        padding-right: 4vw;
        padding-top: 16px;
        background-color: var(--light-grey);
        }
    
    .num-items{
        
        transition: 0.4s;
        width: 100%;
        }
    
    .num-items h1{
        position: absolute;
        font-family: 'poppins';
        font-size: 60px;
        font-weight: 550;
        opacity: 0.65;
        letter-spacing: 3px;
        color: var(--light-purple);
    }
    
    
    .num-items h2{
        position: absolute;
        font-family: 'poppins';
        color: var(--mid-black);
        font-weight: 700;
        margin-top: 45px;
        font-size: 18px;
    }
    
    .n-i-line{
        position: absolute;
        width: 60px;
        height: 5px;
        margin-top: 70px;
        background-color: var(--orange);
        transition: 0.4s;
    
    }
    
    .num-items:hover .n-i-line{
        display: flex;
        flex-direction: row;
        width: 85px;
        transition: 0.4s;
        }
    
        .num-items h3{
            position: absolute;
            font-family: 'poppins';
            color: var(--mid-black);
            font-weight: 400;
            margin-top: 85px;
            font-size: 15px;
            margin-right: 12px;
            width: 95%;
        }
    
         
        .about-people-wrapper{
            display: grid;
            grid-template-columns: 1fr;
            background-color: var(--white);
            margin-top: 96px;
            margin-bottom: 8vh;
            margin-left: 1vw;
            margin-right: 1vw;
        }
    
        .a-p-item{
            margin: 1%;
            align-items: center;
            justify-content: center;
            text-align: center;
    
        }
        .a-p-item img{
            width: 211px;
            height: 211px;
            margin-top: 24px;
            object-fit: cover;
            mask-repeat: no-repeat;
            -webkit-mask-image: url("/images/mask.png");
            mask-image: url("/images/mask.png");
            -webkit-mask-repeat: no-repeat;
        }
        .a-p-item h1{
            font-family: 'poppins';
            font-size: 1.5rem;
            font-weight: 500;
        }
    
        .a-p-item h2{
            font-family: 'poppins';
            font-size: 1rem;
            font-weight: 400;
            color: var(--light-purple);
        }
    
        h4 a{
            text-decoration: none;
            color: var(--white);
        }
    
        h4:hover a{
            text-decoration: none;
            color: var(--pink);
            transition: 0.2s;
        }
    
        .livenbrathe-sm2 h1{
            color: var(--dark-grey);
            font-size: 8vw;
            margin-top: 0vh;
            text-align: center;
            font-weight: 600;
            text-align: center;
        }
    
        .des-right h5{
            font-family: 'poppins';
            font-size: min(1.4rem,5vw);
            font-weight: 600;
            color: var(--dark-grey);
    
        }
    
        .des-right h6{
            font-family: 'poppins';
            font-size: min(1rem,4vw);
            font-weight: 280;
            margin-top: 2vh;
            color: var(--mid-black);
    
        }
    
        .des-right h6 a{
            cursor: pointer;
            font-family: 'poppins';
            font-size: min(1rem,4vw);
            font-weight: 280;
            margin-top: 2vh;
            color: var(--pink);
            text-decoration: none;
    
        }
    
        .des-container-big{
        margin-left: 3vw;
        margin-right: 3vw;
        margin-top: 1vw;
        display: grid;
        grid-template-columns: 1fr;
        padding: 0px;
        }
    
        .des-item-big{
        width: 90vw;
        display: flex;
        margin-right: 0;
        padding: 0px;
        margin-top: 16px;
        
        }

        .des-item-big .des-right h2{
            padding-left: 0px;
        }
    
    .marginx{
        margin-left: 24px;
        margin-right: 24px;
    }

    #givespaceleft{
        margin-left: 0px;
        margin-right: 0px;
        padding-left: 8px;
    }

    #givespaceright{
        margin-left: 0px;
        margin-right: 0px;
        padding-left: 8px;
    }

    #orange-container{
        margin-top: 24px;
        padding-top: 24px;
    }

    .about-people-wrapper{
        margin-bottom: 2vw;
    }
}