style>



section.features-section{
    width: 100%;
    background: #06182c;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
p.text-bold {
    margin-top: 29px;
    font-size: 21px;
    font-weight: 700;
    margin-bottom: -15px;
    margin-left: 57px;
}
.downapp {
    margin-top: 75px !important;
}
section.privacy-policy {
    width: 100%;
    float: left;
    background: #fff;
    padding-top: 100px;
    padding-bottom: 100px;
}
.features-container {
    width: 100%;
    
    padding: 26px 40px 25px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    min-height: 68px;
    padding: 0 28px;
   
}
.feature-item:first-child {
    padding-left: 0;
}
.feature-icon {
    width: 40px;
    min-width: 40px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.feature-icon svg {
    width: 38px;
    height: 38px;
    stroke: #5b9cff;
    stroke-width: 1.8;
    fill: none;
}
.feature-content h3 {
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 8px;
    white-space: nowrap;
}

section.features-section{
    width: 100%;
   
}
div#border-remove {
    border-right: none;
}
.feature-content p {
    color: #fff;
    font-size: 10px;
    font-weight: 200;
}
.rental-banner {
    position: relative;
    width: 100%;
    min-height: 230px;
    border-radius: 16px;
    overflow: hidden;

    /* Background Image */
    background-image: url("https://hotelwazelanding.hotelwaze.com/images/banner-bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.15);
}


/* Dark Blue Overlay */
.banner-overlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(9, 29, 52, 0.97) 0%,
        rgba(12, 35, 61, 0.90) 38%,
        rgba(10, 28, 48, 0.35) 70%,
        rgba(8, 22, 38, 0.20) 100%
    );

    z-index: 1;
}


/* Main Content */
.banner-content {
    position: relative;
    z-index: 2;

    width: 100%;
    min-height: 230px;

    display: flex;
    align-items: center;

    padding: 28px 44px;
}


/* Left Text */
.banner-text {
    color: #ffffff;
}

.banner-text h1 {
    font-size: 36px;
    line-height: 1.08;
    font-weight: 700;
    margin-bottom: 12px;

    font-family: Arial, sans-serif;
}

.banner-text p {
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 18px;

    font-family: Arial, sans-serif;
}


/* Explore Button */
.deal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(
        135deg,
        #3479d4,
        #245ca9
    );

    color: #ffffff;
    text-decoration: none;

    padding: 13px 25px;
    min-width: 138px;

    border-radius: 6px;

    font-size: 14px;
    font-weight: 600;

    transition: 0.3s ease;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.15),
        0 5px 15px rgba(0,0,0,0.20);
}

.deal-btn:hover {
    transform: translateY(-2px);
    background: #2d6cc2;
}


/* Discount Box */
.discount-box {
    position: absolute;

    left: 54%;
    top: 50%;

    transform: translate(-50%, -50%);

    width: 112px;
    height: 120px;

    border-radius: 16px;

    background: linear-gradient(
        145deg,
        #3678ca,
        #245a9e
    );

    display: flex;
    flex-direction: column;

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

    color: #ffffff;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.20),
        inset 0 1px 0 rgba(255,255,255,0.12);
}

.discount-box span {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;

    color: rgba(255,255,255,0.85);
}

.discount-number {
    font-size: 43px;
    line-height: 1;
    font-weight: 700;
}

.discount-number sup {
    font-size: 22px;
    vertical-align: top;
    position: relative;
    top: 4px;
}

.discount-box strong {
    font-size: 14px;
    margin-top: 5px;
    font-weight: 600;
}

.stats-section {
    width: 100%;
    background: #05162A;
    padding: 20px 28px 24px;
    font-family: Arial, sans-serif;
}


/* Main Border Box */

.stats-container {
    width: 100%;
    max-width: 1400px;
    margin: auto;

    min-height: 130px;

    display: flex;
    align-items: center;

    padding: 20px 28px;

    border: 2px solid rgba(71, 110, 151, 0.25);
    border-radius: 18px;

    background: rgba(8, 25, 43, 0.75);

    box-shadow:
        inset 0 0 25px rgba(20, 55, 85, 0.15),
        0 8px 25px rgba(0, 0, 0, 0.12);
}


/* Statistics */

.stat-item {
    display: flex;
    align-items: center;

    gap: 16px;

    padding: 10px 25px;

    min-width: 190px;
}


/* Icon */

.stat-icon {
    width: 48px;
    height: 48px;

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

    color: #5b91d7;

    font-size: 30px;

    flex-shrink: 0;
}

.stat-icon i {
    filter: drop-shadow(0 0 4px rgba(80, 140, 220, 0.3));
}


/* Text */

.stat-content h3 {
    color: #e8edf5;

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

    margin-bottom: 7px;

    white-space: nowrap;
}

.stat-content p {
    color: #8d9aab;

    font-size: 13px;
    font-weight: 500;

    white-space: nowrap;
}


/* Booking Area */

.booking-box {
    margin-left: auto;

    display: flex;
    flex-direction: column;

    justify-content: center;

    min-width: 245px;

    padding-left: 20px;
}


.booking-box h3 {
    color: #e9edf4;

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

    margin-bottom: 8px;
}

.booking-box p {
    color: #a0aaba;

    font-size: 14px;

    margin-bottom: 15px;
}


/* Button */

.book-btn {
    width: 128px;
    height: 36px;

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

    text-decoration: none;

    background: linear-gradient(
        135deg,
        #3978cf,
        #2860ad
    );

    color: #ffffff;

    font-size: 14px;
    font-weight: 600;

    border-radius: 6px;

    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.15),
        0 4px 10px rgba(0, 0, 0, 0.2);

    transition: all 0.3s ease;
}

.book-btn:hover {
    transform: translateY(-2px);

    background: #3674c8;
}





:root{--blue:#1268ee;--navy:#071c34;--text:#102d49;--muted:#71859a;--line:rgba(20,75,125,.13)}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:Inter,Arial,sans-serif;color:var(--text);background:linear-gradient(190deg, #051628, #05162A 45%, #05162A 78%);overflow-x:hidden}a{text-decoration:none;color:inherit}.wrap{width:min(1372px,92%);margin:auto}img{display:block;width:100%}button,input{font:inherit}header{position:absolute;z-index:20;top:0;width:100%;
background: #05162A;color:#fff;border-bottom:1px solid #ffffff22;transition:.3s}header.scrolled{position:fixed;background:#071c34ee;backdrop-filter:blur(16px)}.nav{height:82px;display:flex;align-items:center;justify-content:space-between}.logo{display:flex;align-items:center;gap:10px}.logo>b{width:40px;height:29px;display:grid;place-items:center;background:linear-gradient(135deg,#fff,#74b8ff);color:#1468df;border-radius:8px 20px 8px 20px;font-size:20px;font-style:italic}.logo span{font-size:18px;font-weight:700}.logo small{display:block;font-size:8px;color:#c7d8e8;margin-top:3px;font-weight:400}.nav nav{}.nav>nav{display:flex;gap:28px}.nav nav a{font-size:13px;color:#e6eef5;position:relative}.nav nav a:after{content:'';position:absolute;left:0;bottom:-11px;width:0;height:2px;background:#fff;transition:.3s}.nav nav a:hover:after,.nav nav a.active:after{width:100%}.right{display:flex;align-items:center;gap:17px;font-size:13px}.signin{border:1px solid #ffffff88;border-radius:8px;padding:10px 16px}.signin:hover{background:#fff;color:#1268ee}.hamburger{display:none;background:none;border:0;color:#fff;font-size:26px}
a.logos {
    width: 105px;
    display: inline-block;
}
.head h2 {
    color: #fff;
}
.book-apps {
  
    grid-template-columns: repeat(7, 1fr);
    display: grid;
    
}
.book-apps .app {
    border: none;
}
.booking.glass.reveal.show {
    display: none;
}
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) !important;
    opacity: 1 !important;
    cursor: pointer;
}
button#menu {
    /* display: none; */
    visibility: hidden;
}
.trust.reveal.show i {
    font-size: 40px;
}
.hero{position:relative;min-height:664px;color:#fff;overflow:hidden}.hero-bg{position:absolute;inset:0;background:linear-gradient(90deg, #051628, #06152214 45%, #0a315c30 78%), url(../images/hero.jpg) center / cover, url(../images/inner-page.png) center / cover}.hero-inner{position:relative;padding-top:155px;z-index:2}.copy label,.head small,.deal small,.booking-head small
{font-size:10px;letter-spacing:2px;color:#fff;font-weight:800}.copy h1{font:700 clamp(48px,6vw,76px)/.98 "Scoutie Sans", sans-serif;letter-spacing:-2px;margin:15px 0 20px}.copy h1 em,.deal h2 em
{color:#fff;font-style:normal}.copy p{max-width:500px;color:#d4e1ed;line-height:1.65;font-size:16px}.glass{background:#ffffff20;border:1px solid #ffffff48;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:0 25px 70px #0003}.booking{max-width:1050px;margin-top:33px;padding:21px;border-radius:20px}.booking-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:15px}.booking-head h2{font-size:22px;margin-top:5px}.booking-head>span{font-size:10px;color:#dce9f4}.fields{display:grid;grid-template-columns:1.3fr 1fr 1fr auto;gap:12px}.fields label{font-size:10px;color:#dce8f2}.fields label>div{height:49px;margin-top:7px;display:flex;align-items:center;gap:8px;border:1px solid #ffffff44;border-radius:9px;background:#061f3b40;padding:0 12px}.fields i{font-style:normal;color:#80bbff;font-size:18px}.fields input{width:100%;border:0;outline:0;background:transparent;color:#fff;font-size:12px}.fields input::placeholder{color:#c7d5e1}.fields button{height:49px;align-self:end;border:0;border-radius:9px;padding:0 24px;background:linear-gradient(135deg,#55a4ff,#1465df);color:#fff;font-weight:700;cursor:pointer;transition:.3s}.fields button:hover{transform:translateY(-3px)}.trust{display:grid;grid-template-columns:repeat(4,1fr);margin-top:28px;border:1px solid #ffffff2e;border-radius:16px;background:#061f3b55;backdrop-filter:blur(14px)}
.trust div {
    padding: 13px 10px;
    color: #78baff;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 0px;
    border-right: 1px solid #ffffff1f;
    align-items: center;
}
.trust div:last-child{border:0}.trust b{color:#fff;font-size:12px}.trust small{color:#aabdd0;font-size:9px}.section{padding:45px 0}.head{display:flex;align-items:end;justify-content:space-between;margin-bottom:20px}.head h2{font-size:28px;margin-top:5px}.head>a{color:#1268ee;font-size:12px}.cars{display:grid;grid-template-columns:repeat(4, 1fr);gap:16px}.card{overflow:hidden;border:1px solid var(--line);border-radius:16px;background:#ffffffc9;box-shadow:0 18px 50px #104d8314;transition:.4s;backdrop-filter:blur(14px)}.card:hover{transform:translateY(-8px);box-shadow:0 28px 70px #104d8326}.car{height:175px;background:#e8f2fc;position:relative;overflow:hidden}.car img{height:100%;object-fit:cover;transition:.5s}.card:hover .car img{transform:scale(1.07)}.car>span{position:absolute;z-index:2;top:11px;left:11px;background:#fff;color:#1c67b9;border-radius:5px;padding:5px 9px;font-size:10px;font-weight:700}.car button{position:absolute;z-index:3;right:10px;top:10px;width:31px;height:31px;border:1px solid #d9e3ed;border-radius:50%;background:#ffffffdf;color:#315471;font-size:18px;cursor:pointer}.car button:hover{background:#1268ee;color:#fff}.info{padding:15px}.info h3{font-size:15px;margin-bottom:7px}.info strong{color:#1268ee;font-size:16px}.info strong small{color:#788b9f;font-size:10px;font-weight:400}.info p{margin-top:13px;color:#71869b;font-size:9px}.deal{min-height:235px;border-radius:20px;padding:31px 38px;position:relative;overflow:hidden;background:linear-gradient(90deg,#082849,#1268d0)}.deal>div:first-child{position:relative;z-index:3;max-width:400px}.deal h2{font-size:32px;line-height:1.03;margin:8px 0}.deal p{font-size:12px;color:#dbe8f5;line-height:1.6;margin:0 0 15px}
.primary{display: none !important;display:inline-block;padding:11px 17px;background:#fff;color:#1268ee;border-radius:8px;font-size:11px;font-weight:800;transition:.3s}.primary:hover{transform:translateY(-3px);box-shadow:0 12px 25px #0003}.discount{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);width:106px;height:106px;border-radius:50%;display:flex!important;flex-direction:column;align-items:center;justify-content:center;background:#ffffff20;border:1px solid #ffffff66;backdrop-filter:blur(12px);color:#fff}.discount small{font-size:8px;color:#fff}.discount b{font-size:34px;line-height:1}.discount span{font-size:8px}.deal>img{position:absolute;width:58%;right:-4%;bottom:-22%;z-index:2;filter:drop-shadow(0 25px 25px #0004)}.dest{display:grid;grid-template-columns:1.15fr repeat(4,1fr);gap:13px}.dest a{height:155px;position:relative;overflow:hidden;border-radius:13px;box-shadow:0 12px 30px #104d8312;transition:.4s}.dest a:hover{transform:translateY(-6px)}.dest img{height:100%;object-fit:cover;transition:.6s}.dest a:hover img{transform:scale(1.1)}.dest a:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 30%,#031b32d9)}.dest b,.dest small{position:absolute;z-index:2;left:13px;color:#fff}.dest b{bottom:29px;font-size:13px}.dest small{bottom:13px;font-size:9px}
.stats {
    display: grid;
    grid-template-columns: repeat(4,1fr) 1.35fr;
    align-items: center;
    padding: 22px;
    border-radius: 18px;
    background: #05162A;
    border: 1px solid grey;
    box-shadow: 0 18px 50px #104d8312;
    color: #fff;
}
div#copyright {
    text-align: center;
    font-size:13px;
}
.copy.reveal.show h1 {
    text-align: left;
}
.book-apps .app {
    border: none;
    width: 193px !important;
  
}
section.policy {
    width: 100%;
    float: left;
    background: #fff;
    padding-top: 119px;
    padding-bottom: 65px;
}
section.privacy-policy h2 {
    font-size: 19px;
    font-weight: 600;
}

.stats>div{padding:4px 18px;border-right:1px solid var(--line)}.stats>div:last-child{border:0}.stats b{font-size:21px}.stats small{display:block;color:#75899c;font-size:9px;margin-top:5px}.stats h3{font-size:15px}.stats p{font-size:10px;color:#788da0;margin:5px 0 10px}footer{background:#05162A;color:#fff;padding:45px 0 18px}.footer{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:38px}.footer p{max-width:280px;color:#91a6b9;font-size:13px;line-height:1.7;margin-top:16px}.footer h4{font-size:15px;letter-spacing:1.2px;color:#7f96aa;margin-bottom:15px}.footer>div:not(:first-child)>a{display:block;color:#b9c7d5;font-size:13px;margin-bottom:9px}.app{width:125px;padding:2px 10px;border-radius:7px;font-size:10px;margin-bottom:2px}
.copy{
    top:30px;padding-top:17px;color:#fff;font-size:9px;}#toast{position:fixed;right:24px;bottom:24px;background:#082849;color:#fff;padding:12px 17px;border-radius:9px;opacity:0;transform:translateY(12px);transition:.3s;z-index:100;box-shadow:0 15px 40px #0003}#toast.show{opacity:1;transform:none}.reveal{opacity:0;transform:translateY(24px);transition:.7s}.reveal.show{opacity:1;transform:none}
@media(max-width:1050px){.nav>nav{gap:16px}.fields{grid-template-columns:1fr 1fr}.fields button{grid-column:span 2}.cars{grid-template-columns:repeat(2,1fr)}.dest{grid-template-columns:repeat(3,1fr)}.stats{grid-template-columns:repeat(2,1fr);gap:10px}.stats>div{border:0}.stats>div:last-child{grid-column:span 2;border-top:1px solid var(--line);padding-top:15px}}
@media(max-width:760px){.features-container{
    width: 100%;
    padding: 26px 40px 25px;
    display: grid;
    grid-template-columns: 1fr;
} 
button#menu {
    /* display: none; */
    visibility: visible;
}
.discount-box {
    position: absolute;
    left: 82%;
    top: 82%;
    transform: translate(-50%, -50%);
    width: 84px;
    height: 84px;
    border-radius: 16px;
    background: linear-gradient(
        145deg,
        #3678ca,
        #245a9e
    );
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.20),
        inset 0 1px 0 rgba(255,255,255,0.12);
}
.stats-container {
    width: 100%;
    max-width: 1359px;
    margin: auto;
    min-height: 130px;
    display: flex;
    align-items: center;
    padding: 20px 28px;
    border: 2px solid rgba(71, 110, 151, 0.25);
    border-radius: 18px;
    background: rgba(8, 25, 43, 0.75);
    box-shadow: inset 0 0 25px rgba(20, 55, 85, 0.15),
        0 8px 25px rgba(0, 0, 0, 0.12);
    grid-template-columns: 1fr;
    display: grid;
}
.book-apps {
 
    display: inline-flex;
    margin-left: -17%;
}
p.text-bold {
    margin-top: 29px;
    font-size: 21px;
    font-weight: 700;
    margin-bottom: -15px;
    margin-left: 0;
}
.nav{height:70px}.nav>nav{position:absolute;top:70px;left:0;width:100%;padding:15px 5%;display:flex;flex-direction:column;gap:0;background:#061d35;
transform:translateY(-130%);opacity:0;pointer-events:none;transition:.35s}.nav>nav.open{transform:none;opacity:1;pointer-events:auto}.nav nav a{padding:11px 0}.right{display:none}.hamburger{display:block}.hero{min-height:460px}.hero-inner{padding-top:125px}
.trust{grid-template-columns:repeat(4, 1fr)} .trust div{grid-template-columns:repeat(4, 1fr)} .trust div:nth-child(2){border-right:0}.trust div:nth-child(3),.trust div:nth-child(4){border-top:1px solid #ffffff1f}.deal{min-height:355px}.deal>img{width:80%;right:-15%;bottom:-5%}.discount{left:auto;right:27%;top:auto;bottom:40px;transform:none}.footer{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.wrap{width:95%}.hero-bg{background-position:65% center}.copy h1{font-size:45px}
.booking-head{flex-direction:column;align-items:start;gap:8px}.fields{grid-template-columns:1fr}.fields button{grid-column:auto}.trust{grid-template-columns:repeat(4, 2fr)}.trust div{border-right:0!important;border-bottom:1px solid #ffffff1f}.trust div:last-child{border-bottom:0}
.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    min-height: 68px;
    padding: 0 0;
    border-right: none;
}.cars{grid-template-columns:1fr}.car{height:205px}.dest{grid-template-columns:1fr 1fr}.dest a{height:140px}.stats{grid-template-columns:1fr 1fr}.stats>div:last-child{grid-column:span 2}.deal{padding:25px 22px}.discount{right:23px;width:82px;height:82px}.discount b{font-size:25px}.deal>img{width:100%;right:-28%;bottom:-4%}.footer{grid-template-columns:1fr}.section{padding:36px 0}}
@media(max-width:370px){.features-container {
 
    display: grid;
    grid-template-columns: 1fr;
}.dest{grid-template-columns:1fr}.stats{grid-template-columns:1fr}.stats>div:last-child{grid-column:auto}.copy h1{font-size:39px}.reveal.show {
    
    float: left;
}
}


.copy label {
    display: block;
    text-align: left;
}
img.playnow {
    margin-left: -6px;
    width: 113px;
}
.heros-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #051628, #06152214 45%, #0a315c30 78%), url(../images/hero.jpg) center / cover, url(../images/inner-page.png) center / cover;
    
   
    background-size: cover;
    height: 680px;
}

/* =========================
   LEFT CONTENT
========================= */

.about-content {
    max-width: 620px;
    padding-top:90px;
}

.about-tag {
    display: inline-block;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;

    color: #0b4a80;
    background: #e9f3fc;

    padding: 9px 18px;
    border-radius: 30px;

    margin-bottom: 20px;
}

.about-content h2 {
    font-size: 46px;
    line-height: 1.15;

    color: #fff;

    margin: 0 0 25px;

    font-weight: 700;
}

.about-content h2 span {
    color: #0c568f;
}

.about-content p {
    font-size: 16px;
    line-height: 1.8;

    color: #66788a;

    margin: 0 0 15px;
}
/* =========================
   ABOUT SECTION
========================= */

.about-section {
    width: 100%;
    padding: 20px 0;
    background: #f7faff;
    overflow: hidden;
    position: relative;
}

.about-container {
    max-width: 1280px;
    margin: auto;
    padding: 0 40px;

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


/* =========================
   LEFT CONTENT
========================= */

.about-content {
    max-width: 620px;
}

.about-tag {
    display: inline-block;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;

    color: #0b4a80;
    background: #e9f3fc;

    padding: 9px 18px;
    border-radius: 30px;

    margin-bottom: 20px;
}

.about-content h2 {
    font-size: 46px;
    line-height: 1.15;

    color: #172b3d;

    margin: 0 0 25px;

    font-weight: 700;
}

.about-content h2 span {
    color: #0c568f;
}

.about-content p {
    font-size: 16px;
    line-height: 1.8;

    color: #66788a;

    margin: 0 0 15px;
}


/* =========================
   BOTTOM CONTENT
========================= */

.about-bottom {
    display: flex;
    align-items: center;
    gap: 35px;

    margin-top: 32px;
}


/* Button */

.about-btn {
    display: inline-flex;
    align-items: center;
    gap: 15px;

    background: #0b4f85;
    color: #ffffff;

    text-decoration: none;

    padding: 15px 24px;
    border-radius: 8px;

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

    transition: 0.3s ease;
}

.about-btn span {
    font-size: 20px;
    transition: 0.3s ease;
}

.about-btn:hover {
    background: #082f51;
    transform: translateY(-3px);
}

.about-btn:hover span {
    transform: translateX(5px);
}


/* Stats */

.about-info {
    display: flex;
    flex-direction: column;
}

.about-info strong {
    font-size: 25px;
    color: #123e62;
}

.about-info small {
    color: #7b8995;
    font-size: 13px;
    margin-top: 3px;
}


/* =========================
   RIGHT IMAGE AREA
========================= */

.about-images {
    position: relative;

    min-height: 560px;

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


/* Background Shape */

.image-bg-shape {
    position: absolute;

    width: 400px;
    height: 400px;

    background: linear-gradient(
        135deg,
        #dcecf9,
        #edf5fb
    );

    border-radius: 50%;

    right: 20px;
    top: 70px;

    z-index: 0;
}


/* Main Image */

.main-image {
    width: 390px;
    height: 460px;

    position: absolute;

    right: 0;
    top: 20px;

    overflow: hidden;

    border-radius: 25px;

    box-shadow: 0 25px 60px rgba(20, 55, 85, 0.20);

    z-index: 1;
}

.main-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: 0.5s ease;
}

.main-image:hover img {
    transform: scale(1.06);
}


/* Small Image */

.small-image {
    width: 240px;
    height: 300px;

    position: absolute;

    left: 0;
    bottom: 10px;

    border: 10px solid #ffffff;

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 20px 50px rgba(20, 55, 85, 0.25);

    z-index: 3;
}

.small-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: 0.5s ease;
}

.small-image:hover img {
    transform: scale(1.08);
}


/* =========================
   PLAY BUTTON
========================= */

.play-btn {
    position: absolute;

    width: 65px;
    height: 65px;

    border: none;

    border-radius: 50%;

    background: #0b4f85;

    color: white;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    cursor: pointer;

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

    box-shadow: 0 8px 25px rgba(11, 79, 133, 0.4);

    transition: 0.3s ease;
}

.play-btn span {
    font-size: 20px;
    margin-left: 3px;
}

.play-btn:hover {
    transform: translate(-50%, -50%) scale(1.1);
    background: #083b65;
}


/* =========================
   FLOATING BADGE
========================= */

.experience-box {
    position: absolute;

    right: 20px;
    bottom: 0;

    background: #ffffff;

    padding: 17px 22px;

    border-radius: 12px;

    display: flex;
    align-items: center;
    gap: 12px;

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);

    z-index: 5;
}

.experience-icon {
    width: 42px;
    height: 42px;

    border-radius: 50%;

    background: #e8f3fb;

    color: #0b4f85;

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

    font-size: 20px;
}

.experience-box strong {
    display: block;

    color: #18354d;
    font-size: 15px;
}

.experience-box span {
    display: block;

    color: #81909d;
    font-size: 12px;

    margin-top: 3px;
}


/* =========================
   TABLET
========================= */

@media (max-width: 1000px) {

    .about-container {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .about-content {
        max-width: 100%;
        text-align: center;
    }

    .about-bottom {
        justify-content: center;
    }

    .about-images {
        max-width: 650px;
        width: 100%;
        margin: auto;
    }
}


/* =========================
   MOBILE
========================= */

@media (max-width: 600px) {

    .about-section {
        padding: 70px 0;
    }

    .about-container {
        padding: 0 20px;
        gap: 45px;
    }

    .about-content h2 {
        font-size: 32px;
    }

    .about-content p {
        font-size: 14px;
        line-height: 1.7;
    }

    .about-bottom {
        flex-wrap: wrap;
        gap: 20px;
    }

    .about-images {
        min-height: 450px;
    }

    .main-image {
        width: 75%;
        height: 350px;

        right: 0;
    }

    .small-image {
        width: 190px;
        height: 240px;

        left: 0;
        bottom: 15px;

        border-width: 7px;
    }

    .image-bg-shape {
        width: 300px;
        height: 300px;

        right: 0;
        top: 70px;
    }

    .experience-box {
        right: 0;
        bottom: -5px;

        padding: 12px 15px;
    }

    .experience-icon {
        width: 35px;
        height: 35px;
    }
}


/* =========================
   SMALL MOBILE
========================= */

@media (max-width: 400px) {

    .about-content h2 {
        font-size: 28px;
    }

    .about-bottom {
        flex-direction: column;
        align-items: center;
    }

    .main-image {
        width: 78%;
        height: 310px;
    }

    .small-image {
        width: 160px;
        height: 210px;
    }

    .experience-box {
        right: 5px;
    }
}

</style>