@import url('https://fonts.googleapis.com/css2?family=Stack+Sans+Text:wght@200,300,400,500..700&display=swap');





body{

    box-sizing: border-box;

    font-family:var(--text-family);

}

:root{

    --backgroung-rgb:rgb(8 23 30 / 85%);

    --bg-color: #125875;

    --background-div: #eee;

    --primary-color: #fbb034;

    --secondary-color: #125875;

    --heading-c: #fdfffc;

    --color: #fdfffc;

    --text-color: #060606;

    --font-color: #767676;

    --border-radius: 8px;

    --bg-grey: #f4f4f4;

    --bg-light: #fbfbfb;

    --box-shadow: 0 0.5rem 1rem rgb(12 12 12 / 5%);

    --layer: rgb(1 121 179 / 75%);

    --font-family:system-ui;

    --text-family:'Ubuntu', sans-serif;

    --text-transform:'upparcase';

}

a{

    text-decoration:none;

}

img{

    height: 100%;

    width: 100%;

}

.suva_about{

    height: auto;

    width: 100%;

    display: flex;

    align-items: center;

    /* background-color:var(--bg-color); */

    background-image: url(../../../image/home/home-about/backschool3.jpg);

    height: 660px;

    position: relative;
    background-size: cover;

}

.suva_about::after{

    content: "";

    position: absolute;

    width: 100%;

    height: 100%;

    background: var(--backgroung-rgb);

    top: 0;

}



.suva_about-left{

    height: 100%;

    align-content: center;

    padding-bottom:15px;

    width: 50%;

    clip-path: polygon(80% 0, 100% 50%, 80% 100%, 0 100%, 0 0);

    background-color:var(--background-div);

    overflow: hidden;

    position: relative;

    position: relative;

    z-index: 2;

}

.suva_about-left-line_heading{

    color:var(--secondary-color);

    font-weight: 800;

    width:80%;

    height: auto;

    text-align: center;

    margin-top: 35px;

    font-size: 12px;

    text-transform:uppercase;



}

.suva_about-left-headding{

    color: var(--text-color);

    font-weight: 700;

    width:80%;

    height: auto;

    text-align: center;

    font-size: 27px;

    text-transform: uppercase;



}

.suva_about-left-headding-sub{

    color:var(--secondary-color);

    font-weight: 700;

    width:80%;

    height: auto;

    text-align: center;

    font-size: 27px;

    text-transform: uppercase;

    position: relative;



}

.suva_about-left-headding-sub::after{

    position: absolute;

    content: '';

    height: 8%;

    width: 100px;

    bottom: -10%;

    left: 41.5%;

    background-color:var( --text-color);

}

.suva_about-left-paragrph{

    font-size: 15px;

    color: var(--font-color);

    width: 80%;

    line-height: 1.5;

    text-align: center;

    margin: 16px 0px;

    font-weight: 500;

}

.suva_about-left-call-box-main{

    padding: 10px 0px;

    background-color: var(--background-div);

}

.suva_about-left-call-heading{

    color: var(--primary-color);

    font-weight: 800;

    width:80%;

    height: auto;

    text-align: center;

    align-content: center;

    font-size: 12px;

    text-transform:uppercase;

}

.suva_about-left-call-icon{

    /* position: absolute; */

    left: 30%;

    margin-top: 5px;

    width:80%;

    height: auto;

    display: flex;

    justify-content: center;

    color: var(--text-color);

    font-weight: 700;

    text-transform:uppercase;

}

.suva_about-left-call-icon i{

    border: 1px solid var(--bg-color);

    padding: 5px 3px;

    border-radius: 50%;

    font-size: 12px;

    margin-right: 10px;

}

.about_view-main{

    width: 80%;

    height: auto;

    margin-top: 36px;

    display: flex;

    justify-content: center;

}

.about_veiw{

    padding:8px 8px;

    border-radius: 6px;

    font-size: 15px;

    color: #fff;

    transition: all ease .5s;

    background-color: var(--text-color);

}

.about_veiw i{

    margin-right: 5px;

}

.about_veiw:hover{

    background-color: var(--secondary-color);

    color: var(--heading-c);

    font-weight: 500;

    transition: all ease .5s;



}

.suva_about-right{

    height: 500px;

    width: 650px;

    position: relative;

}

.suva_about-right .img1{

    position: absolute;

    height: 200px;

    width: 200px;

    border-radius: 50%;

    overflow: hidden;

    top: 70px;

    left: 40px;

    z-index: 4;

    border-left:15px solid var( --background-div);

}

.suva_about-right .img2{

    position: absolute;

    height:300px;

    width: 300px;

    border-radius: 50%;

    top: 0;

    right: 0;

    overflow: hidden;

    z-index: 3;

    border-right:20px solid var( --background-div);

}

.suva_about-right .gol1{

    position: absolute;

    top: 60px;

    left: 60px;

    height: 350px;

    width: 350px;

    border-radius: 50%;

    border: 2px dashed var(--heading-c);

    z-index: 1;

}

.suva_about-right .gol2{

    position: absolute;

    top: 100px;

    left: 250px;

    height: 350px;

    width: 350px;

    border-radius: 50%;

    border: 2px dashed var(--heading-c);

    z-index: 1;

}

.suva_about-right .img3{

    position: absolute;

    height: 350px;

    width: 350px;

    border-radius: 50%;

    overflow: hidden;

    top: 130px;

    left: 140px;

    overflow: hidden;

    z-index: 2;

    border-bottom:20px solid var(--background-div);

}



.suva_about-right img{

    height: 100%;

    width: 100%;

    transition: all ease .5s;

}

.suva_about-right img:hover{

    opacity: .9;

}





@media (max-width:1000px){

    .suva_about-left{

        height: auto;

        width:90%;

        border-radius:6px;

        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);

        margin-bottom: 20px;

    }

    .suva_about{

        display: flex;

        justify-content: center;

        flex-wrap: wrap;

    }

    .suva_about-left-headding-sub::after{

        left: 44.5%;

    }

    .suva_about-left-call-heading{

        width: 100%;

    }

    .suva_about-left-call-icon{

        width: 100%;

    }

    .suva_about-left-line_heading{

        width: 100%;

    }

    .suva_about-left-headding{

        width: 100%;

    }

    .suva_about-left-headding-sub{

        width: 100%;

    }

    .suva_about-left-paragrph{

        width: 100%;

    }

    .suva_about-left-call-box-main{

        width: 100%;

    }

    .about_view-main{

        width: 100%;

    }

}

@media (max-width:650px){

    .suva_about-left-headding-sub::after{

        left: 41.5%;

    }

    

    .suva_about-right{

        width: 80%;

    }

.suva_about-right .img1{

    height: 180px;

    width: 180px;

    top: 10%;

    left: 3%;



}

.suva_about-right .img2{

    height:250px;

    width: 250px;

    top: 0;

    right: 0;

}

.suva_about-right .gol1{

    top:6%;

    left:6%;

    height: 320px;

    width: 320px;

}

.suva_about-right .gol2{

    top: 18%;

    left: 46%;

    height: 262px;

    width: 262px;



}

.suva_about-right .img3{

    height: 320px;

    width: 320px;

    top:25%;

    left:15%;

}

   

}

@media (max-width:570px) {

    .suva_about-right{

        width: 100%;

    }

    .suva_about-left-headding-sub::after{

        left: 39.5%;

    }

}





@media (max-width:470px) {

    .suva_about-left-headding{

        font-size: 6vw;

    }

    .suva_about-left-headding-sub::after{

        left: 36.5%;

    }

   .suva_about-right .img1{

    height: 130px;

    width: 130px;

    top: 10%;

    left: 3%;



}

.suva_about-right .img2{

    height:200px;

    width: 200px;

    top: 0;

    right: 0;

}

.suva_about-right .gol1{

    top:6%;

    left:6%;

    height: 270px;

    width: 270px;

}

.suva_about-right .gol2{

    top: 18%;

    left: 46%;

    height: 212px;

    width: 212px;



}

.suva_about-right .img3{

    height: 270px;

    width: 270px;

    top:25%;

    left:15%;

} 

}

@media (max-width:400px) {

   .suva_about-right .img1{

    height: 100px;

    width: 100px;

    top: 10%;

    left: 3%;

    border-left: 5px solid;



}

.suva_about-right .img2{

    height:150px;

    width: 150px;

    top: 0;

    right: 3%;

    border-right: 5px solid;



}

.suva_about-right .gol1{

    top:6%;

    left:6%;

    height: 220px;

    width: 220px;

}

.suva_about-right .gol2{

    top: 18%;

    left:30%;

    height: 200px;

    width: 200px;



}

.suva_about-right .img3{

    height: 220px;

    width: 220px;

    top:16%;

    left:17%;

    border-bottom: 10px solid;



} 

}