@font-face { font-family: fontone; src: url(../FONTS/PlayfairDisplay-Regular.ttf);}
@font-face { font-family: fonttwo; src: url(../FONTS/Poppins-Regular.ttf);}
@font-face { font-family: fontthree; src: url(../FONTS/AvenirNextLTPro-Regular.otf);}

:root {
color-scheme: light !important;

--primary-color: #0f393B ;
--accent-color:  #0f3624;
--secondary-color: linear-gradient(135deg, #cfd8e6 0%, #d9e1ee 50%, #f1d7c9 100%);
--test-color: #1d2b3b;
--shade-color: #098551  ;
--sec-shade-color: #f8c251;
--border-shade-color: #303d49;
--text-color: #778883 ;
--background: #030303;
}

* {
overflow: hidden; box-sizing: border-box; text-decoration: none; background-color: transparent; border: none; list-style: none; color: var(--primary-color);
padding: 0%; margin: 0%; font-family: fonttwo; font-weight: 600; 
}
.form-group
button:active {
transform: scale(.97);
}
html {
font-size: 16px; 
}
body {
width: 100vw; overflow-y: auto; height: 100vh; background-color: #fdfdfd !important; scroll-behavior: smooth; 

}
#slidesearchput:focus {
border: solid 1px #F1F4F5;
}
input:focus, textarea:focus{
outline: none !important;
}

::-webkit-scrollbar {
  width: 8px; 
  }
  ::-webkit-scrollbar-track {
  background-color: #d9d9d9;
  }
  ::-webkit-scrollbar-thumb {
  background-color: #FAFAFA;
  }

  ::-webkit-scrollbar-thumb:hover {
  background-color: var(--sec-shade-color);
  }

@media (min-width: 800px) { .mobinclude { display: none !important; }}
@media (max-width: 800px) { .deskinclude { display: none !important;  }}

/* cookie box styling */
.cookiepolbox {
width: 100%; height: max-content; padding: 20px 10px 20px 10px; background-color: transparent; display: flex; align-items: center; justify-content: center;
}
.cookiepolbox span {
font-size: .9rem; color: #FFFFFF; text-align: center; 
}

/*  ------------------------------------------------------------- header styling start here --------------------------------------------------------------------------- */

header {
width: 100vw; height: max-content; z-index: 999999;   padding: 0px; position: fixed; background-color: transparent;   overflow: visible !important; box-shadow: 1px 1px 1px #e4e6e98e
}
.headertop {
height: max-content; display: flex; align-items: center; justify-content: center; background-color: #FFFFFF;   min-height: 60px; z-index: 999;
padding: 10px 0px;   overflow: visible !important;
}
.header-section {
  display: flex; justify-content: space-between; align-items: center; padding: 0px !important;   overflow: visible !important;
}

  #logo_png img {
    height: 50px; width: auto;
  }
#menu {
  width: max-content; height: max-content; display: flex; align-items: center; justify-content: center;    overflow: visible !important; 
}
.menu-items {
position: relative ; overflow: visible !important; cursor: pointer; height: 50px; display: flex; align-items: center; justify-content: center;   text-transform: capitalize;
}
.menu-items a {
font-size: 1rem; font-weight: 500;  padding: 10px;   overflow: visible !important;   text-transform: uppercase !important; 
}
.list_privately_link {
width: max-content; height: max-content; border-radius: 36px; padding: 10px 35px; display: flex; align-items: center; justify-content: center;  font-size: .9rem; height: 40px;
cursor: pointer; border: solid 1px #E4E6E9; color: #000000 !important; font-weight: 600; background-color: var(--primary-color); color: #FFFFFF;
}
.accountlinkout{
height: 35px;  width: 35px; border-radius: 100%; padding: 5px; display: flex; align-items: center; justify-content: center;  background-color: #ffd4d4;
border: solid 2px #ffd4d4;  cursor: pointer;
}
.accountlinkalert {
background-color: #E8F3F8; border: solid 2px #E8F3F8 !important ; margin-right: 15px;
}
.accountlinkout:hover {
border: solid 2px #FF0000 !important ;
}

.accountlinkalert:hover {
border: solid 2px #025BD9 !important ;
}
.accountlink {
  width: 40px; height: 40px; padding: 8px; border-radius: 100%; background-color: var(--sec-shade-color); border: solid 2px var(--sec-shade-color);
}
.accountlink img {
  width: 100%; height: auto;
}
.accountlinkout img {
  width: auto; height: 100%;
}
.accountlink:hover, .accountlink:active {
background-color: #E8F3F8; border-color: var(--primary-color);
}

.header-click-box {
  overflow: visible;
}
.accountlink  a, .accountlinkout  a{
 width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
}
.list_privately_link  {
margin-right: 15px; border:  solid 1px #E4E6E9; overflow: visible; position: relative; font-size: .9rem; text-transform: capitalize;  font-weight: 600;
color: #000000;  display: flex; align-items: center; justify-content: center;   color: #FFFFFF !important;
}
.prevbutton  {
  border-right: 1px solid #808080; margin-right: 15px;  width: max-content; 
}
.prevbutton a {
  display: flex; align-items: center; justify-content: flex-start; padding-right: 18px; width: max-content; 
}
.prevbutton-span {
  font-size: .8rem; color: #FFFFFF;
}
.prevbutton-mg {
  width: 22px; height: auto; margin-right: 2px;
}

.headerbottom {
  width: 100%; height: max-content;  padding: 8px 20px 8px 20px !important;  background-color: var(--primary-color); overflow-x: scroll !important; display: flex;
  align-items: center; justify-content: center;
}
.headerbottom::-webkit-scrollbar {
display: none !important;
  }

.header-bottom-section {
  display: flex; align-items: center; justify-content: flex-start; height: max-content; padding: 0px !important;  width: max-content;
  width: 100%;
}

.breadcrumb {
  display: flex; align-items: center; justify-content: flex-start; width: max-content !important; height: max-content; 
}
.breadcrumb-link {
color: #FFFFFF !important; margin-right: 5px; font-size: .8rem; text-decoration: underline; display: flex; align-items: center; justify-content: center;
}
.breadcrumb-icon {
width: 10px ; height: auto; margin-right: 5px; padding-top: 2px;
}
.breadcrumb-p {
 font-size: .8rem; color: #E4E6E9 !important; padding-top: 1px; width: max-content; display: flex; align-items: center; justify-content: center;
}

.header-click-box {
  display: flex; align-items: center; justify-content: flex-end; height: max-content; width: max-content;
}
#menubtn {
  width: 30px; height: 30px;   display: flex; align-items: center; justify-content: center; padding: 6px; margin-right: 10px; cursor: pointer;
}
#menubtn img {
  width: 100%; height: auto;
}


.headertop_menu_items { 
position: relative ; overflow: visible; width: max-content; padding: 10px; margin-right: 30px;
}
.headertop_menu_items span {
width: 100%; display: flex; align-items: center; justify-content: space-between;  text-transform: uppercase; font-weight: 600; font-size: .96rem;
}
.headertop_menu_items_drop_box {
position: absolute; top: 0%;  width: 220px; height: max-content; left: 0%;  background-color: var(--primary-color); z-index: 98; margin-top: 48px; padding: 10px;
border: #174d50 solid 1px; border-bottom: none; display: none; border-radius: 26px; padding-bottom: 0px;
}
.headertop_menu_items span img {
  width: 10px; height: auto; margin-left: 4px;
}

.headertop_menu_items_drop_box a {
width: 100%; height: 40px; display: flex; align-items: center; justify-content: space-between; margin: 0% ; font-size: .9rem;
color: #FFFFFF !important;  text-transform: uppercase; background-color: #174d50; border-radius: 16px; font-weight: 500; margin-bottom: 10px;
}
.headertop_menu_items_drop_box a:hover {
  width: 100%; height: 40px;  color: #FFFFFF !important; background-color: var(--sec-shade-color);
}
.headertop_menu_items_drop_box a img {
width: 12px; height: auto;
}

/* -------------------------------------------------------------------------------------slide styling  ----------------------------------------------------------*/

.menuslide {
position: fixed !important; top: 0; width: 100%; height: 100%; background-color: #0f393bc4;  transition: left 0.3s ease;  z-index: 1000; overflow-y: auto;
padding: 80px 10px;
}

#menu {
  width: max-content;
}
.sider_menu {
  width: 100% !important; 
}

.sider_menu a {
  width: 100%; color: #000000 !important; font-size: 1.1rem; font-weight: 600; padding: 0px 35px;
}
.slideboxtwo {
width: 100%; height: max-content; padding: 20px; margin-top: 40px;  background-color: var(--primary-color);  border-radius: 36px;
}
.menu_slide_header_box {
  width: 100%; padding: 18px 28px; font-size: 1.2rem; color: #FFFFFF; display: flex; justify-content: flex-start; align-items: center;
   font-weight: 500; background-color: #174d50; border-radius: 16px; margin-bottom: 10px;
}
.menu_slide_header_box_first {
    border-top: 1px #E4E6E9 solid !important;
}
.menu_slide_header_box img {
width: 30px; height: auto; margin-right: 10px;
}
.side-menu-items {
  font-size: 1rem; font-weight: 600; width: 100%; height: max-content; border-bottom: var(--sec-shade-color) 1px solid; padding: 20px; 
  display: flex; align-items: center; justify-content: space-between; color: #FFFFFF !important;   margin-bottom: 15px;
}
.side-menu-items img {
width: 20px; height: auto; margin-right: 10px;
}
@media (min-width: 1000px) { .deskinclude { .headertop {height: 50px;} }}

/* -------------------------------------------------------------------------------------Landing ----------------------------------------------------------*/

.landing_body {
  background-color: #FAFAFA; padding: 20px; overflow: hidden; height: 100%; display: flex; align-items: center; justify-content: center;
  padding-top: 100px; background-image: url(../GRPHC/346634656654tg.jpg); background-position: 50% 80%;
  background-size: cover;
}
.landing_main {
display: flex; flex-direction: row; flex-wrap: wrap;  justify-content: center; align-items: center; width: 100%; 
border-radius: 26px; height: 100%; 
}
.landing_main_option {
  width: 300px; height: 250px; border-radius: 30px; background-color: #fafafad0; border: solid 4px #F1F1F1; margin: 12px;
  display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer;
}
.landing_main_option:hover {
  border-color: var(--primary-color);
}
.landing_main_option img {
  width: 80px; height: auto; margin-bottom: 20px;
}
.landing_main_option p {
  font-size: 1.2rem; font-weight: 800; color: var(--primary-color);
}

@media (min-width: 700px) { 

.landing_main_option {
  width: 300px; height: 250px; 
}
}

/* --------------------------------------------------------------------  main styling  --------------------------------------------------------------------------*/

.multi-select {
  position: relative;
  width: 100%;
  max-width: 400px;
  overflow: visible;
}

.select-box {
  padding: 10px;
  border: 1px solid #ccc;
  cursor: pointer;
  background: #fff;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;   overflow: visible;
}

.options-container {
  display: none;
  position: absolute;
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #E4E6E9;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 9999; 
}

.option {
  padding: 8px 12px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.option input {
  margin-right: 10px;
}

.option:hover {
  background: #f0f0f0;
}

.category {
  padding: 8px 12px;
  background: #e9e9e9;
  font-weight: bold;
}

.btn-clear {
  padding: 4px 9px;
  background: rgb(33, 72, 82);
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 26px;
  font-size: 10px;
  display: none;
}
.property-selection {
  font-family: Arial, sans-serif;
}

.category {
  font-weight: bold;
  cursor: pointer;
  padding: 5px;
  background-color: #f4f4f4;
  margin-top: 10px;
}

.option {
  display: block;
  margin-left: 15px;
}

main {
width: 100vw; height: max-content; padding: 150px 12px;   display: flex; flex-direction: column; justify-content: flex-start; align-items: center; min-height: 98vh; 
background-image: url(../GRPHC/background2.png); background-size: cover;  background-position: center; background-repeat: no-repeat;

}
.blogsectionII, .mstboxoneII {
  padding: 0px !important;
}
.homemain {
padding: 0px !important; 
}
 .box-section  {
width: 100%; 
}

.mainscreenone {
  min-height: 60vh; width: 100%; background-color: var(--accent-color);  background-image: url(../GRPHC/buildings.jpg); background-position: center top; background-repeat: no-repeat;
  background-size: cover; overflow: visible !important; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; position: relative; padding: 25vh 10px 70px 10px;
  height: max-content; object-fit: cover;  isolation: isolate;
}
.mainscreenone_projects {
  background-image: url(../GRPHC/29831530.jpg);
}
.mainscreenone::before {
  content: ""; position: absolute;  inset: 0; background: linear-gradient(135deg, rgba(15, 57, 59, 0.7) 0%, rgba(15, 57, 59, 0) 100%);
  z-index: 0; pointer-events: none;
}

.mainscreenone > * {
  position: relative;
  z-index: 1;
}

.mainscreenone h1 {
  font-size: 4rem; color: #FFFFFF; padding-bottom: 80px; font-weight: 500; text-align: center; font-family: fontone;
}

  .prompt_search_box {
    width: 100%; height: max-content; padding: 20px; border-radius: 30px;  position: relative;     overflow: visible; background-color: #FFFFFF; position: relative;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; max-width: 1200px; min-height: 80px;
  }

  .prompt_search_box  p {
    position: absolute; top: -24px; left: 40px; padding:2px  12px 2px 12px; font-size: .7rem; color: #004d3d; background-color: #FAFAFA; border-top-left-radius: 10px; border-top-right-radius: 10px;
 display: flex; align-items: center; justify-content: center;
  }

  .prompt_search_box p img {
  height: 20px; width: auto; padding: 0px 5px 2px 5px;
  }

  .homepromptput {
    width: 100%; padding: 0%; height: max-content; min-height: 1rem; border-radius: 36px; background-color: #FFFFFF; position: relative; font-weight: 700;
    overflow: visible;  background-color: #FFFFFF; margin-bottom: 20px; 
  }

  #ai_prompt {
    width: 100%; height: 100%; padding: 10px 20px; font-weight: 500; font-size: .9rem; color: #000000; 
  }

   #submitpromptBtn {
    width: 100%; height: 60px; border-radius: 36px; background-color: var(--accent-color); font-size: 1.1rem; font-weight: 700; border: solid 1px var(--accent-color);
  }

@media (min-width: 700px) {  
 
  .homepromptput {
    width: calc(80% - 5px); margin-bottom: 0px;
  }
  .prompt_search_box {
    width: 100%; height: max-content; padding: 10px; border-radius: 60px;  position: relative;     overflow: visible; background-color: #FFFFFF; position: relative;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; max-width: 1200px; min-height: 80px;
  }

  #submitpromptBtn {
    width: calc(20% - 5px);
  }

  .mainscreenone {
    min-height: 100vh;
  }
} 


section {
  position: relative;  z-index: 2;
}
.homesearchboxhold {
  width: 100%; height: max-content; position: relative;  display: flex; align-items: center; justify-content: center; overflow: visible; 
}

.homesearchbox {
width: 98%; height: max-content; border-radius: 5px; background-color: transparent; max-width: 1200px; display: flex; align-items: center; justify-content: center; z-index: 99 !important;  
overflow: visible; padding-bottom: 20px; 
}
#homesearchform {
width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; overflow: visible !important; 
}

#suggestions {
  width: 100%;
  background-color: white;
  z-index: 999;
  border-radius: 2px;
  border: 1px solid #ccc;
}

.suggestion-item, .suggestion-block {
  padding: 8px;
  cursor: pointer;
  margin-bottom: 5px; /* Adds space between suggestions */
}

.suggestion-item:hover, .suggestion-block:hover {
  background-color: #f0f0f0;
}

.homesearchformtop {
width: 100%; height: max-content;display: flex; align-items: flex-end; justify-content: space-between; max-width: 100%; background-color: #ffffff8e;
border-top-right-radius: 16px; border-top-left-radius: 16px; 
}
.specoptndrop input{
  display: none;
  }
  .specoptndrop  {
    width: 33.3%; 
  }
.specradio-btn {
margin: 0px 2px 1px 0px; width: 100%; height: 50px; display: flex;  align-items: center; justify-content: center; border-top-right-radius: 16px; padding: 10px 10px;
position: relative; text-align: center; cursor: pointer;  border-top-left-radius: 16px;
}
.specradio-btn:hover {
background-color: #ffffffc4;
}
  .specradio-btn p {
  font-size: 1rem; font-weight: 600;  color: #000000;
  }
  .specoptndrop input:checked+ .specradio-btn {
background-color: #00305C; 
  }

.specoptndrop input:checked+ .specradio-btn p {
color: #FFFFFF;
}

.rentbuyoptbox {
width: 100%; height: 40px; margin-bottom: 10px; border-radius: 6px; display: flex; align-items: center; justify-content: flex-start; padding: 2px; 
}

.specoptndropii input{
  display: none;
  }
.specradio-btnii {
margin: 0px 6px 1px 0px; width: max-content; height: 40px; display: flex;  align-items: center; justify-content: center; border-radius: 6px; padding: 10px 25px;
position: relative; text-align: center; cursor: pointer; background-color: #E4E6E9; min-width: 100px;
}
  .specradio-btnii p {
  font-size: 1rem; font-weight: 600;
  }
  .specoptndropii input:checked+ .specradio-btnii {
background-color: #00305C; color: #FFFFFF;
  }

.specoptndropii input:checked+ .specradio-btnii p {
 color: #FFFFFF;
  }

.homesearchformbottom {
width: 100%; overflow: visible;  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; padding: 15px; padding-bottom: 10px; 
background-color: #FFFFFF; box-shadow:  1px 1px 5px #00000023; border-bottom-right-radius: 16px; border-bottom-left-radius: 16px; padding-top: 20px;
}
.homesearchbox h1 {
  color: #FFFFFF; padding-bottom: 10px; width: 100%;
}

.form-group {
  width: 100%; height: max-content; padding-bottom: 10px;  padding-top: 5px; position: relative; overflow: visible;
}
.form-group-second {
width: 49%;
}
.form-group-label {
  font-size: 1rem; font-weight: 600;
}
.homeformput {
width:  100%; height: 50px; background-color: #FAFAFA; border: solid 1px #E4E6E9; font-size: 1rem; padding: 5px 10px; border-radius: 26px; color: #000000; 
font-weight: 600;
}
.homeformput  input {
  width: 100%;
}
.homeformput span {
font-weight: 600; font-size: 1rem;
}
.homeformput:hover, .homeformput :active {
border: solid 1px #B0B0B0; 
}
.homeformbtn {
width: 100%; height: 50px; background-color: var(--primary-color); color: #FFFFFF; border-radius: 26px; font-weight: 300; cursor: pointer; z-index: 99;
}
.homeformbtn:hover {
  background-color: var(--accent-color);
}
.suggestions {
  border-top: none; max-height: 150px; overflow-y: auto; background-color: #FFFFFF; position: absolute; width: calc(100% - 20px); max-width: 500px;
  border-radius: 2px;
}
.suggestions div {
padding: 10px; cursor: pointer; 
}
.formmoreclick {
width: 100%; height: max-content; padding-top: 10px; padding-bottom: 5px;
}
.formmorebtn {
border-radius: 4px; padding: 5px 20px; background-color: #E4E6E9;; width: max-content; display: flex; align-items: center; justify-content: center; border: 1px solid #E4E6E9; cursor: pointer;
}
.formmorebtn:hover {
  border: solid 1px #00305C;
}
.formmorebtn span {
  font-size: .9rem; color: #000000; font-weight: 600; padding-right: 5px;
}
.formmorebtn img {
  width: 12px; height: auto;
}
.morefilteroptionsbox{
width: 100%; height: max-content;  display: flex; flex-wrap: wrap;align-items: flex-start; justify-content: space-between; padding-top: 10px;
}
.mainscreentwo {
min-height: 200px;position: relative; overflow: visible; width: 100%; display: flex; align-items: center; justify-content: flex-start; flex-direction: column; padding-bottom: 0px;  
 padding: 50px 10px; 
}

.first_mainscreentwo {
background: linear-gradient(to bottom, #fff4d6 0%, #fdfdfd 25%, #fdfdfd 100%);
}

.third_mainscreentwo {
  background-color: var(--accent-color) !important; padding-top: 50px;
}
.mainscreentwoscreenone {
width: 100%; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; 
}
.mstboxtwointro {
   width: 100%; font-size: 3rem; padding-bottom: 20px;   width: 100%; text-align: center; font-family: fontone; text-transform: uppercase; font-weight: 700;
}
.mstboxtwointro_line {
  width: 150px; border-bottom: 1px solid var(--primary-color); margin-bottom: 20px;
}
.mstboxtwopara {
  width: 100%; font-size: 1.2rem; padding-bottom: 40px;   width: 100%; text-align: center; text-transform: uppercase; font-weight: 600; letter-spacing: 3px;
}

.mainscreenone_preview_box {
  width: 100%; height: auto; overflow-y: auto; padding-bottom: 50px;
}
.mainscreenone_preview_box_scroll {
  width: max-content; height: max-content; display: flex; align-items: start; justify-content: start;
}
.preview_carbox {
  width: 100%; height: max-content; position: relative; background-color: #FFFFFF; padding: 10px; border-radius: 10px; 
  border: solid 1px #F1F1F1;
}
.preview_carbox a {
  padding: 25px 10px !important;
}
.preview_carsboxmbhold {
  width: 100% !important; height: 250px !important; border-radius: 6px;  position: relative;
}
.preview_carsboxmbhold img {
 border-radius: 6px; 
}
.preview_carsboxdetail  {
  padding: 20px 5px !important; width: 100% !important;  padding-bottom: 10px;
}

.preview_carsboxdetail h2 {
  font-size: 1.2rem !important; font-weight: 500; line-height: 1.5rem; padding-bottom: 15px !important; color: #636363; width: 100% !important; 
  margin: 0%;
}

.preview_carspec {
  padding-bottom: 10px !important; border-bottom: 1px #F1F1F1 solid; margin-bottom: 15px !important;
}
.preview_properties p  {
  font-size: .8rem; color: #FFFFFF; padding: 6px 15px; border-radius: 26px; background-color: #001428; width: max-content;
}

.preview_carsboxdetail p img {
height: 20px; width: auto;
}
.preview_carsboxdetail h3 {
  font-size: 1.5rem !important; font-weight: 600; line-height: 1.5rem; padding-bottom: 10px; color: var(--primary-color);
}

.mstsobox {
width: 100%; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding:  70px 50px; position: relative;  border: solid 1px #E4E6E9;
margin-bottom: 20px;  background-color: #FFFFFF;  border-top-left-radius: 50%; border-top-right-radius: 50%;  box-shadow: 1px 1px  1px 1px #e4e6e95d;
}
.mstsobox a {
width: 100%; height: 100%; position: absolute; top: 0%; left: 0%; z-index: 1;
}
.mstsobox button {
 border-bottom: solid 2px var(--primary-color); padding-bottom: 4px;  display: flex; align-items: center; justify-content: center;  font-size: .9rem; 
  font-weight: 500;
}
.mstsoboxp {
font-size: 1.5rem; font-weight: 600; padding-bottom: 20px; color: var(--primary-color); text-align: center; font-family: fontone;
}
.mstsoboxpi {
font-size: .9rem; font-weight: 400; padding-bottom: 20px;  text-align: center;
  }

.mstsobox_img_box {
width: 120px; height: 120px;   background-color: var(--primary-color); margin-bottom: 40px; padding: 20px; border-radius: 100%;
display: flex; align-items: center; justify-content: center;
  }
.mstsobox_img_box img {
  height: auto; width: 70%; 
}
.blogsection {
  display: flex; align-items: center; justify-content: space-between;  flex-wrap: wrap;  padding: 50px 10px 40px 10px;  padding-bottom: 100px; 
}
.blogbox {
width: 100%; display: flex; align-items: center; justify-content: space-between; height: 150px; background-color: #FFFFFF ; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 5px; margin-bottom: 20px;
position: relative; 
}
.blogboxmg {
width: 30%; height: 100%; background-color: #fafafa; display: flex; align-items: center; justify-content: center;  
}
.blogboxmg img {
 height: 100%; width: auto; 
}
.blogboxdetail {
  padding: 12px; width: 70%;  padding-left: 15px; overflow: hidden;
}
.blogboxdetail h5 {
font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; color: #000B2F; max-height: 3rem; 
}
.blogboxdetail p {
  font-size: .9rem; font-weight: 300; padding-bottom: 10px; color: #6B6E74; max-height: 2.8rem; 
  }
  .blogboxlink {
    width: 100%; height: 100%; z-index: 9; position: absolute; top: 0%; left: 0%;
  }

.mainscreenfour {
display: flex;  align-items: center; justify-content: center; width: 100%; background-color: #E4E6E9; min-height: 300px; height: max-content; padding: 50px 20px 40px 20px; 
}
.mainscreenfoursect {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start;  padding: 0px;  width: 100% !important;
  }
.sectbox {
width: 100%; height: max-content;
}

.intro {
  color: #D11116; font-weight: 700; text-transform: uppercase; padding-bottom: 5px; font-size: .9rem;
}
.introheader {
  font-size: 3rem; font-weight: 600; padding-bottom: 20px; font-family: fontone; text-align: center; font-family: fontone;
}
.intropara {
font-size: 1rem; font-weight: 500; padding-bottom: 10px; text-align: center;  line-height: 2rem;  text-align: justify; 
}
.sectimg {
  width: 100%; height: auto;
}
.sectimgi {
  border-radius:  16px;
}
.sectbox-left {
 background-repeat: no-repeat; background-position: center; background-size: cover; padding-bottom: 40px; 
}
.sectbox-right {
display: flex; align-items: center; justify-content: center; flex-direction: column; 
}
.sectclick {
width: 190px; border: solid 2px var(--sec-shade-color); padding: 10px; height: 45px; border-radius: 40px; display: flex; align-items: center; justify-content: center; 
font-size: 1rem; color: var(--primary-color); font-weight: 600; background-color: var(--sec-shade-color); text-transform: uppercase; margin-top: 20px;
}
.new_search_box { 
display: flex; align-items: center; padding: 10px; justify-content: flex-start; flex-wrap: wrap; height: max-content; min-height: 50px; position: relative; padding-right: 24px;
}
.new_homeformput  {
height: 100%; padding: 5px 10px;  border: none !important; outline: none !important; width: max-content; min-width: 30%;  padding-left: 2px;
}
.picked_locations {
  padding: 6px 10px; background-color: #E4E6E9; color: #00305C; font-size: .9rem; font-weight: 600; margin-right: 5px; width: max-content; 
  display: flex; align-items: center; justify-content: center; border-radius: 16px;   padding-left: 6px;
}
.picked_locations span {
display: flex; align-items: center; justify-content: center;margin-right: 3px; cursor: pointer; font-size: 1rem; font-weight: 400; width: 20px; height: 20px;
color: #00305C; border-radius: 100%; border: solid 1px #00305c1f; padding: 2px; background-color: #00305c1a;
}
.clear_selection_onsearchbtn {
  width: 20px; height: 100%; display: flex; align-items: center; justify-content: center; position: absolute; right: 0%; padding: 5px; margin-right: 2px; cursor: pointer;
}
.clear_selection_onsearchbtn img {
width: 100%; height: auto;
}

/*------------------------------------------------------------------ Developments ------------------------------------------------------------------------*/
.hero-stats{
display:flex; flex-wrap:wrap; justify-content:center; gap:15px;
margin-top:40px; width:100%; max-width:900px;
}

.hero-stat{
background:rgba(255,255,255,0.12);
backdrop-filter:blur(10px);
padding:18px 22px;
border-radius:14px;
min-width:160px;
text-align:center;
border:1px solid rgba(255,255,255,0.15);
}

.hero-stat h3{font-size:1.8rem; color:#fff; margin-bottom:5px;}
.hero-stat p{font-size:.85rem; color:#fff;}

.development-stage-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:15px;
width:100%;
}

.stage-card{
background:#fff;
padding:20px;
border-radius:16px;
border:1px solid #E4E6E9;
text-align:center;
}

.stage-card h4{
color:var(--primary-color);
margin-bottom:8px;
}

.stage-card p{
font-size:.9rem;
font-weight:600;
}


@media (min-width: 700px)  { 
  .options-container {
      max-height: 255px;
  }
.preview_carbox {
  width: calc(30vw - 10px) ; margin-right: 20px; 
}


.carcollectionbox { width: 100%; } 
.box-section { width: 85%; } 
.form-group-second { width: 49%;}
.mstboxonebox { width: 49.5%; }
.blogbox { width: 49%;}
.sectbox-right {
  padding: 50px;  align-items: flex-start; padding-right: 0px;
  }
  .introheader {
   text-align: start;
  }
  .intropara {
  text-align: start;
  }
.mainscreenone {
  min-height: 100vh;  padding-top: 15vh; 
}
.mstsobox  {
  width: calc(33.3% - 20px); 
}

.specoptndrop  {
  width: max-content;
}
.specradio-btn {
  width: max-content;
}
.homesearchformtop {
  justify-content: flex-start;   width: max-content;
}
.specradio-btn {
 padding: 10px 25px;
}
}
@media (min-width: 1100px)  { 
.carcollectionbox { width: 70%; } 
.carfilterbox { width: 30%; padding-right: 40px;}
.box-section { width: 90%; max-width: 1200px; } 
.form-group  {width: 66%; }
.form-group-second { width: 24%;}
.sectbox {width: 50%; height: max-content; }
.mainscreenfoursecti {
  flex-direction: row-reverse; padding-top: 40px;
}
 .form-group-third { width:  33%;}
 .sectbox-left {
  padding: 40px 10px;
  }
 .mainscreenone {
min-height: 100vh;  padding-top: 40vh; padding-bottom: 20vh;
}
.homesearchformbottom {
  border-top-right-radius: 16px;
}
.mstboxonebox {
  width: 24.5%;
}
}
/* Mobile and smaller screens */
@media (max-width: 767px) {
  .box-section {
    width: 95%; /* For smaller devices, reduce the container width */
  }
}

/* Medium to large screens */
@media (min-width: 768px) and (max-width: 1199px) {
  .box-section {
    width: 85%;
  }
}

/* Large screens */
@media (min-width: 1200px) {
  .box-section {
    width: 90%;
    max-width: 1200px; /* Keep a fixed max-width */
  }
}

/* ------------------------------------------------------------------------------------------------------footer styling ------------------------------------------ */

.bottomcont {
width: 100%; height: max-content; display: flex;flex-wrap: wrap; flex-direction: column; background: var(--primary-color); align-items: center; padding: 60px 12px 0px 12px;
justify-content: flex-end;   min-height: 200px; 
}
.bottomtopsect {
width: 100%; display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; border-bottom: 1.5px solid #FFFFFF;  margin-bottom: 20px;
}
.btssocialbox {
width: max-content; height: max-content; display: flex; align-items: center; justify-content: center;
}
.btssocialbox a {
width: max-content; height: 40px; display: flex; align-items: center; justify-content: center;
}
.btssocialbox a img {
  height: 100%; width: auto;
}
#bottomsectlogo {
height: 40px; width: auto;
}
.bottomsectsearchlist {
width: 100%; display: flex; align-items: flex-start; height: max-content; justify-content: flex-start; padding-bottom: 30px; flex-wrap: wrap; 
max-width: 850px;
}
.bottomsectsearchlist a {
color: #E4E6E9 !important; font-size: .9rem; font-weight: 500;  padding: 5px; margin-right: 18px;  padding-left: 0%; 
}
.bottomsectsearchlist a span:hover {
 text-decoration: underline; color: #E4E6E9 !important;
}
.bottomsectsearchlist a span{
color: #FFFFFF !important; font-size: 1rem; font-weight: 500;  text-transform: uppercase;
 }
.bottomcontsect {
padding-bottom: 20px;
}
.bottomcontsectv {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; 
}
.bottomblock {
width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding-bottom: 40px;
}
#footer_title h1 {
margin-bottom: 5px; color: #FFFFFF; font-size: 1rem; font-family: fontone; font-style: italic; font-weight: 600;
} 
#footer_title span {
  color: #950101; font-size: 1.2rem; font-family: fontone; font-style: italic;
}

.footer_p {
  font-size: .9rem; color: #ffffff; padding-bottom: 10px; font-weight: 400;
}
.footer_menu {
display: flex; flex-direction: column; align-items: flex-start !important; justify-content: flex-start; 
}
.footer-menu-items {
  width: 100%; padding: 0px !important;  margin: 0% !important; height: max-content;
}
.footer-menu-items a {
text-align: left !important; color: #FFFFFF ;   font-weight: 400; margin: 0% !important; font-size: .9rem;  width: 100% !important;
padding-bottom: 5px !important;  padding-left: 0px !important; 
}
.footer_heading {
  font-size: 1.1rem; font-weight: 600; padding-bottom: 5px;  color: var(--sec-shade-color) ;  width: 100%; text-transform: uppercase; padding-top: 20px;
}

#pyrextag {
width: 50%; height: auto;  position: relative; 
}


#pyrextag img {
  width: 100%; height: auto; 
 }
@media (min-width: 700px)  { 
  #pyrextag  {width: 25%;}
  .bottomblock {width: 30%; padding-bottom: 10px;}
  
  #bottomsectlogo  {
    height: 50px;
  }
}
@media (min-width: 1200px)  {
  #pyrextag  {width: 16%;}
  .bottomblock {
    width: 21%; padding-right: 20px;
  }
  .bottomblock-first {
    width: 35%; padding-right: 40px;
  }
  .footer_p {
    max-width: 300px;
  }
 }

/*  ------------------------------------------------------------------------------- listing styling ---------------------------------------------------------- */

.carcollectionbox {
width: 100%; height: max-content; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; justify-content: flex-start; 
}

.listingmain {
padding: 20px 20px 50px 20px; 
}
.listingmainintro {
  width: 100%; margin-bottom: 20px; font-weight: 400; text-align: start; font-size: 3rem; font-weight: 600;  line-height: 2.2rem;
  padding-bottom: 20px;
}
.listingmainintro span {
   font-size: 1.15rem; font-weight: 500; color: var(--accent-color);  line-height: 1rem; 
}
.listview_adbox_hold { 
width: 100%; padding-top: 20px;
}
.listview_adbox {
width: 100%; height: max-content; padding: 5px; border-radius: 10px; border: solid #E4E6E9 1px; background-color: #FFFFFF; margin-bottom: 50px;
position: relative;
}
.listview_adbox img {
  width: 100%; height: auto; border-radius: 5px;
}
.listview_adbox a {
width: 100%; height: 100%; position: absolute; z-index: 4; top: 0%; left: 0%;
}

#collectionmainscreen {
min-height: 100vh;
}
.collection-header {
font-size: 2.2rem; padding-bottom: 20px; width: 100%; font-weight: 600;
}
.collection-resultbox {
width: 100%; padding: 10px 15px; background-color: #FFFFFF; margin-bottom: 30px; border-radius: 10px; border: solid #E4E6E9 1px;
}

.sortbylnkbox {
width: 100%; padding: 10px 20px; border-radius: 6px; color: #000000 !important; border: solid 1px #E4E6E9; margin-bottom: 10px; position: relative;
background-color: #FAFAFA;
}
.sortbylnkbox span {
  color: #000000 !important; font-size: .9rem; font-weight: 400;
}
.sortbylnkbox  a {
position: absolute; top: 0%; width: 100%; height: 100%; z-index: 7; left: 0%;
}
.carfilterbox {
  width: 100%;   border: none !important; padding-bottom: 30px;
}
.property-sort-box {
  width: 100%; background-color:  #FFFFFF;  height: max-content; padding: 30px 10px 20px 10px; border-radius: 10px; display: flex; flex-direction: column; 
  justify-content: space-between; align-items: flex-start; border: solid #E4E6E9 1px; margin-bottom: 20px;
}
.propertyfilterput {
width: 100%; height: 45px; border-radius: 5px; border: solid 1px #E4E6E9; background-color: #F1F4F5; font-size: .9rem; padding: 5px 10px; margin-bottom: 10px;
}
.shortput {
  width: 49% !important;
}
.carfilterput:hover, .carfilterput:active {
  border: solid 1px #E4E6E9 !important;
}

.multi-filter-box{
    padding:15px; width: 100%;
}

.filter-group-title{
    font-weight:600;
    font-size:14px;
    margin:15px 0 10px;
    color:#222;
}

.filter-option{
    display:flex;
    align-items:center;
    gap:10px;
    padding:6px 0;
    cursor:pointer;
    font-size:14px;
    color:#333;
}

.filter-option input{
    width:16px;
    height:16px;
    accent-color:#098551;
}
.filter-submit-box{
    margin-top:15px;
    padding-top:10px;
    border-top:1px solid #eee;
}

.filter-submit-btn{
    width:100%;
    padding:10px 12px;
    background: var(--primary-color) ;
    color:#fff;
    border:none;
    border-radius:6px;
    font-size:14px;
    cursor:pointer;
    transition:0.2s ease;
}

.filter-submit-btn:hover{
    background:#076b41;
}

.filter-guide-box{
    display:flex;
    flex-direction:column;
    gap:10px;
}

/* CARD */
.guide-item{
    background:#f7f7f8;
    border:1px solid #e9e9ee;
    border-radius:12px;
    padding:12px 14px;
    position:relative;
    overflow:hidden;
    transition:0.2s ease;
}

/* subtle hover */
.guide-item:hover{
    transform:translateY(-1px);
    border-color:#dcdce5;
}

/* LEFT COLORED STRIP (LEVEL INDICATOR) */
.guide-item::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:5px;
    height:100%;
}

/* HEAD */
.guide-head{
    font-weight:600;
    font-size:13px;
    margin-bottom:4px;
    color:#222;
}

/* TEXT */
.guide-text{
    font-size:12px;
    color:#555;
    line-height:1.4;
}

.level-1::before{background:#6c757d;}
.level-2::before{background:#0d6efd;}
.level-3::before{background:#20c997;}
.level-4::before{background:#fd7e14;}
.level-5::before{background:#dc3545;}
.level-6::before{background:#198754;}
.level-7::before{background:#6610f2;}

#filter-button, #filter-button-edit {
  width: 100%; background-color: #2C3E50; color: #FFFFFF; font-size: 1rem; height: 45px; border-radius: 10px; margin-top: 10px;
}

.filtertop.active {
    background: #f5f5f5;
}
.make-wrapper {
width: 100%; height: max-content;  border: solid 1px #F5F5F5; padding: 10px; border-radius: 2px; margin-bottom: 10px; background-color: #FAFAFA;
}

.parent-checkbox {
  display: block; padding-left: 10px; margin-bottom: 5px; font-weight: bold; cursor: pointer; padding-top: 10px;
}

.child-checkboxes .custom-checkbox {
  display: block; padding-left: 30px;  margin-bottom: 5px;
}

.child-checkboxes {
  margin-bottom: 10px;
}

.custom-checkbox input,
.parent-checkbox input {
  position: relative;
  margin-right: 10px;
}

.emptycarbox {
width: 100%; height: max-content; display: flex; align-items: center; justify-content: center; padding: 50px 20px 50px 20px; display: flex; align-items: center; justify-content: center;
min-height: 300px; flex-direction: column;  border-radius: 10px; border: solid 1px #E4E6E9;
background-color: #ffffff;
}
.emptycarbox h2 {
  color:  var(--primary-color); font-size: 1rem; padding-bottom: 20px; font-weight: 600; width: 100%;
  max-width: 500px;
}
.emptycarbox h2 span {
  color:var(--sec-shade-color); font-size: .9rem;  font-weight: 600;
}
.emptycarbox img {
  width: 100%; height: auto; max-width: 500px;
}
 .emptycarbox ul {
width: 100%; padding: 10px; max-width: 500px; padding-top: 0px;
 }
  .emptycarbox ul li{
  color:var(--text-color); font-size: .9rem;  font-weight: 500; width: 100%; 
 }
.filtertop {
 background-color: #FFFFFF; width: 100%; margin-bottom: 5px; padding: 10px; border-radius: 10px;  display: flex; justify-content: space-between; align-items: center; 
 cursor: pointer; border: solid #E4E6E9 1px;
}
.filtertop span {
  font-size: .9rem; color: #000000; font-weight: 600;
}
.filtertop img {
  width: 20px; height: auto;
}
.filter-group {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
}
.business_description {
font-size: .9rem;  display: flex;  overflow: hidden; text-overflow: ellipsis; margin-bottom: 20px
}
.business_title {
  font-size: 2rem; padding-bottom: 10px;
}

.pagination-box{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin:30px 0;
    justify-content:center;
}

.page-btn{
    padding:8px 12px;
    border-radius:8px;
    background:#f3f4f6;
    color:#111;
    font-size:13px;
    text-decoration:none;
    border:1px solid transparent;
}

.page-btn:hover{
    background:#e5e7eb;
}

.page-btn.active{
    background:#111827;
    color:#fff;
}

@media only screen and (max-width: 800px) {  #filter-container {display: none;}}
@media (min-width: 800px)  {  .carcollectionbox { width: 100%; } .emptycarbox img {max-width: 300px;} #filter-container {display: flex;} }
@media (min-width: 1200px)  {
  
.carcollectionbox { width: 60%; } 
.carfilterbox { width: 30%; padding-right: 30px;  border: solid #d3d2d2 1px;}
.newarrivalcarbox { width: 23% !important; } 
.listview_adbox_hold{ 
width: 20%; padding-left: 30px;  padding-top: 5px;
}
}

/* ------------------------------------------------------------------------------------- Agent Listing  ----------------------------------------------------------*/

.agentsearchboxhold {
width: 100%; height: max-content; display: flex; align-items: center; justify-content: center; padding: 160px 20px 40px 20px;  overflow: visible; 
background-color: var(--primary-color); z-index: 99;
}
.agentsearchboxholdii {
background-image: url(../IMG/agent45.jpg); padding-top: 220px; z-index: 99;
}
.agentsearchboxhold_business {
background-image: url(../IMG/business45.jpg); padding-top: 220px; z-index: 99;
}
.agentsearchboxholdsection {
  overflow: visible; box-shadow: none !important; width: 100%; display: flex; align-items: center; justify-content: center;
}
.agentsearch_btn {
  background-color: #098551 !important;
}
.rentbuyoptboxxi {
margin-bottom: 0%; border-radius: 16px; width: max-content; padding: 10px; height: max-content; border-bottom-left-radius: 0%; border-bottom-right-radius: 0%;
background-color: #E4E6E9;
}
.agentlistscreen {
display: flex; justify-content: center !important;
}
.agentsearchform {
border-radius: 26px; overflow: visible;  z-index: 8; box-shadow: none !important; 
}
.secondmain {
  padding-top: 30px !important;
}
.oversearchboxhold {
overflow: visible; padding: 15px; border-radius: 16px; 
}
.oversearchboxholdii {
border-top-left-radius: 0%;
}
.searchseparatebox {
  width: 100%; display: flex; justify-content: space-between; align-items: center; background-color: #FAFAFA; padding: 10px ; border-radius: 5px;
   margin-bottom: 5px; overflow: visible;
}
.agentboxdetailsbox h3 {
  font-size: 1.3rem; color: #025BD9; font-weight: 600; padding-bottom: 15px;
}  
.agentboxdetailsbox h6 {
  font-size: .9rem !important; color: #393E46 !important; font-weight: 400 !important; line-height: 1.4rem;
} 
.agentbox {
width: 100%; display: flex; flex-wrap: wrap; align-items: flex-start;  min-height: 200px;  padding: 12px; justify-content: center; background-color: #FFFFFF;
height: max-content;  border-radius: 5px; border: solid 1px #e4e6e9; margin-bottom: 30px; position: relative;
}
.agentboxmg {
  height: 300px; width: 300px; border-radius: 100%; object-fit: cover; margin-right: 10px; background-color: #F1F1F1; margin-bottom: 30px;
}
.agentboxdetailsbox {
width: 100%; height: max-content;
}
.agentreachbox {
 justify-content: space-between !important; padding: 0px !important; padding-top: 50px !important; height: max-content !important;
} 
.agentboxlocate {
padding-bottom: 15px;
}

@media (min-width: 800px)  {
 .agentbox{ justify-content: space-between; }
.agentboxdetailsbox {
width: calc(100% - 210px ); padding: 20px 10px;
}
.agentboxmg { margin-bottom: 0px;}
.agentreachbox {
justify-content: flex-start !important; padding: 0px !important; padding-top: 20px !important; 
} 
.agentreachboxlnk {
  margin-right: 12px;
}
.agentboxmg {
  width: 200px; height: 200px;
}

}
/* ---------------------------------------------------------------- bond originators  ----------------------------------------------------------------- */
.sectiononetest {
  display: flex; flex-direction: column; align-items: center;
}
.boscreenone {
  padding-top: 70px; 
}
.boscreentwo {
  width: 100%; height: max-content; background-color: #FFFFFF; box-shadow:  1px 1px 5px #00000011; border-radius: 10px;
}
#bondOriginatorForm {
width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: self-start; padding: 40px 20px;
}
.contsbtn {
  background-color: var(--primary-color) !important; font-weight: 600; color: #FFFFFF; font-size: .9rem !important; margin-top: 17px !important; border-color: var(--primary-color) !important;
}

.success-message {
text-align: center; padding: 40px; border-radius: 10px; margin-top: 20px; min-height: 400px; display: flex; flex-direction: column; align-items: center; justify-content: center;
}

.success-image {
  max-width: 300px; height: auto; margin-bottom: 20px; width: 100%;
}

.success-message h3 {
color: #000B2F;  padding-bottom: 15px; font-size: 1.8rem; font-weight: 700;
}

.success-message p {
  font-size: .9rem; color: #0A0B0D; font-weight:400; max-width: 450px;
}

/* ---------------------------------------------------------------- item styling ----------------------------------------------------------------- */

.carbox {
width: 100%; height: max-content; padding: 0px; padding-bottom: 20px; background-color: #FFFFFF; margin-bottom: 20px; border-radius: 10px; position: relative; 
box-shadow: 1px 1px 4px #E4E6E9;display: flex; flex-wrap: wrap; position: relative; overflow: visible; border: solid 1px #e4e6e9;
}
.carboxdelbtn {
position: absolute; z-index: 98; top: -5%; right: 0%; width: 30px; height: 30px; color: #FFFFFF; border: solid 1px #e4e6e9;  display: flex; align-items: center; justify-content: center; border-radius: 100%;
}
.carboxdelbtn img {
width: 100%; height: auto;
}
.carboxdelbtn:hover {
  border-color: #098551; background-color: #ACD0A0; cursor: pointer;
}
.carboxlink {
  position: absolute; top: 0%; left: auto; width: 100%; height: 100%; z-index: 9; padding: 10px;
}
.item_tag_box {
width: max-content; height: max-content; border-radius: 6px; max-width: 120px; background-color: #FFFFFF;
}
.stage_level  {
text-align: center; padding: 5px 10px; font-size: .9rem; text-transform: uppercase; color: #FFFFFF;  white-space: nowrap;
}
.item_tag_box p {
 text-align: center; padding: 4px 10px; text-transform: capitalize; font-size: .8rem;
}
.carsboxmbhold {
width: 100%; height: 180px; background-color: #FAFAFA; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 10px;
margin-bottom: 10px;
}
.carsboxmbhold img {
width: 100%; height: max-content; min-height: 100%;
}
.caryear {
color: #808080; font-size:  .9rem; font-weight: 500; margin-bottom: 8px;
}
.cartitle, .dev-price{
font-size: 1rem; margin-bottom: 10px; max-height: 3.2rem;  font-weight: 500; 
}
.carspec {
width: 100%; display: flex; padding: 5px 10px 5px 0px; align-items: center; justify-content: flex-start; margin-bottom: 10px; margin-bottom: 10px;
 }

.carprice, .dev-title  {
font-size: 1.5rem; font-weight: 600; margin-bottom: 10px; 
}
.car_desc {
  font-size: .8rem; font-weight: 400; color: #76808f; margin-bottom: 10px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.carspec li {
font-size: 1rem; margin-right: 5px; color: #808080; list-style: none; font-weight: 500; text-transform: capitalize; display: flex; align-items: center; justify-content: flex-start; padding-right: 20px;
}
.carspec li  img {
  height: 16px; width: auto; padding-right: 5px;
}
.carspecfirst {
  color: #D11116 !important; font-weight: 600;
}
.carboxlocate {
  color: #0052FF; font-size: .9rem; display: flex; align-items: center; justify-content: flex-start; 
}
.carboxlocate img {
  width: 16px; height: auto; margin-right: 5px;
}

/*-------------Development item styling ----------------*/

.dev-boxlocate {
font-size: .94rem; margin-right: 5px; color: var(--text-color); font-weight: 500; text-transform: capitalize; display: flex; align-items: center; justify-content: flex-start; 
padding-bottom: 6px;
}
.dev-title {
  margin-bottom: 6px;
}
.dev-price {
  font-size: 1.4rem; font-weight: 700; margin-bottom: 10px;
}
.dev-spec {
  width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; border-top: solid 1px #F1F1F1; padding-top: 10px;

}
.dev-spec div{
width: calc(40% - 6px);
}
.dev-spec div p { 
font-size: 1rem; color: var(--text-color); padding-bottom: 2px; width: 100%; font-weight: 500;
}
.dev-spec div span{
font-size: 1rem; color: var(--primary-color); width: 100%; font-weight: 600;
}

@media (min-width: 700px)  {  
  .carbox { width: 100%;}  
}

  @media (min-width: 900px)  {  
    .carsboxmbhold {
      width: 45%; margin-bottom: 0%; height: 230px;  padding: 0%; margin: 0%;  border-top-right-radius: 0%; border-bottom-right-radius: 0%;
    }
    .carsboxdetail {
      padding: 20px; width: 55%;
    }
    .carbox { width: 100%; padding-bottom: 0px;}  
  }
  .iagentboxdetailsbox {
    width: 100% !important;
  }

/* ------------------------------------------------------------------------------  viewmain styling ----------------------------------------------------- */

#viewmain {
border-top: none; padding: 0px; padding-top: 50px;
}
.viewsection {
display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; 
}
.viewboxsections {
width: 100%; padding-bottom: 20px;
}

.basicinfobox {
  width: 100%; display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; padding: 0px; border: 1px #E4E6E9 solid;
  border-radius: 16px; margin-bottom: 20px;
  
}
.basicinfobox li {
display: flex; align-items: center; justify-content: start;  padding: 10px 20px; border: 1px #E4E6E9 solid; width: 50%;  
flex-wrap: wrap;
}
.basicinfobox li p {
  width: 100%; font-size: .9rem; padding-bottom: 5px; color: #808080;
}
.basicinfobox li img {
  width: 20px; height: auto; margin-right: 10px;
}
.basicinfobox li span {
  font-size: 1rem; font-weight: 600; text-transform: capitalize;
}

.detailinfobox {
padding: 10px 15px; width: 100%; height: max-content;
}
#itemdetailingbox {
 width: 100% !important; padding: 0px !important; background-color: #FFFFFF  !important; border: solid 1px #e4e6e9; border-radius: 16px;  margin-bottom: 20px;
 padding-top: 10px !important;
}

#itemdetailingboxone  {
width: 100%; height: max-content; display: flex; align-items: center; justify-content: space-between; 
}

#viewitemname {
font-size: 1.5rem; padding-top: 3px; padding-bottom: 2px; font-weight: 600; padding-right: 10px;
}

#itemshowbox{
width: 100%; height: max-content; overflow-x: hidden !important; position: relative; display: flex; align-items: center; justify-content: center; padding: 0px !important; 
flex-direction: column; background-color:  #FFFFFF  !important; margin-bottom: 20px; border: solid 1px #e4e6e9; border-radius: 16px; 
padding-top: 0px !important; 
}
.viewinitialimg {
width: 100%; height: 250px;  display: flex; align-items: center; justify-content: center; margin: 10px; padding: 10px; padding-bottom: 0%; 
}
.viewinitialimg img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 16px; padding-bottom: 0% !important; margin-bottom: 0% !important;
}

#sideshowbox {
display: flex;  align-items: center; justify-content: center; width: 100%; height: 300px;  position: relative;  overflow-x: hidden !important; 
border-radius: 16px !important; background: #FAFAFA; 
}

.first_picture_show-box {
position: fixed; z-index: 999; top: 0%; height: 100vh;  left: 0%; width: 100%; display: none; align-items: center; justify-content: start;
background-color: #0f393bb0; padding: 0px;  flex-direction: column;
}

.first_picture_show-box_top {
width: 100%; min-height: 100px; background-color: var(--primary-color); padding-top: 130px; margin-bottom: 20vh;
display: flex; align-items: center; justify-content: center;
}
.view_show-box_top {
padding: 10px 0px;
}
.view_show-box_top button {
  width: 24px; height: 24px; padding: 5px; background-color: #144244; border-radius: 100%;  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.view_show-box_top button img {
  width: 100%; height: auto;
}
.itempreviewmg {
height: 100% !important; width: 100% !important; border-radius: 16px; display: none; position: absolute;  bottom: 0%; object-fit: contain; padding: 8px; 
}
.viewpicktxt {
color: #000000; font-weight: 400; font-size: 1rem; padding-bottom: 20px;
}

#prev, #next{
position: absolute; bottom: 0%; padding: 5px; background-color: transparent; border-radius: 3px; 
width: 40%; height: 100%;  display: flex; align-items:flex-end; justify-content: center; margin-bottom: 12px;
}
#prev:active,#next:active {
opacity: 1; cursor: pointer; transform: scale(1);
}
#prev {
left: 0%;
}
#next {
right:0%;
}

#prev img, #next img{
width: 35px; height: 35px; padding: 8px; border-radius: 100%; background-color: #0f393ba1; border: solid 1px var(--primary-color);
}

.deskimgsel {
  width: 100%; height: max-content; display: flex; flex-wrap: wrap; align-items: center; padding: 10px; justify-content: space-between;
  }
  .deskpreviewmg {
  width: calc(50% - 5px); height: 135px; margin-bottom: 15px; background-color: #FAFAFA;  min-width: 50px;  border-radius: 8px; object-fit: cover;
   cursor: pointer;
  }

#vehicledetails {
  font-size: 1.1rem; margin-top: 20px; font-weight: 600;
}
table {
  width: 100%; border-collapse: collapse; margin: 20px 0;  font-size: 1rem; text-align: left;
}
table th, table td {
  padding: 10px; border-bottom: 1px solid #ddd;
}
table th {
  background-color: #f2f2f2;
}
table tr:nth-child(even) {
  background-color: #f9f9f9;
}
table tr:nth-child(odd) {
  background-color: #ffffff;
}
table tr:hover {
  background-color: #e0e0e0;
}

#itemdetailingbox {
width: 100%; padding: 10px; height: max-content; padding-top: 0px;
}
#view-price {
font-size: 1.5rem; font-weight: 500; color: var(--primary-color); font-family: fonttwo; padding-bottom: 10px;
}

.itemdesribtionboxone {
position: relative; width: 100%; height: max-content;
}
#idb-description {
font-size: 1rem; padding-top: 10px; color: #6B6E74; font-weight: 400; height: max-content; max-height: 5.1rem;   margin-bottom: 10px;
}

#viewseemore {
text-align: left; z-index: 9; height: max-content; width: max-content; padding: 5px 0px 5px 0px; color: #76808f;
font-size: .9rem; font-weight: 500; padding-top: 10px; text-decoration: underline; 
}

.deskviewreach {
width: 100%; height: max-content; overflow: hidden; border-radius: 5px;
}
.deskviewreachtop {
padding: 10px 15px ; background-color: var(--primary-color); display: flex; align-items: center; justify-content: center;
}
.deskviewreachtop img {
  height: 65px; width: 65px; border-radius: 100%; border: solid 2px var(--shade-color);  object-fit: cover; margin-right: 10px;
}
.deskviewreachtop p {
width: calc(100% - 78px); font-size: 1.1rem; color: #FFFFFF; text-transform: capitalize;
}
.deskviewreachtop p span{
 font-size: .9rem; color: #F5F5F5; text-transform: uppercase; font-weight: 600;
}
.deskviewreachform {
padding: 25px 10px 30px 10px; background-color: #FFFFFF;   border-radius:  6px; margin-bottom: 20px;
}
.viewformbox {
width: 100%;  height:max-content; padding-bottom: 20px;
}
.deskviewreachppbox {
  width: 100%; height: 200px; border-radius: 6px; display: flex; align-items: center; justify-content: center; padding: 10px ;
}
.deskviewreachppbox img {
  height: 100%; width: auto; border-radius: 3px;
}
.deskviewreachcontactbox {
  width: 100%; border-radius: 6px; background-color: #FFF; height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 20px 10px;
  margin-bottom: 10px;
}
.drcboxlnk {
height: 30px; width: max-content; padding: 8px 20px; display: flex; align-items: center; justify-content: flex-start; background-color: #F5F5F5; border-radius: 6px;
border: solid 1px #E4E6E9;
}
.drcboxlnk:hover {
  background-color: #f1f1f1;
}
.drcboxlnk  img {
  height: 100%; width: auto; margin-right: 6px;
}
.drcboxlnk  span {
  font-size: .9rem; font-weight: 600; color: #1C274C !important;
}

.viewreachput {
  width: 100%; border: solid 1px #E4E6E9; background-color: #FAFAFA; border-radius: 5px; padding: 5px 10px; height: 40px; margin-top: 5px; font-weight: 500; 
  font-size: .9rem; color: #393E46;
}
.viewformlabel {
 font-size: .8rem; font-weight: 500; color: #76808f;
}
#message {
  height: 120px !important;
}
.viewformbutton {
  width: 100%; padding: 10px; height: 45px; border-radius: 5px; color: #FFFFFF; background-color: var(--primary-color) !important; margin-bottom: 20px;
}
.viewformterms {
  font-size: .9rem; color: #808080;
}
.viewformterms a {
  color: #00305C; text-decoration: underline; font-weight: 500;
}

.morelistingbox {
width: 100%; background-color: #FFFFFF; border-radius: 5px; padding: 30px 10px;  margin-bottom: 20px;
}
.morelistingbox p {
padding-bottom: 20px; font-size: 1.2rem; font-weight: 600;
 }
.similarlistingbox {
display: flex; align-items: flex-start; justify-content: flex-start; height: 95px; border-bottom: solid 1px #F1F1F1; border-top: solid 1px #E4E6E9; margin-bottom: 10px; position: relative; width: 100%;
}
.similarlistingboximgbx {
width: 40%; height: 100%;   display: flex; align-items: center; justify-content: center;
}
.similarlistingboximgbx img {
  width: 100%; height: max-content; min-height: 100%;
}
.similarlistingboxdetail  {
  padding: 10px; width: 70%; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
}
.slbdp {
  font-size: 1rem; color: #00305C; font-weight: 600; padding-bottom: 5px !important;
}
.slbdv {
font-size: 1rem; color: #000; font-weight: 600; padding-bottom: 5px !important;
}
.similarlistingboxlink {
  position: absolute; width: 100%; height: 100%; z-index: 999;
}

.share-buttons {
  display: flex;
  gap: 0.5rem;
}
.share-btn {
width: max-content; height: 40px; margin-right: 15px; cursor: pointer;
}
.share-btn img{
height: 100%; width: auto;
}
.share-btn:hover {
  background: #ccc;
}

.view_suggestion_tab {
width: 100%;  border-bottom: solid 1px #F5F5F5; position: relative; height: max-content; padding: 10px 5px;
font-weight: 1.1rem; color: #00305C;
}
.view_suggestion_tab:hover {
  background-color: #FAFAFA;
}
.view_suggestion_tab a {
 width: 100%; position: absolute; top: 0%; left: 0%; z-index: 7; height: 100%;
}
.view_bond_calculator_box {
width: 100%; border: solid 1px #E4E6E9; border-radius: 10px; padding: 15px 10px; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
}
.view_bond_calculator {
width: 100%; height: max-content; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; padding: 10px;
}
.view_bond_calculator_result_box {
width: 100%;   height: max-content;
}
.view_bond_result_sect {
padding: 10px ;  border-bottom: 1px #E4E6E9 solid;
}
.view_bond_result_sect_intro {
width: 100%; font-size: .9rem;   padding: 0% !important; margin: 0% !important; padding-bottom: 8px !important; font-weight: 400 !important;
}
.view_bond_result_sect_amount, .view_bond_result_sect_amount span {
font-size: 1.5rem; font-weight: 600;  padding: 0% !important; margin: 0% !important; font-family: fontthree !important;
}
.monthly_repayments_sect {
background-color: #FAFAFA; padding: 20px 10px; margin-bottom: 10px !important; color: #FFFFFF; background-color: #001428; border-radius: 10px;
}

.access-lock-card{
    width: 100%;
    max-width: 540px;
    margin: 40px auto;
    padding: 30px;

    display: flex;
    gap: 18px;
    align-items: flex-start;

    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: 20px;

    box-shadow: 0 12px 35px rgba(0,0,0,0.07);
}

.access-lock-icon{
    width: 56px;
    height: 56px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f5f6f8;
    border-radius: 14px;
}

.access-lock-icon img{
    width: 24px;
    height: 24px;
    opacity: 0.9;
}

.access-lock-body{
    flex: 1;
}

.access-lock-title{
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 6px 0;
    color: #111;
}

.access-lock-text{
    font-size: 14px;
    line-height: 1.6;
    color: #555;
    margin: 0 0 16px 0;
}

.access-lock-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 11px 18px;
    border-radius: 12px;

    background: var(--primary-color);
    color: #fff;

    font-size: 14px;
    font-weight: 500;
    text-decoration: none;

    transition: 0.2s ease;
}

.access-lock-btn:hover{
    background: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(9,133,81,0.25);
}

@media (min-width: 700px)  {
.view_bond_calculator {
width: calc(50% - 5px); border-right: 1px #E4E6E9 solid;
}
.basicinfobox li {
  width: 25%;
}
#itemshowbox {
display: flex !important; align-items: center; justify-content: space-between; flex-direction: row !important; height: 40vh;
}
.view_bond_calculator_result_box {
width: 50%;
}
#sideshowbox {
width: calc(60% - 5px) !important; height: 450px !important; padding-bottom: 0%; margin-bottom: 0%;
}
.first_picture_show-box_top {
padding-top: 120px;  margin-bottom: 30px;

}
.viewinitialimg {
width: calc(50% - 5px); height: 292px;  border-radius: 10px; padding: 10px 0px 0px 10px; margin: 0% ;
}
.viewinitialimg img  {
border-radius: 10px;
}
.deskimgsel {
  width: 50%; padding-right: 0%; padding-bottom: 0%;
}
}
/* ------------------------------------------------------------------------------------------------------ About styling ------------------------------------------ */

.aboutintro {
  padding-bottom: 10px; font-size: 1.5rem; font-family: fontone;
}
.about-section {
  min-height: 400px; padding-bottom: 30px ;
}
.aboutsecttwo {
  padding: 0px 20px 0px 20px !important; min-height: max-content;
}
.aboutsectii {
  padding-top: 40px ;
}
.aboutpara {
  padding-bottom: 40px !important; font-size: 1rem;
}


@media (min-width: 700px)  { 
  #viewmain {
    display: flex; justify-content: space-between; align-items: flex-start; height: max-content;
    }
    
    #itemshowbox{
    width: 100%; height:max-content; overflow-y: auto; overflow-x: hidden; padding: 0px 10px; flex-direction: column; align-items: flex-start;
    justify-content:flex-start; 
    }
    #sideshowbox {
    width: 100%; height: 48vw; display: flex;  justify-content: center; flex-wrap: wrap; align-items: flex-start; left: 0%;
    }
    .itempreviewmg {
    height: 100%; width: auto;
    }
 }
@media (min-width: 1200px)  {
  #itemshowbox{
  width: 100%; overflow-y: auto; overflow-x: hidden;  padding: 0px !important; 
  }
  .viewboxsections {
    width: 70%; height: max-content; 
    }
    .viewsidebarbox {
    width: 30%; height: max-content;  padding: 10px; padding-top: 0px; 
    }
      .deskviewprice {
      width: 100%; border: solid 1px #E4E6E9; background-color: #FFFFFF; border-radius: 5px; padding: 15px;
      }
    #itemshowbox{
    width: 100%; overflow-y: auto; overflow-x: hidden;  padding: 0px !important; 
    }
    .idb-recomendbox {
    width: 50%; height: 100vh;  overflow-y:auto; display: inline; padding: 10px 0px 100px 2vw; 
    }
    
    #sideshowbox {
    width: 100%; height: 75vh; display: flex;  justify-content: center; flex-wrap: wrap; align-items: flex-start; padding: 0% !important; margin: 0% !important; left: 0%;
    }
 }


@-webkit-keyframes spin {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
@keyframes spin {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}

/* ------------------------------------------------------------------------ Join Login styling ----------------------------------------------------------------------------------------------*/

.small-mid-box {
width: 100%; height: max-content; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
}
.join-login-option-box {
width: 100%; max-width: 350px; display: flex; flex-direction: column;  align-items: center; justify-content: center; background-color: #f8fbfd;
height: max-content; position: relative; border-radius: 10px; border: solid 1px hsl(207, 88%, 78%); padding: 50px 20px; margin: 10px;
}
.join-login-option-box:hover {
  background-color: #eff7ff;
}
  
.join-login-option-box a{
position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; z-index: 12;
}

.join-login-option-box img {
height: 60px; width: auto; margin-bottom: 20px;
}


.join-login-option-box p {
font-size: 1.4rem; font-weight: 600;
}

@media (min-width: 700px)  {
.small-mid-box {
height: 60vh; 
}
.join-login-option-box {
width: 100%; max-width: 350px;  padding: 50px 20px; 
}
  
}

/* ------------------------------------------------------------------------ login styling ----------------------------------------------------------------------------------------------*/
.login_main {
position: relative; background-color: var(--primary-color) !important; min-height: 100%;  height: max-content;   overflow: hidden;
}


#lgnmain { 
display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 50px;  background-color: transparent !important; max-width: 790px;
}

#lgnmain p {
font-size: .9rem; color: #808080; 
}
.putbox,.signputbox {
width: 100%; height: 50px; margin-top: 10px;border-radius: 10px;
display: flex; justify-content: center;align-items: center; position: relative; 
}
#loginform,#signupform {
width: 100%; height:max-content; padding: 20px; background-color: #FFFFFF; border-radius: 16px; display: flex; flex-direction: column;
align-items: center; justify-content: center;  border: solid 1px #E4E6E9; 
}
#loginform p ,#signupform p {
padding-bottom: 20px;  width: 100%; text-align: center;
}
#loginform h1 ,#signupform h1 {
font-size: 2rem; padding: 10px; width: 100%; text-align: center;
}
.loginformput,.signupformput {
width: 100%; height: 100%; border: #A8BAC1 solid 1px; border-radius: 26px; padding: 10px 20px; font-size: .9rem;
}
#loginformbtn,#signupformbtn {
width: 100%; height: 50px; color: #FFFFFF !important; background-color: var(--primary-color); font-size: .9rem;
border-radius: 26px; margin-bottom: 20px; margin-top: 30px; cursor: pointer;
}
#recvbtn,.clrformbox {
  width: 100%; 
}
#recvbtn,.clrformbtn {
width: 100%; height: 40px; color: #FFFFFF !important; background-color: #000000; font-size: .9rem;
border-radius: 10px; margin-bottom: 20px; margin-top: 30px; cursor: pointer;
}

.passeyebox {
position: absolute; width: max-content; height: max-content;right: 3%; display: flex; 
justify-content: center; align-items: center; z-index: 9; padding: 2px;
}
.passeyebox:active{
transform: scale(.96);
}
.passeyebox img {
width: auto; height: 24px;
}

#recoverpass {
width: 100% !important; text-align: end !important; color: #808080 !important; font-size: .9rem; font-weight: 590;
padding: 4px;
}

#tosignup span{
color: #098551 !important; text-decoration: underline; font-weight: 900;
} 
#tosignup {
width: 100%; color: #000000 !important; font-size: .9rem; padding: 4px;
}

.ls-box {
width: 100%; height: max-content; display: flex; border-radius: 16px; background-color: #FCEBEC; align-items: center; justify-content: flex-start;
}
.ls-box  img {
width: 20px; height: 20px; margin: 5px;
}
.ls-box span {
font-size: .8rem; padding: 5px; width: max-content; text-align: left; font-weight: 600;
}

#activ_page_reloadlink {
  padding: 10px; color: #393E46 !important; font-size: 1rem; cursor: pointer; font-weight: 600;
}
.activ_page_formbox {
  padding-bottom: 20px;
}
.signup_form_place_box {
width: 100%; display: flex; flex-wrap: wrap; height: max-content; justify-content: space-between; align-items: center;
}
@media (min-width: 700px) {

  #signupform  {
    display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  }
  .signputbox {
    max-width: 350px;
  }
  #loginform {
    width: 420px;
  }
}

/* -------------------------------------------------------------------------------------  user account ---------------------------------------------------------------------------------------------------- */

#accountsmain {
border: none; padding-bottom: 20px;
}

#userboxone {
width: 100%; height: 130px; border-radius: 10px; padding: 8px; background-color: #4980AC; display: flex; flex-direction: column; 
justify-content: space-between; margin-bottom: 26px;
}
.userboxonescreen {
width: 100%; height: max-content; display: flex; align-items: center; justify-content: space-between;
}
.userboxonescreen img {
background-color: #F7F5FE; width: 50px; height: 50px; border-radius: 100%; padding: 10px; 
margin-right: 10px;
}
.userboxonescreen h4 {
font-size: 1.2rem; color: #FFFFFF !important; width: 80%;
}

.userboxoneclk {
width: 30%; border: 2px #FFFFFF solid; height: 30px;border-radius: 12px; color: #FFFFFF !important; display: flex; justify-content: center;
align-items: center; font-size: .8rem; 
}
#userboxtwo {
width: 100%; height: max-content; margin-bottom: 26px; padding: 8px; max-width: 740px; padding-bottom: 26px;
}
.userboxtwoscreen {
width: 100%; display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; 
}
.userboxtwoscreen h5 {
color: #000000; font-size: .9rem;
}
.userboxtwoscreen a {
color: #000000 !important; font-size: .8rem; display: flex; justify-content: center; align-items: center; padding: 5px 8px 5px 8px;
}
.userboxtwoscreentwo {
width: 100%; display: flex; flex-wrap: wrap; align-items: center; 
}
.userboxtwoclk {
width: 48%; border: solid #000000 2px; height: 50px; display: flex; align-items: center; border-radius: 26px; margin: 10px 2% 0px 0px;
position: relative; padding: 10px; overflow: visible; max-width: 180px;
}
.userboxtwoclk img {
height: 24px; width: auto;  border-radius:  100%; margin-right: 12px;
}
.userboxtwoclk h6 {
font-size: .8rem; 
}
.userboxtwoclk a {
z-index: 99; width: 100%; height: 100%; position: absolute; top: 0%; left: 0%;
}

.userboxtwoclkcount {
position: absolute; top: -12%; right: -1%; width: 20px; height: 20px; background-color: #000000; border-radius: 100%; 
display: flex; justify-content: center; align-items: center; color: #FFFFFF !important; font-size: .8rem; border: solid 3px #FFFFFF;
}

#userboxthree {
width: 100%; height: max-content; display: flex; flex-wrap: wrap; border-top: solid 2px #F1F4F5; padding-top: 10px;
padding-bottom: 26px; justify-content: space-between;
}
#userboxthree h2 {
width: 100%; font-size: 1rem; padding-bottom: 10px;
}

.dash-not-main-box {
width: 100%; border: solid 1px #b8cefd; background-color: #e6eeff;  padding: 20px 10px; border-radius: 6px; margin-bottom: 20px;
display: flex; align-items: center; flex-wrap: wrap; justify-content: center;
}
#dash-not-main-box-img {
height: 50px; height: 50px; object-fit: contain; padding: 10px; background-color: #f1f6ff; border-radius: 3px; margin-right: 10px;
color: #025BD9; margin-bottom: 20px;
}
.dash-not-main-box p {
font-size: 1.1rem; font-weight: 600; color: #000000; width:100% ; text-align: center; padding-bottom: 20px;
}
.dash-not-main-box p span {
font-size: 1rem; font-weight: 400; color: #202020;
}
.dash-not-main-box a {
font-size: 1.2rem; padding: 10px 20px; border: #242835;  background-color: #438df5; border-radius: 6px;
color: #FFFFFF !important; border: solid 1px #6797ff; min-width: 250px; display: flex; align-items: center;
justify-content: center; width: max-content;  font-weight: 500;
}
.dash-not-main-box a img {
  height: 24px; width: auto; margin-left: 10px;
}

@media (min-width: 900px) {

.dash-not-main-box p {
padding-bottom: 0px; text-align: start; width: calc( 100% - 310px); 
}
.dash-not-main-box p span {
font-size: 1rem; font-weight: 400; color: #202020;
}
#dash-not-main-box-img {
margin-bottom: 0px;
}
.dash-not-main-box a {
font-size: 1.2rem; padding: 10px 20px; border: #242835;  background-color: #438df5; border-radius: 6px;
color: #FFFFFF !important; border: solid 1px #6797ff; min-width: 250px; display: flex; align-items: center;
justify-content: center; width: max-content;  font-weight: 500;
}
.dash-not-main-box {
  flex-wrap: nowrap; align-items: center; padding: 10px;
}

}
/* --------------------------------------------------------------------------- Activity Styling -------------------------------------------------------------------------------*/

.graphsectionbox {
width: 100%; display: flex; height: max-content; justify-content: space-between;  flex-wrap: wrap; 
}
.graphsectionbox  h2 {
  font-size: 1.2rem; padding-bottom: 30px; width: 100%;
}
.graph_chart_box {
width: 100%; height: max-content; background-color: #FFFFFF; border-radius: 12px; margin-bottom: 30px; padding: 10px;
}
.graph-box-text {
padding: 10px 20px; border-bottom: solid 1px #E4E6E9; width: 100%; font-size: .9rem; font-weight: 600;
}

table {
width: 100%;   overflow: hidden;  border-collapse: collapse; padding: 10px; border-radius: 6px; background-color: #FAFAFA;
 }
  
  th, td {
padding: 8px 15px; text-align: left; border-bottom: 1px solid #E4E6E9;  font-size: .9rem; font-weight: 400;
  }
  td  {
    font-size: .8rem; color: #000000; 
  }
  
  th {
     font-size: .8rem; 
  }
  
  tr:hover {
    background-color: #E4E6E9;
  }
  
  td img {
    border-radius: 4px;
  }
  
  .view-btn {
    background-color: #000000; color: white; padding: 5px 20px; text-decoration: none; border-radius: 2px;  font-size: .7rem; font-weight: 400; border-radius: 6px;
    transition: background-color 0.3s; 
  }
  
  .view-btn:hover {
    background-color: var(--primary-color);
  }
  tr {
    border: none !important; 
  }

@media (min-width: 700px) { 
.graph_chart_box  {
width: calc(70% - 5px); min-height: 380px; display: flex; flex-direction: column; justify-content: space-between; 
}
.pie_chart_box {
width: calc(30% - 5px);  
}
.lead_table_box {
width: 100%; min-height: max-content;
}
  
} 

/* ---------------------------------------------------------------------------orders styling --------------------------------------------------------------------------------- */
#ordersmain {
border: none;
}
#orderpckbox {
width: 100%; height: max-content; padding-top:10px; overflow-x: auto;
}
.orderpckscroll {
width: max-content; height: max-content;display: flex; flex-wrap: wrap; align-items: center;
}
.orderpckboxlnk {
color: #808080 !important; border: #FAFAFA solid 1px; font-size: .78rem; width: max-content; padding: 5px 16px 5px 16px;
margin: 0px 6px 6px 0px; border-radius: 16px; background-color: #FFFFFF;  height: max-content; font-weight: 800; display: flex;
align-items: center; 
}
.orderpckboxlnk  span {
font-size: .7rem; margin-left: 5px; color: #A8BAC1; font-weight: 200;
}
.orderlnkactiv {
border: #CCFF02 solid 1px; color: #000000 !important;
}
.orderitemcont {
width: 85px; height: 85px;
}
.orderstatus {
border: solid 2px #F1F4F5;
}
.orderreflectbox {
width: 100%; height: max-content; padding-top: 10px; display: flex; flex-wrap: wrap;
}

.orderbox {
width: 100%; background-color: #F7F5FE; height: max-content; max-width:410px; padding: 8px; margin-bottom: 10px;
position: relative;
}
.orderboxlnker {
position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; z-index: 9;
}
.orderboxtop {
display: flex; align-items: center; justify-content: space-between; width: 100%; height: max-content; 
}
.orderboxtop h6 {
font-weight: 500; font-size: .85rem;
}
.orderboxtop h5 {
 font-size: .88rem;
}
.orderboxitems {
width: 100%; height:max-content; display: flex; flex-wrap: wrap; align-items: center; padding-top: 10px;
}
.orderboxbot {
padding-top:5px; border-top: 2px #FFFFFF dashed; margin-top: 5px;
}

.emptyorderbox {
width: 100%; height: max-content; display: flex; flex-direction: column; align-items: center; padding-top: 10px;
justify-content: center; max-width: 360px;
}
.emptyorderbox h2 {
text-align:center; font-size: .9rem;
}
.emptyorderbox a {
padding: 10px 16px 10px 16px; background-color: #000000; color: #FFFFFF !important; font-size: .9rem; width: max-content;
height: max-content; margin: 10px; border-radius: 10px;
}
.emptyorderbox img {
width: 90%; height: auto;
}

/* ordertrack styling */
#ordertrackmain {
background-color: #FAFAFA; min-height: 100vh;
}
.ordertrackbox{
width: 100%; height: max-content; display: flex; flex-wrap: wrap; margin-bottom: 10px;
}
.otbdestinationbox {
width: 100%; height: 30vh; background-color: #FFFFFF; margin-bottom: 10px; overflow-y: auto; padding-bottom: 50px; max-width: 460px;
}
.completebox {
margin-top: 50px;
}
.otbdestinationscroll {
width: 100%; height: max-content; display: flex; flex-direction: column; align-items: center; 
}
.destrouter {
width: 5px; height: 60px; background-color: #5841D8; margin: 2px;
}
.destrouteractive {
background-color: #BAC0C6;
}

.otbdestinationsect {
height: max-content; width: 95%; border: solid 1px #FAFAFA; padding: 5px ; border-radius: 6px; display: flex; align-items: center;
max-width: 420px;
}
.desttextno {
width: 78%;
}
.desttextno h4 {
color: #000000; font-size: .8rem;
}
.desttextno h4 span {
font-size: .78rem; color: #808080; font-weight: 590;
}
.desttextnoactive h4 {
color: #BAC0C6;
}
.desttextnoactive h4 span{
color: #BAC0C6;
}
.otbdestinationsect img {
width: 45px; height: 45px; background-color: #FAFAFA; border-radius: 5px; margin-right: 10px; padding: 8px;
}

.destproc {
width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
}

.destproc img {
height: 160px; width: auto; 
}
.destproc h6 {
font-size: .8rem; color: #A8BAC1;
}

.otbsecthold {
width: 100%; height: max-content; max-width: 440px;
}
.otbsec {
width: 100%; height: max-content; display: flex; background-color: #FFFFFF; padding: 10px 5px 10px 5px; max-width: 410px;
margin-bottom: 10px;
}
.otbsec img {
width: 20px; height: 20px; margin-right: 5px; 
} 
.otbsecbox {
display: flex; flex-direction: column; width: 90%;
}
.otbsecboxtwo {
width: 75%;
}
.otbsecbox h6 {
font-size: .8rem; font-weight: 500; padding-bottom: 2px;
}

.otbsectwo {
width: 100%; max-width:420px; flex-wrap: wrap; 
}
.otbsec h4 {
font-size: .9rem; width: 100%; margin-bottom: 12px;
}
.otbsecitembox {
width: 100%; max-width: 410px; height: max-content; border: solid 1.6px #F1F4F5; margin-bottom: 10px;
}
.otbsecitem {
width: 100%; padding: 5px; display: flex; justify-content: space-between;
padding-bottom: 20px;
}
.otbsecitem img {
width: 70px; height: 70px; margin-right: 10px;
}
.revbutton {
width: 120px; border: #000000 solid 1px; height: 40px; margin: 5px;
}

.reviewboxone {
width: 100%; height: max-content; padding: 5px; background-color: #FFFFFF; border-top: dashed 1.6px #F1F4F5;
}
.staruserrev {
display: flex; align-items: center; width: max-content; height: max-content; padding-bottom: 10px; 
}
.revreflct {
width: 100%; height: max-content; 
}
#revwref {
background-color: #EEF6E1; color: #098551; padding: 2px; font-size: .65rem; border-radius: 12px;
}
.starcountbox {
display: flex; align-items: center; justify-content: center; width: 25px; height: 25px;
}
.starcountbox:active{
transform: scale(.96);
}
.starcountbox img {
width: 100%; height: auto;
}
#starcount {
width: 80px; height: 50px; font-size: .8rem; border: solid 1px #76908F; 
}
.reviewboxone textarea {
width: 100%; height: 100px; font-size: .8rem; border: solid 1px #76908F; padding: 10px;
}
.reviewboxone label {
width: 98%; height: 100px; font-size: .8rem;
}
.reviewboxone button {
height: 50px; width: 100%; max-width: 200px; color: #FFFFFF; background-color: #000000; margin-top: 10px;
}

/* admin order track */
.manageorderform {
width: 100%; height: max-content; display: flex; flex-wrap: wrap; padding: 6px; padding-bottom: 20px; max-width: 420px; 
 margin-bottom: 50px;
}
#mofalert {
width: 100%; padding: 5px; font-size: .7rem; border: 1px #098551 solid; color: #BAC0C6; font-weight: 590; max-width: 860px;
margin-bottom: 10px;
}
.mofbox {
width: 100%; max-width: 420px;height: max-content;
}
.manageorderform label {
font-size: .8rem;
}
.manageorderform textarea {
width: 100%; max-width: 420px; height: 125px; border: #0A0B0D solid 2px; padding: 10px; font-size: .9rem;
margin-bottom: 10px;
}
.manageorderform input {
width: 100%; max-width: 420px; height: 50px; border: #0A0B0D solid 2px;padding: 10px; font-size: .9rem;
margin-bottom: 10px;
}

.manageorderform select {
width: 100%; max-width: 420px; height: 50px; border: #0A0B0D  solid 2px; padding: 10px; font-size: .9rem;
margin-bottom: 20px;
}

.manageorderform button {
width: 100%; max-width: 420px; height: 50px; background-color: #000000; color: #FFFFFF !important; font-size: .9rem;
}

.eptadmin {
width: 100%; height: 150px; display: flex; align-items: center; justify-content: center; border: solid 1px #FAFAFA;
}
.eptadmin h3 {
font-size: .9rem; color: #A8BAC1; font-weight: 590; width: 90%; text-align: center;
}

/* wish styling */
.wishbox {
width: 100%; height: max-content; display: flex; flex-wrap: wrap;
}
.wishboxitem {
position: relative; display: flex; justify-content: center; align-items: center;
width: 100px; height: 100px; margin: 0px 10px 10px 0px;
}
#wishboxitemlnk {
width: 100%; height: 100%; z-index: 9;position: absolute; top: 0%; left: 0%;
}
#remwish {
position:absolute; top: 0%; right: 0%; width: 28px; height: 28px; display: flex;
justify-content: center; align-items: center; z-index: 99;
}
#wishboxitemg {
width: 100%; height: 100%; background-color: #F7F5FE;
}
#wishlnkmg {
width: 86%; height: auto;
}

/* policy styling */
#policymain h1 {
font-size: 1rem; padding-top: 26px;
}
#policymain p,#policymain li {
font-size: .9rem; padding-top: 6px;
}

/* --------------------------------------------------------------------------- Support styling------------------------------------------------------------------------------------- */

.contactdetail {
  width: max-content; height: max-content; list-style: none;   color: #000000 !important; display: flex; align-items: center; justify-content: center; padding-top: 10px;
}
.contactdetailmg {
  width: 16px; height: auto; margin-right: 6px;
}
.contactdetailspan {
  font-size: 1.2rem; font-weight: 600;
}
.reachpara {
  padding-bottom: 30px !important; color: #6B6E74 !important; font-size: 1rem !important; padding-top: 5px;
}


  .vrsintro {
  font-size: 1.5rem; font-weight: 500; padding-bottom: 40px; padding-top: 5px; width: 100%;
  }
  #contactForm, #myForm {
  width: 100%; height: max-content !important; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; padding-top: 30px;
  }
  .formsplitone, .formsplittwo {
  width: 100%; height: max-content;
  }
  .cformputbox {
  width: 100%; padding-bottom: 20px; display: flex; flex-direction: column; overflow: hidden;
  position: relative;
  }
  
  .cfcomp {
  box-sizing: border-box; border-radius: 0% !important; height: 35px !important; font-size: .9rem!important; box-shadow: none !important;
  margin-top: 5px; border: none !important; font-weight:400 !important; font-size: .8rem !important;
  color: #000000 !important; padding: 5px 10px; text-align: left; border: none !important;
  }
  .cformputbox label {
  width: 100%; font-size: 1rem !important;
  }
  .cfput {
  width: 100%; border: none; margin: 0px; padding: 5px 10px;  font-weight: 400 !important; border: solid 1px #d9d9d9 !important;
  background-color: #FFFFFF !important; height: 45px !important;
  }
  #location,.cfdrop {
  width: 30%; box-sizing: border-box; background-color: #FFFFFF; background-color: #E8F3F8 !important; padding: 5px 10px; font-size: .9rem;
  width: 100%; height: 45px !important;
  }
  #message {
  height: 60px !important; background-color: #ffffff !important; padding: 5px 10px;
  }
  
  #subbtn, #addbusformbtn {
  width: 100%; background-color: var(--primary-color) !important; color: #FFFFFF !important; display: flex; align-items: center; justify-content: center;
  height: 45px !important;
  }
  #subbtn:active {
  transform: scale(.95);
  }
  #description, #address {
  height: 65px !important;
  }
  .cfintro {
  font-size: 1.2rem; font-weight: 500; padding-bottom: 5px; text-transform: capitalize;
  }
  .success-alert {
  width: 100%; height: max-content;
  }
  @media (min-width: 1200px)  {
.formsplitone {
width: 40%; height: max-content; padding-right: 30px;
 }
 .formsplittwo {
  width: 60%; height: max-content;
}
  .cformputbox { padding-bottom: 10px !important;}
  }

/* ----------------------------------------------------------- admin styling ----------------------------------------------------------------------------------*/

.admin-main {
display: flex; align-items: flex-start; justify-content:center; padding: 0px 0px 100px 0px; width: 100%; min-height: 90vh;
}
.admin-box-intro {
  width: 100%; font-weight: 600; font-size: 2rem; padding-bottom: 40px;
}
.mainintro-separate{
width: 100%; font-weight: 600; font-size: 1rem; padding-bottom: 10px; border-bottom: solid 1px #E4E6E9; margin-bottom: 30px; padding-top: 20px;
}
.admin-mainintrobox {
  width: 100%; height: max-content; border-radius: 12px; background-color: #FFFFFF; box-shadow: 1px 1px 20px #00000017; margin-bottom: 20px; position: relative;
  display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 40px 20px;
}
.mainintroboxlnk {
  position: absolute; top: 0%; left: 0%; width: 100%; height: 100%;
}
.admin-mainintrobox img {
  width: 60px; height: auto; margin-bottom: 10px;
}
.admin-mainintrobox:hover {
  transform: scale(1.02);
}
.admin-mainintrobox p {
  color: #001428; font-size: 1rem;
}
.admin-box {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; 
}
.optionbtnnext {
width: 100%; height: 40px; border: solid 1px #d9d9d9; margin-top: 10px; background-color: #E8F3F8; border-radius: 10px;
}
.optionbtnnextbox {
  width: 100%; height: max-content; z-index: 45;
}
.optionbtnnext a {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;    color: #001428; font-size: 1rem;  
  
}
.admin-mainintrobox-blank {
  box-shadow: none; background-color: transparent; border: none; padding: 0%;
}

@media (min-width: 1100px) { 
  .admin-mainintrobox {
    width: calc(33% - 6px)
  }
}

/* -----------------------------------------------------------------------  control styling ---------------------------------------------------------------------- */
#reftest {
  width: 100%; padding-bottom: 10px;
}
.controltop {
width: 100%; height: max-content; display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; margin-bottom: 10px;
border-bottom: 1px #000000 solid; 
}
.control-top-box {
  padding-bottom: 0px !important;
}
.controltop h3 {
font-size: .9rem;
}
.controltop h4 {
font-size: 2rem;
}

.admin_control_sect_one {
  width: 100%;
}

.addformsection  {
width: 100%; height: max-content; background-color:  #FFFFFF; border: 1px solid #e4e6e9;  border-radius: 8px;  margin-bottom: 20px;
}
.addformsectpush {
padding: 20px 10px; border-bottom: solid 1px #E4E6E9;
}
.addformsectdrop {
padding: 20px 10px; display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between;
}

.file-upload-container {
  position: relative;
  display: inline-block;
  width: 100%; /* Adjust width as needed */
}

.file-upload-label {
  display: inline-block; height: 120px; width: 100%; padding: 10px 20px; background-color: #FAFAFA; color: #025BD9; border-radius: 10px; border: dashed 2px #E4E6E9;
  border-radius: 5px; cursor: pointer; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 600;
}
.file-upload-container:hover .file-upload-label {
  background-color: #E8F3F8;
  border: dashed 2px #025BD9;
  color: #0052FF !important;
}

.file-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.file-names {
  margin-top: 10px;
  color: #333;
}

.image-previews {
  width: 100%; height: max-content; margin-top: 10px; display: flex; flex-wrap: wrap;
}

.image-preview {
  margin-right: 10px; margin-bottom: 10px; width: 60px; height: 60px; border: 1px solid #ddd;   border-radius: 5px; display: flex;  justify-content: center; align-items: center; position: relative;
}

.image-preview img {
  width: 90%; height: auto;
  object-fit: cover;
}
.remove-button {
  position: absolute;
  top: 0;
  right: 0;
  background: #000000;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  text-align: center;
  line-height: 20px;
  cursor: pointer;
}

.controlbox { 
width: 100%; height: max-content;
}
#additemform {
width: 100%; height: max-content; display: flex; flex-wrap: wrap; align-items: center;
}
.addformbox {
width: max-content; height: max-content; width: 100%; margin-bottom: 10px; position: relative; overflow: visible;
}
.addformbox label {
font-size: .8rem;
}
.addformput,#pchecksel {
width: 100%; height: 50px; border: solid #A8BAC1 1px; padding: 10px; border-radius: 4px; font-size: .8rem; background-color: #F5F5F5;
}
.addformboxswc {
width: calc(50% - 5px);
}
#promoalertest {
font-size: .7rem; color: #ACD0A0; border: 1px solid #ACD0A0; width: max-content; height: max-content; padding: 5px 10px 5px 10px;
margin-bottom: 10px;
}
.addformtext {
width: 100%; height: 200px; border: solid #A8BAC1 1px; padding: 10px; border-radius: 4px; font-size: .8rem; background-color: #F5F5F5;
}
#addformbtn, #myaccountbtn, #addformbtnsecond, #agencyaccountbtn, .univ_button{
width: 100%; height: max-content; border-radius: 6px; color: #FFFFFF !important; background-color: #025BD9;  display: flex; align-items: center;
padding: 17px 35px; justify-content: center; cursor: pointer; font-size: 1.2rem; font-weight: 700; text-transform: uppercase;
}
#addformmg {
width: 100%; border-radius: 4px; max-width: 360px;display: flex; padding: 12px ; margin-bottom: 10px;  height: 50px;
border: solid #A8BAC1 1px;
}
#controlalert {
width: max-content; max-width: 100%; padding: 4px; display: flex; align-items: center;
border: solid 1px #FF0000; background-color: #EF8F8F; margin: 2px;
}
#controlalert img {
width: 18px; height: 18px; margin-right: 10px;
}
#controlalert span {
font-size: .8rem; 
}
.imagesecondbox {
  width: 100%; height: max-content; display: flex; flex-wrap: wrap; padding: 20px 10px; background-color: #ffffff; border-radius: 8px; border: solid 1px #E4E6E9;
}
.image-wrapper {
  width:  max-content; height: max-content; position: relative; border-radius: 5px; margin-right: 10px; margin-bottom: 10px; overflow: visible;
}
.image-wrapper img {
  width: 100px; height: auto;
}
.delete-btn {
  width: 18px; height: 18px; background-color: #000000; color: #FFFFFF; border-radius: 100%; position: absolute; right: -5%; top: -5%; z-index: 5;
  display: flex; align-items: center; justify-content: center;
}

#suggestions {
background: #fff;
border: 1px solid #f5f5f5;
width: 100%;
max-height: 150px;
overflow-y: auto;
display: none; 
  position: absolute; top: 0% !important; left: 0% !important; margin-top: 60px;
}
.pac-container {
 display: none !important;
}
.suggestion {
    padding: 10px;
    cursor: pointer;
}
.location_formbox {
position: relative  !important;
}
.suggestion:hover {
    background: #f0f0f0;
}
.addformsectdrop_amenities {
  width: 100% ; 
}
.addformbox_amenities div {
width: max-content; padding: 6px 8px; background-color: #FAFAFA; margin-bottom: 10px; display: flex; display: flex; align-items: center; justify-content: center;
border-radius: 5px; border: solid 1px #E4E6E9; margin-right: 10px;
}
.addformbox_amenities {
  display: flex; flex-wrap: wrap; width: 100% ; max-width: 100%; 
}
.addformbox_amenities label {
width: 100%; padding-bottom: 20px; font-size: 1rem;
}
.addformbox_amenities div  label {
padding-bottom: 0px; font-size: .9rem; margin-left: 10px; width: max-content; font-weight: 500;
}

.control_top_progress_box {
width:  100%; height: max-content; display: flex; align-items: center; justify-content: center;  background-color: #FFFFFF; border-radius: 36px; margin-bottom: 20px;
}
.top_progress_box {
width: calc(33.333% + 40px); padding: 10px 25px; position: relative; border-radius: 0px  36px 36px 0px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;border: 2px solid #FFFFFF; 
border-right: solid 2px #E4E6E9; margin-left: -40px; padding-left: 40px;
}
.top_progress_box_1 {
  z-index: 5;
}
.top_progress_box_2{
  z-index: 3; 
}
.top_progress_box_3 {
  z-index: 2; border-right:none;
}
.top_progress_box li {
width: 25px; height: 25px; border-radius: 100%; background-color: #E4E6E9; border: solid 1px #ffffff; margin-bottom: 10px;
padding: 4px;
}
.top_progress_box li img {
width: 100%; height: 100%; object-fit: cover;
}
.top_progress_box span {
  font-size: .8rem; font-weight: 500; color: #76908F; text-align: center; width: 100%;
}
.top_progress_box_done {
background-color: #025BD9; border: 2px solid #025BD9; border-right: solid 2px #FFFFFF;
}
.top_progress_box_done li {
background-color: #FFFFFF; 
}
.top_progress_box_done span {
color: #FFFFFF; 
}

.control_preview_box {
width: 100%; height:max-content; margin-bottom: 20px; display: flex; align-items: center; justify-content: flex-end;
}
.preview_link_click {
height: max-content; background-color: #000000; border-radius: 36px; font-size: .95rem; color: #FFFFFF !important; padding: 15px 35px;
width: max-content;
}
.preview_link_click:hover {
  background-color: #025BD9;
}

.final_form_section, .final_form_section_two {
padding: 20px; border-radius: 10px; background-color: #FFFFFF; width: 100%; 
}

.final_form_section h2, .final_form_section_two h2 {
padding-bottom: 10px ;  border-bottom: solid 1px #F5F5F5; margin-bottom: 30px; font-size: 1rem;
}
.final_form_section_two {
  background-color: #E4E6E9; padding: 20px ;
}

.final_control_checkout_text {
  display: flex; width: 100%; justify-content: space-between; align-items: center; font-size: 1rem; font-weight: 500; padding-bottom: 20px;
  text-transform: uppercase;
}
.final_control_checkout_text_total {
  border-top: 1px solid #F5F5F5; padding-top: 10px;
}
.final_control_checkout_text span {
  font-weight:600; font-size: 1rem;
}

.final_order_information_box {
width: 100%; padding: 10px; border: 1px solid #E4E6E9;  margin-bottom: 20px;  background-color: #FAFAFA; border-radius: 5px; display: flex; flex-wrap: wrap; justify-content: space-between;
}

.final_order_information_box h4 {
color: #000000; font-size: 1rem ; padding-bottom: 10px; margin-bottom: 15px; border-bottom: 1px solid #E4E6E9;  font-weight: 600; width: 100%;
}

.final_order_text {
width: 100%; padding: 5px; font-size: 1rem; font-weight: 600; color: #000;
}
.final_order_text span {
font-size: 1rem; font-weight: 500; color: #000000;
}

.co_package_description_box {
width: 100%; background-color: #e8e8e9;  padding: 15px 5px; height:  max-content; margin-bottom: 20px; border-top: #F5F5F5 solid 1px;  
color: #FFFFFF; display: flex; align-items: center; justify-content: space-between; border-bottom: #F5F5F5 solid 1px;  
}
.co_package_type {
 font-size: 1.2rem;  color: #001428; font-weight: 600;
}
.co_package_price {
font-size: 1.2rem;  color: #001428; 
}
.property_box_co {
box-shadow: none; background-color: transparent; border: solid 1px #E4E6E9;
}
.addformbox_map {
width: 100% !important; max-width: 100%; height: 400px !important;
}

.empty-box-section {
width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px;
}
.empty-box-section-img {
  width: 200px; height: auto; margin-bottom: 0px;
}
.empty-box-section p {
  max-width: 400px; margin-bottom: 30px; font-size: .9rem; color: var(--primary-color); text-align: center; line-height: 1.6rem; width: 90%; font-weight: 400;
}

.success-box-section {
width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; border: solid 1px #E4E6E9; background-color: #FFFFFF;
border-radius: 10px; padding: 40px 20px; margin-top: 40px;
}
.success-box-section-img {
width: 300px; height: auto; margin-bottom: 20px;
}
.success-box-section p {
width: 600px; margin-bottom: 30px; font-size: 1.8rem; color: var(--primary-color); text-align: center; line-height: 2rem;
}
#additional_inputs {
  width: 100%;
}
  .addformsectdropxv {
    border: solid 1px #F5F5F5; background-color: #FAFAFA;  padding: 30px 10px;  padding-bottom: 0%; border-radius: 16px; margin-bottom: 10px;
  }

@media (min-width: 700px) { 
.addformbox {
  width: 33%;  margin-bottom: 30px;
}
.addformbox_third_length {
    width: 49%;  
}
.final_form_section {
 width: calc(65% - 5px);
}
.final_form_section_two {
width: calc(35% - 5px);
}
.top_progress_box span {
 text-align: center; width: max-content;
}
.top_progress_box li  {
margin-bottom: 0px; margin-right: 20px; width: 28px; height: 28px; 
}
.addformsectdrop_amenities {
  width: 100% ; 
}
.addformbox_amenities div {
width: max-content; padding: 6px 8px; background-color: #FAFAFA; margin-bottom: 10px; display: flex; display: flex; align-items: center; justify-content: center;
border-radius: 5px; border: solid 1px #E4E6E9; margin-right: 10px;
}
.addformbox_amenities {
  display: flex; flex-wrap: wrap; width: 100% ; max-width: 100%; 
}
.addformbox_amenities label {
width: 100%; padding-bottom: 20px; font-size: 1rem;
}
.addformbox_amenities div  label {
padding-bottom: 0px; font-size: .9rem; margin-left: 10px; width: max-content; font-weight: 500;
}
  .addformboxswc {
    width: calc(25% - 5px);
    }
  .addformput{
  height: 45px;
  }
  #addformbtn,#addformbtnsecond {
  width: 100%; margin-top: .8rem; cursor: pointer;
  }
  #addformbtn:hover,#addformbtnsecond:hover{
    background-color: #025BD9;
  }
  .addformtext {
  height: 150px;
  }
  .textformbox {
  max-width: 500px; width: 30%;
  }
  #addformmg {
  margin-right: 10px; height: 45px;
  }

.addformbox_co_hold {
  width: calc(50% - 5px);
}
}

@media (min-width: 1100px) { 
.form_box_hold {
width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start !important;
 }
.admin_control_sect_one {
  width: calc(75% - 5px);
}
.admin_control_sect_two {
  width: calc(25% - 5px); 
}
.addformboxbuttonbox {
  width: 100% !important; max-width: 100%;
}
}

/*  ---------------------------------------------------------------------------  Blog control   -----------------------------------------------------------*/

.blogputbox {
  width: 100% !important; padding-bottom: 20px; display: flex; flex-direction: column;
}
.blogput {
  width: 100% !important; max-width: 100%;
}
#exerpt {
  height: 90px;
}
#content,#additionalinfo {
  height: max-content; min-height: 100px;
}
#blogformbtn {
  width: 100%; height: 50px; border-radius: 4px; color: #FFFFFF !important; background-color: #000000; max-width: 410px;
}
.delete-blog-btn {
  width: 40px; height: 40px; padding: 8px;
}
.delete-blog-btn img {
  width: 100%; height: auto;
}

/* ------------------------------------------------------- Blog Reading Page Styles  ------------------------------------------------------------------------------*/

/* Blog Reading Page Styles */
.reading-main {
  padding: 20px;
  background-color: #f9f9f9;
}

.blog-post-wrapper {
  display: flex; /* Use Flexbox for layout */
  flex-wrap: wrap; /* Allow wrapping */
  margin-bottom: 30px; /* Space between posts */
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

.blog-post-image {
  flex: 1; /* Allow the image to take full height */
  max-width: 40%; /* Limit width */
}

.blog-post-image img {
  width: 100%; /* Make the image responsive */
  height: auto;
  border-radius: 8px 0 0 8px; /* Rounded corners */
}

.blog-post-content {
  flex: 2; /* Allow the text to take more space */
  padding: 20px;
}

.blog-post-title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 15px;
}

.blog-post-excerpt {
  font-style: italic;
  margin-bottom: 20px;
  color: #666;
}

.blog-post-body {
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}

/* Responsive Design */
@media (max-width: 768px) {
  .blog-post-wrapper {
      flex-direction: column; /* Stack vertically on smaller screens */
  }

  .blog-post-image {
      max-width: 100%; /* Full width for images */
  }
}



/* -----------------------------------------------------profile form ------------------------------------- */

.profile-form {
    max-width: 600px;
    margin: 0 auto;
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
#profileform {
  min-height: 70vh; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
}
.dpholderbox {
  width: 100%; padding: 20px; height: max-content; display: flex; align-items: center; justify-content: center;
}

#preview-image {
  width: 200px; height: 200px; object-fit: cover; border-radius: 100%; border: solid 5px #FFFFFF;
}


.profile-form h3 {
    text-align: center;
    margin-bottom: 20px;
}

.profile-form .form-box {
    margin-bottom: 15px;
}

.profile-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-control {
    width: 100%;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

.profile-form button,#myprofilebtn{
    width: 100%;
    padding: 10px;
    background-color: #D11116 !important ;
    border: none !important;
    color: white;
    border-radius: 4px;
    cursor: pointer; padding-top: 10px;
}

.profile-form button:hover {
    background-color: #001428;
}
.password-container {
  display: flex;
  align-items: center; position: relative;
}
.pass_form {
  width: 100% !important; height: 100% !important;
}

.toggle-password {
  background: none; border: none;cursor: pointer; position: absolute;   z-index: 8; right: 0%; padding: 10px; margin-right: 10px ;
}


/* item edit styl */
.itemreflctbox {
width: 100%; height: max-content; display: flex; flex-wrap: wrap;justify-content: space-between; 
}
.reflctitem {
position: relative; width: 48%; height: max-content; display: flex; flex-direction: column; max-width: 205px;
margin-bottom: 4%; 
}
.reflctitem img {
width: 100%; height: auto; margin-bottom: 5px;
}
.reflctitem a {
width: 100%; height: 100%; position: absolute; top: 0%; left: 0%; z-index: 9;
}
.reflctitem h3 {
font-size: .8rem; font-weight: 590; width: max-content;
}
#decomform {
width: max-content; height: max-content; z-index: 999; display: flex; flex-direction: column;
}
#decomform button {
border-radius: 5px; padding: 5px 10px 5px 10px; width: max-content; background-color: #000000; color: #FFFFFF;
height: max-content; margin-top: 10px; font-size: .9rem;
}
#decomselect {
width:120px; height: max-content; font-size: .8rem; border-radius: 3px; border: #000000 solid 1px; padding: 5px 10px 5px 10px;
}
.reflectshipmg {
height:170px; justify-content: space-between; border: solid #F1F4F5 1px; padding: 10px;
}
/* recovery stylin */
#recovermain {
width: 100%; height: max-content; min-height: 90vh; display: flex; align-items: center; justify-content: center;
}
#recoverform {
width: 100%; height: max-content; max-width: 420px; display: flex; flex-direction: column;align-items: center; justify-content: center;
}
.recformbtn {
padding: 0%;
}
#recformp {
font-size: .8rem; padding-bottom: 10%; width: 100%; color: #808080; max-width: 410px;
}
#recalert {
width: 100%; background-color: #EF8F8F; font-size: .8rem; padding: 3px 8px 3px 8px; height: max-content; font-weight: 580; color: #C71925;
margin-bottom: 26px; border-radius: 8px; max-width: 410px; 
}
#recconfirm {
width: 100%; background-color: #ACD0A0; font-size: .8rem; padding: 2px 8px 2px 8px; height: max-content; font-weight: 580; color: #098551;
margin-bottom: 26px; border-radius: 8px; max-width: 410px;
}

.profile-page-sidebar {
  width: 100%; margin-bottom: 20px;
}
.profile-page-sidebar-box {
  width: 100%; display: flex; align-items: center; justify-content: center; padding: 10px;
}
.profile-page-sidebar-box  li {
  width: max-content; display: flex; align-items: center; justify-content: space-between; height: 30px; border: solid 1px #E4E6E9; background-color: #fbfbfc;
  font-size: 1rem; padding: 15px 30px; border-radius: 10px; font-weight: 500; cursor: pointer;
}
.profile-page-sidebar-box  li:hover {
  border-color: #ff6d72; background-color: #ffe3e4;
}
.profile-page-sidebar-box  li img {
height: 14px; width: auto; margin-left: 16px;
}
/*------------------------------------------------------ vALIDATE pAGE ---------------------------------------------------------*/ 
.valacchold {
  width: 100%; 
  max-width: 400px; 
  border: solid 1px #FAFAFA; 
  height: max-content; 
  border-radius: 4px; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center;
  text-align: center;
  padding: 20px;
  background-color: #FFFFFF;
}
#valaccholdform {
padding-top: 20px !important; width: 100%;
}

#loadertest {
  width: 20%;
  height: auto;
  animation: spin 3000ms linear infinite;
}

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


@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* contact page */
#contactmain {
background-color: #FAFAFA; min-height: 95vh; padding-top: 100px;  display: flex; flex-direction: column; align-items: center; justify-content: center;
padding-bottom: 80px;
}
.contactmainbox {
width: 100%; height: max-content; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; max-width: 900px;
}
.contactbox {
width: 100%; height: 230px; background-color: #FFFFFF; display: flex; align-items: flex-start; justify-content: flex-start; padding: 10px;
margin-bottom: 30px;
}
.contactboxsect {
width: 90%; height: 100%; border-left: 1px solid #F1F1F1; padding-left: 10px;
}
.contactboxsect p {
margin-bottom: 10px;
}
.contactboxmg {
width: 30px; height: auto; margin-right: 10px;
}

.mapframe {
height: 100px; width: max-content; display: flex; align-items: center; justify-content: center; position: relative; border: #FAFAFA solid 1px;
margin-top: 20px; border-radius: 10px;
}
.mapframe  a {
position: absolute; top: 0%; left: 0%; height: 100%; width: 100%; z-index: 9;
}
.mapframe img {
height: 100%; width: auto;
}
.contactboxsectp {
font-weight: 600; font-size: 1.1rem; color: #0a5498;
}

.contactform {
width: 100%; max-width: 830px; padding: 30px 10px 30px 10px; background-color: #FFFFFF; margin: 0%; display: flex; flex-wrap: wrap; align-items: center;
justify-content: flex-start;
}
.cfput {
width: 100%; height: 40px; border: #E4E6E9 solid 1px; padding: 5px 10px 5px 10px; color: #000000; font-size: .9rem; margin-bottom: 20px;
}
#cfsubbtn {
width: 100%; color: #FFFFFF !important; background-color: #00305C; height: 40px; margin-top: 15px;
}
.cftext {
width: 100%; height: 280px; border: #E4E6E9 solid 1px; padding: 5px 10px 5px 10px; color: #000000; font-size: .9rem;  margin-bottom: 25px;
}
.cfintro {
font-weight: 600; font-size: 1.1rem; color: #0a5498; width: 100%; padding-bottom: 10px;
}
.cfp {
width: 100%; color: #808080; font-size: .9rem; padding-bottom: 20px;
}
#testreachref {
width: 100%;
}
#testreachref h6 {
font-size: .8rem; color: #098551; padding: 3px 10px 3px 10px; background-color: #EEF6E1; font-weight: 500; border-radius: 16px; width: max-content; height: max-content;
}
#testreachref h4 {
font-size: .8rem; color: #C71925; padding: 10px 6px 3px 10px; background-color: #EF8F8F; font-weight: 500;  border-radius: 16px;  width: max-content; height: max-content;
}

@media (max-width: 700px) {
::-webkit-scrollbar,.deskinclude,.msovtcontboxtwo,.desklnk {
display: none !important; 
}

#dealbox {
position: fixed; bottom: 0%;  left: 0%;
}
}
@media (max-width: 900px) {
.msovtcontboxtwo,.taklkoff {
display: none !important; 
}
}

/* ----------------------------------------------------------------------- Listing Packages -----------------------------------------------------------------*/

.private_listing_screenone {
padding-top: 100px; display: flex; flex-wrap: wrap; padding-bottom: 120px;
}

.packages_box_hold{
width: 100%; display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap; padding-top: 40px;
}

.private_listing_packages_box {
width: 100%; height: max-content; background-color: #FFFFFF; border: solid 1px #E4E6E9; display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 40px 20px; margin: 10px; position: relative; border-radius: 16px; margin-top: 0%;
}

.private_listing_packages_box a {
z-index: 99; width: 100%; height: 100%; position: absolute;
}
.list_privately_link .headertop_menu_items_drop_box a {
padding: 0px 20px;
}
.private_listing_packages_box h5 {
  width: 100%; text-align: center; text-transform: capitalize; font-size: 1.8rem; padding-bottom: 8px;
}
.private_listing_packages_box h4 {
width: max-content; text-align: center; text-transform: capitalize; font-size: 1rem; margin-bottom: 18px; font-weight: 600; padding: 5px 20px;
border: 2px #E4E6E9 solid; border-radius: 46px;
}
.private_listing_packages_box p {
width: 90%; color: #808080; font-size: .9rem; text-align: center; padding-bottom: 20px;
}
.private_listing_packages_box li {
width: 100%;  display: flex; align-items: center; justify-content: center; margin: 0px 20px; margin-bottom: 15px; border-bottom: 1px #E4E6E9 solid; 
text-align: center;
}
.private_listing_packages_box li img {
width: 20px; height: auto; margin-right: 10px;
}
.private_listing_packages_box li span {
width: calc(100% -30px); font-size: 1rem; padding-top: 2px;  text-align: center; 
padding-bottom: 15px; 
}

.private_listing_packages_box_mid  li {
border-bottom: 1px #033564 solid; color: #FFFFFF;
}

.private_listing_packages_box_mid  li span {
  color: #FFFFFF;
}


.private_listing_packages_box_mid {
background-color: var(--primary-color); color: #FFFFFF !important;
}

.private_listing_packages_box_mid h4 {
  border-color:#FFFFFF ; color: #FFFFFF;
}

.private_listing_packages_box button {
width: 80%; height: 45px; border-radius: 26px; background-color: var(--primary-color); margin-top: 20px; color: #FFFFFF; padding: 10px;
}
.private_listing_packages_box_mid button {
background-color: #FFFFFF; color: var(--primary-color);
}

.packages_box_toggle_hold {
width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 10px 0px; max-width: 620px;
}
.packages_box_toggle_click {
width: calc(50% - 5px); border: solid 1px #e4e6e9; padding: 10px; border-radius: 8px; text-align: center; font-size: 1rem; font-weight: 600;
cursor: pointer; background-color: #FFFFFF; height: 50px; display: flex; justify-content: center; align-items: center; 
}
.packages_box_toggle_click:hover {
  background-color: #025BD9; color: #FFFFFF; border: solid 1px #025BD9; 
}

#packages_toggle_agents {
  background-color: #025BD9; color: #FFFFFF; border: solid 1px #025BD9; 
}

.hidden_box {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
  height: 0;
  overflow: hidden;
}


.visible_box {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.4s ease, transform 0.4s ease;
  height: auto;
  overflow: visible;
}


@media (min-width: 900px) {
.private_listing_packages_box {
width: calc(28% - 20px);  
}
.private_listing_packages_box:hover {
  margin-top: -10px;
}

}

/*_______________________________________________Success Page ----------------------------------------------------*/

.success_main_screenone {
height: max-content;  display: flex; align-items: center; justify-content: center; padding: 50px 10px;
}
.success_notif_box {
display: flex; align-items: center; justify-content: center; flex-wrap: wrap;  padding: 30px 20px; background-color: #FFFFFF; border: solid 1px #e4e6e9;
border-radius: 12px; width: 100%;  max-width: 450px;
}
.success_notif_box img {
height: 120px;
}
.success_notif_box h5 {
width: 100%; text-align: center; font-size: 2rem; padding: 15px 10px;
}
.success_notif_box p {
width: 100%; text-align: center; font-size: 1rem;  color: #808080;
}

.success_preview_box{
width: 100%; height: max-content; display: flex; align-items: center; justify-content: center; padding-top: 20px; margin-bottom: 20px;
}
@media (min-width: 900px) {
.success_main_screenone {
display: flex; align-items: center; justify-content: center; 
}
.success_notif_box img {
  width: 100%;max-width: 350px;
  }
}

/*------------------------------------------------------ User Alert ---------------------------------------------------------*/ 
.alert-top-box {
width: 100%; border: solid #E4E6E9 1px; padding: 10px; border-radius: 10px; max-width: 900px; margin-bottom: 20px;
background-color: #FFFFFF;
}
.create_alert_form_box {
width: 100%; border-top: solid #E4E6E9 1px;
}
.alert_location_formbox, .alert_location_formbox input {
  width: 100%; max-width: 100%;
}
.alert-top-box_top {
  width:100% ; padding: 10px 5px; display: flex; justify-content: space-between; align-items: center;
}

.alert-top-box_top button {
padding: 10px 25px ; background-color: #025BD9; border-radius: 26px; font-size: .9rem; color: #FFFFFF;
text-transform: uppercase; cursor: pointer;
}
.alert-main {
flex-wrap: wrap; align-items: flex-start; min-height: max-content;
}

/* --------------------------------------------Manage Account -----------------------------------------------*/
.manage_property_bottom_box {
width: 100%;  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
padding: 10px 0px; 
}

.manage_button_car {
width: calc(33% - 5px); height: 35px; font-size: .9rem; border-radius: 26px;  position: relative; cursor: pointer; display: flex;  align-items: center; 
justify-content: center; background-color: #000B2F; color: #FFFFFF !important;
}
.manage_button_car a {
font-size: .8rem; position: absolute; top: 0%; left: 0%; z-index: 6; width: 100%; height: 100%; 
}
#approve_listing {
background: #0052FF;
}
.listing_decline_message_box {
width: 100%; background-color: #F1F1F1; border-radius: 5px; padding: 10px; margin-top: 10px;
}
#decline_dropbtn {
background: #098551;
}
#decline_listing{
background: #000000; width: 100%;
}
.listing_decline_message {
width: 100%; height: 4rem; border: solid 1px #E4E6E9; border-radius: 5px;  background-color: #FFFFFF; padding: 10px;
font-size: .9rem; margin-bottom: 10px;
}

/* ------------------------------------------------------------------------------------- Agents Accounts Listing  ----------------------------------------------------------*/

.profile-box-top {
  width: 100%; border-bottom: #F5F5F5 solid 1px; padding-bottom: 10px ; display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; overflow: visible; position: relative;
}
.dp-box {
  width: 42px; height: 42px; border-radius: 100%;  display: flex; align-items: center; justify-content: center; margin-right: 10px;  z-index: 88;
  font-size: 1rem; font-weight: 600; color: #FFFFFF;
}
.dp-box img {
width: 100%; height: 100%; object-fit: cover; border-radius: 100%;
}
.initials-box-top {
  width: calc(100% - 75px); height: max-content;
}
.initials-box-top h6 {
font-size: .9rem; font-weight: 500; text-transform: capitalize; width: 100%; white-space: nowrap; overflow: hidden;  text-overflow: ellipsis; padding-bottom: 2px;
}
.initials-box-top span {
font-size: .7rem; font-weight: 500; text-transform: capitalize;
}

.options-box-top img {
width: 100%; height: auto;
}
.options-box-top-drop {
position: absolute; bottom: -100%; width: 100px; height: max-content; background-color: #FFFFFF; z-index: 98; right: 0%;
box-shadow: 1px 1px 5px #E4E6E9; border: solid 1px #FAFAFA;  display: none;
}
.options-list {
width: max-content; padding: 5px 10px; display: flex; align-items: center; justify-content: space-between;   font-size: .7rem; font-weight: 600; color: #000;
cursor: pointer; border: #E4E6E9 solid 1px;  border-radius: 5px;
}
.remove-client-btn {
  border: none; padding: 2px; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 100%; 
}
.options-list:hover {
  background-color: #F8FCFF;
}
.options-list  img {
height: 16px; width: auto; 
}
.remove-client-btn:hover {
border: solid 1px #000; background-color: #e1f8e1;
}
.icon-list-listing {
width: 100%; padding-bottom: 10px; display: flex; align-items: center; justify-content: flex-start; 
}
.icon-list-listing img {
width: 18px; margin-right: 10px;
}
.icon-list-listing span {
white-space: nowrap; overflow: hidden;  text-overflow: ellipsis; width: calc(100% - 20px); color: #76808f; font-size: .85rem; text-transform: lowercase;
font-weight: 500; 
}


/* -------------------------------------------------------- Checkout styling start here --------------------------------------------*/
#co-form {
width: 100%; display: flex; align-items:flex-start; justify-content: space-between; flex-wrap: wrap; height: max-content;
}
.co-form-box-one {
width: 100%; padding-bottom: 40px;
}
.co-form-box-two {
width: 100%;
}
.co-form-box-sect {
width: 100%; background-color: #FFFFFF; border-radius: 6px; border: solid 1px #E4E6E9; height: max-content; padding: 20px; margin-bottom: 10px;
}
.co-form-box-sect-intro {
  font-size: 1.2rem; color: #393E46; padding-bottom: 20px; width: 100%; 
}
.co-form-table {
  margin: 0%; padding: 0px 50px;  border: none; border-radius: 0%;
}

.co-form-table thead , .co-form-table tbody {
height: 50px; 
}
.co-form-table thead  tr th, .co-form-table tbody  tr td  {
 font-weight: 600; font-size: .9rem;
}

.co-form-box-bill-detail {
  font-size: 1.1rem; line-height: 2.4rem; font-weight: 500;
}
.co-form-box-bill-summary-line {
  display: flex; justify-content: space-between; align-items: center; padding: 20px 0px; border-top: 1px solid #e4e6e9;
}

.co-form-box-bill-summary-line  p, .co-form-box-bill-summary-line  span {
color: #393E46; font-size: 1.1rem;
}
.co-form-box-bill-total {
  border-top: 1px dashed #e4e6e9; padding-bottom: 5px;
}
 .co-form-box-bill-total  span,  .co-form-box-bill-total  p {
font-size: 1.2rem;  font-weight: 600;
 }

 .paybutton, .inv_notif_screen_diplay a {
width: 100%; padding: 10px; height: 45px; display: flex; align-items: center; justify-content: center; background-color: #025BD9; color: #FFFFFF; font-size: 1.2rem;
border-radius: 6px; font-weight: 500;
 }
 .paybutton img, .inv_notif_screen_diplay a img {
  margin-left: 10px; height: 22px; width: auto;
 }

@media (min-width: 800px) {
.co-form-box-one {
width: calc(70% - 5px);
}
.co-form-box-two {
width: calc(30% - 5px);
}
}

.inv_notif_screen {
  width: 100%; height: 100%; position: absolute; z-index: 998; background-color: #28303bad; padding-top: 120px; display: flex;
  align-items: center; justify-content: center;
}
.inv_notif_screen_diplay {
  width: 100%; max-width: 500px; height: max-content; min-height: 350px; display: flex; border: solid 1px #E4E6E9; flex-direction: column; padding: 20px;
  align-items: center; justify-content: center; border-radius: 16px; background-color: #FFFFFF;
}

.inv_notif_screen_diplay img {
  width: 150px; height: auto; margin-bottom: 20px; 
}

.inv_notif_screen_diplay p {
font-size: 1.3rem; line-height: 1.8rem; margin-bottom: 20px; color: #001428; text-align: center;
}

 .inv_notif_screen_diplay a {
  max-width: 200px;
 }
  .inv_notif_screen_diplay a img {
margin: 0% !important; height: 16px ; width: auto; margin-left: 8px !important;
 }

/*------------------------------------------------------ Agency View ---------------------------------------------------------*/ 

.ouragentsboxsection {
  display: flex; flex-wrap: wrap; justify-content:flex-start; align-items: flex-start;
}

.ouragentsbox {
  width: 100%; margin-bottom: 20px;
}
.ouragentsbox img {
  width: 100%; height: 200px; object-fit: cover;
}
.ouragentsbox p {
  font-weight: 600; font-size: 1.2rem;
}
@media (min-width: 1000px) { 
.ouragentsbox {
  width: calc(25% - 10px); margin: 10px; margin-bottom: 20px; 
}
}
.agentbox {
  position: relative;
}
.agentbox_link {
  position: absolute; top: 0%; left: 0%; z-index: 8; width: 100%; height: 100%;
}

/*------------------------------- Agent list Update -----------------------------------------*/
.ind-agent-box {
width: 100%; padding: 20px 10px; border-radius: 10px; background-color: #FFFFFF; margin-top: 20px;
}
.ind-agent-box-top {
  width: 100%; height: max-content; display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px;
  margin-bottom: 10px; border-bottom: 1px solid #E4E6E9;
}
.ind-agent-box-bottom {
  width: 100%; height: max-content; display: flex; justify-content: space-between; align-items: center;
}
.ind-agent-box-top-name {
  font-size: 1.2rem; font-weight: 600; padding-bottom: 2px;
}
.ind-agent-box-top-email {
  font-size: .8rem; font-weight: 400; padding-bottom: 0px; color: #393E46;
}
.ind-agent-box-top-cred-box {
  width: 80%; padding-left: 10px;
}

.ind-agent-box-bottom-click {
  width: calc(50% - 5px); background-color: #f5f5f5; border: solid 1px #E4E6E9; border-radius: 6px; padding: 6px;
  font-size: .9rem; font-weight: 600; text-align: center; color: #000000 !important;
}
.agentlistscreenxix {
  justify-content: space-between !important;
}
.ind-agent-box-spacer {
  margin: 0%; padding: 0%; background-color: transparent;
}
@media (min-width: 1000px) {  
 .ind-agent-box {
width: calc(33% - 20px); 
} 

}

/*------------------------------- Developers  -----------------------------------------*/

.developers_page{
width:100%;
padding:40px 5%;
display:flex;
flex-direction:column;

}

/* HERO */

.developers_hero{
width:100%;
background: linear-gradient(135deg, #0f393B 0%, #1d2b3b 60%, #0f3624 100%);
border-radius:30px;
padding:70px 60px;
position:relative;
overflow:hidden;
display:flex;
justify-content:space-between;
gap:40px;
align-items:center; margin-bottom: 50px;
}

.developers_hero::before{
content:'';
position:absolute;
width:350px;
height:350px;
background:#0ea56b20;
border-radius:50%;
top:-120px;
right:-120px;
}

.developers_hero::after{
content:'';
position:absolute;
width:250px;
height:250px;
background:#f8c25115;
border-radius:50%;
bottom:-100px;
left:-100px;
}

.developers_hero_left{
width:60%;
position:relative;
z-index:2;
}

.developers_hero_left span{
display:inline-flex;
padding:10px 18px;
background:#ffffff12;
border:1px solid #ffffff10;
border-radius:100px;
font-size:13px;
font-weight:600;
color:var(--sec-shade-color);
margin-bottom:18px;
}

.developers_hero_left h1{
font-size:55px;
line-height:1.1;
font-weight:800;
color:#fff;
margin-bottom:20px;
max-width:700px;
}

.developers_hero_left p{
font-size:17px;
line-height:1.8;
color:#d7dde7;
max-width:700px;
margin-bottom:28px;
}

.developers_btns{
display:flex;
gap:15px;
flex-wrap:wrap;
}

.developers_btns a{
text-decoration:none;
}

.developers_btn{
padding:16px 26px;
border-radius:14px;
font-size:15px;
font-weight:700;
transition:0.3s;
display:flex;
align-items:center;
justify-content:center;
}

.developers_btn_primary{
background: var(--primary-color);
color:#fff;
}

.developers_btn_primary:hover{
background: var(--accent-color);
}

.developers_btn_secondary{
border:1px solid #ffffff20;
color:#fff;
background:#ffffff08;
}

.developers_hero_card{
width:380px;
background:#fff;
border-radius:25px;
padding:35px;
position:relative;
z-index:2;
box-shadow:0 20px 50px rgba(0,0,0,0.2);
}

.developers_hero_card h5{
font-size:14px;
color:#0ea56b;
font-weight:700;
margin-bottom:10px;
text-transform:uppercase;
letter-spacing:1px;
}

.developers_hero_card h2{
font-size:48px;
font-weight:800;
color:#111827;
margin-bottom:5px;
}

.developers_hero_card h2 span{
font-size:16px;
font-weight:500;
color:#666;
}

.developers_hero_card p{
font-size:14px;
line-height:1.7;
color:#666;
margin-bottom:20px;
}

.developers_hero_card ul{
display:flex;
flex-direction:column;
gap:12px;
margin-bottom:25px;
}

.developers_hero_card ul li{
list-style:none;
font-size:14px;
color:#222;
display:flex;
gap:10px;
align-items:flex-start;
line-height:1.5;
}

.developers_hero_card ul li::before{
content:'✓';
color:#0ea56b;
font-weight:800;
}

.developers_hero_card a{
width:100%;
height:55px;
border-radius:14px;
background:#0ea56b;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
color:#fff;
font-weight:700;
font-size:15px;
}

/* GRID */

.developers_grid{
width:100%;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
}

.developers_box{
background:#fff;
border-radius:24px;
padding:30px;
border:1px solid #ececec;
}

.developers_box h3{
font-size:22px;
margin-bottom:15px;
color:#111827;
}

.developers_box p{
font-size:15px;
line-height:1.8;
color:#666;
}

/* FEATURE SECTION */

.development_feature_section{
width:100%;
background:#fff;
border-radius:30px;
padding:50px;
display:flex;
gap:40px;
align-items:center;
}

.development_feature_left{
width:50%;
}

.development_feature_left h2{
font-size:42px;
line-height:1.2;
margin-bottom:20px;
color:#111827;
}

.development_feature_left p{
font-size:16px;
line-height:1.9;
color:#666;
margin-bottom:20px;
}

.development_feature_right{
width:50%;
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
}

.dev_mini_card{
background:#f8f9fb;
border-radius:20px;
padding:25px;
border:1px solid #ececec;
}

.dev_mini_card h4{
font-size:17px;
margin-bottom:10px;
color:#111827;
}

.dev_mini_card p{
font-size:14px;
line-height:1.7;
color:#666;
}

/* PROCESS */

.dev_process{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px; margin-bottom: 50px;
}

.dev_process_box{
background:#fff;
padding:30px;
border-radius:24px;
border:1px solid #ececec;
}

.dev_process_box span{
width:45px;
height:45px;
background: var(--sec-shade-color);
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
font-weight:800;
color:#fff;
margin-bottom:18px;
}

.dev_process_box h4{
font-size:18px;
margin-bottom:12px;
}

.dev_process_box p{
font-size:14px;
line-height:1.7;
color:#666;
}

/* CTA */

.dev_bottom_cta{
width:100%;
background: linear-gradient(135deg, #0f393B 0%, #0f3624 100%);
border-radius:30px;
padding:60px;
text-align:center;
}

.dev_bottom_cta h2{
font-size:42px;
color:#fff;
margin-bottom:15px;
}

.dev_bottom_cta p{
font-size:16px;
line-height:1.8;
color:#e9fff5;
max-width:850px;
margin:auto;
margin-bottom:30px;
}

.dev_bottom_cta a{
display:inline-flex;
padding:18px 30px;
background:#fff;
border-radius:14px;
text-decoration:none;
font-weight:700;
color:#111827;
}

/* RESPONSIVE */

@media(max-width:1100px){

.developers_hero{
flex-direction:column;
padding:50px 30px;
}

.developers_hero_left,
.developers_hero_card,
.development_feature_left,
.development_feature_right{
width:100%;
}

.developers_grid,
.dev_process,
.development_feature_right{
grid-template-columns:1fr;
}

.development_feature_section{
flex-direction:column;
padding:35px;
}

.developers_hero_left h1{
font-size:40px;
}

.dev_bottom_cta{
padding:40px 25px;
}

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

}



/*-------------------------------------------------- Projects Landiing --------------------------------*/


.development-hero .hero-inner-wrap{
    position:relative;
    z-index:1;
    width:100%;
    max-width:1200px;
    margin:0 auto;
    text-align:center;
  
}

.hero-kicker{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-size:.78rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:#fff;
    background: rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.18);
    padding:10px 16px;
    border-radius:999px;
    margin-bottom:22px;
    backdrop-filter: blur(10px);
}

.development-hero h1{
    font-size: clamp(2.1rem, 5vw, 4.8rem);
    line-height:1.05;
    font-weight:700;
    color:#fff;
    max-width:980px;
    margin:0 auto 18px;
}

.hero-subtitle{
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    line-height:1.75;
    color: rgba(255,255,255,.92);
    max-width: 820px;
    margin: 0 auto;
}

.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    justify-content:center;
    align-items:center;
    margin: 28px 0 38px;
}

.hero-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height: 52px;
    padding: 0 22px;
    border-radius: 999px;
    font-weight:700;
    font-size: .98rem;
    text-decoration:none;
    transition: .22s ease;
}

.hero-btn:hover{
    transform: translateY(-1px);
}

.hero-btn-primary{
    background: #fff;
    color: var(--text-dark);
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
}

.hero-btn-secondary{
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,.28);
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(10px);
}

.hero-stats{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    width:100%;
    max-width: 920px;
    margin: 0 auto;
}

.hero-stat{
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 18px;
    padding: 18px 16px;
    backdrop-filter: blur(10px);
}

.hero-stat h3{
    font-size: clamp(1.4rem, 2.5vw, 2.15rem);
    color:#fff;
    margin-bottom: 6px;
}

.hero-stat p{
    font-size: .92rem;
    color: rgba(255,255,255,.88);
}

.modern-card{
    transition: .25s ease;
}

.modern-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0,0,0,.08);
}

.platform-section{
    display:flex;
    align-items:center;
    gap: 28px;
}

.platform-image-wrap{
    width:100%;
}

.platform-image{
    border-radius: 24px;
    box-shadow: 0 18px 40px rgba(0,0,0,.08);
}

.section-tag{
    display:inline-flex;
    padding: 8px 12px;
    border-radius: 999px;
    background: #eef4fb;
    color: var(--primary-color);
    font-size: .78rem;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    margin-bottom: 16px;
}

.category-grid{
    display:grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    width:100%;
}

.category-card{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap: 10px;
    text-decoration:none;
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 18px;
    padding: 22px 18px;
    min-height: 170px;
    color: var(--text-dark);
    transition: .22s ease;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .04);
}

.category-card:hover{
    transform: translateY(-3px);
    border-color: #d5dbe6;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .08);
}

.category-card span{
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--primary-color);
}

.category-card p{
    font-size: .92rem;
    line-height: 1.65;
    color: var(--text-muted);
}

.development-stage-grid{
    display:grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 14px;
    width:100%;
}

.stage-card{
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 18px;
    padding: 18px 14px;
    text-align:center;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .04);
}

.stage-card h4{
    font-size: 1rem;
    margin-bottom: 8px;
    color: var(--primary-color);
}

.stage-card p{
    font-size: .92rem;
    color: var(--text-muted);
    font-weight: 600;
}

.level-1{ border-top: 4px solid #6B7280; }
.level-2{ border-top: 4px solid #2563EB; }
.level-3{ border-top: 4px solid #7C3AED; }
.level-4{ border-top: 4px solid #D97706; }
.level-5{ border-top: 4px solid #DC2626; }
.level-6{ border-top: 4px solid #059669; }
.level-7{ border-top: 4px solid #111827; }

.benefit-grid{
    display:grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    width:100%;
}

.benefit-card{
    background:#fff;
    border:1px solid var(--card-border);
    border-radius:18px;
    padding:24px 20px;
}

.benefit-card h3{
    font-size: 1.08rem;
    margin-bottom: 10px;
    color: var(--primary-color);
}

.benefit-card p{
    font-size: .95rem;
    line-height: 1.7;
    color: var(--text-muted);
}

.final-cta-box{
    background: linear-gradient(135deg, #0f3a3c 0%, #0f395b 100%);
    border-radius: 28px;
    padding: 40px ;
    text-align:center;
    color:#fff;
}

.final-cta-box h2{
    font-size: clamp(1.7rem, 3vw, 2.8rem);
    margin-bottom: 12px; color: var(--secondary-color);
}

.final-cta-box p{
    max-width: 760px;
    margin: 0 auto;
    line-height: 1.75;
    color: rgba(255,255,255,.92);
}

.featured-cta{
    display:flex;
    gap: 14px;
    justify-content:center;
    flex-wrap:wrap;
    margin-top: 26px;
}

@media (max-width: 1200px){
    .category-grid{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .development-stage-grid{
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .benefit-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero-stats{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px){
    .platform-section{
        flex-direction:column;
    }

    .category-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .development-stage-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero-stats{
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px){
    .hero-actions,
    .featured-cta{
        flex-direction:column;
        width:100%;
    }

    .hero-btn{
        width:100%;
    }

    .category-grid,
    .benefit-grid,
    .development-stage-grid{
        grid-template-columns: 1fr;
    }

    .final-cta-box{
        padding: 30px 18px;
        border-radius: 22px;
    }
}