@import url(https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,200;0,300;0,400;0,500;1,200;1,300;1,400;1,500&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500;600&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700&display=swap);
/* font */
@font-face {
  font-family: "tenor";
  src: url("/fonts/tenor/TenorSans.eot");
  src: url("/fonts/tenor/TenorSans.ttf");
  src: url("/fonts/tenor/TenorSans.woff") format("woff"), url("/fonts/tenor/TenorSans.svg") format("svg");
}
@font-face {
  font-family: "TwCen";
  src: url("/fonts/tw-cen-mt-std/TwCenMT-CondensedBold.eot");
  src: url("/fonts/tw-cen-mt-std/TwCenMT-CondensedBold.ttf");
  src: url("/fonts/tw-cen-mt-std/TwCenMT-CondensedBold.woff") format("woff"), url("/fonts/tw-cen-mt-std/TwCenMT-CondensedBold.svg") format("svg");
}
@font-face {
  font-family: "vonique";
  src: url("/fonts/vonique/Vonique64.eot");
  src: url("/fonts/vonique/Vonique64.ttf");
  src: url("/fonts/vonique/Vonique64.woff") format("woff"), url("/fonts/vonique/Vonique64.svg") format("svg");
}
@font-face {
  font-family: "segoe";
  src: url("/fonts/segoe/SegoeUI.eot");
  src: url("/fonts/segoe/SegoeUI.ttf");
  src: url("/fonts/segoe/SegoeUI.woff") format("woff"), url("/fonts/segoe/SegoeUI.svg") format("svg");
}
@font-face {
  font-family: "Great_Vibes";
  src: url("/fonts/Great_Vibes-Parisienne/Great_Vibes/GreatVibes-Regular.ttf");
}
@font-face {
  font-family: "Parisienne";
  src: url("/fonts/Great_Vibes-Parisienne/Parisienne/Parisienne-Regular.ttf");
}
@font-face {
  font-family: "Parisienne-Regular";
  src: url("/fonts/parisienne/Parisienne-Regular.eot");
  src: url("/fonts/parisienne/Parisienne-Regular.ttf");
  src: url("/fonts/parisienne/Parisienne-Regular.woff") format("woff"), url("/fonts/parisienne/Parisienne-Regular.svg") format("svg");
}
@font-face {
  font-family: "nunito-bold";
  src: url("/fonts/nunito/Nunito-Regular.ttf");
}
@font-face {
  font-family: "nunito-semibold";
  src: url("/fonts/nunito-semibold/Nunito-SemiBold.eot");
  src: url("/fonts/nunito-semibold/Nunito-SemiBold.ttf");
  src: url("/fonts/nunito-semibold/Nunito-SemiBold.woff") format("woff");
}
@font-face {
  font-family: "brotherina";
  src: url("/fonts/brotherina/Brotherina.otf");
  src: url("/fonts/brotherina/Brotherina.eot");
  src: url("/fonts/brotherina/Brotherina.ttf");
  src: url("/fonts/brotherina/Brotherina.woff") format("woff"), url("/fonts/brotherina/Brotherina.svg") format("svg");
}
@font-face {
  font-family: "athenia";
  src: url("/fonts/Athenia/AtheniaRegular.ttf");
}
@font-face {
  font-family: "twCenMT";
  src: url("/fonts/twCenMT/TwCenMTStd-Light.ttf");
}
@font-face {
  font-family: "twCenMTbold";
  src: url("/fonts/twCenMT/TwCenMT-Medium.ttf");
}
@font-face {
  font-family: "barlow";
  src: url("/fonts/Font-barlow/Barlow-Regular.eot");
  src: url("/fonts/Font-barlow/Barlow-Regular.ttf");
  src: url("/fonts/Font-barlow/Barlow-Regular.woff") format("woff");
}
@font-face {
  font-family: "zcool";
  src: url("/fonts/zcool/ZCOOLXiaoWei-Regular.eot");
  src: url("/fonts/zcoolZCOOLXiaoWei-Regular.ttf");
  src: url("/fonts/zcool/ZCOOLXiaoWei-Regular.woff") format("woff");
}
@font-face {
  font-family: "futura";
  src: url("/fonts/futura/FuturaBT-Medium.eot");
  src: url("/fonts/futura/FuturaBT-Medium.ttf");
  src: url("/fonts/futura/FuturaBT-Medium.woff") format("woff");
}
@font-face {
  font-family: "pristina";
  src: url("/fonts/pristina/PristinaStd.eot");
  src: url("/fonts/pristina/PristinaStd.ttf");
  src: url("/fonts/pristina/PristinaStd.woff") format("woff");
}
@font-face {
  font-family: "Futura Light";
  src: url("/fonts/FuturaBT-Light/FuturaBT-Light.eot");
  src: url("/fonts/FuturaBT-Light/FuturaBT-Light.woff2") format("woff2"), url("/fonts/FuturaBT-Light/FuturaBT-Light.woff") format("woff"), url("/fonts/FuturaBT-Light/FuturaBT-Light.ttf") format("truetype"), url("//fonts/FuturaBT-Light/FuturaBT-Light") format("svg");
}
.twCenMT {
  font-family: "twCenMT";
}

.twCenMTbold {
  font-family: "twCenMTbold";
}

.athenia {
  font-family: "athenia";
}

.barlow {
  font-family: "Barlow", sans-serif;
}

.parisienne {
  font-family: "Parisienne";
}

.josefin {
  font-family: "Josefin Sans", sans-serif;
}

.fredoka {
  font-family: "Fredoka", sans-serif;
}

.futura {
  font-family: "futura";
}

.futura-lt-bt {
  font-family: "Futura Light";
}

.brotherina {
  font-family: "brotherina";
}

.font-Great-Vibes {
  font-family: "Great Vibes", cursive;
}

.font-Parisienne {
  font-family: "Parisienne-Regular";
}

.font-vonique {
  font-family: "vonique";
}

.font-segoe {
  font-family: "segoe";
}

.font-nunito {
  font-family: "nunito-bold";
}

.font-Fredoka {
  font-family: "Fredoka", sans-serif;
}

.font-tenor {
  font-family: "tenor";
}

.font-pristina {
  font-family: "pristina";
}

.weight_500 {
  font-weight: 500;
}

* {
  box-sizing: border-box;
}

a {
  text-decoration: none !important;
}

.color-white {
  color: #ffffff;
}

.color-o-white {
  color: #dbdbdb;
}

.color-black {
  color: #000000;
}

.color_offwhite {
  color: #dbdbdb;
}

.w-10 {
  width: 10%;
}

.w-19 {
  width: 19%;
}

.w-22 {
  width: 22%;
}

.w-33 {
  width: 32.5%;
}

.w-55 {
  width: 55%;
}

.w-45 {
  width: 45%;
}

.w-90 {
  width: 90%;
}

.w-49 {
  width: 49.5%;
}

.w-85 {
  width: 85%;
}

.w-95 {
  width: 95%;
}

.font-xxl {
  font-size: 90px;
}

.font-xlg {
  font-size: 50px;
}

.font-lg {
  font-size: 22px;
}

.font-md {
  font-size: 18px;
}

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

.font-sm {
  font-size: 14px;
}

.font-xs {
  font-size: 10px;
}

.font-15 {
  font-size: 15px;
}

.font-17 {
  font-size: 17px;
}

.font-13 {
  font-size: 13px;
}

.font-12 {
  font-size: 12px;
}

.font-11 {
  font-size: 11px;
}

.letter-spacing {
  letter-spacing: 1px;
}

.letter-spacing-1 {
  letter-spacing: 1.5px;
}

.place-content-center {
  place-content: center;
}

.background-image {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.bg-theme-color {
  background-color: #F8F3ED;
}

.diamondsinternational-btn,
.mobile-btn a,
.common-btn {
  background-color: transparent;
  border: 1px solid #000000 !important;
  border-radius: 0% !important;
  font-family: "Barlow", sans-serif;
  padding: 3px 30px;
  text-align: center;
  font-size: 14px;
  z-index: 1;
  border-radius: 3px;
  display: inline-block;
  position: relative;
  color: #000000;
  cursor: pointer;
}
.diamondsinternational-btn:hover,
.mobile-btn a:hover,
.common-btn:hover {
  background-color: #000 !important;
  color: #fff !important;
}
.diamondsinternational-btn:active,
.mobile-btn a:active,
.common-btn:active {
  top: 2px;
}

.white_btn {
  background-color: #000 !important;
  border: 1px solid #ffffff !important;
  border-radius: 0% !important;
  z-index: 1;
  display: inline-block;
  position: relative;
  color: #ffffff !important;
  font-family: "Barlow", sans-serif;
  cursor: pointer;
}
.white_btn:hover {
  color: #000 !important;
  border: 1px solid #000 !important;
  background-color: transparent !important;
}
.white_btn:active {
  top: 2px;
}

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/
/* Common */
* {
  box-sizing: border-box;
}

a {
  text-decoration: none !important;
}

/* Banner */
.main-banner {
  height: 400px;
  background: url("/images_new/di_images/banner-2.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: end;
}
@media (max-width: 1024px) {
  .main-banner {
    margin-top: 90px;
  }
}
@media (max-width: 992px) {
  .main-banner {
    margin-top: 0px;
  }
}
@media (max-width: 540px) {
  .main-banner {
    margin-top: 0px;
  }
}
.main-banner h1 {
  font-size: 52px;
  font-weight: 500;
  text-transform: uppercase;
}

.main-content {
  width: 50%;
  margin: auto;
}

.main-content img {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  margin-top: -100px;
  margin-bottom: 15px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.main-content span {
  font-size: 32px;
  color: #d4b13f;
  letter-spacing: 2px;
}

.main-content h2 {
  font-size: 52px;
  font-style: italic;
}

.main-content p {
  letter-spacing: 1px;
  font-size: 18px;
  color: #000;
}

/* Rings Type */
.rings-box {
  justify-content: center;
}

.rings-image img {
  width: 100%;
  border: 4px solid rgba(34, 34, 32, 0.1333333333);
}

.rings-types {
  position: relative;
}
@media (max-width: 768px) {
  .rings-types {
    margin-bottom: 25px;
  }
}
@media (max-width: 575px) {
  .rings-types {
    margin-bottom: 20px;
  }
}

.rings-types:hover .rings-content {
  opacity: 1;
}

.rings-content {
  position: absolute;
  padding: 40px 70px;
  left: 50%;
  background-color: rgba(255, 255, 255, 0.879);
  top: 50%;
  z-index: 1;
  opacity: 0;
  transition: all 0.3s;
  transform: translate(-50%, -50%);
}

.rings-content h3 {
  color: #000;
  font-size: 22px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* Our Services */
.service {
  padding: 25px 15px;
  text-align: center;
  cursor: pointer;
  background: transparent;
  transition: transform 0.5s;
}

.service img {
  margin-bottom: 10px;
}

.service h4 {
  font-size: 22px;
  margin-bottom: 8px;
  font-family: "Segoe UI";
}

.service p {
  font-size: 16px;
  font-family: "Barlow", sans-serif;
}

.service:hover {
  transform: scale(1.03);
}

/* story */
.story-image {
  margin-left: auto;
  width: 90%;
  border: 8px solid #fff;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.story-image video {
  width: 100%;
  height: auto;
  margin-bottom: -7px;
  border: 8px solid rgba(228, 189, 74, 0.6901960784);
}

.story-image img {
  width: 100%;
  height: auto;
  border: 15px solid rgba(228, 189, 74, 0.6901960784);
}

.story-content h5 {
  font-size: 42px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #000;
}

.story-content p {
  font-size: 17px;
  letter-spacing: 1px;
  line-height: 25px;
  color: #000;
}

.story-content ul li::marker {
  color: #d4b13f !important;
  font-size: 25px !important;
}

.background-flower {
  z-index: -1;
  position: absolute;
  top: 35%;
  left: 5%;
}

.background-flower img {
  width: 100%;
}

.story-content ul {
  padding-left: 25px;
}
.story-content ul li {
  list-style: disc;
  color: #000;
  font-size: 18px;
  font-family: "twCenMT";
}

/* counter */
.counter {
  text-align: center;
}

.counter-border {
  padding: 20px;
}

.counter-count {
  font-size: 52px;
  font-weight: bold;
  position: relative;
  color: #d4b13f;
  text-align: center;
  display: inline-block;
}

.count-up h3 {
  font-size: 18px;
}

.count-up span i {
  color: #d4b13f;
  font-size: 35px;
}

.border-right {
  border-right: 2px solid #d4b13f;
}

/* Responsive */
@media (min-width: 2260px) {
  .background-flower {
    left: 16%;
  }
}
@media (min-width: 1930px) and (max-width: 2260px) {
  .background-flower {
    left: 9%;
  }
}
@media (max-width: 1643.98px) {
  .main-content {
    width: 75%;
  }
  .background-flower {
    top: 40%;
    left: 30px;
  }
  .background-flower img {
    width: 75%;
  }
}
@media (max-width: 1400px) {
  .main-banner {
    height: 300px;
  }
  .main-content {
    width: 70%;
  }
  .main-content span {
    font-size: 28px;
  }
  .main-content h2 {
    font-size: 46px;
  }
  .background-flower {
    top: 38%;
    left: 30px;
  }
  .background-flower img {
    width: 70%;
  }
  .rings-content {
    padding: 45px;
  }
}
@media (max-width: 1200px) {
  .main-content {
    width: 100%;
    margin: auto;
  }
  .main-content h2 {
    font-size: 42px;
    font-style: italic;
  }
  .main-content span {
    font-size: 26px;
  }
  .rings-content {
    padding: 36px 36px;
  }
  .rings-content h3 {
    font-size: 18px;
  }
  .service h4 {
    font-size: 16px;
  }
  .service p {
    font-size: 14px;
  }
  .story-content h5 {
    font-size: 28px;
  }
  .story-content p {
    font-size: 16px;
  }
  .story-content ul li {
    font-size: 16px;
  }
  .background-flower {
    top: 23%;
    left: 0px;
  }
  .background-flower img {
    width: 60%;
  }
  .story-image {
    margin-left: auto;
  }
  .rings-content {
    opacity: 1 !important;
  }
}
@media (max-width: 992px) {
  .rings-product p {
    width: 100%;
  }
  .main-content h2 {
    font-size: 36px;
    font-style: italic;
  }
  .rings-content {
    padding: 20px 20px;
  }
  .rings-content h3 {
    font-size: 16px;
  }
  .background-flower {
    top: 15%;
    left: 20px;
    z-index: -1;
  }
  .background-flower img {
    width: 60%;
  }
  .story-image {
    margin: auto;
  }
  .counter-count {
    font-size: 42px;
  }
  .border-right {
    border-right: 2px solid #d4b13f;
    height: 65px;
  }
  .count-up span i {
    font-size: 32px;
  }
  .count-up h3 {
    font-size: 16px;
  }
}
@media (max-width: 767.98px) {
  .main-content {
    width: 100%;
    margin: auto;
  }
  .rings-product p {
    width: 100%;
  }
  .story-image {
    margin: auto;
  }
  .background-flower {
    top: 17%;
    left: 15px;
  }
  .background-flower img {
    width: 50%;
  }
  .rings-content {
    padding: 40px 62px;
  }
}
@media (max-width: 575px) {
  .main-banner {
    height: 190px;
    background-position: top;
  }
  .main-banner h1 {
    font-size: 42px;
  }
  .main-content img {
    width: 120px;
    height: 120px;
    margin-top: -60px;
  }
  .main-content span {
    font-size: 18px;
  }
  .main-content h2 {
    font-size: 26px;
  }
  .main-content p {
    font-size: 16px;
  }
  .services-cards {
    padding-bottom: 77%;
  }
  .service p {
    font-size: 14px;
  }
  .story-image img {
    height: 300px;
    border: 15px solid rgba(228, 189, 74, 0.9215686275);
  }
  .rings-content {
    padding: 50px 70px;
  }
  .rings-content h3 {
    font-size: 22px;
  }
  .story-content h5 {
    font-size: 18px;
    text-align: center;
    margin-top: -5px;
  }
  .count-up {
    padding: 15px 0px;
  }
  .counter-count {
    font-size: 26px;
    margin-bottom: 5px;
  }
  .border-right {
    border-right: none;
    height: auto;
  }
  .service {
    border: 1px solid rgba(223, 223, 223, 0.464);
  }
  .background-flower {
    top: 15%;
    left: 0px;
  }
  .background-flower img {
    display: none;
  }
  .story-image {
    margin-left: auto !important;
    width: 100%;
  }
  .story-content p {
    font-size: 16px;
    text-align: left;
  }
  .story-content ul li {
    font-size: 14px;
  }
  .story-content ul li::marker {
    color: #d4b13f;
    font-size: 20px;
  }
  .count-up h3 {
    font-size: 14px;
  }
  .count-up span i {
    color: #d4b13f;
    font-size: 14px;
  }
  .counter-border {
    padding: 0px;
  }
}
@media (max-width: 320px) {
  .story-content h5 {
    margin-top: -5px;
  }
  .story-image {
    width: 100%;
  }
}
@media (min-width: 1600px) {
  .container {
    max-width: 1600px !important;
  }
}
@media (min-width: 993px) and (max-width: 1366px) {
  .story-video-box {
    flex-direction: column-reverse;
  }
  .story-video-box > div {
    width: 90%;
  }
  .story-video-box > div .background-flower {
    top: 75%;
    left: 95px;
  }
  .story-video-box > div .story-content h5 {
    text-align: center;
  }
  .story-video-box > div .story-content img {
    position: absolute;
    left: 23%;
    top: -2%;
  }
  .story-video-box > div .story-image {
    margin: auto;
  }
}