/* public/css/style.css */

/* Light Blue BG */
body {
  background-color: #f0f8ff; /* "AliceBlue" */
}


.social-icons a {
  margin-right: 10px;
  text-decoration: none;
}
.social-icons i {
  color: #fff;
  transition: color 0.2s ease;
}
.social-icons i:hover {
  color: #ccc; /* or your chosen hover color */
}

/* Style for the footer tick mark icon */
.footer-tick-icon {
    color: #fff; /* White color for contrast */
    font-size: 1.2rem; /* Slightly larger size */
    margin-right: 5px; /* Space between icon and text */
    vertical-align: middle; /* Aligns icon with text */
}


.short-desc span {
    line-height: inherit; /* Ensures inline styles for line height are respected */
    display: inline; /* Allows line-height styles to work correctly */
}

.short-desc {
    line-height: normal; /* Resets to default line height */
    margin: 0; /* Ensure no additional spacing due to margin */
    white-space: pre-wrap; /* Preserves spacing and line breaks */
    word-wrap: break-word; /* Ensures long words wrap */
}

.editor-outputOSR {
    line-height: 0.2; /* Same as in TinyMCE */
    font-family: Arial, sans-serif;
    font-size: 14px;
  }
  
.filter-dropdown {
   /* width: 100px !important; Set the desired width */
   height: auto;              /* Allow the height to adjust */
    max-height: 50px;         /* Set a maximum height */
    overflow-y: auto;          /* Add a scrollbar if content overflows */
    width: 100%;               /* Ensure the dropdown takes full width */
    /* text-align: left; */
    box-sizing: border-box;    /* Include padding/border in width/height */
}

.filter-dropdown option {
    padding: 5px;              /* Adjust padding for better readability */
}

.filter-form {
    display: none !important;
} 

/* Cards: Fixed Height & Use Fluid Width. Crops or covers the image  

.card-img-top {
  object-fit: cover;
  height: 200px;
}

*/


/*  Cards:No Cropping, remove the fixed height and image resize proportionall */  
/*
.card-img-top {
  width: 100%;
  height: auto;  / Let the height be proportional /
  object-fit: contain; / if you want letterboxing within a container /
}

*/


/* Cards: Fixed height, No cropping,  If the aspect ratio doesn’t match you’ll see blank space (letterbox) around the image. */

/*
.card-img-top {
  width: 100%;
  height: 200px;        
   object-fit: contain;   if you want letterboxing within a container 
  object-position: top;
  background-color: #fff; 
}
*/


/*
Typical Dimensions
16:9 ratio: e.g., 1280×720 (recommended) , 1920×1080.
4:3 ratio: e.g., 800×600 (recommended), 1024×768.
Square: e.g., 600×600.

*/

/* Table row hover highlight */
.table-hover tbody tr:hover {
  background-color: rgba(0, 123, 255, 0.1);
}
/* Ensure the textarea for Google Analytics Code spans full width */
#google_analytics_code {
    resize: vertical; /* Allow vertical resizing */
}

/* Ensure the textarea for Google Analytics Code spans full width */
#google_analytics_code {
    resize: vertical; /* Allow vertical resizing */
}


/* Set the global font to Poppins with a fallback */
body {
  font-family: 'Poppins', sans-serif;
  font-size: 14px; /* Base size for body text */
  color: #333;     /* A nice default text color */
  background-color: #f5f8fa; /* A subtle background for the site */
  margin: 0;
  padding: 0;
}

footer {
  font-size: 0.8rem;
}

/* Optional: Adjust headings (e.g., h1, h2) to be bigger and bolder */
h1, .h1 {
  font-size: 2rem;   /* ~32px if base is 16px */
  font-weight: 700;
  margin-bottom: 1rem;
}
h2, .h2 {
  font-size: 1.75rem; /* ~28px */
  font-weight: 600;
  margin-bottom: 0.75rem;
}
h3, .h3 {
  font-size: 1.5rem;  /* ~24px */
  font-weight: 500;
  margin-bottom: 0.5rem;
}



/* Example styling for .btn if you want a nicer look */
.btn {
  font-size: 0.9rem;
  font-weight: 500;
}


/* start header agent */

/* Agent Info Container */
.agent-info {
    margin-left: auto;               /* Pushes the agent-info to the far right */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Agent Name Styling */
.agent-info .agent-name {
    font-size: 0.8rem;               /* Smaller font size */
    text-align: center;              /* Center-align the text */
}

a.phone-link, a.whatsapp-link {
    color: #ffffff;          /* always white text */
    text-decoration: none;   /* remove underline */
    font-weight: 500;        /* optional: make it slightly bolder */
}

a.phone-link:hover, a.whatsapp-link:hover {
    color: #ffcc00;          /* yellow on hover for contrast */
    text-decoration: underline;
}



/* Adjust Agent Info on Smaller Screens */
@media (max-width: 992px) {
    .agent-info {
        margin-left: 0;              /* Remove left margin on smaller screens */
        margin-top: 10px;            /* Add spacing above */
    }
    
    .navbar-brand {
        
        font-size: 0.8rem; 
    }
}

/* Hover Effects for Links */
.navbar-nav .nav-link:hover {
    color: #ffd700 !important;        /* Gold color on hover */
    transition: color 0.3s ease;
}

/* Agent Photo Hover Effect */
.agent-info img:hover {
    opacity: 0.8;                      /* Slight transparency on hover */
    transition: opacity 0.3s ease;
}

/* end header agent */



/* Media Queries for Smaller Devices  */


@media (max-width:380px) {
  /* Very small devices (phones in portrait) */
 
  .navbar-brand {
        
        font-size: 0.4rem; 
    }
    
  /* etc. */
}



@media (max-width: 576px) {
  /* Very small devices (phones in portrait) */
  body {
    font-size: 14px;  /* Slightly smaller base font on very small screens if you want */
  }

  h1 {
    font-size: 1.5rem; /* ~24px if base is 16px, but with body=14px it becomes smaller */
  }
  h2 {
    font-size: 1.3rem;
  }
  /* etc. */
}

@media (max-width: 768px) {
  /* Small devices like bigger phones or tablets in portrait */
  body {
    font-size: 14px;  /* slightly smaller than desktop's 16px if desired */
  }
  h1 {
    font-size: 1.6rem; 
  }
} 

/* Free online toool to check responsive - https://responsivedesignchecker.com/checker.php */