body, .ow, body, html, .base_sign_in{background-color:#FFF}
/* SkaDate Support Lora: delete the two choices “online only and with photo” (delete them only for the index page not for other pages */
.index_qs_widget .ow_qs_field.qs_checkboxes {
display:none;
}

/*SkaDate Support Lora: Delete the Advanced search text from index page but keep for other pages */
.index_qs_widget a {
display: none;
}

/* SkaDate Support Lora: change the color of the search button to something like Cranberry red */
.custom_platinum_pro_index .index_qs_widget span.ow_button {
background-color: #ed266b;
border-color: #ed266b !important;
}

/* SkaDate Support Lora: remove join section from index page*/
.custom_platinum_pro_index .user_counter_join {
display: none;
}


/* SkaDate Support Lora: Change the color of “join now button bottom of index page to blue */
.footer_bottom_banner .ow_join_button a {
background-color: blue;
}

/* Above done by Skadate  */


/* Force the homepage QS button to be visible and clickable */
.custom_platinum_pro_index .index_qs_widget span.ow_button{
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
}

html, body, .ow, .ow_page, .ow_page_wrap, .ow_page_wrap_in, .ow_content, .ow_main, .ow_center, .ow_footer, input, button, select, textarea {
  font-family: "Roboto", Arial, sans-serif !important;
  color: #ffffff;
}


/* =====================================================
   HAYAA MATRIMONY – PLATINUM PRO HEADER CLEANUP
   Goal:
   1) Remove the large promo banner on internal pages
   2) Remove the empty space it creates
   3) Keep menu clickable
   4) Show and style hero text only on the homepage
===================================================== */


/* =====================================================
   1) GLOBAL: Remove Platinum Pro promo banner background
   (This is the big image and tall header space)
===================================================== */
.ow_header{
  background: none !important;
  background-image: none !important;
  min-height: 0 !important;
  height: auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* If the theme uses pseudo elements for overlays, disable them */
.ow_header::before,
.ow_header::after{
  background: none !important;
  background-image: none !important;
  content: none !important;
  pointer-events: none !important; /* prevents click blocking */
}


/* =====================================================
   2) GLOBAL: Remove leftover spacing after header removal
   (Pull content up so there is no empty gap)
===================================================== */
.ow_page_wrap,
.ow_page_padding{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Remove extra spacing around the menu wrapper */
.ow_menu_wrap{
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* =====================================================
   3) GLOBAL: Make menu clickable (fix invisible overlays)
===================================================== */
.ow_menu_wrap,
.ow_menu_wrap *{
  pointer-events: auto !important;
}

.ow_menu_wrap{
  position: relative !important;
  z-index: 999999 !important;
}

/* Keep header content above any remaining layers */
.ow_header .container_wrap{
  position: relative !important;
  z-index: 999999 !important;
}


/* =====================================================
   4) HERO TEXT (Slider Slogan)
   Default: hidden everywhere
   Homepage: visible + positioned + styled
===================================================== */

/* Default: hide slogan text on all pages */
.header_slogan{
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Homepage ONLY: show slogan text again
   Note: your homepage body class is base_index_page
*/
body.base_index_page .header_slogan{
  display: block !important;
  position: absolute !important;
  top: 190px !important;      /* vertical position of slogan block */
  left: 140px !important;     /* horizontal position of slogan block */
  z-index: 9999 !important;
  width: auto !important;
  max-width: 70% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Main quote line (large text) */
body.base_index_page .header_slogan .Qu{
  font-size: 44px !important;
  line-height: 1.05 !important;
  margin-bottom: 8px !important;          /* gap between quote and reference */
  color: #f8f3ea !important;              /* soft ivory */
  text-shadow: 0 4px 22px rgba(0,0,0,0.65) !important;
}

/* Reference line (smaller text) */
body.base_index_page .header_slogan .Qr{
  display: inline-block !important;
  margin-top: 0 !important;
  font-size: 18px !important;
  letter-spacing: 0.6px !important;
  color: #e6c98a !important;              /* elegant warm gold */
  text-shadow: 0 3px 14px rgba(0,0,0,0.6) !important;
}
/* =====================================================
   HAYAA MATRIMONY – PLATINUM PRO HEADER CLEANUP
   Goal:
===================================================== */


/* =====================================================
   TEXT IN THE TOP SILDER IMAGES
===================================================== */

.Qu{
font-family: 'Amiri', serif;
font-size: 38px;

color: #FFFFFF;
text-shadow:
0 0 2px rgba(0,0,0,0.85),
0 0 6px rgba(0,0,0,0.55),
0 0 1px rgba(255,255,255,0.55);
}

.Qr{

margin-top: 0px;
font-family: 'Roboto', sans-serif;
font-size: 14px;
color: #F1F3F8;
text-shadow:
0 0 2px rgba(0,0,0,0.80),
0 0 5px rgba(0,0,0,0.50),
0 0 1px rgba(255,255,255,0.45);
}
/* =====================================================
   TEXT IN THE TOP SILDER IMAGES
===================================================== */


/* =========================================================
QUICK SEARCH (horizontal_qs)
Theme: Platinum Pro
Purpose:
A) Round the 3 fields (Gender, Looking For, Age)
B) Control the SEARCH button (width, gap, alignment, icon)
---------------------------------------------------------
IMPORTANT:
Change only the values marked "EDIT THIS" in future.
========================================================= */


/* =========================================================
A) FIELD RADIUS (Gender, Looking For, Age)
---------------------------------------------------------
EDIT THIS: radius value (3px to 5px recommended)
========================================================= */

.horizontal_qs .index_qs_widget .ow_qs_field:not(.ow_qs_btn) .placeholder{
border-radius: 8px !important;        /* EDIT THIS: 3px, 4px, or 5px */
}

/* Age field uses a different wrapper that draws the border */
.horizontal_qs .index_qs_widget .ow_qs_field.ow_qs_presentation_age .ow_qs_value .birthdate,
.horizontal_qs .index_qs_widget .ow_qs_field.ow_qs_presentation_age .ow_qs_value .birhdate{
border-radius: 8px !important;        /* EDIT THIS: keep same as above */
overflow: hidden !important;
}


/* =========================================================
B) SEARCH BUTTON (only)
Controls: width, space from Age, content alignment, icon
---------------------------------------------------------
EDIT THIS:
- button width (166px)
- gap from Age (20px)
- button height (54px)
- icon spacing (right 18px / padding-right 46px)
========================================================= */

/* Button container sizing in the row */
.horizontal_qs .index_qs_widget .ow_qs_field.ow_qs_btn{
margin-left: 20px;                     /* EDIT THIS: space between Age and button */
width: 166px !important;               /* EDIT THIS: button width */
max-width: 166px !important;
flex: 0 0 166px !important;            /* prevents stretching */
}

/* Make button fill the fixed width */
.horizontal_qs .index_qs_widget .ow_qs_field.ow_qs_btn .ow_button{
display: block;
width: 100%;
}

/* Button text + icon layout */
.horizontal_qs .index_qs_widget .ow_qs_field.ow_qs_btn .ow_button input[type="submit"]{
width: 100% !important;
height: 54px;                          /* EDIT THIS: match field height */
line-height: 54px;                     /* keeps text vertically centered */
box-sizing: border-box;

white-space: nowrap;
overflow: hidden;

text-align: center;                    /* centers SEARCH text */
padding-left: 9px;                    /* EDIT THIS: small nudge to balance icon */
padding-right: 46px !important;        /* EDIT THIS: reserved space for icon */

background-position: right 18px center !important; /* EDIT THIS: icon position */
background-repeat: no-repeat !important;
}

/* If theme injects icon using pseudo elements, keep it in same place */
.horizontal_qs .index_qs_widget .ow_qs_field.ow_qs_btn:after,
.horizontal_qs .index_qs_widget .ow_qs_field.ow_qs_btn .ow_button:after{
right: 18px !important;                /* EDIT THIS: icon position */
}

/* =========================================================
QUICK SEARCH (horizontal_qs)
--------------------------------------------------------- */


/* How We Do It images background fix */
.how_we_do_it_item .image {
background-color: #ffffff !important;
}






/* Main body font */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");

/* Apply Roboto site-wide */
html, body,
.ow, .ow_page, .ow_page_wrap, .ow_page_wrap_in,
.ow_content, .ow_main, .ow_center, .ow_footer,
input, button, select, textarea {
font-family: "Roboto", Arial, sans-serif !important;
color:  #6F7683;
}

/* Headings: slightly stronger */
h1, h2, h3, h4, h5, h6,
.ow_header, .ow_section, .ow_box_cap,
.ow_box_cap h3, .ow_box_cap h4 {
font-family: "Roboto", Arial, sans-serif !important;
font-weight: 600;
}

/* Buttons and key UI labels */
button, .ow_button, .ow_button input, .ow_btn, .ow_btn_submit,
.ow_menu, .ow_nav, .ow_console, .ow_console_item {
font-family: "Roboto", Arial, sans-serif !important;
font-weight: 500;
}

/* Form inputs: keep readable */
input, select, textarea {
font-weight: 400;
}
/* Main body font */















/* =========================================================
hottest_users
--------------------------------------------------------- */
.circle_user_title {
font-family: 'core_sans_e85_extrabold', sans-serif;
color: #ffffff;          /* better on blue */
font-size: 31px;
font-weight: 600;
text-transform: uppercase;
color: #ffffff;
text-shadow: 0 2px 4px rgba(0,0,0,0.65);
letter-spacing: 16px;

}





.hottest_users {
background: linear-gradient(90deg, #5b8ec2, #579FDD);
}
/* =========================================================
hottest_users
--------------------------------------------------------- */










/* Sweet Stories =========================================================
HOME: SWEET STORIES / "WHAT MAKES US UNIQUE" SLIDER
Location: Homepage section with the phone + text panel
Goal:
1) Hide the white overlay title on the image ("Sweet success stories")
2) Keep BOTH sides of the slide background pure white
========================================================= */

/* 1) HIDE THE WHITE OVERLAY TITLE ON THE IMAGE
Element: .img_title (the white text overlay on the left image)
To re-enable: delete this block
*/
.custom_platinum_pro_index .stories_carousel_item_img .img_title{
display:none !important;
}


/* 2) FORCE THE RIGHT TEXT PANEL BACKGROUND TO WHITE
This removes the grey background on the right side
To re-enable: delete this block
*/
.custom_platinum_pro_index .stories_carousel_item_text{
background:#ffffff !important;
}

/* Sometimes Platinum Pro sets a grey background on inner wrappers.
This forces inner elements to stay transparent so the panel stays white.
If you ever see grey again, keep this line. If not needed, remove it.
*/
.custom_platinum_pro_index .stories_carousel_item_text *{
background:transparent !important;
}


/* 3) FORCE THE LEFT IMAGE PANEL BACKGROUND TO WHITE
This ensures the area behind the image is white, not grey
*/
.custom_platinum_pro_index .stories_carousel_item_img{
background-color:#ffffff !important;
background-repeat:no-repeat !important;
background-position:center center !important;
background-size:contain !important;
}

/* APP SECTION: force smaller app image (overrides inline max-width:100%) */
.custom_platinum_pro_index .app-banner-visual img{
width: 454px !important;
max-width: 454px !important;
height: 460px !important;
}

/* =====================================================
STORIES CAROUSEL – NAVIGATION DOTS STYLING
Controls position + color of Owl Carousel dots
===================================================== */
/* -----------------------------------------
Positioning of the dots container
(Adjust bottom value to move dots up/down)
------------------------------------------ */
.stories_carousel .owl-dots {
position: absolute;
bottom: 130px;   /* Increase to move UP, decrease to move DOWN */
left: 53%;       /* Horizontal alignment */
}


/* -----------------------------------------
Default / Inactive Dots
------------------------------------------ */
.stories_carousel .owl-dots button.owl-dot {
background-color: #007bff !important;  /* Brand blue (inactive state) */
width: 44px;                           /* Dot width */
height: 6px;                           /* Dot height */
border-radius: 20px;                   /* Rounded edges */
border: 0;
opacity: 0.4;                          /* Softer appearance when inactive */
}


/* -----------------------------------------
Active Dot
------------------------------------------ */
.stories_carousel .owl-dots button.owl-dot.active {
background-color: #000000 !important;  /* Active highlight color */
opacity: 1;                            /* Full visibility */
}
/* =====================================================
STORIES CAROUSEL – NAVIGATION DOTS STYLING
Controls position + color of Owl Carousel dots
===================================================== */



/* =====================================================
STORIES SECTION – READ MORE
Border normally, underline only on hover
===================================================== */

.stories_carousel_item_text .read_more a {
color: #000;
font-weight: 600;
letter-spacing: 0.8px;
text-transform: uppercase;
text-decoration: none;
border: 1px solid #000;
border-radius: 20px;
position: relative;
transition: all 0.25s ease;
}
/* Underline (hidden initially) */
.stories_carousel_item_text .read_more a::after {
content: "";
position: absolute;
left: 0;
bottom: -4px;
width: 0;
height: 1px;
background-color: currentColor;
transition: width 0.25s ease;
}
/* Hover state */
.stories_carousel_item_text .read_more a:hover {
color: #c0c0c0;
border-color: transparent;   /* Hide border */
background: transparent;     /* Ensure no fill */
}
/* Animate underline in */
.stories_carousel_item_text .read_more a:hover::after {
width: 100%;
}
/* =====================================================
STORIES SECTION – READ MORE
===================================================== */




/* Sweet Stories ==================== */




/*App outer section*/

/*Launch app section*/







/* Vertically center the app banner text */
.index-SKMOBILEAPP_CMP_MobileExperience .app-banner-text{
display: flex;
flex-direction: column;
text-align: center;
height: 100%;
font-family: "Roboto", Arial, sans-serif !important;
}
.app-banner-text{
color: #6F7683;
font-size: 21px;
line-height: 1.3;
text-align: center;
}
.app-banner-text strong{
font-weight: 500;
text-align: center;
}


.app-banner-visual{
width: 100%;
}

.app-banner-visual img{
display: block;
margin-left: auto;
}




/*App outer section*/



.footer_bottom_banner .text {
font-size: 26px;
color: #5c5c5c;
font-family: 'core_sans_e35_light', "Trebuchet MS", "Helvetica CY", sans-serif;
font-family: "Roboto", Arial, sans-serif !important;
font-weight: 400;
}

/*Bottom button*/
.footer_bottom_banner .ow_join_button a {
background-color:DodgerBlue;
}
.index_join_button, body .camera_wrap .index_join_button {
height: 56px;
background-color: #fff;
border-radius: 10px;
line-height: 57px;
font-size: 17px;
color: #000;
text-align: center;
text-transform: uppercase;
font-family: 'core_sans_e45_regular', "Trebuchet MS", "Helvetica CY", sans-serif;
letter-spacing: 1px;
display: inline-block;
padding: 0 34px;
}




/* Index page background color*/
.ow.platinum_pro.base_index_page.user_not_logged div.index_master_page_wrap.custom_platinum_pro_index div.ow_page_wrap.index_master_page {
    background-color: #ffffff;
}
/* The app section in home page, app image and phone */
.ow.platinum_pro.base_index_page.user_not_logged div.index_master_page_wrap.custom_platinum_pro_index div.ow_page_wrap.index_master_page div.ow_page_wrap_in div.ow_page_padding div.ow_page_container.clearfix div.ow_page.ow_bg_color.clearfix{
background: #ffffff !important;
}







/* =====================================================
   DASHBOARD SIDEBAR (My Profile widget) fix
   Makes sidebar widget match the new card style
   ===================================================== */

/* Sidebar card header */
body.base_user_dashboard .ow_sidebar .ow_box_cap_empty{
  background: #fbfbfd !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-bottom: 0 !important;
  border-radius: 14px 14px 0 0 !important;
  padding: 10px 12px !important;
  box-sizing: border-box !important;
}

/* Sidebar card body */
body.base_user_dashboard .ow_sidebar .ow_box_empty{
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-top: 0 !important;
  border-radius: 0 0 14px 14px !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05) !important;
  padding: 12px !important;
  box-sizing: border-box !important;
}

/* Remove old theme lines inside sidebar widget */
body.base_user_dashboard .ow_sidebar .ow_box_cap_empty,
body.base_user_dashboard .ow_sidebar .ow_box_empty{
  background-image: none !important;
}

/* Make avatar block fit the narrow sidebar nicely */
body.base_user_dashboard .ow_sidebar .ow_my_avatar_widget{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Stop the image area from pushing weird spacing */
body.base_user_dashboard .ow_sidebar .ow_my_avatar_img{
  float: none !important;
  margin: 0 !important;
}

/* Slightly smaller avatar so it fits clean */
body.base_user_dashboard .ow_sidebar .ow_avatar img{
  width: 46px !important;
  height: 46px !important;
  border-radius: 12px !important;
}

/* Username spacing */
body.base_user_dashboard .ow_sidebar .ow_my_avatar_username{
  font-weight: 700 !important;
  text-decoration: none !important;
}
/* =====================================================
   DASHBOARD (base_user_dashboard)
   Clean modern cards, better spacing, less dated borders
   Applies to all users
   ===================================================== */

/*Background color for all pages f0f2f5  EAF1FF ecf0f6 EDEFF2*/
.ow_page_wrap {
background-color: #ecf0f6;
} 
/* Background color for middle section all pages*/
.ow_page_container .ow_page {
    background-color: #ecf0f6;
}

/* Remove the heavy white page block feeling */
body.base_user_dashboard .ow_page.ow_bg_color{
  background: transparent !important;
}

/* Widget header bar */
body.base_user_dashboard #place_sections .ow_box_cap,
body.base_user_dashboard #place_sections .ow_box_cap_empty{
  background: #fffffff !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-bottom: 0 !important;
  border-radius: 14px 14px 0 0 !important;
  padding: 12px 14px !important;
}

/* Widget header text */
body.base_user_dashboard #place_sections .ow_box_cap h3,
body.base_user_dashboard #place_sections .ow_box_cap_empty h3{
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

/* Widget body card */
body.base_user_dashboard #place_sections .ow_box,
body.base_user_dashboard #place_sections .ow_box_empty{
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-top: 0 !important;
  border-radius: 0 0 14px 14px !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05) !important;
  padding: 14px !important;
}

/* Remove old decorative bottom pieces */
body.base_user_dashboard #place_sections .ow_box_bottom_left,
body.base_user_dashboard #place_sections .ow_box_bottom_right,
body.base_user_dashboard #place_sections .ow_box_bottom_body,
body.base_user_dashboard #place_sections .ow_box_bottom_shadow{
  display: none !important;
}

/* Better spacing between widgets */
body.base_user_dashboard #place_sections .ow_stdmargin{
  margin-bottom: 18px !important;
}

/* Quick Search: tidy spacing */
body.base_user_dashboard #place_sections .ow_qs_field{
  padding-bottom: 12px !important;
}

/* Quick Search: make inputs feel modern */
body.base_user_dashboard #place_sections .ow_qs_value select,
body.base_user_dashboard #place_sections .ow_qs_value input[type="text"]{
  border-radius: 10px !important;
  border: 1px solid rgba(0,0,0,0.15) !important;
  padding: 8px 10px !important;
}

/* Dashboard primary buttons */
body.base_user_dashboard #place_sections .ow_button input[type="submit"],
body.base_user_dashboard #place_sections .ow_button button{
  background: #ed266b !important;
  border-color: #ed266b !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  padding: 10px 16px !important;
}


body.base_user_dashboard #place_sections .ow_button input[type="submit"]{
  letter-spacing: 1px !important;
}
body.base_user_dashboard h1.ow_ic_house{
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  margin-bottom: 25px !important;
}
/* =====================================================
   DASHBOARD QUICK SEARCH button fix
   (prevents clipped / broken button)
   ===================================================== */

body.base_user_dashboard #place_sections .ow_qs_btn .ow_button{
  background: #ed266b !important;
  border: 1px solid #ed266b !important;
  border-radius: 12px !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: inline-block !important;
}

/* remove internal wrapper spacing that can cause clipping */
body.base_user_dashboard #place_sections .ow_qs_btn .ow_button > span{
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}

/* make the actual input behave like a real button */
body.base_user_dashboard #place_sections .ow_qs_btn .ow_button input[type="submit"]{
  background: transparent !important;
  border: 0 !important;
  padding: 10px 18px !important;
  height: auto !important;
  line-height: 1 !important;
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  cursor: pointer !important;
}

/* keep hover consistent */
body.base_user_dashboard #place_sections .ow_qs_btn .ow_button:hover{
  filter: brightness(0.95) !important;
}



/* =====================================================
   TOP MAIN MENU (Dashboard / My Profile / Photo / Search)
   Modern clean style
   ===================================================== */

/* Menu container spacing */
body.base_user_dashboard .ow_menu_wrap{
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}

/* Menu items */
body.base_user_dashboard .ow_main_menu li a{
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: none !important;
  color: #444 !important;
  padding: 14px 18px !important;
  transition: all 0.2s ease !important;
}

/* Hover state */
body.base_user_dashboard .ow_main_menu li a:hover{
  color: #ed266b !important;
}

/* Active tab */
body.base_user_dashboard .ow_main_menu li.active a{
  color: #ed266b !important;
  position: relative !important;
}

/* Modern underline active indicator */
body.base_user_dashboard .ow_main_menu li.active a::after{
  content: "" !important;
  position: absolute !important;
  left: 20% !important;
  right: 20% !important;
  bottom: -8px !important;
  height: 3px !important;
  background: #ed266b !important;
  border-radius: 3px !important;
}



/* Top menu background - soft blue */
body.base_user_dashboard .ow_menu_wrap{
  background: #ffffff!important;   /* soft blue */
  border-bottom: 1px solid rgba(0,0,0,0.05) !important;
}