/* Project/_Template/css/public_style.css
 * 
 * Main public page atributes
 * 
 * body 
 * public-page-container
 * 
 * FORM
 * ERROR_CONFIRM
 * 
*************************************************************************************************/


.wrap{max-width:var(--max); margin:0 auto; padding:0 18px}

/* Header */
.topbar{
    position:sticky; top:0; z-index:1;
    background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(10px);
    border-bottom:1px solid var(--border);
}
.nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 0;
    gap:14px;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:800}



.container-item-MenuPanel{
    display: none;
	position: fixed; 										    	/* Ensure that z-index works */
    z-index: 50; 												 	/* Set z-index to be below the overlay */
    
    border: 1px solid #BF3C20;                                    /* Example border, adjust color and size as needed */
    
    border-radius: 10px;
    
    padding: 15px;
    background-color: #ffffff;                                    /* Div color*/
}

    .container-item-MenuPanel .dropdown {                           /* Style the dropdown container */
        position: relative;
        display: inline-block;
        padding: 0px 10px 0px 10px;
    }
    
    .container-item-MenuPanel .dropdown ul { /* Style the dropdown content (hidden by default) */
        list-style: none;
        margin: 0;
        padding: 5px;                                               /* padding around the lise items*/
        display: none;
        position: absolute;
        background-color: #ffffff;                                /* List element BG color */
        box-shadow: 0 8px 64px rgba(0,0,0,0.2);
        z-index: 23;
    }

    /* Style the list items inside the dropdown */
    .container-item-MenuPanel .dropdown li {
        padding: 10x;
        min-width: 170px;
        text-align: left;
        border-bottom: 1px solid #BF3C20;                           /* List element line color */
        margin: 5px 0; /* Add margin for spacing */
    }
    
    /* Display the dropdown when hovering over the parent element */
    .container-item-MenuPanel .dropdown:hover ul {
        display: block;
    }
    
    .container-item-MenuPanel a {
        color: #BF3C20;
        text-decoration: none;                                      /* Remove underline */
    }
    
    .container-item-MenuPanel a:visited {
        color: #BF3C20;
    }
    
    .container-item-MenuPanel a:hover {
        text-decoration: underline;
    }
    
    .container-item-MenuPanel a:active {
        color: #BF3C20;
    }
    
    
    
    
    /* Hero */
    .hero{
        position:relative;
        padding:60px 0 40px;
        background:
            linear-gradient(rgba(15,23,42,.65), rgba(15,23,42,.55)),
            url('/Project/_Media/Background/body_bg_image.png') center/cover no-repeat;
        color:#fff;
    }
    .hero-grid{
      display:grid; grid-template-columns: 1.3fr .7fr; gap:18px; align-items:stretch;
    }
    h1{margin:0 0 10px; font-size:clamp(28px, 3.4vw, 46px); letter-spacing:-.02em}
    .lead{margin:0 0 14px; color:var(--card); font-size:clamp(15px, 1.4vw, 18px)}
    .pill-row{display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 0}
    .pill{
      padding:8px 12px; border-radius:999px; border:1px solid var(--border);
      background:#fff; font-weight:700; color:#0b1220;
    }
    .hero-card{
      background:var(--card); border:5px solid var(--border); border-radius:var(--radius);
      box-shadow:var(--shadow); padding:16px;
    }
    .hero-card h2{margin:0 0 8px; font-size:18px; color: var(--ink) }
    .mini{color:var(--muted); margin:0 0 12px; font-size:14px}
    .stack{display:grid; gap:10px}
    label{font-size:13px; font-weight:750; color:#0b1220}
    input, select, textarea{
      width:100%; padding:12px 12px; border-radius:12px; border:1px solid var(--border);
      background:#fff; outline:none;
    }
    textarea{min-height:92px; resize:vertical}
    .consent{display:flex; gap:10px; align-items:flex-start; color:var(--muted); font-size:13px}
    .consent input{width:auto; margin-top:3px}
    .actions{display:flex; gap:10px; flex-wrap:wrap}
    
    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      padding:10px 14px; border-radius:999px; border:1px solid var(--border);
      background:#fff; font-weight:750; color: var(--ink);
    }
    .btn-primary{
      border-color:transparent;
      background:linear-gradient(135deg,var(--pink),#FF77BA);
      color:#fff;
      box-shadow:0 10px 20px rgba(255,79,163,.25);
    }
    .btn-accent{
      border-color:transparent;
      background:linear-gradient(135deg,var(--green),#53D98E);
      color:#05361F;
      box-shadow:0 10px 20px rgba(37,192,109,.18);
      font-weight:800;
    }
    
    
    
    
    
    
    
    
    
        /* Sections */
    .section{padding:20px 0}
    .section h3{margin:0 0 12px; font-size:20px}
    .grid{
      display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;
    }
    .card{
      background:#fff; border:1px solid var(--border); border-radius:var(--radius);
      padding:14px; box-shadow:var(--shadow);
    }
    .card strong{display:block; margin-bottom:6px}
    .card p{margin:0; color:var(--muted)}
    .card a{display:inline-flex; margin-top:10px; font-weight:800; color:var(--ink)}
    .card a span{color:var(--green); margin-left:6px}

    /* Gallery */
    .gallery{
      display:grid; grid-template-columns:repeat(5,1fr); gap:10px;
    }
    .ph{
      border-radius:16px; border:1px solid var(--border);
      background:linear-gradient(135deg, rgba(255,79,163,.18), rgba(37,192,109,.18));
      height:110px;
    }

    /* Footer quick contacts */
    .quickbar{
      border-top:1px solid var(--border);
      background:linear-gradient(135deg, rgba(255,79,163,.08), rgba(37,192,109,.08));
      padding:14px 0;
    }
    .quickbar .row{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
    .small{color:var(--muted); font-size:13px}


    
    
    a{color:inherit; text-decoration:none}
    
.side-links{
  position: fixed;

  bottom: 20px;      /* 👈 distance from bottom */
  left: 50%;         /* center horizontally */

  transform: translateX(-50%); /* true center */

  display: flex;
  gap: 35px;

}

    .side-links a{
  display: inline-block;

  transform: rotate(-45deg); /* angle */

  transform-origin: center;

  font-weight: 700;
  font-size: 15px;

  color: #0F172A;
  text-decoration: none;

  transition: all .25s ease;
}

.side-links a:hover{
  color: #FF4FA3;
  transform: rotate(-45deg) scale(1.1);
}


    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
/* Item_SideButtons */
/*************************************************************************************************/
    
.container-item-SideButtons {
    position: fixed;                                                 
    top: 40%;                                                       /* Position 40% from the top */
    width: 90%;
    left: 5%;                                                       /* Center horizontally */
    z-index: 99;
    
    font-weight: bold;
    font-size: 50px;
}
        
    .container-item-SideButtons .item-left {
        position: absolute;
        top: 0px;
        left: 0px;
        
        /*transform: rotate(-90deg);                                /* rotate text */
    } 
        
    .container-item-SideButtons .item-right {
        position: absolute;
        top: 0px;
        right: 0px;
        
        /*transform: rotate(-90deg);                                /* rotate text */
    } 
    
    .container-item-SideButtons a {
        color: #BF3C20;
        text-decoration: none;                                      /* Remove underline */
    }
    
    .container-item-SideButtons a:visited {
        color: #BF3C20;
    }
    
    .container-item-SideButtons a:hover {
        text-decoration: underline;
    }
    
    .container-item-SideButtons a:active {
        color: #BF3C20;
    }
    
    
    
/* Item_SocialMedia */
/*************************************************************************************************/

.container-item-SocialMedia{
    display: inline-block;
    
    position: absolute;                                             /* Position it relative to the browser window */
    
    bottom: 25px;                                                   /* 👈 Distance from BOTTOM */
    
    /* z-index: 50;                                                 /* Set z-index to be below the overlay */
    
    border: 1px solid #BF3C20;                                    /* Example border, adjust color and size as needed */
    
    padding: 5px;
    /*background-color: #ffffff                                     /* Div color*/
}
    

    
    
    
    
    
    
    
    
/* Item_ContactUs */
/*************************************************************************************************/

.container-item-ContactUs{
    
}
    
    
    .container-item-ContactUs .form-title{
        font-size: 25px;
        color: #0B5881;
        font-weight: bold;                                          /* Make text bold */
    }
    
    .container-item-ContactUs .form-input-div{
        background-color: #D2E5EF;
        
        /* border: 2px solid #3498db;                               /**/
        border-radius: 15px;                                        /**/
    }
    
    .container-item-ContactUs .form-input-div input {
        border: none;
        background-color: transparent;
        font-size: 18px;                                            /* Adjust font size here */
    }
    
        .container-item-ContactUs input[type="checkbox"] {
        border: none;
        background-color: transparent;
        font-size: 18px;                                            /* Adjust font size here */
    }
    
    .container-item-ContactUs .form-input-div textarea {
        width: 300px;                                               /* Adjust width as needed */
        height: 150px;                                              /* Adjust height as needed */
        
        border: none;
        background-color: transparent;
        font-size: 12px;                                            /* Adjust font size here */
    }
    
    .container-item-ContactUs .contact-submit {
        display: inline-block;
        border-radius: 15px;
        background-color: #D2E5EF;
        
        font-size: 18px;                                             /* Adjust font size to change button size */
    }








/* ContactFloatingDiv.css */
/*************************************************************************************************/
.floating-top-right-div{
	display: none;
	position: absolute;
	z-index: 50;
	right: 10px;
	top: 10px;
	background: rgba(33, 33, 33, 0.95); /* dark semi-transparent */
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
	border-radius: 12px;
	font-size: 20px;
	line-height: 1.6;
	color: #ffffff;
	padding: 5px 35px 5px 35px;
	overflow: auto;
}

.floating-top-right-div a{
	color: #5cd65c;
	text-decoration: none;
}

.fixed-bottom-div {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%; /* You can set this to any specific width if needed */
    height: 64px; /* Fixed height */
    background-color: var(--green);
    color: white; /* Text color for better visibility */
    text-align: center; /* Center text horizontally */
    /*line-height: 100px; /* Center text vertically */
    z-index: 3;
}












.content-block{
  max-width: 1120px;
  margin: 22px auto;
  padding: 18px;

  border: 1px solid #E5E7EB;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(15,23,42,.08);

  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 18px;
  align-items: center;
}

/* Image container */
.cb-media{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #E5E7EB;
  background: linear-gradient(135deg, rgba(255,79,163,.10), rgba(37,192,109,.10));
  min-height: 180px;
  display: flex;
}
.cb-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Text */
.cb-text h2{
  margin: 0 0 8px;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.cb-text p{
  margin: 0 0 10px;
  color: #475569;
}
.cb-text ul{
  margin: 0;
  padding-left: 18px;
  color: #0F172A;
}
.cb-link{
  font-weight: 800;
  color: #25C06D; /* green accent */
  text-decoration: none;
}
.cb-link:hover{
  color: #FF4FA3; /* pink */
}

/* Reverse layout (image right) */
.content-block.is-reverse{
  grid-template-columns: 1fr 320px;
}
.content-block.is-reverse .cb-media{
  grid-column: 2;
}
.content-block.is-reverse .cb-text{
  grid-column: 1;
}

/* Stack layout (text on top + gallery below) */
.content-block.is-stack{
  grid-template-columns: 1fr;
  align-items: start;
}

/* Gallery row */
.cb-gallery{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 10px;
}
.cb-gallery .tile{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #E5E7EB;
  box-shadow: 0 10px 20px rgba(15,23,42,.06);
  background: #fff;
}
.cb-gallery img{
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}

/* Mobile */
@media (max-width: 920px){
  .content-block{
    grid-template-columns: 1fr;
  }
  .content-block.is-reverse{
    grid-template-columns: 1fr;
  }
  .cb-media{
    min-height: 160px;
  }
  .cb-gallery{
    grid-template-columns: 1fr;
  }
  .cb-gallery img{
    height: 180px;
  }
}

















/* Content Formating */
/*************************************************************************************************/

/* public page header */
.pub-page-h1{
	/* font-size: clamp(1.5em, 2vw, 3vw);                           /* 3vw = 3% of the browser�s width 1.5em; */
	font-size: 1.5em;                                               /* 3vw = 3% of the browser�s width 1.5em; */
}








.q-ContactForm {
	
	position: fixed; 
	z-index: 25; 
	display: none; 
	margin-top: 100px; 
	margin-left: 50px; 
	border: 1px solid #BF3C20; 
	width: 450px; 
	height: 500px; 
	background-color: #ffffff;
	
}








/* Show only when width > 920px */
/* @media (min-width: var(--mobile-threshold-width)) { */

      .container-item-MenuPanel {
	    display: inline-block; 
	  }
    
      .q-ContactForm{
        display: inline-block;
      }
    


    /* Responsive */
    /* Mobile-specific content */
    .mobile-only{display:none}
    .desktop-only{display:block}
    
    @media (max-width: 920px){
      .hero-grid{grid-template-columns: 1fr}
      .grid{grid-template-columns:1fr}
      .gallery{grid-template-columns:repeat(2,1fr)}
      .desktop-only{display:none}
      .mobile-only{display:block}
    }

    @media (max-width: 920px){
      body{padding-bottom:72px}
      
      .with_90{ width: 90vw; }   /* under a certain size set frame size full screen */
    }
    
    .map-wrapper iframe{
	  width: 100%;
	  height: 400px;
	  border-radius: 16px;
	}