.hero-section{
    display: flex;
    width: 100%;
    & .hero-section-left{
        display: flex;
        flex-direction: column;
        justify-content: center;
        & img {
            width: 160px;
            margin: 15px auto;
            @media screen and (max-width: 950px) {
                width: 100px;
            }
        }
        & h1, p {
            margin: 0;
            @media screen and (max-width: 950px) {
                text-align: center;
            }
        }
        & h1{
            font-size: 50px;
            max-width: 450px;
            margin-top: 20px;
            @media screen and (max-width: 1200px) {
                font-size: 40px;
                max-width: 100%;
            }
            @media screen and (max-width: 768px) {
                font-size: 28px;
                max-width: 300px;
            }
        }
        & p{
            font-size: 20px;
            @media screen and (max-width: 1200px) {
                font-size: 18px;
            }
            @media screen and (max-width: 950px) {
                max-width: 600px;
            }
        }
        @media screen and (max-width: 950px) {
            align-items: center;
        }
    }
    & .hero-section-right{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        & img{
            max-height: 80%;
            @media screen and (max-width: 1200px) {
                max-height: 70%;
            } 
            @media screen and (max-width: 950px) {
                max-width: 80%;
            }
        }
        @media screen and (max-width: 950px) {
            margin-top: 50px;
            justify-content: center;
        }
    }
    @media screen and (max-width: 950px) {
        flex-direction: column;
        align-items: center;
    }
}
.rect-content{
    width: 60%;
    min-height: 200px;
    border-radius: 20px;
    color: white;
    padding: 15px 25px;
    & h2{
        margin-top: 5px;
        font-size: 25px;
    }
    & p {
        font-size: 22px;
    }
    @media screen and (max-width: 768px) {
        & p{
            font-size: 15px;
        }
    }
}
.tech-section{
    padding-top: 60px;
    padding-left: 60px;
    @media screen and (max-width: 950px) {
        padding-left: 0;;
        padding-top: 100px;
    }
    & .next-react{
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        & .next-react-content{
            background-color: rgba(0, 122, 204,.8);
            box-shadow: 0px 0px 19.1px 0px #3696D7;
            margin-right: 20px;
        }
        & img{
            width:17%;
        }
        @media screen and (max-width: 950px) {
            flex-direction: column;
            & .next-react-content{
                width: 100%;
                margin: 0;
            }
            & img{
                position: absolute;
                top: -30%;
                right: 0;
            }
        }
        @media screen and (max-width: 768px) {
            & img{
                width: 20%;
            }    
        }
        @media screen and (max-width: 480px) {
            & img{
                width: 30%;
                top: -25%
            }    
        }
    }
    & .ionic{
        display: flex;
        align-items: center;
        margin-top: 10px;
        position: relative;
        & img{
            width:15%;
            z-index: 1;
        }  
        & .ionic-content{
            background:  rgba(78, 142, 247, 0.79);;
            box-shadow: 0px 0px 19.1px 0px #3696D7;
            margin-left: 20px;
        }
        @media screen and (max-width: 950px) {
            display: block;
            margin: 0;
            & .ionic-content{
                width: 100%;
                margin: 0;
            }
            & img{
                position: absolute;
                top:-25%;
                left: -5%;
                height: 35%;
            }
        }
        @media screen and (max-width: 480px) {
            & img{
                top:-25%;
                left: -2%;
                width: 20%;
            }
        }
    }
    & .angular {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        & .angular-content{
            background: rgba(216, 64, 99, 0.79);
            box-shadow: 0px 0px 19.1px 0px #E16984;
            margin-right: 20px;
        }
        & img{
            width:13%;
            margin-right: 68px;
        } 
        @media screen and (max-width: 950px) {
            flex-direction: column;
            & .angular-content{
                width: 100%;
                margin: 0;
                overflow: visible;
            }
            & img{
                position: absolute;
                margin:0;
                width: 10%;
                top: -25%;
                right: 0;
            }
        }
        @media screen and (max-width: 480px){
            & img{
                width: 20%;
            }
        }
    }
    & .vue{
        display: flex;
        align-items: center;
        margin-top: 10px;
        position: relative;
        & .vue-content{
            background: rgba(65, 184, 131, 0.79);
            box-shadow: 0px 0px 19.1px 0px #69C79D;
            margin-left: 20px;
        }
        & img{
            margin-left: 25px;
            width:13%;
        }
        @media screen and (max-width: 950px) {
            display: block;
            margin: 0;
            & .vue-content{
                width: 100%;
                margin: 0;
            }
            & img{
                position: absolute;
                top:-25%;
                left: -5%;
                height: 35%;
            }
        }
        @media screen and (max-width: 480px) {
            & img{
                top:-20%;
                left: -10%;
                width: 20%;
            }
        }
    }
    & .php{
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        & .php-content{
            background: rgba(124, 139, 200, 0.78);
            box-shadow: 0px 0px 19.1px 0px #7C8BC8;
            margin-right: 20px;
        }
        & img{
            width: 15%;
            margin-right: 68px;
        }
        @media screen and (max-width: 950px) {
            flex-direction: column;
            & .php-content{
                width: 100%;
                margin: 0;
                overflow: visible;
            }
            & img{
                position: absolute;
                margin:0;
                width: 10%;
                top: -18%;
                right: 0;
            }
        }
        @media screen and (max-width: 480px){
            & img{
                width: 20%;
            }
        }
    }
    & .firebase{
        display: flex;
        align-items: center;
        margin-top: 10px;
        position: relative;
        & .firebase-content{
            background: rgba(252, 202, 63, 0.79);
            box-shadow: 0px 0px 19.1px 0px #FDD668;
            margin-left: 20px;
        }
        & img{
            margin-left: 25px;
            width:13%;
        }
        @media screen and (max-width: 950px) {
            display: block;
            margin: 0;
            & .firebase-content{
                width: 100%;
                margin: 0;
            }
            & img{
                position: absolute;
                top:-25%;
                left: -5%;
                height: 35%;
            }
        }
        @media screen and (max-width: 480px) {
            & img{
                top:-25%;
                left: -10%;
                width:15%;
            }
        }
    }
    & .bbgdev{
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        & .bbgdev-content{
            background: rgba(37, 24, 75, 0.88);
            box-shadow: 0px 0px 19.1px 0px #25184B;
            margin-right: 20px;
        }
        & img{
            width: 17%;
        }
        @media screen and (max-width: 950px) {
            flex-direction: column;
            & .bbgdev-content{
                width: 100%;
                margin: 0;
                overflow: visible;
            }
            & img{
                position: absolute;
                margin:0;
                width: 10%;
                top: -18%;
                right: 0;
            }
        }
        @media screen and (max-width: 480px){
            & img{
                width: 20%;
            }
        }
    }
    & .right-left{
        max-width: 70%;
        position: relative;
        left: 43%;
        transform: translateX(-50%);
        @media screen and (max-width: 950px) {
            display: none;
        }
    }
    & .line{
        display: none;
        margin:20px 0;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        @media screen and (max-width: 950px) {
            display: block;
        }
    }
}
.conclusion{
    max-width: 800px;
    text-align: center;
    margin: auto;
    font-size: 24px;
    @media screen and (max-width: 768px) {
        font-size: 18px;
    }
    @media screen and (max-width: 480px) {
        font-size: 15px;
    }
}
.btn-our-tech{
    margin: auto;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.btn-our-tech:hover {
    transform: scale(1.019) translateX(-50%);

}