section {
width: 100%;
padding-block: 30px;
}
h2, h3 {
color: #99004d;
font-family: var(--font-heading), sans-serif;
margin-bottom: 10px;
margin-top: 14px;
}
h2 {
font-size: clamp(1.375rem, 2.5vw, 1.875rem);
line-height: 1.2;
letter-spacing: 0.02em;
}
h3 {
font-size: clamp(1.25rem, 2.5vw, 1.625rem);
line-height: 1.2;
letter-spacing: 0.015em;
}
p{
font-size: clamp(0.9375rem, 1.8vw, 1.05rem);
line-height: 1.5;
margin-bottom: 10px;
}
ul{
list-style: none;
}
ol{
margin-left: 18px;
}
li{
font-size: clamp(0.93125rem, 1.8vw, 1.03125rem);
line-height: 1.4;
margin-bottom: 6px;
}
a {
text-decoration: none;
}
li span{
color: #000000;
font-weight: 600;
}
.center{
text-align: center;
}
.center-title,
.center-sub-title{
text-align: center;
}
.center-sub-title{
  font-size: clamp(0.875rem, 1.8vw, 0.9375rem);
  color: #660033;
}
.list-title{
font-weight: 600;
}
.importent-text{
color: var(--bg-pink);
font-weight: 600;
font-size: clamp(1rem, 1.8vw, 1.125rem);
text-transform: uppercase;
}
.hi-ligh{
color: #b30059;
}
.hglink{
color: #e60073;
font-weight: 600;
}
.hglink:hover{
color: #99004d;
}
strong a{
color: #e60073;
}
strong a:hover{
color: #99004d;
}
.m-top{
margin-top: 14px;
}
.m-top-xl{
margin-top: 16px;
}
.m-block{
margin-block: 16px;
}
.container h2:first-child,
.container h3:first-child,
.container h4:first-child{
margin-top:0;
}
.container p:last-child,
.container ul:last-child,
.container ol:last-child{
margin-bottom:0;
}
.container p:has(+ h2),
.container p:has(+ h3),
.container p:has(+ h4){
margin-bottom:0;
}
@media (min-width: 480px) {
section {
padding-block: 38px;
}
h2, h3, h4 {
margin-bottom: 12px;
margin-top: 18px;
}
p{
margin-bottom: 12px;
}
.m-top{
margin-top: 15px;
}
.m-top-xl{
margin-top: 18px;
}
.m-block{
margin-block: 18px;
}
}
@media (min-width: 768px) {
section {
padding-block: 48px;
}
h2, h3, h4 {
margin-top: 20px;
margin-bottom: 14px;
}
p{
margin-bottom: 16px;
}
.m-top{
margin-top: 16px;
}
.m-top-xl{
margin-top: 22px;
}
.m-block{
margin-block: 22px;
}
}
@media (min-width: 1024px) {
section {
padding-block: 60px;
}
}
/* EXTRA UNIVERSAL CSS */
.about-section,
.about-service-section,
.about-pihu-escorts,
.escorts-category-section,
.escorts-rates-section{
background: var(--bg-gradient-1);
}
/* ABOUT SECTION */
.about-section{
content-visibility:auto;
contain-intrinsic-size:700px 600px;
}
.about-section .video-col {
    order: -1;
}
@media (min-width: 768px) {
    .about-section .video-col {
        order: 2;
    }
}
.video-col{
width:100%;
max-width:700px;
}
.responsive-video{
display:block;
width:100%;
height:auto;
border:6px solid var(--bg-pink);
}
@media (min-width:768px){
.about-section .two-col{
display:flex;
gap:40px;
align-items:center;
}
.about-section .text-col{
flex:0 0 42%;
}
.about-section .video-col{
flex:0 0 58%;
align-self: start;
}
}
/* RIBBION CONTAINER */
.ribbion-container{
padding: 30px;
background: var(--bg-pink);
text-align: center;
margin:auto;
}
.ribbion-text{
font-size: clamp(1rem, 2vw, 1.1rem);
font-weight: 600;
text-transform: uppercase;
color: var(--text-white);
}
.ribbion-btn{
display: inline-block;
padding: 10px 12px;
font-size: clamp(0.875rem, 2.5vw, 1rem);
font-weight: 700;
color: #000;
transition: transform 0.25s ease;
touch-action: manipulation;
-webkit-tap-highlight-color:transparent;
}
.ribbion-btn{
background: #66ff33;
border-radius: 50px;
}
@media (hover: hover) and (pointer: fine) {
.ribbion-btn:hover {
transform: translateY(-3px) scale(1.03);
background: #b3ff99;
}
}
@media (hover: none) and (pointer: coarse) {
.ribbion-btn:active {
background: #b3ff99;
}
}
@media (min-width: 480px) {
.ribbion-btn {
padding: 10px 16px;
}
}
@media (min-width: 768px) {
.ribbion-btn{
padding: 10px 20px;
}
}
@media (min-width: 1024px) {
.ribbion-btn{
padding: 12px 22px;
}
}
/* GALLERY SECTION */
.grid-gallery {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
content-visibility: auto;
}
.girl-card,
.simple-card {
display: flex;
width:100%;
overflow: hidden;
border-radius: 12px;
border: 2px solid pink;
}
.girl-card{
position: relative;
}
.img-box {
width: 100%;
aspect-ratio: 3 / 4;
overflow: hidden;
}
.img-box img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1) rotate(0deg);
transition: transform .55s cubic-bezier(.25,.1,.25,1);
}
.girl-info{
position:absolute;
left:0;
right:0;
bottom:0;
padding:12px;
background:rgba(0,0,0,.45);
text-align:center;
}
.girl-name{
margin:0;
color:#ffffff;
font-size: 1.05rem;
font-weight:700;
}
.sub-info{
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
gap:5px;
margin:4px 0 10px;
line-height:1.3;
}
.sub-info span{
color: #ffe7b5;
font-size: 0.95rem;
}
.girl-category::before{
content:"";
display:inline-block;
width:6px;
height:6px;
border-radius:50%;
background:#fff;
margin:0 8px;
vertical-align:middle;
transform:translateY(-1px);
}
.card-buttons{
display:flex;
align-items:center;
justify-content:center;
gap:20px;
}
.card-buttons a{
display:flex;
align-items:center;
justify-content:center;
padding:7px;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.call-btn{
background-color: #ff4d88;
border-radius: 50%;
}
.wa-btn{
background-color: #009900;
border-radius: 50%;
}
.card-buttons svg{
width:21px;
height:21px;
pointer-events: none;
transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
@media (hover: hover) and (pointer: fine) {
.girl-card:hover .img-box img,
.simple-card:hover .img-box img {
transform: scale(1.15) rotate(3deg);
}
.girl-card:hover,
.simple-card:hover {
border-color: #ff4d6d;
}
.call-btn:hover svg,
.wa-btn:hover svg{
transform:scale(1.15);
}
}
@media (hover:none) and (pointer:coarse){
.call-btn:active svg,
.wa-btn:active svg{
transform:scale(1.12);
}
}
@media (min-width: 360px) {
.grid-gallery {
grid-template-columns: repeat(2, 1fr);
}
.girl-name{
font-size: clamp(1rem, 2vw, 1.15rem);
}
.sub-info span{
font-size: clamp(0.80rem, 2vw, 0.95rem);
}
}
@media (min-width: 600px) {
.grid-gallery {
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
}
@media (min-width: 1024px) {
.grid-gallery {
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
}
/* BOOKING GALLERY SECTION */
.card-link{
display:block;
text-decoration:none;
color:inherit;
}
.simple-card {
flex-direction:column;
}
.simple-card .img-box {
position:relative;
}
.experties{
display:block;
padding:10px;
text-align:center;
background:var(--bg-pink);
color:#fff;
font-size: clamp(0.85rem, 2.3vw, 1rem);
font-weight:700;
}
@media (min-width: 360px) {
.book-now{
font-size: 1.03rem;
}
}
/* VIDEO GALLERY SECTION */
.card-video{
display:block;
width:100%;
height:100%;
object-fit:cover;
}
/* LIST SECTION */
.hotel-list{
display:flex;
flex-wrap:wrap;
gap:6px 16px;
padding:0;
margin:10px 0 18px;
}
.hotel-list li{
display:flex;
align-items:center;
gap:4px;
font-size: clamp(0.92rem, 1.8vw, 1rem);
line-height:1.2;

}
.hotel-list li{
  color: #000000;
}
.hotel-list li::before{
content:"";
width:8px;
height:8px;
min-width:8px;
background:#000;
border-radius:50%;
}
/* CATEGORY GALLERY SECTION */
.client-testimonials h3,
.escorts-category-section h3{
font-size: clamp(1.0625rem, 2.5vw, 1.375rem);
color: #660033;
}
.category-info{
display:flex;
flex-direction:column;
align-items:center;
gap:6px;
}
/* ESCORTS RATES SECTION */
.table-responsive{
width:100%;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
.table{
width:100%;
min-width:600px;
margin:0;
border-collapse:collapse;
background:#fff;
font-size:clamp(.85rem,1.5vw,1rem);
background:transparent;
}
.table thead th{
padding:8.8px 7.2px;
background:#ac00e6;
color:#fff;
font-weight:700;
text-align:center;
white-space:nowrap;
border:1px solid #e8b5bb;
}
.table tbody td{
padding: 8px 7px;
text-align:center;
vertical-align:middle;
white-space:nowrap;
border:1px solid #f1d4d7;
}
.table tbody td:first-child,
.table thead th:first-child{
text-align:left;
}
.table tbody tr:nth-child(even){
background:#fff8f8;
}
@media (hover:hover) and (pointer:fine){
.table tbody tr:hover{
background:#ffe5e8;
}
}
/* CLIENT TESTIMONIALS SECTION */
.profile-sub-title{
  color: #000000;
  font-weight: 600;
  font-size: clamp(1.0625rem, 2vw, 1.1875rem);
}
blockquote{
line-height: 1.5;
margin-bottom: 10px;
font-size: clamp(0.875rem, 2.5vw, 1rem);
}
blockquote span{
color:#cc7a00;
}
/* FAQ SECTION */
.row {
display: flex;
flex-direction: column;
row-gap: 25px;
align-items: center;
text-align: center;
}
@media (min-width: 768px) {
.row {
flex-direction: row;
gap: 40px;
align-items: start;
text-align: left;
}
.first-col,
.second-col {
flex: 1;
}
.second-col{
padding-left:60px;
}
}
.faq-container{
display:flex;
flex-direction:column;
gap:6px;
}
.faq-sec {
position: relative;
overflow: hidden;
}
.faq-sec .container {
position: relative;
z-index: 1;
}
.faq-sec::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0,0,0,0.7);
z-index: -1;
}
.faq-sec h3{
color: #ffffff;
text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}
.faq-bg-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -2;
}
.faq-item{
background:linear-gradient(#f5deb3,#ffb74d);
border-radius:10px;
padding:8px 12px;
}
.faq-item summary{
font-size: clamp(0.9375rem, 2.5vw, 1rem);
line-height: 1.3;
font-weight:600;
cursor:pointer;
list-style:none;
position:relative;
padding-right:20px;
color:#000;
}
.faq-item summary::-webkit-details-marker{
display:none;
}
.faq-item summary::after{
content:"+";
position:absolute;
right:0;
top:50%;
transform:translateY(-50%);
font-size:1.1rem;
font-weight:700;
color:red;
}
.faq-item[open] summary::after{
content:"−";
}
.faq-item p{
margin-top:8px;
font-size: clamp(0.875rem, 2.2vw, 0.95rem);
line-height:1.5;
color:#333;
}
.contact-info li{
color: #ffe6f2;
}
.contact-info li a{
color: #fff8a6;
}
.contact-info li a:hover{
color: #ffffff;
}
/* FOOTER SECTION */
.site-footer {
background-color: var(--bg-pink);
padding: 30px 15px;
text-align: center;
border-top: 1px solid white;
contain: layout paint;
}
.footer-logo-wrap {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.footer-logo{
max-width: 160px;
margin: 0 auto;
overflow: hidden;
}
.footer-logo img {
width: 100%;
height: auto;
object-fit: contain;
display: block;
}
.footer-links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 20px 15px;
}
.footer-links li {
margin: 0;
}
.footer-links a {
color: #fff;
font-size: clamp(1rem, 1.8vw, 1.125rem);
font-weight: 700;
white-space: nowrap;
line-height: 1.2;
position: relative;
}
.footer-links a img {
filter: brightness(0) invert(1);
}
.bottom-footer {
margin-top: 15px;
}
.bottom-footer p {
font-size: clamp(0.875rem, 1.6vw, 0.9375rem);
margin: 0;
color: #ffe6f0;
font-weight: 600;
}
@media (min-width: 768px) {
.site-footer {
padding: 40px 20px;
}
.footer-logo-wrap {
margin-bottom: 40px;
}
.footer-links {
gap: 0 30px;
}
.bottom-footer {
margin-top: 25px;
}
.footer-logo{
max-width: 180px;
}
}
/* DEFAULT HIDDEN (NO CLS) */
.age-overlay,
.age-modal {
transition: opacity 0.25s ease;
}
.age-overlay {
backdrop-filter: none;
}
.age-modal-content {
transform: scale(0.95);
transition: transform 0.25s ease;
}
.age-modal.active .age-modal-content {
transform: scale(1);
}
.age-modal h2 {
margin-bottom: 10px;
}
.age-modal p {
font-size: clamp(0.9375rem, 1.8vw, 1rem);
}
.disclaimer {
font-size: clamp(0.8125rem, 1.8vw, 0.875rem) !important;
opacity: 0.8;
}
.age-buttons {
margin-top: 15px;
display: flex;
gap: 10px;
justify-content: center;
}
.btn-yes,
.btn-no {
display: block;
width: 100%;
box-sizing: border-box;
font-size: clamp(0.9375rem, 1.8vw, 1.0625rem);
padding: 10px 15px;
border-radius: 10px 15px;
text-decoration: none;
font-family: var(--font-body);
cursor: pointer;
font-weight: 600;
border: none;
transition: background-color .3s ease, color .3s ease, transform .3s ease;
touch-action:manipulation;
}
.btn-yes {
background: #ff3377;
color: #fff;
}
/* NO BUTTON */
.btn-no {
border: 1px solid gray;
color: #fff;
}
@media (hover:hover) and (pointer:fine) {
.btn-yes:hover,
.btn-no:hover { 
transform:translateY(-3px) scale(1.03);
}
.btn-yes:hover { 
background: #ff99bb;
color: #000;
}
.btn-no:hover {
background: #fff;
color: #000;
}
}
@media (hover:none) and (pointer:coarse) {
.btn-yes:active { 
background: #ff99bb;
color: #000; }
.btn-no:active { 
background: #fff;
color: #000; }
}
@media (min-width: 768px) {
.age-overlay {
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
}