css issue when using language switcher - html

Question

My page
I have installed a language switcher plugin, from LTR to RTL. in this page their is a raw html raw
THE ISSUE: when i switch the language to RTL the boxes goes to the extreme right and extreme left
what to add so when the user switches the language the boxes would have the same alignment as the english version
Code:
<div class="vc_row wpb_row vc_row-fluid" style="background: white;">
<div class="wpb_column vc_column_container vc_col-sm-12">
<div class="vc_column-inner">
<div class="wpb_wrapper">
<div class="vc_empty_space" style="height: 32px"><span class="vc_empty_space_inner"></span></div>
<div class="vc_empty_space" style="height: 32px"><span class="vc_empty_space_inner"></span></div>
<div class="widget-text-heading no-line">
<h3 class="title">
<span>WHY INVEST IN</span>
DUBAI ? </h3>
</div>
<div class="widget widget-features-box default">
<div class="content">
<div class="row">
<div class="col-xs-12 col-sm-6 box-align1">
<div class="feature-box box-model">
<div class="feature-box-inner">
<div class="fbox-icon">
<div class="icon-inner ">
<img class="img" src="https://new.universalprime.co/wp-content/uploads/2020/01/Asset-5#2x.png" alt="">
</div>
</div>
<div class="fbox-content ">
<h3 class="ourservice-heading">EXPO 2020</h3>
<div class="description">It expected that roughly 28 million people will visit Dubai by Expo 2020</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 box-align2">
<div class="feature-box box-model">
<div class="feature-box-inner">
<div class="fbox-icon">
<div class="icon-inner ">
<img class="img" src="https://new.universalprime.co/wp-content/uploads/2020/01/Asset-2#2x.png" alt="">
</div>
</div>
<div class="fbox-content ">
<h3 class="ourservice-heading">MULTI-SECTORED ECONOMY</h3>
<div class="description">65% of global investment and a multi-sectored economy that does not rely on oil.</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 box-align1">
<div class="feature-box box-model">
<div class="feature-box-inner">
<div class="fbox-icon">
<div class="icon-inner ">
<img class="img" src="https://new.universalprime.co/wp-content/uploads/2020/01/Asset-8#2x.png" alt="">
</div>
</div>
<div class="fbox-content ">
<h3 class="ourservice-heading">INVESTMENT-FRIENDLY</h3>
<div class="description">A safe country for investment, supported with 0% income tax policy and facilitated by laws that ease business creation.</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 box-align2">
<div class="feature-box box-model">
<div class="feature-box-inner">
<div class="fbox-icon">
<div class="icon-inner ">
<img class="img" src="https://new.universalprime.co/wp-content/uploads/2020/01/Asset-7#2x.png" alt="">
</div>
</div>
<div class="fbox-content ">
<h3 class="ourservice-heading">PASSPORT RECOGNITION</h3>
<div class="description" style="margin: 0 0 26px 0;">The strongest Passport
<br>world-wide</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 box-align1">
<div class="feature-box box-model">
<div class="feature-box-inner">
<div class="fbox-icon">
<div class="icon-inner ">
<img class="img" src="https://new.universalprime.co/wp-content/uploads/2020/01/Asset-3#2x.png" alt="">
</div>
</div>
<div class="fbox-content ">
<h3 class="ourservice-heading">GLOBAL HUB</h3>
<div class="description">Dubai airport is considered the 3rd most visited in the world, they celebrated the 1 Billionth traveler in 2018</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 box-align2">
<div class="feature-box box-model">
<div class="feature-box-inner">
<div class="fbox-icon">
<div class="icon-inner ">
<img class="img" src="https://new.universalprime.co/wp-content/uploads/2020/01/Asset-6#2x.png" alt="">
</div>
</div>
<div class="fbox-content ">
<h3 class="ourservice-heading">RELIABLE INVESTMENT</h3>
<div class="description">Investments worth 37 Billion AED from Gulf residents. Total transactions reached 111 Billion in Dubai 2018.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
.description {
margin: 0 0 20px 0;
}
.icon-inner{
background:#fff !important;
box-shadow:none;
}
#media only screen and (max-width: 767px) {
.col-xs-12 {
padding: 0px 14%;
}
}
#media only screen and (min-width: 768px) {
.col-sm-6 {
height: 240px;
width: 25%;
margin: 23px 12%;
background: whitesmoke;
box-shadow: 2px 2px 30px -6px #8e99a3;
margin-bottom: 80px;
}
.box-model {
position: absolute;
top: -95px;
left: 10%;
width: 80%;
}
.box-align1{
right:-80px !important;
}
.box-align2{
left:-80px !important;
}
.title{
margin-bottom:80px !important;
}
}
#media only screen and (min-width: 992px) {
.col-sm-6 {
height: 238px;
width: 25%;
margin: 23px 12%;
background: whitesmoke;
box-shadow: 2px 2px 30px -6px #8e99a3;
margin-bottom: 90px;
}
.box-model {
position: absolute;
top: -95px;
left: 10%;
width: 80%;
}
.box-align1{
right:-105px !important;
}
.box-align2{
left:-105px !important;
}
.title{
margin-bottom:80px !important;
}
}
#media only screen and (min-width: 1141px) {
.col-sm-6 {
width: 25%;
margin: 23px 12%;
background: whitesmoke;
box-shadow: 2px 2px 30px -6px #8e99a3;
height: 230px !important;
margin-bottom: 100px;
}
.box-model {
position: absolute;
top: -95px;
width: 80%;
left: 10%;
}
.box-align1{
right:-126px !important;
}
.box-align2{
left:-126px !important;
}
.title{
margin-bottom:80px !important;
}
}
#media only screen and (min-width: 1141px) {
.box-align1{
right:-114px !important;
}
.box-align2{
left:-114px !important;
}
}
#media only screen and (min-width: 1200px) {
.box-align1{
right:-125px !important;
}
.box-align2{
left:-125px !important;
}
}
#media only screen and (min-width: 1290px) {
.box-align1{
right:-162px !important;
}
.box-align2{
left:-162px !important;
}
}
</style>