*{
  margin:0;
    padding:0;
}
body{

   /*background-image: url("../../../../../../../../../../App/Public/images/tileable_wood_texture.png");*/
   /*background-repeat: repeat; */
}

main{
    position:relative;
   width: 100%;
    height: auto;
    margin:5px 0;
    padding:0;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    overflow:hidden;
}


#components h1{
    text-align:center;
     font-family:Arial;
}
#components{
    position: relative;
    width: 100%;
  height: auto;
     display:flex;
    flex-wrap:wrap;
    justify-content:center;
}
#components  #component2 #name , #component3 #name{
    margin:130px 0 0 0 ;
}
#component1, #component3, #component2_05{
    width:70%;
    margin:70px auto ;
}
 #component2_05{
       margin:70px auto
 }
#component1 img{
    width:100%;
    margin:0 0 60px 0;
    border-radius:20px;
}
#component1 #text{
    align-self: stretch;
    color: #0F2851;
font-size: 18px;
font-style: normal;
font-weight: 400;padding:0;
line-height: 32px;
}
#component2, #component3, #component4{
   display:flex;
    flex-wrap:wrap;
    justify-content:center;
      width:100%;
    border-radius: 46px;
background: rgba(212, 220, 255, 0.60);
    margin:30px 0;
    color: #0F2851;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 32px; /* 177.778% */
    overflow:hidden;
}

 #component3,#component4{
background: #fff;
}

#component2 #img, #component4 #chaild #img{
    width:auto;
    height:auto;
    max-width:50%;
    border-radius: 26px;
    margin:30px 0 50px 50px;
    float:right;
}

#component3 #img{
    width:auto;
    height:auto;
    max-width:50%;
    border-radius: 26px;
    margin:30px 50px 0 0 ;
    float:left;
}

[id^="component"] #chaild{
    width:70%;
    margin:50px auto ;
}





@media only screen and (max-width: 1250px) {
    #component1,#component2 #chaild ,#component2_05, #component3 #chaild, #component4 #chaild{
    width:80%;
}

}
@media only screen and (max-width: 1150px) {
    #component1,#component2 #chaild,#component2_05, #component3 #chaild, #component4 #chaild{
    width:90%;
}
}
@media only screen and (max-width: 991px) {
    #component1,#component2 #chaild,#component2_05, #component3 #chaild, #component4 #chaild{
    width:92%;
}
}
@media only screen and (max-width: 600px) {
  #component2 , #component3{
   display:flex;
    flex-wrap:wrap;
    justify-content:center;
      width:100%;
    border-radius: 0px;
background: rgba(212, 220, 255, 0.60);
    margin:30px 0;
    color: #0F2851;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 32px; /* 177.778% */
    overflow:hidden;
}
    #component1,#component2 #chaild,#component2_05, #component3 #chaild, #component4 #chaild{
       width:92%;
        display:flex;
    flex-wrap:wrap;
    margin:30px auto;   
    }
#component2 #img, #component3 #img, #component4 #chaild #img{
    width:auto;
    height:auto;
    max-width:100%;
    border-radius: 26px;
    margin:0 auto;
    float:none;
}
#components  #component2 #name , #component3 #name, #component4 #name{
    margin:50px 0 0 0 ;
}
#gic{
    margin:30px 0;

}
}