/* ========================== Global Variable ======================== */
:root {
    --primary: #cda373;
    --secondary: #c1c1c1;
    /* --black: #1496bb; */
    /* --black: #3c6478; */
    /* --black: #829356; */
    /* --black: #107896; */
    /* --black: #261d57; */
    /* --black: #2f342e; */
    /* --black: #336600; */
    /* --black: #003366; */
    /* --black: #000; */
    /* --black: #F2DFCE; */
    --black: #e1dcd8;
    --white: #fff;
    --yellow: #c39a70;
}

.img-fluid {
    max-width: 100%;
    width: auto;
    height: auto;
}

.container-fluid {
    width: 100%;
    max-width: 1720px;
    padding: 0 16px;
    margin: 0 auto;
}

.container {
    width: 100%;
    max-width: 1300px;
    padding: 0 16px;
    margin: 0 auto;
}

/* ======================= Sapartan font family ====================== */
@font-face {
    font-family: SpartanRegular;
    src: url(../fonts/SpartanRegular400.ttf);
}

/* ========================== body ====================== */

* {
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
    /* font-family: "Montserrat Alternates", sans-serif; */
    font-family: "Poppins", sans-serif;
    background-color: var(--black);
    overflow-x: hidden !important;
}

/* ================================== Header ======================================= */
header {
    position: sticky;
    display: block;
    width: 100%;
    margin: 0 auto;
    top: 0;
    padding: 30px 0;
    z-index: 999;
    transition: 0.5s all ease;
}

header.active {
    background: var(--black);
    transition: 0.5s all ease;
}

header.auth {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: #191919;
}

.headerWrapper {
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

.menuWrapper {
    position: relative;
    display: block;
    width: auto;
    animation-name: mobileMenuItems;
}

.menuWrapper ul, .bhrocherWrapper ul {
    position: relative;
    display: flex;
    width: auto;
    gap: 40px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menuWrapper ul li, .bhrocherWrapper ul li {
    font-size: 20px;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
    font-family: SpartanRegular;
    white-space: nowrap;
}

@media screen and (max-width: 767px) {
    .menuWrapper ul li, .bhrocherWrapper ul li, .bhrocherWrapper a {
        padding: 10px;
    }

    .menuWrapper ul li:before, .bhrocherWrapper ul li:before {
        display: inline-block;
        content: "";
        width: 25px;
        height: 2px;
        margin: 0px 10px 7px 50px;
        background-color: var(--yellow);
    }

    .bhrocherWrapper .brocher:before {
        display: inline-block;
        content: "";
        width: 25px;
        height: 2px;
        margin: 0px 10px 0px 50px;
        background-color: var(--yellow);
    }

    .bhrocherWrapper .brocher {
        margin-top: -10px;
    }

    .inputer{
        display: block !important;
        text-align: center;
    }

    .appoinment_text .inputer .app_input {
        width: 100% !important;
        padding: 10px 10px 10px 17px !important;
        border-radius: 5px !important;
    }

    .appoinment_text .inputer .input_btn {
        margin: 10px 0 0 0 !important;
        border-radius: 5px !important;
    }
    
    .header_heading {
        font-size: 20px;
        line-height: 35px;
        margin-bottom: 10px;
    }

    .section_slide {
        padding: 35px 0 70px 0 !important;
   }

   .appoinment_section {
    border-radius: 50px !important;
   }
}


/* @media screen and (max-width: 992px) {
    .appoinment_text .inputer .app_input {
        width: 210px;
        padding: 10px 0 10px 17px;
        font-size: 14px;
    }

    .appoinment_text .inputer .input_btn {
        padding: 10px 20px;
        font-size: 14px;
    }
} */

.menuWrapper ul li a,
.bhrocherWrapper ul li a {
    /* color: var(--secondary); */
    color: white;
    text-decoration: none;
}

.logoWrap {
    /* width: 19%; */
    width: 24%;
    text-align: center;
}

.bhrocherWrapper {
    position: relative;
    display: flex;
    width: auto;
    align-items: center;
    column-gap: 35px;
}

.bhrocherWrapper .brocher {
    position: relative;
    display: flex;
    align-items: center;
    width: auto;
    color: #cda273;
    font-size: 20px;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
    text-decoration: none;
    white-space: nowrap;
}

.bhrocherWrapper .brocher img {
    margin-left: 5px;
}

.bhrocherWrapper .login {
    position: relative;
    display: inline-block;
    width: auto;
    background-color: var(--primary);
    color: #02020d;
    font-size: 20px;
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize;
    padding: 10px 20px;
    text-decoration: none;
    border: 1px solid var(--primary);
    border-radius: 10px 10px 0px 0px;
}

@media screen and (max-width: 767px) {
    .bhrocherWrapper .login {
        font-size: 16px;
        padding: 1px 15px;
        border-radius: 20px 0px 20px 0px;
        margin-left: 55px;
        /* width: 113px; */
        width: auto;
        animation-name: mobileMenuItems;
    }
}

.heroVideo .overlay {
    position: absolute;
    display: inline-block;
    width: 100vw;
    height: 100vh;
    /* background: linear-gradient(
        180deg,
        #000 0%,
        rgba(0, 0, 0, 0.2) 53.65%,
        #000 100%
    ); */
    left: 0;
    top: 0;
    z-index: 5;
}

/* ===================================== Login ============================= */
.heroAuth {
    position: relative;
    /* display: block; */
    display: inline-table;
    width: 100%;
    /* height: calc(100vh - 100px); */
    /* background-image: url("../images/auth/authBG.png");
    background-position: center;
    background-size: cover; */
    /* margin-top: 115px; */
    padding-top: 115px;
    padding-bottom: 50px;
    height: 100vh;
    background: #f3efec;
}

.headerWrap form .title h3, .headerWrap form .title h4 {
    color : #191919d6;
}
.register-form-draj {
    margin: 50px 0 0 0;   
}

.headerWrap {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    margin: 50px 0 50px 0;
}

@media only screen and (max-width: 767px) {
    .headerWrap {
        margin-bottom: 100px;
    }
}

.headerWrap form {
    position: relative;
    display: block;
    width: 100%;
    max-width: 660px;
    border-radius: 20px;
    /* border: 1.8px solid #c39a70; */
    /* background: linear-gradient(125deg,
            rgba(52, 52, 52, 0.4) 1.79%,
            rgba(52, 52, 52, 0) 100%);
    backdrop-filter: blur(9px); */
    padding: 40px 50px;
    background-color: #fafafa;
    box-shadow: 0 12px 20px 0 rgb(212 214 215 / 72%);
}

.headerWrap form::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #cda373;
    background-color: rgba(0, 0, 0, 0.5);
}

.headerWrap form::-webkit-scrollbar {
    width: 6px;
    background-color: rgba(0, 0, 0, 0.5);
}

.headerWrap form::-webkit-scrollbar-thumb {
    background-color: #cda373;
}

.headerWrap form .title {
    text-align: center;
    margin-bottom: 50px;
    /* margin-bottom: 30px; */
}

.headerWrap form .title h2 {
    display: inline-block;
    position: relative;
    font-size: 32px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.32px;
    color: var(--white);
    text-align: center;
}

.headerWrap form .title h2:before,
.headerWrap form .title h2:after {
    position: absolute;
    display: inline-block;
    content: "";
    width: 4px;
    height: 100%;
    background-color: var(--yellow);
}

.headerWrap form .title h2:before {
    left: -25px;
}

.headerWrap form .title h2:after {
    right: -25px;
}

.inputwrapper {
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 20px;
}

.inputwrapper input,
.inputwrapper select {
    position: relative;
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid rgba(232, 232, 232, 0.3);
    padding: 12px 10px;
    padding-left: 42px;
    /* color: var(--secondary); */
    color: #191919d6;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.18px;
    /* text-transform: capitalize; */
    font-family: "Poppins", sans-serif;
    transition: 0.5s all ease;
}

.inputwrapper select option {
    padding-left: 0;
}

.inputwrapper input::placeholder {
    color: var(--secondary);
}

.inputIcon {
    position: absolute;
    display: inline-block;
    width: auto;
    left: 0;
    top: 8px;
}

.rememberBox {
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}

.rememberBox label {
    color: var(--secondary);
    font-size: 15px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.18px;
    text-transform: capitalize;
}

.rememberBox label span {
    color: var(--primary);
}

@media only screen and (max-width: 767px) {
    .rememberBox {
        display: block;
    }
}

.checkboxInput {
    position: relative;
    display: flex;
    width: auto;
}

.checkboxInput input {
    padding: 0;
    height: initial;
    width: initial;
    margin-bottom: 0;
    display: none;
    cursor: pointer;
}

.checkboxInput label {
    position: relative;
    cursor: pointer;
}

.checkboxInput label:before {
    content: "";
    background-color: transparent;
    border: 1px solid rgb(109 117 125);
    width: 22px;
    height: 22px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    margin-right: 5px;
    border-radius: 8px;
}

.checkboxInput input:checked+label:after {
    content: "";
    display: block;
    position: absolute;
    top: 4px;
    left: 9px;
    width: 6px;
    height: 14px;
    border: solid rgb(205 163 116);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.rememberBox a {
    position: relative;
    display: inline-block;
    width: auto;
    color: var(--yellow);
    text-align: center;
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.18px;
    text-transform: capitalize;
    text-decoration: none;
}

.authBtn {
    position: relative;
    display: flex;
    width: 100%;
    height: 50px;
    background-color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 12px 12px 2px 2px;
    color: #02020d;
    font-size: 20px;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

.forgotpassword p {
    color: #c1c1c1;
    text-align: center;
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.18px;
    text-transform: capitalize;
}

.forgotpassword p a {
    font-weight: 500;
    color: var(--yellow);
    text-decoration: none;
}

.inputwrappermain {
    position: relative;
    display: flex;
    width: 100%;
    column-gap: 40px;
}

.inputwrappermain .inputwrapper {
    width: 50%;
}

@media only screen and (max-width: 767px) {
    .inputwrappermain {
        display: block;
    }

    .inputwrappermain .inputwrapper {
        width: 100%;
    }
}

/* ========================== Banner =============================== */
.heroVideo {
    position: relative;
    display: block;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.heroVideo video {
    position: relative;
    display: block;
    width: 100%;
    /* height: 100vh; */
}

/* ================================= Logo slider =================================== */

.logoSlider {
    height: 100px;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 190px;
    background: linear-gradient(90deg,
            rgba(16, 16, 26, 0) -37.27%,
            #10101a 50.94%,
            rgba(16, 16, 26, 0) 128.78%);
}

.logoSlider .logo-track {
    display: flex;
    width: calc(250px * 14);
    animation: scroll 10s linear infinite;
}

.logoSlider .logoImg {
    height: 100px;
    width: 180px;
    display: flex;
    align-items: center;
}

.logoSlider .logoImg h5 {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.2px;
    margin-left: 12px;
}

@media only screen and (max-width: 767px) {
    .logoSlider .logoImg h5 {
        display: none;
    }

    .logoSlider .logoImg {
        width: 100px;
    }
}

@keyframes scroll {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(-20%);
    }
}

/* ===========================make order ======================= */

.heroOrder {
    margin: 120px 0;
    padding: 100px 0;
    position: relative;
}

.heroOrder2 {
    /* margin: 120px 0; */
    padding: 120px 0;
    position: relative;
    background: #fff;
    /* background: url(../galaxy2.jpeg) no-repeat center center;
    background-size: cover;
    background-attachment: fixed; */
}

.hero-shape-section {
    background: url(../galaxy2.jpeg) no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
}

.hero-shape-section h2 {
    color: #fff !important;
}

.heroOrder3 {
    /* margin: 120px 0; */
    padding: 120px 0;
    position: relative;
    /* background: #02020d; */
    background: #191919;
}

.orderWrap {
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 80px;
}

.imgWrap {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
}

.arrow {
    position: absolute;
    display: inline-block;
    width: auto;
    right: -8%;
    top: 40%;
}

.title {
    /* margin-bottom: 80px; */
    margin-bottom: 40px;
    text-align: center;
}

@media (max-width: 768px) {
    .title {
        margin-bottom: 30px;
        text-align: center;
    }
}

.title h2, .title h1 {
    position: relative;
    display: inline-block;
    /* color: #fff; */
    color: #000;
    font-size: 40px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.title p {
    /* color: #fff; */
    color: #000;
    text-align: center;
    font-size: 26px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.26px;
    margin-top: 30px;
}

.title h2:before, .title h1::before {
    position: absolute;
    display: inline-block;
    width: 4px;
    height: 100%;
    content: "";
    background: #c39a70;
    left: -27px;
    top: 0;
}

.title h2:after, .title h1::after {
    position: absolute;
    display: inline-block;
    width: 4px;
    height: 100%;
    content: "";
    background: #c39a70;
    right: -27px;
    top: 0;
}

.orderCont {
    position: relative;
    display: block;
    width: 100%;
    max-width: 1460px;
    margin: 0 auto;
    text-align: center;
}

.orderCont h5 {
    /* color: #fff; */
    color: #000;
    font-size: 26px;
    /* font-weight: 500; */
    font-weight: 800;
    line-height: normal;
    letter-spacing: 0.26px;
    margin-bottom: 15px;
}

.orderCont p {
    /* color: #c1c1c1; */
    color: #191919;
    font-size: 18px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.18px;
    margin-bottom: 0;
}

/* ================================= Explore our collections ================================= */

.center-slider .slick-slide {
    margin: 0 15px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.8);
    height: 450px;
    /* border: 1px solid rgba(255, 255, 255, 0.28); */
    transition: all 0.4s ease-in-out;
}

.center-slider .slick-slide img {
    max-width: 230px;
}

.center-slider .slick-slide,
.center-slider .slick-slide[aria-hidden="true"]:not(.slick-cloned)~.slick-cloned[aria-hidden="true"] {
    transform: scale(0.8, 0.8);
    transition: all 0.4s ease-in-out;
}

/* Active center slide (You can change anything here for cenetr slide)*/
.center-slider .slick-center,
.center-slider .slick-slide[aria-hidden="true"]:not([tabindex="-1"])+.slick-cloned[aria-hidden="true"] {
    transform: scale(1);
}

.center-slider .slick-current.slick-active {
    transform: scale(1);
}

.slick-next,
.slick-prev {
    z-index: 5;
}

.slick-next {
    right: 15px;
}

.slick-prev {
    left: 15px;
}

.slick-next:before,
.slick-prev:before {
    color: #fff;
    font-size: 26px;
}

.diamondImg.slick-slide:after {
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    content: "";
    /* background: rgb(0 0 0 / 23%); */
}

.center-slider .slick-current.slick-active:after {
    background: transparent;
}

.slick-track {
    /* left: 80px; */
}

.slick-current {
    /* background: #000; */
    /* border-bottom-right-radius : 80px;
    border-top-left-radius : 80px; */
    border-radius: 40px;
    /* box-shadow: 0 0 17px 10px rgb(0 0 0 / 6%); */
}

.slick-current img {
    /* -webkit-filter: drop-shadow(0px 15px 15px #ffffff9e);
    filter: drop-shadow(0px 15px 15px #ffffff9e); */
    -webkit-filter: drop-shadow(0px 0px 0px #ffffff)         drop-shadow(0px -5px 25px #ffffff)        drop-shadow(0px 0px 10px #ffffff)         drop-shadow(0px 0px 0px #ffffff);
    filter: drop-shadow(0px 0px 0px #ffffff)         drop-shadow(0px -5px 25px #ffffff)        drop-shadow(0px 0px 10px #ffffff)         drop-shadow(0px 0px 0px #ffffff);
}

.diamondImg.slick-slide:after {
    /* background: #000; */
}


/* =============================How To Buy Diamonds From D.Raj Diamond ============================== */
.rajCont {
    max-width: 430px;
}

.lineWrap {
    position: absolute;
    display: inline-block;
    width: auto;
    left: 0;
    right: 0;
    text-align: center;
    top: 33%;
    z-index: -1;
}

.rajWrap {
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 120px;
}

/* @media (max-width: 768px) {
    .invertImage {
        flex-direction: column-reverse;
    }
} */
.rajCont h3 {
    color: #c39a70;
    font-size: 30px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.3px;
    margin-bottom: 5px;
}

.rajCont h5 {
    /* color: #fff; */
    color: #000;
    font-size: 30px;
    /* font-weight: 500; */
    font-weight: 800;
    line-height: normal;
    letter-spacing: 0.26px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.rajCont p {
    /* color: #c1c1c1; */
    color: #000;
    font-size: 18px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.18px;
}

.diagif {
    position: absolute;
    display: inline-block;
    width: 50px;
    bottom: 39%;
    left: 26%;
}

.diagif:nth-child(2) {
    left: auto;
    right: 26%;
}

.diagif:nth-child(3) {
    left: 41%;
    width: 105px;
    bottom: 37%;
}

.rajImg {
    position: relative;
    display: inline-block;
    width: auto;
}

/* ============================== Wholesale ===================== */
.wholesalWrapper {
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
    column-gap: 100px;
}

.wholeCont {
    max-width: 670px;
}

.wholeCont p {
    /* color: #c1c1c1; */
    color: #000;
    font-size: 18px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.18px;
    margin-bottom: 25px;
}

.wholeCont h5 {
    /* color: #fff; */
    color: #000;
    font-size: 26px;
    /* font-weight: 500; */
    font-weight: 800;
    line-height: normal;
    letter-spacing: 0.26px;
    margin-bottom: 10px;
}

/* =========================== About Us ======================== */
/* .title2{
  margin: 0;
} */
.heroAbout {
    padding-bottom: 260px;
}

.aboutCont {
    text-align: left;
    position: relative;
}

.aboutCont h5 {
    /* color: #fff; */
    color: #000;
    font-size: 26px;
    /* font-weight: 500; */
    font-weight: 800;
    line-height: normal;
    letter-spacing: 0.26px;
    margin-bottom: 10px;
}

.aboutCont p {
    /* color: #c1c1c1; */
    color: #000;
    font-size: 18px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.18px;
    max-width: 450px;
}

.aboutWrapper {
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

.gifWrapper {
    position: relative;
    display: block;
    width: auto;
}

.gifCont {
    position: absolute;
    display: inline-block;
    left: 10%;
    width: auto;
    top: 100%;
}

.gifCont p {
    max-width: 550px;
}

.gifCont {
    text-align: center;
}

/* ========================== Order ============================= */
.orderBox {
    position: relative;
    display: flex;
    width: 100%;
    column-gap: 80px;
}

.orderContBox {
    position: relative;
    display: block;
    width: 100%;
    max-width: 552px;
    margin-top: 60px;
}

.orderContBox:nth-child(odd):before {
    position: absolute;
    display: block;
    content: "";
    width: 100%;
    height: 1px;
    /* background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        #fff 52.08%,
        rgba(255, 255, 255, 0) 100%
    ); */
    bottom: 0;
    left: 0;
    opacity: 0.3;
}

.orderContBox:after {
    position: absolute;
    display: block;
    content: "";
    width: 1px;
    height: 100%;
    opacity: 0.3;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            #fff 52.08%,
            rgba(255, 255, 255, 0) 100%);
    top: 0;
    right: -40px;
}

.orderContBox:last-child::after {
    display: none;
}

.orderContBox h5 {
    /* color: #fff; */
    color: #000;
    text-align: center;
    font-size: 23px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.26px;
    margin-bottom: 10px;
}

.orderContBox p {
    /* color: #c1c1c1; */
    color: #000;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.18px;
}

/* ==========================Contact Us =====================================  */

.contactWraper {
    position: relative;
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.contactform {
    position: relative;
    display: block;
    width: 100%;
    max-width: 550px;
}

.contactform .inputWrapper {
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 15px;
}

.contactform .inputWrapper input,
.contactform .inputWrapper textarea {
    position: relative;
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid rgb(39 39 39 / 30%);
    padding: 20px 10px;
    padding-left: 42px;
    /* color: var(--secondary); */
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.18px;
    transition: 0.5s all ease;
}

.contactform .inputWrapper .inputIcon {
    position: absolute;
    display: inline-block;
    width: auto;
    left: 0;
    top: 18px;
}

.contactBtn {
    margin-top: 45px;
}

.contactBtn button {
    border-radius: 12px 12px 2px 2px;
    background: #cda373;
    color: #02020d;
    text-align: center;
    font-family: Poppins;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize;
    width: 151px;
    height: 52px;
    flex-shrink: 0;
    border: 1px solid #cda273;
}

.contactTitle h5 {
    color: #505050;
    /* font-size: 80px; */
    font-size: 30px;
    font-weight: 500;
    line-height: 119px;
    letter-spacing: 4px;
    /* transform: rotate(-90deg); */
    margin-top: 110px;
}

.conatcGif {
    position: absolute;
    display: inline-block;
    width: auto;
    top: -120px;
    left: 320px;
    z-index: -1;
    max-width: 360px;
}

.heroContact {
    padding-bottom: 70px;
    /* margin: 120px 0; */
    margin: 15% 0 100px 0;
}

@media (max-width: 768px) {
    .heroContact {
        padding-bottom: 10px;
        margin: 120px 0;
    }
}

/* .heroContactPage {
    padding-bottom: 10px;
    margin: 120px 0;
} */

/* ========================== CTA ================================== */

/* .heroCta {
    position: relative;
    display: block;
    width: 100%;
    padding: 100px 0;
    background: url("../images/footer/cta.png");
    text-align: center;
} */

.heroCta.container {
    /* margin: 100px 0; */
    background: #fff;
}

.heroCta {
    background: #fff;
    position: relative;
    display: block;
    width: 100%;
    padding: 100px 0;
    /* margin: 100px 0; */
    /* background: url("../images/footer/cta.png"); */
    text-align: center;
}

.ctaCont {
    max-width: 800px;
    margin: 0 auto;
}

.ctaCont h5 {
    /* color: #fff; */
    color: #000;
    text-align: center;
    font-size: 56px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.56px;
    margin-bottom: 50px;
}

.waitlistWrap {
    position: relative;
    display: block;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.waitlistWrap form {
    position: relative;
    display: flex;
    width: 100%;
}

.waitlistWrap button {
    display: flex;
    width: 100%;
    max-width: 240px;
    padding: 15px 37px;
    justify-content: center;
    align-items: center;
    border-radius: 12px 12px 2px 2px;
    background: #cda373;
    color: #02020d;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize;
    border: 1px solid #cda273;
    transition: 0.5s all ease;
}

.waitlistWrap input {
    position: relative;
    display: block;
    width: calc(100% - 240px);
    background-color: transparent;
    padding: 20px;
    border: none;
    /* border-bottom: 1px solid rgba(232, 232, 232, 0.3); */
    border-bottom: 1px solid rgba(17, 17, 17, 0.3);
    padding-left: 41px;
    color: #c1c1c1;
    font-size: 18px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.18px;
}

.waitlistWrap input::placeholder {
    color: #c1c1c1;
}

.waitlistWrap .emailIcon {
    position: absolute;
    display: inline-block;
    width: auto;
    bottom: 12px;
    left: 0;
}

.listTab {
    position: relative;
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.listTab ul {
    margin: 0;
    padding-left: 16px;
}

.listTab ul li {
    /* color: #c1c1c1; */
    color: #000;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.16px;
}

/* ==========================Footer =============================== */

.footerWrapper {
    position: relative;
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 100px 0 0 0;
}

.footerlogoWrap {
    position: relative;
    display: block;
    width: 33%;
    max-width: 477px;
}

.footerMenu,
.locationMap {
    position: relative;
    display: block;
    width: 33%;
}

.locationMap {
    text-align: right;
    max-width: 500px;
}

.footerMenu {
    max-width: 182px;
    text-align: left;
}

.footerlogoWrap .cont p {
    color: #c1c1c1;
    font-size: 18px;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
    margin: 25px 0;
}

.footerlogoWrap .cont ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footerlogoWrap .cont ul li {
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
    margin-bottom: 20px;
}

.footerlogoWrap .cont ul li a {
    text-decoration: none;
    color: #fff;
    transition: 0.5s all ease;
}

.footerlogoWrap .cont ul li a:hover {
    color: #cda273;
    transition: 0.5s all ease;
}

.footerlogoWrap .cont ul li img {
    margin-right: 12px;
}

footer {
    /* margin-top: 100px; */
    background: #191919;
}

@media screen and (max-width: 767px) {
    footer {
        margin-top: -40px;
        background-size: contain;
    }
}

.footerMenu h5,
.locationMap h5 {
    color: #fff;
    font-size: 26px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.26px;
    margin-bottom: 20px;
    text-align: left;
}

.footerMenu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footerMenu ul li {
    color: #c1c1c1;
    font-size: 18px;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
    margin-bottom: 15px;
}

.footerMenu ul li a {
    text-decoration: none;
    color: #c1c1c1;
    transition: 0.5s all ease;
}

.footerMenu ul li a:hover {
    color: #cda273;
    transition: 0.5s all ease;
}

.locationMap iframe {
    position: relative;
    display: block;
    width: 100%;
    border: none;
    height: 280px;
    border-radius: 8px;
}

.heroCopy {
    border-top: 1px solid rgba(232, 232, 232, 0.3);
    padding: 30px 0;
    background: #000;
}

.copyRightWrap {
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

.copyRightWrap p {
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    text-transform: lowercase;
}

.copyRightWrap ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    column-gap: 10px;
}

.copyRightWrap ul li {
    display: inline-block;
    width: auto;
}

.copyRightWrap ul li a {
    position: relative;
    display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
}

/* ===================================== About Page ================================ */
.serviceCont h5 {
    font-size: 26px;
    font-weight: 500;
    line-height: 39px;
    letter-spacing: 0.01em;
    margin-bottom: 10px;
    color: #fff;
}

.serviceCont p {
    color: #c1c1c1;
    font-size: 18px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.18px;
}

.serviceWrap {
    position: relative;
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.serviceCont {
    /* position: relative;
    display: block;
    width: 100%;
    max-width: 410px; */
    text-align: center;
}

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

.line-count {
    /* position: absolute;
    display: block;
    content: "";
    width: 1px;
    height: 100%;
    opacity: 0.3;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        #fff 52.08%,
        rgba(255, 255, 255, 0) 100%
    );
    right: -25%;
    top: 0; */
    border-right: 1px solid;
}

@media screen and (max-width: 767px) {
    .line-count {
        border: block;
    }
}

/* .serviceCont:last-child::after {
    display: none;
} */

.testiCont {
    text-align: center;
}

.testiCont h5 {
    color: #c39a70;
    font-size: 26px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.26px;
    margin-bottom: 5px;
}

@media (max-width: 767px) {
    .testiCont h5 {
        font-size: 24px;
    }
}

@media (max-width: 575px) {
    .testiCont h5 {
        font-size: 20px;
    }
}

.testiCont p {
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.18px;
    margin-bottom: 40px;
}

@media (max-width: 767px) {
    .testiCont p {
        font-size: 14px;
    }
}

@media (max-width: 575px) {
    .testiCont p {
        font-size: 12px;
        text-align: left;
    }
}

.testiCont p:last-child {
    margin-bottom: 0;
}

.star ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    column-gap: 12px;
    justify-content: center;
    margin-bottom: 40px;
}

.item {
    margin: 3px;
}

.testiCont {
    text-align: center;
    border-radius: 20px;
    border: 1px solid transparent;
    background: transparent;
    backdrop-filter: blur(9px);
    padding: 40px;
    opacity: 0.4;
}

.slick-slide.slick-active.slick-center .testiCont {
    border: 1px solid #c39a70;
    opacity: 1;
    background: linear-gradient(125deg,
            rgba(52, 52, 52, 0.2) 1.79%,
            rgba(52, 52, 52, 0) 100%);
}

.mobileMenu {
    display: none;
}

.closeButton {
    position: absolute;
    display: none;
    width: auto;
    right: 32px;
    top: 15px;
    max-width: 20px;
    z-index: 99;
}

/* ====================================Diamonds 4C ====================================== */

.baseSection {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 350px;
    align-items: end;
    justify-content: center;
}

.baseImg {
    position: relative;
    display: flex;
    width: 100%;
    align-items: end;
    justify-content: center;
    top: -50px;
}

.dimondwrapper {
    position: absolute;
    display: inline-block;
    width: 100%;
    bottom: 36%;
}

.cut {
    position: absolute;
    display: flex;
    width: auto;
    column-gap: 20px;
    align-items: center;
}

.cut h5 {
    font-size: 30px;
    line-height: 400;
    line-height: 45px;
    letter-spacing: 1%;
    color: #fff;
}

.cut {
    position: absolute;
    display: flex;
    width: auto;
    column-gap: 20px;
    align-items: center;
    left: -320px;
    top: 20px;
}

.cut.color {
    left: auto;
    right: -310px;
}

.cut.clarity {
    top: 190px;
    left: -370px;
}

.cut.carat {
    left: auto;
    top: 190px;
    right: -370px;
}

.dimondWrap {
    margin-top: 20px;
}

.diamondImg {
    /* max-width: 450px; */
    position: relative;
    left: 8px;
}

.diamondCont {
    max-width: calc(100% - 50%);
}

.diamondCont p {
    font-size: 18px;
    line-height: 21px;
    font-weight: 400;
    color: #c1c1c1;
}

.diamondCont2 {
    max-width: calc(100% - 0%);
}

.diamondCont2 p {
    font-size: 18px;
    line-height: 21px;
    font-weight: 400;
    color: #c1c1c1;
}

.img-ce {
    text-align: center;
    margin-bottom: 15px;
}

.diamondTitle h5 {
    font-family: "Montserrat Alternates";
    font-size: calc(1rem + ((1vw - 7.68px) * 10));
    font-weight: 600;
    line-height: 140px;
    letter-spacing: 0.01em;
    text-align: left;
    color: #414141;
}

.diamondImg.colorImg {
    left: 12px;
}

.diamondImg.clarity {
    left: -40px;
}

.diamondImg.carat {
    left: 20px;
}

.dimondwrapper {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.dimondwrapper.visible {
    opacity: 1;
}

.dimondwrapper1 {
    width: auto;
}

.dimondwrapper1 {
    width: auto;
}

.codeline_portfolio {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.codeline_portfolio .home-portfolio {
    position: relative;
    padding: 30% 0;
}

.codeline_portfolio .mobile-portfolio-wraper {
    display: none;
}

.codeline_portfolio .container {
    height: 100%;
    width: 50%;
}

.codeline_portfolio .right-portfolio-wraper {
    width: 40%;
    height: 100%;
    position: relative;
}

.codeline_portfolio .portfolio-left {
    /*width: 700px;*/
    position: absolute;
    top: 215px;
    left: 0;
}

.codeline_portfolio .mobile_wrapper {
    width: 500px;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 99999;
    top: 60%;
    margin: auto;
    transform: translate(0%, -50%);
}

/* .codeline_portfolio .mobile-video {
    position: absolute;
    z-index: 111;
  } */
.codeline_portfolio .mobile-video .main {
    position: absolute;
    top: -60%;
    left: 24%;
    z-index: 111;
}

.codeline_portfolio .mobile-video .cut {
    position: absolute;
    top: -60%;
    left: 0;
    z-index: 111;
}

.codeline_portfolio .mobile-video .color {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 111;
}

.codeline_portfolio .mobile-video .clarity {
    position: absolute;
    top: -28%;
    left: 15%;
    z-index: 111;
}

.codeline_portfolio .mobile-video .carat {
    position: absolute;
    top: -15%;
    left: -1%;
    z-index: 111;
}

.codeline_portfolio .mobile-video video {
    width: 100%;
}

.codeline_portfolio .project-clip {
    clip: rect(auto, auto, auto, auto);
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    display: flex;
}

.codeline_portfolio .mobile-frame {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 99;
}

.codeline_portfolio .mobile-frame img {
    width: 100%;
    height: 100%;
}

.codeline_portfolio .mobile-video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.codeline_portfolio .company-portfolio-left-info-box {
    width: 100%;
    float: left;
    padding: 0px 0 0 60px;
}

.codeline_portfolio .portfolio-info-head {
    width: 100%;
    float: left;
}

.codeline_portfolio .portfolio-logo,
.codeline_portfolio .portfolio-logo1,
.codeline_portfolio .portfolio-logo2 {
    float: left;
    margin: 0 0 25px 0;
}

.codeline_portfolio .portfolio-content-wraper {
    width: 70%;
    float: left;
    margin-left: 20px;
}

.codeline_portfolio .portfolio-content-wraper h2 {
    color: #000;
    font-size: 22px;
    margin: 0;
}

.codeline_portfolio .portfolio-content-wraper p {
    color: #008fa8;
    font-size: 20px;
    font-family: "Lobster Two";
}

.codeline_portfolio .portfolio-content-wraper h2:before {
    content: "";
    width: 60px;
    height: 3px;
    background-color: #008fa8;
    display: block;
    margin-bottom: 4px;
    position: relative;
}

.codeline_portfolio .portfolio-info {
    width: 100%;
    float: left;
}

.codeline_portfolio .right-poin-text-wraper {
    width: 100%;
    float: left;
    position: absolute;
    top: 195px;
    left: 219px;
}

.codeline_portfolio .app-download-link-wraper {
    width: 100%;
    float: left;
    margin: 0;
}

.Diamond {
    display: none;
}

@media screen and (max-width: 1200px) {
    .codeline_portfolio {
        display: none;
    }

    .Diamond {
        display: block;
        margin-top: 120px;
    }

    .diamondTitle h5 {
        font-size: 50px;
    }
}

/* ================================Responsive Css =============================== */
@media only screen and (max-width: 767px) {
    .heroVideo {
        height: auto;
        margin-top: 120px;
    }

    .logoSlider {
        height: 100px;
    }

    .title h2 {
        /* font-size: 20px; */
        font-size: 25px;
    }

    .orderWrap,
    .rajWrap,
    .wholesalWrapper,
    .aboutWrapper,
    .orderBox,
    .contactWraper,
    .footerWrapper,
    .copyRightWrap,
    .serviceWrap {
        flex-wrap: wrap;
    }

    .orderWrap .arrow,
    .lineWrap,
    .logoWrap {
        display: none;
    }

    .imgWrap,
    .rajCont,
    .wholeImg,
    .copyRightWrap p,
    .rajImg,
    .aboutCont,
    .serviceCont {
        margin-bottom: 30px;
    }

    .rajWrap {
        margin-bottom: 0;
    }

    .gifCont {
        position: relative;
        text-align: left;
        margin-bottom: 30px;
        left: 0;
        top: 0;
    }

    .heroAbout {
        padding-bottom: 0;
    }

    .orderContBox {
        margin-top: 0;
        margin-bottom: 40px;
    }

    .orderContBox:after,
    .orderContBox:nth-child(odd):before {
        display: none;
    }

    .contactTitle h5 {
        margin-top: 0;
        transform: rotate(0deg);
        font-size: 24px;
    }

    .contactTitle h5 br,
    .conatcGif {
        display: none;
    }

    .heroOrder,
    .heroOrder2,
    .heroOrder3,
    .heroContact {
        /* margin: 60px 0; */
        /* margin: 40px 0; */
    }

    .heroOrder,
    .heroOrder2,
    .heroOrder3 {
        padding: 40px 0;
    }

    .ctaCont h5 {
        font-size: 26px;
    }

    .waitlistWrap form {
        display: block;
    }

    .waitlistWrap button {
        margin-top: 30px;
    }

    .waitlistWrap input {
        width: 100%;
    }

    .waitlistWrap .emailIcon {
        bottom: 98px;
    }

    .footerlogoWrap,
    .footerMenu,
    .locationMap {
        width: 100%;
        margin-bottom: 30px;
        max-width: 100%;
    }

    .testiCont {
        padding: 20px;
    }

    @media (max-width: 575px) {
        .testiCont {
            padding: 8px;
        }
    }

    .mobileMenu {
        display: flex;
        justify-content: space-between;
        width: 100%;
        position: relative;
        padding: 0 15px;
        align-items: center;
    }

    header {
        padding: 10px 0;
    }

    .headerWrapper {
        position: fixed;
        display: block;
        width: 100%;
        left: 0;
        top: 0;
        background: #000;
        height: 100vh;
        transform: translateX(-100%);
        transition: 0.5s all ease;
    }

    .headerWrapper.active {
        transform: translateX(0%);
        transition: 0.5s all ease;
    }

    .menuWrapper {
        padding-left: 16px;
    }

    .menuWrapper ul,
    .bhrocherWrapper ul {
        display: block;
        width: 100%;
        margin-top: 30px;
    }

    .menuWrapper ul li,
    .bhrocherWrapper ul li, {
        margin-bottom: 15px;
    }

    .closeButton {
        display: inline-block;
    }

    .bhrocherWrapper {
        display: block;
        padding-left: 16px;
    }

    .bhrocherWrapper .brocher:first-child {
        margin-bottom: 0px;
    }

    .bhrocherWrapper .brocher {
        margin-bottom: 15px;
    }

    .headerWrap form {
        width: calc(100% - 32px);
    }

    .headerWrap form .title h2 {
        font-size: 26px;
    }

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

.alert {
    position: relative;
    padding: 1rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .475rem
}

.alert-heading {
    color: inherit
}

.alert-link {
    font-weight: 500
}

.alert-dismissible {
    padding-right: 3rem
}

.alert-dismissible .btn-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: 1.25rem 1rem
}

.alert-white {
    color: #666;
    background-color: #fff;
    border-color: #fff
}

.alert-white .alert-link {
    color: #525252
}

.alert-light {
    color: #626364;
    background-color: #fdfefe;
    border-color: #fcfdfe
}

.alert-light .alert-link {
    color: #4e4f50
}

.alert-primary {
    color: #005f94;
    background-color: #ccecfd;
    border-color: #b3e2fd
}

.alert-primary .alert-link {
    color: #004c76
}

.alert-secondary {
    color: #5b5c60;
    background-color: #fafafc;
    border-color: #f7f8fa
}

.alert-secondary .alert-link {
    color: #494a4d
}

.alert-success {
    color: #205237;
    background-color: #dcf5e7;
    border-color: #cbf0dc
}

.alert-success .alert-link {
    color: #1a422c
}

.alert-info {
    color: #44228c;
    background-color: #e3d7fb;
    border-color: #d5c4f9
}

.alert-info .alert-link {
    color: #361b70
}

.alert-warning {
    color: #665000;
    background-color: #fff4cc;
    border-color: #ffeeb3
}

.alert-warning .alert-link {
    color: #524000
}

.alert-danger {
    color: #912741;
    background-color: #fcd9e2;
    border-color: #fbc6d3
}

.alert-danger .alert-link {
    color: #741f34
}

.alert-dark {
    color: #0e111e;
    background-color: #d1d2d6;
    border-color: #babbc2
}

.alert-dark .alert-link {
    color: #0b0e18
}

@keyframes progress-bar-stripes {
    0% {
        background-position-x: 1rem
    }
}

/* custom code [START] */
.ring-img {
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    max-width: 45%;
}

.half-ring-design2 {
    position: absolute;
    /* z-index: -1; */
    top: 25%;
    right: 0;
    /* -webkit-transform: scale(-1);
    -moz-transform: scale(-1);
    -ms-transform: scale(-1);
    -o-transform: scale(-1);
    transform: scale(-1); */
}

span.heart-shape::before,
.heart-shape::before {
    position: absolute;
    content: "";
    background-image: url(../images/Heart.svg);
    width: 112px;
    height: 80px;
    background-repeat: no-repeat;
    left: -50px;
    top: -6px;
    z-index: -1;
    filter: grayscale(1);
}

.custom-heart-draj::before {
    background: url(../images/Heart2.png) no-repeat 100% 100%;
    background-size: 200px;
    content: '';
    position: absolute;
    bottom: -33%;
    right: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.draj-cs {
    color: #cda374 !important;
}

.draj-white {
    color: white !important;
}

@media screen and (max-width: 575px) {
    .col-reverse {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse
    }

    .diagif:nth-child(3) {
        left: 39%;
        width: 87px;
        bottom: 34%;
    }

    .diagif:nth-child(2) {
        left: auto;
        right: 24%;
        bottom: 36%;
    }

    .diagif {
        position: absolute;
        display: inline-block;
        width: 46px;
        bottom: 37%;
        left: 24%;
    }
}

.form-part {
    padding-right: 140px;
}

.form_heading {
    font-weight: 900;
    font-size: 46px;
    line-height: 64px;
    color: var(--primary);
    margin-bottom: 20px;
}

.sub_text {
    font-weight: normal;
    font-size: 24px;
    line-height: 27px;
    color: black;
}

@media screen and (max-width: 992px) {
    .form-part {
        padding-right: 0;
        margin-bottom: 30px;
    }

    .form_heading {
        font-size: 30px;
        line-height: 47px;
        margin-bottom: 15px;
    }
}

footer {
    background-image: url(../images/diamond2.png);
    background-position: center;
    /* background-size: contain; */
}

#why-choose-us-draj {
    background: #ffffff;
    padding-top: 40px;
    padding-bottom: 1px;
    margin-bottom: 40px;
}

div#why-choose-us-draj .widget-title .box-title .title {
    /* background: #F5F3FF; */
    color: #000;
}

.widget-title .box-title {
    color: #000;
    position: relative;

    font-size: 22px;
    letter-spacing: .05em;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 15px;

}

.fivelist li.Services-item {
    min-width: 250px;
    padding: 15px;
}

.fivelist li.Services-item a {
    color: #292929;
}

.fivelist li.Services-item h5 {
    margin-bottom: 15px;
    font-size: 24px;
    font-weight: 600;
    /* color: #cda373; */
    color: #191919;
}

.fivelist li.Services-item p {
    overflow: hidden;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    margin-bottom: 10px;
}

.why-draj {
    display: block;
    border-bottom: 2px dotted #cda373;
}


.subscribe-draj-diamonds {
    background: #9a9a9a !important;
}

.appoinment_section {
    background-image: url('../subscribe-bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    padding: 26px;
    background-position-y: center;
    border-radius: 17px;
}

.appoinment_img {
    align-items: center;
    align-self: center;
    text-align: center;
}

.appoinment_text .inputer .app_input {
    width: 250px;
    padding: 13px 0 13px 17px;
    border: none;
    border-radius: 5.55422px 0px 0px 5.55422px;
    color: var(--light-secondry);
    font-size: 16px;
    line-height: 19px;
    font-feature-settings: 'salt' on, 'liga' off;
}

.appoinment_text .inputer .app_input::placeholder {
    color: var(--light-secondry);
    opacity: 1;
    /* Firefox */
}

.appoinment_text .inputer .app_input:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: var(--light-secondry);
}

.appoinment_text .inputer .app_input::-ms-input-placeholder {
    /* Microsoft Edge */
    color: var(--light-secondry);
}

.inputer {
    display: flex;
}

.appoinment_text .inputer .input_btn {
    padding: 13px 26px;
    color: #191919;
    font-weight: 500;
    margin: 0;
    font-size: 16px;
    line-height: 19px;
    font-feature-settings: 'salt' on, 'liga' off;
    border-radius: 0px 5.55422px 5.55422px 0px;
    border: none;
    background-color: var(--primary);
    margin-left: 8px;
    transition: 0.3s ease-in-out;
}

.appoinment_text .inputer .input_btn img {
    margin-left: 8px;
}

.appoinment_text .inputer .input_btn:hover {
    /* background: var(--light-secondry); */
    transition: 0.3s ease-in-out;
}

.app_input::placeholder {
    color: silver !important;
}

.app_input::-moz-placeholder {
    color: silver !important;
}

.app_input::-webkit-input-placeholder {
    color: silver !important;
}