/* Inter is self-hosted (SIL OFL). It was previously two render-blocking
   requests to fonts.googleapis.com + fonts.gstatic.com on the critical
   path; only the upright latin subsets are used by this site. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('inter-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('inter-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*{
	margin: 0px;
	padding: 0px;
}

@font-face {
    font-family: 'proxima_novabold';
    src: url('proximanova-bold-webfont.woff2') format('woff2'),
         url('proximanova-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'proxima_novaregular';
    src: url('proximanova-regular-webfont.woff2') format('woff2'),
         url('proximanova-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body{
  font-family: "Inter", serif !important;
  font-optical-sizing: auto;
  font-weight:500 !important;
  font-style:normal;
  background-color: #0F0B09 !important;
  color: #D2CBC9 !important;
  font-size: 14px !important;
 /* line-height: 160% !important;*/
}

h1.primary {
    font-family: 'proxima_novabold', Helvetica, Arial, sans-serif;
    font-size: 96px;
    line-height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    backface-visibility: hidden;
}

h2.secondary {
    font-family: 'proxima_novabold', Helvetica, Arial, sans-serif;
    font-size: 48px;
    line-height: 100%;
    color: #FFFBFB;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    backface-visibility: hidden;
}

h2.inner {
    font-family: 'proxima_novabold', Helvetica, Arial, sans-serif;
    font-size: 32px !important;
    line-height: 100%;
    color: #FFFBFB;
    font-weight: 400 !important;
}

h3.last {
    font-family: 'proxima_novabold', Helvetica, Arial, sans-serif;
    font-size: 20px; /*
	font-weight: 400 !important;*/
    line-height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    backface-visibility: hidden;
}

.vh100{
  height: 100vh;
  align-items: center; 
  position: relative; 
}
.mt-20{
	margin-top: 20px!important;
}

.mr-45{
	margin-right: 45px;
}

.mt-45{
	margin-top: 45px;
}
.mt-40{
	margin-top: 40px;
}

.mb-52{
	margin-bottom: 52px;
}

.mb-40 {
    margin-bottom: 40px;
}

.mb-80{
	margin-bottom: 80px;
}

.container {
    max-width: 1264px !important;
}

.section_height{
	height: 775px;
}

/*------Header---------------*/

.logo {
    /*margin-right: 42px;
    margin-top:10px;*/
}

.link{
	 font-family: 'proxima_novaregular', sans-serif;
    font-size: 16px;
    line-height: 1.5; 
	color: #D2CBC9;
	text-decoration: none;
}
.link:hover{
	 font-family: 'proxima_novaregular', sans-serif;
    line-height: 1.5; 
	color: #FFFBFB;
	text-decoration: underline;
}

.innerlink {
    color: #D2CBC9;
    text-decoration: none;
}

 .innerlink:hover {
        color: #FFFBFB;
        text-decoration: underline;
 }

.backlink{
	 font-family: 'proxima_novaregular', sans-serif;
    font-size: 20px;
	color: #D2CBC9;
	text-decoration: none;
}
.backlink:hover{
	 font-family: 'proxima_novaregular', sans-serif;
    font-size: 20px;
	color: #D2CBC9;
	text-decoration: none;
}

.btn-gray {
    font-family: 'proxima_novabold', sans-serif;
    font-size: 16px;
    font-weight: bold !important;
    background-color: rgba(91, 87, 86, 0.6);
    color: #FFFBFB;
    border: 1px solid #9A9A9A !important;
    border-radius: 8px;
    padding: 11px 39px;
    /* backdrop-filter: blur(75px);  */
    transition: all 300ms ease-out; /* Hover effect duration */
    line-height: normal !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    backface-visibility: hidden;
}

.btn-gray:hover {
    background-color: rgba(91, 87, 86, 1); 
    color: #FFFBFB;  
    border-color: #9A9A9A;  
}

.btn-grayred {
    font-family: 'proxima_novabold', sans-serif;
    font-size: 20px;
    font-weight: bold !important;
    background-color: rgba(91, 87, 86, 0.6);
    color: #FFFBFB;
    border: 1px solid #9A9A9A !important;
    border-radius: 8px;
    padding: 14px 39px;
    /* backdrop-filter: blur(75px);  */
    transition: all 300ms ease-out; /* Hover effect duration */
    line-height: normal !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    backface-visibility: hidden;
}

    .btn-grayred:hover {
        background-color: #89191D;
        color: #FFFBFB;
        border-color: #89191D;
    }

.btn-request {
    font-family: 'proxima_novabold', sans-serif;
    font-size: 20px !important;
    /*font-weight: bold !important;*/
    background-color: rgba(91, 87, 86, 0.6);
    color: #FFFBFB;
    border: 1px solid #9A9A9A !important;
    border-radius: 12px !important;
    padding: 18px 42px !important;
    /* backdrop-filter: blur(75px);  */
    transition: all 300ms ease-out; /* Hover effect duration */
    line-height: normal !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    backface-visibility: hidden;
}

.btn-request:hover {
    background-color: rgba(91, 87, 86, 1); 
    color: #FFFBFB;  
    border-color: #9A9A9A;  
}

@font-face {
    font-family: 'proxima_novabold';
    src: url('proximanova-bold-webfont.woff2') format('woff2'), url('proximanova-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.btn-red {
    padding: 11px 24px;
    font-family: 'proxima_novabold', sans-serif;
    font-weight: normal;
    font-size: 20px;
    line-height: 1.5;
    color: #FFFBFB; /* Text color */
    background-color: #C52026; /* Fill color */
    border: 1px solid #B76C5B; /* Border (stroke) color */
    border-radius: 12px; /* Add rounding to corners */
    text-align: center;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    backface-visibility: hidden;
    transition: all 300ms ease-out;
    margin: 10px;
    width:190px;
}


.btn-red:hover {
  background-color: #89191D; /* Hover fill color */
}

.btn-outline-white {
    padding: 11px 10px;
    font-family: 'proxima_novabold', sans-serif;
    font-weight: bold;
    font-size: 20px;
    color: #FFFBFB; /* Text color */
    background-color: transparent;
    border: 1px solid #fffbfb; /* Border (stroke) color, 1px, inside */
    border-radius: 12px; /* Optional: Add some rounding to corners */
    text-align: center;
    text-decoration: none;
    transition: all 300ms ease-out; /* Hover effect duration */
    margin: 10px 10px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    backface-visibility: hidden;
    width:190px;
}

.btn-outline-white:hover {
  background-color: rgba(183, 108, 91, 0.3);
}

/* Opt a button out of the fixed 190px width when its label is longer than that
   ("Start Reporting Now"). Keeps 190px as the floor so short labels beside it
   still line up. Deliberately gated to >=768px: below that the .btn-red /
   .btn-outline-white media rules set width:100%, and an unscoped !important here
   would beat them and shrink the mobile buttons. */
@media (min-width: 768px) {
  .btn-auto {
    width: auto !important;
    min-width: 190px;
  }
}

/*-------Hero Banner----------*/

.herobanner {
  height: 100vh;
  background-image: url('images/header_bg.webp');
  background-size: cover;
  background-position: bottom; 
  align-items: center; 
  text-align: center;
  position: relative; 
}

.herobanner h1 {
	color: white; 
	padding-top: 103px;
	line-height: 100%;
}

.herobanner p {
  font-family: "Inter", serif !important;
  font-optical-sizing: auto;
  font-weight:500 !important;
  font-style:normal;
  color: #D2CBC9 !important;
  font-size: 20px;
  line-height: 160%;
}

.herobanner a{
	 font-family: 'proxima_novaregular', sans-serif;
    font-size: 20px;
	color: #D2CBC9;
	text-decoration: none;
}
.herobanner a:hover{
	 font-family: 'proxima_novaregular', sans-serif;
	color: #FFFBFB;
	text-decoration: underline;
}

/*--seamlessy---*/
.boxcontainer{
  font-family: "Inter", serif !important;
  font-optical-sizing: auto;
  font-weight:400 !important;
  font-style:normal;
  background-color: rgba(26, 20, 18, 0.9);
  color: #D2CBC9 !important;
  font-size: 16px !important;
  padding: 16px;
  border: solid 2px rgba(91, 87, 86, 0.6);
  border-radius: 16px;
  margin-bottom: 20px;
}

.align-items-stretch > [class*="col-"] {
  display: flex;
}

.align-items-stretch > [class*="col-"] > .boxcontainer {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.align-items-stretch > [class*="col-"] > .boxcontainer img {
  max-width: 60px;
  height: auto;
  flex-shrink: 0;
}

.boxcontainer h3{
	color: #f6f1f1;
}

.seamlessy{
	 background-image: url('images/seamlessy_bg.webp');
  background-size: cover;
  background-position: center; 
}

/*--made for musician--*/
.madefor{
  background-image: url('images/madeformusicians_bg.webp');
  background-size: cover;
  background-position: center; 
}

/*--made for musician--*/
.moreways{
  background-image: url('images/moreways_bg.webp');
  background-size: cover;
  background-position: center; 
}

/*--testimonial-----*/

.testimonail_bg{
  background-image: url('images/testimonial_bg.webp');
  background-size: cover;
  background-position: center; 
}

.container_testimonial{
	width: 1050px;
	margin: 0px auto;
}

.melissa {
    background-image: url('images/Melissa_Testimonal_Cardbg.webp');
    background-size: cover;
    background-position: top;
}

.glass{
  background-image: url('images/Glass_Mansions_Testimonal_Card_bg.webp');
  background-size: cover;
  background-position: top; 
}

.breathing{
  background-image: url('images/The_Breathing_Process_Testimonal_Card_bg.webp');
  background-size: cover;
  background-position: top; 
}

/*-------Pricing----------*/

.pricing_bg{
  background-image: url('images/testimonial_bg.webp');
  background-size: cover;
  background-position: center; 
}

.pricing_container{
  width: 1050px;
  margin: 0px auto;
}


.pricebox {
  background-color: rgba(42, 38, 36, 1);
  border: 2px solid #5B5756;
  border-radius: 16px;
  padding: 32px 24px;
}

    .pricebox h3 {
        font-family: 'proxima_novabold', Helvetica, Arial, sans-serif;
        font-size: 30px !important;
        color: #fffbfb;
        line-height: 100%;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        backface-visibility: hidden;
    }

.pricebox h3 span{
    font-family: 'proxima_novaregular', sans-serif;
	font-size: 25px !important;
	color: #fffbfb !important;
	line-height: 100%;
	font-weight: 300;
}

.pricebox p {
  font-family: 'Inter', sans-serif;
  font-size: 30px;
  font-weight: 400;
  color: #D2CBC9;
}

.pricebox ul {
	margin: 20px 0px;
	padding: 0px;
}

.pricebox ul li {
 display: flex;
  align-items: center; /* Vertically centers the icon with text */
  font-family: 'Inter', sans-serif;
  font-size: 20px;
	font-weight: 300;
  color: #D2CBC9;
	padding: 2px 0px;
}

.pricebox ul li:before {
 content: '';
  display: inline-block;
  width: 42px; /* Adjust width according to the icon size */
  height: 42px; /* Adjust height according to the icon size */
  background-image: url("images/check_icon.svg");
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 8px; /* Space between icon and text */
}

/* Luminate add-on pricing card */
.pricebox--luminate {
  border-color: #C52026;
}

/* Both pricing cards carry a badge ("Core Platform" / "Luminate Reporting") so the
   two price headlines sit on the same baseline. Without one on the first card its
   $14.99 rode ~50px higher than the $10.99 beside it. */
.pricebox p.pricebox-badge,
.pricebox-badge {
  display: inline-block;
  font-family: 'proxima_novabold', Helvetica, Arial, sans-serif;
  font-size: 14px !important;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fffbfb;
  background-color: #C52026;
  border-radius: 40px;
  padding: 4px 14px;
  margin-bottom: 12px;
}


/*-------Footer----------*/

#footer {
	background-color: #231D1C;
	padding: 100px 0px;
}

#footer ul
{
	margin: 0px;
	padding: 0px;
}

#footer ul li
{
	list-style: none;
	font-weight:400 !important;
	padding: 0px 0px 16px 0px;;
	margin: 0px;
}

#footer ul li span
{
	font-weight:300 !important;
	font-size: 13px !important;
}

.copyrights
{
	font-weight:300 !important;
	font-size: 13px !important;
}

#footer ul li a {
	color: #D2CBC9;
	text-decoration: none;
}

#footer ul li a:hover {
	color: #FFFBFB;
	text-decoration: underline;
}


#footer a {
	color: #D2CBC9;
	text-decoration: none;
}

#footer a:hover {
	color: #FFFBFB;
	text-decoration: underline;
}

#footer ul li strong
{
	color: #FFFBFB;
}

.subscription-container {
  display: flex;                
  align-items: center;          
  gap: 10px;                    
}

input {
  width: 100%;                 
  height: 58px;                 
  border-radius: 12px;          
  background-color: #231A18;    
  border: 1px solid #493733;    
  padding: 10px;                
  color: #fff;                  
  font-size: 16px;              
}

textarea {
    width: 100%;
    border-radius: 12px;
    background-color: #231A18;
    border: 1px solid #493733;
    padding: 10px;
    color: #fff;
    font-size: 16px;
}

button.subscribe-btn {
  padding: 15px 30px;          
  background-color: rgba(91, 87, 86, 0.6);    
  color: #fff;                
  border: solid 1px #9A9A9A;                 
  border-radius: 12px;          
  font-size: 20px;
  font-weight:bold;
  cursor: pointer;          
  transition: background-color 0.3s ease; 
}

button.subscribe-btn:hover {
  background-color: #5B5756;    
  border: solid 1px #9A9A9A; 
}

/*-----Inner page----*/
.body2{
  font-family: "Inter", serif !important;
  font-optical-sizing: auto;
  font-weight:300 !important;
  font-style:normal;
 /* background-color: #0F0B09 !important;*/
  color: #D2CBC9 !important;
  font-size: 16px !important;
 /* line-height: 160% !important;*/
}

.body1{
  font-family: "Inter", serif !important;
  font-optical-sizing: auto;
  font-weight:300 !important;
  font-style:normal;
 /* background-color: #0F0B09 !important;*/
  color: #D2CBC9 !important;
  font-size: 20px;
 /* line-height: 160% !important;*/
}

.body1 a{
     color: #D2CBC9;
     text-decoration:none;
}

.body1 a:hover{
     color: #FFFBFB;
     text-decoration:underline;
}

.redcolor{
	color: #C52026;
	text-decoration: none;
}

.redcolor:hover{
	color: #C52026;
	text-decoration: none;
}

.font-weight-bolder{
	font-weight: 600;
}

.text-field-container {
  position: relative;
	margin-bottom: 30px;
}

.formcontainer{
	width: 480px;
	margin: 32px auto;
}

.formcontainer2{
	width: 640px;
	margin: 32px auto;
}

.text-fieldreadonly {
    padding: 9px 15px;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    color: #837B79; /* Default text color */
    background-color: #231A18;
    border: 1px solid #493733; /* Default stroke */
    border-radius: 12px;
    outline: none;
    box-shadow: 0 0 0 transparent; /* No shadow by default */
    transition: all 0.3s ease;
}

.text-field {
  padding: 9px 15px;
  font-size: 16px;
  font-family: 'Inter', sans-serif;
  color: #837B79; /* Default text color */
  background-color: #231A18; 
  border: 1px solid #493733; /* Default stroke */
  border-radius: 12px;
  outline: none;
  box-shadow: 0 0 0 transparent; /* No shadow by default */
  transition: all 0.3s ease;
}

/* Default text fill */
.text-field::placeholder {
  color: #837B79;
}

/* Hover state */
.text-field:hover {
  border-color: #8B6962; /* Hover stroke color */
  color: #D2CBC9; /* Hover text color */
}

.text-field:hover::placeholder {
  color: #D2CBC9; /* Hover placeholder text color */
}

/* On click (focus) state */
.text-field:focus {
	background: #231A18;
  border-color: #FFFBFB; /* On click stroke color */
  color: #D2CBC; /* On click text color */
  box-shadow: 0 0 15px rgba(205, 205, 205, 0.3); /* On click shadow */
}

.text-field:focus::placeholder {
  color: #D2CBC9;
}

/* Text entry (while typing) */
.text-field:not(:placeholder-shown) {
  color: #FFFBFB; /* Text color while typing */
  border-color: #FFFBFB; /* Text entry stroke */
  box-shadow: 0 0 15px rgba(205, 205, 205, 0.3); /* Text entry shadow */
}

/* Error state */
.text-field.error {
  border-color: #ED8E79; /* Error stroke color */
  color: #FFFBFB; /* Error text color */
  box-shadow: 0 0 15px rgba(205, 95, 99, 0.3); /* Error shadow */
}

.text-field.error::placeholder {
  color: #FFFBFB; /* Error placeholder text color */
}

/* Default State */
.textarea-default {
    padding: 9px 15px;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    color: #837B79; /* Default text color */
    background-color: #231A18; /* Default background color */
    border: 1px solid #493733; /* Default border color */
    border-radius: 12px;
    outline: none;
    box-shadow: none; /* No shadow by default */
    transition: all 0.3s ease;
}

/* Hover State */
.textarea-hover:hover {
    background-color: #231A18; /* Hover background (same as default fill) */
    border-color: #8B6962; /* Hover border color */
    color: #D2CBC9; /* Hover text color */
}

    .textarea-hover:hover::placeholder {
        color: #D2CBC9; /* Hover placeholder text color */
    }

/* On Click (Focus) State */
.textarea-focus:focus {
    background-color: #231A18; /* Focus background (same as default fill) */
    border-color: #FFFBFB; /* Focus border color */
    color: #D2CBC9; /* Focus text color */
    box-shadow: 0 0 15px rgba(205, 205, 205, 0.3); /* Focus shadow */
}

/* Text Entry State (while typing) */
.textarea-typing:not(:placeholder-shown) {
    background-color: #231A18; /* Same fill as default */
    border-color: #FFFBFB; /* Border color when typing */
    color: #FFFBFB; /* Text color while typing */
    box-shadow: 0 0 15px rgba(205, 205, 205, 0.3); /* Text entry shadow */
}

    .textarea-typing:not(:placeholder-shown)::placeholder {
        color: transparent; /* Hide placeholder when typing */
    }

/* Add a shared class for text entry (optional for your use case) */
.textarea-entry {
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    color: #FFFBFB; /* Text color while typing */
}

/* Error State (optional, not part of your description, but could be useful) */
.textarea-error {
    border-color: #ED8E79; /* Error border color */
    color: #FFFBFB; /* Error text color */
    box-shadow: 0 0 15px rgba(205, 95, 99, 0.3); /* Error shadow */
}

    .textarea-error::placeholder {
        color: #FFFBFB; /* Error placeholder text color */
    }
.errormessage_color {
    color: #ED8E79;
}
.error-message {
  position: absolute;
  top: 10px;
  right: 0;
  color: #ED8E79; 
  margin-right: 0.5rem;
  transform: translateY(-50%);
  font-weight: 300;
}

.promocode-message {
  position: absolute;
  top: 10px;
  right: 0;
  color: #D2CBC9; 
  margin-right: 0.5rem;
  transform: translateY(-50%);
  font-weight: 300;
}

.innerfooter{
	 font-family: 'proxima_novaregular', sans-serif;
    font-size: 13px;
    line-height: 1.5; 
	color: #D2CBC9;
	font-weight: 300;
}
.innerfooter a{
	font-family: 'proxima_novaregular', sans-serif !important;
	font-weight: 500;
	text-decoration: none;
	color: #FFFBFB;
}
.innerfooter a:hover{
	font-weight: 500;
	text-decoration: none;
	color: #FFFBFB;
}

/* Default button styles */
.submit {
  width: 100%;
  background-color: #C52026; /* Fill color */
  border: 1px solid #B76C5B; /* Stroke color (1px, inside) */
  color: #FFFBFB; /* Text fill color */
  font-family: 'Proxima Nova', sans-serif; /* Font family */
  font-size: 20px; /* Font size */
  font-weight: bold; /* Font weight */
  padding: 16px 20px; /* Adjust padding for button size */
  text-align: center; /* Center text */
  border-radius: 12px; /* Optional: rounded corners */
  cursor: pointer; /* Pointer cursor on hover */
  transition: all 0.3s ease; /* Smooth transition for hover effect */
}

/* Hover button styles */
.submit:hover {
  background-color: #89191D; /* Fill color on hover */
  border-color: #B76C5B; /* Keep border color same on hover */
}

/*---------------select----------------*/
/* Ensure the select box uses your custom background and border */
select {
    background-color: #231A18 !important; /* Prevents default white background */
    border: 1px solid #493733 !important; /* Explicitly set the border color */
    color: #837B79 !important; /* Default text color */
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    padding: 9px 15px;
    border-radius: 12px;
    height:58px;
    appearance: none; /* Removes default dropdown arrow */
    -webkit-appearance: none; /* Ensures it works on Safari */
    -moz-appearance: none; /* Ensures it works on Firefox */
}

    /* Remove any default outline when the field is focused */
    select:focus {
        outline: none;
        border: 1px solid #FFFFFF !important; /* Focus border color turns white */
        color: #FFFFFF !important; /* Focus text color turns white */
        box-shadow: 0 0 15px rgba(205, 205, 205, 0.3); /* Optional shadow on focus */
    }

    /* Hover State */
    select:hover {
        background-color: #231A18;
        border: 1px solid #8B6962 !important; /* Hover border color */
        color: #D2CBC9; /* Hover text color */
    }

    /* On Click (Focus) State */
    select:focus {
        background-color: #231A18;
        border: 1px solid #FFFFFF !important; /* Focus border color turns white */
        color: #FFFFFF !important; /* Focus text color turns white */
        box-shadow: 0 0 15px rgba(205, 205, 205, 0.3); /* Optional shadow on focus */
    }

    /* Text Entry / Option State */
    select:focus {
        background-color: #231A18 !important;
        border: 1px solid #FFFFFF !important; /* Focus border color turns white */
        color: #FFFFFF !important; /* Focus text color turns white */
        box-shadow: 0 0 15px rgba(205, 205, 205, 0.3); /* Optional shadow on focus */
    }

    /* Style the dropdown options to match your theme */
    select option {
        background-color: #231A18;
        color: #837B79; /* Default text color for options */
        border-bottom: 1px solid #493733;
        padding:20px 0px;
        height:40px;
    }

        /* Style the options when hovered */
        select option:hover {
            background-color: #231A18;
            color: #D2CBC9; /* Hover text color for options */
        }

/*--------------container----*/
.left-div 
	{
    flex: 1;
}
.right-div {
            width: 300px; /* Adjust width of the fixed div */
			margin-left: 40px;
}
.d-show{
            display:block;
}
.d-hide{
            display:none;
}
.d-m-show {
        display: none;
}

.d-m-hide {
        display: block;
 }

    .custom-container {
        width: 60%;
        margin: auto;
    }
.textalign {
    text-align:left
}

.equal-height {
    display: flex;
    flex-wrap: wrap;
}

    .equal-height .col-xl-6,
    .equal-height .col-lg-6 {
        display: flex;
        flex-direction: column;
    }

    .equal-height .boxcontainer {
        display: flex;
        flex-direction: column;
        height: 100%;
        align-items: flex-start; /* Aligns content to the left */
    }

        .equal-height .boxcontainer img {
            max-height: 200px; /* Optional: Limit the max height of the image */
            object-fit: contain; /* Ensures the image keeps its aspect ratio */
            align-self: flex-start; /* Aligns image to the left */
        }

        .equal-height .boxcontainer h3,
        .equal-height .boxcontainer ul {
            flex-grow: 1; /* Ensures content takes the remaining space */
        }

        .equal-height .boxcontainer ul {
            margin-top: auto; /* Pushes the list down when needed */
        }

.mt-80 {
    margin-top: 80px;
}

/* Target tablets (portrait and landscape) */
@media (min-width: 768px) and (max-width: 1024px) {
    .container {
        max-width:730px !important;
    }
    .custom-container {
        width: 85%;
        margin: auto;
    }
    .herobanner a {
        font-size: 16px;
    }
    .container_testimonial {
        width: 100%;
        margin: 0px 20px;
    }

    h1.primary {
        font-size: 64px;
    }

    h2.secondary {
        font-size: 32px;
    }

    h2.inner {
        font-family: 'proxima_novabold', Helvetica, Arial, sans-serif;
        font-size: 32px !important;
        font-weight: 400 !important;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        backface-visibility: hidden;
    }

    h3.last {
        font-size: 16px;
    }

    .body1 {
        font-size: 16px !important;
    }

    .body2 {
        font-size: 14px !important;
    }

    .herobanner p {
        font-size: 16px;
    }

    .btn-gray {
        font-size: 16px;
        font-weight: bold !important;
        border: 1px solid #9A9A9A !important;
        border-radius: 8px;
        padding: 12px 39px;
    }
    .seamlessy {
        margin-bottom:0px;
    }

    .left-div {
        flex: 1;
    }

    .right-div {
        width: 300px; /* Adjust width of the fixed div */
        margin-left: 40px;
    }
    .herobanner {
        height: auto;
        margin-bottom: 70px;
    }
    .d-show {
        display: none;
    }

    .d-hide {
        display: block;
    }

    .d-m-show {
        display: block;
    }

    .d-m-hide {
        display: none;
    }
    .d-t-show {
        display: block;
    }

    .d-t-hide {
        display: none;
    }
    .section_height {
        height: auto;
    }
    .moreways {
        margin-bottom:50px;
    }
    .testimonail_bg {
        margin-bottom:140px;
    }
    /* Left, not center: the Luminate section and the "Artist friendly pricing"
       copy are the only users of .textalign, and centering them at narrow widths
       made them the only centered body copy on the site. */
    .textalign {
        text-align: left;
    }
    .pricing_container {
        width: 70%;
    }
    .vh100 {
        height: auto !important;
        margin-bottom:50px;
    }
}

@media (max-width: 767px) {

    h1.primary {
        font-family: 'proxima_novabold', Helvetica, Arial, sans-serif;
        font-size: 32px;
    }

    h2.secondary {
        font-family: 'proxima_novabold', Helvetica, Arial, sans-serif;
        font-size: 30px;
    }

    h2.inner {
        font-family: 'proxima_novabold', Helvetica, Arial, sans-serif;
        font-size: 32px !important;
        font-weight: 400 !important;
    }

    h3.last {
        font-family: 'proxima_novabold', Helvetica, Arial, sans-serif;
        font-size: 20px;
        line-height: 100%;
    }

    .body1 {
        font-family: "Inter", serif !important;
        font-optical-sizing: auto;
        font-weight: 300 !important;
        font-style: normal;
        /* background-color: #0F0B09 !important;*/
        color: #D2CBC9 !important;
        font-size: 14px;
        /* line-height: 160% !important;*/
    }

    .body2 {
        font-family: "Inter", serif !important;
        font-optical-sizing: auto;
        font-weight: 300 !important;
        font-style: normal;
        /* background-color: #0F0B09 !important;*/
        color: #D2CBC9 !important;
        font-size: 12px;
        /* line-height: 160% !important;*/
    }

    .herobanner p {
        color: #D2CBC9 !important;
        font-size: 14px;
    }

    .herobanner h1 {
        padding-top: 55px;
    }

    .mt-45 {
        margin-top: 25px;
    }

    .mt-80 {
        margin-top: 25px;
    }

    .btn-gray {
        font-family: 'proxima_novabold', sans-serif;
        font-size: 14px;
        font-weight: bold !important;
        background-color: rgba(91, 87, 86, 0.6);
        color: #FFFBFB;
        border: 1px solid #9A9A9A !important;
        border-radius: 8px;
        padding: 6px 20px;
        /* backdrop-filter: blur(75px);  */
        transition: all 300ms ease-out; /* Hover effect duration */
        line-height: normal !important;
    }

    .d-show {
        display: none;
    }

    .d-hide {
        display: block;
    }

    .d-m-show {
        display: block;
    }

    .d-m-hide {
        display: none;
    }

    .btn-red {
        padding: 6px 24px;
        font-family: 'proxima_novabold', sans-serif;
        font-weight: bold;
        font-size: 20px;
        color: #FFFBFB; /* Text color */
        background-color: #C52026; /* Fill color */
        border: 1px solid #B76C5B; /* Border (stroke) color, 1px, inside */
        border-radius: 12px; /* Optional: Add some rounding to corners */
        text-align: center;
        text-decoration: none;
        transition: all 300ms ease-out; /* Hover effect duration */
        margin: 10px 0px;
        width:100%;
    }

    .btn-outline-white {
        padding: 6px 43px;
        color: #FFFBFB; /* Text color */
        background-color: transparent;
        border: 1px solid #fffbfb; /* Border (stroke) color, 1px, inside */
        border-radius: 12px; /* Optional: Add some rounding to corners */
        text-align: center;
        text-decoration: none;
        transition: all 300ms ease-out; /* Hover effect duration */
        margin: 10px 0px;
        width: 100%
    }

    .btn-outline-white-app {
        padding: 6px 43px;
        color: #FFFBFB; /* Text color */
        background-color: transparent;
        border: 1px solid #fffbfb; /* Border (stroke) color, 1px, inside */
        border-radius: 12px; /* Optional: Add some rounding to corners */
        text-align: center;
        text-decoration: none;
        transition: all 300ms ease-out; /* Hover effect duration */
        margin: 10px 0px;
        width: 100%
    }
    .custom-container {
        width: 90%;
        margin: auto;
    }
    .herobanner a {
        font-family: 'proxima_novaregular', sans-serif;
        font-size: 16px;
    }
    .left-div,
    .right-div {
        width: 100%; 
        margin-left: 0; 
    }

    .right-div {
        margin-top: 20px; 
        order: 1; 
    }

    .left-div {
        margin-top: 20px; 
        order: 2; 
    }
    .d-flex {
        flex-direction: column;
    }
    .btn-request {
        font-family: 'proxima_novabold', sans-serif;
        font-size: 20px !important;
        font-weight: bold !important;
        background-color: rgba(91, 87, 86, 0.6);
        color: #FFFBFB;
        border: 1px solid #9A9A9A !important;
        border-radius: 12px !important;
        padding: 10px 32px !important;
        /* backdrop-filter: blur(75px);  */
        transition: all 300ms ease-out; /* Hover effect duration */
        line-height: normal !important;
        width:100%;
    }
    .vh100 {
        height:auto;
        position:static;
    }

    .section_height {
        height: auto;
    }
    .container_testimonial {
        width: 100%;
    }

    .pricing_container {
        width: 100%;
        margin: 0px auto;
    }
    .pricebox ul li {
        
        font-size: 16px;
        padding: 2px 0px;
    }
    .link {
        font-family: 'proxima_novaregular', sans-serif;
        font-size: 14px;
        line-height: 1.5;
        color: #D2CBC9;
        text-decoration: none;
    }
    .mr-45 {
        margin-right: 20px;
    }
    .herobanner {
        height: auto;
        margin-bottom:70px;
    }
    .logo {
        margin-top: 0px;
    }
    .testimonail_bg {
        margin-bottom: 50px;
    }
    /* Left, not center: the Luminate section and the "Artist friendly pricing"
       copy are the only users of .textalign, and centering them at narrow widths
       made them the only centered body copy on the site. */
    .textalign {
        text-align: left;
    }
    .formcontainer {
        width: 100%;
    }

    .formcontainer2 {
        width: 100%;
    }
    .custom-class {
        box-sizing: content-box; /* Change box-sizing */
        flex-shrink: 1 !important; /* Allow shrinking */
        width: 44% !important; /* Adjust width */
        max-width: none !important; /* Remove max-width constraint */
        padding-right: 0px !important; /* Adjust or remove padding */
        padding-left: 10px !important; /* Adjust or remove padding */
        margin-top: 0; /* Remove vertical spacing */
    }
    .pricebox h3 {
        font-size: 20px !important;
    }

        .pricebox h3 span {
            font-size: 20px !important;
        }
    #footer {
        background-color: #231D1C;
        padding: 30px 0px;
    }
}

/*--------custom dropdown-------*/
/* Style for the custom select container */
.custom-select {
    position: relative;
    display: inline-block;
    width: 100%; /* Full width */
    background-color: #231A18;
    border: 1px solid #493733;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    height:56px;
}
    .custom-select.error {
        border-color: #ED8E79; /* Error stroke color */
        color: #FFFBFB; /* Error text color */
        box-shadow: 0 0 15px rgba(205, 95, 99, 0.3); /* Error shadow */
    }

/* Style for the selected box */
.select-box {
    padding: 9px 15px;
    color: #837B79;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Full width */
    position: relative;
}

    /* Arrow Icon */
    .select-box .arrow {
        width: 12px;
        height: 12px;
        position: absolute;
        right: 12px; /* Position the arrow on the right */
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none; /* Make sure the arrow doesn�t interfere with clicks */
    }

        .select-box .arrow::before {
            content: '';
            width: 0;
            height: 0;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 6px solid #837B79; /* Downward arrow */
            position:absolute; /*added later*/
            top:5px; /*added later*/
        }

.custom-select.open .arrow::before {
    border-top: none;
    border-bottom: 6px solid #837B79; /* Upward arrow when open */
}

/* Style for the options list (hidden by default) */
.options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #231A18;
    border: 1px solid #FFFBFB;
    border-radius: 12px;
    z-index: 1;
    width: 100%; /* Full width */
    /*max-height: 300px;*/
    overflow-y: auto;
}

/* Style for each individual option */
.option {
    padding: 10px;
    color: #ffffff;
    cursor: pointer;
    border-bottom: 1px solid #FFFBFB; /* Bottom border for each option */
    width: 100%; /* Full width */
}

    /* Hover effect for options */
    .option:hover {
        background-color: #231A18;
        color: #D2CBC9;
        border-bottom: 1px solid #FFFBFB;
    }

/* When the dropdown is clicked, show the options */
.custom-select.open .options {
    display: block;
}

/* Style for when the selected option is chosen */
.selected-option {
    /*color: #837B79;*/
    display: block; /* Make sure the text is always visible */
    width: 100%; /* Full width of the container */
    padding:9px 0px;
}

/* Active state for selected option */
.custom-select.selected .select-box {
    color: #FFFFFF; /* Text color turns white when selected */
}

/* Unselected/Empty state for the first option */
.custom-select.selected .select-box {
    color: #837B79; /* Text color remains gray */
}

/* Style for the empty unselect option */
.option[data-value="empty"] {
    color: #837B79; /* Color for the unselect option */
}

/* Change selected text color and border to white after selection */
.custom-select.selected .select-box {
    border: 1px solid #FFFFFF; /* Border turns white */
    padding: 6px 15px;
    border-radius: 12px;
}

/* Style for when the custom select is in the selected state */
.custom-select.selected {
    border: 1px solid #FFFFFF; /* Change the border color to white after selection */
    background-color: #231A18;
}

    /* Ensure the selected option text and border change color when selected */
    .custom-select.selected .select-box {
        color: #FFFFFF; /* Text color turns white */
    }
/*----loading-----*/
.btn.loading {
    pointer-events: none;
    opacity: 0.7;
}

.spinner {
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top: 3px solid white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    animation: spin 0.8s linear infinite;
    display: none;
}

.loading .spinner {
    display: inline-block;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.disabled-button {
    opacity: 0.4; /* Lower opacity when disabled */
    pointer-events: none; /* Prevent any clicks when disabled */
}