/*------------------------------------------------------------------

[Main Stylesheet]



Project     : REO VIP

Version     : 1.0

Author      : Premium Design

Author URI  : https://www.REOVIP.com

-------------------------------------------------------------------*/



/*

==========================================

    Google fonts

==========================================

*/



/* google fonts */

@import url("https://fonts.googleapis.com/css2?family=Kirang+Haerang&family=Roboto:wght@400;500;700;900&display=swap");

.Roboto {

  font-family: "Roboto";

}



/* local fonts */

@font-face {

  font-family: Bodoni Bold;

  src: url(fonts/BOD_B.TTF);

}

.Bodoni-Bold {

  font-family: "Bodoni Bold" !important;

}

@font-face {

  font-family: Gotham Black;

  src: url(fonts/Gotham-Black.ttf);

}

.GothamBlack {

  font-family: "Gotham Black" !important;

}

@font-face {

  font-family: Gotham Bold;

  src: url(fonts/Gotham-Bold.otf);

}

.GothamBold {

  font-family: "Gotham Bold" !important;

}

@font-face {

  font-family: Gotham Book;

  src: url(fonts/Gotham-Book.otf);

}

.GothamBook {

  font-family: "Gotham Book" !important;

}

@font-face {

  font-family: "Times New Roman Bold";

  src: url(fonts/timesnewromanbold.ttf);

}

.timesB {

  font-family: "Times New Roman Bold" !important;

}

@font-face {

  font-family: "Impact";

  src: url(fonts/impact.ttf);

}

.Impact {

  font-family: "Impact" !important;

}



/*------------------------------------------------------------------

[Table of contents]



1.  reset css

2.  index and inner page css



-------------------------------------------------------------------*/



/*

==========================================

1.  reset css

==========================================

*/

* {

  margin: 0;

  padding: 0;

}

body {

  font-family: "Gotham Book", sans-serif;

  font-size: 20px;

  color: #222427;

  font-weight: 400;

}

a,

a:active,

a:focus,

a:hover,

button {

  text-decoration: none;

  -webkit-transition: all 0.4s ease-out;

  -moz-transition: all 0.4s ease-out;

  -ms-transition: all 0.4s ease-out;

  -o-transition: all 0.4s ease-out;

  color: #000;

}

button {

  cursor: pointer;

}

h1,

h2,

h3,

h4,

h5,

h6,

p,

ul,

hr {

  padding: 0;

  margin: 0;

}

.h1,

.h2,

.h3,

.h4,

.h5,

.h6,

h1,

h2,

h3,

h4,

h5,

h6 {

  font-family: "Gotham Bold", sans-serif;

  font-weight: 700;

}

ul li {

  list-style: none;

}

/*input number spin hide*/

input[type="number"] {

  -moz-appearance: textfield;

}

input::-webkit-outer-spin-button,

input::-webkit-inner-spin-button {

  -webkit-appearance: none;

}



.bg-primary {

  background-color: #1a4053 !important;

}

.bg-success {

  background-color: #37a000 !important;

}

.text-primary {

  color: #1a4053 !important;

}

.text-success {

  color: #70dd44 !important;

}

.text-warning {

  color: #ffb628 !important;

}

.text-warning2 {

  color: #ffea00 !important;

}

.text-danger {

  color: #ff0000 !important;

}



.btn {

  min-height: 88px;

  font-size: 42.66px;

  font-family: "Gotham Bold", sans-serif;

  display: flex;

  align-items: center;

  justify-content: center;

}

.btn:hover {

  opacity: 0.9;

}

.btn-success {

  background-color: #37a000 !important;

  border-color: #37a000 !important;

}

.btn-info {

  color: #fff;

  background-color: #2196ef !important;

  border-color: #2196ef !important;

}



.radius4 {

  border-radius: 4px;

}



.min_h142 {

  min-height: 142px;

}



.fs86 {

  font-size: 86px;

  line-height: 86px;

}

.fs75 {

  font-size: 75px;

  line-height: 75px;

}

.fs70 {

  font-size: 70px;

  line-height: 70px;

}

.fs60 {

  font-size: 60px;

  line-height: 60px;

}

.fs50 {

  font-size: 50px;

  line-height: 50px;

}

.fs36 {

  font-size: 36px;

  line-height: 36px;

}

.fs30 {

  font-size: 30px;

  line-height: 30px;

}

.fs26 {

  font-size: 26px;

  line-height: 30px;

}

.fs20 {

  font-size: 20px;

  line-height: 20px;

}

.fs17 {

  font-size: 17px;

  line-height: 17px;

}



.common_style .text-900 {

  font-weight: 900;

}

.common_style .text-700,

.common_style b,

.common_style strong {

  font-weight: 700;

}

.common_style .text-600 {

  font-weight: 600;

}

.common_style .text-500 {

  font-weight: 500;

}

.common_style .text-300 {

  font-weight: 300;

}



.li_h70 {

  line-height: 70px;

}



/*

==========================================

2.  index and inner page css

==========================================

*/



.header-main {

  position: absolute;

  width: 100%;

  border-bottom: 1px solid #346075;

  min-height: 82px;

  z-index: 9;

}

.slide-main {

  padding-top: 82px;

  min-height: 380px;

}

.slide-main h2 {

  color: #fff;

  font-family: "Bodoni Bold", sans-serif;

  font-size: 64.71px;

  line-height: 65.12px;

}

.bg-slide-img:before {

  background: ;

}

.bg-slide-img:before {

  background: url("https://www.reoformula.com/wp-content/uploads/2020/03/slide-bg.png") no-repeat;

  content: "";

  position: absolute;

  width: 648px;

  height: 373px;

  bottom: 0;

  right: 0;

  background-position: bottom right;

  z-index: 10;

}

.bg-slide-img {

  min-height: 300px;

}

.common-info h3 {

  font-size: 30px;

  padding-bottom: 15px;

}

.common-info h4 {

  padding-bottom: 15px;

  font-size: 24px;

}

.common-info p:not(:last-child) {

  padding-bottom: 16px;

}

.common-info p {

  line-height: 24px;

}

.common_info .fs85 {

  line-height: 90px;

}



.custom-listing li {

  position: relative;

}

.custom-listing li:before {

  content: "";

  position: absolute;

  background: url("img/listing.png") no-repeat;

  background-position: center;

  background-size: contain;

  width: 28px;

  height: 23px;

  top: 0;

  right: calc(100% + 10px);

}

.listing-img2 li:before {

  background: url("img/listing2.png") no-repeat;

  background-position: center;

  background-size: contain;

}

.custom-listing {

  padding-left: 60px;

  padding-top: 15px;

}

.custom-listing li:not(:last-child) {

  margin-bottom: 20px;

}

.main-footer a {

  color: #fff;

}



.main-footer {

  padding-top: 60px;

}

.main-footer ul {

  padding-bottom: 60px;

}

.main-footer ul li {

  line-height: 48px;

}

.footer-copyright {

  border-top: 1px solid #346075;

  padding: 20px;

  min-height: 90px;

}



.circle_bullet li:before {

  background: url("img/check_circle.png") no-repeat;

  top: 50%;

  transform: translateY(-50%);

  right: calc(100% + 10px);

  width: 61px;

  height: 61px;

  border-radius: 50%;

}

.circle_bullet li:not(:last-child) {

  margin-bottom: 40px;

}



.import_link li:not(:last-child) {

  position: relative;

  padding-right: 8px;

  margin-right: 8px;

}

.import_link li:not(:last-child):before {

  content: "";

  position: absolute;

  left: 100%;

  width: 1px;

  height: 20px;

  background-color: #fff;

  top: 50%;

  transform: translateY(-50%);

}