body {font-family: 'Muli', sans-serif;line-height: 1.6;color: #333;}
/* Hero Section */
.hero-section {background: linear-gradient(135deg, #fafaf9, #fee3d8);padding: 80px 0;}
.hero-title {font-size: 48px;font-weight: bold;color: #000;margin-bottom: 20px;text-align: left;font-family: 'Playfair Display', Arial, sans-serif;}
h2.hero-title{font-size: 26px;font-family: 'Playfair Display', Arial, sans-serif;}
.hero-subtitle {color: #a0885d;font-weight: bold;display: block;}
.hero-description {color: #6b7280;margin-bottom: 30px;line-height: 1.7;font-family: 'Muli', sans-serif;}
.btn{font-family: 'Muli', sans-serif;font-weight:400}
.btn.btn-primary-custom {background-color: #a0885d;border-color: #a0885d;color: white;padding: 12px 32px;border-radius: 8px;margin-right: 15px;transition: all 0.3s;}
.btn.btn-primary-custom:hover {background-color: #a0885d;border-color: #a0885d;}
.btn.btn-outline-custom {border: 2px solid #a0885d;color: #a0885d;background: transparent;padding: 10px 32px;border-radius: 8px;transition: all 0.3s;}
.btn.btn-outline-custom:hover {background-color: #a0885d;color: white;}
.hero-image {position: relative;}

.ring-display {width: 100%;height: auto;background: #fff;border-radius: 16px;box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);display: flex;align-items: center;justify-content: center;position: relative;overflow: hidden;}
.ring-circle {width: 256px;height: 256px;background: linear-gradient(135deg, #fbbf24, #d97706);border-radius: 50%;display: flex;align-items: center;justify-content: center;box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);}
.ring-inner {width: 192px;height: 192px;background: linear-gradient(135deg, #fef3c7, #fbbf24);border-radius: 50%;display: flex;align-items: center;justify-content: center;}
.ring-core {width: 128px;height: 128px;background: linear-gradient(135deg, #fbbf24, #d97706);border-radius: 50%;box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);}
.decorative-circle {position: absolute;border-radius: 50%;opacity: 0.7;}
.decorative-circle.large {width: 80px;height: 80px;background-color: #fbbf24;top: -16px;right: -16px;}
.decorative-circle.small {width: 64px;height: 64px;background-color: #e5e7eb;bottom: -24px;left: -24px;opacity: 0.5;}

.relative{position:relative;}
.bg-sandstone-200{background-color:#f7f1e8;}

/* Rings Section */
.rings-section {padding: 80px 0;background-color: #fff;}
.section-title {font-size: 36px;font-family: 'Playfair Display', Arial, sans-serif;color: #000;text-align: center;margin-bottom: 15px;line-height: 1.2;}
.section-description {font-size: 20px;color: #6b7280;text-align: center;margin-bottom: 30px;max-width: 800px;margin-left: auto;margin-right: auto;}
.ring-card {background: white;border-radius: 12px;box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);overflow: hidden;transition: all 0.3s;margin-bottom: 15px;height: 100%;}
.ring-card:hover {box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);transform: translateY(-2px);}
.ring-card-image {background: linear-gradient(135deg, #fafaf9, #f3f4f6);display: flex;align-items: center;justify-content: center;position: relative;padding: 0;}
.ring-placeholder {width: 128px;height: 128px;border-radius: 50%;display: flex;align-items: center;justify-content: center;box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);transition: transform 0.3s;}
.ring-card:hover .ring-placeholder {transform: scale(1.1);}
.ring-inner-placeholder {width: 96px;height: 96px;background: linear-gradient(135deg, #fef3c7, #fbbf24);border-radius: 50%;display: flex;align-items: center;justify-content: center;}
.ring-core-placeholder {width: 64px;height: 64px;background: linear-gradient(135deg, #fbbf24, #d97706);border-radius: 50%;box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);}
.ring-card-content {padding: 24px;}
.ring-card-title {font-size: 20px;font-weight: bold;color: #000;margin-bottom: 10px;}
.ring-card-description {color: #6b7280;font-size: 14px!important;line-height: 1.4;}
.ring-card-footer {display: flex;justify-content: space-between;align-items: center;}
.ring-price {font-size: 24px;font-weight: bold;color: #d97706;}
.btn.btn-view-details {background-color: #a0885d;color: white;border: none;padding: 8px 16px;border-radius: 6px;font-weight: 500;font-size: 14px;transition: background-color 0.3s;}
.btn.btn-view-details:hover {background-color: #a0885d;color: white;}

/* Color variations for ring cards */
.ring-slate { background: linear-gradient(135deg, #cbd5e1, #64748b); }
.ring-blue { background: linear-gradient(135deg, #bfdbfe, #60a5fa); }
.ring-rose { background: linear-gradient(135deg, #fda4af, #f43f5e); }
.ring-amber { background: linear-gradient(135deg, #fbbf24, #d97706); }
.ring-gray { background: linear-gradient(135deg, #d1d5db, #6b7280); }
.ring-emerald { background: linear-gradient(135deg, #86efac, #10b981); }

/* Testimonials Section */
.testimonials-section {padding: 80px 0;background-color: #fafaf9;}
.testimonial-card {background: white;border-radius: 12px;box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);padding: 24px;margin-bottom: 30px;height: 100%;transition: all 0.3s;}
.testimonial-card:hover {box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);}
.star-rating {color: #fbbf24;margin-bottom: 15px;}
.testimonial-text {color: #4b5563;font-style: italic;line-height: 1.6;margin-bottom: 20px;}
.testimonial-author {border-top: 1px solid #e5e7eb;padding-top: 15px;}
.author-name {font-weight: 600;color: #000;margin-bottom: 5px;}
.author-location {color: #6b7280;font-size: 14px;}
.rating-summary {text-align: center;margin-top: 50px;}
.rating-badge {display: inline-flex;align-items: center;background-color: #fef3c7;color: #92400e;padding: 12px 24px;border-radius: 25px;font-weight: 600;}
.rating-badge .star-rating {margin-right: 10px;margin-bottom: 0;}

/* Responsive Design */
@media (max-width: 768px) {
.hero-title {font-size: 36px;}
.hero-subtitle {font-size: 36px;}
h2 .hero-subtitle {font-size: 24px;}
.hero-description {font-size: 18px;}
.section-title {font-size: 26px;}
.section-description {font-size: 18px;}
.ring-card{height:auto;margin-bottom: 40px;}
.ring-display {margin-top:30px}
.ring-circle {width: 200px;height: 200px;}
.ring-inner {width: 150px;height: 150px;}
.ring-core {width: 100px;height: 100px;}
}

.ab-hero{display: flex;flex-direction: column;min-height: 100svh;height: auto;}
.size-full{position: relative;flex-direction: column;flex-grow: 1;display: flex;color:#f7f1e8;overflow: hidden;width: 100%;height: 100%;min-height: 100%;background-color: #f7f1e8;}
.motionComponent{width: 100%;height: 100%;position: absolute;top:0;left:0;}
.motionComponent img{position: absolute;height: 100%;width: 100%;left: 0;top: 0;right: 0;bottom: 0;color: transparent;object-fit: cover;display: block;max-width: 100%;}

.gridContainerV3 {
--smallGutter: 24px;
--largeGutter: 64px;
--maxContent: 1440px;
--maxCol: calc(var(--maxContent) / 22);
grid-template-columns: [full-start] var(--smallGutter) [main-start] repeat(8, minmax(0, 1fr)) [main-end] var(--smallGutter) [full-end];
display: grid;
}
.grid-row-end-2{grid-row-end: 8;}
.grid-row-end-3{grid-row-end: 9;}
.grid-column-end-main{grid-column-end: main}
/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
	
}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
	.ab-hero{min-height: 190svh;}
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
	.ab-hero{min-height: 160svh;}
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
	.ab-hero{min-height: 120svh;}
}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 
	.ab-hero{min-height: 120svh;}
}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 
	.ab-hero{min-height: 120svh;}
}
/*end*/
@media screen and (min-width: 400px) and (max-width: 567.98px) {
	.ab-hero{min-height: 130svh;}
}
/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 
	.ab-hero{min-height: 100svh;}
}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}

/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}

@media screen and (min-width: 568px) and (max-width: 599.98px) {
	.ab-hero{min-height: 130svh;}
}
@media screen and (min-width: 600px) and (max-width: 699.98px) {
	.ab-hero{min-height: 140svh;}
}
@media screen and (min-width : 700px) and (max-width : 767px) {
	.ab-hero{min-height: 165svh;}
}
@media screen and (min-width: 768px) {
    .gridContainerV3 {
        grid-template-columns: [full-start] var(--smallGutter) [main-start] repeat(22, minmax(0, 1fr)) [main-end] var(--smallGutter) [full-end];
    }
	.hero-content-column{grid-column-start: 4;}
	.grid-row-end-2{grid-row-end: 3;}
	.grid-row-end-3{grid-row-end: 4;}
	.ab-hero{min-height: 125svh;}
}
@media screen and (min-width: 992px) {
	.ab-hero{min-height: 70svh;}
	.grid-column-end-11{grid-column-end: 11;}
}
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px)
  and (-webkit-min-device-pixel-ratio: 2) {
	.ab-hero{min-height: 45svh;}
}
@media screen and (min-width: 1024px) {
    .gridContainerV3 {
        grid-template-columns: [full-start] var(--largeGutter) [main-start] repeat(22, minmax(0, 1fr)) [main-end] var(--largeGutter) [full-end];
    }
	.ab-hero{min-height: 85svh;}
}
@media (min-width: 1024px) {
    .grid-column-end-11{grid-column-end: 11;}
    .grid-column-end-14{grid-column-end: 14;}
}
@media (min-width: 1280px) {
	.grid-column-end-11{grid-column-end: 11;}
	.grid-column-end-12{grid-column-end: 12;}
}

.hero-grid{padding-top:0; padding-bottom:30px;width: 100%;height: 100%;position: relative;flex-grow: 1;}
.hero-title-column{align-self: center;margin-top: auto;grid-row-start: 1;grid-column-start: main;}
.hero-content-column{align-self: flex-start;grid-column-start: main;}
.hero-title-wrapper{padding-bottom: 0vw;padding-top: 2vw;align-items: center;flex-direction: column;display: flex;}
.hero-title-box{max-width: 100%;}
h1.heading_text{white-space: nowrap;text-align: center;line-height: 1.25;font-weight: 300;color:#fff;margin-top: auto;font-size: 2.5rem;}
h1.heading_text em{font-style: italic;color:#ffe5b7;}
.hero-description-wrapper{display: flex;flex-direction: column;height: auto;align-items: center;justify-content: flex-start;gap: 15px;}
.hero-description-wrapper .hero-description{font-size: 15px !important;color:#000;font-family: 'Muli', sans-serif;font-weight:400;line-height: 1.3;margin:0;text-align:center}
@media (min-width: 768px) {
    h1.heading_text {font-size: 3.75rem;text-align: left;}
	h2.hero-title{font-size: 28px;}
	.hero-title-wrapper,.hero-description-wrapper{align-items: flex-start;}
	.hero-description-wrapper .hero-description{text-align:left}
}
@media (min-width: 1024px) {
    h1.heading_text {font-size: 5rem;}
}

.ultrafit-logo{margin-left:-20px;width: 75%;}
.section-icons-image{padding: 0 0 80px 0;max-width: 1500px;margin: 0 auto;}
.section-icons-image .flex-wrapper {display: flex;align-items: center;flex-wrap: wrap;}
.text-wrapper-container h2{font-family: 'Playfair Display',Arial,sans-serif;color:#000;}
.ico-wrapper-each{display: flex; align-items: center;gap: 20px;margin-bottom: 20px;}
.ico-wrapper-each .ico-container {width: 40px;}
.ico-wrapper-each .ico-container img{width: 100%;}
.ico-wrapper-each .ico-text-container{flex:1;}
.text-wrapper-container{width: 100%;padding-left: 20px;padding-right: 20px;margin: 30px auto;}
.text-wrapper-container h2 {font-size: 28px;padding-bottom: 30px;line-height: 1.2;}
.text-wrapper-container h5 {font-size: 17px;margin: 0;line-height: 1.2;margin-bottom: 15px;font-family: 'Muli',Arial,sans-serif;font-weight: 700;letter-spacing: -0.0125em;color: #0c0c0c;}
.text-wrapper-container p {font-size: 13px !important;margin: 0;line-height: 1.3;color:#0c0c0c;margin-bottom: 10px;}
.text-wrapper-container .sub-head{font-family: 'Muli',Arial,sans-serif;text-transform: uppercase;font-size: 13px;padding-bottom: 5px;font-weight: 700;color:#a0885d}
.showroom-section{padding: 0;}
.showroom-section h2{padding-bottom: 10px;}
.showroom-section h3{text-transform: uppercase;font-size: 18px;font-weight: 700;font-family: 'Muli',Arial,sans-serif;margin-bottom: 10px;}
.section-icons-image .image-container {padding: 0 15px;}
@media only screen and (min-width: 1024px) {
	.section-icons-image .image-container {padding: 0 20px;}
    .ico-wrapper-each{display: flex; align-items: center;gap: 25px;margin-bottom: 25px;}
    .text-wrapper-container{width: 100%;padding-left: 40px;padding-right: 40px;margin: 0 auto;}
    .text-wrapper-container h2 {font-size: 35px;}
    .text-wrapper-container h5 {font-size: 20px;}
    .text-wrapper-container p {font-size: 13px !important;line-height:1.4;}
}