.modal button.close{
    width: 32px;
    height: 32px;
    background: #F5F5F5;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    opacity: 1 !important;
    position: absolute;
    top: 20px;
    right: 20px;
    margin: 0;
    padding: 0;
}


.btn--secondary{
    display: inline-block;
    padding: 12px 20px;
    border: 1px solid #111111;
    color: #111111;
    text-decoration: none;
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    background-color: transparent;
}


/* custom radio css start */

.customJewelryModel .selectRadioGroup.customRadio{
    display: flex;
    justify-content: flex-start;
    margin-bottom: 6px;
}
.customJewelryModel .selectRadioGroup.customRadio .container{
    width: auto;
    white-space: nowrap;
    padding-right: 32px;
    margin-left: 0;
    margin-right: 0;
}

.customRadio .container {
    display: block;
    position: relative;
    padding-left: 22px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 12px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-weight: 400;
    line-height: 20px;
}

/* Hide the browser's default radio button */
.customRadio .container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.customRadio .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    border: solid 1px #656565
}

/* On mouse-over, add a grey background color */
/* .customRadio .container:hover input ~ .checkmark {
  background-color: #ccc;
} */

/* When the radio button is checked, add a blue background */
.customRadio .container input:checked ~ .checkmark {
  background-color: #133950;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.customRadio .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.customRadio .container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.customRadio .container .checkmark:after {
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

/* custom radio css end */

.Already_have_one_container .form-row-container{
    display: flex;
    gap: 12px;
}

.custom-Jewelry-details{
    margin-bottom: 20px;
}

.customJewelryModel .modal-header{
   border-bottom: 0;
}

.customJewelryModel .modal-header h2{
    font-size: 28px;
    text-align: center;
    width: 100%;
}
.customJewelryModel .modal-body h3{
    padding: 12px 0;
    margin-bottom: 14px;
    font-size: 20px;
    border-bottom: solid 1px #EEEEEE;
}

.form-row-container{
    display: flex;
}

.customJewelryModel .form-group label{
    font-size: 11px;
    font-weight: 400;
    line-height: 12px;
    color: #333333;
    margin-bottom: 6px;
}

.customJewelryModel .form-group{
    max-width: 215px;
    width: 100%;
    box-sizing: content-box;
    margin-bottom: 20px;
}

.customJewelryModel .form-group .form-control{
    width: 100%;
    border-radius: 0;
    font-size: 13px;
    padding: 8px 10px;
    min-height: 36px;
}

.customJewelryModel .customer-Information .form-group.emailGroup{
    max-width: 250px;
    width: 100%;
}

.customJewelryModel .customer-Information .form-group{
    padding-right: 16px;
}

.customJewelryModel h4{
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 24px;
}


.customJewelryModel .content-two-column{
    display: flex;
    gap: 10px
}
.customJewelryModel .content-two-column .center-Stone-info,
.customJewelryModel .content-two-column .setting-info{
    flex: 1;
    background: #FAFAFA;
    padding: 16px;
}

.customJewelryModel #Looking_buy_from h4{
    margin-bottom: 16px;
}

.customJewelryModel .no_product_message{
    background: #EEEEEE80;
    width: 100%;
    max-width: 409px;
    height: 235px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #888888;
    font-size: 12px;
    line-height: 17px;
    text-align: center;
    margin-bottom: 26px;
}


.customJewelryModel .productdetailContainer{
    width: 100%;
    max-width: 409px;
    min-height: 235px;
    margin-bottom: 26px;
}

.customJewelryModel .productDetailList{
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    padding: 10px;
}

.customJewelryModel .productDetailList li {
    color: #353535;
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    list-style: none;
    width: calc(50% - 9px);
}

.imageWithLink{
    display: flex;
    align-items: center;
    padding: 10px 10px 0 10px;
    gap: 10px;
}

.imageWithLink img{
    max-width: 80px;
    max-height: 80px;
}
.imageWithLink a{
    color: #133950;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
}
.customJewelryModel .setting-info .form-row-container{
    display: flex;
    gap: 12px;
}
.customJewelryModel .setting-info .form-row-container .form-group{
    max-width: 100%;
}

.customJewelryModel textarea.form-control{
    height: 76px;
}
.customJewelryModel .form-group.commentBlock{
    max-width: 100%;
    padding-left: 12px;
}


/* ----------start------------- */

.upload-box{
    width: 126px;
    height: 126px;
}
.upload-box .upload-button{
    background: #fff;
    padding: 6px 5px;
    border: dashed 1px #CCCCCC;
    min-height: 126px;
    line-height: normal;
    outline: none !important;
    line-height: 0;
}
.upload-box .upload-button img{
    margin-bottom: 10px;
}
.upload-box .upload-button p{
    font-size: 12px;
    font-weight: 400;
    color: #888888;
    margin-bottom: 4px;
    line-height: normal;
}
.upload-box .upload-button small{
    font-size: 8px;
    color: #888888;
    letter-spacing: normal;
    margin: 0;
    line-height: normal;
}

.customJewelryModel .form-group select.form-control{
    -webkit-appearance: none;
    appearance: none;
    background:#ffffff url(https://d3kinlcl20pxwz.cloudfront.net/affordablegemsny/img/custom-jewelry/icon-arrow-down.png) no-repeat;
    background-position: calc(100% - 10px) 50%;
}


/* ----------end------------- */

.dateCommentSecton .form-group .form-control.is-invalid{
    background-image: none;
}




@media (min-width:1023px){
    .customJewelryModel .modal-dialog{
        max-width: 998px;
    }
}

@media (max-width:1024px){
    .customJewelryModel .modal-dialog{
        margin: 10px;
        max-width: 100%;
    }
}

@media (max-width:767px){
    .customJewelryModel .content-two-column{
        flex-direction: column;
    }
    .dateCommentSecton .form-row-container,
    .customJewelryModel .form-row-container{
        flex-direction: column;
    }
    .customJewelryModel .form-group.commentBlock{
        padding-left: 0;
    }
    .customJewelryModel .form-group{
        max-width: 100% !important;
        margin-bottom: 10px;
    }
    .customJewelryModel .setting-info .form-row-container,
    .Already_have_one_container .form-row-container{
        gap: 0;
    }
    .customJewelryModel .content-two-column .center-Stone-info, 
    .customJewelryModel .content-two-column .setting-info{
        padding: 10px;
    }
    
    .customJewelryModel .modal-header h2{
        font-size: 20px;
    }
    .customJewelryModel .modal-body h3{
        font-size: 16px;
    }
    .customJewelryModel h4{
        font-size: 14px;
    }
    .customJewelryModel .selectRadioGroup.customRadio{
        flex-direction: column;
    }
}



/* custome jewellery thank you page css start */

.thankyouDetail .container{
    max-width: 1200px;
    padding-top: 54px;
    padding-bottom: 54px;
}
.thankyouDetail .requestSucess{
    text-align: center;
}
.thankyouDetail .requestSucess .sucessIcon{
    margin-bottom: 24px;
}
.thankyouDetail .requestSucess h1{
    font-size: 32px;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 12px;
    color: #333333;
}
.thankyouDetail .requestSucess p{
    color: #333333;
    margin-bottom: 44px;
}

.thankyouDetail h2{
    font-size: 16px;
    color: #333333;
    margin-bottom: 20px;
}

.thankyouDetail h4{
    font-size: 14px;
    color: #333333;
    margin-bottom: 16px
}

.customJewelrySummarySec{
    display: flex;
    gap: 20px;
}
.customJewelrySummarySec .cardDetail{
    width: 50%;
    padding: 20px;
    border: solid 1px #EEEEEE;
}

.customJewelrySummarySec .cardDetail{
    width: 50%;
    padding: 20px;
    border: solid 1px #EEEEEE;
}

.customJewelrySummarySec .cardDetail ul.imageList{
    display: flex;
    gap: 10px;
    list-style: none;
    margin-bottom: 10px;
}
.customJewelrySummarySec .cardDetail ul.imageList li{
    width: 98px;
    list-style: none;
}


.customJewelrySummarySec .cardDetail .productDetailList{
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    padding: 10px;
}
.customJewelrySummarySec .cardDetail .productDetailList li{
    color: #353535;
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    list-style: none;
    width: calc(50% - 9px)
}

.customJewelrySummarySec .cardDetail .productDetailList li:last-of-type{
    width:100%;
}

.thankyouDetail .commentSection{
    padding-top: 20px;
    overflow: hidden;
    margin-bottom: 24px;

}
.thankyouDetail .commentSection h4{
    margin-bottom: 10px;
}
.thankyouDetail .commentSection p{
    font-size: 12px;
    margin-bottom: 20px;
}


.thankyouDetail .fullWidthListCard{
    background: #FBFBFB;
    padding: 20px;
}
.thankyouDetail .fullWidthListCard h4{
    font-size: 20px;
    margin-bottom: 16px
}
.thankyouDetail .fullWidthListCard ul{
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: inside;
    margin-bottom: 0;
}

.thankyouDetail .btn--secondary{
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    background: #fff !important;
    box-shadow: none;
    color: #111111;
    padding: 12px 38px 12px 16px;
    border-radius: 0;
    height: initial;
    border: 1px solid #111111;
    box-shadow: none !important;
}

.thankyouDetail .buttonGroup{
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
}

@media (max-width:989px){
    .customJewelrySummarySec{
        flex-direction: column;
    }
    .customJewelrySummarySec .cardDetail{
        width: 100%;
    }
}

@media (max-width:767px){
    .thankyouDetail .requestSucess h1{
        font-size: 24px;
    }
   .customJewelrySummarySec .cardDetail .productDetailList li{
        width:100%;
   }
   .customJewelrySummarySec .cardDetail .productDetailList{
    margin-bottom: 0;
    padding: 0;
   }

   .thankyouDetail .fullWidthListCard ul{
    padding-left: 18px;
    list-style: disc;
   }
   .thankyouDetail .buttonGroup{
    gap: 10px;
   }
   .thankyouDetail .btn--secondary,
   .thankyouDetail .btn--primary{
        padding: 8px 10px;
        font-size: 13px;
   }
   .thankyouDetail .requestSucess p{
    margin-bottom: 30px;
   }
   .thankyouDetail .commentSection p{
    margin-bottom: 0;
   }
}

/* custome jewellery thank you page css end */


/* custom jewellery landing page css start */

.hero-video {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000;
}

.hero-video video {
    max-height: 512px;
    width: 100%;
    object-fit: cover;
    display: block;
}

/* Dark overlay */
/* .hero-video::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1;
} */

.hero-content {
    bottom: 0;
    position: absolute;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
    color: #fff;
    padding: 42px 20px;
    left: 0;
    right: 0;
}

.hero-content h1 {
    font-size: 40px;
    font-weight: 400;
    margin-bottom: 12px;
}

.hero-content p {
    font-size: 14px;
    max-width: 407px;
    margin: 0 auto 20px;
    line-height: 20px;
    font-weight: 400;
}

.hero-video .hero-content p{
    text-transform: capitalize;
}

.hero-content .hero_btn {
    display: inline-block;
    padding: 12px 20px;
    border: 1px solid #fff;
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    background-color: transparent;
}

.hero-content .hero_btn:hover {
    background: #175981;
    color: #ffffff;
}


.customeGallery{
    padding: 54px 0;    
}
h2.subtitle{
    text-align: center;
    font-size: 28px;
    line-height: 24px;
    margin-bottom: 22px;
}

@media (min-width: 768px) and (max-width: 989px) {

    .customeGallery{
        padding: 44px 0;
    }
    .customeJewelryProcess{
        padding-top: 0 !important;
    }
    h2.subtitle{
        font-size: 24px;
    }

    .hero-content h1{
        font-size: 30px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .hero-video {
        height: 60vh;
    }

    .hero-content{
        padding: 24px;
    }

    .hero-content h1 {
        font-size: 24px;
    }
}



/* custom jewellery landing page css end */


/* custome jewelry process css start */
.customeJewelryProcess{
    padding: 54px 0;
}
.customeJewelryProcess ul{
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin-bottom: 24px;
}
.customeJewelryProcess ul li{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
    padding:12px 0;
}

.customeJewelryProcess ul li.content{
    padding-left: 12px;
    padding-right: 10px;
}

.customeJewelryProcess ul li.content > div{
    position: relative;
}

.customeJewelryProcess ul li.content > div .countNunber{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform:translate(-50%, -4px);
    z-index: -1;
}

.customeJewelryProcess ul li h3{
    max-width: 583px;
    font-size: 24px;
    font-weight: 400;
    line-height: 150%;
    margin-bottom: 6px;
    text-align: center;
}
.customeJewelryProcess ul li p{
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    max-width: 583px;
    text-align: center;
    margin-bottom: 0;
    text-transform: capitalize;
}

.customeJewelryProcess .btnWrap{
    text-align: center;
}

.customeJewelryProcess .cusJel_btn {
    display: inline-block;
    padding: 12px 20px;
    border: 1px solid #111111;
    color: #111111;
    text-decoration: none;
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    background-color: transparent;
}

/* custome jewelry process css end */

/* about section css start */

.aboutSection{
    background: #FFF7F4;
    padding: 54px 0
}
.aboutSection .container{
    display: flex;
    gap: 40px;
    align-items: center
}
.aboutSection .container .image-wrapper{
    width: 41%;
}
.aboutSection .container .content{
    width: 59%;
}
.aboutSection .container .content h3{
    font-size: 24px;
    font-weight: 400;
    line-height: 150%;
    color: #333333;
    margin-bottom: 14px;
}
.aboutSection .container .content h4{
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: #333333;
    margin-bottom: 6px;
}
.aboutSection .container .content p{
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #333333;
    margin-bottom: 20px;
}

.single-column-faq .accordion{
    max-width: 864px;
}


.single-column-faq .two-column .content{
    width: 100%;
    min-height: auto;
}

.single-column-faq .accordion .card .card-body{
    max-width: calc(100% - 50px);
}
.single-column-faq .two-column .content h2{
    margin-bottom: 30px;
}


@media (max-width: 989px) {
    .aboutSection .container {
        flex-direction: column;
    }
     .hero-video{    
        height: auto;
        background:#133950 ;
    }
    .hero-video .hero-content{    
        position: initial;
    }

    .aboutSection .container{
        gap: 20px;
    }

    .aboutSection .container .image-wrapper{
        width: 100%;
    }
    .aboutSection .container .image-wrapper img{
        width: 100%;
    }
    .aboutSection .container .content{
        width: 100%;
    }

    .aboutSection{
        padding: 30px 0;
    }
  
    .single-column-faq .two-column .content h2{
        margin-bottom: 0;
    }
    .tow-column-faq-with-contact .two-column .content{
        padding-top: 30px;
    }
    .aboutSection .container .content p:last-of-type{
        margin-bottom: 0;
    }
   
}


@media (min-width: 768px) and (max-width: 989px) {
    .customeJewelryProcess ul li h3{
        font-size: 20px;
    }
    .customeJewelryProcess ul li p{
        font-size: 12px;
        line-height: 16px;
    }

    .tow-column-faq-with-contact .accordion .card .card-header .btn-link::after{
        top: 11px;
    }
}

@media (max-width:767px){
    .customeGallery{
        padding-top: 30px;
        padding-bottom: 30px;
    }
    h2.subtitle{
        font-size: 20px;
    }

    .customeJewelryProcess{
        padding-top: 0;
    }
    .customeJewelryProcess ul li h3{
        font-size: 18px;
        line-height: 100%;
    }
    .customeJewelryProcess ul li{
        width: 100%;
    }
    .customeJewelryProcess ul li.content{
        padding-top: 5px;
        margin-bottom: 5px;
    }

     .customeJewelryProcess ul li:nth-child(1){
        order: 1;
     }
     .customeJewelryProcess ul li:nth-child(2){
        order: 0;
     }
     .customeJewelryProcess ul li:nth-child(3){
        order: 2;
     }
     .customeJewelryProcess ul li:nth-child(4){
        order: 3;
     }
     .customeJewelryProcess ul li:nth-child(5){
        order: 5;
     }
     .customeJewelryProcess ul li:nth-child(6){
        order: 4;
     }
     .customeJewelryProcess ul li:nth-child(7){
        order: 6;
     }
     .customeJewelryProcess ul li:nth-child(8){
        order: 7;
     }

     .customeJewelryProcess{
        padding-bottom: 30px;
     }
}

/* about section css end */


/* login Model css start */
.loginModel .modal-dialog{
    max-width: 583px;
}
.loginModel .modal-body{
    padding: 30px;
}
.loginModel .modal-body h2{
    font-size: 24px;
    line-height: 150%;
    font-weight: 400;
    text-align: center;
    max-width: 400px;
    margin: 0 auto;
    margin-bottom: 16px;
}

.loginModel .modal-body .buttonGroup{
    display: flex;
    justify-content: center;
    gap: 16px;
}
.loginModel .modal-body .buttonGroup .btn--secondary,
.loginModel .modal-body .buttonGroup .btn--primary{
    min-width: 149px;
}


/* login Model css end */


/* need help secton css start */

.needHelpSection{
    background-color: #E1EDF3;
    padding: 20px 15px;
}
.needHelpSection .container{
    display: flex;
    justify-content: center;
    align-items: center;
}
.needHelpSection .helpText{
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    margin-right: 52px;
}
.needHelpSection .footer_elements{
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    gap: 20px;
}
.needHelpSection .footer_elements li a{
    color: #333333;
    background: #fff;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    padding: 10px;
    border-radius: 40px;
    display: flex;
    align-items: center
}
.needHelpSection .footer_elements li a i{
    color: #292D32;
    font-size: 25px;
    margin-right: 4px;
}

.needHelpSection li.mail{
    display: block;
}

@media (max-width:767px){
    .needHelpSection{
        padding: 15px;
    }
    .needHelpSection .container{
        flex-direction: column;
    }
    .needHelpSection .container .helpText{
        margin-right: 0;
        margin-bottom: 10px;
    }
    .needHelpSection .container .footer_elements{
         flex-direction: column;
         gap: 10px;
    }
    .needHelpSection .footer_elements li a{
        font-size: 13px;
        padding: 5px 10px;
    }
}

/* need help secton css end */

body .customeGallery .swiper-button-next, body .customeGallery .swiper-button-prev{
    transform:initial !important;
    width: 40px !important;
    height: 40px !important;
}