header {
    background-color: #000306;
    position: unset;
}


.container{width: 100%;
height: auto;
 display: flex;
justify-content: center;
align-items: center;
} 

.content{width: 95%;
display: flex;
justify-content: center;
margin-top: 50px;
margin-bottom: 50px;
}

.left-content{width: 35%;
border:none;
position: sticky;
    top: 0;
    height: 100%;
}

.right-content{
    width: 70%;

}

.right-content h1{font-family:'Rubik';
    font-size: 30px;
    line-height: 50px;
    margin-bottom: 14px;
}

.right-content img{width: 100%;}

.right-content h2{font-size: 21px;
font-family: 'Rubik';
color: #2a2727;
line-height: 30px;
margin-top: 20px;
margin-bottom:10px;}

.p{
    font-size: 16px;
    line-height: 30px;
    font-family: 'Rubik';
    color: #736a6a;
}

.highlightp{
    font-family: 'Rubik';
    color: black;
    font-weight: bold;
    font-size: 18px;
    line-height: 30px;
    margin-top: 20px;
    margin-bottom: 10px;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
    padding: 15px;
    border-left: 3px solid orangered;
}

/* start two section here */

.two-section{width: 100%;
display: flex;
flex-wrap: wrap;
margin-top: 50px;
margin-bottom: 50px;
}

.two-section-copy{display: flex;
width: 46%;
margin-top: 40px;
margin-left: 2%;}

.first{margin-left: 0px;}

.two-section-first{
margin-right: 15px;
}
.svg-a svg{
    width:50px;
    height: auto;
}

.color-svg{fill: orangered;}

.two-section-second{width: 100%;}

.two-section-second h3{    font-family: 'Rubik';
    font-size: 20px;
    color: #232323;
    margin-bottom: 12px;}

.two-section-second p{font-family: 'Rubik';
font-size: 17px;
line-height: 30px;
color: #4f4e4e;
}

/* end two section here */

/* start our work here */
.our-work{display: flex;
width: 100%;
margin-bottom: 20px;
}

.our-work-left{width: 45%;
    height: auto;
    background-image:url(../img/innerpages/bg23.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 10px;


}

.our-work-left img{width: 100%;
height: 100%;
}

.our-work-right{width: 55%;
display: flex;
flex-direction: column;
padding-left: 2%;
border:none;}

.our-work-right h2{    font-family: 'Rubik';
    margin: 0px;
    padding: 0px;
    color: black;
    font-size: 27px;
    letter-spacing: 1px;
    line-height: 35px;

}

.our-work-right h3{    font-family: 'Rubik';
    color: #f31717;
    font-size: 20px;
    line-height: 35px;
    margin-top: 10px;
    font-weight: 400;}

.ol{margin: 0px;
padding: 0px;
margin-top: 20px;
}

.ol .li-ou{font-size: 17px;
list-style:none;
line-height: 35px;
font-family: 'Rubik';
color: #666;
}

.check{color: orangered;
margin-right: 5px;}

/* end our work here */

/* start fno here */
.collapsible {
    background-color: #fff;
    color:black;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    position: relative;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.15);
    margin-top: 15px;
    font-size: 18px;
    color: black;
    font-family: 'Rubik';
    font-weight: 500;
  }
  
  .activeone, .collapsible:hover {
color:#f31717;  }
  
  .arrow-down{position: absolute;
right: 0px;
margin-right: 3%;
transition: transform .1s ease-in-out;}





  .fnocontent {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.15);
  
  }

  .fnocontent p{    font-size: 16px;
    font-family: 'Rubik';
    line-height: 29px;
    color: #666;
margin-top: 10px;
margin-bottom: 10px;}
/* end fno here */

.ctol{margin: 0px;
padding: 0px;}

.ctol .ctolli{
    font-size: 16px;
    font-family: 'Rubik';
    line-height: 29px;
    color: #666;
margin-top: 10px;
margin-bottom: 10px;
list-style-type: disc;
margin-left: 4%;
}

.ctol .linumber{list-style-type: number;}


@media(max-width:900px){
    .content{flex-direction: column-reverse;
    }

    .left-content{position: unset;
    width: 100%;}

    .right-content{width: 100%;
    margin-top: 30px;}

    .two-section-copy{width: 100%;
    margin-left: 0px;}

    .our-work{flex-direction: column;}

    .our-work-left{width: 100%;
    height: 350px;}

    .our-work-right{width: 100%;
    margin-top: 20px;}

    .collapsible{font-size: 16px;}
}