@charset "UTF-8";
.heading ul.list{  }
.hero{ background-image:url(/img/home-banner-glob-bg.jpg);
background-position: bottom right;
background-size: 90%;
background-repeat: no-repeat;
background-origin: content-box, content-box;
}
/*****/
.logo-slider {
overflow: hidden;
white-space: nowrap;
width: 100%;
}

.logo-track {
display: flex;
width: max-content;
animation: scroll 25s linear infinite;
}

.logo-track img.img-fluid {
height:32px;
width: auto !important;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
cursor: pointer;
max-width:200px;
object-fit: cover;
vertical-align:middle;
}
.logo-track img.img-fluid.small, img.small{
min-height:40px !important;
}

@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/*****/
.review-bo .yellowBox {
background-color: #ffeecc;
border-radius: .75rem !important;
}
.review-bo .lightBlueBox {
background-color: #e4e1f7;
border-radius: .75rem !important;
}
/* Make columns flex containers */
.review-box > [class*="col-"] {
display: flex;
}

/* Make service box fill full column height */
.review-box > [class*="col-"] > div {
width: 100%;
display: flex;
flex-direction: column;
}

/* Optional: push small text to bottom for better alignment */
.review-box > [class*="col-"] > div p.small {
margin-top: auto;
}
/*****/
.image-icon {
cursor: pointer;
transition: transform 0.3s ease, border-color 0.3s ease;
width: 90px;
height: 90px;
border-radius: 50%;
border: 4px solid #fff;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden; /* Ensures image stays inside round shape */
background-color:#bfbfbf;
filter:drop-shadow(1px -1px 3px rgba(0, 0, 0, 0.25)) !important;
}

.image-icon img {
width: 100%;
height: 100%;
object-fit: none;
border-radius: 50%;
}

.image-icon:hover {
transform: scale(1.1) !important;
background-color: transparent !important;

}

.image-icon.active {
background-color:transparent !important;
}

.image-icon:hover img, .image-icon.active img {
object-fit: none;
-webkit-filter:invert(100%) grayscale(100%) !important;
filter:invert(100%) grayscale(100%) !important;
background-color: #fff;
}

/* Center the icons horizontally using Flexbox */
.icon-container {
display: flex;
justify-content: center; /* Horizontally center the icons */
/*flex-wrap: wrap;*/ /* Allow icons to wrap on smaller screens */
gap: 30px; /* Use gap for consistent spacing between icons */
margin-top: -60px;
}
#main-image{
border-radius:12px;
}

.img-container {
text-align: center;
margin-top: 20px;
}

#main-heading {
}

#main-heading a {
text-decoration:none;
}

#main-heading a:hover {
text-decoration:none;
}

/* "our-product" section styles */
.our-product {
margin-top: 50px;
}

.product-column {
padding: 20px;
text-align: center;
}
.product-slider{
/*width:95%; margin: 14px;*/
}

.product-slider img {
/*width: 100%;
height: auto;
max-height: 356px;*/
border-radius:12px;
}

.slider-buttons {
margin-top: 20px;
text-align: center;
}

.slider-button {
width:60px; height:60px;
}
.slider-buttons .btn::after {
width:60px; height:60px; content:none; width:0; height:0; margin:0;
}

.slider-button:hover {
}

/* "welcome-creative" section */
.welcome-creative {
text-align: center;
margin-top: 40px;
font-size: 24px;
}

.welcome-creative span {
font-weight: bold;
color: #007bff;
}

@media (min-width:320px) and (max-width:575px){
.d-xs-none{ display:none !important; }
}

@media (min-width:576px) and (max-width:768px){
.icon-container{ gap:12px; }
.image-icon{ width:50px; height:50px; }
}

@media (min-width:768px) and (max-width:992px){
.icon-container{ gap:12px; }
.image-icon{ width:75px; height:75px; }
}
/*****/
.why-choose-box .full-width-row {
min-height: 100px; /* adjust as needed */
display: flex;
align-items: center; /* vertical center */
justify-content: left; /* optional horizontal center */
height:180px;
margin-top:20px;
}
.why-choose-box .half-col {
/*border: 1px solid #ccc;
padding: 20px;*/
text-align: center;
align-items: start;
justify-content: left;
display: flex;
}
.why-choose-box .card{
width: 412px;
height: 318px;
background-size: cover;
background-repeat: no-repeat;
}
.why-choose-box .card, .why-choose-box .card:hover{ border:0; box-shadow:none; }
.why-choose-box .card.yellow-box{ background-image: url(https://www.masterrvdesigners.com/img/why-choose-us-yellow-box.png); background-color: transparent !important; color: #08262A; text-shadow:none; }
.why-choose-box .card.blue-box{ background-image: url(https://www.masterrvdesigners.com/img/why-choose-us-blue-box.png); background-color: transparent !important; color: #08262A; text-shadow:none; }

.why-choose-box .card.yellow-box .icon-box{ width: 70px; display: block; background: linear-gradient(#FA0, #BF7F00); border-radius: 50%; /*position: absolute; top: 10px; left: 14px;*/ }
.why-choose-box .card.blue-box .icon-box{ width: 70px; display: block; background: linear-gradient(#2D1E8D, #150D48); border-radius: 50%; /*position: absolute; top: 10px; left: 14px;*/ }
.why-choose-box .card .icon-box img.img-fluid{ background-color:transparent !important; -webkit-filter: grayscale(100%) invert(100%) !important; filter: grayscale(100%) invert(100%) !important; width:70px !important; padding:10px !important; border-radius:50%; margin: 0 auto; }


/* Small devices (phones) */
@media (min-width:320px) and (max-width:576px){
.card-deck{ flex-flow:column wrap; }
.why-choose-box .card.yellow-box,
.why-choose-box .card.blue-box{ background-size: contain; width:100%; margin:20px; }
.why-choose-box .card .card-body{ width:93% !important; }
}

/* Medium devices (tablets) */
@media (min-width:577px) and (max-width:768px){
.card-deck{ flex-flow:column wrap; }
.why-choose-box .card.yellow-box,
.why-choose-box .card.blue-box{ background-size: contain; width:345px; }
}

/* Large devices (desktops) */
@media (min-width:768px) and (max-width:992px){
.card-deck{ flex-flow:column wrap; }
.why-choose-box .card.yellow-box,
.why-choose-box .card.blue-box{ background-size: contain; width:345px; }
}

/* Extra large devices (larger desktops) */
@media (min-width:1200px){
.card-deck{ flex-flow:row wrap; }
.why-choose-box .card.yellow-box,
.why-choose-box .card.blue-box{ background-size: contain; width:100%; }
}
/*****/
.row-flex{ display:flex; flex-wrap:nowrap; gap:28px; }
.col-panel{ cursor:pointer; transition:all 0.3s ease; height:408px; display:flex; align-items:stretch; justify-content:center; overflow:hidden; }

/* width control via flex-basis instead of col-* */
.col-equal{ flex:0 0 33.3333%; }
.col-wide{ flex:0 0 50%; }
.col-narrow{ flex:0 0 25%; }

.panel-inner{ width:100%; height:100%; display:flex; padding:10px; border-radius:10px; }

/* COLLAPSED STATE */
.collapsed-layout{ flex-direction:row; }
.collapsed-layout .img-wrap{ flex:0 0 80%; display:flex; align-items:center; justify-content:center; }
.collapsed-layout .heading-wrap{ flex:0 0 20%; display:flex; align-items:center; justify-content:center; white-space:nowrap; }
.heading-wrap h5{ writing-mode:sideways-lr; text-orientation:mixed; text-align:center; }
.collapsed-layout .content-wrap{ display:none; }

/* EXPANDED STATE */
.expanded-layout{ flex-direction:row; background-color:var(--secondary); }
.expanded-layout .img-wrap{ flex:0 0 40%; display:flex; align-items:center; justify-content:center; }
.expanded-layout .heading-wrap{ display:none; color:#fff; }
.expanded-layout .content-wrap{ flex:0 0 60%; display:flex; flex-direction:column; justify-content:center; padding-left:15px; color:#fff; }
.expanded-layout .text-wrap{ display:block; margin-top:8px; font-size:14px; opacity:0.9; color:#fff; }
.panel-img{ max-width:100%; max-height:100%; height:100%; object-fit:cover; border-radius:8px; }

/* ---------------- DESKTOP (= 992px) ---------------- */
@media (min-width:992px){
.col-equal{ flex:0 0 33.3333%; }
.col-wide { flex:0 0 50%; }
.col-narrow{ flex:0 0 25%; }
}

/* ---------------- TABLET (768px�991px) ---------------- */
@media (min-width:768px) and (max-width:991px){
.col-equal{ flex:0 0 50%; }
.col-wide { flex:0 0 100%; }
.col-narrow{ flex:0 0 50%; }
}

/* ---------------- MOBILE (< 768px) ---------------- */
@media (max-width:767px){
.row-flex{
flex-direction: column;
}

.col-equal, .col-wide, .col-narrow{ flex:0 0 100%; }
}
/*****/
.heading-with-lines {
display: flex;
align-items: center; /* vertical center */
text-align: center;
}
.heading-with-lines::before,
.heading-with-lines::after {
content: "";
flex: 1;
border:2px solid rgba(187, 187, 187, 0.25);
/*border:2px solid #BBBBBB;*/
margin: 0 1rem; /* spacing around text */
width:70%;
background-image:url(line-left.png);
}
.case-study .lightBlueBox{
background-color: #e4e1f7;
border-radius: .75rem !important;
}
.case-study .yellowBox{
background-color: #ffeecc;
border-radius: .75rem !important;
}
.btn-gray{ background:linear-gradient(129deg, #C4C4C4, #F8F8F8); border-radius:24px; border:1px solid #BBBBBB; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); }
.btn-gray:hover{ box-shadow: 0 4px 4px rgba(0, 0, 0, 0.75); }
.btn-gray::before,
.btn-gray::after{ content:none; padding:0; }

.laptop-frame {
position: relative;
width: 100%;              /* responsive width */
max-width: 795px;        /* limit max size */
margin: auto;
background: url('img/lp-bg.png') no-repeat center center;
background-size: contain;
aspect-ratio: 795 / 459; /* 1200px x 724px keeps correct proportions */
}
/* Screen area positioned by percentage relative to frame */
.screen-area {
position: absolute;
top: 5.22%; /*top: 9.7%;*/    /* 70px / 724px ≈ 9.7% */
left: 13.08%; /*left: 11.8%;*/  /* 142px / 1200px ≈ 11.8% */
width: 74%; /*width: 75.9%;*/ /* 911px / 1200px ≈ 75.9% */
height: 84%; /*height: 71.6%;*//* 518px / 724px ≈ 71.6% */
overflow: hidden;
}
.screen-area .carousel-inner img, .screen-area img#slider-image  {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
aspect-ratio: 558 / 363;
}
.carousel-item {
border-radius: 8px;
}
/* Optional: scale controls so they don’t overlap badly */
.carousel-control-prev-icon,
.carousel-control-next-icon {
background-size: 100% 100%;
}

/* Allow controls to appear outside slider */
.screen-area {
overflow: visible !important;
}

/* Base (Desktop ≥992px) */
#laptopCarousel .carousel-control-prev,
#laptopCarousel .carousel-control-next {
top: 85%;
transform: translateY(100px);
width: 40px;
height: 40px;
background-color:var(--secondary);
border-radius: 50%;
opacity: 1;
}

/* Center with 50px gap */
#laptopCarousel .carousel-control-prev {
left: 50%;
margin-left: -85px; /* spacing logic for 60px button + 50px gap */
}

#laptopCarousel .carousel-control-next {
right: 50%;
margin-right: -85px;
}

/* White icons */
#laptopCarousel .carousel-control-prev-icon,
#laptopCarousel .carousel-control-next-icon {
filter: brightness(0) invert(1);
background-size: 60% 60%;
}

#highlight1{ margin-top:20px; } #case-studiy-highlight2{ margin-top:140px; } #case-studiy-highlight3{ margin-top:120px; } #case-studiy-highlight4{ margin-top:140px; }

.slider-buttons img:hover{
filter:drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.25));
transform:scale(1.1);
}


/* ---------- Tablet (≤991px) ---------- */
@media (max-width: 991.98px) {

#laptopCarousel .carousel-control-prev,
#laptopCarousel .carousel-control-next {
width: 40px;
height: 40px;
transform: translateY(70px);
}

/* Reduce gap to 30px */
#laptopCarousel .carousel-control-prev {
margin-left: -65px;
}

#laptopCarousel .carousel-control-next {
margin-right: -65px;
}
#highlight1{ margin-top:20px; } #case-studiy-highlight2{ margin-top:20px; } #case-studiy-highlight3{ margin-top:20px; } #case-studiy-highlight4{ margin-top:20px; }
}


/* ---------- Mobile (≤575px) ---------- */
@media (max-width: 575.98px) {

#laptopCarousel .carousel-control-prev,
#laptopCarousel .carousel-control-next {
width: 30px;
height: 30px;
transform: translateY(50px);
}

/* Smaller gap (20px total) */
#laptopCarousel .carousel-control-prev {
margin-left: -50px;
}

#laptopCarousel .carousel-control-next {
margin-right: -50px;
}
#highlight1{ margin-top:20px; } #case-studiy-highlight2{ margin-top:20px; } #case-studiy-highlight3{ margin-top:20px; } #case-studiy-highlight4{ margin-top:20px; }
}
/*****/
.profile-card {
position: relative;
display: inline-block;
}
.profile-card::before {
content: "";
position: absolute;
width: 107%;
height: 84%;
background: #FFAA01;
/*border-radius: 78% 29% 67% 42% / 53% 46% 56% 61%;*/
border-radius:30rem 7rem 6rem 9rem / 50%;
top: 16%;
left: -10%;
z-index: -1;
}

.profile-card img {
position: relative;
display: block;
max-width: 100%;
height: auto;
object-fit:cover; width:auto; min-height:690px;
}