/*!
 * Start Bootstrap - Modern Business HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */



.mobile-phone {
    width: 100%;
    background-color: black;
    border-radius: 20px;
    padding: 20px;
    margin: 10px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.screen {
    background-color: #800080;
    width: 100%;
    border: 0px solid #800080;
    border-radius: 0px;
    overflow: auto;
    flex-grow: 1;
    margin-bottom: 10px;
}

.button-mobile {
    background-color: #222;
    color: white;
    padding: 15px;
    border: none;
    border-radius: 20px;
    width: 90%;
    text-align: center;
}

/* Global Styles */

html,
body {
    height: 100%;
}

body {
    padding-top: 50px; /* it was 50 I changed it---Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}

.img-portfolio {
    margin-bottom: 30px;
}

.img-hover:hover {
    opacity: 0.8;
}

/* Home Page Carousel */

header.carousel {
    height: 50%;
}

header.carousel .item,
header.carousel .item.active,
header.carousel .carousel-inner {
    height: 100%;
}

header.carousel .fill {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
}

/* 404 Page Styles */

.error-404 {
    font-size: 100px;
}

/* Pricing Page Styles */

.price {
    display: block;
    font-size: 50px;
    line-height: 50px;
}

.price sup {
    top: -20px;
    left: 2px;
    font-size: 20px;
}

.period {
    display: block;
    font-style: italic;
}

/* Footer Styles */

footer {
    margin: 50px 0;
}

/* Responsive Styles */

@media(max-width:991px) {
    .customer-img,
    .img-related {
        margin-bottom: 30px;
    }
}

@media(max-width:767px) {
    .img-portfolio {
        margin-bottom: 15px;
    }

    header.carousel .carousel {
        height: 70%;
    }
}


.pointer {cursor: pointer;
}


.container7 {
  position: relative;
  text-align: right;
  color: white;
}

.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}

.top-left2 {
  position: absolute;
  top: 1px;
  left: 1px;
}

.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

.bottom-right {
position: right;
text-align: right;
align-items: right;
justify-content: flex-end;
bottom: 8px;
right: 16px;
left: 8px;
}

.bottom {
  position: absolute;
  bottom: 0px;
  right: 5px;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.bottom-center {
    position: absolute;
    bottom: 8px; /* 8 pixels from the bottom */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust to truly center it */
}

.top-center {
    position: absolute;
    top: 8px; /* 8 pixels from the top */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust to truly center it */
}


.footer {
	background-color: #222;
	background-image: url('images/----.jpg');
	background-size: cover;
	background-position: center;
	box-shadow: 0 0 0px #800080;
}

.footer .footer-box {
	padding: 0px 0;
}

.footer .footer-box .title {
	display: block;
	color: #800080;
	margin: 0px 0;
}

.footer .footer-box p {
	color: rgba(216, 197, 197, 0.87);
	font-size: 13px;
	line-height: 2;
	font-family: 'Vazir', sans-serif;
	text-align: justify;
}

.footer .footer-box ul li a {
	display: block;
	padding: 0px 0;
	margin: 0px 0;
	color: #bdb8b8;
	font-size: 10pt;
	font-family: 'Vazir', sans-serif;
	position: relative;
	right: 0;
	border-bottom: 1px dashed #444;
}

.footer .footer-box ul li a:before {
	content: "\f104";
	font-family: FontAwesome;
	padding-left: 8px;
	margin-left: 3px;
	font-size: 9px;
}

.footer .footer-box ul li a:hover:before {
	color: #000;
	border-bottom: 1px solid #000;
}

.footer .footer-box ul li:last-child a {
	border-bottom: 0;
}

.footer .contact-box p {
	font-size: 12px !important;
}

.end-wrapper {
	color: #967a7a;
	background-color: #222;
	padding: 25px 20px 15px 20px;	
}

.end-wrapper p {
	font-size: 12px;
	font-family: 'Vazir', sans-serif;
}


.h7 {
  font-size: 13px; /* or any other size you prefer */
  font-weight: b---o--l---d; /* or any other style you prefer */
}


.overflow a {
	display: block;
	color: #222;
	padding: 5px 0px;
	margin: -15px 10px;
	border-bottom: 1px solid #eee;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}


    .rtl-text {
        direction: rtl;
    }


body {
    height: 100%;
}

.img-portfolio {
    margin-bottom: 30px;
}

.img-hover:hover {
    opacity: 0.7;
}


a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a:active {
  text-decoration: none;
}

 


.container11 {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

.container11 img {vertical-align: middle;}

.container11 .content {
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0); /* Fallback color */
  background: rgba(0, 0, 0, 0.7); /* Black background with 0.7 opacity */
  color: #f1f1f1;
  width: 100%;
  padding: 3px;
}



    .overlay-container {
        position: relative;
        width: 100%;
    }

    .overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.5);
        overflow: hidden;
        width: 100%;
        height: 40%;
        display: flex;
        justify-content: right;
        align-items: right;
        color: white;
        font-size: 16px;
        border-radius: 0px 0px 0px 0px;
        direction: rtl;
        padding: 10px;
        font-family: 'Vazir', sans-serif;
    }
    
    .overlay1 {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.5);
        overflow: hidden;
        width: 100%;
        height: 50%;
        display: flex;
        justify-content: right;
        align-items: right;
        color: white;
        font-size: 13px;
        line-height: 1.5;
        border-radius: 0px 0px 0px 0px;
        direction: rtl;
        padding: 5px 10px 5px 10px;
        font-family: 'Vazir', sans-serif;
    }
    
        .overlay2 {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.5);
        overflow: hidden;
        width: 100%;
        display: flex;
        justify-content: right;
        align-items: right;
        color: white;
        font-size: 13px;
        line-height: 1.5;
        border-radius: 0px 0px 0px 0px;
        direction: rtl;
        padding: 10px;
        font-family: 'Vazir', sans-serif;
    }

.overlay3 {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.5);
        overflow: hidden;
        width: 100%;
        height: ;
        display: flex;
        color: white;
        font-size: 16px;
        line-height: 1.3;
        border-radius: 0px 0px 0px 0px;
        direction: rtl;
        padding: 10px;
        font-family: 'Vazir', sans-serif;
    }

    .overlay p {
        opacity: 1;
    }


    

    form {
      width: 200%;
      font-size: 9pt;
      font-family: Vazir;
      text-align: center;
      border: 1px dotted #bbbbbb;
      padding: 5px;
      direction: rtl;
      display: flex;
      justify-content: space-between;
    }
    input[type="text"] {
      border: 1px solid #999999;
      background: #efefef;
      font-family: Vazir;
      width: 70%;
      flex: 1;
    }
    input[type="submit"] {
      font-family: Vazir;
      color: white;
      background-color: #800080;
      width: 30%;
    }
  

body {
    height: 100%;
}

.img-portfolio2 {
    margin-bottom: 15px;
}

.img-hover-8:hover {
    opacity: 0.8;
}




.btn {
  background-color: #800080;
  color: #FFF;
  padding: 5px 10px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

.btn:hover {
  background-color: #660066;
}


  .opacity-06 {
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE */
  }



.responsive {
  width: 100%;
  height: auto;
}


* {
  box-sizing: border-box;
}

.column3 {
  float: left;
  width: 14.27%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}



* {
  box-sizing: border-box;
}

.column2 {
  float: left;
  width: 33.32%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}



* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 16.66%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}



* {
  box-sizing: border-box;
}


.cntainer {
  position: relative;
  max-width: 1300px;
  margin: 0 auto;
}

.cntainer img {vertical-align: middle;}

.cntainer .content {
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0); /* Fallback color */
  background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
  color: #f1f1f1;
  width: 100%;
  padding: 5px;
}


.container4 {
  position: relative;
  width: 100%;
  max-width: 400px;
}

.container4 img {
  width: 100%;
  height: auto;
}

.container4 .btn {
  position: absolute;
  top: 83%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  opacity: 0.9;
  background-color: white;
  color: white;
  font-size: 16px;
  padding: 16px 30px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
}

.container4 .btn:hover {
  background-color: #F7F7F7;
  color: white;
}


.container-button {
  position: relative;
  width: 100%;
  max-width: 400px;
}

.container-button img {
  width: 100%;
  height: auto;
}

.container-button .btn {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  opacity: 0.9;
  background-color: white;
  color: white;
  font-size: 16px;
  padding: 8px 16px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
}

.container-button .btn:hover {
  background-color: #F7F7F7;
  color: white;
}

.container3 {
display: flex;
justify-content: center;
}
This will center the image within the container with 100% width. Here's the updated code:
.container3 {
display: flex;
justify-content: center;
position: relative;
width: 100%;
max-width: 400px;
}
.container3 img {
width: 100%;
height: auto;
}
.container3 .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
opacity: 0.9;
background-color: #Blue;
color: white;
font-size: 16px;
padding: 16px 30px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.container3 .btn:hover {
background-color: white;
color: blue;
}

* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 16.66%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}


.container2 {
  position: relative;
  width: 100%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #000000;
  overflow: hidden;
  opacity: 0.6;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.container2:hover .overlay {
  height: 100%;
}

.text {
  color: white;
  font-size: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.pagination {
  display: inline-block;
}

.pagination a {
  color: #777;
  float: center;
  padding: 0px 0px;
  text-decoration: none;
}