:root {
    --ARTEGRASANSEXTENDED_REGULAR: 'ARTEGRASANSEXTENDED-REGULAR';
    --primarycolor: #b99571;
    --secondarycolor: #fff;
    --backgroundbg: #000;
    --topbg: #2a2929;
    --headtext: #484848;
    --artegra_sans_extended: 'artegra_sans_extended';
}

/* -- ARTEGRASANSEXTENDED-REGULAR Font-- */
@font-face {
    font-family: "ARTEGRASANSEXTENDED-REGULAR";
    src: local("ARTEGRASANSEXTENDED-REGULAR"),
        url("../fonts/ARTEGRASANSEXTENDED-REGULAR.OTF") format("opentype");
}

@font-face {
    font-family: "artegra_sans_extended";
    src: local("artegra_sans_extended"),
        url("../fonts/artegra_sans-extended-sc-400-regular.otf") format("opentype");
}


*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    font-family: var(--ARTEGRASANSEXTENDED_REGULAR);
	background-color: var(--backgroundbg);
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    font-family: var(--ARTEGRASANSEXTENDED_REGULAR);
}

p {
    color: #bdb0b0 !important;
}


.textcolor {
    color: var(--primarycolor);
}

.gap20 {
    gap: 20px;
}

.paddingLR {
    padding: 0 40px;
}

.padding40 {
    padding: 40px 0;
}

.colpadding40 {
    padding: 40px;
}

.colpadding {
    padding: 80px;
}

.botpadding80 {
    padding-bottom: 80px;
}

.fs25 {
    font-size: 25px;
}

/* topbar start */
/* .topbar {
    background-color: var(--topbg);
    color: var(--secondarycolor);
    padding: 10px;
} */

/* topbar end */

/* header start */

.NcLOGO {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 8px;
}

.NcLOGOTxt {
    font-family: var(--artegra_sans_extended);
    color: #b29775;
    text-decoration: none;
    animation: slideInFromLeft 0.8s ease-out;
	margin-bottom:0;
}


@keyframes slideInFromLeft {
		from {
			transform: translateX(-100%);
			opacity: 0;
		}
		to {
			transform: translateX(0);
			opacity: 1;
		}
	}

.sticky-header {
    position: fixed !important;
    top: 0;
    width: 100%;
    z-index: 1000;
    animation: slideDown 0.35s ease-out;
    box-shadow: 0 0 4px rgb(0 0 0 / 10%), 0 4px 8px rgb(0 0 0 / 15%);
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

.headerbg {
    background-color: var(--backgroundbg);
    color: var(--headtext);
	padding:20px 0;
}
.headerbg img{
	width:18%;
}

.nav-link {
   /* color: var(--headtext);*/
    font-size: 18px;
    font-weight: 900;
}

.nav-link:hover {
    color: var(--primarycolor);
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
    color: var(--primarycolor);
}
.submitcenetr {
    display: flex!important;
    flex-basis: auto;
    justify-content: center;
    width: 100%;
}
.navbar-expand-lg .navbar-nav {
    flex-direction: row;
    gap: 14px;
}
.loginbtn {
    border: 1px solid var(--primarycolor);
    font-size: 20px;
    font-weight: 900;
    color: var(--headtext);
     padding: 10px 14px 7px 14px; 
}

.loginbtn:hover {
    border: 1px solid var(--headtext);
    color: var(--primarycolor);
}
.dropmenu {
    background: #0d0d0d !important;
    /* border: 1px solid var(--primarycolor); */
}
.dropmenu li a {
    color: #c4c2c1;
    padding: 10px 20px;
}
.dropmenuborder{
    border-bottom: 1px solid var(--primarycolor);
}

/* Default state - hide the dropdown menu */
/* Default hidden state for dropdown menu */
.dropdown-menu {
    display: none; /* Keep it hidden initially */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
}

.dropdown-item:hover {
    display: block;
    color: #b99571;
    background: none;
}

/* Show dropdown on hover */
.nav-item.dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    top: 150%;
    left: 0;
    /* text-align: center; */
}

/* Menu items default position (above and hidden) */
.dropdown-menu li {
    opacity: 0;
    transform: translateY(-20px); /* Starts higher */
    animation: none; /* Prevents animation replay issues */
}

/* When hovering, trigger the animation */
.nav-item.dropdown:hover .dropdown-menu li {
    animation: dropDown 0.4s ease-out forwards;
}

/* Staggered animation delay for each item */
.nav-item.dropdown:hover .dropdown-menu li:nth-child(1) {
    animation-delay: 0.1s;
}
.nav-item.dropdown:hover .dropdown-menu li:nth-child(2) {
    animation-delay: 0.3s;
}
.nav-item.dropdown:hover .dropdown-menu li:nth-child(3) {
    animation-delay: 0.5s;
}

/* Drop-down animation (No fade, only vertical movement) */
@keyframes dropDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Show the dropdown menu on hover for desktop */
@media only screen and (min-width: 769px) {
    .dropdown:hover .dropdown-menu {
        display: block;
        background: var(--backgroundbg);
    }
}

/* Mobile-specific: Ensure the dropdown is visible when clicked */
@media only screen and (max-width: 768px) {
    .dropdown-menu {
        display: none;
        position: absolute;
        background: #646363;
        width: 100%;
        z-index: 1000;
        margin-top: 10px !important;
        padding: 5px;
    }
}

/* .navbar-collapse {
    margin-left: 5%;
} */

.dispnone {
    display: none !important;
}

/* header end */

/* brand start */
.Jewelrybrand {
    position: relative;
}

.Jewelrybrandtext {
    position: absolute;
    top: 30%;
    text-align: center;
    padding-right: 10%;
}

.Jewelrybrandtext h1 {
    font-size: 50px;
}

/* brand end */

/* Unparalleled Quality start */
.UnparalleledQuality {
    position: relative;
    padding: 0;
    background: #000;
}

.UnparalleledQualitytext {
    position: absolute;
    top: 30%;
    padding-right: 10%;
}

.UnparalleledQualitytext h1 {
    font-size: 50px;
    color: var(--primarycolor);
}

.UnparalleledQualitytext p {
    color: var(--headtext);
    font-size: 20px;
    font-weight: 900;
}

/*Unparalleled Quality end */

/* Comprehensive Services start */
.Services {
    position: relative;
}

.border {
    border: 1px solid var(--primarycolor) !important;
    position: absolute;
    top: 10%;
    left: 15%;
    right: 15%;
    padding: 40px;
}

.Servicestext {
    padding-top: 40px;
    padding-bottom: 40px;
}

.Servicestext h1 {
    font-size: 50px;
    color: var(--primarycolor);
}

.Servicestext p {
    color: var(--headtext);
    font-size: 18px;
    font-weight: 900;
}

.viewmore {
    border: 2px solid var(--headtext);
    font-size: 18px;
    font-weight: 900;
    color: var(--primarycolor) !important;
    padding: 10px 40px;
}

.viewmore:hover {
    border: 2px solid var(--primarycolor) !important;
    color: var(--headtext) !important;
}

.serviceimg {
    position: absolute;
    top: 15%;
    left: 15%;
    transform: translate(10px, -12px);
}

.serImg{
    padding-right: 42px;
}

/* Comprehensive Services end */

/* Unmatched Craftsmanship  start */
.Craftsmanship {
    position: relative;
}

.Craftsmanshiptext {
    position: absolute;
    top: 15%;
    padding-right: 20%;
}

.Craftsmanshiptext h1 {
    font-size: 50px;
    color: var(--primarycolor);
}

.Craftsmanshiptext p {
    color: var(--headtext);
    font-size: 18px;
    font-weight: 600;
}

/* Unmatched Craftsmanship  end */

/* Trusted Excellence start */
.Trusted {
    background-color: var(--backgroundbg);
    position: relative;
    padding: 80px 0;
}

.TrustedImg {
    flex: 1.4;
    border-bottom: 2px solid var(--primarycolor);
    border-top: 2px solid var(--primarycolor);
    border-right: 2px solid var(--primarycolor);
    border-left: none;
}

.Excellence {
    flex: 1;
    position: relative;
}

.ModdelImg {
    position: absolute;
    left: -8%;
    top: -18%;
}

.ExcellenceTxt {
    position: absolute;
    bottom: 4%;
    padding-right: 30%;
    left: 6%;
}

.ExcellenceTxt h1 {
    font-size: 40px;
    color: var(--primarycolor);
}

.ExcellenceTxt p {
    color: var(--headtext);
    font-size: 18px;
    font-weight: 600;
}



/* Trusted Excellence end */

/* Start Your Order start */
.order {
    background-color: var(--backgroundbg);
    padding: 40px 0 110px ;
}

.startorder {
    position: relative;
}

.startorder p {
    color: var(--headtext);
    font-size: 18px;
    font-weight: 600;
}

.startorderimg {
    position: absolute;
    left: 22%;
    top: 0%;
}

/* Start Your Order end */

/*Icons*/

.Icons {
    background-image: url(../img/iconsBg.jpg);
    padding: 6% 5%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.Icons p {
    color: var(--primarycolor);
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

/*Icons*/

/* footer start */
.footer {
    background-color: var(--backgroundbg);
    padding: 40px 0;
}

.socialICN {
    display: flex;
    gap: 30px;
    font-size: 38px;
    color: #fff;
    align-items: center;
    justify-content: start;
}
.socialICN a {
    color: #fff;
    line-height: 0;
}

.ICN:hover{
 color: var(--primarycolor);
}
.ICN2:hover{
    color: var(--primarycolor);
}
.ICN3:hover{
    color: var(--primarycolor);
}
.ICN4:hover{
    color: var(--primarycolor);
}

.submit {
    background-color: transparent;
    border: 1px solid var(--secondarycolor);
    color: var(--primarycolor);
    padding: 10px 40px;
}

.submit:hover {
    background-color: transparent;
    border: 1px solid var(--primarycolor);
    color: var(--secondarycolor);
    padding: 10px 40px;
}

.mailform {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
}

.submitform {
    width: 100%;
    height: 48px;
    color: var(--headtext);
    font-size: 20px;
    font-weight: 700;
    background-color: transparent;
    border-bottom: 2px solid var(--primarycolor);
    border-top: none;
    border-right: none;
    border-left: none;
    border-radius: 0;
}

.submitform:focus {
    outline: none;
    background: none;
    border-bottom: 2px solid var(--secondarycolor);
    border-top: none;
    border-right: none;
    border-left: none;
    box-shadow: none;
}

.footerlogo p {
    color: var(--primarycolor);
    font-size: 20px;
}

/* footer end */

/* copyright start */
.copyright {
    background-color: #111111;
    color: var(--secondarycolor);
    padding: 2%;
    text-align: center;
}

/* copyright end */


/* back to top start */
.progress-wrap {
    position: fixed;
    right: 50px;
    bottom: 50px;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}

.progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.progress-wrap::after {
    position: absolute;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f062';
    text-align: center;
    line-height: 46px;
    font-size: 18px;
    color: var(--primarycolor);
    left: 0;
    top: 0;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    z-index: 1;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}

.lightScrollIcon::after {
    color: var(--secondarycolo) !important;
}

.progress-wrap:hover::after {
    opacity: 0;
}

.progress-wrap::before {
    position: absolute;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f062';
    text-align: center;
    line-height: 46px;
    font-size: 18px;
    opacity: 0;
    --webkit-background-clip: text;
    -webkit-text-fill-color: var(--secondarycolor);
    left: 0;
    top: 0;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    z-index: 2;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}

.progress-wrap:hover::before {
    opacity: 1;
}

.progress-wrap svg path {
    fill: none;
}

.progress-wrap svg.progress-circle path {
    stroke: var(--primarycolor);
    stroke-width: 4;
    box-sizing: border-box;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}

/* back to top end */



/* ----------------------------
        OUR SERVICES
------------------------------- */

/* banner start */
.servicesimg {
    position: relative;
    border-top: 1px solid var(--primarycolor);
    border-bottom: 1px solid var(--primarycolor);
}

.servicestext {
    position: absolute;
    left: 50%;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* banner end */

/* Jewelry Manufacturing start */

.Manufacturing {
    background-color: var(--backgroundbg);
    position: relative;
    padding: 5%;
}

.jwelrypara {
    display: flex;
    justify-content: center;
    font-size: 20px;
    color: var(--headtext);
    margin-bottom: 6%;
}

.jwelrypara p {
    text-align: center;
    width: 60%;
}

.Manufacturingtext {
    padding-right: 30px;
}

.Manufacturingtext h1 {
    font-size: 38px;
    color: var(--primarycolor);
}

.Manufacturingtext p {
    color: var(--headtext);
    font-size: 18px;
    font-weight: 900;
}

.Manufacturingimg {
    position: absolute;
    top: 38%;
    right: 5%;
}

.servieborder {
    border: 1px solid var(--primarycolor) !important;
    padding: 40px;
    margin: 60px 60px 0 60px;
}

/* Jewelry Manufacturing end */

/* Diamond/ Gemstone Lapidary and Manufacturing start */
.Gemstone {
    background-color: var(--backgroundbg);
    position: relative;
    padding: 5%;
}

.Gemstonetext {
    padding-left: 30px;
}

.Gemstonetext h1 {
    font-size: 38px;
    color: var(--primarycolor);
}

.Gemstonetext p {
    color: var(--headtext);
    font-size: 18px;
    font-weight: 900;
}

.Gemstoneimg {
    position: absolute;
    top: 12%;
    left: 13%;
}

.Gemstoneborder {
    border: 1px solid var(--primarycolor) !important;
    padding: 40px;
    margin: 60px 60px 0 60px;
}

/* Diamond/ Gemstone Lapidary and Manufacturing end */

/* Chain Manufacturing start */
.chain {
    background-image: url(../img/services/pageBG.jpg);
    position: relative;
    padding: 10% 0 8% 0;
}

.chaincontent {
    display: flex;
}

.chainImg {
    flex: 1.4;
    border-bottom: 2px solid var(--primarycolor);
    border-top: 2px solid var(--primarycolor);
    border-right: 2px solid var(--primarycolor);
    border-left: none;
}

.chainManufacturing {
    flex: 1;
    position: relative;
}

.chainManufacturingImg {
    position: absolute;
    left: -10%;
    top: -20%;
    width: 60%;
}

.chainTxt {
    position: absolute;
    bottom: -12%;
    padding-right: 30%;
    left: 6%;
}

.chainTxt h1 {
    font-size: 38px;
    color: var(--primarycolor);
}

.chainTxt p {
    color: var(--headtext);
    font-size: 18px;
    font-weight: 600;
}

/* Chain Manufacturing end */

/* Quality Control Process start */
.qualityControl {
    background-image: url(../img/services/pageBG.jpg);
    padding: 8% 0;
}

.qualityTxt {
    position: relative;
}

.qualityTxt h1 {
    font-size: 40px;
    color: var(--primarycolor);
}

.qualityprocessTxt p {
    color: var(--headtext);
    font-size: 18px;
    font-weight: 600;
}

.qualityprocessIMG {
    position: relative;

}

.processIMG img {
    position: absolute;
    top: -10%;
    left: -10%;
    border: 1px solid var(--primarycolor);
}

.processtext {
    position: absolute;
    bottom: 10%;
}

.qualityIMG img {
    position: absolute;
    bottom: -7%;
    right: -37%;
    border: 1px solid var(--primarycolor);
}

/* Quality Control Process end */

/* slider start */
.slider {
    background-color: #0e0e0e;
    padding: 5%;
}

.slider h1 {
    font-size: 30px;
    color: var(--primarycolor);
}

.slider p {
    font-size: 15px;
    color: var(--secondarycolor);
}

.margintop{
    margin-top: 10%;
}
.slidercontent {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20%;
}

.slidercontent p {
    color: var(--primarycolor);
    font-size: 18px;
    font-weight: 600;
}

.ccarouselontent {
    margin-top: 10%;
}

.hovertext {
    position: relative;
}

.hovertextcontent {
    position: absolute;
    bottom: 0;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out;
    transform: translateY(10px);
}

.hovertext:hover .hovertextcontent {
    opacity: 1;
    background: #000000d1;
    visibility: visible;
    transform: translateY(0);
}

/* slider end */

/* ------------------------
         OUR PORCESS
--------------------------- */
.process {
    margin: 0;
    background-color: #000;
}

.process h2 {
    color: var(--primarycolor);
}

.process p {
    color: var(--headtext);
}

.processheading {
    text-align: center;
    font-size: 20px;
    color: var(--headtext);
    padding: 5%;
}

.process-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    position: relative;
}

.step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 80%;
    margin: 3rem 0;
    position: relative;
}

.step:nth-child(odd) {
    flex-direction: row;
}

.step:nth-child(even) {
    flex-direction: row-reverse;
}

.step-content {
    flex: 1;
    padding: 0 10%;
    text-align: left;
    position: relative;
}

.step-image {
    flex: 1;
    padding: 0 5%;
    position: relative;
}

.step-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.step-number {
    font-size: 12rem;
    font-weight: bold;
    opacity: 0.2;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #7a7676d9;
}

.step:nth-child(odd) .step-number {
    right: -60px;
    /* Position number on the right of the text for odd steps */
}

.step:nth-child(even) .step-number {
    left: -60px;
    /* Position number on the left of the text for even steps */
}

.process-section::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 100%;
    background: repeating-linear-gradient(to bottom,
            #b99571,
            #b99571 8px,
            transparent 8px,
            transparent 16px);
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
}

.step-content::before,
.step-image::after {
    content: '';
    position: absolute;
    height: 2px;
    width: 20%;
    background-color: #b99571;
    top: 50%;
    transform: translateY(-50%);
}

.step-content::before {
    left: -8%;
}

.step:nth-child(even) .step-content::before {
    right: -6%;
    left: auto;
}

.step-image::after {
    right: -20%;
}

.step:nth-child(even) .step-image::after {
    left: -25%;
    right: auto;
}
.ourstep{
    background-color: var(--backgroundbg);
    padding: 5% 0;
}
.ourstep h2{
    color: var(--primarycolor);
}
.step1service{
    text-align: center;
}
.step1service h3:hover{
    color: var(--primarycolor);
}
.step2service h3:hover{
    color: var(--primarycolor);
}
.step3service h3:hover{
    color: var(--primarycolor);
}
.step1service a{
    text-decoration: none;
    color: var(--headtext);
}
.step2service {
    text-align: center;
}
.step2service a{
    text-decoration: none;
    color: var(--headtext);
}
.step3service{
    text-align: center;
}
.step3service a{
    text-decoration: none;
    color: var(--headtext);
}

/* ----------------------
        ABOUT US
------------------------- */

.about {
    background-image: url(../img/about_us/bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 5%;
}

.about P {
    color: var(--headtext);
    font-size: 20px;
}
.Designs{
    background-color: var(--backgroundbg);
    padding: 5% 0;
}
.Designsborder{
    border: 1px solid var(--primarycolor) !important;
    padding: 40px;
    position: relative;
    display: flex;
    justify-content: flex-end;
}

.Designstext h1{
    font-size: 32px;
    color: var(--primarycolor);
}
.Designstext p{
    color: var(--headtext);
    font-size: 18px;
    font-weight: 900;
}
.Designsimg {
    position: absolute;
    top: 10%;
    left: -6%;
}

/* The Journey start */
.Journey{
    background-color: var(--backgroundbg);
    padding: 5% 0;
}
.Journeyborder{
    border: 1px solid var(--primarycolor) !important;
    padding: 40px;
    position: relative;
    display: flex;
    justify-content: flex-start;
}
.Journeytext h1{
    font-size: 32px;
    color: var(--primarycolor);
}
.Journeytext p{
    color: var(--headtext);
    font-size: 18px;
    font-weight: 900;
}
.Journeyimg {
    position: absolute;
    top: 15%;
    right: -6%;
}
/* The Journey end */

/* Expertise */
.Expertise{
    background-color: var(--backgroundbg);
    padding: 5% 0;
}
.Expertiseborder{
    border: 1px solid var(--primarycolor) !important;
    padding: 40px;
    position: relative;
    display: flex;
    justify-content: flex-start;
}
.Expertisetext h1{
    font-size: 32px;
    color: var(--primarycolor);
}
.Expertisetext p{
    color: var(--headtext);
    font-size: 18px;
    font-weight: 900;
}
.Expertiseimg {
    position: absolute;
    top: 10%;
    right: -6%;
}
/* Expertise */

/* Mission */
.Mission{
    background-color: var(--backgroundbg);
    padding: 5% 0;
}
.Missionborder{
    border: 1px solid var(--primarycolor) !important;
    padding: 40px;
    position: relative;
    display: flex;
    justify-content: flex-start;
}
.Missiontext{
    padding:  5% 0  10% 0;
}
.Missiontext h1{
    font-size: 32px;
    color: var(--primarycolor);
}
.Missiontext p{
    color: var(--headtext);
    font-size: 18px;
    font-weight: 900;
}
.Missionimg {
    position: absolute;
    top: 9%;
    right: -6%;
}
/* Mission */

/* Lets Connect start */
.Connect {
    background-color: #060606;
    color: var(--secondarycolor);
    padding: 2%;

}

.Connect h1, p{
    color: var(--primarycolor);
}

/* Lets Connect end */


/* -----------------------
        CONTACT US
-------------------------- */

/* contact heading start */
.contact{
    background-color: var(--backgroundbg);
    padding-top: 5%  ;
    position: relative;
}
.contactbg{
  background-color: var(--backgroundbg);
  padding: 5% 0 ;
}
.contact P{
    color: var(--headtext);
    font-size: 20px;
}
/* contact heading end */
.map{
    background-color: var(--backgroundbg);
    padding: 6%  ;
    position: relative;
}
.contactmap {
    position: absolute;
    top: 21%;
    left: 8%;
}
.contactmap iframe{
   
    width: 600px; 
    height: 450px;
}
.contactborder {
    border: 1px solid var(--primarycolor) !important;
    padding: 40px;
    
}
.form-label{
    color: #b6936f;
    font-size: 18px;
}
.form-control{
    background-color: transparent;
    border: 1px solid #b6936f;
    border-radius: 0;
    color: #fff;
}

.Opening {
    background-color: #0d0d0d;
    padding: 5%;
}

.contacttext {
    padding-left: 30px;
}

.contacttext h1 {
    font-size: 50px;
    color: var(--primarycolor);
}

.contacttext p {
    color: var(--headtext);
    font-size: 18px;
    font-weight: 900;
}

.Opening h1 {
    color: var(--primarycolor);
    text-align: center;
}

.Opening p {
    color: var(--primarycolor) !important;
    text-align: center;
    font-size: 18px;
}

.Hours p{
    color: #bdb0b0 !important;
    text-align: left;
}
.Hours {
    display: flex;
    gap: 10%;
    color: var(--headtext);
    margin-top: 5%;
    justify-content: center;
}

/* --------------------------
        SUBMIT AN ORDER 
----------------------------- */
.submittext {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
}
/*  */
.ordercard {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: start;
    height: 100%;
}

.orderbox {
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    border: 1px solid var(--primarycolor);
    height: 100%;
    border-radius: 10px;
}
.orderbox h3{
    font-size: 25px;
    color: var(--primarycolor);
}
.orderbox p{
   
    color: var(--headtext);
}
.boxorder {
    background-color: var(--primarycolor);
    
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    height: 100%;
    border-radius: 10px;
}
.boxorder p{
    color: var(--backgroundbg) !important; 
}
.boxorder h3{
    font-size: 25px;
}
.submitorder{
    background-color: var(--backgroundbg);
    padding-bottom: 5%;
}
/*  */

/*  */
.sorder{
    background-color: var(--backgroundbg);
    padding: 5% 0;
}
.sorder h1 {
    font-size: 50px;
    color: var(--primarycolor);
    margin-bottom: 2%;
}
.sorder p{
    font-size: 22px;
    color: var(--headtext);
}

/*  */

/*  */
.getstartedBOX{
    background-color: #0d0d0d;
    padding-top: 5%;
    padding-bottom: 2%;
}
.getstartedBOX h1{
    color: var(--primarycolor);
}
.getstartedBOX p{
    color: var(--headtext);
    font-size: 20px;
}
.getstartedForm {
    display: flex;
    gap: 20px;
}
.getstartedFormbtn {
    display: flex;
    gap: 20px;
    justify-content: flex-end;
}
.LOGIN{
    border: 2px solid var(--headtext);
    font-size: 18px;
    font-weight: 900;
    color: var(--primarycolor) !important;
    padding: 10px 40px;
}
.SEND{
    border: 2px solid var(--headtext);
    font-size: 18px;
    font-weight: 900;
   background-color: var(--primarycolor) !important;
    padding: 10px 40px;
}
/*  */

/*  */
.orderprocess{
    background-color: var(--backgroundbg);
    padding: 5%;
}
.orderprocess h1{
    color: var(--primarycolor);
    text-align: center;
    margin-bottom: 5%;
}
.orderprocess h3 {
    font-size: 25px;
    color: var(--primarycolor);
}
.orderprocess p{
    font-size: 15px;
    color: var(--headtext);
}
.orderprocesscard{
    display: flex;
    gap: 20px;
}
.cardborder{
    border-right: 1px solid var(--primarycolor);
    padding: 40px 20px 0 20px;
    width: 100%;
}
.cardbordernone{
    padding: 40px 20px 0 20px;
    width: 100%;
}
/*  */

/*Jewelry Manufacturing  start*/
.jwelery{
    background-color: var(--backgroundbg);
    padding: 5% 0;
}
.Mobjwelery{
    background-color: var(--backgroundbg);
    padding: 5% 0;
    display: none;
}


.icon {
    font-size: 40px;
    color: var(--primarycolor);
    width: 20%;
    text-align: center;
}
/* .jewelryiconbox {
    display: flex;
    border: 1px solid var(--primarycolor);
    padding: 5% 1%;
    border-radius: 20px;
    height: 100%;
} */
.jewelryiconbox h2{
    color: var(--primarycolor);
}
.jewelryiconbox p{
    color:var(--headtext);
}
/*Jewelry Manufacturing end */

/* test */
.jewelryiconbox {
    display: flex;
    border: 1px solid var(--primarycolor);
    padding: 5% 1%;
    border-radius: 20px;
    /* height: 100%; */
}
.box {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.style {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.style1 {
    margin-top: -7%;
}
.style2 {
    margin-top: -22%;
}
.style3 {
    margin-top: -19%;
}


/* loader */

.form-loader {
    display: none;

  }

.Loader-Container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #b9957145;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    border-radius: 16px;
}

  .dot-loader {
    display: flex;
    gap: 8px;
  }

  .dot-loader div {
    width: 12px;
    height: 12px;
    background-color: #000;
    border-radius: 50%;
    animation: bounce 0.6s infinite alternate;
  }

  .dot-loader div:nth-child(2) {
    animation-delay: 0.2s;
  }

  .dot-loader div:nth-child(3) {
    animation-delay: 0.4s;
  }

  @keyframes bounce {
    from { transform: translateY(0); opacity: 0.6; }
    to { transform: translateY(-10px); opacity: 1; }
  }